feat( 角色管理 ): 新权限配置页面完成

web/src/views/system/role/components/PermissionCom/index.vue

@@ -2,12 +2,12 @@
 	<el-drawer size="70%" v-model="drawer" direction="rtl" destroy-on-close :before-close="handleClose">
 		<template #header>
 			<div>
-				<el-tag size="large">当前角色:{{ editedRoleInfo.name }}</el-tag>
+				<el-tag>当前角色:{{ 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>
+				<el-button type="primary" @click="onSaveAuth">保存菜单授权</el-button>
 			</div>
 			<vxe-table
 				ref="tableRef"

web/src/views/system/role/components/PermissionComNew/api.ts

@@ -0,0 +1,21 @@
+import { request } from "/@/utils/service";
+
+export function getDataPermissionRange() {
+  return request({
+    url: '/api/system/role_menu_button_permission/data_scope/',
+    method: 'get',
+  })
+}
+export function getDataPermissionDept() {
+  return request({
+    url: '/api/system/role_menu_button_permission/role_to_dept_all/',
+    method: 'get'
+  })
+}
+
+export function getDataPermissionMenu() {
+  return request({
+    url: '/api/system/role_menu_button_permission/get_role_permissions/',
+    method: 'get'
+  })
+}

web/src/views/system/role/components/PermissionComNew/index.vue

@@ -1,10 +1,11 @@
 <template>
 	<div class="permission-com">
-		<el-button size="small" type="primary" class="pc-save-btn">保存菜单授权</el-button>
+		<el-button 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">
+					<div @click.stop="null">
 						<p class="pc-collapse-title">
 							<el-checkbox v-model="item.isCheck">
 								<span>{{ item.name }}</span>
@@ -20,8 +21,8 @@
 						<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 }}
+								{{ btn.role ? `${btn.label}(${btn.role})` : btn.label }}
-								<span @click.stop.prevent="handleSettingClick">
+								<span @click.stop.prevent="handleSettingClick(item, btn.value)">
 									<el-icon><Setting /></el-icon>
 								</span>
 							</p>
@@ -42,47 +43,83 @@
 								<div class="width-txt">
 									<span>字段</span>
 								</div>
-								<div class="width-check">
+
-									<el-checkbox name="look"><span>查看</span></el-checkbox>
+								<div v-for="btn in item.btns" :key="btn.value" class="width-check">
-								</div>
+									<el-checkbox :label="btn.value" @change="handleColumnChange($event, item, btn.value)">
-								<div class="width-check">
+										<span>{{ btn.label }}</span>
-									<el-checkbox name="edit"><span>编辑</span></el-checkbox>
+									</el-checkbox>
 								</div>
 							</li>
 
-							<li class="columns-item">
+							<li v-for="(c_item, c_index) in item.columns" :key="c_index" class="columns-item">
-								<div class="width-txt">姓名</div>
+								<div class="width-txt">{{ c_item.name }}</div>
-								<div class="width-check"><el-checkbox class="ci-checkout"></el-checkbox></div>
+								<div v-for="btn in item.btns" :key="btn.value" class="width-check">
-								<div class="width-check"><el-checkbox class="ci-checkout"></el-checkbox></div>
+									<el-checkbox v-model="c_item[btn.value]" class="ci-checkout"></el-checkbox>
-							</li>
+								</div>
-
-							<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>
+
+		<el-dialog v-model="dialogVisible" title="数据权限配置" width="400px" :close-on-click-modal="false" :before-close="handleDialogClose">
+			<div class="pc-dialog">
+				<el-select v-model="dataPermission" @change="handlePermissionRangeChange" class="dialog-select" placeholder="请选择">
+					<el-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+
+				<el-tree-select
+					v-if="dataPermission === 4"
+					node-key="id"
+					v-model="customDataPermission"
+					:props="defaultTreeProps"
+					:data="deptData"
+					multiple
+					check-strictly
+					:render-after-expand="false"
+					show-checkbox
+					class="dialog-tree"
+				/>
+			</div>
+			<template #footer>
+				<div>
+					<el-button type="primary" @click="handleDialogConfirm"> 确定 </el-button>
+					<el-button @click="handleDialogClose"> 取消 </el-button>
+				</div>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import XEUtils from 'xe-utils';
+import { errorNotification } from '/@/utils/message';
+import { getDataPermissionRange, getDataPermissionDept } from './api';
+import { MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType } from './types';
 
-let menuData = ref([
+const defaultTreeProps = {
+	children: 'children',
+	label: 'name',
+	value: 'id',
+};
+
+let menuData = ref<MenuDataType[]>([
 	{
 		key: '1',
 		name: '用户管理',
 		isCheck: true,
 		radio: '1',
 		btns: [
-			{ label: '新增', value: 'create', isCheck: true },
+			{ label: '新增', value: 'create', isCheck: true, role: '' },
-			{ label: '编辑', value: 'edit', isCheck: true },
+			{ label: '编辑', value: 'edit', isCheck: true, role: '' },
-			{ label: '删除', value: 'delete', isCheck: true },
+			{ label: '查询', value: 'look', isCheck: true, role: '' },
-			{ label: '查询', value: 'look', isCheck: true },
+		],
+		columns: [
+			{ name: '姓名', create: true, edit: true, delete: true, look: true },
+			{ name: '性别', create: false, edit: true, delete: false, look: true },
+			{ name: '地址', create: true, edit: false, delete: true, look: false },
 		],
 	},
 	{
@@ -91,32 +128,95 @@ let menuData = ref([
 		isCheck: false,
 		radio: '2',
 		btns: [
-			{ label: '新增', value: 'create', isCheck: false },
+			{ label: '新增', value: 'create', isCheck: false, role: '' },
-			{ label: '编辑', value: 'edit', isCheck: true },
+			{ label: '编辑', value: 'edit', isCheck: true, role: '' },
-			{ label: '删除', value: 'delete', isCheck: false },
+			{ label: '删除', value: 'delete', isCheck: false, role: '' },
-			{ label: '查询', value: 'look', isCheck: true },
+			{ label: '查询', value: 'look', isCheck: true, role: '' },
+		],
+		columns: [
+			{ name: '姓名', create: false, edit: true, delete: false, look: true },
+			{ name: '性别', create: true, edit: true, delete: true, look: true },
+			{ name: '地址', create: true, edit: false, delete: true, look: false },
 		],
 	},
 ]);
 let collapseCurrent = ref(['1']);
+let menuCurrent = ref<Partial<MenuDataType>>({});
+let menuBtnCurrent = ref('');
+let dialogVisible = ref(false);
+let dataPermissionRange = ref<DataPermissionRangeType[]>([]);
+let deptData = ref<CustomDataPermissionDeptType[]>([]);
+let dataPermission = ref();
+let customDataPermission = ref([]);
 
-const handleClick = () => {};
+const fetchData = async () => {
+	try {
+		const resRange = await getDataPermissionRange();
+		if (resRange?.code === 2000) {
+			dataPermissionRange.value = resRange.data;
+		}
+	} catch {
+		return;
+	}
+};
 
 const handleCollapseChange = (val: string) => {
 	collapseCurrent.value = [val];
 };
 
-const handleSettingClick = () => {
+const handleSettingClick = (record: MenuDataType, btnType: string) => {
-	console.log(123123);
+	menuCurrent.value = record;
+	menuBtnCurrent.value = btnType;
+	dialogVisible.value = true;
 };
+
+const handleColumnChange = (val: boolean, record: MenuDataType, btnType: string) => {
+	for (const iterator of record.columns) {
+		iterator[btnType] = val;
+	}
+};
+
+const handlePermissionRangeChange = async (val: number) => {
+	if (val === 4) {
+		const res = await getDataPermissionDept();
+		const data = XEUtils.toArrayTree(res.data, { parentKey: 'parent', strict: false });
+		deptData.value = data;
+	}
+};
+
+const handleDialogConfirm = () => {
+	if (dataPermission.value !== 0 && !dataPermission.value) {
+		errorNotification('请选择');
+		return;
+	}
+
+	//if (dataPermission.value !== 4) {}
+	for (const iterator of menuData.value) {
+		if (iterator.key === menuCurrent.value.key) {
+			for (const b of iterator.btns) {
+				if (b.value === menuBtnCurrent.value) {
+					const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value);
+					b.role = findItem?.label || '';
+				}
+			}
+		}
+	}
+	handleDialogClose();
+};
+const handleDialogClose = () => {
+	dialogVisible.value = false;
+	customDataPermission.value = [];
+	dataPermission.value = null;
+};
+
+onMounted(() => {
+	fetchData();
+});
 </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;
@@ -129,7 +229,6 @@ const handleSettingClick = () => {
 	}
 	.pc-collapse-main {
 		padding-top: 15px;
-		border-top: 1px solid #ebeef5;
 		box-sizing: border-box;
 		.pccm-item {
 			margin-bottom: 10px;
@@ -173,13 +272,52 @@ const handleSettingClick = () => {
 			}
 		}
 	}
+
+	.pc-dialog {
+		.dialog-select {
+			width: 100%;
+		}
+		.dialog-tree {
+			width: 100%;
+			margin-top: 20px;
+		}
+	}
 }
 </style>
 
 <style lang="scss">
 .permission-com {
+	.el-collapse {
+		border-top: none;
+		border-bottom: none;
+	}
+	.el-collapse-item {
+		margin-bottom: 15px;
+	}
 	.el-collapse-item__header {
 		height: auto;
+		padding: 15px;
+		border-radius: 8px;
+		border-top: 1px solid #ebeef5;
+		border-left: 1px solid #ebeef5;
+		border-right: 1px solid #ebeef5;
+		box-sizing: border-box;
+	}
+	.el-collapse-item__header.is-active {
+		border-radius: 8px 8px 0 0;
+		background-color: #fafafa;
+	}
+	.el-collapse-item__wrap {
+		padding: 15px;
+		border-left: 1px solid #ebeef5;
+		border-right: 1px solid #ebeef5;
+		border-top: 1px solid #ebeef5;
+		border-radius: 0 0 8px 8px;
+		background-color: #fafafa;
+		box-sizing: border-box;
+		.el-collapse-item__content {
+			padding-bottom: 0;
+		}
 	}
 }
 </style>

web/src/views/system/role/components/PermissionComNew/types.ts

@@ -0,0 +1,29 @@
+export interface DataPermissionRangeType {
+  label: string;
+  value: number;
+}
+
+export interface CustomDataPermissionDeptType {
+  id: number;
+  name: string;
+  patent: number;
+  children: CustomDataPermissionDeptType[]
+}
+
+export interface CustomDataPermissionMenuType {
+  id: number;
+  name: string;
+  is_catalog: boolean;
+  menuPermission: { id: number; name: string; value: string }[] | null;
+  columns: { id: number; name: string; title: string }[] | null;
+  children: CustomDataPermissionMenuType[]
+}
+
+export interface MenuDataType {
+  key: string;
+  name: string;
+  isCheck: boolean;
+  radio: string;
+  btns: { label: string; value: string; isCheck: boolean; role: string; }[];
+  columns: { [key: string]: boolean | string; }[]
+}

web/src/views/system/role/crud.tsx

@@ -68,12 +68,15 @@ export const createCrudOptions = function ({
 						},
 						click: (context: any): void => {
 							const { row } = context;
-							handleDrawerOpen();
+							// eslint-disable-next-line no-mixed-spaces-and-tabs
+							rolePermission.value.drawer = true;
+							rolePermission.value.editedRoleInfo = row;
+							rolePermission.value.initGet();
 						},
 					},
-					/* custom: {
+					customNew: {
 						type: 'primary',
-						text: '权限配置',
+						text: '权限配置新',
 						show: hasPermissions('role:Update'),
 						tooltip: {
 							placement: 'top',
@@ -81,12 +84,9 @@ export const createCrudOptions = function ({
 						},
 						click: (context: any): void => {
 							const { row } = context;
-							// eslint-disable-next-line no-mixed-spaces-and-tabs
+							handleDrawerOpen();
-							rolePermission.value.drawer = true;
-							rolePermission.value.editedRoleInfo = row;
-							rolePermission.value.initGet();
 						},
-					}, */
+					},
 				},
 			},
 			form: {

web/src/views/system/role/index.vue

@@ -5,7 +5,8 @@
 				<el-tag size="small">{{ scope.row.url }}</el-tag>
 			</template>
 		</fs-crud>
-		<!-- <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>
@@ -20,13 +21,12 @@
 import { ref, onMounted } from 'vue';
 import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
-//import permission from './components/PermissionCom/index.vue';
+import permission from './components/PermissionCom/index.vue';
 import PermissionComNew from './components/PermissionComNew/index.vue';
 
 let drawerVisible = ref(false);
 
 const rolePermission = ref();
-
 // crud组件的ref
 const crudRef = ref();
 // crud 配置的ref
@@ -44,7 +44,6 @@ const handleDrawerClose = () => {
 
 // 你的crud配置
 const { crudOptions } = createCrudOptions({ crudExpose, rolePermission, handleDrawerOpen });
-//const { crudOptions } = createCrudOptions({ crudExpose, handleDrawerOpen });
 
 // 初始化crud配置
 const { resetCrudOptions } = useCrud({
@@ -56,6 +55,5 @@ const { resetCrudOptions } = useCrud({
 onMounted(() => {
 	crudExpose.doRefresh();
 });
-
 defineExpose(rolePermission);
 </script>