main
parent
54c34fba28
commit
a8e7d91326
@ -1,167 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<a-row>
|
|
||||||
<!-- 角色列表 -->
|
|
||||||
<a-col :span="5">
|
|
||||||
<div class="cardTitle">所有角色</div>
|
|
||||||
<a-collapse accordion @change="rolechange">
|
|
||||||
<a-collapse-panel
|
|
||||||
v-for="(item, index) in roleList"
|
|
||||||
:key="index"
|
|
||||||
:header="item.name"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="(rolechild, indexs) in item.childrenList"
|
|
||||||
class="role-card"
|
|
||||||
:key="indexs"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
{{ rolechild.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-collapse-panel>
|
|
||||||
</a-collapse>
|
|
||||||
</a-col>
|
|
||||||
<!-- 人员表格 -->
|
|
||||||
<a-col :span="19" class="tree-box">
|
|
||||||
<div v-for="menu,index in menus" :key="index" class='tree'>
|
|
||||||
<span>{{menu.name}}</span>
|
|
||||||
<a-tree
|
|
||||||
:title="menu.name"
|
|
||||||
v-model="checkedKeys"
|
|
||||||
checkable
|
|
||||||
:replace-fields="replaceFields"
|
|
||||||
:expanded-keys="expandedKeys"
|
|
||||||
:auto-expand-parent="autoExpandParent"
|
|
||||||
:selected-keys="selectedKeys"
|
|
||||||
:tree-data="menu.childrenList"
|
|
||||||
@expand="onExpand"
|
|
||||||
@select="onSelect"
|
|
||||||
@check="onCheck"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {columns,pagination,searchForm} from './config.js'
|
|
||||||
import { rolelist,FindAllMenus } from "@/api/basic/role";
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableChoosed: [],
|
|
||||||
roleList: [],
|
|
||||||
// 分页
|
|
||||||
pagination: pagination,
|
|
||||||
// 列
|
|
||||||
columns: columns,
|
|
||||||
searchForm:searchForm,
|
|
||||||
expandedKeys: [],
|
|
||||||
replaceFields: {
|
|
||||||
children: 'childrenList',
|
|
||||||
title: 'name',
|
|
||||||
key: 'id',
|
|
||||||
},
|
|
||||||
autoExpandParent: true,
|
|
||||||
checkedKeys: [],
|
|
||||||
selectedKeys: [],
|
|
||||||
// 数据
|
|
||||||
tableData: [],
|
|
||||||
ActionsList: [ ],
|
|
||||||
menus:[]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getData();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getData() {
|
|
||||||
rolelist().then((res) => {
|
|
||||||
this.roleList = res.data;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
rolechange(data){
|
|
||||||
if(data){
|
|
||||||
this.searchForm.roleId = this.roleList[data].id
|
|
||||||
FindAllMenus({roleId:this.searchForm.roleId}).then(res=>{
|
|
||||||
this.menus = res.data
|
|
||||||
})
|
|
||||||
|
|
||||||
}else{
|
|
||||||
this.searchForm.roleId = null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onExpand(expandedKeys) {
|
|
||||||
console.log('onExpand', expandedKeys);
|
|
||||||
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
|
||||||
// or, you can remove all expanded children keys.
|
|
||||||
this.expandedKeys = expandedKeys;
|
|
||||||
this.autoExpandParent = false;
|
|
||||||
},
|
|
||||||
onCheck(checkedKeys) {
|
|
||||||
console.log('onCheck', checkedKeys);
|
|
||||||
this.checkedKeys = checkedKeys;
|
|
||||||
},
|
|
||||||
onSelect(selectedKeys, info) {
|
|
||||||
console.log('onSelect', info);
|
|
||||||
this.selectedKeys = selectedKeys;
|
|
||||||
},
|
|
||||||
reset(){
|
|
||||||
this.searchForm.keyword =''
|
|
||||||
},
|
|
||||||
handleTableChange(pagination) {
|
|
||||||
console.log(pagination);
|
|
||||||
const pager = { ...this.pagination };
|
|
||||||
pager.current = pagination.current;
|
|
||||||
pager.pageSize = pagination.pageSize;
|
|
||||||
this.pagination = pager;
|
|
||||||
},
|
|
||||||
del(data) {
|
|
||||||
this.$confirm({
|
|
||||||
title: "是否删除",
|
|
||||||
// okText:'删除',
|
|
||||||
// cancelText:'取消',
|
|
||||||
icon: "",
|
|
||||||
onOk: function () {
|
|
||||||
console.log(data);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
Actions(data) {
|
|
||||||
console.log(data);
|
|
||||||
},
|
|
||||||
selectionChoosed(data) {
|
|
||||||
console.log(data);
|
|
||||||
this.tableChoosed = data;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// watch:{
|
|
||||||
// checkedKeys(val) {
|
|
||||||
// console.log('onCheck', val);
|
|
||||||
// },
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.role-card {
|
|
||||||
line-height: 30px;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 1px solid #d9d9d9;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.tree-box{
|
|
||||||
padding-left: 50px;
|
|
||||||
display: flex;
|
|
||||||
.tree{
|
|
||||||
width:15%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue