xmf_saas_web/src/views/Basic/Authority/component/permissions.vue

<template>
  <div>
      <a-row>
          <!-- 角色列表 -->
          <a-col :span="5">
            <div class="cardTitle">所有角色</div>
            <a-button class='add-btn' style="margin:10px">新增角色</a-button>
            <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">
            <div class='treebox'>
              <a-tree
                class="tree"
                v-model="checkedKeys"
                checkable
                :replace-fields="replaceFields"
                :expanded-keys="expandedKeys"
                :auto-expand-parent="autoExpandParent"
                :selected-keys="selectedKeys"
                :tree-data="menus"
                @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;
}
/deep/.ant-tree ul{
  width: 200px;
}
.tree{
  display: flex;
  margin-left: 20px;
}
</style>