fix: vue表单校验优化

packages/toolkits/pro/template/tinyvue/src/api/interceptor.ts

@@ -68,6 +68,9 @@ axios.interceptors.response.use(
         status: 'error',
       });
     }
+    if (status === 400) {
+      data.message = error.response.data.errors[0] ?? data.message;
+    }
 
     return Promise.reject(error);
   },

packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue

@@ -24,15 +24,7 @@
 </template>
 
 <script lang="ts" setup>
-  import {
-    ref,
-    onMounted,
-    watch,
-    computed,
-    reactive,
-    unref,
-    getCurrentInstance,
-  } from 'vue';
+  import { ref, onMounted, watch, computed, unref } from 'vue';
   import { TreeMenu as tinyTreeMenu } from '@opentiny/vue';
   import { useMenuStore } from '@/store/modules/router';
   import router from '@/router';
@@ -127,7 +119,7 @@
         const key = findId(tabStore.current.name, tabStore.current.link);
         tree.value.setCurrentKey(key);
         const { parentId = null } = tree.value.getCurrentNode();
-        if (parentId) {
+        if (parentId && !expandeArr.value.includes(parentId)) {
           expandeArr.value = expandeArr.value.concat(parentId);
         }
       },

packages/toolkits/pro/template/tinyvue/src/router/guard/menu.ts

@@ -1,8 +1,8 @@
 import { useMenuStore } from '@/store/modules/router';
 import { nextTick } from 'vue';
 import { Router, RouteRecordRaw } from 'vue-router';
-import Demo from '@/views/menu/demo/index.vue';
 import NotFound from '@/views/not-found/404/index.vue';
+import constant from '../constant';
 
 export interface ITreeNodeData {
   // node-key='id' 设置节点的唯一标识
@@ -38,6 +38,18 @@ if (BUILD_TOOLS === 'VITE' || BUILD_TOOLS === 'WEBPACK') {
     }
   });
 }
+
+export const flushRouter = async (router: Router) => {
+  const menuStore = useMenuStore();
+  router.clearRoutes();
+  constant.forEach((staticRoute) => router.addRoute(staticRoute));
+  await menuStore.getMenuList();
+  const routes = toRoutes(menuStore.menuList);
+  routes.forEach((route) => {
+    router.addRoute('root', route);
+  });
+};
+
 export const toRoutes = (menus: ITreeNodeData[]) => {
   const router: RouteRecordRaw[] = [];
   for (let i = 0; i < menus.length; i += 1) {

packages/toolkits/pro/template/tinyvue/src/store/modules/tabs.ts

@@ -66,12 +66,14 @@ export const useTabStore = defineStore('tabs', {
     getByLink(link: string) {
       return this.data.filter((tab) => tab.link === link);
     },
-    delByLink(link: string) {
+    delByLink(link: string, endsWith = false) {
       let curName = '';
       if (this.data.length === 1) {
         return '';
       }
-      const idx = this.data.findIndex((tab) => tab.link === link);
+      const idx = this.data.findIndex((tab) =>
+        endsWith ? tab.link.endsWith(link) : tab.link === link,
+      );
       if (idx === -1) {
         return '';
       }

packages/toolkits/pro/template/tinyvue/src/views/locale/components/add-locale.vue

@@ -4,14 +4,19 @@
       {{ $t('locale.add.btn') }}
     </tiny-button>
     <tiny-dialog-box v-model:visible="open" :title="$t('locale.add.title')">
-      <tiny-form>
-        <tiny-form-item :label="$t('locale.add.key')">
+      <tiny-form
+        ref="localeForm"
+        :model="locale"
+        :rules="rules"
+        label-position="top"
+      >
+        <tiny-form-item :label="$t('locale.add.key')" prop="key">
           <tiny-input v-model="locale.key" />
         </tiny-form-item>
-        <tiny-form-item :label="$t('locale.add.content')">
+        <tiny-form-item :label="$t('locale.add.content')" prop="content">
           <tiny-input v-model="locale.content" />
         </tiny-form-item>
-        <tiny-form-item :label="$t('locale.add.lang')">
+        <tiny-form-item :label="$t('locale.add.lang')" prop="lang">
           <tiny-select v-model="locale.lang">
             <tiny-option
               v-for="item of langes"
@@ -22,8 +27,8 @@
           </tiny-select>
           <tiny-popover>
             <div>
-              <tiny-form>
-                <tiny-form-item :label="$t('lang.add.title')">
+              <tiny-form ref="langForm" :model="lang" :rules="langRule">
+                <tiny-form-item :label="$t('lang.add.title')" prop="name">
                   <tiny-input v-model="lang.name" />
                 </tiny-form-item>
                 <tiny-button @click="addLang">
@@ -79,12 +84,14 @@
     Option as TinyOption,
     Popover as TinyPopover,
   } from '@opentiny/vue';
-  import { computed, reactive } from 'vue';
+  import { computed, reactive, ref } from 'vue';
   import { useI18n } from 'vue-i18n';
   import langTable from './lang-table.vue';
 
   const { open, onOpen, onClose } = useDisclosure();
   const { open: langTableOPen, onOpen: setLangTableOpen } = useDisclosure();
+  const localeForm = ref();
+  const langForm = ref();
   const locales = useLocales();
   const langes = computed(() => locales.lang);
   const locale = reactive<CreateLocal>({
@@ -94,44 +101,83 @@
   });
   const lang = reactive({ name: '' });
 
+  const rules = {
+    key: [
+      {
+        required: true,
+        trigger: 'blur',
+      },
+    ],
+    content: [
+      {
+        required: true,
+        trigger: 'blur',
+      },
+    ],
+    lang: [
+      {
+        required: true,
+        trigger: 'blur',
+      },
+    ],
+  };
+  const langRule = {
+    name: [
+      {
+        required: true,
+        trigger: 'blur',
+      },
+    ],
+  };
+
   const addLang = () => {
-    createLang({ name: lang.name })
-      .then(({ data }) => {
-        locales.pushLang(data);
+    langForm.value
+      .validate()
+      .then(() => {
+        createLang({ name: lang.name })
+          .then(({ data }) => {
+            locales.pushLang(data);
+          })
+          .catch((reason) => {
+            Notify({
+              type: 'error',
+              message: reason.response.data.message,
+            });
+          })
+          .finally(() => {
+            lang.name = '';
+            onClose();
+          });
       })
-      .catch((reason) => {
-        Notify({
-          type: 'error',
-          message: reason.data.message,
-        });
-      })
-      .finally(() => {
-        lang.name = '';
-        onClose();
-      });
+      .catch(() => {});
   };
 
   const i18 = useI18n();
 
   const addLocale = () => {
-    createLocalItem(locale)
-      .then(({ data }) => {
-        locale.key = '';
-        locale.content = '';
-        locale.lang = '' as any;
-        locales.pushLocale(data);
-        i18.mergeLocaleMessage(data.lang.name, {
-          [data.key]: data.content,
-        });
-      })
-      .catch((reason) => {
-        Notify({
-          type: 'error',
-          message: reason.response.data.message[0],
-        });
+    localeForm.value
+      .validate()
+      .then(() => {
+        createLocalItem(locale)
+          .then(({ data }) => {
+            locale.key = '';
+            locale.content = '';
+            locale.lang = '' as any;
+            locales.pushLocale(data);
+            i18.mergeLocaleMessage(data.lang.name, {
+              [data.key]: data.content,
+            });
+          })
+          .catch((reason) => {
+            Notify({
+              type: 'error',
+              message: reason.response.data.message,
+            });
+          })
+          .finally(() => {
+            onClose();
+          });
       })
-      .finally(() => {
-        onClose();
-      });
+      .catch(() => {});
   };
 </script>

packages/toolkits/pro/template/tinyvue/src/views/menu/info/components/add-menu.vue

@@ -1,5 +1,10 @@
 <template>
-  <tiny-form :rules="rules" :model="menuInfo">
+  <tiny-form
+    ref="menuForm"
+    :rules="rules"
+    :model="menuInfo"
+    label-position="top"
+  >
     <tiny-form-item :label="$t('menuInfo.table.name')" prop="name">
       <tiny-input v-model="menuInfo.name"></tiny-input>
     </tiny-form-item>
@@ -73,6 +78,8 @@
     children: TreeSelectMenu[];
   };
 
+  const menuForm = ref();
+
   // 校验规则
   const rulesType = {
     required: true,
@@ -147,5 +154,8 @@
             : Number(menuInfo.parentId),
       };
     },
+    valid: async () => {
+      return menuForm.value.validate();
+    },
   });
 </script>