147 lines
3.8 KiB
Vue
147 lines
3.8 KiB
Vue
<script lang="ts" setup>
|
|
import { PageContainer } from 'antdv-pro-layout';
|
|
import { message } from 'ant-design-vue/lib';
|
|
import { defineAsyncComponent, watch, shallowRef, onMounted } from 'vue';
|
|
import { stepState, fnStepPrev, fnStepNext, fnRestStepState } from './hooks/useStep';
|
|
|
|
// 异步加载组件
|
|
const StepCheck = defineAsyncComponent(
|
|
() => import('./components/StepCheck.vue')
|
|
);
|
|
|
|
// 当前组件
|
|
const currentComponent = shallowRef(StepCheck);
|
|
|
|
watch(
|
|
() => stepState.current,
|
|
v => {
|
|
if (v === 0) {
|
|
currentComponent.value = StepCheck;
|
|
return;
|
|
}
|
|
if (v === 1) {
|
|
const StepNeInfo = defineAsyncComponent(
|
|
() => import('./components/StepNeInfo.vue')
|
|
);
|
|
currentComponent.value = StepNeInfo;
|
|
return;
|
|
}
|
|
if (v === 2) {
|
|
const StepInstall = defineAsyncComponent(
|
|
() => import('./components/StepInstall.vue')
|
|
);
|
|
currentComponent.value = StepInstall;
|
|
return;
|
|
}
|
|
if (v === 3) {
|
|
// 读取第二步的网元信息
|
|
const stepNeInfo = stepState.states[1].from;
|
|
if (stepNeInfo.neType === 'SMF') {
|
|
const StepConfigSMF = defineAsyncComponent(
|
|
() => import('./components/StepConfigSMF.vue')
|
|
);
|
|
currentComponent.value = StepConfigSMF;
|
|
} else if (stepNeInfo.neType === 'AMF') {
|
|
const StepConfigText = defineAsyncComponent(
|
|
() => import('./components/StepConfigText.vue')
|
|
);
|
|
currentComponent.value = StepConfigText;
|
|
} else {
|
|
const StepConfig = defineAsyncComponent(
|
|
() => import('./components/StepConfig.vue')
|
|
);
|
|
currentComponent.value = StepConfig;
|
|
}
|
|
return;
|
|
}
|
|
if (v === 4) {
|
|
const StepActivate = defineAsyncComponent(
|
|
() => import('./components/StepActivate.vue')
|
|
);
|
|
currentComponent.value = StepActivate;
|
|
return;
|
|
}
|
|
if (v === 5) {
|
|
const StepFinish = defineAsyncComponent(
|
|
() => import('./components/StepFinish.vue')
|
|
);
|
|
currentComponent.value = StepFinish;
|
|
return;
|
|
}
|
|
}
|
|
);
|
|
|
|
onMounted(()=>{
|
|
fnRestStepState()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<PageContainer>
|
|
<!-- 步骤进度 -->
|
|
<a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
|
|
<a-steps :current="stepState.current" direction="horizontal">
|
|
<a-step
|
|
v-for="s in stepState.steps"
|
|
:key="s.title"
|
|
:title="s.title"
|
|
:description="s.description"
|
|
:disabled="true"
|
|
/>
|
|
</a-steps>
|
|
</a-card>
|
|
|
|
<a-card
|
|
:bordered="false"
|
|
:body-style="{ padding: '12px', minHeight: '450px' }"
|
|
>
|
|
<!-- 插槽-卡片左侧侧 -->
|
|
<template #title>
|
|
<div>
|
|
{{ stepState.steps[stepState.current].title }}
|
|
Check, NeInfo, Install, Config, Activate, Finish
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 插槽-卡片右侧 -->
|
|
<template #extra>
|
|
<a-space :size="8" align="center">
|
|
<a-button
|
|
v-if="stepState.current > 0"
|
|
style="margin-left: 8px"
|
|
@click="fnStepPrev()"
|
|
>
|
|
上一步
|
|
</a-button>
|
|
<a-button
|
|
v-if="stepState.current < stepState.steps.length - 1"
|
|
type="primary"
|
|
:disabled="!stepState.stepNext"
|
|
@click="fnStepNext()"
|
|
>
|
|
下一步
|
|
</a-button>
|
|
<a-button
|
|
v-if="stepState.current == stepState.steps.length - 1"
|
|
type="primary"
|
|
@click="message.success('Processing complete!')"
|
|
>
|
|
完成
|
|
</a-button>
|
|
</a-space>
|
|
</template>
|
|
|
|
<!-- 步骤页面 -->
|
|
<component :is="currentComponent" />
|
|
</a-card>
|
|
</PageContainer>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.pane-box {
|
|
padding: 16px;
|
|
height: calc(100vh - 320px);
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|