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