perf: 优化快速安装配置公共参数页面

src/views/ne/neQuickSetup/index.vue

@@ -1,45 +1,47 @@
 <script lang="ts" setup>
 import { PageContainer } from 'antdv-pro-layout';
 import Para5GForm from './components/Para5GForm.vue';
-import { stepState, useStep } from './hooks/useStep';
+import {
+  stepState,
+  fnToStepName,
+  fnRestStepState,
+  useStep,
+} from './hooks/useStep';
 import { usePara5G } from './hooks/usePara5G';
 import useI18n from '@/hooks/useI18n';
-import { ref } from 'vue';
+import { onMounted, onUnmounted, watch } from 'vue';
 const { t } = useI18n();
-
 const { currentComponent } = useStep(t);
-const { state, fnReloadData, fnSaveData } = usePara5G(t);
+const { state, fnReloadData, fnSaveData } = usePara5G();
+
+watch(
+  () => stepState.stepName,
+  v => {
+    if (v === 'Para5G') {
+      fnReloadData();
+    }
+  }
+);
+
+onMounted(() => {
+  fnReloadData();
+});
+
+onUnmounted(() => {
+  fnRestStepState(t);
+});
 
-const installNE = ref(false);
 /**公共参数保存前下一步进行网元安装 */
 function fnNext() {
   fnSaveData().then(() => {
-    installNE.value = !installNE.value;
+    fnToStepName('Start');
   });
 }
 </script>
 
 <template>
   <PageContainer>
-    <a-card :bordered="false" v-if="installNE">
-      <!-- 插槽-卡片左侧 -->
-      <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>
-    <a-card :bordered="false" v-else>
+    <a-card :bordered="false" v-if="stepState.stepName === 'Para5G'">
       <!-- 公共参数表单 -->
       <Para5GForm v-model:data="state.from" :ne="state.hasNE"></Para5GForm>
 
@@ -63,6 +65,24 @@ function fnNext() {
         </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>