朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 ac2e4780259498beb688e12df715c5285a713e43 1 个父辈 d06e2bfa

权限，角色设置和日志

内嵌 并排对比
正在显示 7 个修改的文件 包含 270 行增加 和 14 行删除
  1 +import axios from 'axios'
  2 +
  3 +axios.defaults.baseURL = 'http://localhost:8082/api';
  4 +let base = axios.defaults.baseURL+'/system/log';
  5 +
  6 +
  7 +export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
@@ -35,4 +35,13 @@ export const add = params => { return axios({ @@ -35,4 +35,13 @@ export const add = params => { return axios({
35 headers: { 35 headers: {
36 'Content-Type': 'application/json;charset=UTF-8' 36 'Content-Type': 'application/json;charset=UTF-8'
37 } 37 }
  38 +})};
  39 +
  40 +export const updateRolePerm = params => { return axios({
  41 + method: 'PUT',
  42 + url: `${base}/permSet`,
  43 + data: params,
  44 + headers: {
  45 + 'Content-Type': 'application/json;charset=UTF-8'
  46 + }
38 })}; 47 })};
@@ -5,6 +5,7 @@ import Main from './views/Main.vue' @@ -5,6 +5,7 @@ import Main from './views/Main.vue'
5 // import Table from './views/nav1/Table.vue' 5 // import Table from './views/nav1/Table.vue'
6 import Role from './views/nav1/role.vue' 6 import Role from './views/nav1/role.vue'
7 import Perm from './views/nav1/perm.vue' 7 import Perm from './views/nav1/perm.vue'
  8 +import LOG from './views/nav1/Log.vue'
8 // import Form from './views/nav1/Form.vue' 9 // import Form from './views/nav1/Form.vue'
9 10
10 import User from './views/nav1/user.vue' 11 import User from './views/nav1/user.vue'
@@ -40,13 +41,13 @@ let routes = [ @@ -40,13 +41,13 @@ let routes = [
40 { 41 {
41 path: '/admin', 42 path: '/admin',
42 component: Home, 43 component: Home,
43 - name: '用户管理', 44 + name: '系统设置',
44 iconCls: 'el-icon-setting',//图标样式class 45 iconCls: 'el-icon-setting',//图标样式class
45 children: [ 46 children: [
46 { path: '/user', component: User, name: '用户管理' }, 47 { path: '/user', component: User, name: '用户管理' },
47 { path: '/role', component: Role, name: '角色管理' }, 48 { path: '/role', component: Role, name: '角色管理' },
48 { path: '/perm', component: Perm, name: '权限管理' }, 49 { path: '/perm', component: Perm, name: '权限管理' },
49 - 50 + { path: '/log', component: LOG, name: '系统日志' },
50 ] 51 ]
51 }, 52 },
52 { 53 {
@@ -96,12 +96,13 @@ @@ -96,12 +96,13 @@
96 console.log('submit!'); 96 console.log('submit!');
97 }, 97 },
98 handleopen() { 98 handleopen() {
99 - //console.log('handleopen'); 99 + console.log('handleopen');
100 }, 100 },
101 handleclose() { 101 handleclose() {
102 - //console.log('handleclose'); 102 + console.log('handleclose');
103 }, 103 },
104 handleselect: function (a, b) { 104 handleselect: function (a, b) {
  105 + console.log('handleselect!');
105 }, 106 },
106 //退出登录 107 //退出登录
107 logout: function () { 108 logout: function () {
  1 +<template>
  2 + <section>
  3 + <!--工具条-->
  4 + <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
  5 + <el-form :inline="true" :model="filters">
  6 + <el-form-item>
  7 + <el-input v-model="filters.username" placeholder="账号"></el-input>
  8 + </el-form-item>
  9 + <el-form-item>
  10 + <el-input v-model="filters.methodname" placeholder="系统动作"></el-input>
  11 + </el-form-item>
  12 + <el-form-item>
  13 + <el-input v-model="filters.modelnamecn" placeholder="操作模块"></el-input>
  14 + </el-form-item>
  15 + <el-form-item>
  16 + <el-button type="primary" v-on:click="getRoles()">查询</el-button>
  17 + </el-form-item>
  18 + </el-form>
  19 + </el-col>
  20 + <!--列表-->
  21 + <el-table :data="logs" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
  22 + <el-table-column type="index" width="60">
  23 + </el-table-column>
  24 + <el-table-column prop="logid" label="ID" width="80" sortable>
  25 + </el-table-column>
  26 + <el-table-column prop="username" label="操作账号" width="120" sortable>
  27 + </el-table-column>
  28 + <el-table-column prop="ip" label="IP" width="100" sortable>
  29 + </el-table-column>
  30 + <el-table-column prop="logcreattime" label="操作时间" width="200" sortable>
  31 + </el-table-column>
  32 + <el-table-column prop="methodname" label="系统动作" width="120" sortable>
  33 + </el-table-column>
  34 + <el-table-column prop="operatenamecn" label="动作描述" width="120" sortable>
  35 + </el-table-column>
  36 + <el-table-column prop="modelnamecn" label="操作模块" width="120" sortable>
  37 + </el-table-column>
  38 + <!--<el-table-column prop="parameters" label="参数" width="100" sortable>-->
  39 + <!--</el-table-column>-->
  40 + <el-table-column prop="classname" label="系统类" width="100" sortable>
  41 + </el-table-column>
  42 + <el-table-column prop="result" label="操作结果" min-width="200" sortable>
  43 + </el-table-column>
  44 + </el-table>
  45 +
  46 + <!--工具条-->
  47 + <el-col :span="24" class="toolbar">
  48 + <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
  49 + </el-pagination>
  50 + </el-col>
  51 + </section>
  52 +</template>
  53 +
  54 +<script>
  55 + import util from '../../common/js/util'
  56 + import NProgress from 'nprogress'
  57 + import moment from 'moment'
  58 + import { getList } from '../../api/log_api';
  59 + export default {
  60 + data() {
  61 + return {
  62 + filters: {},
  63 + logs: [],
  64 + total: 0,
  65 + pageNum: 1,
  66 + pageSize: 10,
  67 + listLoading: false,
  68 + sels: [],//列表选中列
  69 + }
  70 + },
  71 + methods: {
  72 + //性别显示转换
  73 + formatSex: function (row, column) {
  74 + return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
  75 + },
  76 + formatState: function (row, column) {
  77 + return row.state == true ? '是' : row.state == false ? '否' : '未知';
  78 + },
  79 + handleCurrentChange(val) {
  80 + this.pageNum = val;
  81 + this.getRoles();
  82 + },
  83 + //获取角色列表
  84 + getLogs() {
  85 + let para = {
  86 + pageNum: this.pageNum,
  87 + pageSize: this.pageSize,
  88 + };
  89 + this.listLoading = true;
  90 + //NProgress.start();
  91 + getList(para).then((res) => {
  92 + this.total = res.data.total;
  93 + this.logs = res.data.list;
  94 + this.listLoading = false;
  95 + //NProgress.done();
  96 + }).catch((error) => {
  97 +
  98 + this.listLoading = false;
  99 + if(null!= error.response && error.response!==undefined){
  100 + let status= error.response.status;
  101 + let msg = error.response.statusText;
  102 + alert(status+msg);
  103 + }else {
  104 + alert(error);
  105 + }
  106 +
  107 +
  108 +
  109 + });
  110 +
  111 + },
  112 + selsChange: function (sels) {
  113 + this.sels = sels;
  114 + },
  115 + //批量删除
  116 + batchRemove: function () {
  117 + var ids = this.sels.map(item => item.id).toString();
  118 + this.$confirm('确认删除选中记录吗？', '提示', {
  119 + type: 'warning'
  120 + }).then(() => {
  121 + this.listLoading = true;
  122 + //NProgress.start();
  123 + let para = { ids: ids };
  124 + batchRemove(para).then((res) => {
  125 + this.listLoading = false;
  126 + //NProgress.done();
  127 + this.$message({
  128 + message: '删除成功',
  129 + type: 'success'
  130 + });
  131 + this.getRoles();
  132 + });
  133 + }).catch(() => {
  134 +
  135 + });
  136 + }
  137 + },
  138 + mounted() {
  139 + this.getLogs();
  140 + }
  141 + }
  142 +
  143 +</script>
  144 +
  145 +<style scoped>
  146 +
  147 +</style>
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;"> 4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
5 <el-form :inline="true" :model="filters"> 5 <el-form :inline="true" :model="filters">
6 <el-form-item> 6 <el-form-item>
7 - <el-input v-model="filters.roleName" placeholder="权限名称"></el-input> 7 + <el-input v-model="filters.permName" placeholder="权限名称"></el-input>
8 </el-form-item> 8 </el-form-item>
9 <el-form-item> 9 <el-form-item>
10 <el-button type="primary" v-on:click="getRoles()">查询</el-button> 10 <el-button type="primary" v-on:click="getRoles()">查询</el-button>
@@ -110,7 +110,7 @@ @@ -110,7 +110,7 @@
110 data() { 110 data() {
111 return { 111 return {
112 filters: { 112 filters: {
113 - roleName: '' 113 + permName: ''
114 }, 114 },
115 tableList: [], 115 tableList: [],
116 total: 0, 116 total: 0,
@@ -170,7 +170,7 @@ @@ -170,7 +170,7 @@
170 let para = { 170 let para = {
171 pageNum: this.pageNum, 171 pageNum: this.pageNum,
172 pageSize: this.pageSize, 172 pageSize: this.pageSize,
173 - roleName: this.filters.roleName 173 + name: this.filters.permName
174 }; 174 };
175 this.listLoading = true; 175 this.listLoading = true;
176 //NProgress.start(); 176 //NProgress.start();
@@ -29,8 +29,9 @@ @@ -29,8 +29,9 @@
29 </el-table-column> 29 </el-table-column>
30 <el-table-column prop="roleSign" label="排序" width="100" sortable> 30 <el-table-column prop="roleSign" label="排序" width="100" sortable>
31 </el-table-column> 31 </el-table-column>
32 - <el-table-column label="操作" min-width="150"> 32 + <el-table-column label="操作" min-width="260">
33 <template slot-scope="scope"> 33 <template slot-scope="scope">
  34 + <el-button size="small" @click="setPerm(scope.$index, scope.row)">设置权限</el-button>
34 <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> 35 <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
35 <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button> 36 <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
36 </template> 37 </template>
@@ -87,13 +88,27 @@ @@ -87,13 +88,27 @@
87 <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button> 88 <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
88 </div> 89 </div>
89 </el-dialog> 90 </el-dialog>
  91 +
  92 + <!--权限设置界面-->
  93 + <el-dialog title="角色的权限设置" v-model="PermFormVisible" :close-on-click-modal="false">
  94 + <el-form :model="permForm" label-width="80px" ref="permForm">
  95 + <el-checkbox-group v-model="permIds" size="small">
  96 + <el-checkbox v-for="perm in permissons" :label="perm.permissionId" :key="perm.permissionId">{{perm.name}}</el-checkbox>
  97 + </el-checkbox-group>
  98 + </el-form>
  99 + <div slot="footer" class="dialog-footer">
  100 + <el-button @click.native="PermFormVisible = false">取消</el-button>
  101 + <el-button type="primary" @click.native="setPermSubmit" :loading="addLoading">提交</el-button>
  102 + </div>
  103 + </el-dialog>
90 </section> 104 </section>
91 </template> 105 </template>
92 106
93 <script> 107 <script>
94 import util from '../../common/js/util' 108 import util from '../../common/js/util'
95 - //import NProgress from 'nprogress'  
96 - import { getList, remove, batchRemove, edit, add } from '../../api/role_api'; 109 + import NProgress from 'nprogress'
  110 + import { getList, remove, batchRemove, edit, add, updateRolePerm } from '../../api/role_api';
  111 + import { getList as permList } from '../../api/perm_api';
97 import moment from 'moment' 112 import moment from 'moment'
98 export default { 113 export default {
99 data() { 114 data() {
@@ -102,6 +117,8 @@ @@ -102,6 +117,8 @@
102 roleName: '' 117 roleName: ''
103 }, 118 },
104 roles: [], 119 roles: [],
  120 + permissons: [],
  121 + permIds: [],
105 total: 0, 122 total: 0,
106 pageNum: 1, 123 pageNum: 1,
107 pageSize: 5, 124 pageSize: 5,
@@ -122,8 +139,12 @@ @@ -122,8 +139,12 @@
122 roleName: '', 139 roleName: '',
123 roleSign: 1 140 roleSign: 1
124 }, 141 },
125 -  
126 - addFormVisible: false,//新增界面是否显示 142 + //设置权限数据
  143 + setPermForm: {},
  144 + //新增界面是否显示
  145 + addFormVisible: false,
  146 + //设置权限界面是否显示
  147 + PermFormVisible: false,
127 addLoading: false, 148 addLoading: false,
128 addFormRules: { 149 addFormRules: {
129 roleName: [ 150 roleName: [
@@ -138,6 +159,13 @@ @@ -138,6 +159,13 @@
138 description: '', 159 description: '',
139 roleName: '', 160 roleName: '',
140 roleSign: 1 161 roleSign: 1
  162 + },
  163 + permForm: {
  164 + roleId: 1,
  165 + description: '',
  166 + roleName: '',
  167 + roleSign: 1,
  168 + permissions: []
141 } 169 }
142 170
143 } 171 }
@@ -154,7 +182,7 @@ @@ -154,7 +182,7 @@
154 this.pageNum = val; 182 this.pageNum = val;
155 this.getRoles(); 183 this.getRoles();
156 }, 184 },
157 - //获取列表 185 + //获取角色列表
158 getRoles() { 186 getRoles() {
159 let para = { 187 let para = {
160 pageNum: this.pageNum, 188 pageNum: this.pageNum,
@@ -184,6 +212,27 @@ @@ -184,6 +212,27 @@
184 }); 212 });
185 213
186 }, 214 },
  215 + //获取权限列表
  216 + getPermList() {
  217 + let para = {
  218 + pageNum: 1,
  219 + pageSize: 200
  220 + };
  221 + NProgress.start();
  222 + permList(para).then((res) => {
  223 + this.permissons = res.data.list;
  224 + NProgress.done();
  225 + }).catch((error) => {
  226 + if(null!= error.response && error.response!==undefined){
  227 + let status= error.response.status;
  228 + let msg = error.response.statusText;
  229 + alert(status+msg);
  230 + }else {
  231 + alert(error);
  232 + }
  233 + });
  234 +
  235 + },
187 //删除 236 //删除
188 handleDel: function (index, row) { 237 handleDel: function (index, row) {
189 this.$confirm('确认删除该记录吗?', '提示', { 238 this.$confirm('确认删除该记录吗?', '提示', {
@@ -215,6 +264,21 @@ @@ -215,6 +264,21 @@
215 this.editFormVisible = true; 264 this.editFormVisible = true;
216 this.editForm = Object.assign({}, row); 265 this.editForm = Object.assign({}, row);
217 }, 266 },
  267 + setPerm: function (index, row) {
  268 + var _this = this;
  269 + this.permIds = [];
  270 + this.PermFormVisible = true;
  271 + this.permForm = Object.assign({}, row);
  272 + let rolePerms = this.permForm.permissions;
  273 + if (util.checkNull(rolePerms)){
  274 + rolePerms.forEach(function (perm,v_index,v_arr) {
  275 + if(util.checkNull(perm)){
  276 + _this.permIds[v_index] = perm.permissionId;
  277 + }
  278 + });
  279 + }
  280 + this.getPermList();
  281 + },
218 //显示新增界面，每次点开初始化数据 282 //显示新增界面，每次点开初始化数据
219 handleAdd: function () { 283 handleAdd: function () {
220 this.addFormVisible = true; 284 this.addFormVisible = true;
@@ -274,7 +338,6 @@ @@ -274,7 +338,6 @@
274 this.addLoading = true; 338 this.addLoading = true;
275 //NProgress.start(); 339 //NProgress.start();
276 let para = Object.assign({}, this.addForm); 340 let para = Object.assign({}, this.addForm);
277 - para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');  
278 add(para).then((res) => { 341 add(para).then((res) => {
279 this.addLoading = false; 342 this.addLoading = false;
280 //NProgress.done(); 343 //NProgress.done();
@@ -290,6 +353,34 @@ @@ -290,6 +353,34 @@
290 } 353 }
291 }); 354 });
292 }, 355 },
  356 + //设置角色提交
  357 + setPermSubmit: function () {
  358 + this.$refs.permForm.validate((valid) => {
  359 + if (valid) {
  360 + this.$confirm('确认提交吗？', '提示', {}).then(() => {
  361 + this.addLoading = true;
  362 + //NProgress.start();
  363 + let role = Object.assign({}, this.permForm);
  364 + let roleId = role.roleId;
  365 + let permissionIds = this.permIds
  366 + let para = {roleId,permissionIds};
  367 + updateRolePerm(para).then((res) => {
  368 + this.addLoading = false;
  369 + if (res.status ===200) {
  370 + this.$message({
  371 + message: '提交成功',
  372 + type: 'success'
  373 + });
  374 + this.$refs['permForm'].resetFields();
  375 + }
  376 + //NProgress.done();
  377 + this.PermFormVisible = false;
  378 + this.getRoles();
  379 + }).catch(error => alert(error));
  380 + });
  381 + }
  382 + });
  383 + },
293 selsChange: function (sels) { 384 selsChange: function (sels) {
294 this.sels = sels; 385 this.sels = sels;
295 }, 386 },