优化密码验证及代码生成loading

Author: HGthecode

src/components/Generator/Index.vue

@@ -41,12 +41,13 @@
         :ref="setTableRef"
         :data="item.default_fields"
         :option="item"
+        :index="index"
         :fieldTypes="currentGenerator.table.field_types"
       />
     </div>
     <template #footer>
       <a-button danger ghost @click="onCancelModal">{{ t("common.cancel") }}</a-button>
-      <a-button type="primary" @click="handleOk">{{ t("common.ok") }}</a-button>
+      <a-button :loading="loading" type="primary" @click="handleOk">{{ t("common.ok") }}</a-button>
     </template>
   </a-modal>
 </template>
@@ -67,6 +68,7 @@ import {
   Menu,
   Checkbox,
   notification,
+  Spin,
 } from "ant-design-vue";
 import useModal from "@/hooks/useModal";
 import { useStore } from "vuex";
@@ -109,6 +111,7 @@ export default defineComponent({
     [Menu.name]: Menu,
     [Menu.Item.name]: Menu.Item,
     [Checkbox.name]: Checkbox,
+    [Spin.name]: Spin,
     DataForm,
     DataTableEditor,
     FilesEditor,
@@ -120,10 +123,11 @@ export default defineComponent({
     const { visible, onShow, onCancel } = useModal();
     const formRef = ref();
     const filesRef = ref();
-    let tableRefs: any = [];
+    let tableRefs: any = {};
     const setTableRef = (el: any) => {
       if (el) {
-        tableRefs.push(el);
+        const index = el.$attrs.index;
+        tableRefs[index] = el;
       }
     };
 
@@ -154,74 +158,86 @@ export default defineComponent({
       formData: formData,
       formItems: formItems,
       tableItems: tableItems,
+      loading: false,
     });
 
     async function handleOk() {
-      const formValues = await formRef.value.onSubmit();
+      state.loading = true;
 
-      const fileDatas = filesRef.value.getData();
-      if (!fileDatas) {
-        return;
-      }
+      try {
+        const formValues = await formRef.value.onSubmit();
 
-      let tables = [];
-      if (tableRefs && tableRefs.length) {
-        let isError = false;
-        for (let i = 0; i < tableRefs.length; i++) {
-          const tableItem: any = tableRefs[i];
-          if (tableItem && tableItem.getData) {
-            const tableData = tableItem.getData();
-            if (tableData) {
-              tables.push(tableData);
-            } else {
-              isError = true;
-              break;
-            }
-          }
-        }
-        if (isError) {
+        const fileDatas = filesRef.value.getData();
+        if (!fileDatas) {
+          state.loading = false;
           return;
         }
-      }
 
-      const json = {
-        index: state.currentIndex,
-        form: formValues,
-        files: fileDatas,
-        tables: tables,
-      };
+        let tables = [];
 
-      generator(json)
-        .then(() => {
-          message.success(t("generator.submitSuccess"));
-          onCancelModal();
-          emit("submitSuccess");
-        })
-        .catch((err) => {
-          if (err.response) {
-            const message =
-              err.response && err.response.data && err.response.data.message
-                ? err.response.data.message
-                : err.message;
-            notification.error({
-              message: err.response.status,
-              description: message,
-            });
-          } else {
-            notification.error({
-              message: err.response.status,
-              description: err.message,
-            });
+        if (Object.keys(tableRefs).length) {
+          let isError = false;
+          for (const key in tableRefs) {
+            const tableItem: any = tableRefs[key];
+            if (tableItem && tableItem.getData) {
+              const tableData = tableItem.getData();
+              if (tableData) {
+                tables.push(tableData);
+              } else {
+                isError = true;
+                break;
+              }
+            }
+          }
+          if (isError) {
+            state.loading = false;
+            return;
           }
-        });
+        }
+
+        const json = {
+          index: state.currentIndex,
+          form: formValues,
+          files: fileDatas,
+          tables: tables,
+        };
+
+        generator(json)
+          .then(() => {
+            message.success(t("generator.submitSuccess"));
+            state.loading = false;
+            onCancelModal();
+            emit("submitSuccess");
+          })
+          .catch((err) => {
+            state.loading = false;
+            if (err.response) {
+              const message =
+                err.response && err.response.data && err.response.data.message
+                  ? err.response.data.message
+                  : err.message;
+              notification.error({
+                message: err.response.status,
+                description: message,
+              });
+            } else {
+              notification.error({
+                message: err.response.status,
+                description: err.message,
+              });
+            }
+          });
+      } catch (error) {
+        state.loading = false;
+      }
     }
 
     /**
      * 监听表单的App选择
      */
     function onAppChange(appKey: string) {
       state.currentAppKey = appKey;
-      tableRefs = [];
+      tableRefs = {};
       const appConfig = getAppsConfigItemByKey(state.config.apps as ConfigAppItem[], appKey);
       if (appConfig as ConfigAppItem) {
         const groups = appConfig?.groups as ConfigAppGroupItem[];
@@ -248,7 +264,7 @@ export default defineComponent({
 
     function handleMenuClick(e: MenuInfo) {
       state.currentIndex = e.key;
-      tableRefs = [];
+      tableRefs = {};
       const generatorFind = state.config.generator && state.config.generator[e.key as number];
       if (generatorFind) {
         state.modalTitle = `${t("generator.title")} - ${generatorFind.title}`;

src/components/Menu/src/BasicMenu.vue

@@ -182,7 +182,6 @@ export default defineComponent({
     watch(
       () => route.fullPath,
       (v) => {
-        console.log(state.selectedKeys, route.query, v);
         if (route.query.key) {
           state.selectedKeys = [route.query.key as string];
         } else {

src/components/VerifyAuth/Index.vue

@@ -9,6 +9,7 @@
   >
     <div>
       <a-input-password
+        ref="inputRef"
         :placeholder="t('auth.input.placeholder')"
         size="large"
         :allowClear="true"
@@ -23,48 +24,56 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, watchEffect, unref } from "vue";
+import { defineComponent, computed, ref, onMounted, unref } from "vue";
 import { Modal, Input, Button, message } from "ant-design-vue";
 import useModal from "@/hooks/useModal";
-import { useStore } from "vuex";
-import { GlobalState } from "@/store";
 import md5 from "js-md5";
 import { checkAuth } from "@/api";
 import { getTreePathByKeys } from "@/utils/helper/treeHelper";
 import * as ApidocTypes from "@/store/modules/Apidoc/types";
 import { useI18n } from "@/hooks/useI18n";
+import store from "@/store";
 
 export default defineComponent({
   components: {
     [Modal.name]: Modal,
     [Button.name]: Button,
     [Input.Password.name]: Input.Password,
   },
+  props: {
+    onSuccess: {
+      type: Function,
+      default: () => {
+        return;
+      },
+    },
+  },
   emits: ["check"],
   setup(props, { emit }) {
     const { t } = useI18n();
-    const store = useStore<GlobalState>();
     const { visible, onShow, onCancel } = useModal();
     const password = ref<string>("");
-    const appKey = computed(() => store.state.app.appKey);
-    const config = computed(() => store.state.app.config);
-    const authData = computed(() => store.state.apidoc.authData);
+    const appKey = store.getters["app/appKey"];
+    const config = store.getters["app/config"];
+    const authData = store.getters["apidoc/authData"];
+    const inputRef = ref<HTMLElement | null>(null);
 
     function handleOk() {
       checkAuth({
-        appKey: appKey.value,
+        appKey: appKey,
         password: md5(password.value),
       }).then((res) => {
         if (res.data.code !== 0 || !(res.data.data && res.data.data.token)) {
           res.data.msg && message.error(res.data.msg);
           return false;
         }
+
         const token = res.data.data.token;
         let tokenKey = "global";
-        const appKeys = appKey.value.split(",");
-        if (config.value.apps) {
+        const appKeys = appKey.split(",");
+        if (config.apps) {
           const appPath = getTreePathByKeys(
-            config.value.apps,
+            config.apps,
             appKeys,
             appKeys[0],
             [],
@@ -75,28 +84,33 @@ export default defineComponent({
           if (appPath && appPath.length) {
             const appConfig = appPath[appPath.length - 1];
             if (appConfig.hasPassword) {
-              tokenKey = appKey.value;
+              tokenKey = appKey;
             }
           }
         }
         const json = {
-          ...authData.value,
+          ...authData,
           [tokenKey]: token,
         };
         store.dispatch(`apidoc/${ApidocTypes.SET_AUTH_DATA}`, json);
-        emit("check");
         password.value = "";
-        onCancel();
+        props.onSuccess();
       });
     }
-
+    onMounted(() => {
+      onShow();
+      setTimeout(() => {
+        unref(inputRef) && (unref(inputRef) as any).focus();
+      }, 500);
+    });
     return {
       visible,
       onShow,
       onCancel,
       password,
       handleOk,
       t,
+      inputRef,
     };
   },
 });

src/components/VerifyAuth/index.ts

@@ -1,3 +1,33 @@
-import VerifyAuth from "./Index.vue";
+// import VerifyAuth from "./Index.vue";
 
-export default VerifyAuth;
+// export default VerifyAuth;
+
+import { createApp } from "vue";
+import Modal from "./Index.vue";
+function modal(props: any): any {
+  return new Promise((resolve, reject) => {
+    // 实例化组件，createApp第二个参数是props
+    const confirmInstance = createApp(Modal, {
+      ...props,
+      onSuccess: (res: any) => {
+        unmount();
+        resolve(res);
+      },
+      onCancel: () => {
+        unmount();
+        reject(new Error());
+      },
+    });
+    // 卸载组件
+    const unmount = () => {
+      confirmInstance.unmount();
+      document.body.removeChild(parentNode);
+    };
+    // 创建一个挂载容器
+    const parentNode = document.createElement("div");
+    document.body.appendChild(parentNode);
+    // 挂载组件
+    confirmInstance.mount(parentNode);
+  });
+}
+export default modal;