|
|
|
|
@ -4,61 +4,36 @@
|
|
|
|
|
<!-- 角色列表 -->
|
|
|
|
|
<a-col :span="5">
|
|
|
|
|
<div class="cardTitle">所有角色</div>
|
|
|
|
|
<a-button class="add-btn" style="margin: 10px" @click="add.show = true"
|
|
|
|
|
>新增角色</a-button
|
|
|
|
|
>
|
|
|
|
|
<a-collapse accordion @change="rolechange">
|
|
|
|
|
<a-collapse-panel
|
|
|
|
|
v-for="(item, index) in roleList"
|
|
|
|
|
:key="index"
|
|
|
|
|
:header="item.name"
|
|
|
|
|
>
|
|
|
|
|
<a-button
|
|
|
|
|
type="link"
|
|
|
|
|
icon="form"
|
|
|
|
|
slot="extra"
|
|
|
|
|
@click.stop="editRole(item.id)"
|
|
|
|
|
>
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button
|
|
|
|
|
type="link"
|
|
|
|
|
slot="extra"
|
|
|
|
|
style="color: #ff4d4f"
|
|
|
|
|
icon="delete"
|
|
|
|
|
@click.stop="delRole(item.id)"
|
|
|
|
|
></a-button>
|
|
|
|
|
<div
|
|
|
|
|
v-for="(rolechild, indexs) in item.childrenList"
|
|
|
|
|
class="role-card"
|
|
|
|
|
:key="indexs"
|
|
|
|
|
@click="rolechoose(rolechild.id)"
|
|
|
|
|
>
|
|
|
|
|
<span class="role-li">
|
|
|
|
|
<span>{{ rolechild.name || "无" }}</span>
|
|
|
|
|
<span v-show="rolechild.name"
|
|
|
|
|
><a-button type="link" icon="form" @click="editRole(rolechild.id)">
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button
|
|
|
|
|
type="link"
|
|
|
|
|
style="color: #ff4d4f"
|
|
|
|
|
icon="delete"
|
|
|
|
|
@click="delRole(rolechild.id)"
|
|
|
|
|
></a-button
|
|
|
|
|
></span>
|
|
|
|
|
<span v-show="rolechild.name"> </span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</a-collapse-panel>
|
|
|
|
|
</a-collapse>
|
|
|
|
|
</a-col>
|
|
|
|
|
<!-- 人员表格 -->
|
|
|
|
|
<!-- 功能表格 -->
|
|
|
|
|
<a-col :span="19">
|
|
|
|
|
<div class="treebox">
|
|
|
|
|
<a-tree
|
|
|
|
|
class="tree"
|
|
|
|
|
v-model="checkedKeys"
|
|
|
|
|
checkable
|
|
|
|
|
checkStrictly
|
|
|
|
|
:replace-fields="replaceFields"
|
|
|
|
|
:expanded-keys="expandedKeys"
|
|
|
|
|
:auto-expand-parent="autoExpandParent"
|
|
|
|
|
:selected-keys="selectedKeys"
|
|
|
|
|
:tree-data="menus"
|
|
|
|
|
@expand="onExpand"
|
|
|
|
|
@ -68,31 +43,40 @@
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<add-form
|
|
|
|
|
:show="add.show"
|
|
|
|
|
:title="add.title"
|
|
|
|
|
:list="roleList"
|
|
|
|
|
@close="addClose"
|
|
|
|
|
@success='success'
|
|
|
|
|
:id='add.editId'
|
|
|
|
|
></add-form>
|
|
|
|
|
<a-drawer
|
|
|
|
|
title="操作"
|
|
|
|
|
placement="right"
|
|
|
|
|
:closable="false"
|
|
|
|
|
:visible="actions.show"
|
|
|
|
|
@close="onClose"
|
|
|
|
|
>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div v-if="actionsList.length === 0">无可配置操作</div>
|
|
|
|
|
<a-checkbox
|
|
|
|
|
v-for="action in actionsList"
|
|
|
|
|
:checked="action.isCheck"
|
|
|
|
|
:key="action.id"
|
|
|
|
|
@change="onChange($event, action.id)"
|
|
|
|
|
>
|
|
|
|
|
{{ action.name }}</a-checkbox
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</a-drawer>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getrolelist, FindAllMenus, roleDel } from "@/api/basic/role";
|
|
|
|
|
import addForm from "./form.vue";
|
|
|
|
|
import {
|
|
|
|
|
getrolelist,
|
|
|
|
|
FindAllMenus,
|
|
|
|
|
changeMenuShow,
|
|
|
|
|
getActions,
|
|
|
|
|
changeActions,
|
|
|
|
|
} from "@/api/basic/role";
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
addForm,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
add: {
|
|
|
|
|
show: false,
|
|
|
|
|
title: "新增角色",
|
|
|
|
|
editId:null
|
|
|
|
|
},
|
|
|
|
|
roleId: null,
|
|
|
|
|
roleList: [],
|
|
|
|
|
expandedKeys: [],
|
|
|
|
|
replaceFields: {
|
|
|
|
|
@ -100,11 +84,13 @@ export default {
|
|
|
|
|
title: "name",
|
|
|
|
|
key: "id",
|
|
|
|
|
},
|
|
|
|
|
autoExpandParent: true,
|
|
|
|
|
checkedKeys: [],
|
|
|
|
|
selectedKeys: [],
|
|
|
|
|
ActionsList: [],
|
|
|
|
|
menus: [],
|
|
|
|
|
menus: [], //页面菜单
|
|
|
|
|
actionsList: [], //操作
|
|
|
|
|
actions: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
@ -116,60 +102,86 @@ export default {
|
|
|
|
|
this.roleList = res.data;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
rolechoose(data) {
|
|
|
|
|
this.checkedKeys = [];
|
|
|
|
|
if (data !== undefined) {
|
|
|
|
|
this.roleId = data;
|
|
|
|
|
FindAllMenus({ roleId: this.roleId }).then((res) => {
|
|
|
|
|
this.menus = res.data;
|
|
|
|
|
this.defaultCheck(this.menus);
|
|
|
|
|
});
|
|
|
|
|
} else if (data === undefined) {
|
|
|
|
|
this.roleId = null;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
rolechange(data) {
|
|
|
|
|
if (data) {
|
|
|
|
|
this.searchForm.roleId = this.roleList[data].id;
|
|
|
|
|
FindAllMenus({ roleId: this.searchForm.roleId }).then((res) => {
|
|
|
|
|
this.checkedKeys = [];
|
|
|
|
|
this.roleId = this.roleList[data].id;
|
|
|
|
|
FindAllMenus({ roleId: this.roleId }).then((res) => {
|
|
|
|
|
this.menus = res.data;
|
|
|
|
|
this.defaultCheck(this.menus);
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.searchForm.roleId = null;
|
|
|
|
|
this.roleId = null;
|
|
|
|
|
this.menus = [];
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
success(){
|
|
|
|
|
this.getData()
|
|
|
|
|
},
|
|
|
|
|
addClose() {
|
|
|
|
|
this.add.show = false;
|
|
|
|
|
this.add.editId = undefined;
|
|
|
|
|
},
|
|
|
|
|
// 编辑角色
|
|
|
|
|
editRole(id){
|
|
|
|
|
this.add.editId = id
|
|
|
|
|
this.add.title = '修改角色'
|
|
|
|
|
this.add.show= true;
|
|
|
|
|
},
|
|
|
|
|
// 删除角色
|
|
|
|
|
delRole(id) {
|
|
|
|
|
var vm = this;
|
|
|
|
|
this.$confirm({
|
|
|
|
|
title: "是否删除",
|
|
|
|
|
// okText:'删除',
|
|
|
|
|
// cancelText:'取消',
|
|
|
|
|
icon: "delete",
|
|
|
|
|
onOk:()=> {
|
|
|
|
|
roleDel({roleId:id}).then(res=>{
|
|
|
|
|
if(res.code === 200){
|
|
|
|
|
this.$message.success(res.msg)
|
|
|
|
|
this.getData()
|
|
|
|
|
}else{
|
|
|
|
|
this.$message.error(res.msg)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
defaultCheck(arr) {
|
|
|
|
|
for (let item of arr) {
|
|
|
|
|
if (item.isShow === true && item.childrenList !== null) {
|
|
|
|
|
this.checkedKeys.push(item.id);
|
|
|
|
|
this.defaultCheck(item.childrenList);
|
|
|
|
|
} else if (item.isShow === true) {
|
|
|
|
|
this.checkedKeys.push(item.id);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onExpand(expandedKeys) {
|
|
|
|
|
this.expandedKeys = expandedKeys;
|
|
|
|
|
this.autoExpandParent = false;
|
|
|
|
|
},
|
|
|
|
|
onCheck(checkedKeys) {
|
|
|
|
|
// console.log('onCheck', checkedKeys);
|
|
|
|
|
onCheck(checkedKeys, e) {
|
|
|
|
|
this.checkedKeys = checkedKeys;
|
|
|
|
|
// console.log(e.node.eventKey);
|
|
|
|
|
changeMenuShow({
|
|
|
|
|
roleId: this.roleId,
|
|
|
|
|
showMenusId: e.node.eventKey,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
this.$message.success(res.msg);
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.msg);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
onSelect(selectedKeys, info) {
|
|
|
|
|
// console.log('onSelect', info);
|
|
|
|
|
this.selectedKeys = selectedKeys;
|
|
|
|
|
// console.log(selectedKeys);
|
|
|
|
|
getActions({ roleId: this.roleId, menusId: this.selectedKeys[0] }).then(
|
|
|
|
|
(res) => {
|
|
|
|
|
this.actionsList = res.data;
|
|
|
|
|
this.actions.show = true;
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
onChange(e, id) {
|
|
|
|
|
changeActions({
|
|
|
|
|
roleId: this.roleId,
|
|
|
|
|
menusId: this.selectedKeys[0],
|
|
|
|
|
operationId: id,
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
this.$message.success(res.msg);
|
|
|
|
|
this.onSelect(this.selectedKeys)
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.msg);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
onClose() {
|
|
|
|
|
this.actions.show = false;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
@ -200,12 +212,11 @@ export default {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
/deep/.ant-tree ul {
|
|
|
|
|
width: 200px;
|
|
|
|
|
.treebox {
|
|
|
|
|
padding-left: 30px;
|
|
|
|
|
}
|
|
|
|
|
.tree {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
|
|
|
|
.role-card {
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
@ -221,4 +232,7 @@ export default {
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
/deep/.ant-checkbox-wrapper + .ant-checkbox-wrapper {
|
|
|
|
|
margin: 0px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
