166 lines
4.4 KiB
Vue
166 lines
4.4 KiB
Vue
<template>
|
||
<div class="content-view">
|
||
<Alert type="info" show-icon closable style="margin-bottom: 12px">
|
||
角色为<strong>全库共用</strong>，不按租户隔离；各租户用户可在「用户管理」中绑定同一角色，菜单权限以角色配置为准。
|
||
</Alert>
|
||
<div class="table-head-tool">
|
||
<Button type="primary" @click="showAddWarp">新增</Button>
|
||
</div>
|
||
<div class="table-body">
|
||
<tables ref="tables" v-model="gridOption.data" :columns="gridOption.columns" />
|
||
</div>
|
||
|
||
<editModal ref="editModal" :columns="gridOption.columns" :data="gridOption.editRow">
|
||
</editModal>
|
||
|
||
<Modal v-model="isShowPermission" title="权限设置" @on-ok="submitPermission">
|
||
<Tree ref="trees" :check-strictly='true' :data="treeData" show-checkbox></Tree>
|
||
</Modal>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import uiTool from '@/utils/uiTool'
|
||
import roleServer from '@/api/system/roleServer'
|
||
import menuServer from '@/api/system/menuServer'
|
||
|
||
export default {
|
||
name: 'tables_page',
|
||
|
||
data() {
|
||
return {
|
||
row: {},
|
||
isShowPermission: false,
|
||
expandTreeAll: [],
|
||
gridOption: {
|
||
columns: [
|
||
{ title: '序号', key: 'id' },
|
||
{ title: '角色名称', key: 'name' },
|
||
{
|
||
title: '操作',
|
||
type: 'template',
|
||
render: (h, params) => {
|
||
let btns = [
|
||
{
|
||
title: '修改',
|
||
type: 'primary',
|
||
click: () => {
|
||
this.showEditWarp(params.row)
|
||
}
|
||
},
|
||
{
|
||
title: '删除',
|
||
type: 'primary',
|
||
click: () => {
|
||
this.delConfirm(params.row)
|
||
}
|
||
},
|
||
{
|
||
title: '配置权限',
|
||
type: 'primary',
|
||
click: () => {
|
||
this.configPermission(params.row)
|
||
}
|
||
}
|
||
]
|
||
|
||
return uiTool.getBtn(h, btns)
|
||
}
|
||
}
|
||
],
|
||
data: []
|
||
},
|
||
treeData: []
|
||
}
|
||
},
|
||
created() {
|
||
this.init()
|
||
},
|
||
methods: {
|
||
parseRoleMenuIds(menus) {
|
||
if (menus == null || menus === '') {
|
||
return []
|
||
}
|
||
if (Array.isArray(menus)) {
|
||
return menus.map((id) => Number(id)).filter((id) => !Number.isNaN(id))
|
||
}
|
||
if (typeof menus === 'string') {
|
||
try {
|
||
const parsed = JSON.parse(menus)
|
||
return this.parseRoleMenuIds(parsed)
|
||
} catch {
|
||
return []
|
||
}
|
||
}
|
||
return []
|
||
},
|
||
async init() {
|
||
let res = await roleServer.list()
|
||
this.gridOption.data = res.data
|
||
},
|
||
|
||
showAddWarp() {
|
||
this.$refs.editModal.addShow({}, async (row) => {
|
||
await roleServer.add(row)
|
||
this.init()
|
||
await this.$Message.success('新增成功！')
|
||
})
|
||
},
|
||
showEditWarp(row) {
|
||
this.$refs.editModal.editShow(row, async (newRow) => {
|
||
await roleServer.edit(newRow)
|
||
await this.init()
|
||
this.$Message.success('修改成功！')
|
||
})
|
||
},
|
||
async delConfirm(row) {
|
||
uiTool.delConfirm(async () => {
|
||
await roleServer.del(row)
|
||
await this.init()
|
||
this.$Message.success('删除成功！')
|
||
})
|
||
},
|
||
async submitPermission() {
|
||
let checkNodes = this.$refs['trees'].getCheckedNodes()
|
||
let checkNodeIds = checkNodes.map((p) => p.id)
|
||
let param = {
|
||
id: this.row.id,
|
||
name: this.row.name,
|
||
menus: JSON.stringify(checkNodeIds)
|
||
}
|
||
|
||
await roleServer.edit(param)
|
||
await this.init()
|
||
this.$Message.success('权限修改成功！')
|
||
|
||
this.isShowPermission = false
|
||
},
|
||
async configPermission(row) {
|
||
this.row = row
|
||
this.expandTreeAll = []
|
||
|
||
let res = await menuServer.list()
|
||
let tree = uiTool.transformTree(res.data)
|
||
this.expandTreeAll = this.parseRoleMenuIds(row.menus)
|
||
this.treeData = this.mapTree(tree)
|
||
|
||
this.isShowPermission = true
|
||
},
|
||
|
||
mapTree(tree) {
|
||
return tree.map((p) => {
|
||
if (p.children && p.children.length > 0) {
|
||
p.children = this.mapTree(p.children)
|
||
}
|
||
|
||
let row = this.expandTreeAll.find((p2) => Number(p2) === Number(p.id))
|
||
if (row) {
|
||
p.checked = true
|
||
}
|
||
|
||
return Object.assign({}, p, { title: p.name, expand: false })
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|