From 91979abf3de29943870e4cac78bf552a37b957ca Mon Sep 17 00:00:00 2001
From: ailanyin <ailanyin4j@163.com>
Date: Thu, 29 Jun 2023 16:32:52 +0800
Subject: [PATCH] bugfix

---
 src/api/tenant/init.js          |   1 +
 src/views/tenant/initialize.vue | 305 +++++++++++++++++---------------
 2 files changed, 167 insertions(+), 139 deletions(-)

diff --git a/src/api/tenant/init.js b/src/api/tenant/init.js
index 695c0b6..5143d94 100644
--- a/src/api/tenant/init.js
+++ b/src/api/tenant/init.js
@@ -12,6 +12,7 @@ export const createTables = (tenantId) => {
   return request({
     url: `/tenant/init/createTables/${tenantId}`,
     method: "POST",
+    // timeout:1
   });
 };
 
diff --git a/src/views/tenant/initialize.vue b/src/views/tenant/initialize.vue
index 300f9a8..9ec342b 100644
--- a/src/views/tenant/initialize.vue
+++ b/src/views/tenant/initialize.vue
@@ -13,11 +13,132 @@
       class="init-steps"
       finish-status="success"
     >
-      <el-step description="初始化开始" title="开始" />
-      <el-step description="步骤描述" title="检查" />
-      <el-step description="步骤描述" title="步骤2" />
-      <el-step description="步骤描述" title="步骤3" />
+      <el-step title="开始" />
+      <el-step title="检查" />
+      <el-step title="步骤2" />
+      <el-step title="步骤3" />
     </el-steps>
+
+    <!--  错误提示  -->
+    <el-alert
+      v-if="currentStepStatus === 0"
+      :closable="false"
+      :type="
+        currentStepStatus === 0
+          ? 'error'
+          : currentStepStatus === 1
+          ? 'info'
+          : 'success'
+      "
+      show-icon
+      >{{
+        activeStep.value === 1
+          ? "错误码: " +
+            tenantInitCheckResult.result +
+            ", 错误信息: " +
+            tenantInitCheckResult.msg
+          : activeStep.value === 2
+          ? "错误码: " +
+            createTablesResult.result +
+            ", 错误信息: " +
+            createTablesResult.msg
+          : activeStep.value === 3
+          ? "错误码: " +
+            initDataResult.result +
+            ", 错误信息: " +
+            initDataResult.msg
+          : ""
+      }}
+    </el-alert>
+
+    <!--  数据库配置信息  -->
+    <el-row
+      v-if="Object.keys(tenantInitCheckResult).length"
+      style="margin: 36px 36px 0"
+    >
+      <el-col :span="12">
+        <div class="data-card init-check-base-data">
+          <!-- 卡片左上角小标题, 覆盖在边框上 -->
+          <div class="card-title">
+            <span>基础数据</span>
+          </div>
+          <!-- 左边是标题,右边是值, 标题加粗黑色, 值比标题略小,略灰, -->
+          <div class="card-content">
+            <div class="card-content-item">
+              <span class="card-content-item-title">租户名称:</span>
+              <span class="card-content-item-value">{{
+                tenantInitCheckResult.tenantName
+              }}</span>
+            </div>
+            <!--模式-->
+            <div class="card-content-item">
+              <span class="card-content-item-title">模式:</span>
+              <span class="card-content-item-value">{{
+                tenantModeDict.find(
+                  (item) => item.value === tenantInitCheckResult.mode
+                )?.label
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div
+          v-if="tenantInitCheckResult.datasource"
+          class="data-card init-check-base-data"
+          style="margin-left: 24px"
+        >
+          <div class="card-title">
+            <span>数据源数据</span>
+          </div>
+          <div class="card-content">
+            <div class="card-content-item">
+              <span class="card-content-item-title">数据库IP:</span>
+              <span class="card-content-item-value">{{
+                tenantInitCheckResult.datasource.ip
+              }}</span>
+            </div>
+            <!--                端口-->
+            <div class="card-content-item">
+              <span class="card-content-item-title">端口:</span>
+              <span class="card-content-item-value">{{
+                tenantInitCheckResult.datasource.port
+              }}</span>
+            </div>
+            <!--模式-->
+            <div class="card-content-item">
+              <span class="card-content-item-title">类型:</span>
+              <span class="card-content-item-value">{{
+                tenantInitCheckResult.datasource.type
+              }}</span>
+            </div>
+            <!--                数据库名称-->
+            <div class="card-content-item">
+              <span class="card-content-item-title">数据库名称:</span>
+              <span class="card-content-item-value">{{
+                tenantInitCheckResult.datasource.dbName
+              }}</span>
+            </div>
+            <!--                用户名-->
+            <div class="card-content-item">
+              <span class="card-content-item-title">用户名:</span>
+              <span class="card-content-item-value">{{
+                tenantInitCheckResult.datasource.username
+              }}</span>
+            </div>
+            <!--                密码-->
+            <div class="card-content-item">
+              <span class="card-content-item-title">密码:</span>
+              <span class="card-content-item-value">{{
+                tenantInitCheckResult.datasource.password
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!--  spinner  -->
     <el-row v-if="loading" justify="center">
       <el-col :span="1.5">
         <div class="btn-loading">
@@ -27,112 +148,17 @@
         </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">
-            <div class="circle-button" @click="tenantInitCheck">开始</div>
+            <div class="circle-button" @click="initTenant">开始</div>
           </el-col>
         </el-row>
       </div>
       <div v-else-if="activeStep === 1">
-        <el-alert
-          v-if="currentStepStatus === 0"
-          :closable="false"
-          :type="
-            currentStepStatus === 0
-              ? 'error'
-              : currentStepStatus === 1
-              ? 'info'
-              : 'success'
-          "
-          show-icon
-          >错误码: {{ tenantInitCheckResult.result }}, 错误信息:
-          {{ tenantInitCheckResult.msg }}
-        </el-alert>
-        <el-row style="margin-top: 36px">
-          <el-col :span="12">
-            <div class="data-card init-check-base-data">
-              <!-- 卡片左上角小标题, 覆盖在边框上 -->
-              <div class="card-title">
-                <span>基础数据</span>
-              </div>
-              <!-- 左边是标题,右边是值, 标题加粗黑色, 值比标题略小,略灰, -->
-              <div class="card-content">
-                <div class="card-content-item">
-                  <span class="card-content-item-title">租户名称:</span>
-                  <span class="card-content-item-value">{{
-                    tenantInitCheckResult.tenantName
-                  }}</span>
-                </div>
-                <!--模式-->
-                <div class="card-content-item">
-                  <span class="card-content-item-title">模式:</span>
-                  <span class="card-content-item-value">{{
-                    tenantModeDict.find(
-                      (item) => item.value === tenantInitCheckResult.mode
-                    )?.label
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </el-col>
-          <el-col :span="12">
-            <div
-              v-if="tenantInitCheckResult.datasource"
-              class="data-card init-check-base-data"
-              style="margin-left: 24px"
-            >
-              <div class="card-title">
-                <span>数据源数据</span>
-              </div>
-              <div class="card-content">
-                <div class="card-content-item">
-                  <span class="card-content-item-title">数据库IP:</span>
-                  <span class="card-content-item-value">{{
-                    tenantInitCheckResult.datasource.ip
-                  }}</span>
-                </div>
-                <!--                端口-->
-                <div class="card-content-item">
-                  <span class="card-content-item-title">端口:</span>
-                  <span class="card-content-item-value">{{
-                    tenantInitCheckResult.datasource.port
-                  }}</span>
-                </div>
-                <!--模式-->
-                <div class="card-content-item">
-                  <span class="card-content-item-title">类型:</span>
-                  <span class="card-content-item-value">{{
-                    tenantInitCheckResult.datasource.type
-                  }}</span>
-                </div>
-                <!--                数据库名称-->
-                <div class="card-content-item">
-                  <span class="card-content-item-title">数据库名称:</span>
-                  <span class="card-content-item-value">{{
-                    tenantInitCheckResult.datasource.dbName
-                  }}</span>
-                </div>
-                <!--                用户名-->
-                <div class="card-content-item">
-                  <span class="card-content-item-title">用户名:</span>
-                  <span class="card-content-item-value">{{
-                    tenantInitCheckResult.datasource.username
-                  }}</span>
-                </div>
-                <!--                密码-->
-                <div class="card-content-item">
-                  <span class="card-content-item-title">密码:</span>
-                  <span class="card-content-item-value">{{
-                    tenantInitCheckResult.datasource.password
-                  }}</span>
-                </div>
-              </div>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row justify="center" style="margin-top: 24px">
+        <el-row justify="center">
           <el-col :span="1.5">
             <div
               v-if="currentStepStatus === 0"
@@ -144,7 +170,7 @@
             <div
               v-else-if="currentStepStatus === 2"
               class="circle-button"
-              @click="createDatabase"
+              @click="initTenant"
             >
               创建库
             </div>
@@ -152,15 +178,7 @@
         </el-row>
       </div>
       <template v-else-if="activeStep === 2">
-        <el-alert
-          v-if="currentStepStatus === 0"
-          :closable="false"
-          show-icon
-          type="error"
-          >错误码: {{ createTablesResult.result }}, 错误信息:
-          {{ createTablesResult.msg }}
-        </el-alert>
-        <el-row justify="center" style="margin-top: 24px">
+        <el-row justify="center">
           <el-col :span="1.5">
             <div
               v-if="currentStepStatus === 0"
@@ -172,7 +190,7 @@
             <div
               v-else-if="currentStepStatus === 2"
               class="circle-button"
-              @click="importData"
+              @click="initTenant"
             >
               <span>导入数据</span>
             </div>
@@ -180,15 +198,7 @@
         </el-row>
       </template>
       <template v-else-if="activeStep === 3">
-        <el-alert
-          v-if="currentStepStatus === 0"
-          :closable="false"
-          show-icon
-          type="error"
-          >错误码: {{ initDataResult.result }}, 错误信息:
-          {{ initDataResult.msg }}
-        </el-alert>
-        <el-row justify="center" style="margin-top: 24px">
+        <el-row justify="center">
           <el-col :span="1.5">
             <div
               v-if="currentStepStatus === 0"
@@ -215,7 +225,7 @@ 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";
+import { Refresh } from "@element-plus/icons-vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -237,10 +247,25 @@ const data = reactive({
 
 const { tenantInitCheckResult, createTablesResult, initDataResult } =
   toRefs(data);
+
+const initTenant = async () => {
+  loading.value = true;
+  const promiseList = [tenantInitCheck, createDatabase, importData];
+  for (const promise of promiseList.slice(activeStep.value)) {
+    try {
+      await promise();
+    } catch (e) {
+      loading.value = false;
+      break;
+    }
+  }
+  loading.value = false;
+};
+
 const tenantInitCheck = () => {
   activeStep.value = 1;
   currentStepStatus.value = 1;
-  check(tenantId.value)
+  return check(tenantId.value)
     .then((resp) => {
       tenantInitCheckResult.value = resp;
       if (resp.result === 200) {
@@ -251,19 +276,17 @@ const tenantInitCheck = () => {
     })
     .catch(() => {
       currentStepStatus.value = 2;
-      activeStep.value = 2;
-    })
-    .finally(() => {
-      loading.value = false;
+      activeStep.value = 0;
+      throw new Error("租户初始化检查失败");
     });
 };
 
 //  第二步: 创建数据库
 const createDatabase = () => {
-  loading.value = true;
+  // loading.value = true;
   activeStep.value = 2;
   currentStepStatus.value = 1;
-  createTables(tenantId.value)
+  return createTables(tenantId.value)
     .then((resp) => {
       createTablesResult.value = resp;
       if (resp.result === 200) {
@@ -274,19 +297,17 @@ const createDatabase = () => {
     })
     .catch(() => {
       currentStepStatus.value = 2;
-      activeStep.value = 2;
-    })
-    .finally(() => {
-      loading.value = false;
+      activeStep.value = 1;
+      throw new Error("创建数据库失败");
     });
 };
 
 // 第三步,导入数据
 const importData = () => {
-  loading.value = true;
+  // loading.value = true;
   activeStep.value = 3;
   currentStepStatus.value = 1;
-  initData(tenantId.value)
+  return initData(tenantId.value)
     .then((resp) => {
       initDataResult.value = resp;
       if (resp.result === 200) {
@@ -298,9 +319,7 @@ const importData = () => {
     .catch(() => {
       currentStepStatus.value = 2;
       activeStep.value = 2;
-    })
-    .finally(() => {
-      loading.value = false;
+      throw new Error("导入数据失败");
     });
 };
 
@@ -507,4 +526,12 @@ onMounted(() => {
     transform: rotate(360deg);
   }
 }
+
+:deep(.el-step__head.is-success) {
+  transition: all 1s linear;
+}
+
+:deep(.el-step__title) {
+  font-size: 20px;
+}
 </style>