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

initdata timeout

Browse Source
This commit is contained in:
ailanyin
2023-06-29 14:57:23 +08:00
parent cd4ad39428
commit 5ef97e537f
3 changed files with 189 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -33,7 +33,8 @@
"v3-infinite-loading": "^1.2.2",
"vue": "3.2.45",
"vue-cropper": "1.0.3",
"vue-router": "4.1.4"
"vue-router": "4.1.4",
"vue-spinner": "^1.0.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "3.1.0",

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

@ -22,4 +22,4 @@ export const initData = (tenantId) => {
method: "POST",
timeout: 0,
});
}
};

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

@ -13,12 +13,21 @@
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">
<el-row v-if="loading" justify="center">
<el-col :span="1.5">
<div class="btn-loading">
<el-icon size="80">
<refresh />
</el-icon>
</div>
</el-col>
</el-row>
<div v-else class="steps-content">
<div v-if="activeStep === 0" class="start-step">
<el-row justify="center">
<el-col :span="1.5">
@ -143,11 +152,14 @@
</el-row>
</div>
<template v-else-if="activeStep === 2">
<el-alert v-if="currentStepStatus === 0" :closable="false" show-icon type="error"
<el-alert
v-if="currentStepStatus === 0"
:closable="false"
show-icon
type="error"
>错误码: {{ createTablesResult.result }}, 错误信息:
{{ createTablesResult.msg }}
</el-alert
>
</el-alert>
<el-row justify="center" style="margin-top: 24px">
<el-col :span="1.5">
<div
@ -157,16 +169,25 @@
>
关闭
</div>
<div v-else-if="currentStepStatus === 2" class="circle-button" @click="importData">导入数据</div>
<div
v-else-if="currentStepStatus === 2"
class="circle-button"
@click="importData"
>
<span>导入数据</span>
</div>
</el-col>
</el-row>
</template>
<template v-else-if="activeStep === 3">
<el-alert v-if="currentStepStatus === 0" :closable="false" show-icon type="error"
<el-alert
v-if="currentStepStatus === 0"
:closable="false"
show-icon
type="error"
>错误码: {{ initDataResult.result }}, 错误信息:
{{ initDataResult.msg }}
</el-alert
>
</el-alert>
<el-row justify="center" style="margin-top: 24px">
<el-col :span="1.5">
<div
@ -176,8 +197,12 @@
>
关闭
</div>
<div v-else-if="currentStepStatus===2" class="circle-button finish"
@click="router.push({ path: '/tenant/tenant' })">完成
<div
v-else-if="currentStepStatus === 2"
class="circle-button finish"
@click="router.push({ path: '/tenant/tenant' })"
>
完成
</div>
</el-col>
</el-row>
@ -186,21 +211,22 @@
</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 { 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 { RefreshRight, Refresh } from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
const activeStep = ref(0);
const currentStepStatus = ref(1); // 0: error 1: process 2: finish
const tenantId = ref(undefined);
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({
@ -209,64 +235,82 @@ const data = reactive({
initDataResult: {},
});
const {tenantInitCheckResult, createTablesResult, initDataResult} = toRefs(data);
const { tenantInitCheckResult, createTablesResult, initDataResult } =
toRefs(data);
const tenantInitCheck = () => {
activeStep.value = 1;
currentStepStatus.value = 1;
check(tenantId.value).then((resp) => {
check(tenantId.value)
.then((resp) => {
tenantInitCheckResult.value = resp;
if (resp.result === 200) {
currentStepStatus.value = 2;
} else {
currentStepStatus.value = 0;
}
}).catch(() => {
})
.catch(() => {
currentStepStatus.value = 2;
activeStep.value = 2;
})
.finally(() => {
loading.value = false;
});
};
// 第二步: 创建数据库
const createDatabase = () => {
loading.value = true;
activeStep.value = 2;
currentStepStatus.value = 1;
createTables(tenantId.value).then((resp) => {
createTables(tenantId.value)
.then((resp) => {
createTablesResult.value = resp;
if (resp.result === 200) {
currentStepStatus.value = 2;
} else {
currentStepStatus.value = 0;
}
}).catch(() => {
})
.catch(() => {
currentStepStatus.value = 2;
activeStep.value = 2;
})
.finally(() => {
loading.value = false;
});
};
// 第三步,导入数据
const importData = () => {
loading.value = true;
activeStep.value = 3;
currentStepStatus.value = 1;
initData(tenantId.value).then((resp) => {
initData(tenantId.value)
.then((resp) => {
initDataResult.value = resp;
if (resp.result === 200) {
currentStepStatus.value = 2;
} else {
currentStepStatus.value = 0;
}
}).catch(() => {
})
.catch(() => {
currentStepStatus.value = 2;
activeStep.value = 2;
})
.finally(() => {
loading.value = false;
});
};
onMounted(() => {
watchEffect(() => {
let progressLineWidth =
((activeStep.value - 1) * 100 +
(activeStep.value - 1) * 100 +
Math.abs(currentStepStatus.value - 1) * 30 +
70)
progressLineWidth = progressLineWidth < 100 ? 0 : progressLineWidth
70;
progressLineWidth = progressLineWidth < 100 ? 0 : progressLineWidth;
let progressLineColor;
if (currentStepStatus.value === 0) {
const percent = ((activeStep.value - 1) / activeStep.value) * 100;
@ -337,6 +381,22 @@ onMounted(() => {
}
}
.btn-loading {
margin-top: 80px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #409eff;
display: flex;
justify-content: center;
align-items: center;
.el-icon {
animation: spin 1s linear infinite;
color: white;
}
}
.circle-button {
width: 100px;
height: 100px;
@ -438,4 +498,13 @@ onMounted(() => {
}
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>