🚀 菜单大调整,支持外链 内嵌 多级菜单

src/components/Table/src/hooks/useRowSelection.ts

@@ -3,7 +3,7 @@ import type { BasicTableProps, TableRowSelection } from '../types/table';
 import { computed, ComputedRef, nextTick, Ref, ref, toRaw, unref, watch } from 'vue';
 import { ROW_KEY } from '../const';
 import { omit } from 'lodash-es';
-import { findNodeAll } from '/@/utils/helper/treeHelper';
+import { findNodeIn } from '/@/utils/helper/treeHelper';
 
 export function useRowSelection(
   propsRef: ComputedRef<BasicTableProps>,
@@ -67,7 +67,7 @@ export function useRowSelection(
 
   function setSelectedRowKeys(rowKeys: string[]) {
     selectedRowKeysRef.value = rowKeys;
-    const allSelectedRows = findNodeAll(
+    const allSelectedRows = findNodeIn(
       toRaw(unref(tableData)).concat(toRaw(unref(selectedRowRef))),
       (item) => rowKeys.includes(item[unref(getRowKey) as string]),
       {

src/utils/helper/treeHelper.ts

@@ -56,8 +56,8 @@ export function findNode<T = any>(tree: any, func: Fn, config: Partial<TreeHelpe
   return null;
 }
 
-/** 查找树形匹配的节点信息,包含当前节点数据以及他父级的节点数据,以集合的形式返回 */
-export function findNodeAll<T = any>(tree: any, func: Fn, config: Partial<TreeHelperConfig> = {}): T[] {
+/** 查找树形匹配 in 的节点信息,以集合的形式返回 */
+export function findNodeIn<T = any>(tree: any, func: Fn, config: Partial<TreeHelperConfig> = {}): T[] {
   config = getConfig(config);
   const { children } = config;
   const list = [...tree];

src/views/system/menu/MenuModal.vue

@@ -14,15 +14,20 @@
    * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
    * author entfrm开发团队-王翔
    */
-  import { ref, unref } from 'vue';
+  import { ref, unref, reactive, toRaw } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './menu.data';
   import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
   import { listMenu, addMenu, editMenu, getMenu } from '/@/api/platform/system/controller/menu';
-  import { listToTree } from '/@/utils/helper/treeHelper';
+  import { listToTree, findPath } from '/@/utils/helper/treeHelper';
 
   /** 通用变量统一声明区域 */
+  const state = reactive({
+    tag: '',
+    menuTree: []
+  });
   const tag = ref<Nullable<string>>('');
+  const menuTree = ref<Recordable[]>([]);
   /** https://v3.cn.vuejs.org/api/options-data.html#emits */
   const emit = defineEmits(['success', 'register']);
   const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
@@ -38,7 +43,8 @@
     // 处理设置数据
     tag.value = data._tag;
     const topMenu = { id: '0', name: '顶级菜单', children: [] };
-    topMenu.children = listToTree(await listMenu());
+    state.menuTree = listToTree(await listMenu());
+    topMenu.children = state.menuTree;
     await updateSchema({
       field: 'parentId',
       componentProps: {
@@ -72,6 +78,9 @@
       // 采用tag标签区分操作
       switch (unref(tag)) {
         case 'add':
+          // 处理拿取当前菜单所有父级进行修改角色模块的勾选类型
+          const superMenus = findPath(toRaw(state.menuTree),(node) => node.id == formData?.parentId);
+          formData.parentIds = (superMenus||[]).map(item => item.id);
           await addMenu(formData);
           break;
         case 'edit':

src/views/system/menu/menu.data.ts

@@ -120,7 +120,9 @@ export const formSchema: FormSchema[] = [
     label: '上级菜单',
     component: 'TreeSelect',
     defaultValue: '0',
+    required: true,
     componentProps: {
+      allowClear: false,
       replaceFields: {
         title: 'name',
         key: 'id',