共计 3443 个字符,预计需要花费 9 分钟才能阅读完成。
一: 效果图如下:
二: 实现过程
(2-1)通过角色 id 获取须要要数据
因为我这个性能是角色调配权限,所有这里是通过角色 id 获取已调配的权限菜单以及全副菜单
而后在获取到树结构的菜单数据
代码如下:
/**
* 调配权限按钮
*/
permissions(row) {
this.permissionsConfirmLoading = true
getRoleTree(row.roleId)
.then(res => {// 获取以后用户角色调配菜单的 id data 例如:[1002, 1003, 1004, 1213, 1214, 1000, 1001]
this.checkedKeys = res.data.data.checkedMenuId
// 获取菜单的全副 id data 例如[1002, 1003, 1004, 1213, 1214, 1000, 1001]
this.allMenuIds = res.data.data.menuIds
// 这一步是预防用户不点击节点选项间接保留
this.menuIds = res.data.data.checkedMenuId.join(',')
return getMenuTree()})
.then(response => {
this.treeData = response.data.data
this.roleId = row.roleId
this.permissionsConfirmLoading = false
this.permissionsModalVisible = true
})
}
(2-2)页面的配置
代码如下:
<a-modal
:visible="permissionsModalVisible"
title="调配权限"
:width="740"
@cancel="permissionsModalVisible = false"
>
<a-spin :spinning="permissionsConfirmLoading">
<a-tree
ref="roleTree"
:checked-keys="checkedKeys"
:selected-keys="selectedKeys"
checkable
:check-strictly="checkStrictly"
:expanded-keys="expandedKeys"
:tree-data="treeData"
:replace-fields="{key:'id'}"
@check="onChangePermissionsTree"
@select="onTreeNodeSelect"
@expand="onExpand"
/>
</a-spin>
<template slot="footer">
<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-button @click="permissionsModalVisible = false">
cancal
</a-button>
<a-button type="primary" @click="permissionsModalSubmit">
ok
</a-button>
</template>
</a-modal>
(2-3)对应的办法
代码如下:
// 是否设置树组件父子关联
switchCheckStrictly(v) {if (v === 1) {this.checkStrictly = false} else if (v === 2) {this.checkStrictly = true}
},
// 是否设置树组件全副勾选
checkALL() {this.checkedKeys = this.allMenuIds},
// 是否设置树组件勾销全副勾选
cancelCheckALL() {this.checkedKeys = []
},
// 树组件全副开展
expandAll() {this.expandedKeys = this.allMenuIds},
// 树组件全副闭合
closeAll() {this.expandedKeys = []
},
// 树组件开展触发
onExpand(expandedKeys) {this.expandedKeys = expandedKeys},
// 点击树节点触发
onTreeNodeSelect(id) {if (id && id.length > 0) {this.selectedKeys = id}
},
// 点击复选框,获取曾经选中的复选项 id+ 半选 id
onChangePermissionsTree(node, event) {if (this.checkStrictly) {this.checkedKeys = node.checked} else {this.checkedKeys = node}
},
(2-4)最初的保留
// 更新权限
permissionsModalSubmit() {updPermissions(this.roleId, this.checkedKeys.join(',')).then(res => {if (res.data.data) {// resetRouter()
store.dispatch('GenerateRoutes') // 刷新菜单
// store.dispatch('GetInfo') // 刷新用户权限
this.permissionsModalVisible = false
return this.$message.success('保留胜利!')
} else {return this.$message.error('保留失败!')
}
})
},
最初 data 的数据(懒的一个一个找进去,自行取须要的)
roleId: '',
checkStrictly: true,
autoExpandParent: true,
loading: false,
roleModalTitle: '',
roleModalType: 0,
roleModalVisible: false,
permissionsModalVisible: false,
roleConfirmLoading: false,
permissionsConfirmLoading: false,
formItemLayout: {
labelCol: {xs: { span: 24},
sm: {span: 5}
},
wrapperCol: {xs: { span: 24},
sm: {span: 13}
}
},
// 自定义分页
pagination: {
total: 0,
defaultPageSize: 10,
showTotal: total => ` 共 ${total} 条数据 `,
showSizeChanger: true,
pageSizeOptions: ['5', '10', '15', '20'],
onShowSizeChange: (current, size) => (this.queryParam.size = size),
onChange: (page, pageSize) => this.onPageChange(page)
},
queryParam: {
current: 1,
size: 10,
roleName: ''
},
form: this.$form.createForm(this, 'form'),
treeData: [],
allMenuIds: [],
checkedKeys: [],
selectedKeys: [],
expandedKeys: [],
正文完