feat(20240629_role_menu): 优化菜单管理

- 优化在新增修改菜单的时候，父级菜单tree只显示目录

web/src/views/system/menu/components/MenuFormCom/index.vue

@@ -10,21 +10,12 @@
 				<el-input v-model="menuFormData.name" placeholder="请输入菜单名称" />
 			</el-form-item>
 			<el-form-item label="父级菜单" prop="parent">
-				<el-tree-select
-					v-model="menuFormData.parent"
-					:props="defaultTreeProps"
-					:data="deptDefaultList"
-					:cache-data="props.cacheData"
-					lazy
-					check-strictly
-					clearable
-					:load="handleTreeLoad"
-					placeholder="请选择父级菜单"
-					style="width: 100%"
-				/>
+				<el-tree-select v-model="menuFormData.parent" :props="defaultTreeProps" :data="deptDefaultList"
+					:cache-data="props.cacheData" lazy check-strictly clearable :load="handleTreeLoad"
+					placeholder="请选择父级菜单" style="width: 100%" />
 			</el-form-item>
 
-			<el-form-item  label="路由地址" prop="web_path">
+			<el-form-item label="路由地址" prop="web_path">
 				<el-input v-model="menuFormData.web_path" placeholder="请输入路由地址，请以/开头" />
 			</el-form-item>
 
@@ -35,12 +26,14 @@
 			<el-row>
 				<el-col :span="12">
 					<el-form-item required label="状态">
-						<el-switch v-model="menuFormData.status" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
+						<el-switch v-model="menuFormData.status" width="60" inline-prompt active-text="启用"
+							inactive-text="禁用" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="12">
 					<el-form-item v-if="menuFormData.status" required label="侧边显示">
-						<el-switch v-model="menuFormData.visible" width="60" inline-prompt active-text="显示" inactive-text="隐藏" />
+						<el-switch v-model="menuFormData.visible" width="60" inline-prompt active-text="显示"
+							inactive-text="隐藏" />
 					</el-form-item>
 				</el-col>
 			</el-row>
@@ -48,46 +41,45 @@
 			<el-row>
 				<el-col :span="12">
 					<el-form-item required label="是否目录">
-						<el-switch v-model="menuFormData.is_catalog" width="60" inline-prompt active-text="是" inactive-text="否" />
+						<el-switch v-model="menuFormData.is_catalog" width="60" inline-prompt active-text="是"
+							inactive-text="否" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="12">
 					<el-form-item v-if="!menuFormData.is_catalog" required label="外链接">
-						<el-switch v-model="menuFormData.is_link" width="60" inline-prompt active-text="是" inactive-text="否" />
+						<el-switch v-model="menuFormData.is_link" width="60" inline-prompt active-text="是"
+							inactive-text="否" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item required v-if="!menuFormData.is_catalog" label="是否固定">
+						<el-switch v-model="menuFormData.is_affix" width="60" inline-prompt active-text="是"
+							inactive-text="否" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item v-if="!menuFormData.is_catalog && menuFormData.is_link" required label="是否内嵌">
+						<el-switch v-model="menuFormData.is_iframe" width="60" inline-prompt active-text="是"
+							inactive-text="否" />
 					</el-form-item>
 				</el-col>
-        <el-col :span="12">
-          <el-form-item required v-if="!menuFormData.is_catalog" label="是否固定">
-            <el-switch v-model="menuFormData.is_affix" width="60" inline-prompt active-text="是" inactive-text="否" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item v-if="!menuFormData.is_catalog && menuFormData.is_link" required label="是否内嵌">
-            <el-switch v-model="menuFormData.is_iframe" width="60" inline-prompt active-text="是" inactive-text="否" />
-          </el-form-item>
-        </el-col>
 			</el-row>
 
 			<el-form-item label="备注">
-				<el-input v-model="menuFormData.description" maxlength="200" show-word-limit type="textarea" placeholder="请输入备注" />
+				<el-input v-model="menuFormData.description" maxlength="200" show-word-limit type="textarea"
+					placeholder="请输入备注" />
 			</el-form-item>
 
 			<el-divider></el-divider>
 
 			<div style="min-height: 184px">
 				<el-form-item v-if="!menuFormData.is_catalog && !menuFormData.is_link" label="组件地址" prop="component">
-					<el-autocomplete
-						class="w-full"
-						v-model="menuFormData.component"
-						:fetch-suggestions="querySearch"
-						:trigger-on-focus="false"
-						clearable
-						:debounce="100"
-						placeholder="输入组件地址"
-					/>
+					<el-autocomplete class="w-full" v-model="menuFormData.component" :fetch-suggestions="querySearch"
+						:trigger-on-focus="false" clearable :debounce="100" placeholder="输入组件地址" />
 				</el-form-item>
 
-				<el-form-item v-if="!menuFormData.is_catalog && !menuFormData.is_link" label="组件名称" prop="component_name">
+				<el-form-item v-if="!menuFormData.is_catalog && !menuFormData.is_link" label="组件名称"
+					prop="component_name">
 					<el-input v-model="menuFormData.component_name" placeholder="请输入组件名称" />
 				</el-form-item>
 
@@ -96,7 +88,8 @@
 				</el-form-item>
 
 				<el-form-item v-if="!menuFormData.is_catalog" label="缓存">
-					<el-switch v-model="menuFormData.cache" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
+					<el-switch v-model="menuFormData.cache" width="60" inline-prompt active-text="启用"
+						inactive-text="禁用" />
 				</el-form-item>
 			</div>
 
@@ -118,6 +111,8 @@ import { lazyLoadMenu, AddObj, UpdateObj } from '../../api';
 import { successNotification } from '/@/utils/message';
 import { MenuFormDataType, MenuTreeItemType, ComponentFileItem, APIResponseData } from '../../types';
 import type Node from 'element-plus/es/components/tree/src/model/node';
+import { log } from 'console';
+import XEUtils from 'xe-utils';
 
 interface IProps {
 	initFormData: Partial<MenuTreeItemType> | null;
@@ -148,14 +143,14 @@ const validateWebPath = (rule: any, value: string, callback: Function) => {
 };
 
 const validateLinkUrl = (rule: any, value: string, callback: Function) => {
-  let pattern = /^\/.*?/;
-  let patternUrl = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
-  const reg = pattern.test(value) || patternUrl.test(value)
-  if (reg) {
-    callback();
-  } else {
-    callback(new Error('请输入正确的地址'));
-  }
+	let pattern = /^\/.*?/;
+	let patternUrl = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
+	const reg = pattern.test(value) || patternUrl.test(value)
+	if (reg) {
+		callback();
+	} else {
+		callback(new Error('请输入正确的地址'));
+	}
 };
 
 const props = withDefaults(defineProps<IProps>(), {
@@ -172,7 +167,7 @@ const rules = reactive<FormRules>({
 	name: [{ required: true, message: '菜单名称必填', trigger: 'blur' }],
 	component: [{ required: true, message: '请输入组件地址', trigger: 'blur' }],
 	component_name: [{ required: true, message: '请输入组件名称', trigger: 'blur' }],
-  link_url: [{ required: true, message: '请输入外链接地址',validator:validateLinkUrl, trigger: 'blur' }],
+	link_url: [{ required: true, message: '请输入外链接地址', validator: validateLinkUrl, trigger: 'blur' }],
 });
 
 let deptDefaultList = ref<MenuTreeItemType[]>([]);
@@ -189,9 +184,9 @@ let menuFormData = reactive<MenuFormDataType>({
 	description: '',
 	is_catalog: false,
 	is_link: false,
-  is_iframe: false,
-  is_affix: false,
-  link_url:''
+	is_iframe: false,
+	is_affix: false,
+	link_url: ''
 });
 let menuBtnLoading = ref(false);
 
@@ -210,9 +205,9 @@ const setMenuFormData = () => {
 		menuFormData.description = props.initFormData?.description || '';
 		menuFormData.is_catalog = !!props.initFormData.is_catalog;
 		menuFormData.is_link = !!props.initFormData.is_link;
-    menuFormData.is_iframe =!!props.initFormData.is_iframe;
-    menuFormData.is_affix =!!props.initFormData.is_affix;
-    menuFormData.link_url =props.initFormData.link_url;
+		menuFormData.is_iframe = !!props.initFormData.is_iframe;
+		menuFormData.is_affix = !!props.initFormData.is_affix;
+		menuFormData.link_url = props.initFormData.link_url;
 	}
 };
 
@@ -246,7 +241,7 @@ const createFilter = (queryString: string) => {
 const handleTreeLoad = (node: Node, resolve: Function) => {
 	if (node.level !== 0) {
 		lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => {
-			resolve(res.data);
+			resolve(XEUtils.filter(res.data, (i: MenuTreeItemType) => i.is_catalog));
 		});
 	}
 };
@@ -278,9 +273,14 @@ const handleCancel = (type: string = '') => {
 	formRef.value?.resetFields();
 };
 
+/**
+ * 初始化
+ */
 onMounted(async () => {
 	props.treeData.map((item) => {
-		deptDefaultList.value.push(item);
+		if (item.is_catalog) {
+			deptDefaultList.value.push(item);
+		}
 	});
 	setMenuFormData();
 });
@@ -290,6 +290,7 @@ onMounted(async () => {
 .menu-form-com {
 	margin: 10px;
 	overflow-y: auto;
+
 	.menu-form-alert {
 		color: #fff;
 		line-height: 24px;
@@ -298,6 +299,7 @@ onMounted(async () => {
 		border-radius: 4px;
 		background-color: var(--el-color-primary);
 	}
+
 	.menu-form-btns {
 		padding-bottom: 10px;
 		box-sizing: border-box;

web/src/views/system/menu/types.ts

@@ -65,5 +65,5 @@ export interface MenuFormDataType {
   is_link: boolean;
   is_iframe:boolean;
   is_affix:boolean;
-  link_url: string;
+  link_url: string|undefined;
 }

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

@@ -0,0 +1,420 @@
+<template>
+  <el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false"
+    :before-close="handleDrawerClose" :destroy-on-close="true">
+    <template #header>
+      <el-row>
+        <el-col :span="4">
+          <div>当前授权角色：
+            <el-tag>{{ props.roleName }}</el-tag>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div>
+            <el-button size="small" type="primary" class="pc-save-btn" @click="handleSavePermission">保存菜单授权
+            </el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </template>
+    <div class="permission-com">
+      <el-tabs>
+        <el-tab-pane v-for="(item, mIndex) in menuData" :key="mIndex" :label="item.name">
+          <el-tabs tab-position="left">
+            <el-tab-pane v-for="(menu, mIndex) in item.children" :key="mIndex" :label="menu.name">
+              <el-checkbox v-model="menu.isCheck">页面显示权限</el-checkbox>
+              <div class="pc-collapse-main">
+                <div class="pccm-item">
+                  <div class="menu-form-alert"> 配置操作功能接口权限,配置数据权限点击小齿轮 </div>
+                  <el-checkbox v-for="(btn, bIndex) in menu.btns" :key="bIndex" v-model="btn.isCheck"
+                    :label="btn.value">
+                    <div class="btn-item">
+                      {{ btn.data_range !== null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
+                      <span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(menu, btn)">
+                        <el-icon>
+                          <Setting />
+                        </el-icon>
+                      </span>
+                    </div>
+                  </el-checkbox>
+                </div>
+
+                <div class="pccm-item" v-if="menu.columns && menu.columns.length > 0">
+                  <div class="menu-form-alert"> 配置数据列字段权限 </div>
+                  <ul class="columns-list">
+                    <li class="columns-head">
+                      <div class="width-txt">
+                        <span>字段</span>
+                      </div>
+                      <div v-for="(head, hIndex) in column.header" :key="hIndex" class="width-check">
+                        <el-checkbox :label="head.value"
+                          @change="handleColumnChange($event, menu, head.value, head.disabled)">
+                          <span>{{ head.label }}</span>
+                        </el-checkbox>
+                      </div>
+                    </li>
+
+                    <li v-for="(c_item, c_index) in menu.columns" :key="c_index" class="columns-item">
+                      <div class="width-txt">{{ c_item.title }}</div>
+                      <div v-for="(col, cIndex) in column.header" :key="cIndex" class="width-check">
+                        <el-checkbox v-model="c_item[col.value]" class="ci-checkout"
+                          :disabled="c_item[col.disabled]"></el-checkbox>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-tab-pane>
+      </el-tabs>
+
+      <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-show="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>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineProps, watch, computed, reactive } from 'vue';
+import XEUtils from 'xe-utils';
+import { errorNotification } from '/@/utils/message';
+import {
+  getDataPermissionRange,
+  getDataPermissionDept,
+  getRolePermission,
+  setRolePremission,
+  setBtnDatarange,
+} from './api';
+import { MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType } from './types';
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  roleId: {
+    type: Number,
+    default: -1
+  },
+  roleName: {
+    type: String,
+    default: ''
+  },
+  drawerVisible: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['update:drawerVisible'])
+
+const drawerVisible = ref(false)
+watch(
+  () => props.drawerVisible,
+  (val) => {
+    drawerVisible.value = val;
+    getMenuBtnPermission()
+    getDataPermissionRangeLable()
+
+  }
+);
+const handleDrawerClose = () => {
+  emit('update:drawerVisible', false);
+}
+
+
+const defaultTreeProps = {
+  children: 'children',
+  label: 'name',
+  value: 'id',
+};
+
+let menuData = ref<MenuDataType[]>([]);
+let collapseCurrent = ref<number[]>([]);
+let menuCurrent = ref<Partial<MenuDataType>>({});
+let menuBtnCurrent = ref<number>(-1);
+let dialogVisible = ref(false);
+let dataPermissionRange = ref<DataPermissionRangeType[]>([]);
+let dataPermissionRangeLabel = ref<DataPermissionRangeType[]>([]);
+const formatDataRange = computed(() => {
+  return function (datarange: number) {
+    const findItem = dataPermissionRangeLabel.value.find((i) => i.value === datarange);
+    return findItem?.label || ''
+  }
+})
+let deptData = ref<CustomDataPermissionDeptType[]>([]);
+let dataPermission = ref();
+let customDataPermission = ref([]);
+//获取菜单,按钮,权限
+const getMenuBtnPermission = async () => {
+  const resMenu = await getRolePermission({ role: props.roleId })
+  menuData.value = resMenu
+
+}
+// 获取按钮的数据权限下拉选项
+const getDataPermissionRangeLable = async () => {
+  const resRange = await getDataPermissionRange({ role: props.roleId })
+  dataPermissionRangeLabel.value = resRange.data;
+}
+
+/**
+ * 获取按钮数据权限下拉选项
+ * @param btnId  按钮id
+ */
+const fetchData = async (btnId: number) => {
+  try {
+    const resRange = await getDataPermissionRange({ menu_button: btnId });
+    if (resRange?.code === 2000) {
+      dataPermissionRange.value = resRange.data;
+    }
+  } catch {
+    return;
+  }
+};
+
+// const handleCollapseChange = (val: number) => {
+//   collapseCurrent.value = [val];
+// };
+
+/**
+ * 设置按钮数据权限
+ * @param record 当前菜单
+ * @param btnType  按钮类型
+ */
+const handleSettingClick = (record: MenuDataType, btn: MenuDataType['btns'][number]) => {
+  menuCurrent.value = record;
+  menuBtnCurrent.value = btn.id;
+  dialogVisible.value = true;
+  dataPermission.value = btn.data_range;
+  handlePermissionRangeChange(btn.data_range)
+  fetchData(btn.id)
+};
+
+/**
+ * 设置列权限
+ * @param val  是否选中
+ * @param record  当前菜单
+ * @param btnType  按钮类型
+ * @param disabledType  禁用类型
+ */
+const handleColumnChange = (val: boolean, record: MenuDataType, btnType: string, disabledType: string) => {
+  for (const iterator of record.columns) {
+    iterator[btnType] = iterator[disabledType] ? iterator[btnType] : val;
+  }
+};
+
+/**
+ * 数据权限设置
+ */
+const handlePermissionRangeChange = async (val: number) => {
+  if (val === 4) {
+    const res = await getDataPermissionDept({ role: props.roleId, menu_button: menuBtnCurrent.value });
+    const depts = XEUtils.toArrayTree(res.data, { parentKey: 'parent', strict: false });
+    deptData.value = depts;
+    const btnObj = XEUtils.find(menuCurrent.value.btns, item => item.id === menuBtnCurrent.value)
+    customDataPermission.value = btnObj.dept;
+  }
+};
+
+/**
+ * 数据权限设置确认
+ */
+const handleDialogConfirm = () => {
+  if (dataPermission.value !== 0 && !dataPermission.value) {
+    errorNotification('请选择');
+    return;
+  }
+  for (const item of menuData.value) {
+    for (const iterator of item.children) {
+      if (iterator.id === menuCurrent.value.id) {
+        for (const btn of iterator.btns) {
+          if (btn.id === menuBtnCurrent.value) {
+            const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value);
+            btn.data_range = findItem?.value || 0;
+            if (btn.data_range === 4) {
+              btn.dept = customDataPermission.value
+            }
+          }
+        }
+      }
+    }
+  }
+  handleDialogClose();
+};
+const handleDialogClose = () => {
+  dialogVisible.value = false;
+  customDataPermission.value = [];
+  dataPermission.value = null;
+};
+
+//保存菜单授权
+const handleSavePermission = () => {
+  setRolePremission(props.roleId, menuData.value).then((res: any) => {
+    ElMessage({
+      message: res.msg,
+      type: 'success',
+    })
+  })
+}
+
+const column = reactive({
+  header: [
+    { value: 'is_create', label: '新增可见', disabled: 'disabled_create' },
+    { value: 'is_update', label: '编辑可见', disabled: 'disabled_update' },
+    { value: 'is_query', label: '列表可见', disabled: 'disabled_query' }
+  ]
+})
+
+onMounted(() => {
+});
+</script>
+
+<style lang="scss" scoped>
+.permission-com {
+  margin: 15px;
+  box-sizing: border-box;
+
+  .pc-save-btn {
+    margin-bottom: 15px;
+  }
+
+  .pc-collapse-title {
+    line-height: 32px;
+    text-align: left;
+
+    span {
+      font-size: 16px;
+    }
+  }
+
+  .pc-collapse-main {
+    padding-top: 15px;
+    box-sizing: border-box;
+
+    .pccm-item {
+      margin-bottom: 10px;
+
+      .menu-form-alert {
+        color: #fff;
+        line-height: 24px;
+        padding: 8px 16px;
+        margin-bottom: 20px;
+        border-radius: 4px;
+        background-color: var(--el-color-primary);
+      }
+
+      .btn-item {
+        display: flex;
+        align-items: center;
+
+        span {
+          margin-left: 5px;
+        }
+      }
+
+      .columns-list {
+        .width-txt {
+          width: 200px;
+        }
+
+        .width-check {
+          width: 100px;
+        }
+
+        .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;
+          }
+        }
+      }
+    }
+  }
+
+  .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;
+    background-color: #fafafa;
+  }
+
+  .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/index.vue

@@ -160,7 +160,7 @@ let customDataPermission = ref([]);
 //获取菜单,按钮,权限
 const getMenuBtnPermission = async () => {
   const resMenu = await getRolePermission({ role: props.roleId })
-  menuData.value = resMenu
+  menuData.value = resMenu  
 
 }
 // 获取按钮的数据权限下拉选项