initdata timeout

package.json

@@ -33,7 +33,8 @@
     "v3-infinite-loading": "^1.2.2",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
-    "vue-router": "4.1.4"
+    "vue-router": "4.1.4",
+    "vue-spinner": "^1.0.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",

src/api/tenant/init.js

@@ -22,4 +22,4 @@ export const initData = (tenantId) => {
     method: "POST",
     timeout: 0,
   });
-}
+};

src/views/tenant/initialize.vue

@@ -18,7 +18,16 @@
       <el-step description="步骤描述" title="步骤2" />
       <el-step description="步骤描述" title="步骤3" />
     </el-steps>
-    <div class="steps-content">
+    <el-row v-if="loading" justify="center">
+      <el-col :span="1.5">
+        <div class="btn-loading">
+          <el-icon size="80">
+            <refresh />
+          </el-icon>
+        </div>
+      </el-col>
+    </el-row>
+    <div v-else class="steps-content">
       <div v-if="activeStep === 0" class="start-step">
         <el-row justify="center">
           <el-col :span="1.5">
@@ -143,11 +152,14 @@
         </el-row>
       </div>
       <template v-else-if="activeStep === 2">
-        <el-alert v-if="currentStepStatus === 0" :closable="false" show-icon type="error"
+        <el-alert
+          v-if="currentStepStatus === 0"
+          :closable="false"
+          show-icon
+          type="error"
           >错误码: {{ createTablesResult.result }}, 错误信息:
           {{ createTablesResult.msg }}
-        </el-alert
+        </el-alert>
-        >
         <el-row justify="center" style="margin-top: 24px">
           <el-col :span="1.5">
             <div
@@ -157,16 +169,25 @@
             >
               关闭
             </div>
-            <div v-else-if="currentStepStatus === 2" class="circle-button" @click="importData">导入数据</div>
+            <div
+              v-else-if="currentStepStatus === 2"
+              class="circle-button"
+              @click="importData"
+            >
+              <span>导入数据</span>
+            </div>
           </el-col>
         </el-row>
       </template>
       <template v-else-if="activeStep === 3">
-        <el-alert v-if="currentStepStatus === 0" :closable="false" show-icon type="error"
+        <el-alert
+          v-if="currentStepStatus === 0"
+          :closable="false"
+          show-icon
+          type="error"
           >错误码: {{ initDataResult.result }}, 错误信息:
           {{ initDataResult.msg }}
-        </el-alert
+        </el-alert>
-        >
         <el-row justify="center" style="margin-top: 24px">
           <el-col :span="1.5">
             <div
@@ -176,8 +197,12 @@
             >
               关闭
             </div>
-            <div v-else-if="currentStepStatus===2" class="circle-button finish"
+            <div
-                 @click="router.push({ path: '/tenant/tenant' })">完成
+              v-else-if="currentStepStatus === 2"
+              class="circle-button finish"
+              @click="router.push({ path: '/tenant/tenant' })"
+            >
+              完成
             </div>
           </el-col>
         </el-row>
@@ -190,13 +215,14 @@ import {onMounted, reactive, ref, toRefs, watchEffect} from "vue";
 import { check, createTables, initData } from "@/api/tenant/init";
 import { useRoute, useRouter } from "vue-router";
 import { tenantModeDict } from "@/constant/dict";
+import { RefreshRight, Refresh } from "@element-plus/icons-vue";
 
 const route = useRoute();
 const router = useRouter();
 const activeStep = ref(0);
 const currentStepStatus = ref(1); // 0: error 1: process 2: finish
 const tenantId = ref(undefined);
-
+const loading = ref(false);
 if (route.query.id) {
   tenantId.value = route.query.id;
 } else {
@@ -209,64 +235,82 @@ const data = reactive({
   initDataResult: {},
 });
 
-const {tenantInitCheckResult, createTablesResult, initDataResult} = toRefs(data);
+const { tenantInitCheckResult, createTablesResult, initDataResult } =
+  toRefs(data);
 const tenantInitCheck = () => {
   activeStep.value = 1;
   currentStepStatus.value = 1;
-  check(tenantId.value).then((resp) => {
+  check(tenantId.value)
+    .then((resp) => {
       tenantInitCheckResult.value = resp;
       if (resp.result === 200) {
         currentStepStatus.value = 2;
       } else {
         currentStepStatus.value = 0;
       }
-  }).catch(() => {
+    })
+    .catch(() => {
       currentStepStatus.value = 2;
       activeStep.value = 2;
+    })
+    .finally(() => {
+      loading.value = false;
     });
 };
 
 //  第二步: 创建数据库
 const createDatabase = () => {
+  loading.value = true;
   activeStep.value = 2;
   currentStepStatus.value = 1;
-  createTables(tenantId.value).then((resp) => {
+  createTables(tenantId.value)
+    .then((resp) => {
       createTablesResult.value = resp;
       if (resp.result === 200) {
         currentStepStatus.value = 2;
       } else {
         currentStepStatus.value = 0;
       }
-  }).catch(() => {
+    })
+    .catch(() => {
       currentStepStatus.value = 2;
       activeStep.value = 2;
+    })
+    .finally(() => {
+      loading.value = false;
     });
 };
 
 // 第三步,导入数据
 const importData = () => {
+  loading.value = true;
   activeStep.value = 3;
   currentStepStatus.value = 1;
-  initData(tenantId.value).then((resp) => {
+  initData(tenantId.value)
+    .then((resp) => {
       initDataResult.value = resp;
       if (resp.result === 200) {
         currentStepStatus.value = 2;
       } else {
         currentStepStatus.value = 0;
       }
-  }).catch(() => {
+    })
+    .catch(() => {
       currentStepStatus.value = 2;
       activeStep.value = 2;
+    })
+    .finally(() => {
+      loading.value = false;
     });
 };
 
 onMounted(() => {
   watchEffect(() => {
     let progressLineWidth =
-        ((activeStep.value - 1) * 100 +
+      (activeStep.value - 1) * 100 +
       Math.abs(currentStepStatus.value - 1) * 30 +
-            70)
+      70;
-    progressLineWidth = progressLineWidth < 100 ? 0 : progressLineWidth
+    progressLineWidth = progressLineWidth < 100 ? 0 : progressLineWidth;
     let progressLineColor;
     if (currentStepStatus.value === 0) {
       const percent = ((activeStep.value - 1) / activeStep.value) * 100;
@@ -337,6 +381,22 @@ onMounted(() => {
   }
 }
 
+.btn-loading {
+  margin-top: 80px;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: #409eff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .el-icon {
+    animation: spin 1s linear infinite;
+    color: white;
+  }
+}
+
 .circle-button {
   width: 100px;
   height: 100px;
@@ -438,4 +498,13 @@ onMounted(() => {
     }
   }
 }
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>