|
|
@@ -1,13 +1,14 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div class="pa-3 white">
|
|
|
<m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="search" @reset="search">
|
|
|
<template #button>
|
|
|
- <el-button type="primary" icon="el-icon-plus" @click="handleAdd">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" @click="onAdd">
|
|
|
新增
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</m-search>
|
|
|
<MTable
|
|
|
+ v-loading="loading"
|
|
|
:items="items"
|
|
|
:headers="headers"
|
|
|
:page-size="pageInfo.size"
|
|
|
@@ -19,24 +20,46 @@
|
|
|
{{ dateFormat(scope.row.createTime) }}
|
|
|
</template>
|
|
|
<template #actions="scope">
|
|
|
- <el-button type="text">
|
|
|
- <el-link :underline="false" type="primary" text @click="handleClick(scope.row)">数据权限</el-link>
|
|
|
- </el-button>
|
|
|
- <el-button type="text">
|
|
|
- <el-link :underline="false" type="primary" text @click="handleClick(scope.row)">编辑</el-link>
|
|
|
- </el-button>
|
|
|
- <el-button type="text">
|
|
|
- <el-link :underline="false" type="danger" text @click="handleClick(scope.row)">删除</el-link>
|
|
|
- </el-button>
|
|
|
+ <m-button type="primary" text @click="onEdit(scope.row)">编辑</m-button>
|
|
|
+ <m-button type="primary" text @click="onMenu(scope.row)">菜单权限</m-button>
|
|
|
+ <m-button type="primary" text @click="onPermission(scope.row)">数据权限</m-button>
|
|
|
+ <m-button type="danger" text @click="onDelete(scope.row)">删除</m-button>
|
|
|
</template>
|
|
|
</MTable>
|
|
|
- <MDialog ref="dialog" :title="isEdit ? '编辑角色' : '新增角色'" @sure="handleSave">
|
|
|
- <MForm></MForm>
|
|
|
+ <MDialog ref="dialog" :title="itemData.id ? '编辑角色' : '新增角色'" @sure="handleSave">
|
|
|
+ <MForm ref="roleForm" :items="roleFormItems" v-model="roleFormValue"></MForm>
|
|
|
+ </MDialog>
|
|
|
+ <MDialog ref="menuDialog" title="菜单权限编辑" @sure="handleSaveMenu">
|
|
|
+ <MForm ref="menuForm">
|
|
|
+ <el-form-item label="角色名称">
|
|
|
+ <el-tag>{{ itemData.roleName }}</el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="菜单权限" required>
|
|
|
+ <m-card shadow="never">
|
|
|
+ <el-tree
|
|
|
+ ref="menuTree"
|
|
|
+ :data="menuData"
|
|
|
+ show-checkbox
|
|
|
+ node-key="id"
|
|
|
+ :props="{
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ </m-card>
|
|
|
+ </el-form-item>
|
|
|
+ </MForm>
|
|
|
+ </MDialog>
|
|
|
+ <MDialog ref="dataDialog" title="数据权限编辑" @sure="handleSaveData">
|
|
|
+ <MForm ref="roleForm" :items="roleFormItems" v-model="roleFormValue"></MForm>
|
|
|
</MDialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import MCard from '@/components/MCard'
|
|
|
+import MButton from '@/components/MButton'
|
|
|
import MForm from '@/components/MForm'
|
|
|
import MTable from '@/components/MTable'
|
|
|
import MDialog from '@/components/MDialog'
|
|
|
@@ -50,11 +73,11 @@ import {
|
|
|
saveDataPermission
|
|
|
} from '@/api/menu'
|
|
|
import { dateFormat } from '@/utils/date'
|
|
|
-// import UserEdit from './components/userEdit'
|
|
|
-// import DataPermission from './components/DataPermission'
|
|
|
export default {
|
|
|
name: 'role-manage-role',
|
|
|
components: {
|
|
|
+ MCard,
|
|
|
+ MButton,
|
|
|
MForm,
|
|
|
MTable,
|
|
|
MDialog,
|
|
|
@@ -62,6 +85,25 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
+ itemData: {},
|
|
|
+ roleFormItems: [
|
|
|
+ {
|
|
|
+ label: '角色名称',
|
|
|
+ prop: 'roleName',
|
|
|
+ type: 'input',
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '请输入角色名称', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ roleFormValue: {
|
|
|
+ roleName: null
|
|
|
+ },
|
|
|
+ menuFormItems: [
|
|
|
+ {
|
|
|
+ label: '角色名称'
|
|
|
+ }
|
|
|
+ ],
|
|
|
searchValues: {
|
|
|
roleName: null
|
|
|
},
|
|
|
@@ -72,9 +114,7 @@ export default {
|
|
|
type: 'input'
|
|
|
}
|
|
|
],
|
|
|
- roles: [],
|
|
|
- isEdit: false,
|
|
|
- itemData: {},
|
|
|
+ menuData: [],
|
|
|
itemDataPermission: {},
|
|
|
show: false,
|
|
|
showMenu: false,
|
|
|
@@ -90,9 +130,17 @@ export default {
|
|
|
current: 1
|
|
|
},
|
|
|
orders: [],
|
|
|
- loading: true
|
|
|
+ loading: false
|
|
|
}
|
|
|
},
|
|
|
+ // computed: {
|
|
|
+ // defaultCheckedKeys () {
|
|
|
+ // if (Object.keys(this.itemData).length === 0) {
|
|
|
+ // return []
|
|
|
+ // }
|
|
|
+ // return this.itemData.menuIds.split(',').map(e => +e)
|
|
|
+ // }
|
|
|
+ // },
|
|
|
created () {
|
|
|
this.getMenu()
|
|
|
},
|
|
|
@@ -100,75 +148,134 @@ export default {
|
|
|
async getMenu () {
|
|
|
try {
|
|
|
const { data } = await getMenuTree({})
|
|
|
- this.roles = data.routes
|
|
|
+ this.menuData = data.routes
|
|
|
this.initPage()
|
|
|
} catch (error) {
|
|
|
this.$message.error(error)
|
|
|
}
|
|
|
},
|
|
|
async initPage () {
|
|
|
- this.loading = false
|
|
|
+ this.loading = true
|
|
|
try {
|
|
|
const { data } = await getRoleList({ ...this.pageInfo, orders: this.orders, entity: this.searchValues })
|
|
|
this.items = data.records
|
|
|
this.total = data.total
|
|
|
} catch (error) {
|
|
|
this.$message.error(error)
|
|
|
+ } finally {
|
|
|
+ this.loading = false
|
|
|
}
|
|
|
},
|
|
|
- async handleEdit (item) {
|
|
|
+ async getDetails (roleId) {
|
|
|
try {
|
|
|
- const { data } = await getRoleDetails({ roleId: item.id })
|
|
|
+ const { data } = await getRoleDetails({ roleId })
|
|
|
this.itemData = data
|
|
|
- this.isEdit = true
|
|
|
- this.show = true
|
|
|
+ Object.assign(this.itemData, data)
|
|
|
+ return data
|
|
|
} catch (error) {
|
|
|
this.$message.error(error)
|
|
|
}
|
|
|
},
|
|
|
- async handleAdd () {
|
|
|
- this.isEdit = false
|
|
|
+ onAdd () {
|
|
|
+ this.roleFormValue = {
|
|
|
+ roleName: null
|
|
|
+ }
|
|
|
+ this.itemData = {}
|
|
|
+ this.$refs.dialog.open()
|
|
|
+ },
|
|
|
+ async onEdit (item) {
|
|
|
+ const data = await this.getDetails(item.id)
|
|
|
+ if (!data) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.roleFormValue = {
|
|
|
+ roleName: data.roleName
|
|
|
+ }
|
|
|
+ this.itemData = data
|
|
|
this.$refs.dialog.open()
|
|
|
},
|
|
|
+ async onMenu (item) {
|
|
|
+ const data = await this.getDetails(item.id)
|
|
|
+ if (!data) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.itemData = data
|
|
|
+ this.$refs.menuDialog.open()
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.menuTree.setCheckedKeys(data.menuIds.split(',').map(e => +e))
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async onPermission (item) {
|
|
|
+ const data = await this.getDetails(item.id)
|
|
|
+ if (!data) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.itemData = data
|
|
|
+ this.$refs.dataDialog.open()
|
|
|
+ },
|
|
|
+ onDelete (item) {
|
|
|
+ this.$confirm('是否确定删除该选项', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(async () => {
|
|
|
+ try {
|
|
|
+ await deleteRole({ id: item.id })
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.initPage()
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error(error)
|
|
|
+ }
|
|
|
+ }).catch(_ => {})
|
|
|
+ },
|
|
|
handleData (item) {
|
|
|
this.itemDataPermission = item
|
|
|
this.showMenu = true
|
|
|
},
|
|
|
- handleDelete (ids) {
|
|
|
- // console.log(ids)
|
|
|
- // if (Array.isArray(ids)) return
|
|
|
- if (Array.isArray(ids) && ids.length === 0) return this.$message.warning('请选择删除的选项')
|
|
|
- // console.log(ids)
|
|
|
- // if (ids) return
|
|
|
- this.$confirm('提示', '是否确定删除该选项').then(async () => {
|
|
|
+ handleSave () {
|
|
|
+ this.$refs.roleForm.validate(async (valid) => {
|
|
|
+ if (!valid) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const obj = {
|
|
|
+ ...this.roleFormValue,
|
|
|
+ menuIds: '-9999'
|
|
|
+ }
|
|
|
try {
|
|
|
- await deleteRole({ id: ids })
|
|
|
- this.$message.success('删除成功')
|
|
|
+ await saveRole(obj)
|
|
|
+ this.$message.success(this.itemData.id ? '编辑成功' : '添加成功')
|
|
|
+ this.$refs.dialog.close()
|
|
|
this.initPage()
|
|
|
} catch (error) {
|
|
|
this.$message.error(error)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- async handleSave () {
|
|
|
- const obj = this.$refs.edit.getValue()
|
|
|
- if (this.isEdit) obj.id = this.itemData.id
|
|
|
+ async handleSaveMenu () {
|
|
|
+ const menuIds = this.$refs.menuTree.getCheckedKeys(true)
|
|
|
+ if (!menuIds.length) {
|
|
|
+ this.$message.warning('请选择菜单')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const obj = {
|
|
|
+ id: this.itemData.id,
|
|
|
+ menuIds: menuIds.join(',')
|
|
|
+ }
|
|
|
try {
|
|
|
await saveRole(obj)
|
|
|
- this.$message.success(this.isEdit ? '编辑成功' : '添加成功')
|
|
|
- this.$refs.dialog.closest()
|
|
|
+ this.$message.success('保存成功')
|
|
|
+ this.$refs.menuDialog.close()
|
|
|
this.initPage()
|
|
|
} catch (error) {
|
|
|
this.$message.error(error)
|
|
|
}
|
|
|
},
|
|
|
- async handleSaveMenu () {
|
|
|
- const obj = this.$refs.dataPermission.getValue()
|
|
|
- if (!obj) {
|
|
|
- return
|
|
|
- }
|
|
|
+ async handleSaveData () {
|
|
|
try {
|
|
|
- await saveDataPermission(obj)
|
|
|
+ await saveDataPermission({
|
|
|
+ roleId: this.itemData.id
|
|
|
+ // menuIds: menuIds.join(',')
|
|
|
+ })
|
|
|
this.$message.success('保存成功')
|
|
|
this.showMenu = false
|
|
|
this.initPage()
|
zhengnaiwen_citu