feat( 角色管理 ): 权限配置重写
This commit is contained in:
sheng
@@ -1,379 +1,350 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-drawer
|
<el-drawer size="70%" v-model="drawer" direction="rtl" destroy-on-close :before-close="handleClose">
|
||||||
size="70%"
|
<template #header>
|
||||||
v-model="drawer"
|
<div>
|
||||||
direction="rtl"
|
<el-tag size="large">当前角色:{{ editedRoleInfo.name }}</el-tag>
|
||||||
destroy-on-close
|
</div>
|
||||||
:before-close="handleClose"
|
</template>
|
||||||
>
|
<div style="padding: 1em">
|
||||||
<template #header>
|
<div style="margin-bottom: 10px">
|
||||||
<div>
|
<el-button size="mini" type="primary" @click="onSaveAuth">保存菜单授权</el-button>
|
||||||
<el-tag size="large" type="primary">当前角色:{{ editedRoleInfo.name }}</el-tag>
|
</div>
|
||||||
</div>
|
<vxe-table
|
||||||
</template>
|
ref="tableRef"
|
||||||
<div style="padding: 1em">
|
border
|
||||||
<div style="margin-bottom: 10px">
|
resizable
|
||||||
<el-button size="mini" type="primary" @click="onSaveAuth">保存菜单授权</el-button>
|
:row-config="{ keyField: 'menu_id' }"
|
||||||
</div>
|
:tree-config="{ transform: true, rowField: 'menu_id', parentField: 'parent' }"
|
||||||
<vxe-table
|
:checkbox-config="{ labelField: 'menu_id', checkRowKeys: multipleTableData, checkStrictly: true }"
|
||||||
ref="tableRef"
|
:expand-config="{ accordion: true }"
|
||||||
border
|
@toggle-row-expand="menuNodeClick"
|
||||||
resizable
|
:data="menuData"
|
||||||
:row-config="{keyField: 'menu_id'}"
|
>
|
||||||
:tree-config="{transform: true, rowField: 'menu_id', parentField: 'parent'}"
|
<vxe-column type="checkbox" title="ID" width="200" tree-node></vxe-column>
|
||||||
:checkbox-config="{labelField: 'menu_id', checkRowKeys: multipleTableData,checkStrictly:true}"
|
<vxe-column field="name" title="目录/菜单"></vxe-column>
|
||||||
:expand-config="{accordion:true}"
|
<vxe-column type="expand" title="已授予权限" width="120">
|
||||||
@toggle-row-expand="menuNodeClick"
|
<template #content="{ row, rowIndex }">
|
||||||
:data="menuData">
|
<div style="padding: 10px 0px" v-if="!row.is_catalog">
|
||||||
<vxe-column type="checkbox" title="ID" width="200" tree-node></vxe-column>
|
<el-button type="primary" size="small" style="margin-bottom: 0.5em" @click="createBtnPermission">新增 </el-button>
|
||||||
<vxe-column field="name" title="目录/菜单" ></vxe-column>
|
<el-table size="small" :data="buttonPermissionData" border style="width: 100%">
|
||||||
<vxe-column type="expand" title="已授予权限" width="120">
|
<el-table-column prop="menu_button" label="权限名称" width="100">
|
||||||
<template #content="{ row, rowIndex }">
|
<template #default="scope">
|
||||||
<div style="padding: 10px 0px" v-if="!row.is_catalog">
|
<div>{{ scope.row.menu_button__name }}</div>
|
||||||
<el-button type="primary" size="small" style="margin-bottom: 0.5em"
|
</template>
|
||||||
@click="createBtnPermission">新增
|
</el-table-column>
|
||||||
</el-button>
|
<el-table-column prop="menu_button__value" label="权限值" width="150"> </el-table-column>
|
||||||
<el-table size="small" :data="buttonPermissionData" border style="width: 100%">
|
<el-table-column prop="data_range" label="权限范围" width="140">
|
||||||
<el-table-column prop="menu_button" label="权限名称" width="100">
|
<template #default="scope">
|
||||||
<template #default="scope">
|
<div>{{ formatDataRange(scope.row.data_range) }}</div>
|
||||||
<div>{{ scope.row.menu_button__name }}</div>
|
</template>
|
||||||
</template>
|
</el-table-column>
|
||||||
</el-table-column>
|
<el-table-column prop="dept" label="权限涉及部门" />
|
||||||
<el-table-column prop="menu_button__value" label="权限值" width="150">
|
<el-table-column fixed="right" label="操作" width="120">
|
||||||
</el-table-column>
|
<template #default="scope">
|
||||||
<el-table-column prop="data_range" label="权限范围" width="140">
|
<el-button type="danger" size="small" @click="onDeleteBtn(scope)">删除 </el-button>
|
||||||
<template #default="scope">
|
</template>
|
||||||
<div>{{ formatDataRange(scope.row.data_range) }}</div>
|
</el-table-column>
|
||||||
</template>
|
</el-table>
|
||||||
</el-table-column>
|
</div>
|
||||||
<el-table-column prop="dept" label="权限涉及部门"/>
|
</template>
|
||||||
<el-table-column fixed="right" label="操作" width="120">
|
</vxe-column>
|
||||||
<template #default="scope">
|
</vxe-table>
|
||||||
<el-button type="danger" size="small" @click="onDeleteBtn(scope)">删除
|
<!-- 弹窗-->
|
||||||
</el-button>
|
<el-dialog v-model="dialogFormVisible" append-to-body width="400px" title="配置按钮权限">
|
||||||
</template>
|
<el-form ref="buttonFormRef" :model="buttonForm" :rules="buttonRules" label-width="120px">
|
||||||
</el-table-column>
|
<el-form-item label="按钮" prop="menu_button">
|
||||||
</el-table>
|
<el-select v-model="buttonForm.menu_button" placeholder="请选择按钮" @change="onChangeButton">
|
||||||
</div>
|
<el-option v-for="(item, index) in buttonOptions" :key="index" :label="item.name" :value="item.id" />
|
||||||
</template>
|
</el-select>
|
||||||
</vxe-column>
|
</el-form-item>
|
||||||
</vxe-table>
|
<el-form-item label="权限范围" prop="data_range">
|
||||||
<!-- 弹窗-->
|
<el-select v-model="buttonForm.data_range" placeholder="请选择按钮">
|
||||||
<el-dialog v-model="dialogFormVisible" append-to-body width="400px" title="配置按钮权限">
|
<el-option v-for="(item, index) in dataScopeOptions" :key="index" :label="item.label" :value="item.value" />
|
||||||
<el-form ref="buttonFormRef" :model="buttonForm" :rules="buttonRules" label-width="120px">
|
</el-select>
|
||||||
<el-form-item label="按钮" prop="menu_button">
|
</el-form-item>
|
||||||
<el-select v-model="buttonForm.menu_button" placeholder="请选择按钮" @change="onChangeButton">
|
<el-form-item label="数据部门" prop="dept" v-show="buttonForm.data_range === 4">
|
||||||
<el-option v-for="(item,index) in buttonOptions" :key="index" :label="item.name"
|
<div class="dept-tree">
|
||||||
:value="item.id"/>
|
<el-tree
|
||||||
</el-select>
|
:data="deptOptions"
|
||||||
</el-form-item>
|
show-checkbox
|
||||||
<el-form-item label="权限范围" prop="data_range">
|
default-expand-all
|
||||||
<el-select v-model="buttonForm.data_range" placeholder="请选择按钮">
|
:default-checked-keys="deptCheckedKeys"
|
||||||
<el-option v-for="(item,index) in dataScopeOptions" :key="index" :label="item.label"
|
ref="deptTree"
|
||||||
:value="item.value"/>
|
node-key="dept_id"
|
||||||
</el-select>
|
:check-strictly="true"
|
||||||
</el-form-item>
|
:props="{ label: 'name' }"
|
||||||
<el-form-item label="数据部门" prop="dept" v-show="buttonForm.data_range === 4">
|
></el-tree>
|
||||||
<div class="dept-tree">
|
</div>
|
||||||
<el-tree
|
</el-form-item>
|
||||||
:data="deptOptions"
|
</el-form>
|
||||||
show-checkbox
|
<template #footer>
|
||||||
default-expand-all
|
<span class="dialog-footer">
|
||||||
:default-checked-keys="deptCheckedKeys"
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||||||
ref="deptTree"
|
<el-button type="primary" @click="onSaveButtonForm"> 确定 </el-button>
|
||||||
node-key="dept_id"
|
</span>
|
||||||
:check-strictly="true"
|
</template>
|
||||||
:props="{ label: 'name' }"
|
</el-dialog>
|
||||||
></el-tree>
|
</div>
|
||||||
</div>
|
</el-drawer>
|
||||||
</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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {ref, defineExpose, reactive, toRefs} from 'vue'
|
import { ref, defineExpose, reactive, toRefs } from 'vue';
|
||||||
import {ElMessageBox, ElTable} from 'element-plus'
|
import { ElMessageBox, ElTable } from 'element-plus';
|
||||||
import * as api from './api.ts'
|
import * as api from './api.ts';
|
||||||
import type {FormRules, FormInstance} from 'element-plus'
|
import type { FormRules, FormInstance } from 'element-plus';
|
||||||
import {ElMessage} from 'element-plus'
|
import { ElMessage } from 'element-plus';
|
||||||
import XEUtils from 'xe-utils'
|
import XEUtils from 'xe-utils';
|
||||||
import { VXETable, VxeTableInstance,VxeTableEvents } from 'vxe-table'
|
import { VXETable, VxeTableInstance, VxeTableEvents } from 'vxe-table';
|
||||||
|
|
||||||
interface tableRow {
|
interface tableRow {
|
||||||
menu_id: number
|
menu_id: number;
|
||||||
name: string
|
name: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
//抽屉是否显示
|
//抽屉是否显示
|
||||||
const drawer = ref(false)
|
const drawer = ref(false);
|
||||||
//当前编辑的角色信息
|
//当前编辑的角色信息
|
||||||
const editedRoleInfo = ref({})
|
const editedRoleInfo = ref({});
|
||||||
|
|
||||||
//抽屉关闭确认
|
//抽屉关闭确认
|
||||||
const handleClose = (done: () => void) => {
|
const handleClose = (done: () => void) => {
|
||||||
ElMessageBox.confirm('您确定要关闭?', {
|
ElMessageBox.confirm('您确定要关闭?', {
|
||||||
confirmButtonText: '确定',
|
confirmButtonText: '确定',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
done()
|
done();
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
// catch error
|
// catch error
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
/*****菜单的配置项***/
|
/*****菜单的配置项***/
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
children: 'children',
|
children: 'children',
|
||||||
label: 'name',
|
label: 'name',
|
||||||
isLeaf: 'hasChild'
|
isLeaf: 'hasChild',
|
||||||
}
|
};
|
||||||
|
|
||||||
interface Tree {
|
interface Tree {
|
||||||
name: string
|
name: string;
|
||||||
children?: Tree[],
|
children?: Tree[];
|
||||||
id: number
|
id: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
let menuData = ref<Tree>()
|
let menuData = ref<Tree>();
|
||||||
//获取菜单
|
//获取菜单
|
||||||
const getMenuData = () => {
|
const getMenuData = () => {
|
||||||
api.GetMenu({}).then((res: any) => {
|
api.GetMenu({}).then((res: any) => {
|
||||||
const {data} = res
|
const { data } = res;
|
||||||
menuData.value = data
|
menuData.value = data;
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
//获取已授权的菜单
|
//获取已授权的菜单
|
||||||
const tableRef = ref<VxeTableInstance<tableRow>>()
|
const tableRef = ref<VxeTableInstance<tableRow>>();
|
||||||
const multipleTableData = ref()
|
const multipleTableData = ref();
|
||||||
const getRoleToMenu = () => {
|
const getRoleToMenu = () => {
|
||||||
api.role_to_menu({role: editedRoleInfo.value.id}).then((res: any) => {
|
api.role_to_menu({ role: editedRoleInfo.value.id }).then((res: any) => {
|
||||||
const {data} = res
|
const { data } = res;
|
||||||
multipleTableData.value=data
|
multipleTableData.value = data;
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
let isBtnPermissionShow = ref(false)
|
let isBtnPermissionShow = ref(false);
|
||||||
let buttonOptions = ref<[]>()
|
let buttonOptions = ref<[]>();
|
||||||
let editedMenuInfo = ref()
|
let editedMenuInfo = ref();
|
||||||
//菜单节点点击事件
|
//菜单节点点击事件
|
||||||
const menuNodeClick: VxeTableEvents.ToggleRowExpand<tableRow> = ({ expanded, row}) => {
|
const menuNodeClick: VxeTableEvents.ToggleRowExpand<tableRow> = ({ expanded, row }) => {
|
||||||
// isBtnPermissionShow.value = !node.is_catalog
|
// isBtnPermissionShow.value = !node.is_catalog
|
||||||
if (!row.is_catalog) {
|
if (!row.is_catalog) {
|
||||||
buttonOptions.value = []
|
buttonOptions.value = [];
|
||||||
editedMenuInfo.value = row
|
editedMenuInfo.value = row;
|
||||||
api.GetMenuButton({menu: row.menu_id}).then((res: any) => {
|
api.GetMenuButton({ menu: row.menu_id }).then((res: any) => {
|
||||||
const {data} = res
|
const { data } = res;
|
||||||
buttonOptions.value = data
|
buttonOptions.value = data;
|
||||||
})
|
});
|
||||||
api.getObj({menu: row.menu_id, role: editedRoleInfo.value.id}).then((res: any) => {
|
api.getObj({ menu: row.menu_id, role: editedRoleInfo.value.id }).then((res: any) => {
|
||||||
const {data} = res
|
const { data } = res;
|
||||||
buttonPermissionData.value = data
|
buttonPermissionData.value = data;
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
};
|
||||||
}
|
const menuTree = ref();
|
||||||
const menuTree = ref()
|
|
||||||
/*****菜单的配置项***/
|
/*****菜单的配置项***/
|
||||||
/***按钮授权的弹窗****/
|
/***按钮授权的弹窗****/
|
||||||
//是否显示新增表单
|
//是否显示新增表单
|
||||||
const dialogFormVisible = ref(false)
|
const dialogFormVisible = ref(false);
|
||||||
//部门树
|
//部门树
|
||||||
const deptTree = ref()
|
const deptTree = ref();
|
||||||
//自定义部门数据
|
//自定义部门数据
|
||||||
const deptOptions = ref()
|
const deptOptions = ref();
|
||||||
//选中的部门数据
|
//选中的部门数据
|
||||||
const deptCheckedKeys = []
|
const deptCheckedKeys = [];
|
||||||
//按钮表单
|
//按钮表单
|
||||||
const buttonForm = reactive({
|
const buttonForm = reactive({
|
||||||
menu_button: null,
|
menu_button: null,
|
||||||
role: null,
|
role: null,
|
||||||
menu: null,
|
menu: null,
|
||||||
data_range: null,
|
data_range: null,
|
||||||
dept: []
|
dept: [],
|
||||||
})
|
});
|
||||||
//按钮表格数据
|
//按钮表格数据
|
||||||
let buttonPermissionData = ref([])
|
let buttonPermissionData = ref([]);
|
||||||
//按钮表单验证
|
//按钮表单验证
|
||||||
const buttonRules = reactive<FormRules>({
|
const buttonRules = reactive<FormRules>({
|
||||||
menu_button: [
|
menu_button: [{ required: true, message: '必填项' }],
|
||||||
{required: true, message: '必填项'}
|
data_range: [{ required: true, message: '必填项' }],
|
||||||
],
|
});
|
||||||
data_range: [
|
|
||||||
{required: true, message: '必填项'}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
//新增按钮
|
//新增按钮
|
||||||
const buttonFormRef = ref<FormInstance>()
|
const buttonFormRef = ref<FormInstance>();
|
||||||
const createBtnPermission = () => {
|
const createBtnPermission = () => {
|
||||||
dialogFormVisible.value = true
|
dialogFormVisible.value = true;
|
||||||
buttonForm.menu_button = null
|
buttonForm.menu_button = null;
|
||||||
buttonForm.menu = null
|
buttonForm.menu = null;
|
||||||
buttonForm.role = null
|
buttonForm.role = null;
|
||||||
buttonForm.data_range = null
|
buttonForm.data_range = null;
|
||||||
buttonForm.dept = []
|
buttonForm.dept = [];
|
||||||
}
|
};
|
||||||
//权限范围数据
|
//权限范围数据
|
||||||
const dataScopeOptions = ref<[]>()
|
const dataScopeOptions = ref<[]>();
|
||||||
//按钮值变化事件
|
//按钮值变化事件
|
||||||
const onChangeButton = (val: any) => {
|
const onChangeButton = (val: any) => {
|
||||||
dataScopeOptions.value = []
|
dataScopeOptions.value = [];
|
||||||
//获取权限值范围
|
//获取权限值范围
|
||||||
api.GetDataScope({menu_button: val}).then((res: any) => {
|
api.GetDataScope({ menu_button: val }).then((res: any) => {
|
||||||
dataScopeOptions.value = res.data
|
dataScopeOptions.value = res.data;
|
||||||
})
|
});
|
||||||
//获取权限部门值
|
//获取权限部门值
|
||||||
api.GetDataScopeDept({menu_button: val}).then((res: any) => {
|
api.GetDataScopeDept({ menu_button: val }).then((res: any) => {
|
||||||
deptOptions.value = XEUtils.toArrayTree(res.data, {parentKey: 'parent', strict: false})
|
deptOptions.value = XEUtils.toArrayTree(res.data, { parentKey: 'parent', strict: false });
|
||||||
})
|
});
|
||||||
|
};
|
||||||
}
|
|
||||||
//过滤按钮名称
|
//过滤按钮名称
|
||||||
const formatMenuBtn = (val: any) => {
|
const formatMenuBtn = (val: any) => {
|
||||||
let obj: any = buttonOptions.value?.find((item: any) => {
|
let obj: any = buttonOptions.value?.find((item: any) => {
|
||||||
return item.id === val
|
return item.id === val;
|
||||||
})
|
});
|
||||||
return obj ? obj.name : null
|
return obj ? obj.name : null;
|
||||||
}
|
};
|
||||||
//过滤权限范围
|
//过滤权限范围
|
||||||
const formatDataRange = (val: any) => {
|
const formatDataRange = (val: any) => {
|
||||||
let obj: any = [
|
let obj: any = [
|
||||||
{
|
{
|
||||||
"value": 0,
|
value: 0,
|
||||||
"label": '仅本人数据权限'
|
label: '仅本人数据权限',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"value": 1,
|
value: 1,
|
||||||
"label": '本部门及以下数据权限'
|
label: '本部门及以下数据权限',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"value": 2,
|
value: 2,
|
||||||
"label": '本部门数据权限'
|
label: '本部门数据权限',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"value": 3,
|
value: 3,
|
||||||
"label": '全部数据权限'
|
label: '全部数据权限',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"value": 4,
|
value: 4,
|
||||||
"label": '自定义数据权限'
|
label: '自定义数据权限',
|
||||||
}
|
},
|
||||||
].find((item: any) => {
|
].find((item: any) => {
|
||||||
return item.value === val
|
return item.value === val;
|
||||||
})
|
});
|
||||||
return obj ? obj.label : null
|
return obj ? obj.label : null;
|
||||||
}
|
};
|
||||||
//保存按钮表单
|
//保存按钮表单
|
||||||
|
|
||||||
const onSaveButtonForm = async () => {
|
const onSaveButtonForm = async () => {
|
||||||
const {id: roleId} = editedRoleInfo.value
|
const { id: roleId } = editedRoleInfo.value;
|
||||||
const {id: menuId} = editedMenuInfo.value
|
const { id: menuId } = editedMenuInfo.value;
|
||||||
const form: any = Object.assign({}, buttonForm)
|
const form: any = Object.assign({}, buttonForm);
|
||||||
form.role = roleId
|
form.role = roleId;
|
||||||
form.menu = menuId
|
form.menu = menuId;
|
||||||
//选中的部门
|
//选中的部门
|
||||||
const checkedList = deptTree.value.getCheckedKeys()
|
const checkedList = deptTree.value.getCheckedKeys();
|
||||||
form.dept = checkedList
|
form.dept = checkedList;
|
||||||
if (!buttonFormRef.value) return
|
if (!buttonFormRef.value) return;
|
||||||
await buttonFormRef.value.validate((valid, fields) => {
|
await buttonFormRef.value.validate((valid, fields) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
api.CreatePermission(form).then((res: any) => {
|
api.CreatePermission(form).then((res: any) => {
|
||||||
const {data} = res
|
const { data } = res;
|
||||||
buttonPermissionData.value.push(data)
|
buttonPermissionData.value.push(data);
|
||||||
dialogFormVisible.value = false
|
dialogFormVisible.value = false;
|
||||||
ElMessage({
|
ElMessage({
|
||||||
type: 'success',
|
type: 'success',
|
||||||
message: res.msg,
|
message: res.msg,
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
type: 'error',
|
type: 'error',
|
||||||
title: '提交错误',
|
title: '提交错误',
|
||||||
message: 'F12控制台看详情',
|
message: 'F12控制台看详情',
|
||||||
})
|
});
|
||||||
console.log('提交错误', fields)
|
console.log('提交错误', fields);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
};
|
||||||
}
|
|
||||||
//删除按钮权限
|
//删除按钮权限
|
||||||
const onDeleteBtn = (scope: any) => {
|
const onDeleteBtn = (scope: any) => {
|
||||||
const {row, $index} = scope
|
const { row, $index } = scope;
|
||||||
ElMessageBox.confirm(
|
ElMessageBox.confirm('您是否要删除数据?', '温馨提示', {
|
||||||
'您是否要删除数据?',
|
confirmButtonText: '确定',
|
||||||
'温馨提示',
|
cancelButtonText: '取消',
|
||||||
{
|
type: 'warning',
|
||||||
confirmButtonText: '确定',
|
})
|
||||||
cancelButtonText: '取消',
|
.then(() => {
|
||||||
type: 'warning',
|
api.DeletePermission({ id: row.id }).then((res: any) => {
|
||||||
}
|
buttonPermissionData.value.splice($index, 1);
|
||||||
).then(() => {
|
ElMessage({
|
||||||
api.DeletePermission({id: row.id}).then((res: any) => {
|
type: 'success',
|
||||||
buttonPermissionData.value.splice($index, 1)
|
message: res.msg,
|
||||||
ElMessage({
|
});
|
||||||
type: 'success',
|
});
|
||||||
message: res.msg,
|
})
|
||||||
})
|
.catch(() => {
|
||||||
})
|
ElMessage({
|
||||||
})
|
type: 'info',
|
||||||
.catch(() => {
|
message: '取消删除',
|
||||||
ElMessage({
|
});
|
||||||
type: 'info',
|
});
|
||||||
message: '取消删除',
|
};
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
/***按钮授权的弹窗****/
|
/***按钮授权的弹窗****/
|
||||||
//初始化数据
|
//初始化数据
|
||||||
const initGet = () => {
|
const initGet = () => {
|
||||||
getMenuData()
|
getMenuData();
|
||||||
getRoleToMenu()
|
getRoleToMenu();
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 保存授权
|
* 保存授权
|
||||||
*/
|
*/
|
||||||
const onSaveAuth = () => {
|
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',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const $table = tableRef.value
|
defineExpose({ drawer, editedRoleInfo, initGet });
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
185
web/src/views/system/role/components/PermissionComNew/index.vue
Normal file
185
web/src/views/system/role/components/PermissionComNew/index.vue
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
<template>
|
||||||
|
<div class="permission-com">
|
||||||
|
<el-button size="small" type="primary" class="pc-save-btn">保存菜单授权</el-button>
|
||||||
|
<el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion>
|
||||||
|
<el-collapse-item v-for="item in menuData" :key="item.key" :name="item.key">
|
||||||
|
<template #title>
|
||||||
|
<div @click.stop="handleClick">
|
||||||
|
<p class="pc-collapse-title">
|
||||||
|
<el-checkbox v-model="item.isCheck">
|
||||||
|
<span>{{ item.name }}</span>
|
||||||
|
</el-checkbox>
|
||||||
|
</p>
|
||||||
|
<div v-show="!collapseCurrent.includes(item.key)">
|
||||||
|
<el-checkbox v-for="btn in item.btns" :key="btn.value" :label="btn.value" v-model="btn.isCheck">{{ btn.label }}</el-checkbox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="pc-collapse-main">
|
||||||
|
<div class="pccm-item">
|
||||||
|
<p>允许对这些数据有以下操作</p>
|
||||||
|
<el-checkbox v-for="btn in item.btns" :key="btn.value" v-model="btn.isCheck" :label="btn.value">
|
||||||
|
<p class="btn-item">
|
||||||
|
{{ btn.label }}
|
||||||
|
<span @click.stop.prevent="handleSettingClick">
|
||||||
|
<el-icon><Setting /></el-icon>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</el-checkbox>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pccm-item">
|
||||||
|
<p>对这些数据有以下字段权限</p>
|
||||||
|
|
||||||
|
<el-radio-group v-model="item.radio">
|
||||||
|
<el-radio label="1">全部字段可查看可编辑</el-radio>
|
||||||
|
<el-radio label="2">全部字段仅可查看不可编辑</el-radio>
|
||||||
|
<el-radio label="3">自定义字段权限</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
|
||||||
|
<ul v-show="item.radio === '3'" class="columns-list">
|
||||||
|
<li class="columns-head">
|
||||||
|
<div class="width-txt">
|
||||||
|
<span>字段</span>
|
||||||
|
</div>
|
||||||
|
<div class="width-check">
|
||||||
|
<el-checkbox name="look"><span>查看</span></el-checkbox>
|
||||||
|
</div>
|
||||||
|
<div class="width-check">
|
||||||
|
<el-checkbox name="edit"><span>编辑</span></el-checkbox>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="columns-item">
|
||||||
|
<div class="width-txt">姓名</div>
|
||||||
|
<div class="width-check"><el-checkbox class="ci-checkout"></el-checkbox></div>
|
||||||
|
<div class="width-check"><el-checkbox class="ci-checkout"></el-checkbox></div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="columns-item">
|
||||||
|
<div class="width-txt">性别</div>
|
||||||
|
<div class="width-check"><el-checkbox class="ci-checkout"></el-checkbox></div>
|
||||||
|
<div class="width-check"><el-checkbox class="ci-checkout"></el-checkbox></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
let menuData = ref([
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
name: '用户管理',
|
||||||
|
isCheck: true,
|
||||||
|
radio: '1',
|
||||||
|
btns: [
|
||||||
|
{ label: '新增', value: 'create', isCheck: true },
|
||||||
|
{ label: '编辑', value: 'edit', isCheck: true },
|
||||||
|
{ label: '删除', value: 'delete', isCheck: true },
|
||||||
|
{ label: '查询', value: 'look', isCheck: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
name: '系统管理',
|
||||||
|
isCheck: false,
|
||||||
|
radio: '2',
|
||||||
|
btns: [
|
||||||
|
{ label: '新增', value: 'create', isCheck: false },
|
||||||
|
{ label: '编辑', value: 'edit', isCheck: true },
|
||||||
|
{ label: '删除', value: 'delete', isCheck: false },
|
||||||
|
{ label: '查询', value: 'look', isCheck: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
let collapseCurrent = ref(['1']);
|
||||||
|
|
||||||
|
const handleClick = () => {};
|
||||||
|
|
||||||
|
const handleCollapseChange = (val: string) => {
|
||||||
|
collapseCurrent.value = [val];
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSettingClick = () => {
|
||||||
|
console.log(123123);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.permission-com {
|
||||||
|
height: calc(100% - 30px);
|
||||||
|
padding: 15px;
|
||||||
|
margin: 15px;
|
||||||
|
border: 1px solid #ebeef5;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.pc-save-btn {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.pc-collapse-title {
|
||||||
|
line-height: 32px;
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pc-collapse-main {
|
||||||
|
padding-top: 15px;
|
||||||
|
border-top: 1px solid #ebeef5;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.pccm-item {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.btn-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
span {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.columns-list {
|
||||||
|
.width-txt {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
.width-check {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
.width-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.columns-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 0;
|
||||||
|
border-bottom: 1px solid #ebeef5;
|
||||||
|
box-sizing: border-box;
|
||||||
|
span {
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.columns-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.ci-checkout {
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.permission-com {
|
||||||
|
.el-collapse-item__header {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,15 +1,22 @@
|
|||||||
import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose, compute } from '@fast-crud/fast-crud';
|
import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose, compute } from '@fast-crud/fast-crud';
|
||||||
import _ from 'lodash-es';
|
|
||||||
import * as api from './api';
|
import * as api from './api';
|
||||||
import { dictionary } from '/@/utils/dictionary';
|
import { dictionary } from '/@/utils/dictionary';
|
||||||
import { successMessage } from '../../../utils/message';
|
import { successMessage } from '../../../utils/message';
|
||||||
import {inject} from "vue";
|
import { inject } from 'vue';
|
||||||
interface CreateCrudOptionsTypes {
|
interface CreateCrudOptionsTypes {
|
||||||
crudOptions: CrudOptions;
|
crudOptions: CrudOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
//此处为crudOptions配置
|
//此处为crudOptions配置
|
||||||
export const createCrudOptions = function ({ crudExpose, rolePermission }: { crudExpose: CrudExpose; rolePermission: any }): CreateCrudOptionsTypes {
|
export const createCrudOptions = function ({
|
||||||
|
crudExpose,
|
||||||
|
rolePermission,
|
||||||
|
handleDrawerOpen,
|
||||||
|
}: {
|
||||||
|
crudExpose: CrudExpose;
|
||||||
|
rolePermission: any;
|
||||||
|
handleDrawerOpen: Function;
|
||||||
|
}): CreateCrudOptionsTypes {
|
||||||
const pageRequest = async (query: any) => {
|
const pageRequest = async (query: any) => {
|
||||||
return await api.GetList(query);
|
return await api.GetList(query);
|
||||||
};
|
};
|
||||||
@@ -25,7 +32,7 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
|
|||||||
};
|
};
|
||||||
|
|
||||||
//权限判定
|
//权限判定
|
||||||
const hasPermissions = inject("$hasPermissions")
|
const hasPermissions: any = inject('$hasPermissions');
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@@ -40,25 +47,34 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
|
|||||||
rowHandle: {
|
rowHandle: {
|
||||||
//固定右侧
|
//固定右侧
|
||||||
fixed: 'right',
|
fixed: 'right',
|
||||||
width: 200,
|
width: 260,
|
||||||
buttons: {
|
buttons: {
|
||||||
view: {
|
view: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
edit: {
|
edit: {
|
||||||
iconRight: 'Edit',
|
show: hasPermissions('role:Update'),
|
||||||
type: 'text',
|
|
||||||
show:hasPermissions('role:Update')
|
|
||||||
},
|
},
|
||||||
remove: {
|
remove: {
|
||||||
iconRight: 'Delete',
|
show: hasPermissions('role:Delete'),
|
||||||
type: 'text',
|
|
||||||
show:hasPermissions('role:Delete')
|
|
||||||
},
|
},
|
||||||
custom: {
|
custom: {
|
||||||
|
type: 'primary',
|
||||||
text: '权限配置',
|
text: '权限配置',
|
||||||
type: 'text',
|
show: hasPermissions('role:Update'),
|
||||||
show:hasPermissions('role:Update'),
|
tooltip: {
|
||||||
|
placement: 'top',
|
||||||
|
content: '权限配置',
|
||||||
|
},
|
||||||
|
click: (context: any): void => {
|
||||||
|
const { row } = context;
|
||||||
|
handleDrawerOpen();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
/* custom: {
|
||||||
|
type: 'primary',
|
||||||
|
text: '权限配置',
|
||||||
|
show: hasPermissions('role:Update'),
|
||||||
tooltip: {
|
tooltip: {
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
content: '权限配置',
|
content: '权限配置',
|
||||||
@@ -70,7 +86,7 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
|
|||||||
rolePermission.value.editedRoleInfo = row;
|
rolePermission.value.editedRoleInfo = row;
|
||||||
rolePermission.value.initGet();
|
rolePermission.value.initGet();
|
||||||
},
|
},
|
||||||
},
|
}, */
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
form: {
|
form: {
|
||||||
@@ -172,7 +188,7 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
|
|||||||
search: { show: true },
|
search: { show: true },
|
||||||
type: 'dict-radio',
|
type: 'dict-radio',
|
||||||
column: {
|
column: {
|
||||||
width:100,
|
width: 100,
|
||||||
component: {
|
component: {
|
||||||
name: 'fs-dict-switch',
|
name: 'fs-dict-switch',
|
||||||
activeText: '',
|
activeText: '',
|
||||||
|
|||||||
@@ -5,36 +5,57 @@
|
|||||||
<el-tag size="small">{{ scope.row.url }}</el-tag>
|
<el-tag size="small">{{ scope.row.url }}</el-tag>
|
||||||
</template>
|
</template>
|
||||||
</fs-crud>
|
</fs-crud>
|
||||||
<!-- <RolePermission ref="rolePermission"></RolePermission>-->
|
<!-- <permission ref="rolePermission"></permission> -->
|
||||||
<permission ref="rolePermission"></permission>
|
|
||||||
|
<el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false" :before-close="handleDrawerClose">
|
||||||
|
<template #header>
|
||||||
|
<div>当前角色: <el-tag>管理员</el-tag></div>
|
||||||
|
</template>
|
||||||
|
<PermissionComNew v-if="drawerVisible" @drawerClose="handleDrawerClose" />
|
||||||
|
</el-drawer>
|
||||||
</fs-page>
|
</fs-page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="role">
|
<script lang="ts" setup name="role">
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
import { useExpose, useCrud, dict } from '@fast-crud/fast-crud';
|
import { useExpose, useCrud } from '@fast-crud/fast-crud';
|
||||||
import { createCrudOptions } from './crud';
|
import { createCrudOptions } from './crud';
|
||||||
import RolePermission from '/@/views/system/rolePermission/index.vue';
|
//import permission from './components/PermissionCom/index.vue';
|
||||||
import permission from './components/PermissionCom/index.vue';
|
import PermissionComNew from './components/PermissionComNew/index.vue';
|
||||||
import * as api from './api';
|
|
||||||
import _ from 'lodash-es';
|
let drawerVisible = ref(false);
|
||||||
|
|
||||||
const rolePermission = ref();
|
const rolePermission = ref();
|
||||||
defineExpose(rolePermission);
|
|
||||||
// crud组件的ref
|
// crud组件的ref
|
||||||
const crudRef = ref();
|
const crudRef = ref();
|
||||||
// crud 配置的ref
|
// crud 配置的ref
|
||||||
const crudBinding = ref();
|
const crudBinding = ref();
|
||||||
// 暴露的方法
|
// 暴露的方法
|
||||||
const { crudExpose } = useExpose({ crudRef, crudBinding });
|
const { crudExpose } = useExpose({ crudRef, crudBinding });
|
||||||
// 你的crud配置
|
|
||||||
const { crudOptions } = createCrudOptions({ crudExpose, rolePermission });
|
|
||||||
// 初始化crud配置
|
|
||||||
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
|
|
||||||
// 你可以调用此方法，重新初始化crud配置
|
|
||||||
// resetCrudOptions(options)
|
|
||||||
|
|
||||||
|
const handleDrawerOpen = () => {
|
||||||
|
drawerVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDrawerClose = () => {
|
||||||
|
drawerVisible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 你的crud配置
|
||||||
|
const { crudOptions } = createCrudOptions({ crudExpose, rolePermission, handleDrawerOpen });
|
||||||
|
//const { crudOptions } = createCrudOptions({ crudExpose, handleDrawerOpen });
|
||||||
|
|
||||||
|
// 初始化crud配置
|
||||||
|
const { resetCrudOptions } = useCrud({
|
||||||
|
crudExpose,
|
||||||
|
crudOptions,
|
||||||
|
context: {},
|
||||||
|
});
|
||||||
// 页面打开后获取列表数据
|
// 页面打开后获取列表数据
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
crudExpose.doRefresh();
|
crudExpose.doRefresh();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
defineExpose(rolePermission);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user