This commit is contained in:
2023-06-29 16:32:52 +08:00
parent 5ef97e537f
commit 91979abf3d
2 changed files with 167 additions and 139 deletions

View File

@ -12,6 +12,7 @@ export const createTables = (tenantId) => {
return request({
url: `/tenant/init/createTables/${tenantId}`,
method: "POST",
// timeout:1
});
};

View File

@ -13,29 +13,13 @@
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-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">
<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"
@ -47,10 +31,31 @@
: 'success'
"
show-icon
>错误码: {{ tenantInitCheckResult.result }}, 错误信息:
{{ tenantInitCheckResult.msg }}
>{{
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 style="margin-top: 36px">
<!-- 数据库配置信息 -->
<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">
<!-- 卡片左上角小标题, 覆盖在边框上 -->
@ -132,7 +137,28 @@
</div>
</el-col>
</el-row>
<el-row justify="center" style="margin-top: 24px">
<!-- spinner -->
<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">
<div class="circle-button" @click="initTenant">开始</div>
</el-col>
</el-row>
</div>
<div v-else-if="activeStep === 1">
<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>