bugfix
This commit is contained in:
@ -1,16 +1,24 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export const check = (tenantId) => {
|
||||
return request({
|
||||
url: `/tenant/init/check/${tenantId}`,
|
||||
method: "POST",
|
||||
});
|
||||
return request({
|
||||
url: `/tenant/init/check/${tenantId}`,
|
||||
method: "POST",
|
||||
});
|
||||
};
|
||||
|
||||
// /tenant/init/createTables/{tenantId}
|
||||
export const createTables = (tenantId) => {
|
||||
return request({
|
||||
url: `/tenant/init/createTables/${tenantId}`,
|
||||
method: "POST",
|
||||
});
|
||||
return request({
|
||||
url: `/tenant/init/createTables/${tenantId}`,
|
||||
method: "POST",
|
||||
});
|
||||
};
|
||||
|
||||
// /tenant/init/initData/{tenantId}
|
||||
export const initData = (tenantId) => {
|
||||
return request({
|
||||
url: `/tenant/init/initData/${tenantId}`,
|
||||
method: "POST",
|
||||
});
|
||||
}
|
||||
@ -1,22 +1,22 @@
|
||||
<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 description="初始化开始" title="开始" />
|
||||
<el-step description="步骤描述" title="检查" />
|
||||
<el-step description="步骤描述" title="步骤2" />
|
||||
<el-step description="步骤描述" title="步骤3" />
|
||||
<el-step description="初始化开始" title="开始"/>
|
||||
<el-step description="步骤描述" title="检查"/>
|
||||
<el-step description="步骤描述" title="步骤2"/>
|
||||
<el-step description="步骤描述" title="步骤3"/>
|
||||
</el-steps>
|
||||
<div class="steps-content">
|
||||
<div v-if="activeStep === 0" class="start-step">
|
||||
@ -28,17 +28,17 @@
|
||||
</div>
|
||||
<div v-else-if="activeStep === 1">
|
||||
<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
|
||||
>错误码: {{ tenantInitCheckResult.result }}, 错误信息:
|
||||
show-icon
|
||||
>错误码: {{ tenantInitCheckResult.result }}, 错误信息:
|
||||
{{ tenantInitCheckResult.msg }}
|
||||
</el-alert>
|
||||
<el-row style="margin-top: 36px">
|
||||
@ -53,26 +53,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>
|
||||
@ -81,43 +81,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>
|
||||
@ -126,16 +126,16 @@
|
||||
<el-row justify="center" style="margin-top: 24px">
|
||||
<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="createDatabase"
|
||||
v-else-if="currentStepStatus === 2"
|
||||
class="circle-button"
|
||||
@click="createDatabase"
|
||||
>
|
||||
创建库
|
||||
</div>
|
||||
@ -143,20 +143,42 @@
|
||||
</el-row>
|
||||
</div>
|
||||
<template v-else-if="activeStep === 2">
|
||||
<el-alert :closable="false" show-icon type="error"
|
||||
>错误码: {{ createTablesResult.result }}, 错误信息:
|
||||
{{ createTablesResult.msg }}</el-alert
|
||||
<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-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-row>
|
||||
</template>
|
||||
<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">
|
||||
<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-row>
|
||||
</template>
|
||||
@ -164,10 +186,10 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, toRefs, watchEffect } from "vue";
|
||||
import { check, createTables } from "@/api/tenant/init";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { tenantModeDict } from "@/constant/dict";
|
||||
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";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@ -178,15 +200,16 @@ const tenantId = ref(undefined);
|
||||
if (route.query.id) {
|
||||
tenantId.value = route.query.id;
|
||||
} else {
|
||||
router.push({ path: "/tenant/tenant" });
|
||||
router.push({path: "/tenant/tenant"});
|
||||
}
|
||||
|
||||
const data = reactive({
|
||||
tenantInitCheckResult: {},
|
||||
createTablesResult: {},
|
||||
initDataResult: {},
|
||||
});
|
||||
|
||||
const { tenantInitCheckResult, createTablesResult } = toRefs(data);
|
||||
const {tenantInitCheckResult, createTablesResult, initDataResult} = toRefs(data);
|
||||
const tenantInitCheck = () => {
|
||||
activeStep.value = 1;
|
||||
currentStepStatus.value = 1;
|
||||
@ -197,10 +220,13 @@ const tenantInitCheck = () => {
|
||||
} else {
|
||||
currentStepStatus.value = 0;
|
||||
}
|
||||
}).catch(() => {
|
||||
currentStepStatus.value = 2;
|
||||
activeStep.value = 2;
|
||||
});
|
||||
};
|
||||
|
||||
// 创建数据库
|
||||
// 第二步: 创建数据库
|
||||
const createDatabase = () => {
|
||||
activeStep.value = 2;
|
||||
currentStepStatus.value = 1;
|
||||
@ -211,15 +237,35 @@ const createDatabase = () => {
|
||||
} else {
|
||||
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(() => {
|
||||
watchEffect(() => {
|
||||
const progressLineWidth =
|
||||
(activeStep.value - 1) * 100 +
|
||||
Math.abs(currentStepStatus.value - 1) * 50 +
|
||||
50;
|
||||
(activeStep.value - 1) * 100 +
|
||||
Math.abs(currentStepStatus.value - 1) * 50 +
|
||||
50;
|
||||
|
||||
let progressLineColor;
|
||||
if (currentStepStatus.value === 0) {
|
||||
@ -230,11 +276,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