feat(xumu): 新增应用角色权限管理功能
- 添加 AppRoleRightsManager 组件，实现角色管理、权限分配等功能 - 新增 rightsAdd 组件，用于添加和编辑应用角色 - 新增 rightsGraph 组件，用于展示权限关系图 - 集成 ECharts 实现复杂的权限关系可视化
This commit is contained in:
aixianling
416
project/xumu/AppRoleRightsManager/AppRoleRightsManager.vue
Normal file
416
project/xumu/AppRoleRightsManager/AppRoleRightsManager.vue
Normal file
@@ -0,0 +1,416 @@
|
||||
<template>
|
||||
<section class="AppRoleRightsManager">
|
||||
<ai-list v-if="!showDetail">
|
||||
<ai-title slot="title" title="角色管理" isShowBottomBorder/>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-button size="small" type="primary" icon="iconfont iconAdd"
|
||||
@click="$router.push({hash:'#add'})"
|
||||
v-if="$permissions('admin_sysapprole_add')">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
icon="iconfont iconDelete"
|
||||
:disabled="!multipleSelection.length"
|
||||
class="del-btn-list"
|
||||
@click="deleteApp('all')"
|
||||
v-if="$permissions('admin_sysapprole_del')"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="search.roleName"
|
||||
placeholder="角色名称"
|
||||
clearable
|
||||
@change="searchList()"
|
||||
suffix-icon="iconfont iconSearch"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="adminList" :colConfigs="colConfigs" :total="total" :current.sync="page.pageNum"
|
||||
:size.sync="page.pageSize"
|
||||
@getList="getTableData" :col-configs="colConfigs" :dict="dict"
|
||||
@selection-change="v=>multipleSelection=v">
|
||||
<el-table-column label="角色用户" slot="users" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip
|
||||
effect="light"
|
||||
placement="top"
|
||||
:disabled="scope.row.users.length <= 2"
|
||||
content="更多角色用户请点击详情按钮">
|
||||
<span v-if="scope.row.users.length">
|
||||
{{
|
||||
scope.row.users
|
||||
.slice(0, 2)
|
||||
.map((e) => e.name + "(" + e.phone + ")")
|
||||
.join(";")
|
||||
}}
|
||||
<span v-if="scope.row.users.length > 2">...</span>
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" label="操作" fixed="right" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<el-button type="text" @click="beforeCopy(row)" v-if="$permissions('admin_sysapprole_edit')">复制
|
||||
</el-button>
|
||||
<el-button type="text" @click="viewApp(row)" v-if="$permissions('admin_sysapprole_detail')">详情
|
||||
</el-button>
|
||||
<el-button type="text" @click="openRightsGraph(row)" v-if="$permissions('admin_sysapprole_detail')">关系图
|
||||
</el-button>
|
||||
<el-button type="text" @click="toAddAppRole(row)" v-if="$permissions('admin_sysapprole_edit')">编辑
|
||||
</el-button>
|
||||
<el-button type="text" @click="deleteApp(row)" v-if="$permissions('admin_sysapprole_del')">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
<ai-dialog
|
||||
title="应用角色详情"
|
||||
:visible.sync="viewShow"
|
||||
width="600px"
|
||||
customFooter>
|
||||
<ai-card title="基本信息">
|
||||
<template #content>
|
||||
<ai-wrapper>
|
||||
<ai-info-item label="应用角色名称" :value="viewInfo.name" isLine/>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="权限信息">
|
||||
<template #content>
|
||||
<div style="margin-bottom: 16px" v-text="roleList.map(e => e.name).join('、')"/>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="角色账号">
|
||||
<template #right>
|
||||
<span style="text-align: right; color: #999">
|
||||
共<span style="color: #26f" v-text="userList.length"/>个账号
|
||||
</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="datail-table-body" v-if="userList.length">
|
||||
<div class="datail-item" v-for="(item, index) in userList" :key="index">
|
||||
<span class="item-name">{{ item.name }}</span>
|
||||
<span style="color: #999">{{ item.phone }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
<template #footer>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="toAddAppRole(viewInfo)"
|
||||
v-if="$permissions('admin_sysapprole_edit')"
|
||||
>编辑角色
|
||||
</el-button>
|
||||
</template>
|
||||
</ai-dialog>
|
||||
<ai-dialog title="权限关系图" :visible.sync="rightsGraph" class="rightsGraphDialog" customFooter>
|
||||
<rights-graph :instance="instance" :dict="dict" :app="selectApp"/>
|
||||
<el-button slot="footer" @click="rightsGraph=false">关闭</el-button>
|
||||
</ai-dialog>
|
||||
<!--复制角色-->
|
||||
<el-dialog
|
||||
class="editStyle"
|
||||
:visible.sync="copyDialog"
|
||||
width="520px"
|
||||
@close="dataInit()"
|
||||
title="复制角色">
|
||||
<el-form :model="form" label-width="80px">
|
||||
<el-form-item label="角色名" :rules="[{ required: true, message: '', trigger: 'blur' }]">
|
||||
<el-input
|
||||
v-model="editName"
|
||||
placeholder="请输入..."
|
||||
size="small"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" style="text-align: center">
|
||||
<el-button
|
||||
style="width: 92px"
|
||||
size="small"
|
||||
@click="copyDialog = false"
|
||||
>取消
|
||||
</el-button
|
||||
>
|
||||
<el-button
|
||||
style="width: 92px"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="copyFn()"
|
||||
:disabled="!editName"
|
||||
>
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</ai-list>
|
||||
<rights-add v-else :instance="instance" :dict="dict" :permissions="permissions"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RightsAdd from "./rightsAdd";
|
||||
import RightsGraph from "./rightsGraph";
|
||||
|
||||
export default {
|
||||
name: "AppRoleRightsManager",
|
||||
components: {RightsGraph, RightsAdd},
|
||||
label: "角色管理",
|
||||
provide() {
|
||||
return {
|
||||
top: this
|
||||
}
|
||||
},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
actions: {
|
||||
default: () => ({
|
||||
list: '/admin/role/page',
|
||||
apps: '/admin/role/list-all',
|
||||
delete: '/admin/role/del',
|
||||
detail: '/admin/role/queryById-checked',
|
||||
modify: '/admin/role/modify',
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
return [
|
||||
{type: "selection"},
|
||||
{label: "角色名", prop: "name", width: '100px'},
|
||||
{label: "所属端", prop: "type", width: '100px', dict: "roleType"},
|
||||
{label: "用户数量", prop: "roleCount", align: 'center', width: '80px'},
|
||||
{slot: "users"},
|
||||
{slot: "options"}
|
||||
]
|
||||
},
|
||||
showDetail() {
|
||||
return this.$route.hash == "#add"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: {pageNum: 1, pageSize: 10},
|
||||
search: {roleName: ''},
|
||||
adminList: [], //列表数据
|
||||
total: 0,
|
||||
multipleSelection: [],
|
||||
delShow: false,
|
||||
delParams: "",
|
||||
delIds: [],
|
||||
viewShow: false,
|
||||
viewInfo: {},
|
||||
roleList: [], //详情权限列表
|
||||
row: {},
|
||||
copyDialog: false,
|
||||
titleDel: "",
|
||||
form: {},
|
||||
editName: "",
|
||||
userList: [],
|
||||
rightsGraph: false,
|
||||
selectApp: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTableData();
|
||||
this.dict.load('roleType')
|
||||
},
|
||||
methods: {
|
||||
//查询table列表
|
||||
getTableData() {
|
||||
this.adminList = [];
|
||||
this.instance.post(this.actions.list, null, {
|
||||
params: {...this.page, ...this.search}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.total = res.data.total;
|
||||
this.adminList = res.data.records;
|
||||
}
|
||||
})
|
||||
},
|
||||
//查询
|
||||
searchList() {
|
||||
this.page.pageNum = 1;
|
||||
this.getTableData();
|
||||
},
|
||||
//添加按钮
|
||||
toAddAppRole(item) {
|
||||
this.$router.push({
|
||||
hash: "#add",
|
||||
query: {
|
||||
id: item.id,
|
||||
name: item.name
|
||||
},
|
||||
});
|
||||
},
|
||||
//删除
|
||||
deleteApp(e) {
|
||||
if (e == "all") {
|
||||
this.multipleSelection.map((item) => {
|
||||
this.delIds.push(item.id);
|
||||
});
|
||||
this.delParams = `ids=${this.delIds}`;
|
||||
this.titleDel = "确定要执行删除操作吗？";
|
||||
} else {
|
||||
this.delParams = `ids=${e.id}`;
|
||||
this.titleDel = "确定需要删除该角色吗？";
|
||||
}
|
||||
this.$confirm(this.titleDel, {
|
||||
type: "error",
|
||||
}).then(() => {
|
||||
this.instance.post(`${this.actions.delete}?${this.delParams}`).then(res => {
|
||||
if (res?.msg == "success") {
|
||||
this.getTableData();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
});
|
||||
}).catch(() => 0);
|
||||
},
|
||||
//查看信息
|
||||
viewApp(e) {
|
||||
this.userList = e.users;
|
||||
this.viewInfo = e;
|
||||
this.viewShow = true;
|
||||
this.getRowInfo(this.viewInfo.appId, this.viewInfo.id);
|
||||
},
|
||||
//查询 row 信息
|
||||
getRowInfo(appId, id) {
|
||||
this.roleList = [];
|
||||
this.instance.post(`${this.actions.detail}?id=${appId}&roleId=${id}`)
|
||||
.then(res => {
|
||||
if (res?.data) {
|
||||
this.roleList = res.data.filter(e => e.checked)
|
||||
}
|
||||
})
|
||||
},
|
||||
//复制
|
||||
beforeCopy(row) {
|
||||
this.row = row;
|
||||
this.copyDialog = true;
|
||||
this.getRowInfo(this.row.appId, this.row.id);
|
||||
},
|
||||
//确认复制
|
||||
copyFn() {
|
||||
let crr = [];
|
||||
let appRoleList = this.roleList;
|
||||
for (let i = 0; i < appRoleList.length; i++) {
|
||||
if (appRoleList[i].checked) {
|
||||
crr.push(appRoleList[i].id);
|
||||
if (appRoleList[i].list.length) {
|
||||
for (let j = 0; j < appRoleList[i].list.length; j++) {
|
||||
if (appRoleList[i].list[j].checked) {
|
||||
crr.push(appRoleList[i].list[j].id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.instance.post(`${this.actions.modify}?menus=${crr}`, null, {
|
||||
params: {
|
||||
roleName: this.editName,
|
||||
appId: this.row.appId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message({message: "复制成功", type: "success"});
|
||||
this.copyDialog = false;
|
||||
this.searchList()
|
||||
}
|
||||
});
|
||||
},
|
||||
dataInit() {
|
||||
this.multipleSelection = [];
|
||||
this.row = {};
|
||||
},
|
||||
openRightsGraph(row) {
|
||||
this.rightsGraph = true
|
||||
this.selectApp = row
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppRoleRightsManager {
|
||||
height: 100%;
|
||||
|
||||
|
||||
:deep( .ai-dialog ) {
|
||||
.ai-card {
|
||||
box-shadow: none;
|
||||
border: 1px solid #eee;
|
||||
|
||||
.aibar {
|
||||
height: 40px;
|
||||
background: #f3f6f9;
|
||||
}
|
||||
|
||||
.ai-card__body {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep( .rightsGraphDialog ) {
|
||||
.el-dialog__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ai-dialog__content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep( .datail-table-body ) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.datail-item {
|
||||
flex-shrink: 0;
|
||||
width: 50%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
width: 102px;
|
||||
padding-left: 16px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.datail-item:nth-of-type(2n - 1) {
|
||||
border-right: 1px solid rgba(208, 212, 220, 1);
|
||||
width: calc(50% - 1px);
|
||||
}
|
||||
}
|
||||
|
||||
.padd-l0 {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.pad-l16 {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
196
project/xumu/AppRoleRightsManager/rightsAdd.vue
Normal file
196
project/xumu/AppRoleRightsManager/rightsAdd.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<ai-detail class="rightsAdd">
|
||||
<ai-title :title="addTitle" slot="title" isShowBottomBorder isShowBack @onBackClick="back"/>
|
||||
<template #content>
|
||||
<el-form size="small" ref="rightsForm" :model="form" label-width="120px" :rules="rules">
|
||||
<ai-card title="基本信息">
|
||||
<template #content>
|
||||
<div class="grid">
|
||||
<el-form-item label="应用角色名称" prop="roleName">
|
||||
<el-input v-model="form.roleName" placeholder="请输入应用角色名称" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标记" prop="type">
|
||||
<ai-select v-model="form.type" dict="roleType" placeholder="请选择角色标记" clearable/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="权限信息">
|
||||
<template #content>
|
||||
<el-form-item label="权限列表" prop="menus">
|
||||
<div class="roleList">
|
||||
<el-input v-model="filterText" placeholder="请输入..." clearable suffix-icon="iconfont iconSearch"
|
||||
@change="$refs.tree.filter(filterText)" :validate-event="false"/>
|
||||
<div class="tree_list">
|
||||
<el-tree class="filter-tree" ref="roleTree"
|
||||
:data="roleList"
|
||||
show-checkbox
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:check-strictly="false"
|
||||
node-key="id"
|
||||
:default-checked-keys="form.menus"
|
||||
:filter-node-method="filterNode"
|
||||
@check="handleMenusSelect"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</ai-card>
|
||||
</el-form>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="back()">取消</el-button>
|
||||
<el-button type="primary" @click="confirm">保存</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "rightsAdd",
|
||||
inject: ['top'],
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
roleName: '',
|
||||
id: '',
|
||||
appList: [],
|
||||
roleList: [],
|
||||
defaultProps: {
|
||||
children: 'list',
|
||||
label: 'name'
|
||||
},
|
||||
treeList: [],
|
||||
filterText: '',
|
||||
msgTitle: '添加'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.isEdit) {
|
||||
let {id, name: roleName} = this.$route.query
|
||||
this.form = {menus: [], id, roleName}
|
||||
this.msgTitle = '编辑'
|
||||
}
|
||||
this.getPermissions()
|
||||
},
|
||||
computed: {
|
||||
isEdit() {
|
||||
return this.$route.query.id
|
||||
},
|
||||
addTitle() {
|
||||
return this.isEdit ? '编辑应用角色' : '新增应用角色'
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
roleName: {required: true, message: '请输入应用角色名称'},
|
||||
roleType: {required: true, message: '请选择角色标记'},
|
||||
menus: {required: true, message: '请选择权限列表内容'},
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.name.indexOf(value) !== -1;
|
||||
},
|
||||
//应用名称选择 获取权限列表
|
||||
getId(data) {
|
||||
if (data.list.length) {
|
||||
data.list.forEach(item => {
|
||||
this.getId(item)
|
||||
})
|
||||
} else {
|
||||
if (data.checked) {
|
||||
this.form.menus?.push(data.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
getPermissions() {
|
||||
this.filterText = ''
|
||||
let {id: roleId} = this.form
|
||||
this.instance.post(this.top.actions.detail, null, {
|
||||
params: {roleId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.roleList = res.data;
|
||||
if (this.isEdit) {
|
||||
this.roleList.forEach(e => this.getId(e))
|
||||
}
|
||||
this.roleList = this.roleList.filter(item => !(item.component && item.isApp == 0 && item.isMenu == 0))
|
||||
}
|
||||
})
|
||||
},
|
||||
handleMenusSelect(node, selected) {
|
||||
this.$set(this.form, 'menus', [...selected?.checkedKeys])
|
||||
this.$refs.rightsForm.validateField('menus')
|
||||
},
|
||||
//保存提交
|
||||
confirm() {
|
||||
this.$refs.rightsForm.validate(v => {
|
||||
if (v) {
|
||||
let menus = [this.$refs.roleTree?.getHalfCheckedKeys(), this.$refs.roleTree?.getCheckedKeys()]?.flat()?.toString()
|
||||
this.instance.post(this.top.actions.modify, null, {
|
||||
params: {...this.form, menus}
|
||||
}).then(res => {
|
||||
if (res?.msg == "success") {
|
||||
this.$message.success(`${this.msgTitle}应用角色成功`)
|
||||
this.back()
|
||||
this.top.searchList()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
//取消 返回
|
||||
back() {
|
||||
this.$router.push({})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.rightsAdd {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-form-item {
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.is-error {
|
||||
.roleList {
|
||||
border-color: #f46;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roleList {
|
||||
background-color: #fcfcfc;
|
||||
border-radius: 2px;
|
||||
border: solid 1px #d0d4dc;
|
||||
padding: 8px;
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tree_list {
|
||||
padding: 5px;
|
||||
height: 370px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
192
project/xumu/AppRoleRightsManager/rightsGraph.vue
Normal file
192
project/xumu/AppRoleRightsManager/rightsGraph.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<section class="rightsGraph">
|
||||
<div id="RightGraph"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
;
|
||||
|
||||
export default {
|
||||
name: "rightsGraph",
|
||||
inject: ['top'],
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
app: Object
|
||||
},
|
||||
computed: {
|
||||
graphData() {
|
||||
let data = [...this.users, ...this.nodes].map(e => {
|
||||
if (e.x) {
|
||||
return e
|
||||
} else return {...e, ...this.renderPosition(e)}
|
||||
})
|
||||
return [
|
||||
{
|
||||
data,
|
||||
links: this.links,
|
||||
categories: data.map(e => e.category).flat().map(name => ({name}))
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
graph: null,
|
||||
nodes: [],
|
||||
links: [],
|
||||
users: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
graphData: {
|
||||
deep: true, handler() {
|
||||
this.refreshGraph()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initGraph() {
|
||||
let dom = document.querySelector("#RightGraph")
|
||||
if (dom) {
|
||||
this.graph = echarts.init(dom)
|
||||
this.graph.setOption({
|
||||
tooltip: {},
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
roam: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: '{b}'
|
||||
},
|
||||
labelLayout: {
|
||||
hideOverlap: true,
|
||||
},
|
||||
scaleLimit: {
|
||||
min: 0.4,
|
||||
max: 4
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'target',
|
||||
curveness: 0.1
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'adjacency',
|
||||
lineStyle: {
|
||||
width: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
this.graph.on('click', this.handleNodeClick)
|
||||
}
|
||||
},
|
||||
refreshGraph() {
|
||||
this.graph?.setOption({
|
||||
series: this.graphData
|
||||
})
|
||||
},
|
||||
getAppRoles(role) {
|
||||
if (role) {
|
||||
this.nodes.push({...role, category: '应用角色', value: "应用角色", symbolSize: 15})
|
||||
} else this.instance.post(this.top.actions.list, null, {
|
||||
params: {pageSize: 999}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
res.data.records.map(e => {
|
||||
this.getUsers(e.users, e.id)
|
||||
this.nodes.push({...e, category: '应用角色', value: "应用角色"})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getUsers(pending, source) {
|
||||
pending?.map(e => {
|
||||
if (!this.users.some(u => u.id == e.phone)) {
|
||||
this.users.push({id: e.phone, name: e.name, symbolSize: 5, category: '用户', value: "用户"})
|
||||
}
|
||||
this.links.push({source, target: e.phone})
|
||||
})
|
||||
},
|
||||
getPermissions({id: roleId, name: category, dataIndex}) {
|
||||
const addNodes = (list, source, category, pos) => {
|
||||
list?.map(e => {
|
||||
let node = {
|
||||
...e,
|
||||
symbolSize: 5,
|
||||
category,
|
||||
value: e.list?.length > 0 ? "应用" : "权限",
|
||||
}
|
||||
node = {...node, ...this.renderPosition(pos || node)}
|
||||
this.nodes.splice(dataIndex, 0, node)
|
||||
if (e.checked == 1) {
|
||||
this.links.push({source, target: e.id})
|
||||
}
|
||||
addNodes(e.list, e.id, e.label, node)
|
||||
})
|
||||
}
|
||||
roleId && this.instance.post(this.top.actions.detail, null, {
|
||||
params: {roleId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
addNodes(res.data, roleId, category)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleNodeClick(v) {
|
||||
let {data: role, dataIndex} = v
|
||||
if (!this.nodes.some(e => e.category == role?.name)) {
|
||||
role && this.getPermissions({...role, dataIndex})
|
||||
}
|
||||
},
|
||||
renderPosition(node) {
|
||||
node = JSON.parse(JSON.stringify(node))
|
||||
let pos = {x: 0, y: 0}
|
||||
if (node?.x) {
|
||||
pos.x = Math.max(this.graph?.getWidth() / 3 * 2, node.x) + 100 + Math.random() * 50
|
||||
pos.y = node.y + Math.random() * 100 - 50
|
||||
} else if (node.value == '应用角色') {
|
||||
pos.x = this.graph?.getWidth() / 3 - 200 + Math.random() * 200
|
||||
pos.y = this.graph?.getHeight() / 2 - 100 + Math.random() * 200
|
||||
} else if (node.value == '应用') {
|
||||
pos.x = this.graph?.getWidth() / 3 * 2 - 100 + Math.random() * 100
|
||||
pos.y = Math.random() * this.graph?.getHeight()
|
||||
} else if (node.value == '用户') {
|
||||
pos.x = Math.random() * 50
|
||||
pos.y = Math.random() * this.graph?.getHeight()
|
||||
} else {
|
||||
pos.x = this.graph?.getWidth() - 100 + Math.random() * 100
|
||||
pos.y = Math.random() * this.graph?.getHeight()
|
||||
}
|
||||
return pos
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getAppRoles(this.app)
|
||||
this.getUsers(this.app.users, this.app.id)
|
||||
this.getPermissions(this.app)
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initGraph()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rightsGraph {
|
||||
height: 100%;
|
||||
|
||||
:deep( #RightGraph ){
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user