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/form.vue

@@ -19,28 +19,30 @@ import {
 
 const props = withDefaults(defineProps<FormProps>(), {
   formInline: () => ({
-    menuType: 0,
+    type: 1,
     higherMenuOptions: [],
     parentId: 0,
-    title: "",
     name: "",
     path: "",
     component: "",
-    rank: 99,
-    redirect: "",
+    perm: "",
+    visible: true,
+    sort: 0,
     icon: "",
-    extraIcon: "",
-    enterTransition: "",
-    leaveTransition: "",
-    activePath: "",
-    auths: "",
-    frameSrc: "",
-    frameLoading: true,
-    keepAlive: false,
-    hiddenTag: false,
-    fixedTag: false,
-    showLink: true,
-    showParent: false
+    frameSrc: ""
+    // rank: 99,
+    // redirect: "",
+    // extraIcon: "",
+    // enterTransition: "",
+    // leaveTransition: "",
+    // activePath: "",
+    // auths: "",
+    // frameLoading: true,
+    // keepAlive: false,
+    // hiddenTag: false,
+    // fixedTag: false,
+    // showLink: true,
+    // showParent: false
   })
 });
 
@@ -64,10 +66,8 @@ defineExpose({ getRef });
     <el-row :gutter="30">
       <re-col>
         <el-form-item label="菜单类型">
-          <Segmented
-            v-model="newFormInline.menuType"
-            :options="menuTypeOptions"
-          />
+          <Segmented v-model="newFormInline.type" :options="menuTypeOptions" />
+          {{ newFormInline.type }}
         </el-form-item>
       </re-col>
 
@@ -96,15 +96,15 @@ defineExpose({ getRef });
       </re-col>
 
       <re-col :value="12" :xs="24" :sm="24">
-        <el-form-item label="菜单名称" prop="title">
+        <el-form-item label="菜单名称" prop="name">
           <el-input
-            v-model="newFormInline.title"
+            v-model="newFormInline.name"
             clearable
             placeholder="请输入菜单名称"
           />
         </el-form-item>
       </re-col>
-      <re-col v-if="newFormInline.menuType !== 3" :value="12" :xs="24" :sm="24">
+      <!-- <re-col v-if="newFormInline.type !== 3" :value="12" :xs="24" :sm="24">
         <el-form-item label="路由名称" prop="name">
           <el-input
             v-model="newFormInline.name"
@@ -112,9 +112,8 @@ defineExpose({ getRef });
             placeholder="请输入路由名称"
           />
         </el-form-item>
-      </re-col>
-
-      <re-col v-if="newFormInline.menuType !== 3" :value="12" :xs="24" :sm="24">
+      </re-col> -->
+      <re-col v-if="newFormInline.type !== 3" :value="12" :xs="24" :sm="24">
         <el-form-item label="路由路径" prop="path">
           <el-input
             v-model="newFormInline.path"
@@ -123,12 +122,17 @@ defineExpose({ getRef });
           />
         </el-form-item>
       </re-col>
-      <re-col
-        v-show="newFormInline.menuType === 0"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
+      <re-col :value="12" :xs="24" :sm="24">
+        <!-- 按钮级别权限设置 -->
+        <el-form-item label="权限标识" prop="perm">
+          <el-input
+            v-model="newFormInline.perm"
+            clearable
+            placeholder="请输入权限标识"
+          />
+        </el-form-item>
+      </re-col>
+      <re-col v-show="newFormInline.type === 0" :value="12" :xs="24" :sm="24">
         <el-form-item label="组件路径">
           <el-input
             v-model="newFormInline.component"
@@ -137,11 +141,10 @@ defineExpose({ getRef });
           />
         </el-form-item>
       </re-col>
-
       <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="菜单排序">
           <el-input-number
-            v-model="newFormInline.rank"
+            v-model="newFormInline.sort"
             class="w-full!"
             :min="1"
             :max="9999"
@@ -149,12 +152,7 @@ defineExpose({ getRef });
           />
         </el-form-item>
       </re-col>
-      <re-col
-        v-show="newFormInline.menuType === 0"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
+      <!-- <re-col v-show="newFormInline.type === 0" :value="12" :xs="24" :sm="24">
         <el-form-item label="路由重定向">
           <el-input
             v-model="newFormInline.redirect"
@@ -162,24 +160,26 @@ defineExpose({ getRef });
             placeholder="请输入默认跳转地址"
           />
         </el-form-item>
+      </re-col> -->
+      <re-col v-show="newFormInline.type !== 3" :value="12" :xs="24" :sm="24">
+        <el-form-item label="菜单">
+          <Segmented
+            :modelValue="newFormInline.visible === 0 ? true : false"
+            :options="showLinkOptions"
+            @change="
+              ({ option: { value } }) => {
+                newFormInline.visible = value;
+              }
+            "
+          />
+        </el-form-item>
       </re-col>
-
-      <re-col
-        v-show="newFormInline.menuType !== 3"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
+      <re-col v-show="newFormInline.type !== 3" :value="12" :xs="24" :sm="24">
         <el-form-item label="菜单图标">
           <IconSelect v-model="newFormInline.icon" class="w-full" />
         </el-form-item>
       </re-col>
-      <re-col
-        v-show="newFormInline.menuType !== 3"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
+      <!-- <re-col v-show="newFormInline.type !== 3" :value="12" :xs="24" :sm="24">
         <el-form-item label="右侧图标">
           <el-input
             v-model="newFormInline.extraIcon"
@@ -187,9 +187,9 @@ defineExpose({ getRef });
             placeholder="菜单名称右侧的额外图标"
           />
         </el-form-item>
-      </re-col>
+      </re-col> -->
 
-      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
+      <!-- <re-col v-show="newFormInline.type < 2" :value="12" :xs="24" :sm="24">
         <el-form-item label="进场动画">
           <ReAnimateSelector
             v-model="newFormInline.enterTransition"
@@ -197,21 +197,16 @@ defineExpose({ getRef });
           />
         </el-form-item>
       </re-col>
-      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
+      <re-col v-show="newFormInline.type < 2" :value="12" :xs="24" :sm="24">
         <el-form-item label="离场动画">
           <ReAnimateSelector
             v-model="newFormInline.leaveTransition"
             placeholder="请选择页面离场加载动画"
           />
         </el-form-item>
-      </re-col>
+      </re-col> -->
 
-      <re-col
-        v-show="newFormInline.menuType === 0"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
+      <!-- <re-col v-show="newFormInline.type === 0" :value="12" :xs="24" :sm="24">
         <el-form-item label="菜单激活">
           <el-input
             v-model="newFormInline.activePath"
@@ -219,24 +214,8 @@ defineExpose({ getRef });
             placeholder="请输入需要激活的菜单"
           />
         </el-form-item>
-      </re-col>
-      <re-col v-if="newFormInline.menuType === 3" :value="12" :xs="24" :sm="24">
-        <!-- 按钮级别权限设置 -->
-        <el-form-item label="权限标识" prop="auths">
-          <el-input
-            v-model="newFormInline.auths"
-            clearable
-            placeholder="请输入权限标识"
-          />
-        </el-form-item>
-      </re-col>
-
-      <re-col
-        v-show="newFormInline.menuType === 1"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
+      </re-col> -->
+      <re-col v-show="newFormInline.type === 2" :value="12" :xs="24" :sm="24">
         <!-- iframe -->
         <el-form-item label="链接地址">
           <el-input
@@ -246,7 +225,7 @@ defineExpose({ getRef });
           />
         </el-form-item>
       </re-col>
-      <re-col v-if="newFormInline.menuType === 1" :value="12" :xs="24" :sm="24">
+      <!-- <re-col v-if="newFormInline.type === 1" :value="12" :xs="24" :sm="24">
         <el-form-item label="加载动画">
           <Segmented
             :modelValue="newFormInline.frameLoading ? 0 : 1"
@@ -258,32 +237,8 @@ defineExpose({ getRef });
             "
           />
         </el-form-item>
-      </re-col>
-
-      <re-col
-        v-show="newFormInline.menuType !== 3"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
-        <el-form-item label="菜单">
-          <Segmented
-            :modelValue="newFormInline.showLink ? 0 : 1"
-            :options="showLinkOptions"
-            @change="
-              ({ option: { value } }) => {
-                newFormInline.showLink = value;
-              }
-            "
-          />
-        </el-form-item>
-      </re-col>
-      <re-col
-        v-show="newFormInline.menuType !== 3"
-        :value="12"
-        :xs="24"
-        :sm="24"
-      >
+      </re-col> -->
+      <!-- <re-col v-show="newFormInline.type !== 3" :value="12" :xs="24" :sm="24">
         <el-form-item label="父级菜单">
           <Segmented
             :modelValue="newFormInline.showParent ? 0 : 1"
@@ -295,9 +250,9 @@ defineExpose({ getRef });
             "
           />
         </el-form-item>
-      </re-col>
+      </re-col> -->
 
-      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
+      <!-- <re-col v-show="newFormInline.type < 2" :value="12" :xs="24" :sm="24">
         <el-form-item label="缓存页面">
           <Segmented
             :modelValue="newFormInline.keepAlive ? 0 : 1"
@@ -309,9 +264,9 @@ defineExpose({ getRef });
             "
           />
         </el-form-item>
-      </re-col>
+      </re-col> -->
 
-      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
+      <!-- <re-col v-show="newFormInline.type < 2" :value="12" :xs="24" :sm="24">
         <el-form-item label="标签页">
           <Segmented
             :modelValue="newFormInline.hiddenTag ? 1 : 0"
@@ -323,8 +278,8 @@ defineExpose({ getRef });
             "
           />
         </el-form-item>
-      </re-col>
-      <re-col v-show="newFormInline.menuType < 2" :value="12" :xs="24" :sm="24">
+      </re-col> -->
+      <!-- <re-col v-show="newFormInline.type < 2" :value="12" :xs="24" :sm="24">
         <el-form-item label="固定标签页">
           <Segmented
             :modelValue="newFormInline.fixedTag ? 0 : 1"
@@ -336,7 +291,7 @@ defineExpose({ getRef });
             "
           />
         </el-form-item>
-      </re-col>
+      </re-col> -->
     </el-row>
   </el-form>
 </template>

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) {
+    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" });
+      }
+    });
   }
 
   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;