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

bugfix

Browse Source
This commit is contained in:
ailanyin
2023-06-29 11:19:07 +08:00
parent a9e88c99ad
commit 5205b26147
2 changed files with 123 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/api/tenant/init.js
View File

@ -1,16 +1,24 @@
import request from "@/utils/request"; import request from "@/utils/request";
export const check = (tenantId) => { export const check = (tenantId) => {
return request({ return request({
url: `/tenant/init/check/${tenantId}`, url: `/tenant/init/check/${tenantId}`,
method: "POST", method: "POST",
}); });
}; };
// /tenant/init/createTables/{tenantId} // /tenant/init/createTables/{tenantId}
export const createTables = (tenantId) => { export const createTables = (tenantId) => {
return request({ return request({
url: `/tenant/init/createTables/${tenantId}`, url: `/tenant/init/createTables/${tenantId}`,
method: "POST", method: "POST",
}); });
}; };
// /tenant/init/initData/{tenantId}
export const initData = (tenantId) => {
return request({
url: `/tenant/init/initData/${tenantId}`,
method: "POST",
});
}

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

@ -1,22 +1,22 @@
<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 description="初始化开始" title="开始" /> <el-step description="初始化开始" title="开始"/>
<el-step description="步骤描述" title="检查" /> <el-step description="步骤描述" title="检查"/>
<el-step description="步骤描述" title="步骤2" /> <el-step description="步骤描述" title="步骤2"/>
<el-step description="步骤描述" title="步骤3" /> <el-step description="步骤描述" title="步骤3"/>
</el-steps> </el-steps>
<div class="steps-content"> <div class="steps-content">
<div v-if="activeStep === 0" class="start-step"> <div v-if="activeStep === 0" class="start-step">
@ -28,17 +28,17 @@
</div> </div>
<div v-else-if="activeStep === 1"> <div v-else-if="activeStep === 1">
<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
>错误码: {{ tenantInitCheckResult.result }}, 错误信息: >错误码: {{ tenantInitCheckResult.result }}, 错误信息:
{{ tenantInitCheckResult.msg }} {{ tenantInitCheckResult.msg }}
</el-alert> </el-alert>
<el-row style="margin-top: 36px"> <el-row style="margin-top: 36px">
@ -53,26 +53,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>
@ -81,43 +81,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>
@ -126,16 +126,16 @@
<el-row justify="center" style="margin-top: 24px"> <el-row justify="center" style="margin-top: 24px">
<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="createDatabase" @click="createDatabase"
> >
创建库 创建库
</div> </div>
@ -143,20 +143,42 @@
</el-row> </el-row>
</div> </div>
<template v-else-if="activeStep === 2"> <template v-else-if="activeStep === 2">
<el-alert :closable="false" show-icon type="error" <el-alert v-if="currentStepStatus === 0" :closable="false" show-icon type="error"
>错误码: {{ createTablesResult.result }}, 错误信息: >错误码: {{ createTablesResult.result }}, 错误信息:
{{ createTablesResult.msg }}</el-alert {{ createTablesResult.msg }}
</el-alert
> >
<el-row justify="center" style="margin-top: 24px"> <el-row justify="center" style="margin-top: 24px">
<el-col :span="1.5"> <el-col :span="1.5">
<div class="circle-button" @click="activeStep = 3">步骤2</div> <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="importData">导入数据</div>
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
<template v-else-if="activeStep === 3"> <template v-else-if="activeStep === 3">
<el-row justify="center"> <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-col :span="1.5"> <el-col :span="1.5">
<div class="circle-button" @click="activeStep = 4">步骤3</div> <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 finish"
@click="router.push({ path: '/tenant/tenant' })">完成
</div>
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
@ -164,10 +186,10 @@
</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 } 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";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -178,15 +200,16 @@ const tenantId = ref(undefined);
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({
tenantInitCheckResult: {}, tenantInitCheckResult: {},
createTablesResult: {}, createTablesResult: {},
initDataResult: {},
}); });
const { tenantInitCheckResult, createTablesResult } = toRefs(data); const {tenantInitCheckResult, createTablesResult, initDataResult} = toRefs(data);
const tenantInitCheck = () => { const tenantInitCheck = () => {
activeStep.value = 1; activeStep.value = 1;
currentStepStatus.value = 1; currentStepStatus.value = 1;
@ -197,10 +220,13 @@ const tenantInitCheck = () => {
} else { } else {
currentStepStatus.value = 0; currentStepStatus.value = 0;
} }
}).catch(() => {
currentStepStatus.value = 2;
activeStep.value = 2;
}); });
}; };
// 创建数据库 // 第二步: 创建数据库
const createDatabase = () => { const createDatabase = () => {
activeStep.value = 2; activeStep.value = 2;
currentStepStatus.value = 1; currentStepStatus.value = 1;
@ -211,15 +237,35 @@ const createDatabase = () => {
} else { } else {
currentStepStatus.value = 0; currentStepStatus.value = 0;
} }
}).catch(() => {
currentStepStatus.value = 2;
activeStep.value = 2;
});
};
// 第三步,导入数据
const importData = () => {
activeStep.value = 3;
currentStepStatus.value = 1;
initData(tenantId.value).then((resp) => {
initDataResult.value = resp;
if (resp.result === 200) {
currentStepStatus.value = 2;
} else {
currentStepStatus.value = 0;
}
}).catch(() => {
currentStepStatus.value = 2;
activeStep.value = 2;
}); });
}; };
onMounted(() => { onMounted(() => {
watchEffect(() => { watchEffect(() => {
const progressLineWidth = const progressLineWidth =
(activeStep.value - 1) * 100 + (activeStep.value - 1) * 100 +
Math.abs(currentStepStatus.value - 1) * 50 + Math.abs(currentStepStatus.value - 1) * 50 +
50; 50;
let progressLineColor; let progressLineColor;
if (currentStepStatus.value === 0) { if (currentStepStatus.value === 0) {
@ -230,11 +276,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>