From a018802ee9e9e1b14b7a2bad8b85e7c27fb6a673 Mon Sep 17 00:00:00 2001
From: ailanyin <ailanyin4j@163.com>
Date: Tue, 27 Jun 2023 16:42:55 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1=2033.33333...%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/tenant/init.js          |   8 +
 src/views/tenant/index.vue      | 112 +++++++++-
 src/views/tenant/initialize.vue | 369 +++++++++++++++++++++++++++++++-
 3 files changed, 477 insertions(+), 12 deletions(-)
 create mode 100644 src/api/tenant/init.js

diff --git a/src/api/tenant/init.js b/src/api/tenant/init.js
new file mode 100644
index 0000000..2e40259
--- /dev/null
+++ b/src/api/tenant/init.js
@@ -0,0 +1,8 @@
+import request from "@/utils/request";
+
+export const check = (tenantId) => {
+  return request({
+    url: `/tenant/init/check/${tenantId}`,
+    method: "POST",
+  });
+};
diff --git a/src/views/tenant/index.vue b/src/views/tenant/index.vue
index 8bd8b26..f2003a2 100644
--- a/src/views/tenant/index.vue
+++ b/src/views/tenant/index.vue
@@ -334,8 +334,16 @@
             :min="1"
           />
         </el-form-item>
-        <el-form-item label="数据库名称" prop="name">
-          <el-input v-model="dataSourceForm.name" />
+        <el-form-item label="数据库名称" prop="dbName">
+          <el-input v-model="dataSourceForm.dbName" />
+        </el-form-item>
+        <!-- schemaName 模式名称 仅当数据库类型不是Mysql时显示   -->
+        <el-form-item
+          v-if="dataSourceForm.type !== 'MySQL'"
+          label="模式名称"
+          prop="schemaName"
+        >
+          <el-input v-model="dataSourceForm.schemaName" />
         </el-form-item>
         <el-form-item label="数据库账号" prop="username">
           <el-input v-model="dataSourceForm.username" />
@@ -343,13 +351,58 @@
         <el-form-item label="数据库密码" prop="password">
           <el-input v-model="dataSourceForm.password" />
         </el-form-item>
-        <el-form-item label="状态" prop="isUse">
+        <el-form-item label="使用" prop="isPrimary">
           <el-switch
-            v-model="dataSourceForm.isUse"
+            v-model="dataSourceForm.isPrimary"
             active-value="1"
             inactive-value="0"
           />
         </el-form-item>
+        <!-- 折叠按钮, 切换折叠状态时有旋转动画效果 -->
+        <el-divider content-position="left">
+          <div
+            class="show-advanced"
+            @click="showDatasourceAdvanced = !showDatasourceAdvanced"
+          >
+            <el-icon
+              :style="`transform: rotate(${
+                showDatasourceAdvanced ? 90 : 0
+              }deg);transition: all 0.3s;`"
+            >
+              <ArrowRight />
+            </el-icon>
+            <span>
+              <!--       显示或隐藏高级选项       -->
+              {{ showDatasourceAdvanced ? "隐藏高级选项" : "显示高级选项" }}
+            </span>
+          </div>
+        </el-divider>
+        <Transition name="slide-fade">
+          <div v-if="showDatasourceAdvanced">
+            <!--   initCount minCount	maxCount -->
+            <el-form-item label="初始化连接数" prop="initCount">
+              <el-input-number
+                v-model="dataSourceForm.initCount"
+                :max="100"
+                :min="1"
+              />
+            </el-form-item>
+            <el-form-item label="最小连接数" prop="minCount">
+              <el-input-number
+                v-model="dataSourceForm.minCount"
+                :max="100"
+                :min="1"
+              />
+            </el-form-item>
+            <el-form-item label="最大连接数" prop="maxCount">
+              <el-input-number
+                v-model="dataSourceForm.maxCount"
+                :max="100"
+                :min="1"
+              />
+            </el-form-item>
+          </div>
+        </Transition>
       </el-form>
       <template v-else>
         <el-row justify="end">
@@ -383,7 +436,7 @@
           <el-table-column
             align="center"
             label="名称"
-            prop="name"
+            prop="dbName"
           ></el-table-column>
           <el-table-column
             align="center"
@@ -458,6 +511,8 @@ import {
 } from "@/constant/dict";
 import DictTag from "@/components/DictTag/index.vue";
 import { cloneDeep } from "lodash-es";
+import { ArrowRight } from "@element-plus/icons-vue";
+import { useRouter } from "vue-router";
 
 const { proxy } = getCurrentInstance();
 
@@ -477,6 +532,7 @@ const showTenantSetting = ref(false); /*是否显示租户设置对话框*/
 const showDatasourceDialog = ref(false); /*显示数据源列表dialog*/
 const tempTenantId = ref(null); /*临时的租户id状态, 用于在新添加的数据源中提交*/
 const isEditDatasource = ref(false); /*是否处于添加或修改状态*/
+const showDatasourceAdvanced = ref(false); /*是否显示高级选项*/
 const data = reactive({
   form: {},
   queryParams: {
@@ -524,7 +580,14 @@ const data = reactive({
         trigger: "blur",
       },
     ],
-    name: [
+    schemaName: [
+      {
+        required: true,
+        message: "请输入模式名称",
+        trigger: "blur",
+      },
+    ],
+    dbName: [
       {
         required: true,
         message: "请输入数据库名称",
@@ -635,7 +698,11 @@ const handleCloseDatasource = () => {
   showDatasourceDialog.value = false;
 };
 const resetDataSource = () => {
-  dataSourceForm.value = {};
+  dataSourceForm.value = {
+    initCount: 1,
+    minCount: 1,
+    maxCount: 1,
+  };
   datasourceFormRef.value?.resetFields();
 };
 /**
@@ -884,4 +951,35 @@ getList();
   display: flex;
   justify-content: center;
 }
+
+// 高级选项显示切换按钮
+.show-advanced {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  //禁止选中
+  user-select: none;
+
+  .el-icon {
+    font-size: 16px;
+  }
+
+  span {
+    margin-left: 6px;
+  }
+}
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translatey(-20px);
+  opacity: 0;
+}
 </style>
diff --git a/src/views/tenant/initialize.vue b/src/views/tenant/initialize.vue
index 0f2fe38..d592fae 100644
--- a/src/views/tenant/initialize.vue
+++ b/src/views/tenant/initialize.vue
@@ -1,13 +1,372 @@
 <template>
   <div class="app-container">
-    <el-steps align-center>
-      <el-step description="步骤描述" title="步骤1" />
+    <el-steps
+      :active="activeStep"
+      :process-status="
+        currentStepStatus === 0
+          ? 'error'
+          : currentStepStatus === 1
+          ? 'process'
+          : '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="步骤4" />
     </el-steps>
+    <div 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>
+          </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.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-col :span="1.5">
+            <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=""
+            >
+              下一步
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <template v-else-if="activeStep === 2">
+        <el-row justify="center">
+          <el-col :span="1.5">
+            <div class="circle-button" @click="activeStep = 3">步骤2</div>
+          </el-col>
+        </el-row>
+      </template>
+      <template v-else-if="activeStep === 3">
+        <el-row justify="center">
+          <el-col :span="1.5">
+            <div class="circle-button" @click="activeStep = 4">步骤3</div>
+          </el-col>
+        </el-row>
+      </template>
+    </div>
   </div>
 </template>
-<script setup></script>
+<script setup>
+import { onMounted, reactive, ref, toRefs, watchEffect } from "vue";
+import { check } from "@/api/tenant/init";
+import { useRoute, useRouter } from "vue-router";
+import { tenantModeDict } from "@/constant/dict";
 
-<style lang="scss" scoped></style>
+const route = useRoute();
+const router = useRouter();
+const activeStep = ref(0);
+const currentStepStatus = ref(1); // 0: error 1: process 2: finish
+const tenantId = ref(undefined);
+
+if (route.query.id) {
+  tenantId.value = route.query.id;
+} else {
+  router.push({ path: "/tenant/tenant" });
+}
+
+const data = reactive({
+  tenantInitCheckResult: {},
+});
+
+const { tenantInitCheckResult } = toRefs(data);
+const tenantInitCheck = () => {
+  activeStep.value = 1;
+  currentStepStatus.value = 1;
+  check(tenantId.value).then((resp) => {
+    tenantInitCheckResult.value = resp;
+    if (resp.result === 200) {
+      currentStepStatus.value = 2;
+    } else {
+      currentStepStatus.value = 0;
+    }
+  });
+};
+onMounted(() => {
+  watchEffect(() => {
+    const progressLineWidth =
+      (activeStep.value - 1) * 100 +
+      Math.abs(currentStepStatus.value - 1) * 50 +
+      50;
+
+    let progressLineColor;
+    if (currentStepStatus.value === 0) {
+      const percent = (activeStep.value - 1) / progressLineWidth;
+      progressLineColor = `linear-gradient(to right, #67c23a ${percent}%, #f56c6c ${percent}%)`;
+      // 进度条颜色
+    } else {
+      progressLineColor = `linear-gradient(to right, #67c23a ${100}%, #f56c6c ${100}%)`;
+    }
+    document
+      .querySelector(".app-container")
+      .style.setProperty("--progress-line-color", progressLineColor);
+    document
+      .querySelector(".app-container")
+      .style.setProperty("--progress-line-width", progressLineWidth + "%");
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(.init-steps) {
+  margin-top: 120px;
+
+  .el-step__icon {
+    z-index: 9999;
+  }
+
+  .el-step:first-child {
+    .el-step__head.is-success {
+      .el-step__line::before {
+        content: "";
+        display: block;
+        position: absolute;
+        left: 12px;
+        top: 0;
+        height: 2px;
+        width: var(--progress-line-width);
+        z-index: 99;
+        background: var(--progress-line-color);
+      }
+
+      .el-step__line::after {
+        content: "";
+        display: block;
+        position: absolute;
+        left: calc(var(--progress-line-width) - 7px);
+        top: -6px;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        z-index: 99;
+        background: var(--progress-line-color);
+      }
+    }
+  }
+}
+
+.steps-content {
+  margin-top: 80px;
+  padding: 0 60px;
+
+  .start-step {
+  }
+
+  .check-step {
+    display: flex;
+  }
+}
+
+.circle-button {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: #409eff;
+  color: #fff;
+  text-align: center;
+  line-height: 100px;
+  cursor: pointer;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
+  user-select: none;
+
+  &:hover {
+    background-color: #66b1ff;
+  }
+
+  //  按钮按下时
+  &:active {
+    background-color: #3a8ee6;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2) inset;
+  }
+
+  &.error {
+    background-color: #f56c6c;
+
+    &:hover {
+      background-color: #f78989;
+    }
+
+    &:active {
+      background-color: #f56c6c;
+      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2) inset;
+    }
+  }
+
+  &.finish {
+    background-color: #67c23a;
+
+    &:hover {
+      background-color: #85ce61;
+    }
+
+    &:active {
+      background-color: #67c23a;
+      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2) inset;
+    }
+  }
+}
+
+.data-card {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  min-height: 120px;
+  position: relative;
+  padding: 16px;
+
+  .card-title {
+    position: absolute;
+    top: -10px;
+    left: 10px;
+    background-color: #fff;
+    //禁止选中
+    user-select: none;
+    // 水平方向padding 10px
+    padding: 0 5px;
+    font-size: 12px;
+    // 浅灰色字体
+    color: #606266;
+    border-radius: 12px;
+  }
+
+  .card-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    height: 100%;
+
+    .card-content-item {
+      display: flex;
+      justify-content: space-between;
+
+      &:not(:last-child) {
+        margin-bottom: 10px;
+      }
+    }
+
+    .card-content-item-title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #606266;
+    }
+
+    .card-content-item-value {
+      font-size: 14px;
+      color: #909399;
+    }
+  }
+}
+</style>