initdata timeout

2023-06-29 14:57:23 +08:00
parent cd4ad39428
commit 5ef97e537f
3 changed files with 189 additions and 119 deletions
--- a/package.json
+++ b/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",
--- a/src/api/tenant/init.js
+++ b/src/api/tenant/init.js
@ -1,25 +1,25 @@
 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",
-        timeout: 0,
-    });
-}
+  return request({
+    url: `/tenant/init/initData/${tenantId}`,
+    method: "POST",
+    timeout: 0,
+  });
+};
--- a/src/views/tenant/initialize.vue
+++ b/src/views/tenant/initialize.vue
@ -1,24 +1,33 @@
 <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">
+    <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">
@ -28,17 +37,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 +62,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 +90,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 +135,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,41 +152,57 @@
        </el-row>
      </div>
      <template v-else-if="activeStep === 2">
-        <el-alert v-if="currentStepStatus === 0" :closable="false" show-icon type="error"
-        >错误码: {{ createTablesResult.result }}, 错误信息:
+        <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
-                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="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"
-        >错误码: {{ initDataResult.result }}, 错误信息:
+        <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
-                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 finish"
-                 @click="router.push({ path: '/tenant/tenant' })">完成
+            <div
+              v-else-if="currentStepStatus === 2"
+              class="circle-button finish"
+              @click="router.push({ path: '/tenant/tenant' })"
+            >
+              完成
            </div>
          </el-col>
        </el-row>
@ -186,21 +211,22 @@
  </div>
 </template>
 <script setup>
-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 { 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 {
-  router.push({path: "/tenant/tenant"});
+  router.push({ path: "/tenant/tenant" });
 }

 const data = reactive({
@ -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) => {
-    tenantInitCheckResult.value = resp;
-    if (resp.result === 200) {
+  check(tenantId.value)
+    .then((resp) => {
+      tenantInitCheckResult.value = resp;
+      if (resp.result === 200) {
+        currentStepStatus.value = 2;
+      } else {
+        currentStepStatus.value = 0;
+      }
+    })
+    .catch(() => {
      currentStepStatus.value = 2;
-    } else {
-      currentStepStatus.value = 0;
-    }
-  }).catch(() => {
-    currentStepStatus.value = 2;
-    activeStep.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) => {
-    createTablesResult.value = resp;
-    if (resp.result === 200) {
+  createTables(tenantId.value)
+    .then((resp) => {
+      createTablesResult.value = resp;
+      if (resp.result === 200) {
+        currentStepStatus.value = 2;
+      } else {
+        currentStepStatus.value = 0;
+      }
+    })
+    .catch(() => {
      currentStepStatus.value = 2;
-    } else {
-      currentStepStatus.value = 0;
-    }
-  }).catch(() => {
-    currentStepStatus.value = 2;
-    activeStep.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) => {
-    initDataResult.value = resp;
-    if (resp.result === 200) {
+  initData(tenantId.value)
+    .then((resp) => {
+      initDataResult.value = resp;
+      if (resp.result === 200) {
+        currentStepStatus.value = 2;
+      } else {
+        currentStepStatus.value = 0;
+      }
+    })
+    .catch(() => {
      currentStepStatus.value = 2;
-    } else {
-      currentStepStatus.value = 0;
-    }
-  }).catch(() => {
-    currentStepStatus.value = 2;
-    activeStep.value = 2;
-  });
+      activeStep.value = 2;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 };

 onMounted(() => {
  watchEffect(() => {
    let progressLineWidth =
-        ((activeStep.value - 1) * 100 +
-            Math.abs(currentStepStatus.value - 1) * 30 +
-            70)
-    progressLineWidth = progressLineWidth < 100 ? 0 : progressLineWidth
+      (activeStep.value - 1) * 100 +
+      Math.abs(currentStepStatus.value - 1) * 30 +
+      70;
+    progressLineWidth = progressLineWidth < 100 ? 0 : progressLineWidth;
    let progressLineColor;
    if (currentStepStatus.value === 0) {
      const percent = ((activeStep.value - 1) / activeStep.value) * 100;
@ -276,11 +320,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>
@ -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>