From a61716d40d0d27bbc19d2f308255cbcf72a44a20 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Wed, 29 May 2024 16:32:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BD=91=E5=85=83=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=E9=85=8D=E7=BD=AE=E8=A1=A8=E5=8D=95=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/locales/en-US.ts                     |   9 +-
 src/i18n/locales/zh-CN.ts                     |   9 +-
 .../ne/neConfPara5G/components/Para5GForm.vue | 501 ++++++++++++++++++
 src/views/ne/neConfPara5G/index.vue           | 257 ++-------
 .../components/NeInfoConfigPara5G.vue         | 238 ++-------
 5 files changed, 588 insertions(+), 426 deletions(-)
 create mode 100644 src/views/ne/neConfPara5G/components/Para5GForm.vue

diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 1b225f89..5e1019f5 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -747,10 +747,13 @@ export default {
         uploadChangeFail: "Some network elements failed to update the license, please check whether the service terminal environment is available!",
       },
       neConfPara5G: {
+        save: 'Save',
+        reload: 'Reload',
         title: 'Save Info',
         sync: 'Sync to NE',
         syncNe: 'Select NE',
-        save: 'Save Success!',
+        syncNeDone: 'Synchronization to network element terminals complete',
+        saveOk: 'Save Success!', 
       },
       neQuickSetup: {
         stepPrev: 'Previous',
@@ -1690,8 +1693,8 @@ export default {
         i18nDefault: "Default Languages",
         i18nInstruction: 'Whether to display the internationalization switch and set the system default language',
         reset: "System Reset",
-        resetInstruction: "System reset will destroy all data in the current system, please operate with caution.",
-        resetTipContent: 'System reset will destroy all data in the current system. Are you sure you want to continue?',
+        resetInstruction: "A system reset will erase all data in the current system, please proceed with caution!!!!",
+        resetTipContent: 'Are you sure you want to clear all data from the current system and insist on continuing?',
       },
       role:{
         allScopeOptions:'All data permissions',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 104f98e2..634eedd6 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -747,10 +747,13 @@ export default {
         uploadChangeFail: "部分网元更新许可证失败，请检查服务终端环境是否可用！",
       },
       neConfPara5G: {
+        save: '保存',
+        reload: '刷新',
         title: '保存信息',
         sync: '同步到网元',
         syncNe: '选择网元',
-        save: '保存成功！',
+        syncNeDone: '同步到网元终端完成',
+        saveOk: '保存成功！',
       },
       neQuickSetup: {
         stepPrev: '上一步',
@@ -1690,8 +1693,8 @@ export default {
         i18nDefault: "默认语言",
         i18nInstruction: '是否显示国际化切换，设置系统默认语言',
         reset: "系统重置",
-        resetInstruction: "系统重置将会销毁当前系统内所有数据，请谨慎操作。",
-        resetTipContent: '系统重置将会销毁当前系统内所有数据，确认要继续吗?',
+        resetInstruction: "系统重置将会清除当前系统内所有数据，请谨慎操作！！！",
+        resetTipContent: '确认要清除当前系统内所有数据并坚持继续吗?',
       },
       role:{
         allScopeOptions:'全部数据权限',
diff --git a/src/views/ne/neConfPara5G/components/Para5GForm.vue b/src/views/ne/neConfPara5G/components/Para5GForm.vue
new file mode 100644
index 00000000..167b8beb
--- /dev/null
+++ b/src/views/ne/neConfPara5G/components/Para5GForm.vue
@@ -0,0 +1,501 @@
+<script setup lang="ts">
+import { reactive, onMounted, watch } from 'vue';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+const emit = defineEmits(['update:data']);
+const props = defineProps({
+  /**表单数据 */
+  data: {
+    type: Object,
+    required: true,
+  },
+  /**根据网元显示配置项 */
+  ne: {
+    type: Object,
+    default: () => ({
+      amf: false,
+      upf: false,
+      ims: false,
+      mme: false,
+    }),
+  },
+});
+
+/**对话框对象信息状态类型 */
+type StateType = {
+  /**表单数据 */
+  from: Record<string, any>;
+  /**根据网元显示配置项 */
+  hasNE: {
+    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: {
+      amfn2_ip: '192.168.8.120',
+      upfn3_ip: '192.168.8.190/24',
+      upfn3_gw: '192.168.1.1',
+      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',
+      adb_ip: '172.16.5.140',
+      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',
+    },
+  },
+  hasNE: {
+    amf: false,
+    upf: false,
+    ims: false,
+    mme: false,
+  },
+});
+
+/**监听数据 */
+watch(
+  () => props.data,
+  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);
+  },
+  { deep: true }
+);
+
+onMounted(() => {});
+</script>
+
+<template>
+  <a-form
+    name="para5GFileeFrom"
+    layout="horizontal"
+    :label-col="{ span: 8 }"
+    :label-wrap="true"
+  >
+    <a-row :gutter="16">
+      <a-col :lg="16" :md="16" :xs="24">
+        <a-divider orientation="left">Basic</a-divider>
+        <a-row :gutter="16">
+          <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"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title> DNN </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+            <a-form-item label="MCC" name="basic.plmnId.mcc">
+              <a-input
+                v-model:value="state.from.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"
+                :min="1"
+                :max="3"
+                placeholder="1-3"
+                style="width: 100%"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title> 1-3 </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input-number>
+            </a-form-item>
+            <a-form-item label="TAC" name="basic.tac">
+              <a-input
+                v-model:value="state.from.basic.tac"
+                placeholder="1-65535"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <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"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+              </a-input>
+            </a-form-item>
+            <a-form-item label="MNC" name="basic.plmnId.mnc">
+              <a-input
+                v-model:value="state.from.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"
+                placeholder="1-65535"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-col>
+
+      <a-col :lg="8" :md="8" :xs="24">
+        <a-divider orientation="left">OMC</a-divider>
+        <a-row :gutter="16">
+          <a-col :lg="24" :md="24" :xs="24">
+            <a-form-item label="EMS_IP" name="sbi.omc_ip">
+              <a-input
+                v-model:value="state.from.sbi.omc_ip"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      Network Elemment send data tu EMS IP
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <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"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="50"
+                >
+                  <template #prefix>
+                    <a-tooltip placement="topLeft">
+                      <template #title> AMF N2 </template>
+                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    </a-tooltip>
+                  </template>
+                </a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </template>
+      </a-col>
+
+      <a-col :lg="16" :md="16" :xs="24" v-if="state.hasNE.upf">
+        <a-divider orientation="left">UPF</a-divider>
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              label="UPF_TYPE"
+              name="external.upf_type"
+              help="Install of Standard or Light"
+            >
+              <a-select
+                v-model:value="state.from.external.upf_type"
+                :placeholder="t('common.selectPlease')"
+              >
+                <a-select-option value="StandardUPF">
+                  StandardUPF
+                </a-select-option>
+                <a-select-option value="LightUPF">LightUPF</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <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"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title> UE IP and maxk </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="16">
+          <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"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title> netwrok ip </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+            <a-form-item label="N3_GW" name="external.upfn3_gw">
+              <a-input
+                v-model:value="state.from.external.upfn3_gw"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title> geteway </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item label="N3_PCI" name="external.upfn3_pci">
+              <a-input
+                v-model:value="state.from.external.upfn3_pci"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      use `ip a` show info, to inet ip
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+            <a-form-item label="N3_MAC" name="external.upfn3_mac">
+              <a-input
+                v-model:value="state.from.external.upfn3_mac"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+                :maxlength="50"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      use `ip a` show info, to inet ip
+                    </template>
+                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <template v-if="state.from.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"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="50"
+                >
+                </a-input>
+              </a-form-item>
+              <a-form-item label="N6_GW" name="external.upfn6_gw">
+                <a-input
+                  v-model:value="state.from.external.upfn6_gw"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="50"
+                >
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <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"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="50"
+                >
+                </a-input>
+              </a-form-item>
+              <a-form-item label="N6_MAC" name="external.upfn6_mac">
+                <a-input
+                  v-model:value="state.from.external.upfn6_mac"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="50"
+                >
+                </a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </template>
+      </a-col>
+
+      <a-col :lg="8" :md="8" :xs="24">
+        <template v-if="state.hasNE.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"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="50"
+                >
+                  <template #prefix>
+                    <a-tooltip placement="topLeft">
+                      <template #title> IMS SIP </template>
+                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    </a-tooltip>
+                  </template>
+                </a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </template>
+
+        <template v-if="state.hasNE.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"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="50"
+                >
+                  <template #prefix>
+                    <a-tooltip placement="topLeft">
+                      <template #title>
+                        MME binded interface for S1-C or S1-MME communication
+                        (S1AP), can be ethernet interface, virtual ethernet
+                        interface, we don't advise wireless interfaces
+                      </template>
+                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    </a-tooltip>
+                  </template>
+                </a-input>
+              </a-form-item>
+              <a-form-item label="S10_IP" name="external.mmes10_ip">
+                <a-input
+                  v-model:value="state.from.external.mmes10_ip"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="50"
+                >
+                  <template #prefix>
+                    <a-tooltip placement="topLeft">
+                      <template #title> Interface </template>
+                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    </a-tooltip>
+                  </template>
+                </a-input>
+              </a-form-item>
+              <a-form-item label="S11_IP" name="external.mmes11_ip">
+                <a-input
+                  v-model:value="state.from.external.mmes11_ip"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="50"
+                >
+                  <template #prefix>
+                    <a-tooltip placement="topLeft">
+                      <template #title>
+                        MME binded interface for S11-U communication (GTPV1-U)
+                      </template>
+                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    </a-tooltip>
+                  </template>
+                </a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </template>
+      </a-col>
+    </a-row>
+  </a-form>
+</template>
+
+<style lang="less" scoped></style>
diff --git a/src/views/ne/neConfPara5G/index.vue b/src/views/ne/neConfPara5G/index.vue
index 5a0e8bf7..d7c57da2 100644
--- a/src/views/ne/neConfPara5G/index.vue
+++ b/src/views/ne/neConfPara5G/index.vue
@@ -11,6 +11,7 @@ import {
   updateNeInfo,
 } from '@/api/ne/neInfo';
 import useNeInfoStore from '@/store/modules/neinfo';
+import Para5GForm from './components/Para5GForm.vue';
 const { t } = useI18n();
 
 /**对象信息信息状态类型 */
@@ -27,6 +28,13 @@ type StateType = {
   from: Record<string, any>;
   /**OMC信息，需修改当前的IP */
   omcInfo: Record<string, any>;
+  /**根据网元显示配置项 */
+  hasNE: {
+    amf: boolean;
+    upf: boolean;
+    ims: boolean;
+    mme: boolean;
+  };
   /**确定按钮 loading */
   confirmLoading: boolean;
 };
@@ -38,47 +46,14 @@ let state: StateType = reactive({
   sync: false,
   syncNe: [],
   syncMsg: '',
-  from: {
-    basic: {
-      plmnId: {
-        mcc: '001',
-        mnc: '01',
-      },
-      tac: '4388',
-      snssai: {
-        sst: '1',
-        sd: '000001',
-      },
-      dnn_data: 'internet',
-      dnn_ims: 'ims',
-    },
-    external: {
-      amfn2_ip: '192.168.8.120',
-      upfn3_ip: '192.168.8.190/24',
-      upfn3_gw: '192.168.1.1',
-      upfn6_ip: '192.168.8.191/24',
-      upfn6_gw: '192.168.1.1',
-      ue_pool: '10.2.1.0/24',
-    },
-    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',
-      adb_ip: '172.16.5.140',
-      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',
-    },
-  },
+  from: {},
   omcInfo: {},
+  hasNE: {
+    amf: false,
+    upf: false,
+    ims: false,
+    mme: false,
+  },
   confirmLoading: false,
 });
 
@@ -92,9 +67,13 @@ function fnModalOk() {
   })
     .then(res => {
       if (state.sync) {
-        state.syncMsg = res.msg;
+        if (res.code === RESULT_CODE_SUCCESS) {
+          state.syncMsg = t('views.ne.neConfPara5G.syncNeDone');
+        } else {
+          state.syncMsg = res.msg;
+        }
       } else {
-        message.success(t('views.ne.neConfPara5G.save'));
+        message.success(t('views.ne.neConfPara5G.saveOk'));
         // 更新omc_ip
         state.omcInfo.ip = state.from.sbi.omc_ip;
         updateNeInfo(toRaw(state.omcInfo));
@@ -145,9 +124,12 @@ function fnGetData() {
             break;
           case 'IMS':
             state.from.sbi.ims_ip = item.ip;
+            // state.from.external.ims_sip_ip = item.ip;
+            state.hasNE.ims = true;
             break;
           case 'AMF':
             state.from.sbi.amf_ip = item.ip;
+            state.hasNE.amf = true;
             break;
           case 'AUSF':
             state.from.sbi.ausf_ip = item.ip;
@@ -170,6 +152,7 @@ function fnGetData() {
             break;
           case 'UPF':
             state.from.sbi.upf_ip = item.ip;
+            state.hasNE.upf = true;
             break;
           case 'LMF':
             state.from.sbi.lmf_ip = item.ip;
@@ -179,6 +162,10 @@ function fnGetData() {
             break;
           case 'MME':
             state.from.sbi.mme_ip = item.ip;
+            if (item.ip.includes('.')) {
+              state.from.external.mmes11_ip = item.ip + '/24';
+            }
+            state.hasNE.mme = true;
             break;
           case 'N3IWF':
             state.from.sbi.n3iwf_ip = item.ip;
@@ -218,189 +205,29 @@ onMounted(() => {
 <template>
   <PageContainer>
     <a-card :bordered="false">
-      <!-- 插槽-卡片左侧侧 -->
-      <template #title>
-        <a-form layout="inline" :label-col="{ span: 6 }" :label-wrap="true">
-          <a-form-item label="OMC" name="OMC">
-            <a-input
-              v-model:value="state.from.sbi.omc_ip"
-              allow-clear
-              :placeholder="t('common.inputPlease')"
-              :maxlength="50"
-            >
-            </a-input>
-          </a-form-item>
-        </a-form>
-      </template>
+      <!-- 公共参数表单 -->
+      <Para5GForm v-model:data="state.from" :ne="state.hasNE"></Para5GForm>
 
-      <!-- 插槽-卡片右侧 -->
-      <template #extra>
+      <div style="padding: 24px 12px 0; text-align: end">
         <a-space :size="8" align="center">
-          <a-button
-            type="default"
-            :disabled="state.confirmLoading"
-            @click.prevent="fnGetData()"
-          >
-            <template #icon><ReloadOutlined /></template>
-            Reload
-          </a-button>
           <a-button
             type="primary"
             :loading="state.confirmLoading"
             @click="fnSaveData()"
           >
             <template #icon><SaveOutlined /></template>
-            Save
+            {{ t('views.ne.neConfPara5G.save') }}
+          </a-button>
+          <a-button
+            type="default"
+            :loading="state.confirmLoading"
+            @click.prevent="fnGetData()"
+          >
+            <template #icon><ReloadOutlined /></template>
+            {{ t('views.ne.neConfPara5G.reload') }}
           </a-button>
         </a-space>
-      </template>
-
-      <a-form
-        name="para5GFileeFrom"
-        layout="horizontal"
-        :label-col="{ span: 6 }"
-        :label-wrap="true"
-      >
-        <a-divider orientation="left">Basic</a-divider>
-        <a-row :gutter="16">
-          <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"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <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"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
-            <a-form-item
-              label="MCC"
-              name="basic.plmnId.mcc"
-              :label-col="{ span: 13 }"
-              :label-wrap="true"
-            >
-              <a-input
-                v-model:value="state.from.basic.plmnId.mcc"
-                placeholder="1-65535"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
-            <a-form-item label="MNC" name="basic.plmnId.mnc">
-              <a-input
-                v-model:value="state.from.basic.plmnId.mnc"
-                placeholder="1-65535"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
-            <a-form-item
-              label="SST"
-              name="basic.snssai.sst"
-              :label-col="{ span: 13 }"
-              :label-wrap="true"
-            >
-              <a-input-number
-                v-model:value="state.from.basic.snssai.sst"
-                :min="1"
-                :max="3"
-                placeholder="1-3"
-              ></a-input-number>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
-            <a-form-item label="SD" name="basic.snssai.sd">
-              <a-input
-                v-model:value="state.from.basic.snssai.sd"
-                placeholder="1-65535"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="TAC" name="basic.tac">
-              <a-input
-                v-model:value="state.from.basic.tac"
-                placeholder="1-65535"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-divider orientation="left">External</a-divider>
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="N2_IP" name="external.amfn2_ip">
-              <a-input
-                v-model:value="state.from.external.amfn2_ip"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-            <a-form-item label="N3_IP" name="external.upfn3_ip">
-              <a-input
-                v-model:value="state.from.external.upfn3_ip"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-            <a-form-item label="N3_GW" name="external.upfn3_gw">
-              <a-input
-                v-model:value="state.from.external.upfn3_gw"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <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"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-            <a-form-item label="N6_IP" name="external.upfn6_ip">
-              <a-input
-                v-model:value="state.from.external.upfn6_ip"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-            <a-form-item label="N6_GW" name="external.upfn6_gw">
-              <a-input
-                v-model:value="state.from.external.upfn6_gw"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
+      </div>
     </a-card>
 
     <!-- 保存选择同步网元 -->
diff --git a/src/views/system/quick-start/components/NeInfoConfigPara5G.vue b/src/views/system/quick-start/components/NeInfoConfigPara5G.vue
index 4ab2e9ef..531611cb 100644
--- a/src/views/system/quick-start/components/NeInfoConfigPara5G.vue
+++ b/src/views/system/quick-start/components/NeInfoConfigPara5G.vue
@@ -3,8 +3,14 @@ import { Modal, message } from 'ant-design-vue/lib';
 import { onMounted, reactive, toRaw } from 'vue';
 import { fnToStepName } from '../hooks/useStep';
 import useI18n from '@/hooks/useI18n';
-import { listNeInfo, getPara5GFilee, savePara5GFile, updateNeInfo } from '@/api/ne/neInfo';
+import {
+  listNeInfo,
+  getPara5GFilee,
+  savePara5GFile,
+  updateNeInfo,
+} from '@/api/ne/neInfo';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import Para5GForm from '@/views/ne/neConfPara5G/components/Para5GForm.vue';
 const { t } = useI18n();
 
 /**对象信息信息状态类型 */
@@ -17,6 +23,13 @@ type StateType = {
   from: Record<string, any>;
   /**OMC信息，需修改当前的IP */
   omcInfo: Record<string, any>;
+  /**根据网元显示配置项 */
+  hasNE: {
+    amf: boolean;
+    upf: boolean;
+    ims: boolean;
+    mme: boolean;
+  };
   /**确定按钮 loading */
   confirmLoading: boolean;
 };
@@ -25,47 +38,14 @@ type StateType = {
 let state: StateType = reactive({
   loading: false,
   saveFile: false,
-  from: {
-    basic: {
-      plmnId: {
-        mcc: '001',
-        mnc: '01',
-      },
-      tac: '4388',
-      snssai: {
-        sst: '1',
-        sd: '000001',
-      },
-      dnn_data: 'internet',
-      dnn_ims: 'ims',
-    },
-    external: {
-      amfn2_ip: '192.168.8.120',
-      upfn3_ip: '192.168.8.190/24',
-      upfn3_gw: '192.168.1.1',
-      upfn6_ip: '192.168.8.191/24',
-      upfn6_gw: '192.168.1.1',
-      ue_pool: '10.2.1.0/24',
-    },
-    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',
-      adb_ip: '172.16.5.140',
-      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',
-    },
-  },
+  from: {},
   omcInfo: {},
+  hasNE: {
+    amf: false,
+    upf: false,
+    ims: false,
+    mme: false,
+  },
   confirmLoading: false,
 });
 
@@ -79,11 +59,11 @@ function fnSave() {
     syncNe: [],
   })
     .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) { 
+      if (res.code === RESULT_CODE_SUCCESS) {
         message.success(t('views.ne.neConfPara5G.save'));
         state.saveFile = true;
         // 更新omc_ip
-        state.omcInfo.ip = state.from.sbi.omc_ip
+        state.omcInfo.ip = state.from.sbi.omc_ip;
         updateNeInfo(toRaw(state.omcInfo));
       } else {
         message.warning(res.nsg);
@@ -121,9 +101,12 @@ function fnGetList() {
             break;
           case 'IMS':
             state.from.sbi.ims_ip = item.ip;
+            // state.from.external.ims_sip_ip = item.ip;
+            state.hasNE.ims = true;
             break;
           case 'AMF':
             state.from.sbi.amf_ip = item.ip;
+            state.hasNE.amf = true;
             break;
           case 'AUSF':
             state.from.sbi.ausf_ip = item.ip;
@@ -146,6 +129,7 @@ function fnGetList() {
             break;
           case 'UPF':
             state.from.sbi.upf_ip = item.ip;
+            state.hasNE.upf = true;
             break;
           case 'LMF':
             state.from.sbi.lmf_ip = item.ip;
@@ -155,6 +139,10 @@ function fnGetList() {
             break;
           case 'MME':
             state.from.sbi.mme_ip = item.ip;
+            if (item.ip.includes('.')) {
+              state.from.external.mmes11_ip = item.ip + '/24';
+            }
+            state.hasNE.mme = true;
             break;
           case 'N3IWF':
             state.from.sbi.n3iwf_ip = item.ip;
@@ -198,168 +186,8 @@ onMounted(() => {
 <template>
   <div class="ne">
     <a-spin tip="Loading..." style="width: 100%" :spinning="state.loading">
-      <a-form
-        name="para5GFileeFrom"
-        layout="horizontal"
-        :label-col="{ span: 6 }"
-        :label-wrap="true"
-      >
-        <a-divider orientation="left">System</a-divider>
-        <a-form-item
-          label="OMC_IP"
-          name="OMC_IP"
-          :label-col="{ span: 3 }"
-          :wrapper-col="{ span: 9 }"
-        >
-          <a-input
-            v-model:value="state.from.sbi.omc_ip"
-            allow-clear
-            :placeholder="t('common.inputPlease')"
-            :maxlength="50"
-          >
-          </a-input>
-        </a-form-item>
-
-        <a-divider orientation="left">Basic</a-divider>
-        <a-row :gutter="16">
-          <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"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <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"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
-            <a-form-item
-              label="MCC"
-              name="basic.plmnId.mcc"
-              :label-col="{ span: 13 }"
-              :label-wrap="true"
-            >
-              <a-input
-                v-model:value="state.from.basic.plmnId.mcc"
-                placeholder="1-65535"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
-            <a-form-item label="MNC" name="basic.plmnId.mnc">
-              <a-input
-                v-model:value="state.from.basic.plmnId.mnc"
-                placeholder="1-65535"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
-            <a-form-item
-              label="SST"
-              name="basic.snssai.sst"
-              :label-col="{ span: 13 }"
-              :label-wrap="true"
-            >
-              <a-input-number
-                v-model:value="state.from.basic.snssai.sst"
-                :min="1"
-                :max="3"
-                placeholder="1-3"
-              ></a-input-number>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="6" :xs="24">
-            <a-form-item label="SD" name="basic.snssai.sd">
-              <a-input
-                v-model:value="state.from.basic.snssai.sd"
-                placeholder="1-65535"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="TAC" name="basic.tac">
-              <a-input
-                v-model:value="state.from.basic.tac"
-                placeholder="1-65535"
-              ></a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-divider orientation="left">External</a-divider>
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item label="N2_IP" name="external.amfn2_ip">
-              <a-input
-                v-model:value="state.from.external.amfn2_ip"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-            <a-form-item label="N3_IP" name="external.upfn3_ip">
-              <a-input
-                v-model:value="state.from.external.upfn3_ip"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-            <a-form-item label="N3_GW" name="external.upfn3_gw">
-              <a-input
-                v-model:value="state.from.external.upfn3_gw"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <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"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-            <a-form-item label="N6_IP" name="external.upfn6_ip">
-              <a-input
-                v-model:value="state.from.external.upfn6_ip"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-            <a-form-item label="N6_GW" name="external.upfn6_gw">
-              <a-input
-                v-model:value="state.from.external.upfn6_gw"
-                allow-clear
-                :placeholder="t('common.inputPlease')"
-                :maxlength="50"
-              >
-              </a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
+      <!-- 公共参数表单 -->
+      <Para5GForm v-model:data="state.from" :ne="state.hasNE"></Para5GForm>
     </a-spin>
 
     <div class="ne-oper">