260 lines
6.9 KiB
Vue
260 lines
6.9 KiB
Vue
<template>
|
||
<el-container>
|
||
<el-header>
|
||
<div class="left-panel">
|
||
<el-button type="primary" icon="el-icon-plus" @click="roleAdd"></el-button>
|
||
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length!==1" @click="batch_del"></el-button>
|
||
<!--<el-button type="primary" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button>-->
|
||
</div>
|
||
<div class="right-panel">
|
||
<div class="right-panel-search">
|
||
<el-input v-model="search.keyword" placeholder="角色名称" clearable></el-input>
|
||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||
</div>
|
||
</div>
|
||
</el-header>
|
||
<el-main class="nopadding">
|
||
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
|
||
<el-table-column type="selection" width="50"></el-table-column>
|
||
<el-table-column label="#" type="index" width="50"></el-table-column>
|
||
<el-table-column label="角色名称" prop="name" width="250"></el-table-column>
|
||
<el-table-column label="角色标识" prop="code" width="150"></el-table-column>
|
||
<el-table-column label="角色描述" prop="description" width="150"></el-table-column>
|
||
<el-table-column label="操作" fixed="right" align="center" width="140">
|
||
<template #default="scope">
|
||
<el-button type="text" size="small" @click="roleEdit(scope.row, scope.$index)">编辑</el-button>
|
||
<el-divider direction="vertical"></el-divider>
|
||
<el-popconfirm title="确定删除吗？" @confirm="roleDel(scope.row, scope.$index)">
|
||
<template #reference>
|
||
<el-button type="text" size="small">删除</el-button>
|
||
</template>
|
||
</el-popconfirm>
|
||
</template>
|
||
</el-table-column>
|
||
</scTable>
|
||
</el-main>
|
||
</el-container>
|
||
<el-dialog :title="titleMap[type]" v-model="limitedVisible" :width="600">
|
||
<el-form :model="addForm" :rules="rules" ref="addForm" autocomplete =‘off’ label-width="100px" label-position="left">
|
||
<el-form-item label="角色" prop="name" auto>
|
||
<el-input v-model="addForm.name" clearable></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="角色标识">
|
||
<el-input v-model="addForm.code" clearable></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="描述">
|
||
<el-input v-model="addForm.description" clearable></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="权限功能">
|
||
<div class="treeMain">
|
||
<el-tree
|
||
ref="menu"
|
||
node-key="id"
|
||
show-checkbox
|
||
:data="menu.list"
|
||
:props="menu.props"
|
||
:default-checked-keys="menu.checked"
|
||
@check="handleChange"
|
||
></el-tree>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="limitedVisible=false" >取 消</el-button>
|
||
<el-button v-if="type!=='show'" type="primary" :loading="isSaving" @click="submitHandle()">保 存</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
const defaultForm = {
|
||
id:"",
|
||
name: "",
|
||
code: "",
|
||
description: "",
|
||
perms:[],
|
||
};
|
||
export default {
|
||
name: 'dept',
|
||
data() {
|
||
return {
|
||
apiObj: this.$API.system.role.list,
|
||
selection: [],
|
||
checkList: [],
|
||
search: {
|
||
keyword: null
|
||
},
|
||
isSaving: false,
|
||
limitedVisible : false,
|
||
type: "add",
|
||
titleMap: {
|
||
add: '新增',
|
||
edit: '编辑',
|
||
show: '查看'
|
||
},
|
||
|
||
//表单数据
|
||
addForm: defaultForm,
|
||
//验证规则
|
||
rules: {
|
||
name: [
|
||
{required: true, message: '请输入角色名称'}
|
||
],
|
||
},
|
||
menu: {
|
||
list: [],
|
||
checked: [],
|
||
props: {
|
||
children: 'children',
|
||
label: 'name',
|
||
/*label: (data)=>{
|
||
return data.meta.title
|
||
}*/
|
||
}
|
||
},
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getList();
|
||
this.getGroup();
|
||
},
|
||
methods: {
|
||
handleChange(item, check) {
|
||
this.menu.checked = check.checkedKeys;
|
||
//debugger;
|
||
console.log(check);
|
||
console.log(this.checkList);
|
||
},
|
||
//加载树数据
|
||
async getGroup() {
|
||
let res = await this.$API.system.permission.list.req({page: 0});
|
||
let postList = res;
|
||
let posts = [];
|
||
postList.forEach(item => {
|
||
let obj = new Object();
|
||
obj.id = item.id;
|
||
obj.name = item.name;
|
||
obj.parentId = item.parent;
|
||
obj.label=item.name;
|
||
posts.push(obj)
|
||
});
|
||
let obj = posts.reduce((res, v) => (res[v.id] = v , res), {});//Object
|
||
let arr = [];
|
||
// debugger;
|
||
console.log(obj);
|
||
for (let item of posts) {
|
||
// debugger;
|
||
if (item.parentId == null) {
|
||
arr.push(item);
|
||
continue
|
||
}
|
||
let parent = obj[item.parentId];
|
||
parent.children = parent.children ? parent.children : [];
|
||
parent.children.push(item);
|
||
}
|
||
this.menu.list = arr;
|
||
},
|
||
//获取角色列表
|
||
getList(){
|
||
var res = this.$API.system.role.list.req();
|
||
this.tableData = res.results;
|
||
},
|
||
//添加角色
|
||
roleAdd(){
|
||
this.limitedVisible = true;
|
||
this.addForm = defaultForm;
|
||
},
|
||
/*handleChange(value){
|
||
debugger;
|
||
console.log(value);
|
||
console.log(this.menu.list);
|
||
},*/
|
||
submitHandle(){
|
||
let that = this;
|
||
this.addForm.perms = this.menu.checked;
|
||
this.$refs.addForm.validate( (valid) => {
|
||
if (valid) {
|
||
this.isSaveing = true;
|
||
let res;
|
||
if(this.type==='add'){
|
||
res = this.$API.system.role.create.req(that.addForm);
|
||
}else{
|
||
res = this.$API.system.role.update.req(that.addForm.id,that.addForm);
|
||
}
|
||
console.log(res);
|
||
debugger;
|
||
if(res.err_msg){
|
||
this.$message.error(res.err_msg);
|
||
}else{
|
||
this.isSaveing = false;
|
||
this.limitedVisible = false;
|
||
this.$refs.table.refresh();
|
||
}
|
||
|
||
|
||
}
|
||
})
|
||
},
|
||
|
||
//编辑角色
|
||
roleEdit(row){
|
||
this.type='edit';
|
||
this.menu.checked = '[]';
|
||
this.addForm.id=row.id;
|
||
this.addForm.name=row.name;
|
||
this.addForm.code=row.code;
|
||
this.menu.checked = row.perms;
|
||
this.addForm.description=row.description;
|
||
this.limitedVisible = true;
|
||
},
|
||
|
||
//删除角色
|
||
async roleDel(row){
|
||
var id = row.id;
|
||
var res = await this.$API.system.roleDel.delete(id);
|
||
if(res.err_msg){
|
||
this.$message.error(res.err_msg)
|
||
}else{
|
||
this.$refs.table.refresh();
|
||
this.$message.success("删除成功")
|
||
// this.$alert(res.message, "提示", {type: 'error'})
|
||
}
|
||
},
|
||
//表格选择后回调事件
|
||
selectionChange(selection){
|
||
this.selection = selection;
|
||
},
|
||
//搜索
|
||
upsearch(){
|
||
|
||
},
|
||
//根据ID获取树结构
|
||
filterTree(id){
|
||
var target = null;
|
||
function filter(tree){
|
||
tree.forEach(item => {
|
||
if(item.id == id){
|
||
target = item
|
||
}
|
||
if(item.children){
|
||
filter(item.children)
|
||
}
|
||
})
|
||
}
|
||
filter(this.$refs.table.tableData)
|
||
return target
|
||
},
|
||
//本地更新数据
|
||
handleSaveSuccess(data, type){
|
||
if(type=='add'){
|
||
this.$refs.table.refresh()
|
||
}else if(type=='edit'){
|
||
this.$refs.table.refresh()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.treeMain {width: 100%;height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
|
||
</style>
|