<template>
|
<el-dialog
|
title="分配权限"
|
:visible.sync="dialogTreeVisible"
|
width="400px"
|
:append-to-body="true"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
>
|
<el-tree
|
style="width: 100%; height: 400px; overflow: auto; margin-bottom: 30px"
|
:data="treeData"
|
ref="tree"
|
node-key="id"
|
show-checkbox
|
:check-strictly="true"
|
:default-expand-all="false"
|
:highlight-current="true"
|
:default-checked-keys="rolePermissions.menuIds"
|
@check-change="selectedNodes"
|
:props="defaultProps">
|
</el-tree>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogTreeVisible = false" size="small">取 消</el-button>
|
<el-button type="primary" @click="addPermission" size="small">确 定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {addPermission} from "@/api/role";
|
export default {
|
name: "PermissionDialog",
|
data() {
|
return {
|
defaultProps: {
|
children: 'children',
|
label: 'menuName'
|
}
|
}
|
},
|
computed: {
|
dialogTreeVisible: {
|
get() {
|
return this.$store.state.role.dialogTreeVisible;
|
},
|
set(value) {
|
this.$store.state.role.dialogTreeVisible = value;
|
}
|
},
|
treeData: {
|
get() {
|
return this.$store.state.role.treeData;
|
},
|
set(value) {
|
this.$store.state.role.treeData =value;
|
}
|
},
|
rolePermissions: {
|
get() {
|
return this.$store.state.role.rolePermissions;
|
},
|
set(value) {
|
this.$store.state.role.rolePermissions =value;
|
}
|
}
|
,
|
assignPermission: {
|
get() {
|
return this.$store.state.role.assignPermission;
|
},
|
set(value) {
|
this.$store.state.role.assignPermission =value;
|
}
|
}
|
},
|
methods: {
|
selectedNodes() {
|
this.assignPermission = this.$refs.tree.getCheckedNodes().map((item) => {return item.id});
|
},
|
addPermission() {
|
// if (this.$store.state.role.rolePermissions) {
|
//
|
// }
|
var params = {
|
roleId: this.$store.state.role.roleId,
|
id: this.$store.state.role.rolePermissions === null ? null : this.$store.state.role.rolePermissions.id ,
|
menuIds: this.assignPermission
|
}
|
addPermission(params).then((res) => {
|
this.$message.success(res.data.msg);
|
this.dialogTreeVisible = false;
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
