修改菜单-新增菜单类型标记

src/views/system/menu/MenuDrawer.vue

@@ -15,9 +15,8 @@
   import { BasicForm, useForm } from '@/components/Form';
   import { formSchema } from './menu.data';
   import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
-  import { menuDetailApi,menuUpdataApi,getMenuList,addMenuApi } from "@/api/system/menu/menu";
-  import {useMessage} from "@/hooks/web/useMessage";
-
+  import { menuDetailApi, menuUpdataApi, getMenuList, addMenuApi } from '@/api/system/menu/menu';
+  import { useMessage } from '@/hooks/web/useMessage';
 
   defineOptions({ name: 'MenuDrawer' });
   const emit = defineEmits(['success', 'register']);
@@ -41,30 +40,30 @@
       // 获取行数据的菜单id
       menuId.value = data.record.businessId;
       // 通过id获取菜单详情信息
-      menuDetailApi(menuId.value).then(res => {
-        const form = res.data
+      menuDetailApi(menuId.value).then((res) => {
+        const form = res.data;
         // 塞值
         setFieldsValue({
           ...form,
         });
-      })
+      });
     }
-    if (unref(isAdd)){
+    if (unref(isAdd)) {
       // 通过id获取菜单详情信息
-      const id = data.record.businessId
+      const id = data.record.businessId;
       const params = {
         parentId: id,
-      }
+      };
       // 塞值
       setFieldsValue({
         ...params,
       });
     }
-    var treeData = []
+    var treeData = [];
     const res = await getMenuList();
-    const menu = { businessId: 0,parentId: 0 ,menuName: '主类目', children: [] }
-    menu.children = handleTree(res.data, 'businessId',undefined,undefined,undefined)
-    treeData.push(menu)
+    const menu = { businessId: 0, parentId: 0, menuName: '主类目', children: [] };
+    menu.children = handleTree(res.data, 'businessId', undefined, undefined, undefined);
+    treeData.push(menu);
     updateSchema({
       field: 'parentId',
       componentProps: { treeData },
@@ -77,15 +76,18 @@
       const formData = await validate();
       setDrawerProps({ confirmLoading: true });
       // 编辑
-      if(unref(isUpdate)) {
-        formData.businessId = menuId.value
-        menuUpdataApi(formData).then(res => {
-          if(res.code === 200){
+      if (unref(isUpdate)) {
+        formData.businessId = menuId.value;
+        menuUpdataApi(formData).then((res) => {
+          if (res.code === 200) {
             createMessage.success('编辑成功');
             closeDrawer();
-            emit('success', { isUpdate: unref(isUpdate), values: { ...formData, businessId: menuId.value } });
+            emit('success', {
+              isUpdate: unref(isUpdate),
+              values: { ...formData, businessId: menuId.value },
+            });
           }
-        })
+        });
       } else {
         //新增
         const paramsAdd = {
@@ -102,14 +104,18 @@
           path: formData.path,
           perms: formData.perms,
           component: formData.component,
-        }
-        addMenuApi(paramsAdd).then(res => {
-          if(res.code === 200){
+          remarks: formData.remarks,
+        };
+        addMenuApi(paramsAdd).then((res) => {
+          if (res.code === 200) {
             createMessage.success('新增成功');
             closeDrawer();
-            emit('success', { isUpdate: unref(isUpdate), values: { ...formData, businessId: menuId.value } });
+            emit('success', {
+              isUpdate: unref(isUpdate),
+              values: { ...formData, businessId: menuId.value },
+            });
           }
-        })
+        });
       }
     } finally {
       setDrawerProps({ confirmLoading: false });
@@ -118,22 +124,30 @@
 
   /**结构转换方法*/
   function handleTree(data, id, parentId, children, rootId) {
-    id = id || 'id'
-    parentId = parentId || 'parentId'
-    children = children || 'children'
-    rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
+    id = id || 'id';
+    parentId = parentId || 'parentId';
+    children = children || 'children';
+    rootId =
+      rootId ||
+      Math.min.apply(
+        Math,
+        data.map((item) => {
+          return item[parentId];
+        }),
+      ) ||
+      0;
     // 对源数据深度克隆
-    const cloneData = JSON.parse(JSON.stringify(data))
+    const cloneData = JSON.parse(JSON.stringify(data));
     // 循环所有项
-    const treeData = cloneData.filter(father => {
-      const branchArr = cloneData.filter(child => {
+    const treeData = cloneData.filter((father) => {
+      const branchArr = cloneData.filter((child) => {
         // 返回每一项的子级数组
-        return father[id] === child[parentId]
-      })
-      branchArr.length > 0 ? father.children = branchArr : ''
+        return father[id] === child[parentId];
+      });
+      branchArr.length > 0 ? (father.children = branchArr) : '';
       // 返回第一层
-      return father[parentId] === rootId
-    })
-    return treeData !== '' ? treeData : data
+      return father[parentId] === rootId;
+    });
+    return treeData !== '' ? treeData : data;
   }
 </script>

src/views/system/menu/index.vue

@@ -9,17 +9,17 @@
           <TableAction
             :actions="[
               {
-                label:'新增',
+                label: '新增',
                 onClick: handleAdd.bind(null, record),
               },
               {
                 // icon: 'clarity:note-edit-line',
-                label:'修改',
+                label: '修改',
                 onClick: handleEdit.bind(null, record),
               },
               {
                 // icon: 'ant-design:delete-outlined',
-                label:'删除',
+                label: '删除',
                 color: 'error',
                 popConfirm: {
                   title: '是否确认删除',
@@ -40,12 +40,12 @@
   import { useDrawer } from '@/components/Drawer';
   import MenuDrawer from './MenuDrawer.vue';
   import { columns, searchFormSchema } from './menu.data';
-  import { deleteById,getMenuListByPage } from "@/api/system/menu/menu";
-  import { useMessage } from "@/hooks/web/useMessage";
-  import { ref,reactive,unref,onDeactivated,onMounted,nextTick } from 'vue';
-  import { useRoute,onBeforeRouteLeave } from 'vue-router';
+  import { deleteById, getMenuListByPage } from '@/api/system/menu/menu';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { ref, reactive, unref, onDeactivated, onMounted, nextTick } from 'vue';
+  import { useRoute, onBeforeRouteLeave } from 'vue-router';
   import { useFilterStore } from '@/store/modules/filterData';
-  import { useUserStore } from "@/store/modules/user";
+  import { useUserStore } from '@/store/modules/user';
 
   defineOptions({ name: 'MenuManagement' });
   const filterStore = useFilterStore();
@@ -53,7 +53,7 @@
   const { createMessage } = useMessage();
   const [registerDrawer, { openDrawer }] = useDrawer();
   const treeData = ref();
-  const [registerTable, { reload, expandAll,getForm }] = useTable({
+  const [registerTable, { reload, expandAll, getForm }] = useTable({
     title: '菜单列表',
     api: async (params) => {
       const response = await getMenuListByPage(params);
@@ -85,29 +85,37 @@
 
   /**改变列表结构 列表->树*/
   function transformData(data) {
-    treeData.value = handleTree(data, 'businessId',undefined,undefined,undefined)
-    return treeData.value
+    treeData.value = handleTree(data, 'businessId', undefined, undefined, undefined);
+    return treeData.value;
   }
 
   /**结构转换方法*/
   function handleTree(data, id, parentId, children, rootId) {
-    id = id || 'id'
-    parentId = parentId || 'parentId'
-    children = children || 'children'
-    rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
+    id = id || 'id';
+    parentId = parentId || 'parentId';
+    children = children || 'children';
+    rootId =
+      rootId ||
+      Math.min.apply(
+        Math,
+        data.map((item) => {
+          return item[parentId];
+        }),
+      ) ||
+      0;
     // 对源数据深度克隆
-    const cloneData = JSON.parse(JSON.stringify(data))
+    const cloneData = JSON.parse(JSON.stringify(data));
     // 循环所有项
-    const treeData = cloneData.filter(father => {
-      const branchArr = cloneData.filter(child => {
+    const treeData = cloneData.filter((father) => {
+      const branchArr = cloneData.filter((child) => {
         // 返回每一项的子级数组
-        return father[id] === child[parentId]
-      })
-      branchArr.length > 0 ? father.children = branchArr : ''
+        return father[id] === child[parentId];
+      });
+      branchArr.length > 0 ? (father.children = branchArr) : '';
       // 返回第一层
-      return father[parentId] === rootId
-    })
-    return treeData !== '' ? treeData : data
+      return father[parentId] === rootId;
+    });
+    return treeData !== '' ? treeData : data;
   }
 
   /**新增*/
@@ -152,31 +160,29 @@
 
   /**进入页面的初始化方法*/
   onMounted(() => {
-    const path = route.path
-    if(filterStore.getSearchParams[path]) {
-      if(JSON.parse(filterStore.getSearchParams[path] !== {})){
-        const params = JSON.parse(filterStore.getSearchParams[path])
+    const path = route.path;
+    if (filterStore.getSearchParams[path]) {
+      if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
+        const params = JSON.parse(filterStore.getSearchParams[path]);
         getForm().setFieldsValue({
           page: params.page,
           pageSize: params.pageSize,
           menuName: params.menuName,
           flag: params.flag,
-        })
+        });
       }
     }
   });
 
   /**离开路由前调用的钩子函数*/
   onBeforeRouteLeave((to, from, next) => {
-    const params = Object.assign({},getForm().getFieldsValue());
-    filterStore.setSearchParams(
-      {
-        path: from.path,
-        param: {
-          ...params
-        }
-      }
-    )
+    const params = Object.assign({}, getForm().getFieldsValue());
+    filterStore.setSearchParams({
+      path: from.path,
+      param: {
+        ...params,
+      },
+    });
     next(); // 允许导航
   });
 </script>

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

 import { BasicColumn, FormSchema } from '@/components/Table';
 import { h } from 'vue';
-import {Switch, Tag} from 'ant-design-vue';
+import { Switch, Tag } from 'ant-design-vue';
 import Icon from '@/components/Icon/Icon.vue';
-import {useMessage} from "@/hooks/web/useMessage";
-import {setMenuStatus} from "@/api/system/menu/menu";
+import { useMessage } from '@/hooks/web/useMessage';
+import { setMenuStatus } from '@/api/system/menu/menu';
 
 export const columns: BasicColumn[] = [
   {
@@ -65,12 +65,12 @@ export const columns: BasicColumn[] = [
             path: record.path,
             perms: record.perms,
             component: record.component,
-          }
+          };
           setMenuStatus(params)
             .then(() => {
               record.flag = newStatus;
-              const text = record.flag === '1' ? '启用' : '停用'
-              createMessage.success( text + `成功`);
+              const text = record.flag === '1' ? '启用' : '停用';
+              createMessage.success(text + `成功`);
             })
             .catch(() => {
               // createMessage.error('操作失败');
@@ -260,4 +260,18 @@ export const formSchema: FormSchema[] = [
     ],
     ifShow: ({ values }) => !isButton(values.menuType),
   },
+  {
+    field: 'remarks',
+    label: '菜单类型标记',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择菜单类型',
+      options: [
+        { label: '第一模块', value: '1' },
+        { label: '第二模块', value: '2' },
+        { label: '第三模块', value: '3' },
+        { label: '第四模块', value: '4' },
+      ],
+    },
+  },
 ];