作者 朱兆平

权限,角色设置和日志

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8082/api';
let base = axios.defaults.baseURL+'/system/log';
export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
... ...
... ... @@ -35,4 +35,13 @@ export const add = params => { return axios({
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
export const updateRolePerm = params => { return axios({
method: 'PUT',
url: `${base}/permSet`,
data: params,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
... ...
... ... @@ -5,6 +5,7 @@ import Main from './views/Main.vue'
// import Table from './views/nav1/Table.vue'
import Role from './views/nav1/role.vue'
import Perm from './views/nav1/perm.vue'
import LOG from './views/nav1/Log.vue'
// import Form from './views/nav1/Form.vue'
import User from './views/nav1/user.vue'
... ... @@ -40,13 +41,13 @@ let routes = [
{
path: '/admin',
component: Home,
name: '用户管理',
name: '系统设置',
iconCls: 'el-icon-setting',//图标样式class
children: [
{ path: '/user', component: User, name: '用户管理' },
{ path: '/role', component: Role, name: '角色管理' },
{ path: '/perm', component: Perm, name: '权限管理' },
{ path: '/log', component: LOG, name: '系统日志' },
]
},
{
... ...
... ... @@ -96,12 +96,13 @@
console.log('submit!');
},
handleopen() {
//console.log('handleopen');
console.log('handleopen');
},
handleclose() {
//console.log('handleclose');
console.log('handleclose');
},
handleselect: function (a, b) {
console.log('handleselect!');
},
//退出登录
logout: function () {
... ...
<template>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-input v-model="filters.username" placeholder="账号"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="filters.methodname" placeholder="系统动作"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="filters.modelnamecn" placeholder="操作模块"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="getRoles()">查询</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表-->
<el-table :data="logs" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="logid" label="ID" width="80" sortable>
</el-table-column>
<el-table-column prop="username" label="操作账号" width="120" sortable>
</el-table-column>
<el-table-column prop="ip" label="IP" width="100" sortable>
</el-table-column>
<el-table-column prop="logcreattime" label="操作时间" width="200" sortable>
</el-table-column>
<el-table-column prop="methodname" label="系统动作" width="120" sortable>
</el-table-column>
<el-table-column prop="operatenamecn" label="动作描述" width="120" sortable>
</el-table-column>
<el-table-column prop="modelnamecn" label="操作模块" width="120" sortable>
</el-table-column>
<!--<el-table-column prop="parameters" label="参数" width="100" sortable>-->
<!--</el-table-column>-->
<el-table-column prop="classname" label="系统类" width="100" sortable>
</el-table-column>
<el-table-column prop="result" label="操作结果" min-width="200" sortable>
</el-table-column>
</el-table>
<!--工具条-->
<el-col :span="24" class="toolbar">
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
</el-pagination>
</el-col>
</section>
</template>
<script>
import util from '../../common/js/util'
import NProgress from 'nprogress'
import moment from 'moment'
import { getList } from '../../api/log_api';
export default {
data() {
return {
filters: {},
logs: [],
total: 0,
pageNum: 1,
pageSize: 10,
listLoading: false,
sels: [],//列表选中列
}
},
methods: {
//性别显示转换
formatSex: function (row, column) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
formatState: function (row, column) {
return row.state == true ? '是' : row.state == false ? '否' : '未知';
},
handleCurrentChange(val) {
this.pageNum = val;
this.getRoles();
},
//获取角色列表
getLogs() {
let para = {
pageNum: this.pageNum,
pageSize: this.pageSize,
};
this.listLoading = true;
//NProgress.start();
getList(para).then((res) => {
this.total = res.data.total;
this.logs = res.data.list;
this.listLoading = false;
//NProgress.done();
}).catch((error) => {
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
},
selsChange: function (sels) {
this.sels = sels;
},
//批量删除
batchRemove: function () {
var ids = this.sels.map(item => item.id).toString();
this.$confirm('确认删除选中记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
//NProgress.start();
let para = { ids: ids };
batchRemove(para).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
message: '删除成功',
type: 'success'
});
this.getRoles();
});
}).catch(() => {
});
}
},
mounted() {
this.getLogs();
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
... ...
... ... @@ -4,7 +4,7 @@
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-input v-model="filters.roleName" placeholder="权限名称"></el-input>
<el-input v-model="filters.permName" placeholder="权限名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="getRoles()">查询</el-button>
... ... @@ -110,7 +110,7 @@
data() {
return {
filters: {
roleName: ''
permName: ''
},
tableList: [],
total: 0,
... ... @@ -170,7 +170,7 @@
let para = {
pageNum: this.pageNum,
pageSize: this.pageSize,
roleName: this.filters.roleName
name: this.filters.permName
};
this.listLoading = true;
//NProgress.start();
... ...
... ... @@ -29,8 +29,9 @@
</el-table-column>
<el-table-column prop="roleSign" label="排序" width="100" sortable>
</el-table-column>
<el-table-column label="操作" min-width="150">
<el-table-column label="操作" min-width="260">
<template slot-scope="scope">
<el-button size="small" @click="setPerm(scope.$index, scope.row)">设置权限</el-button>
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
... ... @@ -87,13 +88,27 @@
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
<!--权限设置界面-->
<el-dialog title="角色的权限设置" v-model="PermFormVisible" :close-on-click-modal="false">
<el-form :model="permForm" label-width="80px" ref="permForm">
<el-checkbox-group v-model="permIds" size="small">
<el-checkbox v-for="perm in permissons" :label="perm.permissionId" :key="perm.permissionId">{{perm.name}}</el-checkbox>
</el-checkbox-group>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="PermFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="setPermSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
</section>
</template>
<script>
import util from '../../common/js/util'
//import NProgress from 'nprogress'
import { getList, remove, batchRemove, edit, add } from '../../api/role_api';
import NProgress from 'nprogress'
import { getList, remove, batchRemove, edit, add, updateRolePerm } from '../../api/role_api';
import { getList as permList } from '../../api/perm_api';
import moment from 'moment'
export default {
data() {
... ... @@ -102,6 +117,8 @@
roleName: ''
},
roles: [],
permissons: [],
permIds: [],
total: 0,
pageNum: 1,
pageSize: 5,
... ... @@ -122,8 +139,12 @@
roleName: '',
roleSign: 1
},
addFormVisible: false,//新增界面是否显示
//设置权限数据
setPermForm: {},
//新增界面是否显示
addFormVisible: false,
//设置权限界面是否显示
PermFormVisible: false,
addLoading: false,
addFormRules: {
roleName: [
... ... @@ -138,6 +159,13 @@
description: '',
roleName: '',
roleSign: 1
},
permForm: {
roleId: 1,
description: '',
roleName: '',
roleSign: 1,
permissions: []
}
}
... ... @@ -154,7 +182,7 @@
this.pageNum = val;
this.getRoles();
},
//获取列表
//获取角色列表
getRoles() {
let para = {
pageNum: this.pageNum,
... ... @@ -184,6 +212,27 @@
});
},
//获取权限列表
getPermList() {
let para = {
pageNum: 1,
pageSize: 200
};
NProgress.start();
permList(para).then((res) => {
this.permissons = res.data.list;
NProgress.done();
}).catch((error) => {
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
});
},
//删除
handleDel: function (index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
... ... @@ -215,6 +264,21 @@
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
},
setPerm: function (index, row) {
var _this = this;
this.permIds = [];
this.PermFormVisible = true;
this.permForm = Object.assign({}, row);
let rolePerms = this.permForm.permissions;
if (util.checkNull(rolePerms)){
rolePerms.forEach(function (perm,v_index,v_arr) {
if(util.checkNull(perm)){
_this.permIds[v_index] = perm.permissionId;
}
});
}
this.getPermList();
},
//显示新增界面,每次点开初始化数据
handleAdd: function () {
this.addFormVisible = true;
... ... @@ -274,7 +338,6 @@
this.addLoading = true;
//NProgress.start();
let para = Object.assign({}, this.addForm);
para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
add(para).then((res) => {
this.addLoading = false;
//NProgress.done();
... ... @@ -290,6 +353,34 @@
}
});
},
//设置角色提交
setPermSubmit: function () {
this.$refs.permForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗?', '提示', {}).then(() => {
this.addLoading = true;
//NProgress.start();
let role = Object.assign({}, this.permForm);
let roleId = role.roleId;
let permissionIds = this.permIds
let para = {roleId,permissionIds};
updateRolePerm(para).then((res) => {
this.addLoading = false;
if (res.status ===200) {
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['permForm'].resetFields();
}
//NProgress.done();
this.PermFormVisible = false;
this.getRoles();
}).catch(error => alert(error));
});
}
});
},
selsChange: function (sels) {
this.sels = sels;
},
... ...