380 lines
11 KiB
Vue
380 lines
11 KiB
Vue
<template>
|
|
<el-drawer
|
|
size="70%"
|
|
v-model="drawer"
|
|
direction="rtl"
|
|
destroy-on-close
|
|
:before-close="handleClose"
|
|
>
|
|
<template #header>
|
|
<div>
|
|
<el-tag size="large" type="primary">当前角色:{{ editedRoleInfo.name }}</el-tag>
|
|
</div>
|
|
</template>
|
|
<div style="padding: 1em">
|
|
<div style="margin-bottom: 10px">
|
|
<el-button size="mini" type="primary" @click="onSaveAuth">保存菜单授权</el-button>
|
|
</div>
|
|
<vxe-table
|
|
ref="tableRef"
|
|
border
|
|
resizable
|
|
:row-config="{keyField: 'menu_id'}"
|
|
:tree-config="{transform: true, rowField: 'menu_id', parentField: 'parent'}"
|
|
:checkbox-config="{labelField: 'menu_id', checkRowKeys: multipleTableData,checkStrictly:true}"
|
|
:expand-config="{accordion:true}"
|
|
@toggle-row-expand="menuNodeClick"
|
|
:data="menuData">
|
|
<vxe-column type="checkbox" title="ID" width="200" tree-node></vxe-column>
|
|
<vxe-column field="name" title="目录/菜单" ></vxe-column>
|
|
<vxe-column type="expand" title="已授予权限" width="120">
|
|
<template #content="{ row, rowIndex }">
|
|
<div style="padding: 10px 0px" v-if="!row.is_catalog">
|
|
<el-button type="primary" size="small" style="margin-bottom: 0.5em"
|
|
@click="createBtnPermission">新增
|
|
</el-button>
|
|
<el-table size="small" :data="buttonPermissionData" border style="width: 100%">
|
|
<el-table-column prop="menu_button" label="权限名称" width="100">
|
|
<template #default="scope">
|
|
<div>{{ scope.row.menu_button__name }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="menu_button__value" label="权限值" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="data_range" label="权限范围" width="140">
|
|
<template #default="scope">
|
|
<div>{{ formatDataRange(scope.row.data_range) }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="dept" label="权限涉及部门"/>
|
|
<el-table-column fixed="right" label="操作" width="120">
|
|
<template #default="scope">
|
|
<el-button type="danger" size="small" @click="onDeleteBtn(scope)">删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
<!-- 弹窗-->
|
|
<el-dialog v-model="dialogFormVisible" append-to-body width="400px" title="配置按钮权限">
|
|
<el-form ref="buttonFormRef" :model="buttonForm" :rules="buttonRules" label-width="120px">
|
|
<el-form-item label="按钮" prop="menu_button">
|
|
<el-select v-model="buttonForm.menu_button" placeholder="请选择按钮" @change="onChangeButton">
|
|
<el-option v-for="(item,index) in buttonOptions" :key="index" :label="item.name"
|
|
:value="item.id"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="权限范围" prop="data_range">
|
|
<el-select v-model="buttonForm.data_range" placeholder="请选择按钮">
|
|
<el-option v-for="(item,index) in dataScopeOptions" :key="index" :label="item.label"
|
|
:value="item.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="数据部门" prop="dept" v-show="buttonForm.data_range === 4">
|
|
<div class="dept-tree">
|
|
<el-tree
|
|
:data="deptOptions"
|
|
show-checkbox
|
|
default-expand-all
|
|
:default-checked-keys="deptCheckedKeys"
|
|
ref="deptTree"
|
|
node-key="dept_id"
|
|
:check-strictly="true"
|
|
:props="{ label: 'name' }"
|
|
></el-tree>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="onSaveButtonForm">
|
|
确定
|
|
</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {ref, defineExpose, reactive, toRefs} from 'vue'
|
|
import {ElMessageBox, ElTable} from 'element-plus'
|
|
import * as api from './api.ts'
|
|
import type {FormRules, FormInstance} from 'element-plus'
|
|
import {ElMessage} from 'element-plus'
|
|
import XEUtils from 'xe-utils'
|
|
import { VXETable, VxeTableInstance,VxeTableEvents } from 'vxe-table'
|
|
|
|
interface tableRow {
|
|
menu_id: number
|
|
name: string
|
|
}
|
|
|
|
//抽屉是否显示
|
|
const drawer = ref(false)
|
|
//当前编辑的角色信息
|
|
const editedRoleInfo = ref({})
|
|
|
|
//抽屉关闭确认
|
|
const handleClose = (done: () => void) => {
|
|
ElMessageBox.confirm('您确定要关闭?', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
})
|
|
.then(() => {
|
|
done()
|
|
})
|
|
.catch(() => {
|
|
// catch error
|
|
})
|
|
}
|
|
|
|
/*****菜单的配置项***/
|
|
const defaultProps = {
|
|
children: 'children',
|
|
label: 'name',
|
|
isLeaf: 'hasChild'
|
|
}
|
|
|
|
interface Tree {
|
|
name: string
|
|
children?: Tree[],
|
|
id: number
|
|
}
|
|
|
|
let menuData = ref<Tree>()
|
|
//获取菜单
|
|
const getMenuData = () => {
|
|
api.GetMenu({}).then((res: any) => {
|
|
const {data} = res
|
|
menuData.value = data
|
|
})
|
|
}
|
|
|
|
//获取已授权的菜单
|
|
const tableRef = ref<VxeTableInstance<tableRow>>()
|
|
const multipleTableData = ref()
|
|
const getRoleToMenu = () => {
|
|
api.role_to_menu({role: editedRoleInfo.value.id}).then((res: any) => {
|
|
const {data} = res
|
|
multipleTableData.value=data
|
|
})
|
|
}
|
|
|
|
let isBtnPermissionShow = ref(false)
|
|
let buttonOptions = ref<[]>()
|
|
let editedMenuInfo = ref()
|
|
//菜单节点点击事件
|
|
const menuNodeClick: VxeTableEvents.ToggleRowExpand<tableRow> = ({ expanded, row}) => {
|
|
// isBtnPermissionShow.value = !node.is_catalog
|
|
if (!row.is_catalog) {
|
|
buttonOptions.value = []
|
|
editedMenuInfo.value = row
|
|
api.GetMenuButton({menu: row.menu_id}).then((res: any) => {
|
|
const {data} = res
|
|
buttonOptions.value = data
|
|
})
|
|
api.getObj({menu: row.menu_id, role: editedRoleInfo.value.id}).then((res: any) => {
|
|
const {data} = res
|
|
buttonPermissionData.value = data
|
|
})
|
|
}
|
|
|
|
}
|
|
const menuTree = ref()
|
|
/*****菜单的配置项***/
|
|
/***按钮授权的弹窗****/
|
|
//是否显示新增表单
|
|
const dialogFormVisible = ref(false)
|
|
//部门树
|
|
const deptTree = ref()
|
|
//自定义部门数据
|
|
const deptOptions = ref()
|
|
//选中的部门数据
|
|
const deptCheckedKeys = []
|
|
//按钮表单
|
|
const buttonForm = reactive({
|
|
menu_button: null,
|
|
role: null,
|
|
menu: null,
|
|
data_range: null,
|
|
dept: []
|
|
})
|
|
//按钮表格数据
|
|
let buttonPermissionData = ref([])
|
|
//按钮表单验证
|
|
const buttonRules = reactive<FormRules>({
|
|
menu_button: [
|
|
{required: true, message: '必填项'}
|
|
],
|
|
data_range: [
|
|
{required: true, message: '必填项'}
|
|
]
|
|
})
|
|
//新增按钮
|
|
const buttonFormRef = ref<FormInstance>()
|
|
const createBtnPermission = () => {
|
|
dialogFormVisible.value = true
|
|
buttonForm.menu_button = null
|
|
buttonForm.menu = null
|
|
buttonForm.role = null
|
|
buttonForm.data_range = null
|
|
buttonForm.dept = []
|
|
}
|
|
//权限范围数据
|
|
const dataScopeOptions = ref<[]>()
|
|
//按钮值变化事件
|
|
const onChangeButton = (val: any) => {
|
|
dataScopeOptions.value = []
|
|
//获取权限值范围
|
|
api.GetDataScope({menu_button: val}).then((res: any) => {
|
|
dataScopeOptions.value = res.data
|
|
})
|
|
//获取权限部门值
|
|
api.GetDataScopeDept({menu_button: val}).then((res: any) => {
|
|
deptOptions.value = XEUtils.toArrayTree(res.data, {parentKey: 'parent', strict: false})
|
|
})
|
|
|
|
}
|
|
//过滤按钮名称
|
|
const formatMenuBtn = (val: any) => {
|
|
let obj: any = buttonOptions.value?.find((item: any) => {
|
|
return item.id === val
|
|
})
|
|
return obj ? obj.name : null
|
|
}
|
|
//过滤权限范围
|
|
const formatDataRange = (val: any) => {
|
|
let obj: any = [
|
|
{
|
|
"value": 0,
|
|
"label": '仅本人数据权限'
|
|
},
|
|
{
|
|
"value": 1,
|
|
"label": '本部门及以下数据权限'
|
|
},
|
|
{
|
|
"value": 2,
|
|
"label": '本部门数据权限'
|
|
},
|
|
{
|
|
"value": 3,
|
|
"label": '全部数据权限'
|
|
},
|
|
{
|
|
"value": 4,
|
|
"label": '自定义数据权限'
|
|
}
|
|
].find((item: any) => {
|
|
return item.value === val
|
|
})
|
|
return obj ? obj.label : null
|
|
}
|
|
//保存按钮表单
|
|
|
|
const onSaveButtonForm = async () => {
|
|
const {id: roleId} = editedRoleInfo.value
|
|
const {id: menuId} = editedMenuInfo.value
|
|
const form: any = Object.assign({}, buttonForm)
|
|
form.role = roleId
|
|
form.menu = menuId
|
|
//选中的部门
|
|
const checkedList = deptTree.value.getCheckedKeys()
|
|
form.dept = checkedList
|
|
if (!buttonFormRef.value) return
|
|
await buttonFormRef.value.validate((valid, fields) => {
|
|
if (valid) {
|
|
api.CreatePermission(form).then((res: any) => {
|
|
const {data} = res
|
|
buttonPermissionData.value.push(data)
|
|
dialogFormVisible.value = false
|
|
ElMessage({
|
|
type: 'success',
|
|
message: res.msg,
|
|
})
|
|
})
|
|
} else {
|
|
ElMessage({
|
|
type: 'error',
|
|
title: '提交错误',
|
|
message: 'F12控制台看详情',
|
|
})
|
|
console.log('提交错误', fields)
|
|
}
|
|
})
|
|
|
|
}
|
|
//删除按钮权限
|
|
const onDeleteBtn = (scope: any) => {
|
|
const {row, $index} = scope
|
|
ElMessageBox.confirm(
|
|
'您是否要删除数据?',
|
|
'温馨提示',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}
|
|
).then(() => {
|
|
api.DeletePermission({id: row.id}).then((res: any) => {
|
|
buttonPermissionData.value.splice($index, 1)
|
|
ElMessage({
|
|
type: 'success',
|
|
message: res.msg,
|
|
})
|
|
})
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: 'info',
|
|
message: '取消删除',
|
|
})
|
|
})
|
|
|
|
}
|
|
/***按钮授权的弹窗****/
|
|
//初始化数据
|
|
const initGet = () => {
|
|
getMenuData()
|
|
getRoleToMenu()
|
|
}
|
|
|
|
/**
|
|
* 保存授权
|
|
*/
|
|
const onSaveAuth = () => {
|
|
|
|
const $table = tableRef.value
|
|
if ($table) {
|
|
const selectRecords = $table.getCheckboxRecords()
|
|
const menuIdList = selectRecords.map((record:any) => record.menu_id)
|
|
const {id: roleId} = editedRoleInfo.value
|
|
const data = {
|
|
role: roleId,
|
|
menu: menuIdList
|
|
}
|
|
api.SaveMenuPermission(data).then((res: any) => {
|
|
ElMessage({
|
|
message: res.msg,
|
|
type: 'success',
|
|
})
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
|
|
defineExpose({drawer, editedRoleInfo, initGet})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|