<template>
<a-drawer
:title="title"
:maskClosable="true"
width=650
placement="right"
:closable="true"
@close="close"
:visible="visible"
style="overflow: auto;padding-bottom: 53px;">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="菜单权限">
<a-form>
<a-form-item label='所拥有的权限'>
<a-tree
checkable
@check="onCheck"
:checkedKeys="checkedKeys"
:treeData="treeData"
@expand="onExpand"
@select="onTreeNodeSelect"
:selectedKeys="selectedKeys"
:expandedKeys="expandedKeys"
: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>
</a-form-item>
</a-form>
</a-tab-pane>
<a-tab-pane key="2" tab="数据权限" force-render>
<a-form>
<a-form-item label='所拥有的权限'>
<a-tree
checkable
@check="dataOnCheck"
:checkedKeys="dataCheckedKeys"
:treeData="dataTreeData"
@expand="dataOnExpand"
@select="dataOnTreeNodeSelect"
:selectedKeys="dataSelectedKeys"
:expandedKeys="dataExpandedKeys"
:checkStrictly="dataCheckStrictly">
<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>
</a-form-item>
</a-form>
</a-tab-pane>
</a-tabs>
<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>
<role-datarule-modal ref="datarule"></role-datarule-modal>
</a-drawer>
</template>
<script>
import { queryDataTreeListForRole, queryRoleDataPermission, queryRolePermission, queryTreeListForRole, saveRolePermission } from '@/api/api'
import RoleDataruleModal from './RoleDataruleModal.vue'
export default {
name: 'RoleModal',
components: {
RoleDataruleModal
},
data() {
return {
roleId: '',
title: '角色权限配置',
visible: false,
loading: false,
activeKey: '1',
treeData: [],
defaultCheckedKeys: [],
selectedKeys: [],
checkedKeys: [],
expandedKeys: [],
allTreeKeys: [],
autoExpandParent: true,
checkStrictly: true,
dataTreeData: [],
dataDefaultCheckedKeys: [],
dataSelectedKeys: [],
dataCheckedKeys: [],
dataExpandedKeys: [],
dataAllTreeKeys: [],
dataAutoExpandParent: true,
dataCheckStrictly: true,
}
},
methods: {
onTreeNodeSelect(id) {
if (id && id.length > 0) {
this.selectedKeys = id
}
this.$refs.datarule.show(this.selectedKeys[0], this.roleId)
},
dataOnTreeNodeSelect(id) {
if (id && id.length > 0) {
this.dataSelectedKeys = id
}
this.$refs.datarule.show(this.dataSelectedKeys[0], this.roleId)
},
onCheck(o) {
if (this.checkStrictly) {
this.checkedKeys = o.checked
} else {
this.checkedKeys = o
}
},
dataOnCheck(o) {
if (this.dataCheckStrictly) {
this.dataCheckedKeys = o.checked
} else {
this.dataCheckedKeys = o
}
},
show(roleId) {
this.roleId = roleId
this.visible = true
},
close() {
this.reset()
this.$emit('close')
this.visible = false
},
onExpand(expandedKeys) {
this.expandedKeys = expandedKeys
this.autoExpandParent = false
},
dataOnExpand(expandedKeys) {
this.dataExpandedKeys = expandedKeys
this.dataAutoExpandParent = false
},
reset() {
this.expandedKeys = []
this.dataExpandedKeys = []
this.checkedKeys = []
this.dataCheckedKeys = []
this.defaultCheckedKeys = []
this.dataDefaultCheckedKeys = []
this.loading = false
},
expandAll() {
let activeKey = this.activeKey
if (activeKey === '1') {
this.expandedKeys = this.allTreeKeys
} else if (activeKey === '2') {
this.dataExpandedKeys = this.dataAllTreeKeys
}
},
closeAll() {
let activeKey = this.activeKey
if (activeKey === '1') {
this.expandedKeys = []
} else if (activeKey === '2') {
this.dataExpandedKeys = []
}
},
checkALL() {
let activeKey = this.activeKey
if (activeKey === '1') {
this.checkedKeys = this.allTreeKeys
} else if (activeKey === '2') {
this.dataCheckedKeys = this.dataAllTreeKeys
}
},
cancelCheckALL() {
let activeKey = this.activeKey
if (activeKey === '1') {
this.checkedKeys = []
} else if (activeKey === '2') {
this.dataCheckedKeys = []
}
},
switchCheckStrictly(v) {
let activeKey = this.activeKey
if (v === 1) {
if (activeKey === '1') {
this.checkStrictly = false
} else if (activeKey === '2') {
this.dataCheckStrictly = false
}
} else if (v === 2) {
if (activeKey === '1') {
this.checkStrictly = true
} else if (activeKey === '2') {
this.dataCheckStrictly = true
}
}
},
handleCancel() {
this.close()
},
handleSubmit(exit) {
let that = this
let params = {
roleId: that.roleId,
permissionIds: that.checkedKeys.join(','),
lastPermissionIds: that.defaultCheckedKeys.join(','),
dataPermissionIds: that.dataCheckedKeys.join(','),
dataLastPermissionIds: that.dataDefaultCheckedKeys.join(',')
}
that.loading = true
saveRolePermission(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()
})
},
loadData() {
queryTreeListForRole().then((res) => {
this.treeData = res.result.treeList
this.dataTreeData = res.result.dataTreeList
this.allTreeKeys = res.result.ids
this.dataAllTreeKeys = res.result.dataIds
queryRolePermission({ roleId: this.roleId }).then((res) => {
this.checkedKeys = [...res.result.permissionIds]
this.defaultCheckedKeys = [...res.result.permissionIds]
this.dataCheckedKeys = [...res.result.dataPermissionIds]
this.dataDefaultCheckedKeys = [...res.result.dataPermissionIds]
//this.expandedKeys = this.allTreeKeys 注释为了加载数据后，控件不展开
})
})
/*queryDataTreeListForRole().then((res) => {
this.dataTreeData = res.result.treeList
this.dataAllTreeKeys = res.result.ids
queryRoleDataPermission({ roleId: this.roleId }).then((res) => {
this.dataCheckedKeys = [...res.result]
this.dataDefaultCheckedKeys = [...res.result]
//this.expandedKeys = this.dataAllTreeKeys 注释为了加载数据后，控件不展开
})
})*/
}
},
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>