feat: 菜单管理提交

src/api/system.ts

@@ -51,6 +51,16 @@ export const addMenu = (data?: object) => {
   return http.request<Result>("post", "/api/menu/add-menu", { data });
 };
 
+/** 修改菜单-菜单管理列表 */
+export const updateMenu = (data?: object) => {
+  return http.request<Result>("post", "/api/menu/modify-menu", { data });
+};
+
+/** 删除菜单-菜单管理列表 */
+export const deleteMenu = (data?: { id: number }) => {
+  return http.request<Result>("post", `/api/menu/delete-menu/${data.id}`);
+};
+
 /** 获取系统管理-部门管理列表 */
 export const getDeptList = (data?: object) => {
   return http.request<Result>("post", "/api/depart/get-depart-list-by-page", {

src/components/ReSegmented/src/index.tsx

@@ -69,6 +69,9 @@ export default defineComponent({
     function handleChange({ option, index }, event: Event) {
       if (props.disabled || option.disabled) return;
       event.preventDefault();
+      console.log("props.modelValue", props.modelValue);
+      console.log("props.modelValue.type", typeof props.modelValue);
+      console.log("handleChange", option, index);
       isNumber(props.modelValue)
         ? emit("update:modelValue", index)
         : (curIndex.value = index);

src/views/systems/menu/utils/enums.ts

@@ -3,19 +3,19 @@ import type { OptionsType } from "@/components/ReSegmented";
 const menuTypeOptions: Array<OptionsType> = [
   {
     label: "菜单",
-    value: 0
+    value: 1
   },
   {
-    label: "iframe",
-    value: 1
+    label: "目录",
+    value: 2
   },
   {
     label: "外链",
-    value: 2
+    value: 3
   },
   {
     label: "按钮",
-    value: 3
+    value: 4
   }
 ];
 

src/views/systems/menu/utils/hook.tsx

 import editForm from "../form.vue";
 import { handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
-import { getMenuList, addMenu } from "@/api/system";
+import { getMenuList, addMenu, deleteMenu } from "@/api/system";
 import { transformI18n } from "@/plugins/i18n";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
 import type { FormItemProps } from "../utils/types";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
+// import { c } from "node_modules/vite/dist/node/moduleRunnerTransport.d-CXw_Ws6P";
 
 export function useMenu() {
   const form = reactive({
@@ -49,7 +50,7 @@ export function useMenu() {
     },
     {
       label: "菜单类型",
-      prop: "menuType",
+      prop: "type",
       width: 100,
       cellRenderer: ({ row, props }) => (
         <el-tag size={props.size} type={getMenuType(row.type)} effect="plain">
@@ -69,17 +70,17 @@ export function useMenu() {
     },
     {
       label: "权限标识",
-      prop: "auths"
+      prop: "perm"
     },
     {
       label: "排序",
-      prop: "rank",
+      prop: "sort",
       width: 100
     },
     {
       label: "隐藏",
-      prop: "showLink",
-      formatter: ({ showLink }) => (showLink ? "否" : "是"),
+      prop: "visible",
+      formatter: ({ visible }) => (visible ? "是" : "否"),
       width: 100
     },
     {
@@ -135,28 +136,31 @@ export function useMenu() {
       title: `${title}菜单`,
       props: {
         formInline: {
-          menuType: row?.menuType ?? 0,
+          type: row?.type ?? 1,
           higherMenuOptions: formatHigherMenuOptions(cloneDeep(dataList.value)),
           parentId: row?.parentId ?? 0,
-          // title: row?.title ?? "",
           name: row?.name ?? "",
           path: row?.path ?? "",
           component: row?.component ?? "",
-          rank: row?.rank ?? 99,
-          redirect: row?.redirect ?? "",
+          perm: row?.perm ?? "",
+          visible: row?.visible ?? true,
+          sort: row?.sort ?? 99,
           icon: row?.icon ?? "",
-          extraIcon: row?.extraIcon ?? "",
-          enterTransition: row?.enterTransition ?? "",
-          leaveTransition: row?.leaveTransition ?? "",
-          activePath: row?.activePath ?? "",
-          auths: row?.auths ?? "",
-          frameSrc: row?.frameSrc ?? "",
-          frameLoading: row?.frameLoading ?? true,
-          keepAlive: row?.keepAlive ?? false,
-          hiddenTag: row?.hiddenTag ?? false,
-          fixedTag: row?.fixedTag ?? false,
-          showLink: row?.showLink ?? true,
-          showParent: row?.showParent ?? false
+          frameSrc: row?.frameSrc ?? ""
+          // title: row?.title ?? "",
+          // rank: row?.rank ?? 99,
+          // redirect: row?.redirect ?? "",
+          // extraIcon: row?.extraIcon ?? "",
+          // enterTransition: row?.enterTransition ?? "",
+          // leaveTransition: row?.leaveTransition ?? "",
+          // activePath: row?.activePath ?? "",
+          // auths: row?.auths ?? "",
+          // frameLoading: row?.frameLoading ?? true,
+          // keepAlive: row?.keepAlive ?? false,
+          // hiddenTag: row?.hiddenTag ?? false,
+          // fixedTag: row?.fixedTag ?? false,
+          // showLink: row?.showLink ?? true,
+          // showParent: row?.showParent ?? false
         }
       },
       width: "45%",
@@ -170,7 +174,7 @@ export function useMenu() {
         const curData = options.props.formInline as FormItemProps;
         function chores() {
           message(
-            `您${title}了菜单名称为${transformI18n(curData.title)}的这条数据`,
+            `您${title}了菜单名称为${transformI18n(curData.name)}的这条数据`,
             {
               type: "success"
             }
@@ -180,9 +184,11 @@ export function useMenu() {
         }
         FormRef.validate(valid => {
           if (valid) {
-            console.log("curData", curData);
             // 表单规则校验通过
             if (title === "新增") {
+              curData.visible =
+                curData.visible || curData.visible === 0 ? 1 : 0;
+              console.log("curData", curData);
               addMenu(curData).then(res => {
                 if ((res as any).code === "0") {
                   chores();
@@ -199,10 +205,21 @@ export function useMenu() {
   }
 
   function handleDelete(row) {
-    message(`您删除了菜单名称为${transformI18n(row.title)}的这条数据`, {
-      type: "success"
+    console.log("handleDelete", row.id);
+    if (!row.id) {
+      message("id不能为空", { type: "error" });
+      return;
+    }
+    deleteMenu({ id: row.id }).then(res => {
+      if ((res as any).code === "0") {
+        message(`您删除了菜单名称为${transformI18n(row.title)}的这条数据`, {
+          type: "success"
+        });
+        onSearch();
+      } else {
+        message((res as any).msg, { type: "error" });
+      }
     });
-    onSearch();
   }
 
   onMounted(() => {

src/views/systems/menu/utils/rule.ts

@@ -3,8 +3,7 @@ import type { FormRules } from "element-plus";
 
 /** 自定义表单规则校验 */
 export const formRules = reactive(<FormRules>{
-  title: [{ required: true, message: "菜单名称为必填项", trigger: "blur" }],
-  name: [{ required: true, message: "路由名称为必填项", trigger: "blur" }],
+  name: [{ required: true, message: "菜单名称为必填项", trigger: "blur" }],
   path: [{ required: true, message: "路由路径为必填项", trigger: "blur" }],
-  auths: [{ required: true, message: "权限标识为必填项", trigger: "blur" }]
+  perm: [{ required: true, message: "权限标识为必填项", trigger: "blur" }]
 });

src/views/systems/menu/utils/types.ts

 interface FormItemProps {
   /** 菜单类型（0代表菜单、1代表iframe、2代表外链、3代表按钮）*/
-  menuType: number;
+  type: number;
   higherMenuOptions: Record<string, unknown>[];
   parentId: number;
-  title: string;
   name: string;
   path: string;
   component: string;
-  rank: number;
-  redirect: string;
+  perm: string;
+  visible: number | boolean;
+  sort: number;
   icon: string;
-  extraIcon: string;
-  enterTransition: string;
-  leaveTransition: string;
-  activePath: string;
-  auths: string;
   frameSrc: string;
-  frameLoading: boolean;
-  keepAlive: boolean;
-  hiddenTag: boolean;
-  fixedTag: boolean;
-  showLink: boolean;
-  showParent: boolean;
+  // title: string;
+  // rank: number;
+  // redirect: string;
+  // extraIcon: string;
+  // enterTransition: string;
+  // leaveTransition: string;
+  // activePath: string;
+  // auths: string;
+  // frameLoading: boolean;
+  // keepAlive: boolean;
+  // hiddenTag: boolean;
+  // fixedTag: boolean;
+  // showLink: boolean;
+  // showParent: boolean;
 }
 interface FormProps {
   formInline: FormItemProps;