From 5205b261479fc67283ded521c15db4b6d1d19665 Mon Sep 17 00:00:00 2001
From: ailanyin <ailanyin4j@163.com>
Date: Thu, 29 Jun 2023 11:19:07 +0800
Subject: [PATCH] bugfix

---
 src/api/tenant/init.js          |  24 +++--
 src/views/tenant/initialize.vue | 168 ++++++++++++++++++++------------
 2 files changed, 123 insertions(+), 69 deletions(-)

diff --git a/src/api/tenant/init.js b/src/api/tenant/init.js
index df3f69e..36ebd96 100644
--- a/src/api/tenant/init.js
+++ b/src/api/tenant/init.js
@@ -1,16 +1,24 @@
 import request from "@/utils/request";
 
 export const check = (tenantId) => {
-  return request({
-    url: `/tenant/init/check/${tenantId}`,
-    method: "POST",
-  });
+    return request({
+        url: `/tenant/init/check/${tenantId}`,
+        method: "POST",
+    });
 };
 
 // /tenant/init/createTables/{tenantId}
 export const createTables = (tenantId) => {
-  return request({
-    url: `/tenant/init/createTables/${tenantId}`,
-    method: "POST",
-  });
+    return request({
+        url: `/tenant/init/createTables/${tenantId}`,
+        method: "POST",
+    });
 };
+
+// /tenant/init/initData/{tenantId}
+export const initData = (tenantId) => {
+    return request({
+        url: `/tenant/init/initData/${tenantId}`,
+        method: "POST",
+    });
+}
\ No newline at end of file
diff --git a/src/views/tenant/initialize.vue b/src/views/tenant/initialize.vue
index 95fa23b..b5dad07 100644
--- a/src/views/tenant/initialize.vue
+++ b/src/views/tenant/initialize.vue
@@ -1,22 +1,22 @@
 <template>
   <div class="app-container">
     <el-steps
-      :active="activeStep"
-      :process-status="
+        :active="activeStep"
+        :process-status="
         currentStepStatus === 0
           ? 'error'
           : currentStepStatus === 1
           ? 'process'
           : 'success'
       "
-      align-center
-      class="init-steps"
-      finish-status="success"
+        align-center
+        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 description="初始化开始" title="开始"/>
+      <el-step description="步骤描述" title="检查"/>
+      <el-step description="步骤描述" title="步骤2"/>
+      <el-step description="步骤描述" title="步骤3"/>
     </el-steps>
     <div class="steps-content">
       <div v-if="activeStep === 0" class="start-step">
@@ -28,17 +28,17 @@
       </div>
       <div v-else-if="activeStep === 1">
         <el-alert
-          v-if="currentStepStatus === 0"
-          :closable="false"
-          :type="
+            v-if="currentStepStatus === 0"
+            :closable="false"
+            :type="
             currentStepStatus === 0
               ? 'error'
               : currentStepStatus === 1
               ? 'info'
               : 'success'
           "
-          show-icon
-          >错误码: {{ tenantInitCheckResult.result }}, 错误信息:
+            show-icon
+        >错误码: {{ tenantInitCheckResult.result }}, 错误信息:
           {{ tenantInitCheckResult.msg }}
         </el-alert>
         <el-row style="margin-top: 36px">
@@ -53,26 +53,26 @@
                 <div class="card-content-item">
                   <span class="card-content-item-title">租户名称:</span>
                   <span class="card-content-item-value">{{
-                    tenantInitCheckResult.tenantName
-                  }}</span>
+                      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>
+                      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"
+                v-if="tenantInitCheckResult.datasource"
+                class="data-card init-check-base-data"
+                style="margin-left: 24px"
             >
               <div class="card-title">
                 <span>数据源数据</span>
@@ -81,43 +81,43 @@
                 <div class="card-content-item">
                   <span class="card-content-item-title">数据库IP:</span>
                   <span class="card-content-item-value">{{
-                    tenantInitCheckResult.datasource.ip
-                  }}</span>
+                      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>
+                      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>
+                      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>
+                      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>
+                      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>
+                      tenantInitCheckResult.datasource.password
+                    }}</span>
                 </div>
               </div>
             </div>
@@ -126,16 +126,16 @@
         <el-row justify="center" style="margin-top: 24px">
           <el-col :span="1.5">
             <div
-              v-if="currentStepStatus === 0"
-              class="circle-button error"
-              @click="router.push({ path: '/tenant/tenant' })"
+                v-if="currentStepStatus === 0"
+                class="circle-button error"
+                @click="router.push({ path: '/tenant/tenant' })"
             >
               关闭
             </div>
             <div
-              v-else-if="currentStepStatus === 2"
-              class="circle-button"
-              @click="createDatabase"
+                v-else-if="currentStepStatus === 2"
+                class="circle-button"
+                @click="createDatabase"
             >
               创建库
             </div>
@@ -143,20 +143,42 @@
         </el-row>
       </div>
       <template v-else-if="activeStep === 2">
-        <el-alert :closable="false" show-icon type="error"
-          >错误码: {{ createTablesResult.result }}, 错误信息:
-          {{ createTablesResult.msg }}</el-alert
+        <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-col :span="1.5">
-            <div class="circle-button" @click="activeStep = 3">步骤2</div>
+            <div
+                v-if="currentStepStatus === 0"
+                class="circle-button error"
+                @click="router.push({ path: '/tenant/tenant' })"
+            >
+              关闭
+            </div>
+            <div v-else-if="currentStepStatus === 2" class="circle-button" @click="importData">导入数据</div>
           </el-col>
         </el-row>
       </template>
       <template v-else-if="activeStep === 3">
-        <el-row justify="center">
+        <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-col :span="1.5">
-            <div class="circle-button" @click="activeStep = 4">步骤3</div>
+            <div
+                v-if="currentStepStatus === 0"
+                class="circle-button error"
+                @click="router.push({ path: '/tenant/tenant' })"
+            >
+              关闭
+            </div>
+            <div v-else-if="currentStepStatus===2" class="circle-button finish"
+                 @click="router.push({ path: '/tenant/tenant' })">完成
+            </div>
           </el-col>
         </el-row>
       </template>
@@ -164,10 +186,10 @@
   </div>
 </template>
 <script setup>
-import { onMounted, reactive, ref, toRefs, watchEffect } from "vue";
-import { check, createTables } from "@/api/tenant/init";
-import { useRoute, useRouter } from "vue-router";
-import { tenantModeDict } from "@/constant/dict";
+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";
 
 const route = useRoute();
 const router = useRouter();
@@ -178,15 +200,16 @@ const tenantId = ref(undefined);
 if (route.query.id) {
   tenantId.value = route.query.id;
 } else {
-  router.push({ path: "/tenant/tenant" });
+  router.push({path: "/tenant/tenant"});
 }
 
 const data = reactive({
   tenantInitCheckResult: {},
   createTablesResult: {},
+  initDataResult: {},
 });
 
-const { tenantInitCheckResult, createTablesResult } = toRefs(data);
+const {tenantInitCheckResult, createTablesResult, initDataResult} = toRefs(data);
 const tenantInitCheck = () => {
   activeStep.value = 1;
   currentStepStatus.value = 1;
@@ -197,10 +220,13 @@ const tenantInitCheck = () => {
     } else {
       currentStepStatus.value = 0;
     }
+  }).catch(() => {
+    currentStepStatus.value = 2;
+    activeStep.value = 2;
   });
 };
 
-//  创建数据库
+//  第二步: 创建数据库
 const createDatabase = () => {
   activeStep.value = 2;
   currentStepStatus.value = 1;
@@ -211,15 +237,35 @@ const createDatabase = () => {
     } else {
       currentStepStatus.value = 0;
     }
+  }).catch(() => {
+    currentStepStatus.value = 2;
+    activeStep.value = 2;
+  });
+};
+
+// 第三步,导入数据
+const importData = () => {
+  activeStep.value = 3;
+  currentStepStatus.value = 1;
+  initData(tenantId.value).then((resp) => {
+    initDataResult.value = resp;
+    if (resp.result === 200) {
+      currentStepStatus.value = 2;
+    } else {
+      currentStepStatus.value = 0;
+    }
+  }).catch(() => {
+    currentStepStatus.value = 2;
+    activeStep.value = 2;
   });
 };
 
 onMounted(() => {
   watchEffect(() => {
     const progressLineWidth =
-      (activeStep.value - 1) * 100 +
-      Math.abs(currentStepStatus.value - 1) * 50 +
-      50;
+        (activeStep.value - 1) * 100 +
+        Math.abs(currentStepStatus.value - 1) * 50 +
+        50;
 
     let progressLineColor;
     if (currentStepStatus.value === 0) {
@@ -230,11 +276,11 @@ onMounted(() => {
       progressLineColor = `linear-gradient(to right, #67c23a ${100}%, #f56c6c ${100}%)`;
     }
     document
-      .querySelector(".app-container")
-      .style.setProperty("--progress-line-color", progressLineColor);
+        .querySelector(".app-container")
+        .style.setProperty("--progress-line-color", progressLineColor);
     document
-      .querySelector(".app-container")
-      .style.setProperty("--progress-line-width", progressLineWidth + "%");
+        .querySelector(".app-container")
+        .style.setProperty("--progress-line-width", progressLineWidth + "%");
   });
 });
 </script>