150 lines
3.8 KiB
Vue
150 lines
3.8 KiB
Vue
<template>
|
|
<div class="content-view">
|
|
<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: {
|
|
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)
|
|
if (row.menus) {
|
|
this.expandTreeAll = JSON.parse(row.menus)
|
|
this.treeData = this.mapTree(tree)
|
|
} else {
|
|
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) => p2 === p.id)
|
|
if (row) {
|
|
p.checked = true
|
|
}
|
|
|
|
return Object.assign({}, p, { title: p.name, expand: false })
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|