cxc/qiaoba-vue3
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

bug fix

Browse Source
This commit is contained in:
ailanyin
2023-06-30 15:40:14 +08:00
parent a6bf525fbe
commit dcf9b645f3
1 changed files with 119 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
src/views/tenant/initialize.vue
View File

@ -1,60 +1,60 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-steps <el-steps
:active="activeStep" :active="activeStep"
:process-status=" :process-status="
currentStepStatus === 0 currentStepStatus === 0
? 'error' ? 'error'
: currentStepStatus === 1 : currentStepStatus === 1
? 'process' ? 'process'
: 'success' : 'success'
" "
align-center align-center
class="init-steps" class="init-steps"
finish-status="success" finish-status="success"
> >
<el-step title="开始" /> <el-step title="开始"/>
<el-step title="检查" /> <el-step title="检查"/>
<el-step title="步骤2" /> <el-step title="步骤2"/>
<el-step title="步骤3" /> <el-step title="步骤3"/>
</el-steps> </el-steps>
<!-- 错误提示 --> <!-- 错误提示 -->
<el-alert <el-alert
v-if="currentStepStatus === 0" v-if="currentStepStatus === 0"
:closable="false" :closable="false"
:type=" :type="
currentStepStatus === 0 currentStepStatus === 0
? 'error' ? 'error'
: currentStepStatus === 1 : currentStepStatus === 1
? 'info' ? 'info'
: 'success' : 'success'
" "
show-icon show-icon
>{{ >{{
activeStep.value === 1 activeStep.value === 1
? "错误码: " + ? "错误码: " +
tenantInitCheckResult.result + tenantInitCheckResult.result +
", 错误信息: " + ", 错误信息: " +
tenantInitCheckResult.msg tenantInitCheckResult.msg
: activeStep.value === 2 : activeStep.value === 2
? "错误码: " + ? "错误码: " +
createTablesResult.result + createTablesResult.result +
", 错误信息: " + ", 错误信息: " +
createTablesResult.msg createTablesResult.msg
: activeStep.value === 3 : activeStep.value === 3
? "错误码: " + ? "错误码: " +
initDataResult.result + initDataResult.result +
", 错误信息: " + ", 错误信息: " +
initDataResult.msg initDataResult.msg
: "" : ""
}} }}
</el-alert> </el-alert>
<!-- 数据库配置信息 --> <!-- 数据库配置信息 -->
<el-row <el-row
v-if="Object.keys(tenantInitCheckResult).length" v-if="Object.keys(tenantInitCheckResult).length"
style="margin: 36px 36px 0" style="margin: 36px 36px 0"
> >
<el-col :span="12"> <el-col :span="12">
<div class="data-card init-check-base-data"> <div class="data-card init-check-base-data">
@ -67,26 +67,26 @@
<div class="card-content-item"> <div class="card-content-item">
<span class="card-content-item-title">租户名称:</span> <span class="card-content-item-title">租户名称:</span>
<span class="card-content-item-value">{{ <span class="card-content-item-value">{{
tenantInitCheckResult.tenantName tenantInitCheckResult.tenantName
}}</span> }}</span>
</div> </div>
<!--模式--> <!--模式-->
<div class="card-content-item"> <div class="card-content-item">
<span class="card-content-item-title">模式:</span> <span class="card-content-item-title">模式:</span>
<span class="card-content-item-value">{{ <span class="card-content-item-value">{{
tenantModeDict.find( tenantModeDict.find(
(item) => item.value === tenantInitCheckResult.mode (item) => item.value === tenantInitCheckResult.mode
)?.label )?.label
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div <div
v-if="tenantInitCheckResult.datasource" v-if="tenantInitCheckResult.datasource"
class="data-card init-check-base-data" class="data-card init-check-base-data"
style="margin-left: 24px" style="margin-left: 24px"
> >
<div class="card-title"> <div class="card-title">
<span>数据源数据</span> <span>数据源数据</span>
@ -95,43 +95,43 @@
<div class="card-content-item"> <div class="card-content-item">
<span class="card-content-item-title">数据库IP:</span> <span class="card-content-item-title">数据库IP:</span>
<span class="card-content-item-value">{{ <span class="card-content-item-value">{{
tenantInitCheckResult.datasource.ip tenantInitCheckResult.datasource.ip
}}</span> }}</span>
</div> </div>
<!-- 端口--> <!-- 端口-->
<div class="card-content-item"> <div class="card-content-item">
<span class="card-content-item-title">端口:</span> <span class="card-content-item-title">端口:</span>
<span class="card-content-item-value">{{ <span class="card-content-item-value">{{
tenantInitCheckResult.datasource.port tenantInitCheckResult.datasource.port
}}</span> }}</span>
</div> </div>
<!--模式--> <!--模式-->
<div class="card-content-item"> <div class="card-content-item">
<span class="card-content-item-title">类型:</span> <span class="card-content-item-title">类型:</span>
<span class="card-content-item-value">{{ <span class="card-content-item-value">{{
tenantInitCheckResult.datasource.type tenantInitCheckResult.datasource.type
}}</span> }}</span>
</div> </div>
<!-- 数据库名称--> <!-- 数据库名称-->
<div class="card-content-item"> <div class="card-content-item">
<span class="card-content-item-title">数据库名称:</span> <span class="card-content-item-title">数据库名称:</span>
<span class="card-content-item-value">{{ <span class="card-content-item-value">{{
tenantInitCheckResult.datasource.dbName tenantInitCheckResult.datasource.dbName
}}</span> }}</span>
</div> </div>
<!-- 用户名--> <!-- 用户名-->
<div class="card-content-item"> <div class="card-content-item">
<span class="card-content-item-title">用户名:</span> <span class="card-content-item-title">用户名:</span>
<span class="card-content-item-value">{{ <span class="card-content-item-value">{{
tenantInitCheckResult.datasource.username tenantInitCheckResult.datasource.username
}}</span> }}</span>
</div> </div>
<!-- 密码--> <!-- 密码-->
<div class="card-content-item"> <div class="card-content-item">
<span class="card-content-item-title">密码:</span> <span class="card-content-item-title">密码:</span>
<span class="card-content-item-value">{{ <span class="card-content-item-value">{{
tenantInitCheckResult.datasource.password tenantInitCheckResult.datasource.password
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -143,7 +143,7 @@
<el-col :span="1.5"> <el-col :span="1.5">
<div class="btn-loading"> <div class="btn-loading">
<el-icon size="80"> <el-icon size="80">
<refresh /> <refresh/>
</el-icon> </el-icon>
</div> </div>
</el-col> </el-col>
@ -161,16 +161,16 @@
<el-row justify="center"> <el-row justify="center">
<el-col :span="1.5"> <el-col :span="1.5">
<div <div
v-if="currentStepStatus === 0" v-if="currentStepStatus === 0"
class="circle-button error" class="circle-button error"
@click="router.push({ path: '/tenant/tenant' })" @click="router.push({ path: '/tenant/tenant' })"
> >
关闭 关闭
</div> </div>
<div <div
v-else-if="currentStepStatus === 2" v-else-if="currentStepStatus === 2"
class="circle-button" class="circle-button"
@click="initTenant" @click="initTenant"
> >
创建库 创建库
</div> </div>
@ -181,16 +181,16 @@
<el-row justify="center"> <el-row justify="center">
<el-col :span="1.5"> <el-col :span="1.5">
<div <div
v-if="currentStepStatus === 0" v-if="currentStepStatus === 0"
class="circle-button error" class="circle-button error"
@click="router.push({ path: '/tenant/tenant' })" @click="router.push({ path: '/tenant/tenant' })"
> >
关闭 关闭
</div> </div>
<div <div
v-else-if="currentStepStatus === 2" v-else-if="currentStepStatus === 2"
class="circle-button" class="circle-button"
@click="initTenant" @click="initTenant"
> >
<span>导入数据</span> <span>导入数据</span>
</div> </div>
@ -201,16 +201,16 @@
<el-row justify="center"> <el-row justify="center">
<el-col :span="1.5"> <el-col :span="1.5">
<div <div
v-if="currentStepStatus === 0" v-if="currentStepStatus === 0"
class="circle-button error" class="circle-button error"
@click="router.push({ path: '/tenant/tenant' })" @click="router.push({ path: '/tenant/tenant' })"
> >
关闭 关闭
</div> </div>
<div <div
v-else-if="currentStepStatus === 2" v-else-if="currentStepStatus === 2"
class="circle-button finish" class="circle-button finish"
@click="router.push({ path: '/tenant/tenant' })" @click="router.push({ path: '/tenant/tenant' })"
> >
完成 完成
</div> </div>
@ -221,11 +221,11 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref, toRefs, watchEffect } from "vue"; import {onMounted, reactive, ref, toRefs, watchEffect} from "vue";
import { check, createTables, initData } from "@/api/tenant/init"; import {check, createTables, initData} from "@/api/tenant/init";
import { useRoute, useRouter } from "vue-router"; import {useRoute, useRouter} from "vue-router";
import { tenantModeDict } from "@/constant/dict"; import {tenantModeDict} from "@/constant/dict";
import { Refresh } from "@element-plus/icons-vue"; import {Refresh} from "@element-plus/icons-vue";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -236,7 +236,7 @@ const loading = ref(false);
if (route.query.id) { if (route.query.id) {
tenantId.value = route.query.id; tenantId.value = route.query.id;
} else { } else {
router.push({ path: "/tenant/tenant" }); router.push({path: "/tenant/tenant"});
} }
const data = reactive({ const data = reactive({
@ -245,8 +245,8 @@ const data = reactive({
initDataResult: {}, initDataResult: {},
}); });
const { tenantInitCheckResult, createTablesResult, initDataResult } = const {tenantInitCheckResult, createTablesResult, initDataResult} =
toRefs(data); toRefs(data);
const initTenant = async () => { const initTenant = async () => {
loading.value = true; loading.value = true;
@ -266,19 +266,19 @@ const tenantInitCheck = () => {
activeStep.value = 1; activeStep.value = 1;
currentStepStatus.value = 1; currentStepStatus.value = 1;
return check(tenantId.value) return check(tenantId.value)
.then((resp) => { .catch(() => {
tenantInitCheckResult.value = resp;
if (resp.result === 200) {
currentStepStatus.value = 2; currentStepStatus.value = 2;
} else { activeStep.value = 0;
currentStepStatus.value = 0; throw new Error("租户初始化检查失败");
} }).then((resp) => {
}) tenantInitCheckResult.value = resp;
.catch(() => { if (resp.result === 200) {
currentStepStatus.value = 2; currentStepStatus.value = 2;
activeStep.value = 0; } else {
throw new Error("租户初始化检查失败"); currentStepStatus.value = 0;
}); throw new Error("租户初始化检查失败");
}
})
}; };
// 第二步: 创建数据库 // 第二步: 创建数据库
@ -287,19 +287,19 @@ const createDatabase = () => {
activeStep.value = 2; activeStep.value = 2;
currentStepStatus.value = 1; currentStepStatus.value = 1;
return createTables(tenantId.value) return createTables(tenantId.value)
.then((resp) => { .catch(() => {
createTablesResult.value = resp;
if (resp.result === 200) {
currentStepStatus.value = 2; currentStepStatus.value = 2;
} else { activeStep.value = 1;
currentStepStatus.value = 0; throw new Error("创建数据库失败");
} }).then((resp) => {
}) createTablesResult.value = resp;
.catch(() => { if (resp.result === 200) {
currentStepStatus.value = 2; currentStepStatus.value = 2;
activeStep.value = 1; } else {
throw new Error("创建数据库失败"); currentStepStatus.value = 0;
}); throw new Error("创建数据库失败");
}
})
}; };
// 第三步,导入数据 // 第三步,导入数据
@ -308,27 +308,27 @@ const importData = () => {
activeStep.value = 3; activeStep.value = 3;
currentStepStatus.value = 1; currentStepStatus.value = 1;
return initData(tenantId.value) return initData(tenantId.value)
.then((resp) => { .catch(() => {
initDataResult.value = resp;
if (resp.result === 200) {
currentStepStatus.value = 2; currentStepStatus.value = 2;
} else { activeStep.value = 2;
currentStepStatus.value = 0; throw new Error("导入数据失败");
} }).then((resp) => {
}) initDataResult.value = resp;
.catch(() => { if (resp.result === 200) {
currentStepStatus.value = 2; currentStepStatus.value = 2;
activeStep.value = 2; } else {
throw new Error("导入数据失败"); currentStepStatus.value = 0;
}); throw new Error("导入数据失败");
}
})
}; };
onMounted(() => { onMounted(() => {
watchEffect(() => { watchEffect(() => {
let progressLineWidth = let progressLineWidth =
(activeStep.value - 1) * 100 + (activeStep.value - 1) * 100 +
Math.abs(currentStepStatus.value - 1) * 30 + Math.abs(currentStepStatus.value - 1) * 30 +
70; 70;
progressLineWidth = progressLineWidth < 100 ? 0 : progressLineWidth; progressLineWidth = progressLineWidth < 100 ? 0 : progressLineWidth;
let progressLineColor; let progressLineColor;
if (currentStepStatus.value === 0) { if (currentStepStatus.value === 0) {
@ -339,11 +339,11 @@ onMounted(() => {
progressLineColor = `linear-gradient(to right, #67c23a ${100}%, #f56c6c ${100}%)`; progressLineColor = `linear-gradient(to right, #67c23a ${100}%, #f56c6c ${100}%)`;
} }
document document
.querySelector(".app-container") .querySelector(".app-container")
.style.setProperty("--progress-line-color", progressLineColor); .style.setProperty("--progress-line-color", progressLineColor);
document document
.querySelector(".app-container") .querySelector(".app-container")
.style.setProperty("--progress-line-width", progressLineWidth + "%"); .style.setProperty("--progress-line-width", progressLineWidth + "%");
}); });
}); });
</script> </script>