snowy/_web/src/views/system/role/roleMenuForm.vue

185 lines
4.3 KiB
Vue

<template>
<a-modal
title="授权菜单"
:width="600"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleSubmit"
@cancel="handleCancel"
>
<a-spin :spinning="formLoading">
<a-form :form="form">
<a-form-item
label="菜单权限"
:labelCol="labelCol"
:wrapperCol="wrapperCol">
<a-tree
v-model="checkedKeys"
multiple
checkable
:auto-expand-parent="autoExpandParent"
:expanded-keys="expandedKeys"
:tree-data="menuTreeData"
:selected-keys="selectedKeys"
:replaceFields="replaceFields"
@expand="onExpand"
@check="onCheck"
/>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import {SysMenuTreeForGrant} from '@/api/modular/system/menuManage'
import {sysRoleOwnMenu, sysRoleGrantMenu} from '@/api/modular/system/roleManage'
export default {
data() {
return {
labelCol: {
style: {'padding-right': '20px'},
xs: {span: 24},
sm: {span: 5}
},
wrapperCol: {
xs: {span: 24},
sm: {span: 15}
},
menuTreeData: [],
expandedKeys: [],
checkedKeys: [],
visible: false,
confirmLoading: false,
formLoading: true,
autoExpandParent: true,
selectedKeys: [],
subValues: [],
roleEntity: [],
replaceFields: {
key: 'id'
},
form: this.$form.createForm(this),
commitKeys: [],
leastChilds: []
}
},
methods: {
// 初始化方法
roleMenu(record) {
this.formLoading = true
this.roleEntity = record
this.visible = true
this.getMenuTree()
},
/**
* 获取菜单列表
*/
getMenuTree() {
const _this = this
SysMenuTreeForGrant().then((res) => {
if (res.success) {
_this.menuTreeData = res.data
_this.getLeastChilds(res.data)
// 默认展开目录级
_this.menuTreeData.forEach(item => {
_this.expandedKeys.push(item.id)
})
_this.expandedMenuKeys(_this.roleEntity)
}
})
},
getLeastChilds(data){
for (let i = 0; i < data.length; i++) {
this.pushLeastChilds(data[i])
}
},
pushLeastChilds(e) {
if (e.children.length > 0) {
this.getLeastChilds(e.children)
return
}
this.leastChilds.push(e.id)
},
/**
* 此角色已有菜单权限
*/
expandedMenuKeys(record) {
const _this = this
sysRoleOwnMenu({id: record.id}).then((res) => {
if (res.success) {
_this.pickCheckedKeys(res.data)
_this.commitKeys = res.data
}
_this.formLoading = false
})
},
pickCheckedKeys(data){
for (let i = 0; i < data.length; i++) {
if (this.leastChilds.includes(data[i])) {
this.checkedKeys.push(data[i])
}
}
},
onExpand(expandedKeys) {
this.expandedKeys = expandedKeys
this.autoExpandParent = false
},
onCheck(checkedKeys, info) {
this.checkedKeys = checkedKeys
this.commitKeys = checkedKeys.concat(info.halfCheckedKeys);
},
onSelect(selectedKeys, info) {
console.log(selectedKeys)
console.log(info)
this.selectedKeys = selectedKeys
},
handleSubmit() {
const _this = this;
const {form: {validateFields}} = this
this.confirmLoading = true
validateFields((errors, values) => {
if (!errors) {
sysRoleGrantMenu({id: _this.roleEntity.id, grantMenuIdList: _this.commitKeys}).then((res) => {
if (res.success) {
_this.$message.success('授权成功')
_this.confirmLoading = false
_this.$emit('ok', values)
_this.handleCancel()
} else {
_this.$message.error('授权失败:' + res.message)
}
}).finally((res) => {
_this.confirmLoading = false
})
} else {
_this.confirmLoading = false
}
})
},
handleCancel() {
// 清空已选择的
this.checkedKeys = []
// 清空已展开的
this.expandedKeys = []
this.visible = false
}
}
}
</script>