调试

src/views/admin/menu/hook.tsx

@@ -20,10 +20,11 @@ export function useUser() {
     path: "", //路由路径
     parentId: "-1", //父菜单ID
     icon: "", //菜单图标
-    sortOrder: "0", //排序值，越小越靠前
+    sortOrder: "", //排序值，越小越靠前
     embedded: "0", //是否内嵌，0否，1是
     menuType: "0" //菜单类型，0菜单，1按钮
   });
+  const UpdateFormRef = ref()
   const dialogType = ref(1);
   const dataList = ref([]);
   const menuList = ref([]);
@@ -31,9 +32,10 @@ export function useUser() {
   const dialogUpdateVisible = ref(false);
   const pagination = reactive<PaginationProps>({
     total: 0,
-    pageSize: 10,
+    pageSize: 30,
     currentPage: 1,
-    background: true
+    background: true,
+    pageSizes: [10, 30, 50, 100]
   });
   const columns: TableColumnList = [
     {
@@ -115,7 +117,9 @@ export function useUser() {
   // 获取全部菜单列表
   async function Menu() {
     const { data } = await getMenuList({});
+    console.log(data);
     menuList.value = TreeFormatter(data);
+    console.log(menuList.value);
     menuList.value.unshift({
       label: "作为顶级菜单",
       value: "-1"
@@ -123,70 +127,80 @@ export function useUser() {
   }
   Menu();
   async function UpdateFormSubmit() {
-    if (dialogType.value == 1) {
-      const { status, msg } = await postMenuList({
-        name: UpdateForm.value.name,
-        enName: UpdateForm.value.enName,
-        permission: UpdateForm.value.permission,
-        path: UpdateForm.value.path,
-        parentId:
-          UpdateForm.value.parentId === "null"
-            ? null
-            : UpdateForm.value.parentId,
-        icon: UpdateForm.value.icon,
-        visible: visibleswitchvalue.value,
-        sortOrder: UpdateForm.value.sortOrder,
-        keepAlive: keepAliveswitchvalue.value,
-        embedded: UpdateForm.value.embedded,
-        menuType: UpdateForm.value.menuType
-      });
-      if (status == 1) {
-        ElMessage({
-          message: "新增菜单成功",
-          type: "success"
-        });
-        dialogUpdateVisible.value = false;
-        onSearch();
-        Menu();
+    UpdateFormRef.value.validate(async (valid, fields) => {
+      if (valid) {
+        if (dialogType.value == 1) {
+          const { status, msg } = await postMenuList({
+            name: UpdateForm.value.name,
+            enName: UpdateForm.value.enName,
+            permission: UpdateForm.value.permission,
+            path: UpdateForm.value.path,
+            parentId:
+              UpdateForm.value.parentId === "null"
+                ? null
+                : UpdateForm.value.parentId,
+            icon: UpdateForm.value.icon,
+            visible: visibleswitchvalue.value,
+            sortOrder: UpdateForm.value.sortOrder,
+            keepAlive: keepAliveswitchvalue.value,
+            embedded: UpdateForm.value.embedded,
+            menuType: UpdateForm.value.menuType
+          });
+          if (status == 1) {
+            ElMessage({
+              message: "新增菜单成功",
+              type: "success"
+            });
+            dialogUpdateVisible.value = false;
+            onSearch();
+            Menu();
+          } else {
+            ElMessageBox.alert(msg, "提示", {
+              confirmButtonText: "关闭",
+              type: "warning"
+            });
+          }
+        } else {
+          const { status, msg } = await putMenuList({
+            name: UpdateForm.value.name,
+            enName: UpdateForm.value.enName,
+            permission: UpdateForm.value.permission,
+            path: UpdateForm.value.path,
+            parentId:
+              UpdateForm.value.parentId === "null"
+                ? null
+                : UpdateForm.value.parentId,
+            icon: UpdateForm.value.icon,
+            visible: visibleswitchvalue.value,
+            sortOrder: UpdateForm.value.sortOrder,
+            keepAlive: keepAliveswitchvalue.value,
+            embedded: UpdateForm.value.embedded,
+            menuType: UpdateForm.value.menuType,
+            menuId: UpdateForm.value.menuId
+          });
+          if (status == 1) {
+            ElMessage({
+              message: "菜单修改成功",
+              type: "success"
+            });
+            dialogUpdateVisible.value = false;
+            onSearch();
+            Menu();
+          } else {
+            ElMessageBox.alert(msg, "提示", {
+              confirmButtonText: "关闭",
+              type: "warning"
+            });
+          }
+        }
       } else {
-        ElMessageBox.alert(msg, "提示", {
-          confirmButtonText: "关闭",
-          type: "warning"
-        });
-      }
-    } else {
-      const { status, msg } = await putMenuList({
-        name: UpdateForm.value.name,
-        enName: UpdateForm.value.enName,
-        permission: UpdateForm.value.permission,
-        path: UpdateForm.value.path,
-        parentId:
-          UpdateForm.value.parentId === "null"
-            ? null
-            : UpdateForm.value.parentId,
-        icon: UpdateForm.value.icon,
-        visible: visibleswitchvalue.value,
-        sortOrder: UpdateForm.value.sortOrder,
-        keepAlive: keepAliveswitchvalue.value,
-        embedded: UpdateForm.value.embedded,
-        menuType: UpdateForm.value.menuType,
-        menuId: UpdateForm.value.menuId
-      });
-      if (status == 1) {
+        //表单校验失败回调
         ElMessage({
-          message: "菜单修改成功",
-          type: "success"
-        });
-        dialogUpdateVisible.value = false;
-        onSearch();
-        Menu();
-      } else {
-        ElMessageBox.alert(msg, "提示", {
-          confirmButtonText: "关闭",
-          type: "warning"
+          message: "请输入完整信息",
+          type: "error"
         });
       }
-    }
+    })
   }
   function handleDelete(row) {
     ElMessageBox.confirm(`是否删除名称为:${row.name}的菜单? `, "提示", {
@@ -218,16 +232,22 @@ export function useUser() {
       path: "", //路由路径
       parentId: "", //父菜单ID
       icon: "", //菜单图标
-      sortOrder: "0", //排序值，越小越靠前
+      sortOrder: "", //排序值，越小越靠前
       embedded: "0", //是否内嵌，0否，1是
       menuType: "0" //菜单类型，0菜单，1按钮
     };
+    visibleswitchvalue.value =  "1"
+    keepAliveswitchvalue.value =  "1"
     dialogType.value = 1;
     dialogUpdateVisible.value = true;
+    UpdateFormRef.value && UpdateFormRef.value.resetFields()
   }
   function handleUpdate(row) {
     dialogType.value = 2;
     dialogUpdateVisible.value = true;
+    UpdateFormRef.value && UpdateFormRef.value.resetFields()
+    visibleswitchvalue.value = row.meta.isHide ? "0" : "1"
+    keepAliveswitchvalue.value = row.meta.isKeepAlive ? "1" : "0"
     UpdateForm.value = {
       menuId: row.id ? row.id : "",
       name: row.name ? row.name : "", //菜单名称
@@ -238,7 +258,7 @@ export function useUser() {
       icon: row.meta.icon ? row.meta.icon : "", //菜单图标
       sortOrder: row.sortOrder, //排序值，越小越靠前
       embedded: row.embedded ? row.embedded : "0", //是否内嵌，0否，1是
-      menuType: row.menuType ? row.menuType : "" //菜单类型，0菜单，1按钮
+      menuType: row.menuType ? row.menuType : "", //菜单类型，0菜单，1按钮
     };
   }
 
@@ -269,7 +289,6 @@ export function useUser() {
   async function onSearch() {
     loading.value = true;
     const { data } = await getMenuList({});
-    console.log('testlog', data);
     dataList.value = data;
     pagination.total = data.length;
     setTimeout(() => {
@@ -292,6 +311,7 @@ export function useUser() {
     UpdateFormSubmit,
     submit,
     UpdateForm,
+    UpdateFormRef,
     menuList,
     dialogType,
     AddUser,

src/views/admin/menu/index.vue

@@ -5,15 +5,18 @@ export default {
 };
 </script>
 <script setup lang="ts">
+import { reactive } from "vue";
 import { useUser } from "./hook";
 import { hasAuth } from "@/router/utils";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import IconSelect from '@/components/ReIcon/src/Select.vue';
 
 import Delete from "@iconify-icons/ep/delete";
 import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
 import AddFill from "@iconify-icons/ri/add-circle-line";
+import EditPen from "@iconify-icons/ep/edit-pen";
 
 const {
   loading,
@@ -23,6 +26,7 @@ const {
   dialogUpdateVisible,
   UpdateFormSubmit,
   UpdateForm,
+  UpdateFormRef,
   onSearch,
   submit,
   dialogType,
@@ -44,6 +48,7 @@ defineExpose({
   dialogUpdateVisible,
   UpdateFormSubmit,
   UpdateForm,
+  UpdateFormRef,
   submit,
   onSearch,
   dialogType,
@@ -57,6 +62,42 @@ defineExpose({
   visibleswitchvalue,
   keepAliveswitchvalue
 });
+
+// 表单校验规则
+const rules = reactive({
+  menuType: [
+    // 必传(字段名动态生成)
+    { required: true, message: '请选择权限类型', trigger: 'blur' },
+  ],
+  name: [
+    // 必传(字段名动态生成)
+    { required: true, message: '请输入菜单标题', trigger: 'blur' },
+  ],
+  enName: [
+    // 必传(字段名动态生成)
+    { required: true, message: '请输入菜单名称(英文字母名称)', trigger: 'blur' },
+  ],
+  permission: [
+    // 必传(字段名动态生成)
+    { required: true, message: '请输入权限标识', trigger: 'blur' },
+  ],
+  path: [
+    // 必传(字段名动态生成)
+    { required: true, message: '请输入菜单路径', trigger: 'blur' },
+  ],
+  icon: [
+    // 必传(字段名动态生成)
+    { required: true, message: '请选择图标', trigger: 'blur' },
+  ],
+  sortOrder: [
+    // 必传(字段名动态生成)
+    { required: true, message: '请输入排序值（越小越靠前）', trigger: 'blur' },
+  ],
+  parentId: [
+    // 必传(字段名动态生成)
+    { required: true, message: '请选择父级菜单', trigger: 'blur' },
+  ],
+})
 </script>
 
 <template lang="pug">
@@ -99,11 +140,13 @@ defineExpose({
             :icon="useRenderIcon(Delete)"
           ) 删除
 
-  el-dialog(v-model='dialogUpdateVisible' width="40%" :close-on-click-modal="false" :title="dialogType == 1 ?'添加菜单' : '修改菜单'" )
+  el-dialog(v-model='dialogUpdateVisible' width="40%" :close-on-click-modal="false" :title="dialogType == 1 ? '添加菜单' : '修改菜单'" )
     el-form(:model='UpdateForm' 
+      ref="UpdateFormRef"
+      :rules="rules",
       label-position="left"
       label-width="100px")
-      el-form-item(label='权限类型')
+      el-form-item(label='权限类型' prop="menuType")
         el-select(
           v-model="UpdateForm.menuType"
           placeholder="请选择权限类型"
@@ -124,14 +167,14 @@ defineExpose({
           placeholder="请输入菜单路径")
       el-form-item(label='图标' prop="icon" v-if="UpdateForm.menuType == '0'")
         IconSelect(v-model="UpdateForm.icon")
-      el-form-item(label='排序' prop="path" v-if="UpdateForm.menuType == '0'")
+      el-form-item(label='排序' prop="sortOrder" v-if="UpdateForm.menuType == '0'")
         el-input(v-model='UpdateForm.sortOrder' autocomplete='off' type="number" class="!w-[300px]"
           placeholder="请输入排序值（越小越靠前）")
       el-form-item(label='是否显示' prop="visibleswitchvalue" v-if="UpdateForm.menuType == '0'")
         el-switch(v-model="visibleswitchvalue" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-value="1" inactive-value="0")
       el-form-item(label='是否缓存' prop="keepAliveswitchvalue" v-if="UpdateForm.menuType == '0'")
         el-switch(v-model="keepAliveswitchvalue" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-value="1" inactive-value="0")
-      el-form-item(label='父级菜单')
+      el-form-item(label='父级菜单' prop="parentId")
         el-tree-select(
           v-model="UpdateForm.parentId" 
           :data="menuList"