bug fix
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user