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

src/views/ne/neQuickSetup/components/Para5GForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, watch } from 'vue';
+import { ref, watch } from 'vue';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
 const emit = defineEmits(['update:data']);
@@ -21,98 +21,61 @@ const props = defineProps({
   },
 });
 
-/**对话框对象信息状态类型 */
+/**表单信息状态 */
-type StateType = {
+let fromState = ref({
-  /**表单数据 */
+  basic: {
-  from: Record<string, any>;
+    plmnId: {
-  /**根据网元显示配置项 */
+      mcc: '001',
-  hasNE: {
+      mnc: '01',
-    amf: boolean;
-    upf: boolean;
-    ims: boolean;
-    mme: boolean;
-  };
-};
-
-/**对话框对象信息状态 */
-let state: StateType = reactive({
-  from: {
-    basic: {
-      plmnId: {
-        mcc: '001',
-        mnc: '01',
-      },
-      tac: '4388',
-      snssai: {
-        sst: '1',
-        sd: '000001',
-      },
-      dnn_data: 'internet',
-      dnn_ims: 'ims',
     },
-    external: {
+    tac: '4388',
-      amfn2_ip: '192.168.8.120',
+    snssai: {
-      upfn3_ip: '192.168.8.190/24',
+      sst: '1',
-      upfn3_gw: '192.168.1.1',
+      sd: '000001',
-      upfn6_ip: '192.168.8.191/24',
-      upfn6_gw: '192.168.1.1',
-      ue_pool: '10.2.1.0/24',
-      // 非指定属性
-      mmes1_ip: '192.168.8.220/20',
-      mmes10_ip: '172.16.5.221/24',
-      mmes11_ip: '172.16.5.220/24',
-      ims_sip_ip: '192.168.8.110',
-      upf_type: 'LightUPF',
-      upfn3_pci: '0000:00:00.0',
-      upfn3_mac: '00:00:00:00:00:00',
-      upfn6_pci: '0000:00:00.0',
-      upfn6_mac: '00:00:00:00:00:00',
-    },
-    sbi: {
-      omc_ip: '172.16.5.100',
-      ims_ip: '172.16.5.110',
-      amf_ip: '172.16.5.120',
-      ausf_ip: '172.16.5.130',
-      udm_ip: '172.16.5.140',
-      db_ip: '0.0.0.0',
-      smf_ip: '172.16.5.150',
-      pcf_ip: '172.16.5.160',
-      nssf_ip: '172.16.5.170',
-      nrf_ip: '172.16.5.180',
-      upf_ip: '172.16.5.190',
-      lmf_ip: '172.16.5.200',
-      nef_ip: '172.16.5.210',
-      mme_ip: '172.16.5.220',
-      n3iwf_ip: '172.16.5.230',
     },
+    dnn_data: 'internet',
+    dnn_ims: 'ims',
   },
-  hasNE: {
+  external: {
-    amf: false,
+    amfn2_ip: '192.168.8.120',
-    upf: false,
+    upfn3_ip: '192.168.8.190/24',
-    ims: false,
+    upfn3_gw: '192.168.1.1',
-    mme: false,
+    upfn6_ip: '192.168.8.191/24',
+    upfn6_gw: '192.168.1.1',
+    ue_pool: '10.2.1.0/24',
+    // 非指定属性
+    mmes1_ip: '192.168.8.220/20',
+    mmes10_ip: '172.16.5.221/24',
+    mmes11_ip: '172.16.5.220/24',
+    ims_sip_ip: '192.168.8.110',
+    upf_type: 'LightUPF',
+    upfn3_pci: '0000:00:00.0',
+    upfn3_mac: '00:00:00:00:00:00',
+    upfn6_pci: '0000:00:00.0',
+    upfn6_mac: '00:00:00:00:00:00',
+  },
+  sbi: {
+    omc_ip: '172.16.5.100',
+    ims_ip: '172.16.5.110',
+    amf_ip: '172.16.5.120',
+    ausf_ip: '172.16.5.130',
+    udm_ip: '172.16.5.140',
+    db_ip: '0.0.0.0',
+    smf_ip: '172.16.5.150',
+    pcf_ip: '172.16.5.160',
+    nssf_ip: '172.16.5.170',
+    nrf_ip: '172.16.5.180',
+    upf_ip: '172.16.5.190',
+    lmf_ip: '172.16.5.200',
+    nef_ip: '172.16.5.210',
+    mme_ip: '172.16.5.220',
+    n3iwf_ip: '172.16.5.230',
   },
 });
 
 /**监听数据 */
 watch(
-  () => props.data,
+  () => fromState,
-  val => {
-    if (val) Object.assign(state.from, val);
-  },
-  { deep: true }
-);
-
-watch(
-  () => props.ne,
-  val => {
-    if (val) Object.assign(state.hasNE, val);
-  },
-  { deep: true }
-);
-
-watch(
-  () => state.from,
   val => {
     if (val) emit('update:data', val);
   },
@@ -134,7 +97,7 @@ watch(
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="DNN_DATA" name="basic.dnn_data">
               <a-input
-                v-model:value="state.from.basic.dnn_data"
+                v-model:value="fromState.basic.dnn_data"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -149,13 +112,13 @@ watch(
             </a-form-item>
             <a-form-item label="MCC" name="basic.plmnId.mcc">
               <a-input
-                v-model:value="state.from.basic.plmnId.mcc"
+                v-model:value="fromState.basic.plmnId.mcc"
                 placeholder="1-65535"
               ></a-input>
             </a-form-item>
             <a-form-item label="SST" name="basic.snssai.sst">
               <a-input-number
-                v-model:value="state.from.basic.snssai.sst"
+                v-model:value="fromState.basic.snssai.sst"
                 :min="1"
                 :max="3"
                 placeholder="1-3"
@@ -171,7 +134,7 @@ watch(
             </a-form-item>
             <a-form-item label="TAC" name="basic.tac">
               <a-input
-                v-model:value="state.from.basic.tac"
+                v-model:value="fromState.basic.tac"
                 placeholder="1-65535"
               ></a-input>
             </a-form-item>
@@ -179,7 +142,7 @@ watch(
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="DNN_IMS" name="basic.dnn_ims">
               <a-input
-                v-model:value="state.from.basic.dnn_ims"
+                v-model:value="fromState.basic.dnn_ims"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -188,13 +151,13 @@ watch(
             </a-form-item>
             <a-form-item label="MNC" name="basic.plmnId.mnc">
               <a-input
-                v-model:value="state.from.basic.plmnId.mnc"
+                v-model:value="fromState.basic.plmnId.mnc"
                 placeholder="1-65535"
               ></a-input>
             </a-form-item>
             <a-form-item label="SD" name="basic.snssai.sd">
               <a-input
-                v-model:value="state.from.basic.snssai.sd"
+                v-model:value="fromState.basic.snssai.sd"
                 placeholder="1-65535"
               ></a-input>
             </a-form-item>
@@ -214,7 +177,7 @@ watch(
               :validateTrigger="[]"
             >
               <a-input
-                v-model:value="state.from.sbi.omc_ip"
+                v-model:value="fromState.sbi.omc_ip"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -231,14 +194,13 @@ watch(
             </a-form-item>
           </a-col>
         </a-row>
-
+        <template v-if="props.ne.amf">
-        <template v-if="state.hasNE.amf">
           <a-divider orientation="left">AMF</a-divider>
           <a-row :gutter="16">
             <a-col :lg="24" :md="24" :xs="24">
               <a-form-item label="N2_IP" name="external.amfn2_ip">
                 <a-input
-                  v-model:value="state.from.external.amfn2_ip"
+                  v-model:value="fromState.external.amfn2_ip"
                   allow-clear
                   :placeholder="t('common.inputPlease')"
                   :maxlength="50"
@@ -256,7 +218,7 @@ watch(
         </template>
       </a-col>
 
-      <a-col :lg="16" :md="16" :xs="24" v-if="state.hasNE.upf">
+      <a-col :lg="16" :md="16" :xs="24" v-if="props.ne.upf">
         <a-divider orientation="left">UPF</a-divider>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
@@ -266,7 +228,7 @@ watch(
               help="Install of Standard or Light"
             >
               <a-select
-                v-model:value="state.from.external.upf_type"
+                v-model:value="fromState.external.upf_type"
                 :placeholder="t('common.selectPlease')"
               >
                 <a-select-option value="StandardUPF">
@@ -279,7 +241,7 @@ watch(
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="UE_POOL" name="external.ue_pool">
               <a-input
-                v-model:value="state.from.external.ue_pool"
+                v-model:value="fromState.external.ue_pool"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -299,7 +261,7 @@ watch(
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item label="N3_IP" name="external.upfn3_ip">
               <a-input
-                v-model:value="state.from.external.upfn3_ip"
+                v-model:value="fromState.external.upfn3_ip"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -314,7 +276,7 @@ watch(
             </a-form-item>
             <a-form-item label="N3_GW" name="external.upfn3_gw">
               <a-input
-                v-model:value="state.from.external.upfn3_gw"
+                v-model:value="fromState.external.upfn3_gw"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -332,11 +294,11 @@ watch(
             :lg="12"
             :md="12"
             :xs="24"
-            v-if="state.from.external.upf_type === 'StandardUPF'"
+            v-if="fromState.external.upf_type === 'StandardUPF'"
           >
             <a-form-item label="N3_PCI" name="external.upfn3_pci">
               <a-input
-                v-model:value="state.from.external.upfn3_pci"
+                v-model:value="fromState.external.upfn3_pci"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -353,7 +315,7 @@ watch(
             </a-form-item>
             <a-form-item label="N3_MAC" name="external.upfn3_mac">
               <a-input
-                v-model:value="state.from.external.upfn3_mac"
+                v-model:value="fromState.external.upfn3_mac"
                 allow-clear
                 :placeholder="t('common.inputPlease')"
                 :maxlength="50"
@@ -370,12 +332,12 @@ watch(
             </a-form-item>
           </a-col>
         </a-row>
-        <template v-if="state.from.external.upf_type === 'StandardUPF'">
+        <template v-if="fromState.external.upf_type === 'StandardUPF'">
           <a-row :gutter="16">
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="N6_IP" name="external.upfn6_ip">
                 <a-input
-                  v-model:value="state.from.external.upfn6_ip"
+                  v-model:value="fromState.external.upfn6_ip"
                   allow-clear
                   :placeholder="t('common.inputPlease')"
                   :maxlength="50"
@@ -384,7 +346,7 @@ watch(
               </a-form-item>
               <a-form-item label="N6_GW" name="external.upfn6_gw">
                 <a-input
-                  v-model:value="state.from.external.upfn6_gw"
+                  v-model:value="fromState.external.upfn6_gw"
                   allow-clear
                   :placeholder="t('common.inputPlease')"
                   :maxlength="50"
@@ -395,7 +357,7 @@ watch(
             <a-col :lg="12" :md="12" :xs="24">
               <a-form-item label="N6_PCI" name="external.upfn6_pci">
                 <a-input
-                  v-model:value="state.from.external.upfn6_pci"
+                  v-model:value="fromState.external.upfn6_pci"
                   allow-clear
                   :placeholder="t('common.inputPlease')"
                   :maxlength="50"
@@ -404,7 +366,7 @@ watch(
               </a-form-item>
               <a-form-item label="N6_MAC" name="external.upfn6_mac">
                 <a-input
-                  v-model:value="state.from.external.upfn6_mac"
+                  v-model:value="fromState.external.upfn6_mac"
                   allow-clear
                   :placeholder="t('common.inputPlease')"
                   :maxlength="50"
@@ -417,13 +379,13 @@ watch(
       </a-col>
 
       <a-col :lg="8" :md="8" :xs="24">
-        <template v-if="state.hasNE.ims">
+        <template v-if="props.ne.ims">
           <a-divider orientation="left">IMS</a-divider>
           <a-row :gutter="16">
             <a-col :lg="24" :md="24" :xs="24">
               <a-form-item label="SIP_IP" name="external.ims_sip_ip">
                 <a-input
-                  v-model:value="state.from.external.ims_sip_ip"
+                  v-model:value="fromState.external.ims_sip_ip"
                   allow-clear
                   :placeholder="t('common.inputPlease')"
                   :maxlength="50"
@@ -440,13 +402,13 @@ watch(
           </a-row>
         </template>
 
-        <template v-if="state.hasNE.mme">
+        <template v-if="props.ne.mme">
           <a-divider orientation="left">MME</a-divider>
           <a-row :gutter="16">
             <a-col :lg="24" :md="24" :xs="24">
               <a-form-item label="S1_IP" name="external.mmes1_ip">
                 <a-input
-                  v-model:value="state.from.external.mmes1_ip"
+                  v-model:value="fromState.external.mmes1_ip"
                   allow-clear
                   :placeholder="t('common.inputPlease')"
                   :maxlength="50"
@@ -465,7 +427,7 @@ watch(
               </a-form-item>
               <a-form-item label="S10_IP" name="external.mmes10_ip">
                 <a-input
-                  v-model:value="state.from.external.mmes10_ip"
+                  v-model:value="fromState.external.mmes10_ip"
                   allow-clear
                   :placeholder="t('common.inputPlease')"
                   :maxlength="50"
@@ -480,7 +442,7 @@ watch(
               </a-form-item>
               <a-form-item label="S11_IP" name="external.mmes11_ip">
                 <a-input
-                  v-model:value="state.from.external.mmes11_ip"
+                  v-model:value="fromState.external.mmes11_ip"
                   allow-clear
                   :placeholder="t('common.inputPlease')"
                   :maxlength="50"

src/views/ne/neQuickSetup/components/Start.vue

@@ -231,6 +231,17 @@ function fnHostAuthorized() {
   });
 }
 
+/**返回上一步 */
+function fnStepPrev() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.ne.neQuickSetup.stepPrevTip'),
+    onOk() {
+      fnToStepName('Para5G');
+    },
+  });
+}
+
 /**下一步操作 */
 function fnStepNext() {
   if (!state.stepNext) return;
@@ -254,207 +265,232 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-descriptions :column="{ lg: 3, md: 2, sm: 2, xs: 1 }" bordered>
+  <div class="ne">
-    <a-descriptions-item :label="t('views.ne.neQuickSetup.addr')" :span="3">
+    <a-descriptions :column="{ lg: 3, md: 2, sm: 2, xs: 1 }" bordered>
-      {{ state.info.addr }}
+      <a-descriptions-item :label="t('views.ne.neQuickSetup.addr')" :span="3">
-    </a-descriptions-item>
+        {{ state.info.addr }}
-    <a-descriptions-item :label="t('views.ne.neQuickSetup.kernelName')">
+      </a-descriptions-item>
-      {{ state.info.kernelName }}
+      <a-descriptions-item :label="t('views.ne.neQuickSetup.kernelName')">
-    </a-descriptions-item>
+        {{ state.info.kernelName }}
-    <a-descriptions-item :label="t('views.ne.neQuickSetup.machine')">
+      </a-descriptions-item>
-      {{ state.info.machine }}
+      <a-descriptions-item :label="t('views.ne.neQuickSetup.machine')">
-    </a-descriptions-item>
+        {{ state.info.machine }}
-    <a-descriptions-item :label="t('views.ne.neQuickSetup.kernelRelease')">
+      </a-descriptions-item>
-      {{ state.info.kernelRelease }}
+      <a-descriptions-item :label="t('views.ne.neQuickSetup.kernelRelease')">
-    </a-descriptions-item>
+        {{ state.info.kernelRelease }}
-    <a-descriptions-item>
+      </a-descriptions-item>
-      <template #label>
+      <a-descriptions-item>
-        {{ t('views.ne.neQuickSetup.prettyName') }}
+        <template #label>
-        <a-tooltip placement="topLeft">
+          {{ t('views.ne.neQuickSetup.prettyName') }}
-          <template #title>
+          <a-tooltip placement="topLeft">
-            {{ t('views.ne.neQuickSetup.prettyNameTip') }}
+            <template #title>
+              {{ t('views.ne.neQuickSetup.prettyNameTip') }}
+            </template>
+            <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+          </a-tooltip>
+        </template>
+        {{ state.info.prettyName }}
+      </a-descriptions-item>
+      <a-descriptions-item :label="t('views.ne.neQuickSetup.nodename')">
+        {{ state.info.nodename }}
+      </a-descriptions-item>
+      <a-descriptions-item :label="t('views.ne.neQuickSetup.auth')">
+        <a-tag :color="state.info.sudo ? 'success' : 'error'">
+          <template #icon>
+            <CheckCircleOutlined v-if="state.info.sudo" />
+            <CloseCircleOutlined v-else />
           </template>
-          <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+          {{ t('views.ne.neQuickSetup.sudo') }}
-        </a-tooltip>
+        </a-tag>
-      </template>
-      {{ state.info.prettyName }}
-    </a-descriptions-item>
-    <a-descriptions-item :label="t('views.ne.neQuickSetup.nodename')">
-      {{ state.info.nodename }}
-    </a-descriptions-item>
-    <a-descriptions-item :label="t('views.ne.neQuickSetup.auth')">
-      <a-tag :color="state.info.sudo ? 'success' : 'error'">
-        <template #icon>
-          <CheckCircleOutlined v-if="state.info.sudo" />
-          <CloseCircleOutlined v-else />
-        </template>
-        {{ t('views.ne.neQuickSetup.sudo') }}
-      </a-tag>
 
-      <a-tag :color="state.info.sshLink ? 'success' : 'error'">
+        <a-tag :color="state.info.sshLink ? 'success' : 'error'">
-        <template #icon>
+          <template #icon>
-          <CheckCircleOutlined v-if="state.info.sshLink" />
+            <CheckCircleOutlined v-if="state.info.sshLink" />
-          <CloseCircleOutlined v-else />
+            <CloseCircleOutlined v-else />
-        </template>
+          </template>
-        {{ t('views.ne.neQuickSetup.sshLink') }}
+          {{ t('views.ne.neQuickSetup.sshLink') }}
-      </a-tag>
+        </a-tag>
-    </a-descriptions-item>
+      </a-descriptions-item>
-    <a-descriptions-item :span="2">
+    </a-descriptions>
-      <a-form
+
-        name="checkStateFrom"
+    <a-form
-        layout="horizontal"
+      name="checkStateFrom"
-        :label-col="{ span: 6 }"
+      layout="horizontal"
-        :label-wrap="false"
+      :label-col="{ span: 6 }"
+      :label-wrap="true"
+      style="margin-top: 20px; width: 68%"
+    >
+      <a-row :gutter="8">
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.ne.neHost.addr')"
+            name="addr"
+            v-bind="checkStateFrom.validateInfos.addr"
+          >
+            <a-input
+              v-model:value="state.from.addr"
+              allow-clear
+              :maxlength="128"
+              :placeholder="t('common.inputPlease')"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.ne.neHost.port')"
+            name="port"
+            v-bind="checkStateFrom.validateInfos.port"
+          >
+            <a-input-number
+              v-model:value="state.from.port"
+              :min="10"
+              :max="65535"
+              :step="1"
+              :maxlength="5"
+              style="width: 100%"
+            ></a-input-number>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-row :gutter="16">
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.ne.neHost.user')"
+            name="user"
+            v-bind="checkStateFrom.validateInfos.user"
+          >
+            <a-input
+              v-model:value="state.from.user"
+              allow-clear
+              :maxlength="32"
+              :placeholder="t('common.inputPlease')"
+            >
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item :label="t('views.ne.neHost.authMode')">
+            <a-select
+              v-model:value="state.from.authMode"
+              default-value="0"
+              :options="dict.neHostAuthMode"
+            >
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <a-form-item
+        v-if="state.from.authMode === '0'"
+        :label="t('views.ne.neHost.password')"
+        :label-col="{ span: 3 }"
+        :label-wrap="true"
+        name="password"
+        v-bind="checkStateFrom.validateInfos.password"
       >
-        <a-row :gutter="16">
+        <a-input-password
-          <a-col :lg="12" :md="12" :xs="24">
+          v-model:value="state.from.password"
-            <a-form-item
+          :maxlength="128"
-              :label="t('views.ne.neHost.addr')"
+          :placeholder="t('common.inputPlease')"
-              name="addr"
+        >
-              v-bind="checkStateFrom.validateInfos.addr"
+        </a-input-password>
-            >
+      </a-form-item>
-              <a-input
-                v-model:value="state.from.addr"
-                allow-clear
-                :maxlength="128"
-                :placeholder="t('common.inputPlease')"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.ne.neHost.port')"
-              name="port"
-              v-bind="checkStateFrom.validateInfos.port"
-            >
-              <a-input-number
-                v-model:value="state.from.port"
-                :min="10"
-                :max="65535"
-                :step="1"
-                :maxlength="5"
-                style="width: 100%"
-              ></a-input-number>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.ne.neHost.user')"
-              name="user"
-              v-bind="checkStateFrom.validateInfos.user"
-            >
-              <a-input
-                v-model:value="state.from.user"
-                allow-clear
-                :maxlength="32"
-                :placeholder="t('common.inputPlease')"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.ne.neHost.authMode')">
-              <a-select
-                v-model:value="state.from.authMode"
-                default-value="0"
-                :options="dict.neHostAuthMode"
-              >
-              </a-select>
-            </a-form-item>
-          </a-col>
-        </a-row>
 
+      <template v-if="state.from.authMode === '1'">
         <a-form-item
-          v-if="state.from.authMode === '0'"
+          :label="t('views.ne.neHost.privateKey')"
-          :label="t('views.ne.neHost.password')"
+          :label-col="{ span: 3 }"
+          :label-wrap="true"
+          name="privateKey"
+          v-bind="checkStateFrom.validateInfos.privateKey"
+        >
+          <a-textarea
+            v-model:value="state.from.privateKey"
+            :auto-size="{ minRows: 4, maxRows: 6 }"
+            :maxlength="3000"
+            :show-count="true"
+            :placeholder="t('views.ne.neHost.privateKeyPlease')"
+          />
+        </a-form-item>
+
+        <a-form-item
+          :label="t('views.ne.neHost.passPhrase')"
           :label-col="{ span: 3 }"
           :label-wrap="true"
-          name="password"
-          v-bind="checkStateFrom.validateInfos.password"
         >
           <a-input-password
-            v-model:value="state.from.password"
+            v-model:value="state.from.passPhrase"
             :maxlength="128"
             :placeholder="t('common.inputPlease')"
           >
           </a-input-password>
         </a-form-item>
+      </template>
 
-        <template v-if="state.from.authMode === '1'">
+      <a-form-item :wrapper-col="{ span: 8, offset: 3 }">
-          <a-form-item
+        <a-space direction="horizontal" :size="18">
-            :label="t('views.ne.neHost.privateKey')"
+          <a-button
-            :label-col="{ span: 3 }"
+            type="primary"
-            :label-wrap="true"
+            ghost
-            name="privateKey"
+            html-type="submit"
-            v-bind="checkStateFrom.validateInfos.privateKey"
+            @click="fnCheckInfo()"
+            :loading="state.confirmLoading"
           >
-            <a-textarea
+            {{ t('views.ne.neHost.test') }}
-              v-model:value="state.from.privateKey"
+          </a-button>
-              :auto-size="{ minRows: 4, maxRows: 6 }"
-              :maxlength="3000"
-              :show-count="true"
-              :placeholder="t('views.ne.neHost.privateKeyPlease')"
-            />
-          </a-form-item>
 
-          <a-form-item
+          <a-button
-            :label="t('views.ne.neHost.passPhrase')"
+            type="dashed"
-            :label-col="{ span: 3 }"
+            @click="fnHostAuthorized()"
-            :label-wrap="true"
+            :disabled="state.confirmLoading"
+            v-if="state.from.authMode !== '2'"
           >
-            <a-input-password
+            {{ t('views.ne.neHost.authRSA') }}
-              v-model:value="state.from.passPhrase"
+          </a-button>
-              :maxlength="128"
-              :placeholder="t('common.inputPlease')"
-            >
-            </a-input-password>
-          </a-form-item>
-        </template>
 
-        <a-form-item :wrapper-col="{ span: 10, offset: 3 }">
+          <a-button
-          <a-space direction="horizontal" :size="18">
+            type="link"
-            <a-button
+            @click="fnCheckInfoReset()"
-              type="primary"
+            :disabled="state.confirmLoading"
-              ghost
+          >
-              html-type="submit"
+            {{ t('common.reset') }}
-              @click="fnCheckInfo()"
+          </a-button>
-              :loading="state.confirmLoading"
+        </a-space>
-            >
+      </a-form-item>
-              {{ t('views.ne.neHost.test') }}
+    </a-form>
-            </a-button>
-            <a-button
-              type="primary"
-              @click="fnStepNext()" 
-              :disabled="!state.stepNext"
-            >
-              {{ t('views.ne.neQuickSetup.stepNext') }}
-            </a-button>
 
-            <a-button
+    <div class="ne-oper">
-              type="dashed"
+      <a-space direction="horizontal" :size="18">
-              @click="fnHostAuthorized()"
+        <a-button @click="fnStepPrev()">
-              :disabled="state.confirmLoading"
+          {{ t('views.ne.neQuickSetup.stepPrev') }}
-              v-if="state.from.authMode !== '2'"
+        </a-button>
-            >
-              {{ t('views.ne.neHost.authRSA') }}
-            </a-button>
 
-            <a-button
+        <a-button
-              type="link"
+          type="primary"
-              @click="fnCheckInfoReset()"
+          @click="fnStepNext()"
-              :disabled="state.confirmLoading"
+          :disabled="!state.stepNext"
-            >
+        >
-              {{ t('common.reset') }}
+          {{ t('views.ne.neQuickSetup.stepNext') }}
-            </a-button>
+        </a-button>
-          </a-space>
+      </a-space>
-        </a-form-item>
+    </div>
-      </a-form>
+  </div>
-    </a-descriptions-item>
-  </a-descriptions>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.ne {
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+
+  & .ant-form {
+    flex: 1;
+  }
+
+  &-oper {
+    text-align: end;
+  }
+}
+</style>

src/views/ne/neQuickSetup/hooks/usePara5G.ts

@@ -1,4 +1,4 @@
-import { onMounted, reactive, toRaw } from 'vue';
+import { reactive, toRaw } from 'vue';
 import { getPara5GFilee, savePara5GFile, updateNeInfo } from '@/api/ne/neInfo';
 import useNeInfoStore from '@/store/modules/neinfo';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
@@ -20,7 +20,7 @@ type StateType = {
   confirmLoading: boolean;
 };
 
-export function usePara5G({ t }: any) {
+export function usePara5G() {
   /**对象信息状态 */
   let state: StateType = reactive({
     from: {},
@@ -52,7 +52,7 @@ export function usePara5G({ t }: any) {
             // 公共配置文件sbi的各网元IP
             switch (item.neType) {
               case 'OMC':
-                // state.from.sbi.omc_ip = item.ip;
+                state.from.sbi.omc_ip = item.ip;
                 Object.assign(state.omcInfo, item); // 主动改OMC_IP
                 break;
               case 'IMS':
@@ -120,17 +120,15 @@ export function usePara5G({ t }: any) {
     });
     if (res.code === RESULT_CODE_SUCCESS) {
       // 更新omc_ip
-      state.omcInfo.ip = state.from.sbi.omc_ip;
+      if (state.omcInfo.id) {
-      await updateNeInfo(toRaw(state.omcInfo));
+        state.omcInfo.ip = state.from.sbi.omc_ip;
+        await updateNeInfo(toRaw(state.omcInfo));
+      }
     }
     state.confirmLoading = false;
     return res;
   }
 
-  onMounted(() => {
-    fnReloadData();
-  });
-
   return {
     state,
     fnReloadData,

src/views/ne/neQuickSetup/hooks/useStep.ts

@@ -22,7 +22,7 @@ type StepStateType = {
 
 /**步骤信息状态 */
 export const stepState: StepStateType = reactive({
-  stepName: 'Start',
+  stepName: 'Para5G',
   steps: [
     {
       title: '服务器环境',
@@ -41,15 +41,15 @@ export const stepState: StepStateType = reactive({
       description: '网元服务授权激活',
     },
   ],
-  current: 0,
+  current: -1,
   neHost: {},
   neInfo: {},
 });
 
 /**步骤信息状态复位 */
 export function fnRestStepState(t?: any) {
-  stepState.stepName = 'Start';
+  stepState.stepName = 'Para5G';
-  stepState.current = 0;
+  stepState.current = -1;
   stepState.neHost = {};
   stepState.neInfo = {};
   // 多语言翻译

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">
+    <a-card :bordered="false" v-if="stepState.stepName === 'Para5G'">
-      <!-- 插槽-卡片左侧 -->
-      <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>
       <!-- 公共参数表单 -->
       <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>