90 lines
2.2 KiB
Vue
90 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
import { PageContainer } from 'antdv-pro-layout';
|
|
import Para5GForm from './components/Para5GForm.vue';
|
|
import {
|
|
stepState,
|
|
fnToStepName,
|
|
fnRestStepState,
|
|
useStep,
|
|
} from './hooks/useStep';
|
|
import { usePara5G } from './hooks/usePara5G';
|
|
import useI18n from '@/hooks/useI18n';
|
|
import { onMounted, onUnmounted, watch } from 'vue';
|
|
const { t } = useI18n();
|
|
const { currentComponent } = useStep(t);
|
|
const { state, fnReloadData, fnSaveData } = usePara5G();
|
|
|
|
watch(
|
|
() => stepState.stepName,
|
|
v => {
|
|
if (v === 'Para5G') {
|
|
fnReloadData();
|
|
}
|
|
}
|
|
);
|
|
|
|
onMounted(() => {
|
|
fnReloadData();
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
fnRestStepState(t);
|
|
});
|
|
|
|
/**公共参数保存前下一步进行网元安装 */
|
|
function fnNext() {
|
|
fnSaveData().then(() => {
|
|
fnToStepName('Start');
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<PageContainer>
|
|
<a-card :bordered="false" v-if="stepState.stepName === 'Para5G'">
|
|
<!-- 公共参数表单 -->
|
|
<Para5GForm v-model:data="state.from" :ne="state.hasNE"></Para5GForm>
|
|
|
|
<div style="padding: 24px 12px 0; text-align: end">
|
|
<a-space :size="8" align="center">
|
|
<a-button
|
|
type="default"
|
|
:disabled="state.confirmLoading"
|
|
@click.prevent="fnReloadData()"
|
|
>
|
|
<template #icon><ReloadOutlined /></template>
|
|
{{ t('views.ne.neQuickSetup.reloadPara5G') }}
|
|
</a-button>
|
|
<a-button
|
|
type="primary"
|
|
:loading="state.confirmLoading"
|
|
@click="fnNext()"
|
|
>
|
|
{{ t('views.ne.neQuickSetup.stepNext') }}
|
|
</a-button>
|
|
</a-space>
|
|
</div>
|
|
</a-card>
|
|
<a-card :bordered="false" v-else>
|
|
<!-- 插槽-卡片左侧 -->
|
|
<template #title>
|
|
<!-- 步骤进度 -->
|
|
<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>
|
|
</template>
|
|
|
|
<!-- 步骤页面 -->
|
|
<component :is="currentComponent" />
|
|
</a-card>
|
|
</PageContainer>
|
|
</template>
|
|
|
|
<style lang="less" scoped></style>
|