<template> <a-drawer :title="title" :maskClosable="true" width=650 placement="right" :closable="true" @close="close" :visible="visible" style="overflow: auto;padding-bottom: 53px;"> <a-form> <a-form-item label='所拥有的部门权限'> <a-tree v-if="treeData.length>0" checkable @check="onCheck" :checkedKeys="checkedKeys" :treeData="treeData" @expand="onExpand" @select="onTreeNodeSelect" :selectedKeys="selectedKeys" :expandedKeys="expandedKeysss" :checkStrictly="checkStrictly"> <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}"> {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon> </span> </a-tree> <div v-else><h3>无可配置部门权限!</h3></div> </a-form-item> </a-form> <div class="drawer-bootom-button"> <a-dropdown style="float: left" :trigger="['click']" placement="topCenter"> <a-menu slot="overlay"> <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item> <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item> <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item> <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item> <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item> <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item> </a-menu> <a-button> 树操作 <a-icon type="up"/> </a-button> </a-dropdown> <a-popconfirm title="确定放弃编辑?" @confirm="close" okText="确定" cancelText="取消"> <a-button style="margin-right: .8rem">取消</a-button> </a-popconfirm> <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存 </a-button> <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button> </div> <dept-role-datarule-modal ref="datarule"></dept-role-datarule-modal> </a-drawer> </template> <script> import {queryTreeListForDeptRole, queryDeptRolePermission, saveDeptRolePermission} from '@/api/api' import RoleDataruleModal from './RoleDataruleModal.vue' import DeptRoleDataruleModal from './DeptRoleDataruleModal' export default { name: "DeptRoleAuthModal", components: { DeptRoleDataruleModal, RoleDataruleModal }, data() { return { departId: "", roleId: "", treeData: [], defaultCheckedKeys: [], checkedKeys: [], halfCheckedKeys: [], expandedKeysss: [], allTreeKeys: [], autoExpandParent: true, checkStrictly: true, title: "部门角色权限配置", visible: false, loading: false, selectedKeys: [] } }, methods: { switchCheckStrictly(v) { if (v == 1) { this.checkStrictly = false } else if (v == 2) { this.checkStrictly = true } }, onTreeNodeSelect(id) { if (id && id.length > 0) { this.selectedKeys = id } this.$refs.datarule.show(this.selectedKeys[0], this.departId, this.roleId) }, onCheck(o) { if (this.checkStrictly) { this.checkedKeys = o.checked; } else { this.checkedKeys = o } }, show(roleId, departId) { this.departId = departId this.roleId = roleId this.visible = true; }, close() { this.reset() this.$emit('close'); this.visible = false; }, onExpand(expandedKeys) { this.expandedKeysss = expandedKeys; this.autoExpandParent = false }, reset() { this.expandedKeysss = [] this.checkedKeys = [] this.defaultCheckedKeys = [] this.loading = false }, expandAll() { this.expandedKeysss = this.allTreeKeys }, closeAll() { this.expandedKeysss = [] }, checkALL() { this.checkedKeys = this.allTreeKeys }, cancelCheckALL() { this.checkedKeys = [] }, handleCancel() { this.close() }, handleSubmit(exit) { let that = this; let params = { roleId: that.roleId, permissionIds: that.checkedKeys.join(","), lastpermissionIds: that.defaultCheckedKeys.join(","), }; that.loading = true; console.log("请求参数:", params); saveDeptRolePermission(params).then((res) => { if (res.success) { that.$message.success(res.message); that.loading = false; if (exit) { that.close() } } else { that.$message.error(res.message); that.loading = false; if (exit) { that.close() } } this.loadData(); }) }, convertTreeListToKeyLeafPairs(treeList, keyLeafPair = []) { for (const {key, isLeaf, children} of treeList) { keyLeafPair.push({key, isLeaf}) if (children && children.length > 0) { this.convertTreeListToKeyLeafPairs(children, keyLeafPair) } } return keyLeafPair; }, loadData() { queryTreeListForDeptRole({departId: this.departId}).then((res) => { this.treeData = res.result.treeList this.allTreeKeys = res.result.ids queryDeptRolePermission({roleId: this.roleId}).then((res) => { this.checkedKeys = [...res.result]; this.defaultCheckedKeys = [...res.result]; this.expandedKeysss = this.allTreeKeys; }) }) } }, watch: { visible() { if (this.visible) { this.loadData(); } } } } </script> <style lang="less" scoped> .drawer-bootom-button { position: absolute; bottom: 0; width: 100%; border-top: 1px solid #e8e8e8; padding: 10px 16px; text-align: right; left: 0; background: #fff; border-radius: 0 0 2px 2px; } </style>