<template>
|
<div class="app-container">
|
<div class="filter-container">
|
<el-input
|
v-model="searchRolename"
|
placeholder="输入角色名称"
|
style="width: 200px;margin-right: 10px;"
|
class="filter-item"
|
clearable
|
size="medium"
|
/>
|
<el-button class="filter-item" type="primary" icon="el-icon-search" size="medium" @click="handleFilter">{{ $t('common.search') }}</el-button>
|
<el-button class="filter-item" style="margin-left: 10px;" type="primary" size="medium" icon="el-icon-edit" @click="handleAdd">{{ $t('common.add') }}</el-button>
|
</div>
|
|
<el-table stripe :data="roleList" border style="width: 50%">
|
<el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
|
<el-table-column label="角色名称" align="center" width="">
|
<template slot-scope="scope">
|
<span>{{ scope.row.rolename }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="200">
|
<template slot-scope="scope">
|
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">{{ $t('common.edit') }}</el-button>
|
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{ $t('common.delete') }}</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-dialog :close-on-click-modal="false"
|
:destroy-on-close="true"
|
:title="dialogState === 1 ? '填写信息' : '修改信息'"
|
:visible.sync="dialogVisible"
|
width="30%"
|
:before-close="handleClose"
|
>
|
<el-form ref="dialogform" :model="form" :rules="rules" label-width="80px">
|
<el-form-item prop="rolename" label="角色名称">
|
<el-input v-model="form.rolename"></el-input>
|
</el-form-item>
|
<el-form-item label="菜单权限">
|
<el-tree
|
ref="tree"
|
:data="routerTree"
|
show-checkbox
|
node-key="id"
|
:default-expanded-keys="[2]"
|
:default-checked-keys="defaultCheckedKeys"
|
:props="defaultProps"
|
></el-tree>
|
</el-form-item>
|
<el-form-item align="center" label-width="0">
|
<el-button type="primary" @click="onSubmit()">{{ dialogState === 1 ? $t('common.add') : $t('common.save') }}</el-button>
|
<el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import constantRoutes from '@/router/constroutes';
|
import { getRoleList, addRole, deleteRoleById, updateRole, getRolebyId } from '@/api/role';
|
import { addRolePermission, updateRolePermission } from '@/api/permisson';
|
import { deepClone } from '../../utils';
|
|
export default {
|
data() {
|
return {
|
roleList: [],
|
dialogState: 1, // 1:add , 2:edit
|
dialogVisible: false,
|
editRoleId: 0,
|
searchRolename: '',
|
form: {
|
rolename: '',
|
permissionId: []
|
},
|
rules: {
|
rolename: [{ require: true, message: '角色名称不能为空', trigger: 'blur' }]
|
},
|
routerTree: [],
|
constantTree: [],
|
defaultCheckedKeys: [],
|
defaultProps: {
|
children: 'children',
|
label: 'name'
|
}
|
};
|
},
|
watch: {
|
dialogVisible: function(bool) {
|
if (!bool) {
|
this.routerTree = this.constantTree;
|
}
|
}
|
},
|
mounted() {
|
this.getRoleList();
|
this.routerTree = this.constantTree = this.getRouterTree();
|
},
|
methods: {
|
getRouterTree() {
|
const filterRoutes = [];
|
|
for (let i = 0; i < constantRoutes.length; i++) {
|
let item = constantRoutes[i];
|
|
if (i > 1 && item.children) {
|
item.children = item.children.filter(i => !i.hidden);
|
|
if (item.children.length === 1) {
|
filterRoutes.push(item.children[0]);
|
} else {
|
filterRoutes.push(item);
|
}
|
}
|
}
|
|
return filterRoutes;
|
},
|
getRoleList() {
|
getRoleList(this.searchRolename).then(res => {
|
if (!res.result) {
|
return;
|
}
|
this.roleList = res.data.list;
|
});
|
},
|
handleFilter() {
|
//this.roleList = this.roleList.filter(item => item.rolename.includes(this.searchRolename));
|
this.getRoleList()
|
},
|
handleAdd() {
|
this.form = {
|
rolename: '',
|
permissionId: []
|
};
|
this.dialogState = 1;
|
this.dialogVisible = true;
|
},
|
async handleEdit(index, row) {
|
this.dialogState = 2;
|
this.form = deepClone(row);
|
this.editRoleId = row.id;
|
this.defaultCheckedKeys = [];
|
|
this.routerTree = row.id === '60010' || row.rolename === '管理员' ? this.getDisabledTree() : this.routerTree;
|
|
const res = await getRolebyId(row.id);
|
if (res && res.result && res.data) {
|
this.defaultCheckedKeys = res.data.permissionId;
|
this.$nextTick(() => {
|
this.$refs.tree.setCheckedNodes(this.convertCheckedNodes(this.defaultCheckedKeys));
|
});
|
this.dialogVisible = true;
|
}
|
},
|
convertCheckedNodes(permissionId) {
|
const nodes = [];
|
this.routerTree.forEach(item => {
|
if (!item.children) {
|
if (permissionId.includes(item.id)) {
|
nodes.push(item);
|
}
|
} else {
|
item.children.forEach(node => {
|
if (permissionId.includes(node.id)) {
|
nodes.push(node);
|
}
|
});
|
}
|
});
|
|
return nodes;
|
},
|
handleDelete(index, row) {
|
this.$confirm(this.$t('message.delete_confirm'), this.$t('common.tip'), {
|
confirmButtonText: this.$t('common.ok'),
|
cancelButtonText: this.$t('common.cancel'),
|
type: 'warning'
|
})
|
.then(() => {
|
deleteRoleById(row.id).then(res => {
|
if (res.result) {
|
this.$message(this.$t('message.delete_success'), 'success');
|
this.getRoleList();
|
} else {
|
this.$message(this.$t('message.delete_fail'), 'error');
|
}
|
});
|
})
|
.catch(() => {});
|
},
|
handleClose(done) {
|
done();
|
},
|
onSubmit() {
|
this.$refs.dialogform.validate(async valid => {
|
if (!valid) {
|
return;
|
}
|
console.log('getCheckedNodes', this.$refs.tree.getCheckedNodes());
|
console.log('getCheckedKeys', this.$refs.tree.getCheckedKeys());
|
console.log('convertCheckedKeys', this.convertCheckedKeys());
|
|
if (this.dialogState === 1) {
|
this.form.permissionId = this.convertCheckedKeys();
|
const res = await addRole(this.form);
|
if (!res || !res.result) {
|
this.$message(res.errorMsg || this.$t('message.add_fail'), 'error');
|
return;
|
}
|
|
this.dialogVisible = false;
|
this.$message(this.$t('message.add_success'), 'success');
|
this.getRoleList();
|
} else {
|
const res = await updateRole({
|
permissionId: this.convertCheckedKeys(),
|
id: this.editRoleId
|
});
|
if (!res || !res.result) {
|
this.$message(this.$t('message.edit_fail'), 'error');
|
return;
|
}
|
|
this.$message(this.$t('message.edit_success'), 'success');
|
this.getRoleList();
|
this.dialogVisible = false;
|
}
|
});
|
},
|
convertCheckedKeys() {
|
const keys = [];
|
const nodes = this.$refs.tree.getCheckedNodes();
|
nodes.forEach(node => {
|
keys.push(node.id);
|
keys.push(node.parentId);
|
});
|
|
return [...new Set(keys.sort())];
|
},
|
getDisabledTree() {
|
let tree = deepClone(this.routerTree);
|
|
const recursion = function(tree) {
|
tree.forEach(item => {
|
item['disabled'] = true;
|
if (item.children) {
|
item.children = recursion(item.children);
|
}
|
});
|
|
return tree;
|
};
|
|
return recursion(tree);
|
}
|
}
|
};
|
</script>
|
