This commit is contained in:
2023-06-30 15:40:14 +08:00
parent a6bf525fbe
commit dcf9b645f3

View File

@ -1,60 +1,60 @@
<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 title="开始" />
<el-step title="检查" />
<el-step title="步骤2" />
<el-step 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="
v-if="currentStepStatus === 0"
:closable="false"
:type="
currentStepStatus === 0
? 'error'
: currentStepStatus === 1
? 'info'
: 'success'
"
show-icon
>{{
show-icon
>{{
activeStep.value === 1
? "错误码: " +
? "错误码: " +
tenantInitCheckResult.result +
", 错误信息: " +
tenantInitCheckResult.msg
: activeStep.value === 2
? "错误码: " +
createTablesResult.result +
", 错误信息: " +
createTablesResult.msg
: activeStep.value === 3
? "错误码: " +
initDataResult.result +
", 错误信息: " +
initDataResult.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"
v-if="Object.keys(tenantInitCheckResult).length"
style="margin: 36px 36px 0"
>
<el-col :span="12">
<div class="data-card init-check-base-data">
@ -67,26 +67,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>
@ -95,43 +95,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>
@ -143,7 +143,7 @@
<el-col :span="1.5">
<div class="btn-loading">
<el-icon size="80">
<refresh />
<refresh/>
</el-icon>
</div>
</el-col>
@ -161,16 +161,16 @@
<el-row justify="center">
<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="initTenant"
v-else-if="currentStepStatus === 2"
class="circle-button"
@click="initTenant"
>
创建库
</div>
@ -181,16 +181,16 @@
<el-row justify="center">
<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="initTenant"
v-else-if="currentStepStatus === 2"
class="circle-button"
@click="initTenant"
>
<span>导入数据</span>
</div>
@ -201,16 +201,16 @@
<el-row justify="center">
<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' })"
v-else-if="currentStepStatus === 2"
class="circle-button finish"
@click="router.push({ path: '/tenant/tenant' })"
>
完成
</div>
@ -221,11 +221,11 @@
</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 { Refresh } from "@element-plus/icons-vue";
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 {Refresh} from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
@ -236,7 +236,7 @@ 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({
@ -245,8 +245,8 @@ const data = reactive({
initDataResult: {},
});
const { tenantInitCheckResult, createTablesResult, initDataResult } =
toRefs(data);
const {tenantInitCheckResult, createTablesResult, initDataResult} =
toRefs(data);
const initTenant = async () => {
loading.value = true;
@ -266,19 +266,19 @@ const tenantInitCheck = () => {
activeStep.value = 1;
currentStepStatus.value = 1;
return check(tenantId.value)
.then((resp) => {
tenantInitCheckResult.value = resp;
if (resp.result === 200) {
.catch(() => {
currentStepStatus.value = 2;
} else {
currentStepStatus.value = 0;
}
})
.catch(() => {
currentStepStatus.value = 2;
activeStep.value = 0;
throw new Error("租户初始化检查失败");
});
activeStep.value = 0;
throw new Error("租户初始化检查失败");
}).then((resp) => {
tenantInitCheckResult.value = resp;
if (resp.result === 200) {
currentStepStatus.value = 2;
} else {
currentStepStatus.value = 0;
throw new Error("租户初始化检查失败");
}
})
};
// 第二步: 创建数据库
@ -287,19 +287,19 @@ const createDatabase = () => {
activeStep.value = 2;
currentStepStatus.value = 1;
return createTables(tenantId.value)
.then((resp) => {
createTablesResult.value = resp;
if (resp.result === 200) {
.catch(() => {
currentStepStatus.value = 2;
} else {
currentStepStatus.value = 0;
}
})
.catch(() => {
currentStepStatus.value = 2;
activeStep.value = 1;
throw new Error("创建数据库失败");
});
activeStep.value = 1;
throw new Error("创建数据库失败");
}).then((resp) => {
createTablesResult.value = resp;
if (resp.result === 200) {
currentStepStatus.value = 2;
} else {
currentStepStatus.value = 0;
throw new Error("创建数据库失败");
}
})
};
// 第三步,导入数据
@ -308,27 +308,27 @@ const importData = () => {
activeStep.value = 3;
currentStepStatus.value = 1;
return initData(tenantId.value)
.then((resp) => {
initDataResult.value = resp;
if (resp.result === 200) {
.catch(() => {
currentStepStatus.value = 2;
} else {
currentStepStatus.value = 0;
}
})
.catch(() => {
currentStepStatus.value = 2;
activeStep.value = 2;
throw new Error("导入数据失败");
});
activeStep.value = 2;
throw new Error("导入数据失败");
}).then((resp) => {
initDataResult.value = resp;
if (resp.result === 200) {
currentStepStatus.value = 2;
} else {
currentStepStatus.value = 0;
throw new Error("导入数据失败");
}
})
};
onMounted(() => {
watchEffect(() => {
let progressLineWidth =
(activeStep.value - 1) * 100 +
Math.abs(currentStepStatus.value - 1) * 30 +
70;
(activeStep.value - 1) * 100 +
Math.abs(currentStepStatus.value - 1) * 30 +
70;
progressLineWidth = progressLineWidth < 100 ? 0 : progressLineWidth;
let progressLineColor;
if (currentStepStatus.value === 0) {
@ -339,11 +339,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>