From 3a854be8fe7b268be5c90c622095ab5c4de914fd Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 25 Jul 2024 10:50:54 +0800
Subject: [PATCH 01/15] =?UTF-8?q?fix:=20=E6=9F=A5=E8=AF=A2IMS=E5=9C=A8?=
 =?UTF-8?q?=E7=BA=BF=E7=94=A8=E6=88=B7=E6=95=B0=E6=8E=A5=E5=8F=A3=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=A0=BC=E5=BC=8F=E5=85=BC=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/neUser/ims.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/api/neUser/ims.ts b/src/api/neUser/ims.ts
index 71c5bf2c..0ead4388 100644
--- a/src/api/neUser/ims.ts
+++ b/src/api/neUser/ims.ts
@@ -52,9 +52,11 @@ export async function listUENumByIMS(neId: String) {
     method: 'get',
   });
   if (result.code === RESULT_CODE_SUCCESS) {
-    return Object.assign(result, {
-      data: result.data['ueNum'],
-    });
+    let num = result.data['ueNum'] || 0;
+    if (num === 0) {
+      num = result.data.data['ueNum'] || 0;
+    }
+    return Object.assign(result, { data: num });
   }
 
   // 模拟数据

From 396fb0b12455c2fc19704e9795e0df296f5ed7bf Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 25 Jul 2024 18:23:28 +0800
Subject: [PATCH 02/15] =?UTF-8?q?fix:=20KPI=E6=8E=A5=E6=94=B6=E6=8C=87?=
 =?UTF-8?q?=E5=AE=9A=E5=AF=B9=E5=BA=94neId=EF=BC=8C=E5=AE=9E=E6=97=B6?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E4=B8=8D=E6=94=AF=E6=8C=81=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/perfManage/goldTarget/index.vue | 124 ++++++++++------------
 1 file changed, 59 insertions(+), 65 deletions(-)

diff --git a/src/views/perfManage/goldTarget/index.vue b/src/views/perfManage/goldTarget/index.vue
index 5ce183ff..0dfbc726 100644
--- a/src/views/perfManage/goldTarget/index.vue
+++ b/src/views/perfManage/goldTarget/index.vue
@@ -254,15 +254,7 @@ function fnGetListTitle() {
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
         tableColumns.value = [];
-        const columns: ColumnsType = [
-          {
-            title: t('views.perfManage.perfData.neName'),
-            dataIndex: 'neName',
-            key: 'neName',
-            align: 'left',
-            width: 100,
-          },
-        ];
+        const columns: ColumnsType = [];
         for (const item of res.data) {
           const kpiDisplay = item[`${language}Title`];
           const kpiValue = item[`kpiId`];
@@ -277,6 +269,13 @@ function fnGetListTitle() {
             maxWidth: 300,
           });
         }
+        columns.push({
+          title: t('views.perfManage.perfData.neName'),
+          dataIndex: 'neName',
+          key: 'neName',
+          align: 'left',
+          width: 100,
+        });
         columns.push({
           title: t('views.perfManage.goldTarget.time'),
           dataIndex: 'timeGroup',
@@ -458,7 +457,7 @@ function fnRanderChartData() {
   }
 
   for (const item of orgData) {
-    chartDataXAxisData.push(item['timeGroup']);
+    chartDataXAxisData.push(parseDateToStr(+item['timeGroup']));
     const keys = Object.keys(item);
     for (const y of chartDataYSeriesData) {
       for (const key of keys) {
@@ -505,21 +504,23 @@ function fnLegendSelected(bool: any) {
 /**图表实时统计 */
 function fnRealTimeSwitch(bool: any) {
   if (bool) {
+    tableState.seached = false;
     // 建立链接
     const options: OptionsType = {
       url: '/ws',
       params: {
         /**订阅通道组
          *
-         * 指标(GroupID:10)
+         * 指标(GroupID:10_neType_neId)
          */
-        subGroupID: '10',
+        subGroupID: `10_${queryParams.neType}_${queryParams.neId}`,
       },
       onmessage: wsMessage,
       onerror: wsError,
     };
     ws.connect(options);
   } else {
+    tableState.seached = true;
     ws.close();
   }
 }
@@ -543,39 +544,40 @@ function wsMessage(res: Record<string, any>) {
     return;
   }
   // kpiEvent 黄金指标指标事件
-  if (data.groupId === '10') {
-    const kpiEvent = data.data;
-    // 非对应网元类型
-    if (kpiEvent.neType !== queryParams.neType) return;
+  const kpiEvent = data.data;
+  tableState.data.unshift(kpiEvent);
+  tablePagination.total++;
 
-    for (const key of Object.keys(data.data)) {
-      const v = kpiEvent[key];
-      // x轴
-      if (key === 'timeGroup') {
-        // chartDataXAxisData.shift();
-        chartDataXAxisData.push(v);
-        continue;
-      }
-      // y轴
-      const yItem = chartDataYSeriesData.find(item => item.key === key);
-      if (yItem) {
-        // yItem.data.shift();
-        yItem.data.push(v);
-      }
+  // 非对应网元类型
+  if (kpiEvent.neType !== queryParams.neType) return;
+
+  for (const key of Object.keys(data.data)) {
+    const v = kpiEvent[key];
+    // x轴
+    if (key === 'timeGroup') {
+      // chartDataXAxisData.shift();
+      chartDataXAxisData.push(parseDateToStr(+v));
+      continue;
+    }
+    // y轴
+    const yItem = chartDataYSeriesData.find(item => item.key === key);
+    if (yItem) {
+      // yItem.data.shift();
+      yItem.data.push(+v);
     }
-
-    // 绘制图数据
-    kpiChart.value.setOption({
-      xAxis: {
-        data: chartDataXAxisData,
-      },
-      series: chartDataYSeriesData,
-    });
   }
+
+  // 绘制图数据
+  kpiChart.value.setOption({
+    xAxis: {
+      data: chartDataXAxisData,
+    },
+    series: chartDataYSeriesData,
+  });
 }
 
 onMounted(() => {
-  // 目前支持的 AMF AUSF MME MOCNGW NSSF SMF UDM UPF
+  // 目前支持的 AMF AUSF MME MOCNGW NSSF SMF UDM UPF PCF
   // 获取网元网元列表
   neInfoStore.fnNelist().then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
@@ -583,15 +585,9 @@ onMounted(() => {
         // 过滤不可用的网元
         neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
           (item: any) => {
-            return ![
-              'OMC',
-              'PCF',
-              'NSSF',
-              'NEF',
-              'NRF',
-              'LMF',
-              'N3IWF',
-            ].includes(item.value);
+            return !['OMC', 'NSSF', 'NEF', 'NRF', 'LMF', 'N3IWF'].includes(
+              item.value
+            );
           }
         );
         if (neCascaderOptions.value.length === 0) {
@@ -619,9 +615,9 @@ onMounted(() => {
         // 查询当前小时
         const nowDate: Date = new Date();
         nowDate.setMinutes(0, 0, 0);
-        queryRangePicker.value[0] = parseDateToStr(nowDate);
+        queryRangePicker.value[0] = `${nowDate.getTime()}`;
         nowDate.setMinutes(59, 59, 59);
-        queryRangePicker.value[1] = parseDateToStr(nowDate);
+        queryRangePicker.value[1] = `${nowDate.getTime()}`;
         fnGetListTitle();
         // 绘图
         fnRanderChart();
@@ -666,15 +662,17 @@ onBeforeUnmount(() => {
           <a-col :lg="10" :md="12" :xs="24">
             <a-form-item
               :label="t('views.perfManage.goldTarget.timeFrame')"
-              name="eventTime"
+              name="timeFrame"
             >
               <a-range-picker
                 v-model:value="queryRangePicker"
-                value-format="YYYY-MM-DD HH:mm:ss"
-                format="YYYY-MM-DD HH:mm:ss"
+                bordered
                 :allow-clear="false"
-                show-time
-              />
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+                value-format="x"
+                style="width: 100%"
+              ></a-range-picker>
             </a-form-item>
           </a-col>
           <a-col :lg="4" :md="12" :xs="24">
@@ -747,15 +745,6 @@ onBeforeUnmount(() => {
       <!-- 插槽-卡片右侧 -->
       <template #extra>
         <a-space :size="8" align="center" v-show="tableState.showTable">
-          <a-tooltip>
-            <template #title>{{ t('common.searchBarText') }}</template>
-            <a-switch
-              v-model:checked="tableState.seached"
-              :checked-children="t('common.switch.show')"
-              :un-checked-children="t('common.switch.hide')"
-              size="small"
-            />
-          </a-tooltip>
           <a-tooltip>
             <template #title>{{ t('common.reloadText') }}</template>
             <a-button type="text" @click.prevent="fnGetList()">
@@ -833,11 +822,16 @@ onBeforeUnmount(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :pagination="tablePagination"
-        :scroll="{ x: tableColumnsDnd.length * 200, y: 450 }"
+        :scroll="{ x: tableColumnsDnd.length * 200, y: 'calc(100vh - 480px)' }"
         @resizeColumn="(w:number, col:any) => (col.width = w)"
         :show-expand-column="false"
         @change="fnTableChange"
       >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'timeGroup'">
+            {{ parseDateToStr(+record.timeGroup) }}
+          </template>
+        </template>
       </a-table>
 
       <!-- 图表 -->

From e9ff6493ddff9c929d21cc8d9a72129fa2528959 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 25 Jul 2024 18:48:01 +0800
Subject: [PATCH 03/15] =?UTF-8?q?fix:=20=E7=9C=8B=E6=9D=BFUPF=E6=B5=81?=
 =?UTF-8?q?=E9=87=8F=E5=90=9E=E5=90=90=E5=88=9D=E5=A7=8B=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E5=92=8Cws=E7=9B=91=E5=90=AC12=5FneId?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/overview/components/UPFFlow/index.vue   | 11 ++++-------
 src/views/dashboard/overview/hooks/useUPFTotalFlow.ts |  5 +++--
 src/views/dashboard/overview/hooks/useWS.ts           |  6 +++---
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/views/dashboard/overview/components/UPFFlow/index.vue b/src/views/dashboard/overview/components/UPFFlow/index.vue
index 607c3913..12694af7 100644
--- a/src/views/dashboard/overview/components/UPFFlow/index.vue
+++ b/src/views/dashboard/overview/components/UPFFlow/index.vue
@@ -203,17 +203,14 @@ function handleRanderChart() {
 
 /**查询初始UPF数据 */
 function fnGetInitData() {
-  // 查询10分钟前的
-  const nowDate: Date = new Date();
-  const tenMinutesAgo = new Date(nowDate.getTime() - 5 * 60 * 1000);
+  // 查询5分钟前的
+  const nowDate = new Date().getTime();
 
   listKPIData({
     neType: 'UPF',
     neId: '001',
-    startTime: parseDateToStr(tenMinutesAgo),
-    endTime: parseDateToStr(nowDate),
-    // startTime: '2024-03-20 19:50:00',
-    // endTime: '2024-03-20 19:55:00',
+    startTime: nowDate - 5 * 60 * 1000,
+    endTime: nowDate,
     interval: 5, // 5秒
     sortField: 'timeGroup',
     sortOrder: 'asc',
diff --git a/src/views/dashboard/overview/hooks/useUPFTotalFlow.ts b/src/views/dashboard/overview/hooks/useUPFTotalFlow.ts
index 27b19c8a..8a9fdacb 100644
--- a/src/views/dashboard/overview/hooks/useUPFTotalFlow.ts
+++ b/src/views/dashboard/overview/hooks/useUPFTotalFlow.ts
@@ -1,3 +1,4 @@
+import { parseDateToStr } from '@/utils/date-utils';
 import { parseSizeFromBits, parseSizeFromKbs } from '@/utils/parse-utils';
 import { ref } from 'vue';
 
@@ -22,7 +23,7 @@ export const upfFlowData = ref<FDType>({
 
 /**UPF-流量数据 数据解析 */
 export function upfFlowParse(data: Record<string, string>) {
-  upfFlowData.value.lineXTime.push(data['timeGroup']);
+  upfFlowData.value.lineXTime.push(parseDateToStr(+data['timeGroup']));
   const upN3 = parseSizeFromKbs(+data['UPF.03'], 5);
   upfFlowData.value.lineYUp.push(upN3[0]);
   const downN6 = parseSizeFromKbs(+data['UPF.06'], 5);
@@ -78,7 +79,7 @@ export function upfTFParse(data: Record<string, string>) {
 export const upfTFActive = ref<number>(0);
 
 /**属性复位 */
-export function upfTotalFlowReset() { 
+export function upfTotalFlowReset() {
   upfFlowData.value = {
     lineXTime: [],
     lineYUp: [],
diff --git a/src/views/dashboard/overview/hooks/useWS.ts b/src/views/dashboard/overview/hooks/useWS.ts
index 854a122b..ba193141 100644
--- a/src/views/dashboard/overview/hooks/useWS.ts
+++ b/src/views/dashboard/overview/hooks/useWS.ts
@@ -94,7 +94,7 @@ export default function useWS() {
     }
     switch (data.groupId) {
       // kpiEvent 指标UPF
-      case '12':
+      case '12_001':
         if (data.data) {
           upfFlowParse(data.data);
         }
@@ -197,12 +197,12 @@ export default function useWS() {
       params: {
         /**订阅通道组
          *
-         * 指标UPF (GroupID:12)
+         * 指标UPF (GroupID:12_neId)
          * AMF_UE会话事件(GroupID:1010)
          * MME_UE会话事件(GroupID:1011)
          * IMS_CDR会话事件(GroupID:1005)
          */
-        subGroupID: '12,1010,1011,1005',
+        subGroupID: '12_001,1010,1011,1005',
       },
       onmessage: wsMessage,
       onerror: wsError,

From ca048f223cba6dd88d16cf74c0082a2b3b78cd3b Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Fri, 26 Jul 2024 15:28:45 +0800
Subject: [PATCH 04/15] =?UTF-8?q?feat:=20UDM=E9=89=B4=E6=9D=83=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E5=AF=BC=E5=85=A5K4=E6=96=87=E4=BB=B6=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/neData/udm_auth.ts      |   1 -
 src/views/neUser/auth/index.vue | 217 ++++++++++++++++++--------------
 2 files changed, 123 insertions(+), 95 deletions(-)

diff --git a/src/api/neData/udm_auth.ts b/src/api/neData/udm_auth.ts
index 0af15c84..abc2450d 100644
--- a/src/api/neData/udm_auth.ts
+++ b/src/api/neData/udm_auth.ts
@@ -113,7 +113,6 @@ export function batchDelUDMAuth(neId: string, imsi: string, num: number) {
 
 /**
  * UDM鉴权用户导入
- * @param neId 网元ID
  * @param data 表单数据对象
  * @returns object
  */
diff --git a/src/views/neUser/auth/index.vue b/src/views/neUser/auth/index.vue
index a2d97ec3..b5249f22 100644
--- a/src/views/neUser/auth/index.vue
+++ b/src/views/neUser/auth/index.vue
@@ -530,7 +530,7 @@ function fnRecordDelete(imsi: string) {
 }
 
 /**
- * UDM鉴权用户导出
+ * UDM鉴权用户勾选导出
  */
 function fnRecordExport(type: string = 'txt') {
   const selectLen = tableState.selectedRowKeys.length;
@@ -543,13 +543,15 @@ function fnRecordExport(type: string = 'txt') {
   let content = '';
   if (type == 'txt') {
     for (const row of rows) {
-      content += `${row.imsi},${row.ki},${row.algoIndex},${row.amf},${row.opc}\r\n`;
+      const opc = row.opc === '-' ? '' : `,${row.opc}`;
+      content += `${row.imsi},${row.ki},${row.algoIndex},${row.amf}${opc}\r\n`;
     }
   }
   if (type == 'csv') {
     content = `IMSI,ki,Algo Index,AMF,OPC\r\n`;
     for (const row of rows) {
-      content += `${row.imsi},${row.ki},${row.algoIndex},${row.amf},${row.opc}\r\n`;
+      const opc = row.opc === '-' ? '' : `,${row.opc}`;
+      content += `${row.imsi},${row.ki},${row.algoIndex},${row.amf}${opc}\r\n`;
     }
   }
 
@@ -557,7 +559,7 @@ function fnRecordExport(type: string = 'txt') {
   saveAs(blob, `UDMAuth_${Date.now()}.${type}`);
 }
 
-/**列表导出 */
+/**列表导出全部数据 */
 function fnExportList(type: string) {
   const neId = queryParams.neId;
   if (!neId) return;
@@ -651,6 +653,10 @@ type ModalUploadImportStateType = {
   loading: boolean;
   /**上传结果信息 */
   msg: string;
+  /**导入类型 */
+  typeOptions: { label: string; value: string }[];
+  /**表单 */
+  from: { typeVal: string; typeData: any };
 };
 
 /**对话框表格信息导入对象信息状态 */
@@ -659,11 +665,27 @@ let uploadImportState: ModalUploadImportStateType = reactive({
   title: t('components.UploadModal.uploadTitle'),
   loading: false,
   msg: '',
+  typeOptions: [
+    { label: 'Default', value: 'default' },
+    { label: 'K4', value: 'k4' },
+  ],
+  from: {
+    typeVal: 'default',
+    typeData: undefined,
+  },
 });
 
+/**对话框表格信息导入类型选择 */
+function fnModalUploadImportTypeChange() {
+  uploadImportState.from.typeData = '';
+  uploadImportState.msg = '';
+}
+
 /**对话框表格信息导入弹出窗口 */
 function fnModalUploadImportOpen() {
   uploadImportState.msg = '';
+  uploadImportState.from.typeVal = 'default';
+  uploadImportState.from.typeData = undefined;
   uploadImportState.loading = false;
   uploadImportState.visible = true;
 }
@@ -702,6 +724,7 @@ function fnModalUploadImportUpload(file: File) {
       return importUDMAuth({
         neId: neId,
         uploadPath: filePath,
+        ...uploadImportState.from,
       });
     })
     .then(res => {
@@ -1103,54 +1126,52 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              label="KI"
-              name="ki"
-              v-bind="modalStateFrom.validateInfos.ki"
-            >
-              <a-input
-                v-model:value="modalState.from.ki"
-                allow-clear
-                :maxlength="32"
-                :disabled="!!modalState.from.id"
-              >
-                <template #prefix>
-                  <a-tooltip placement="topLeft">
-                    <template #title>
-                      {{ t('views.neUser.auth.kiTip') }}
-                    </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                  </a-tooltip>
+        <a-form-item
+          label="KI"
+          name="ki"
+          v-bind="modalStateFrom.validateInfos.ki"
+          :label-col="{ span: 3 }"
+          :labelWrap="true"
+        >
+          <a-input
+            v-model:value="modalState.from.ki"
+            allow-clear
+            :maxlength="32"
+            :disabled="!!modalState.from.id"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  {{ t('views.neUser.auth.kiTip') }}
                 </template>
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              label="OPC"
-              name="opc"
-              v-bind="modalStateFrom.validateInfos.opc"
-            >
-              <a-input
-                v-model:value="modalState.from.opc"
-                allow-clear
-                :maxlength="32"
-                :disabled="!!modalState.from.id"
-              >
-                <template #prefix>
-                  <a-tooltip placement="topLeft">
-                    <template #title>
-                      {{ t('views.neUser.auth.opcTip') }}
-                    </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                  </a-tooltip>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-tooltip>
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item
+          label="OPC"
+          name="opc"
+          v-bind="modalStateFrom.validateInfos.opc"
+          :label-col="{ span: 3 }"
+          :labelWrap="true"
+        >
+          <a-input
+            v-model:value="modalState.from.opc"
+            allow-clear
+            :maxlength="32"
+            :disabled="!!modalState.from.id"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  {{ t('views.neUser.auth.opcTip') }}
                 </template>
-              </a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-tooltip>
+            </template>
+          </a-input>
+        </a-form-item>
       </a-form>
     </ProModal>
 
@@ -1276,52 +1297,50 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-row :gutter="16">
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              label="KI"
-              name="ki"
-              v-bind="modalStateBatchFrom.validateInfos.ki"
-            >
-              <a-input
-                v-model:value="modalState.BatchForm.ki"
-                allow-clear
-                :maxlength="32"
-              >
-                <template #prefix>
-                  <a-tooltip placement="topLeft">
-                    <template #title>
-                      {{ t('views.neUser.auth.kiTip') }}
-                    </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                  </a-tooltip>
+        <a-form-item
+          label="KI"
+          name="ki"
+          v-bind="modalStateBatchFrom.validateInfos.ki"
+          :label-col="{ span: 3 }"
+          :labelWrap="true"
+        >
+          <a-input
+            v-model:value="modalState.BatchForm.ki"
+            allow-clear
+            :maxlength="32"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  {{ t('views.neUser.auth.kiTip') }}
                 </template>
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              label="OPC"
-              name="opc"
-              v-bind="modalStateBatchFrom.validateInfos.opc"
-            >
-              <a-input
-                v-model:value="modalState.BatchForm.opc"
-                allow-clear
-                :maxlength="32"
-              >
-                <template #prefix>
-                  <a-tooltip placement="topLeft">
-                    <template #title>
-                      {{ t('views.neUser.auth.opcTip') }}
-                    </template>
-                    <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                  </a-tooltip>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-tooltip>
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item
+          label="OPC"
+          name="opc"
+          v-bind="modalStateBatchFrom.validateInfos.opc"
+          :label-col="{ span: 3 }"
+          :labelWrap="true"
+        >
+          <a-input
+            v-model:value="modalState.BatchForm.opc"
+            allow-clear
+            :maxlength="32"
+          >
+            <template #prefix>
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  {{ t('views.neUser.auth.opcTip') }}
                 </template>
-              </a-input>
-            </a-form-item>
-          </a-col>
-        </a-row>
+                <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+              </a-tooltip>
+            </template>
+          </a-input>
+        </a-form-item>
       </a-form>
     </ProModal>
 
@@ -1399,6 +1418,16 @@ onMounted(() => {
       :size="10"
     >
       <template #default>
+        <a-radio-group
+          v-model:value="uploadImportState.from.typeVal"
+          :options="uploadImportState.typeOptions"
+          @change="fnModalUploadImportTypeChange"
+        />
+        <a-input-password
+          v-if="uploadImportState.from.typeVal === 'k4'"
+          v-model:value="uploadImportState.from.typeData"
+          :placeholder="t('common.inputPlease')"
+        />
         <a-textarea
           :disabled="true"
           :hidden="!uploadImportState.msg"

From 8e9498ec8309f8ee2a13aa18c1ae4976f3576add Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Fri, 26 Jul 2024 18:25:15 +0800
Subject: [PATCH 05/15] =?UTF-8?q?feat:=20=E7=BD=91=E5=85=83=E5=A4=87?=
 =?UTF-8?q?=E4=BB=BD=E6=96=87=E4=BB=B6=E8=A1=A8=E6=A0=BC=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ne/neConfigBackup/index.vue | 602 ++++++++++++++++++++++++++
 1 file changed, 602 insertions(+)
 create mode 100644 src/views/ne/neConfigBackup/index.vue

diff --git a/src/views/ne/neConfigBackup/index.vue b/src/views/ne/neConfigBackup/index.vue
new file mode 100644
index 00000000..33542842
--- /dev/null
+++ b/src/views/ne/neConfigBackup/index.vue
@@ -0,0 +1,602 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { Form, Modal, TableColumnsType, message } from 'ant-design-vue/lib';
+import { SizeType } from 'ant-design-vue/lib/config-provider';
+import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import useNeInfoStore from '@/store/modules/neinfo';
+import useI18n from '@/hooks/useI18n';
+import useDictStore from '@/store/modules/dict';
+import { NE_TYPE_LIST } from '@/constants/ne-constants';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { parseDateToStr } from '@/utils/date-utils';
+import {
+  delNeConfigBackup,
+  downNeConfigBackup,
+  listNeConfigBackup,
+  updateNeConfigBackup,
+} from '@/api/ne/neConfigBackup';
+import saveAs from 'file-saver';
+const { t } = useI18n();
+const { getDict } = useDictStore();
+
+/**字典数据-状态 */
+let dictStatus = ref<DictType[]>([]);
+
+/**网元参数 */
+let neOtions = ref<Record<string, any>[]>([]);
+
+/**查询参数 */
+let queryParams = reactive({
+  /**网元类型 */
+  neType: undefined,
+  /**名称 */
+  name: '',
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    neType: undefined,
+    name: '',
+    pageNum: 1,
+    pageSize: 20,
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: any[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: false,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns = ref<TableColumnsType>([
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.common.neType'),
+    dataIndex: 'neType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.common.neId'),
+    dataIndex: 'neId',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('common.createTime'),
+    dataIndex: 'createTime',
+    align: 'center',
+    customRender(opt) {
+      if (!opt.value) return '';
+      return parseDateToStr(opt.value);
+    },
+    width: 150,
+  },
+  {
+    title: t('views.ne.neConfigBackup.name'),
+    dataIndex: 'name',
+    align: 'left',
+    width: 200,
+    resizable: true,
+    minWidth: 100,
+    maxWidth: 300,
+    ellipsis: true,
+  },
+  {
+    title: t('common.remark'),
+    dataIndex: 'remark',
+    key: 'remark',
+    align: 'left',
+    width: 150,
+    resizable: true,
+    minWidth: 100,
+    maxWidth: 300,
+    ellipsis: true,
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    align: 'left',
+  },
+]);
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
+/**查询列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+  listNeConfigBackup(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      tablePagination.total = res.total;
+      tableState.data = res.rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+/**信息文件下载 */
+function fnDownloadFile(row: Record<string, any>) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.ne.neConfigBackup.downTip', { txt: row.name }),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      downNeConfigBackup(row.id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 2,
+            });
+            saveAs(res.data, `${row.name}`);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+        });
+    },
+  });
+}
+
+/**
+ * 记录删除
+ * @param id  编号
+ */
+function fnRecordDelete(id: string) {
+  if (!id || modalState.confirmLoading) return;
+  let msg = id;
+  if (id === '0') {
+    msg = `...${tableState.selectedRowKeys.length}`;
+    id = tableState.selectedRowKeys.join(',');
+  }
+
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.dashboard.ue.delTip', { msg }),
+    onOk() {
+      modalState.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      delNeConfigBackup(id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.operateOk'),
+              duration: 3,
+            });
+            fnGetList(1);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    },
+  });
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByEdit: false,
+  title: '备份记录',
+  from: {
+    id: undefined,
+    name: '',
+    remark: '',
+  },
+  confirmLoading: false,
+});
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param noticeId 网元id, 不传为新增
+ */
+function fnModalVisibleByEdit(row: Record<string, any>) {
+  if (modalState.confirmLoading) return;
+  modalState.from.id = row.id;
+  modalState.from.name = row.name;
+  modalState.from.remark = row.remark;
+  modalState.title = t('views.ne.neConfigBackup.title', { txt: row.id });
+  modalState.visibleByEdit = true;
+}
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    name: [
+      {
+        required: true,
+        message: '请输入名称',
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  modalStateFrom
+    .validate()
+    .then(e => {
+      modalState.confirmLoading = true;
+      const from = toRaw(modalState.from);
+      const hide = message.loading(t('common.loading'), 0);
+      updateNeConfigBackup(from)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              duration: 3,
+            });
+            modalState.visibleByEdit = false;
+            modalStateFrom.resetFields();
+            fnGetList();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+            fnGetList();
+          }
+        })
+        .finally(() => {
+          hide();
+          modalState.confirmLoading = false;
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalStateFrom.resetFields();
+}
+
+onMounted(() => {
+  // 初始字典数据
+  getDict('ne_license_status').then(res => {
+    dictStatus.value = res;
+  });
+  // 获取网元网元列表
+  useNeInfoStore()
+    .fnNelist()
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+        neOtions.value = useNeInfoStore().getNeSelectOtions;
+      } else {
+        message.warning({
+          content: t('common.noData'),
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      // 获取列表数据
+      fnGetList();
+    });
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item :label="t('views.ne.common.neType')" name="neType ">
+              <a-auto-complete
+                v-model:value="queryParams.neType"
+                :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+                :allow-clear="true"
+                :placeholder="t('common.inputPlease')"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item :label="t('views.ne.neConfigBackup.name')" name="name">
+              <a-input
+                v-model:value="queryParams.name"
+                :allow-clear="true"
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-space :size="8" align="center">
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            :loading="modalState.confirmLoading"
+            @click.prevent="fnRecordDelete('0')"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+        </a-space>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              size="small"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip placement="topRight">
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown placement="bottomRight" trigger="click">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: tableColumns.length * 180 }"
+        @resizeColumn="(w:number, col:any) => (col.width = w)"
+        :row-selection="{
+          type: 'checkbox',
+          columnWidth: '48px',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'id'">
+            <a-space :size="8" align="center">
+              <a-tooltip>
+                <template #title>{{ t('common.downloadText') }}</template>
+                <a-button type="link" @click.prevent="fnDownloadFile(record)">
+                  <template #icon><DownloadOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip>
+                <template #title>{{ t('common.deleteText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordDelete(record.id)"
+                >
+                  <template #icon><DeleteOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip>
+                <template #title>{{ t('common.editText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByEdit(record)"
+                >
+                  <template #icon><FormOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 新增框或修改框 -->
+    <ProModal
+      :drag="true"
+      :width="512"
+      :destroyOnClose="true"
+      :keyboard="false"
+      :mask-closable="false"
+      :visible="modalState.visibleByEdit"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    >
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :wrapper-col="{ span: 18 }"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+      >
+        <a-form-item
+          :label="t('views.ne.neConfigBackup.name')"
+          name="name"
+          v-bind="modalStateFrom.validateInfos.name"
+        >
+          <a-input
+            v-model:value="modalState.from.name"
+            :allow-clear="true"
+            :placeholder="t('common.inputPlease')"
+          ></a-input>
+        </a-form-item>
+        <a-form-item
+          :label="t('common.remark')"
+          name="remark"
+          v-bind="modalStateFrom.validateInfos.remark"
+        >
+          <a-textarea
+            v-model:value="modalState.from.remark"
+            :auto-size="{ minRows: 2, maxRows: 6 }"
+            :maxlength="400"
+            :show-count="true"
+          />
+        </a-form-item>
+      </a-form>
+    </ProModal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>

From ab0d26513cb1e32cae029740a88d518ca24ba22b Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Fri, 26 Jul 2024 18:27:15 +0800
Subject: [PATCH 06/15] =?UTF-8?q?perf:=20=E7=BD=91=E5=85=83=E5=A4=87?=
 =?UTF-8?q?=E4=BB=BD=E5=AF=BC=E5=85=A5=E5=AF=BC=E5=87=BA=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ne/neConfigBackup.ts                  |  83 ++++++++
 src/i18n/locales/en-US.ts                     |  10 +-
 src/i18n/locales/zh-CN.ts                     |  10 +-
 .../ne/neInfo/components/BackConfModal.vue    | 193 +++++++++++-------
 src/views/ne/neInfo/index.vue                 |   2 +-
 5 files changed, 212 insertions(+), 86 deletions(-)
 create mode 100644 src/api/ne/neConfigBackup.ts

diff --git a/src/api/ne/neConfigBackup.ts b/src/api/ne/neConfigBackup.ts
new file mode 100644
index 00000000..4c96b485
--- /dev/null
+++ b/src/api/ne/neConfigBackup.ts
@@ -0,0 +1,83 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 网元配置文件备份记录列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listNeConfigBackup(query: Record<string, any>) {
+  return request({
+    url: '/ne/config/backup/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+/**
+ * 网元配置文件备份记录修改
+ * @param data 数据 { id, name, remark }
+ * @returns object
+ */
+export function updateNeConfigBackup(data: Record<string, any>) {
+  return request({
+    url: '/ne/config/backup',
+    method: 'put',
+    data: data,
+  });
+}
+
+/**
+ * 网元配置文件备份记录下载
+ * @param id 记录ID
+ * @returns object
+ */
+export async function downNeConfigBackup(id: string) {
+  return await request({
+    url: '/ne/config/backup/download',
+    method: 'get',
+    params: { id },
+    responseType: 'blob',
+    timeout: 180_000,
+  });
+}
+
+/**
+ * 网元配置文件备份记录删除
+ * @param id 记录ID
+ * @returns object
+ */
+export async function delNeConfigBackup(id: string) {
+  return request({
+    url: '/ne/config/backup',
+    method: 'delete',
+    params: { id },
+  });
+}
+
+/**
+ * 网元配置文件备份导出
+ * @param data 数据 { neType, neId }
+ * @returns object
+ */
+export function exportNeConfigBackup(data: Record<string, any>) {
+  return request({
+    url: '/ne/config/backup/export',
+    method: 'post',
+    data: data,
+    responseType: 'blob',
+    timeout: 180_000,
+  });
+}
+
+/**
+ * 网元配置文件备份导入
+ * @param data 数据 { neType, neId, type, path }
+ * @returns object
+ */
+export function importNeConfigBackup(data: Record<string, any>) {
+  return request({
+    url: '/ne/config/backup/import',
+    method: 'post',
+    data: data,
+  });
+}
\ No newline at end of file
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 88c1364c..48339c5d 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -668,9 +668,8 @@ export default {
           local:'Local File',
           localUpload:'Local Upload',
           exportTip:'Confirm that you want to export the network element configuration file?',
-          exportMsg:'Exported successfully, please download from [Backup Management].',
-          filePlease: "Please upload a file", 
-          fileNamePlease: 'Please select the server file',
+          exportMsg:'Exporting Network Element Configuration Information to a File Succeeded',
+          pathPlease: 'No Backup File Found',
         },
       },
       neHost: {
@@ -781,6 +780,11 @@ export default {
         syncNeDone: 'Synchronization to network element terminals complete',
         saveOk: 'Save Success!', 
       },
+      neConfigBackup: {
+        name: "Name",
+        downTip: 'Confirmed to download the backup file [{txt}]?',
+        title: "Modify Backup {txt}",
+      },
       neQuickSetup: {
         stepPrev: 'Previous',
         stepPrevTip: 'Confirm that you want to abandon the current change and return to the previous step?',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 374af28a..6b9acb97 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -668,9 +668,8 @@ export default {
           local:'本地文件',
           localUpload:'本地上传',
           exportTip:'确认要导出网元配置信息到文件？',
-          exportMsg:'导出成功,请到【备份管理】进行下载',
-          filePlease: "请上传文件", 
-          fileNamePlease: '请选择服务器文件',
+          exportMsg:'导出网元配置信息到文件成功',
+          pathPlease: '未发现文件',
         },
       },
       neHost: {
@@ -781,6 +780,11 @@ export default {
         syncNeDone: '同步到网元终端完成',
         saveOk: '保存成功！',
       },
+      neConfigBackup: {
+        name: "名称",
+        downTip: '确认要下载备份文件【{txt}】吗？',
+        title: "修改备份信息 {txt}",
+      },
       neQuickSetup: {
         stepPrev: '上一步',
         stepPrevTip: '确认要放弃当前变更返回上一步吗？',
diff --git a/src/views/ne/neInfo/components/BackConfModal.vue b/src/views/ne/neInfo/components/BackConfModal.vue
index 3d6615dd..b211cbbd 100644
--- a/src/views/ne/neInfo/components/BackConfModal.vue
+++ b/src/views/ne/neInfo/components/BackConfModal.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { reactive, toRaw, watch } from 'vue';
-import { Form, Modal, Upload, message } from 'ant-design-vue/lib';
+import { Form, Modal, Upload, message, notification } from 'ant-design-vue/lib';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import { FileType } from 'ant-design-vue/lib/upload/interface';
+import { FileType, UploadFile } from 'ant-design-vue/lib/upload/interface';
 import {
-  exportSet,
-  importFile,
-  listServerFile,
-} from '@/api/configManage/neManage';
+  exportNeConfigBackup,
+  importNeConfigBackup,
+  listNeConfigBackup,
+} from '@/api/ne/neConfigBackup';
+import saveAs from 'file-saver';
+import { uploadFile } from '@/api/tool/file';
 const { t } = useI18n();
 const emit = defineEmits(['ok', 'cancel', 'update:visible']);
 const props = defineProps({
@@ -28,32 +30,49 @@ const props = defineProps({
   },
 });
 
-/**表格所需option */
-const neManageOption = reactive({
-  importType: [
-    { label: t('views.ne.neInfo.backConf.server'), value: 'server' },
-    { label: t('views.ne.neInfo.backConf.local'), value: 'local' },
+/**导入状态数据 */
+const importState = reactive({
+  typeOption: [
+    { label: t('views.ne.neInfo.backConf.server'), value: 'backup' },
+    { label: t('views.ne.neInfo.backConf.local'), value: 'upload' },
   ],
-  serverFileName: <any[]>[],
+  backupData: <any[]>[],
 });
 
 /**查询网元远程服务器备份文件 */
-function typeChange(value: any) {
-  if (value === 'server') {
-    modalState.from.fileName = undefined;
-    listServerFile(modalState.from).then(res => {
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        neManageOption.serverFileName = [];
-        res.data.forEach((item: any) => {
-          neManageOption.serverFileName.push({
-            label: item.fileName,
-            value: item.fileName,
-          });
+function backupSearch(name?: string) {
+  const { neType, neId } = modalState.from;
+  listNeConfigBackup({
+    neType,
+    neId,
+    name,
+    pageNum: 1,
+    pageSize: 20,
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      importState.backupData = [];
+      res.rows.forEach((item: any) => {
+        importState.backupData.push({
+          label: item.name,
+          value: item.path,
         });
-      }
-    });
-  } else {
-    modalState.from.file = null;
+      });
+    }
+  });
+}
+
+/**服务器备份文件选择切换 */
+function backupChange(value: any) {
+  if (!value) {
+    backupSearch();
+  }
+}
+
+/**类型切换 */
+function typeChange(value: any) {
+  modalState.from.path = undefined;
+  if (value === 'backup') {
+    backupSearch();
   }
 }
 
@@ -67,9 +86,8 @@ type ModalStateType = {
   from: {
     neType: string;
     neId: string;
-    importType: 'local' | 'server';
-    file: File | null;
-    fileName: string | undefined;
+    type: 'upload' | 'backup';
+    path: string | undefined;
   };
   /**确定按钮 loading */
   confirmLoading: boolean;
@@ -84,9 +102,8 @@ let modalState: ModalStateType = reactive({
   from: {
     neType: '',
     neId: '',
-    importType: 'local',
-    file: null,
-    fileName: undefined,
+    type: 'upload',
+    path: undefined,
   },
   confirmLoading: false,
   uploadFiles: [],
@@ -96,16 +113,10 @@ let modalState: ModalStateType = reactive({
 const modalStateFrom = Form.useForm(
   modalState.from,
   reactive({
-    file: [
+    path: [
       {
         required: true,
-        message: t('views.ne.neInfo.backConf.filePlease'),
-      },
-    ],
-    fileName: [
-      {
-        required: true,
-        message: t('views.ne.neInfo.backConf.fileNamePlease'),
+        message: t('views.ne.neInfo.backConf.pathPlease'),
       },
     ],
   })
@@ -117,21 +128,13 @@ const modalStateFrom = Form.useForm(
  */
 function fnModalOk() {
   if (modalState.confirmLoading) return;
-
   const from = toRaw(modalState.from);
-  let validateName = ['importType'];
-  if (from.importType === 'local') {
-    validateName.push('file');
-  } else {
-    validateName.push('fileName');
-  }
-
   modalStateFrom
-    .validate(validateName)
+    .validate()
     .then(e => {
       modalState.confirmLoading = true;
       const hide = message.loading(t('common.loading'), 0);
-      importFile(from)
+      importNeConfigBackup(from)
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
             message.success(t('common.operateOk'), 3);
@@ -168,6 +171,12 @@ function fnModalCancel() {
   emit('update:visible', false);
 }
 
+/**表单上传前删除 */
+function fnBeforeRemoveFile(file: UploadFile) {
+  modalState.from.path = undefined;
+  return true;
+}
+
 /**表单上传前检查或转换压缩 */
 function fnBeforeUploadFile(file: FileType) {
   if (modalState.confirmLoading) return false;
@@ -187,12 +196,30 @@ function fnBeforeUploadFile(file: FileType) {
 
 /**表单上传文件 */
 function fnUploadFile(up: UploadRequestOption) {
-  // 改为完成状态
-  const file = modalState.uploadFiles[0];
-  file.percent = 100;
-  file.status = 'done';
-  // 预置到表单
-  modalState.from.file = up.file as File;
+  // 发送请求
+  const hide = message.loading(t('common.loading'), 0);
+  modalState.confirmLoading = true;
+  let formData = new FormData();
+  formData.append('file', up.file);
+  formData.append('subPath', 'import');
+  uploadFile(formData)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        // 改为完成状态
+        const file = modalState.uploadFiles[0];
+        file.percent = 100;
+        file.status = 'done';
+        // 预置到表单
+        const { fileName } = res.data;
+        modalState.from.path = fileName;
+      } else {
+        message.error(res.msg, 3);
+      }
+    })
+    .finally(() => {
+      hide();
+      modalState.confirmLoading = false;
+    });
 }
 
 /**监听是否显示，初始数据 */
@@ -220,10 +247,17 @@ function fnExportConf(neType: string, neId: string) {
     content: t('views.ne.neInfo.backConf.exportTip'),
     onOk() {
       const hide = message.loading(t('common.loading'), 0);
-      exportSet({ neType, neId })
+      exportNeConfigBackup({ neType, neId })
         .then(res => {
           if (res.code === RESULT_CODE_SUCCESS) {
-            message.success(t('views.ne.neInfo.backConf.exportMsg'), 3);
+            notification.success({
+              message: t('common.tipTitle'),
+              description: t('views.ne.neInfo.backConf.exportMsg'),
+            });
+            saveAs(
+              res.data,
+              `${neType}_${neId}_config_backup_${Date.now()}.zip`
+            );
           } else {
             message.error(`${res.msg}`, 3);
           }
@@ -258,44 +292,44 @@ defineExpose({
     <a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }">
       <a-row :gutter="16">
         <a-col :lg="12" :md="12" :xs="24">
-          <a-form-item
-            :label="t('views.ne.common.neType')"
-            name="neType"
-            v-bind="modalStateFrom.validateInfos.neType"
-          >
+          <a-form-item :label="t('views.ne.common.neType')" name="neType">
             {{ modalState.from.neType }}
           </a-form-item>
           <a-form-item
             :label="t('views.ne.neInfo.backConf.importType')"
-            name="importType"
+            name="type"
           >
             <a-select
-              v-model:value="modalState.from.importType"
+              v-model:value="modalState.from.type"
               default-value="server"
-              :options="neManageOption.importType"
+              :options="importState.typeOption"
               @change="typeChange"
             >
             </a-select>
           </a-form-item>
         </a-col>
         <a-col :lg="12" :md="12" :xs="24">
-          <a-form-item
-            :label="t('views.ne.common.neId')"
-            name="neId"
-            v-bind="modalStateFrom.validateInfos.neId"
-          >
+          <a-form-item :label="t('views.ne.common.neId')" name="neId">
             {{ modalState.from.neId }}
           </a-form-item>
           <a-form-item
             :label="t('views.ne.neInfo.backConf.server')"
             name="fileName"
-            v-bind="modalStateFrom.validateInfos.fileName"
-            v-if="modalState.from.importType === 'server'"
+            v-bind="modalStateFrom.validateInfos.path"
+            v-if="modalState.from.type === 'backup'"
           >
             <a-select
-              v-model:value="modalState.from.fileName"
-              :options="neManageOption.serverFileName"
+              v-model:value="modalState.from.path"
+              :options="importState.backupData"
               :placeholder="t('common.selectPlease')"
+              :show-search="true"
+              :default-active-first-option="false"
+              :show-arrow="false"
+              :allow-clear="true"
+              :filter-option="false"
+              :not-found-content="null"
+              @search="backupSearch"
+              @change="backupChange"
             >
             </a-select>
           </a-form-item>
@@ -303,8 +337,8 @@ defineExpose({
           <a-form-item
             :label="t('views.ne.neInfo.backConf.local')"
             name="file"
-            v-bind="modalStateFrom.validateInfos.file"
-            v-if="modalState.from.importType === 'local'"
+            v-bind="modalStateFrom.validateInfos.path"
+            v-if="modalState.from.type === 'upload'"
           >
             <a-upload
               name="file"
@@ -314,9 +348,10 @@ defineExpose({
               :max-count="1"
               :show-upload-list="{
                 showPreviewIcon: false,
-                showRemoveIcon: false,
+                showRemoveIcon: true,
                 showDownloadIcon: false,
               }"
+              :remove="fnBeforeRemoveFile"
               :before-upload="fnBeforeUploadFile"
               :custom-request="fnUploadFile"
               :disabled="modalState.confirmLoading"
diff --git a/src/views/ne/neInfo/index.vue b/src/views/ne/neInfo/index.vue
index 33b1c148..8a95f042 100644
--- a/src/views/ne/neInfo/index.vue
+++ b/src/views/ne/neInfo/index.vue
@@ -558,7 +558,7 @@ onMounted(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :pagination="tablePagination"
-        :scroll="{ x: tableColumns.length * 150 }"
+        :scroll="{ x: tableColumns.length * 120 }"
         :row-selection="{
           type: 'checkbox',
           columnWidth: '48px',

From 532546c3f5657f99cac4ba5441db435166d688f0 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Sat, 27 Jul 2024 10:28:23 +0800
Subject: [PATCH 07/15] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E5=8F=B7=202.240727?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development | 2 +-
 .env.production  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.env.development b/.env.development
index 5d11267f..12c39038 100644
--- a/.env.development
+++ b/.env.development
@@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network EMS"
 VITE_APP_CODE = "CN EMS"
 
 # 应用版本
-VITE_APP_VERSION = "2.240712"
+VITE_APP_VERSION = "2.240727"
 
 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"
diff --git a/.env.production b/.env.production
index 9613308b..ebbaf2c6 100644
--- a/.env.production
+++ b/.env.production
@@ -11,7 +11,7 @@ VITE_APP_NAME = "Core Network EMS"
 VITE_APP_CODE = "CN EMS"
 
 # 应用版本
-VITE_APP_VERSION = "2.240712"
+VITE_APP_VERSION = "2.240727"
 
 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"

From 4ae90514110ba9463379cf38fb4a4f575219e597 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Sat, 27 Jul 2024 15:01:56 +0800
Subject: [PATCH 08/15] =?UTF-8?q?style:=20=E7=B3=BB=E7=BB=9F=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AELOGO=E5=92=8C=E6=96=87=E6=A1=A3=E5=88=A4=E6=96=AD?=
 =?UTF-8?q?=E6=98=AF=E5=90=A6=E5=BC=80=E5=90=AF=E8=AF=AD=E8=A8=80=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E6=98=BE=E7=A4=BA=E6=8E=A7=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../setting/components/change-help-doc.vue    | 66 ++++++++++---------
 .../system/setting/components/change-logo.vue | 11 ++--
 2 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/src/views/system/setting/components/change-help-doc.vue b/src/views/system/setting/components/change-help-doc.vue
index 9e891b0d..ca8e76c1 100644
--- a/src/views/system/setting/components/change-help-doc.vue
+++ b/src/views/system/setting/components/change-help-doc.vue
@@ -118,21 +118,6 @@ onMounted(() => {
       <a-form layout="vertical">
         <template v-if="state.edite">
           <a-form-item>
-            <a-select
-              v-model:value="state.language"
-              :disabled="!appStore.i18nOpen"
-              style="width: 100px"
-              size="small"
-              v-perms:has="['system:setting:i18n']"
-            >
-              <a-select-option
-                v-for="opt in optionsLocale"
-                :key="opt.value"
-                :value="opt.value"
-              >
-                {{ opt.label }}
-              </a-select-option>
-            </a-select>
             <a-upload
               name="file"
               list-type="text"
@@ -146,6 +131,24 @@ onMounted(() => {
                 {{ t('views.system.setting.uploadFile') }}
               </a-button>
             </a-upload>
+            <span
+              v-perms:has="['system:setting:i18n']"
+              v-show="appStore.i18nOpen"
+            >
+              <a-select
+                v-model:value="state.language"
+                style="width: 100px"
+                size="small"
+              >
+                <a-select-option
+                  v-for="opt in optionsLocale"
+                  :key="opt.value"
+                  :value="opt.value"
+                >
+                  {{ opt.label }}
+                </a-select-option>
+              </a-select>
+            </span>
           </a-form-item>
 
           <a-form-item>
@@ -165,27 +168,30 @@ onMounted(() => {
         <template v-else>
           <a-form-item>
             <a-space direction="horizontal" :size="16">
-              <a-select
-                v-model:value="state.language"
-                style="width: 100px"
-                size="small"
-                :disabled="!appStore.i18nOpen"
-                v-perms:has="['system:setting:i18n']"
-              >
-                <a-select-option
-                  v-for="opt in optionsLocale"
-                  :key="opt.value"
-                  :value="opt.value"
-                >
-                  {{ opt.label }}
-                </a-select-option>
-              </a-select>
               <a-button type="link" @click="fnClickHelpDoc(state.language)">
                 <template #icon>
                   <QuestionCircleOutlined />
                 </template>
                 {{ t('views.system.setting.sysHelpDocOpen') }}
               </a-button>
+              <span
+                v-perms:has="['system:setting:i18n']"
+                v-show="appStore.i18nOpen"
+              >
+                <a-select
+                  v-model:value="state.language"
+                  style="width: 100px"
+                  size="small"
+                >
+                  <a-select-option
+                    v-for="opt in optionsLocale"
+                    :key="opt.value"
+                    :value="opt.value"
+                  >
+                    {{ opt.label }}
+                  </a-select-option>
+                </a-select>
+              </span>
             </a-space>
           </a-form-item>
           <a-button type="default" @click="fnEdit(true)">
diff --git a/src/views/system/setting/components/change-logo.vue b/src/views/system/setting/components/change-logo.vue
index ec823bc2..ce03fc6f 100644
--- a/src/views/system/setting/components/change-logo.vue
+++ b/src/views/system/setting/components/change-logo.vue
@@ -242,12 +242,11 @@ onMounted(() => {
             </div>
           </div>
         </a-form-item>
-        <a-form-item v-perms:has="['system:setting:i18n']">
-          <a-select
-            v-model:value="state.language"
-            :disabled="!appStore.i18nOpen"
-            style="width: 100px"
-          >
+        <a-form-item
+          v-perms:has="['system:setting:i18n']"
+          v-show="appStore.i18nOpen"
+        >
+          <a-select v-model:value="state.language" style="width: 100px">
             <a-select-option
               v-for="opt in optionsLocale"
               :key="opt.value"

From 543a2b74349a8395b422471f2bd7b2b17e727fc7 Mon Sep 17 00:00:00 2001
From: lai <371757574@qq.com>
Date: Mon, 29 Jul 2024 10:38:14 +0800
Subject: [PATCH 09/15] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E7=BD=91=E5=85=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../quick-start/components/NeInfoConfig.vue   | 900 ++++++++++--------
 1 file changed, 510 insertions(+), 390 deletions(-)

diff --git a/src/views/system/quick-start/components/NeInfoConfig.vue b/src/views/system/quick-start/components/NeInfoConfig.vue
index 70c8f07f..66e2359e 100644
--- a/src/views/system/quick-start/components/NeInfoConfig.vue
+++ b/src/views/system/quick-start/components/NeInfoConfig.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { Modal, message } from 'ant-design-vue/lib';
-import { onMounted, reactive, toRaw } from 'vue';
+import { onMounted, reactive, ref, toRaw } from 'vue';
 import {
   addNeInfo,
   delNeInfo,
   listAllNeInfo,
+  getNeInfo,
   updateNeInfo,
 } from '@/api/ne/neInfo';
 import { neHostAuthorizedRSA, testNeHost } from '@/api/ne/neHost';
@@ -48,81 +49,90 @@ const tabState: TabStateType = reactive({
   confirmLoading: false,
 });
 
-/**
- * 导航标签关闭
- * @param id 标签的key
- */
-function fnTabClose(key: string) {
-  // 获取当前项下标
-  const tabIndex = tabState.panes.findIndex(tab => tab.key === key);
-  if (tabIndex === -1) return;
-  const item = tabState.panes[tabIndex];
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: `${item.data.neName} ${t('views.ne.neInfo.delTip')}`,
-    onOk() {
-      if (item.data.id) delNeInfo(item.data.id);
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  visibleByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**更新加载数据按钮 loading */
+  loadDataLoading: boolean;
+};
 
-      tabState.panes.splice(tabIndex, 1);
-      // 激活前一项标签
-      const idx = tabIndex === 0 ? 0 : tabIndex - 1;
-      tabState.activeKey = tabState.panes[idx].id;
-    },
-  });
-}
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  visibleByEdit: false,
+  title: '网元配置',
+  from: {
+    id: undefined,
+    neType: '',
+    neId: '',
+    neName: '',
+    ip: '',
+    port: 33030,
+    pvFlag: 'PNF',
+    rmUid: '',
+    neAddress: '',
+    dn: '-',
+    vendorName: '-',
+    province: '-',
+    hosts: [],
+  },
+  confirmLoading: false,
+  loadDataLoading: false,
+});
 
-/**新建网元信息 */
-function fnTabCreate() {
-  const neId = `${new Date().getMilliseconds()}`.padStart(3, '0');
-  tabState.panes.push({
-    key: `New@${neId}`,
-    data: {
-      id: undefined,
-      neId: neId,
-      neType: '',
-      neName: `New_${neId}`,
-      ip: '',
-      port: 33030,
-      pvFlag: 'PNF',
-      rmUid: `4400HXNew${neId}`,
-      neAddress: '',
-      dn: '-',
-      vendorName: '-',
-      province: '-',
-      // 主机
-      hosts: [
-        {
-          hostId: undefined,
-          hostType: 'ssh',
-          groupId: '1',
-          title: 'SSH_NE_22',
-          addr: '',
-          port: 22,
-          user: 'omcuser',
-          authMode: '2',
-          password: '',
-          privateKey: '',
-          passPhrase: '',
-          remark: '',
-        },
-        {
-          hostId: undefined,
-          hostType: 'telnet',
-          groupId: '1',
-          title: 'Telnet_NE_4100',
-          addr: '',
-          port: 4100,
-          user: 'admin',
-          authMode: '0',
-          password: 'admin',
-          remark: '',
-        },
-      ],
+/**表格状态 */
+let tableState: any = reactive({
+  loading: false,
+  size: 'small',
+  seached: true,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns: any = [
+  {
+    title: t('common.operate'),
+    dataIndex: 'operation',
+    key: 'operation',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.common.neType'),
+    dataIndex: 'neType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.common.neId'),
+    dataIndex: 'neId',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: t('views.ne.common.ipAddr'),
+    dataIndex: 'ip',
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: t('views.ne.neHost.user'),
+    dataIndex: 'hosts',
+    customRender(opt: any) {
+      const hosts = opt.value;
+      return hosts[0].user;
     },
-    status: false,
-  });
-  tabState.activeKey = `New@${neId}`;
-}
+    align: 'left',
+    width: 100,
+  },
+];
 
 /**
  * 测试主机连接
@@ -198,12 +208,154 @@ function fnNeTypeChange(v: any, data: any) {
   }
 }
 
+//打开新增或修改界面
+function fnModalVisibleByEdit(record?: any) {
+  if (!record) {
+    //modalStateFrom.resetFields();
+    modalState.title = t('views.configManage.neManage.addNe');
+    const neId = `${new Date().getMilliseconds()}`.padStart(3, '0');
+    modalState.from = {
+      id: undefined,
+      neId: neId,
+      neType: '',
+      neName: `New_${neId}`,
+      ip: '',
+      port: 33030,
+      pvFlag: 'PNF',
+      rmUid: `4400HXNew${neId}`,
+      neAddress: '',
+      dn: '-',
+      vendorName: '-',
+      province: '-',
+      // 主机
+      hosts: [
+        {
+          hostId: undefined,
+          hostType: 'ssh',
+          groupId: '1',
+          title: 'SSH_NE_22',
+          addr: '',
+          port: 22,
+          user: 'omcuser',
+          authMode: '2',
+          password: '',
+          privateKey: '',
+          passPhrase: '',
+          remark: '',
+        },
+        {
+          hostId: undefined,
+          hostType: 'telnet',
+          groupId: '1',
+          title: 'Telnet_NE_4100',
+          addr: '',
+          port: 4100,
+          user: 'admin',
+          authMode: '0',
+          password: 'admin',
+          remark: '',
+        },
+      ],
+    };
+    modalState.visibleByEdit = true;
+  } else {
+    //获取单个网元信息 当修改时
+    if (modalState.confirmLoading) return;
+    const hide = message.loading(t('common.loading'), 0);
+    modalState.confirmLoading = true;
+
+    getNeInfo(record.id).then(res => {
+      modalState.confirmLoading = false;
+      hide();
+      if (res.code === RESULT_CODE_SUCCESS) {
+        Object.assign(modalState.from, res.data);
+        modalState.title = t('views.configManage.neManage.editNe');
+        modalState.visibleByEdit = true;
+      } else {
+        message.error(t('common.getInfoFail'), 2);
+      }
+    });
+  }
+}
+
+/**新增或修改网元 */
+function fnModalOk() {
+  modalState.confirmLoading = true;
+  const from = toRaw(modalState.from);
+  from.rmUid = `4400HX${from.neType}${from.neId}`; // 4400HX1AMF001
+  from.neName = `${from.neType}_${from.neId}`; // AMF_001
+  const result = from.id ? updateNeInfo(from) : addNeInfo(from);
+  const hide = message.loading(t('common.loading'), 0);
+  result
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: t('common.operateOk'),
+          duration: 3,
+        });
+        fnGetList();
+      } else {
+        message.error({
+          content: `${res.msg}`,
+          duration: 3,
+        });
+      }
+    })
+    .finally(() => {
+      hide();
+      fnModalCancel();
+    });
+}
+
+/**
+ * 删除网元
+ * @param data 当前选项的data
+ */
+function fnDelete(data: any) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: `${data.neName} ${t('views.ne.neInfo.delTip')}`,
+    onOk() {
+      tableState.loading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      delNeInfo(data.id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success(t('common.operateOk'), 3);
+            tableState.loading = false;
+            fnGetList();
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 3,
+            });
+          }
+        })
+        .finally(() => {
+          hide();
+          tableState.loading = false;
+        });
+    },
+  });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.visibleByEdit = false;
+  modalState.confirmLoading = false;
+  tabState.confirmLoading = false;
+}
+
 /**
  * 表单修改网元IP
  */
 function fnNeIPChange(e: any, data: any) {
   const v = e.target.value;
-  if (v.length < 7) return;
+  if (v.length < 7) return; //IP地址长度
+  //主机host数组addr都置成e.target.value
   for (const host of data.hosts) {
     host.addr = v;
   }
@@ -231,59 +383,6 @@ function modalStateFromEqualIPV4AndIPV6(
   return Promise.resolve();
 }
 
-/**保存信息 */
-function fnSaveFinish(pane: any) {
-  tabState.confirmLoading = true;
-  const from = toRaw(pane);
-  from.rmUid = `4400HX${from.neType}${from.neId}`; // 4400HX1AMF001
-  from.neName = `${from.neType}_${from.neId}`; // AMF_001
-  const result = from.id ? updateNeInfo(from) : addNeInfo(from);
-  const hide = message.loading(t('common.loading'), 0);
-  result
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        if (res.data) {
-          pane.id = res.data;
-        }
-
-        const tabItem = tabState.panes.find(
-          tab => tab.key === tabState.activeKey
-        );
-        if (tabItem) {
-          tabItem.status = false;
-          tabItem.data.neName = from.neName;
-          tabItem.status = true;
-        }
-        message.success({
-          content: t('common.operateOk'),
-          duration: 3,
-        });
-      } else {
-        const tabItem = tabState.panes.find(
-          tab => tab.key === tabState.activeKey
-        );
-        if (tabItem) {
-          tabItem.status = true;
-          tabItem.data.neName = from.neName;
-          tabItem.status = false;
-        }
-        message.error({
-          content: `${res.msg}`,
-          duration: 3,
-        });
-      }
-    })
-    .finally(() => {
-      hide();
-      tabState.confirmLoading = false;
-    });
-}
-
-/**保存信息有错误的情况 */
-function fnSaveFinishFailed(e: any) {
-  message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
-}
-
 /**返回上一步 */
 function fnStepPrev() {
   Modal.confirm({
@@ -295,14 +394,26 @@ function fnStepPrev() {
   });
 }
 
-/**下一步操作 */
+/**下一步操作 先全部集体发过去请求新增 */
 function fnStepNext(stepName: 'NeInfoConfigPara5G') {
+  let promises = tabState.panes.map((item: any) => {
+    return item.id ? updateNeInfo(item) : addNeInfo(item);
+  });
+
   if (stepName === 'NeInfoConfigPara5G') {
     Modal.confirm({
       title: t('common.tipTitle'),
       content: t('views.system.quickStart.stepNeInfoStepNext'),
+      okButtonProps: {
+        loading: tabState.confirmLoading,
+      },
       onOk() {
-        fnToStepName('NeInfoConfigPara5G');
+        // 使用 Promise.allSettled 等待所有 Promise 完成
+        tabState.confirmLoading = true;
+        Promise.allSettled(promises).finally(() => {
+          tabState.confirmLoading = false;
+          fnToStepName('NeInfoConfigPara5G');
+        });
       },
     });
   }
@@ -314,26 +425,15 @@ function fnGetList() {
     bandHost: true,
   }).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      tabState.panes = [];
       for (const item of res.data) {
         if (item.neType === 'OMC' || !Array.isArray(item.hosts)) continue;
-        tabState.panes.push({
-          key: `${item.neType}@${item.neId}`,
-          data: item,
-          status: false,
-        });
-      }
-      // 没有终端信息时，新建一个占位
-      if (tabState.panes.length === 0) {
-        fnTabCreate();
-      }
-      // 选择首个
-      if (tabState.panes.length > 0) {
-        tabState.activeKey = tabState.panes[0].key;
+        tabState.panes.push(item);
       }
     }
   });
 }
-
+//
 onMounted(() => {
   // 初始字典数据
   Promise.allSettled([
@@ -360,296 +460,316 @@ onMounted(() => {
 
 <template>
   <div class="ne">
-    <a-tabs
-      class="neinfo-tabs"
-      hide-add
-      tab-position="top"
-      type="editable-card"
-      :tab-bar-gutter="8"
-      :tab-bar-style="{ margin: '0' }"
-      v-model:activeKey="tabState.activeKey"
-      @edit="(key:any) => fnTabClose(key as string)"
+    <a-table
+      class="table"
+      row-key="imsi"
+      :columns="tableColumns"
+      :loading="tableState.loading"
+      :data-source="tabState.panes"
+      :size="tableState.size"
+      :pagination="false"
+      :scroll="{ y: 'calc(100vh - 480px)' }"
+      @resizeColumn="(w:number, col:any) => (col.width = w)"
     >
-      <template #rightExtra>
-        <a-space :size="8" align="center">
-          <a-tooltip placement="topRight">
-            <template #title>
-              {{ t('views.ne.neInfo.addTitle') }}
-            </template>
-            <a-button type="default" shape="circle" @click="fnTabCreate()">
-              <template #icon><PlusOutlined /></template>
-            </a-button>
-          </a-tooltip>
-        </a-space>
-      </template>
-
-      <a-tab-pane
-        v-for="pane in tabState.panes"
-        :key="pane.key"
-        :closable="tabState.panes.length > 1"
-      >
-        <template #tab>
-          <a-badge
-            :status="pane.status ? 'success' : 'default'"
-            :text="pane.data.neName"
-          />
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'operation'">
+          <a-space :size="8" align="center">
+            <a-tooltip>
+              <template #title>{{ t('common.editText') }}</template>
+              <a-button
+                type="link"
+                @click.prevent="fnModalVisibleByEdit(record)"
+              >
+                <template #icon>
+                  <FormOutlined />
+                </template>
+              </a-button>
+            </a-tooltip>
+            <a-tooltip>
+              <template #title> {{ t('common.deleteText') }}</template>
+              <a-button type="link" @click.prevent="fnDelete(record)">
+                <template #icon>
+                  <delete-outlined />
+                </template>
+              </a-button>
+            </a-tooltip>
+          </a-space>
         </template>
-
-        <!-- {{ pane.data }} -->
-        <a-form
-          :name="pane.key"
-          layout="horizontal"
-          :model="pane.data"
-          :label-col="{ span: 6 }"
-          :labelWrap="true"
-          autocomplete="off"
-          @finish="fnSaveFinish(pane.data)"
-          @finishFailed="fnSaveFinishFailed"
-        >
-          <a-row :gutter="16">
-            <a-col :lg="12" :md="12" :xs="24">
-              <a-form-item
-                :label="t('views.ne.common.neType')"
-                name="neType"
-                :rules="{
-                  required: true,
-                  message: t('views.ne.common.neTypePlease'),
-                }"
+      </template>
+    </a-table>
+    <!-- 新增框或修改框 -->
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
+      :keyboard="false"
+      :mask-closable="false"
+      :visible="modalState.visibleByEdit"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    >
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 6 }"
+        :labelWrap="true"
+        :model="modalState.from"
+        autocomplete="off"
+      >
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.ne.common.neType')"
+              name="neType"
+              :rules="{
+                required: true,
+                message: t('views.ne.common.neTypePlease'),
+              }"
+            >
+              <a-auto-complete
+                v-model:value="modalState.from.neType"
+                :options="
+                  NE_TYPE_LIST.filter(s => s !== 'OMC').map(v => ({
+                    value: v,
+                  }))
+                "
+                @change="(v:any) => fnNeTypeChange(v, modalState.from)"
               >
-                <a-auto-complete
-                  v-model:value="pane.data.neType"
-                  :options="
-                    NE_TYPE_LIST.filter(s => s !== 'OMC').map(v => ({
-                      value: v,
-                    }))
-                  "
-                  @change="(v:any) => fnNeTypeChange(v, pane.data)"
+                <a-input
+                  allow-clear
+                  :placeholder="t('views.ne.common.neTypePlease')"
+                  :maxlength="32"
                 >
-                  <a-input
-                    allow-clear
-                    :placeholder="t('views.ne.common.neTypePlease')"
-                    :maxlength="32"
-                  >
-                    <template #prefix>
-                      <a-tooltip placement="topLeft">
-                        <template #title>
-                          {{ t('views.ne.common.neTypeTip') }}
-                        </template>
-                        <InfoCircleOutlined
-                          style="color: rgba(0, 0, 0, 0.45)"
-                        />
-                      </a-tooltip>
+                  <template #prefix>
+                    <a-tooltip placement="topLeft">
+                      <template #title>
+                        {{ t('views.ne.common.neTypeTip') }}
+                      </template>
+                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    </a-tooltip>
+                  </template>
+                </a-input>
+              </a-auto-complete>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.ne.common.neId')"
+              name="neId"
+              :rules="{
+                required: true,
+                message: t('views.ne.common.neIdPlease'),
+              }"
+            >
+              <a-input
+                v-model:value="modalState.from.neId"
+                allow-clear
+                :placeholder="t('views.ne.common.neIdPlease')"
+                :maxlength="24"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      {{ t('views.ne.common.neIdTip') }}
                     </template>
-                  </a-input>
-                </a-auto-complete>
+                    <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="t('views.ne.common.ipAddr')"
+              name="ip"
+              :rules="[
+                {
+                  required: true,
+                },
+                {
+                  validator: modalStateFromEqualIPV4AndIPV6,
+                },
+              ]"
+            >
+              <a-input
+                v-model:value="modalState.from.ip"
+                allow-clear
+                :placeholder="t('views.ne.common.ipAddrPlease')"
+                :maxlength="128"
+                @change="(e:any) => fnNeIPChange(e, modalState.from)"
+              >
+                <template #prefix>
+                  <a-tooltip placement="topLeft">
+                    <template #title>
+                      <div>
+                        {{ t('views.ne.common.ipAddrTip') }}
+                      </div>
+                    </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-col>
+        </a-row>
+
+        <template v-if="modalState.from.hosts.length > 0">
+          <a-divider orientation="left">
+            {{ t('views.ne.neInfo.hostConfig') }}
+          </a-divider>
+
+          <!-- 主机连接配置 -->
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item :label="t('views.ne.neHost.addr')">
+                <a-input
+                  v-model:value="modalState.from.hosts[0].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.common.neId')"
-                name="neId"
-                :rules="{
-                  required: true,
-                  message: t('views.ne.common.neIdPlease'),
-                }"
-              >
-                <a-input
-                  v-model:value="pane.data.neId"
-                  allow-clear
-                  :placeholder="t('views.ne.common.neIdPlease')"
-                  :maxlength="24"
-                >
-                  <template #prefix>
-                    <a-tooltip placement="topLeft">
-                      <template #title>
-                        {{ t('views.ne.common.neIdTip') }}
-                      </template>
-                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
-                    </a-tooltip>
-                  </template>
-                </a-input>
+              <a-form-item :label="t('views.ne.neHost.port')" name="port">
+                <a-input-number
+                  v-model:value="modalState.from.hosts[0].port"
+                  :min="10"
+                  :max="65535"
+                  :step="1"
+                  :maxlength="5"
+                  :placeholder="t('common.inputPlease')"
+                  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.common.ipAddr')"
-                name="ip"
-                :rules="{
-                  required: true,
-                  validator: modalStateFromEqualIPV4AndIPV6,
-                }"
-              >
+              <a-form-item :label="t('views.ne.neHost.user')">
                 <a-input
-                  v-model:value="pane.data.ip"
+                  v-model:value="modalState.from.hosts[0].user"
                   allow-clear
-                  :placeholder="t('views.ne.common.ipAddrPlease')"
-                  :maxlength="128"
-                  @change="(e:any) => fnNeIPChange(e, pane.data)"
+                  :maxlength="32"
+                  :placeholder="t('common.inputPlease')"
                 >
-                  <template #prefix>
-                    <a-tooltip placement="topLeft">
-                      <template #title>
-                        <div>
-                          {{ t('views.ne.common.ipAddrTip') }}
-                        </div>
-                      </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-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item :label="t('views.ne.neHost.authMode')">
+                <a-select
+                  v-model:value="modalState.from.hosts[0].authMode"
+                  default-value="0"
+                  :options="dict.neHostAuthMode"
+                >
+                </a-select>
+              </a-form-item>
+            </a-col>
           </a-row>
 
-          <template v-if="pane.data.hosts.length > 0">
-            <a-divider orientation="left">
-              {{ t('views.ne.neInfo.hostConfig') }}
-            </a-divider>
+          <a-form-item
+            v-if="modalState.from.hosts[0].authMode === '0'"
+            :label="t('views.ne.neHost.password')"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
+            <a-input-password
+              v-model:value="modalState.from.hosts[0].password"
+              :maxlength="128"
+              :placeholder="t('common.inputPlease')"
+            >
+            </a-input-password>
+          </a-form-item>
 
-            <!-- 主机连接配置 -->
-            <a-row :gutter="16">
-              <a-col :lg="12" :md="12" :xs="24">
-                <a-form-item :label="t('views.ne.neHost.addr')">
-                  <a-input
-                    v-model:value="pane.data.hosts[0].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">
-                  <a-input-number
-                    v-model:value="pane.data.hosts[0].port"
-                    :min="10"
-                    :max="65535"
-                    :step="1"
-                    :maxlength="5"
-                    :placeholder="t('common.inputPlease')"
-                    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')">
-                  <a-input
-                    v-model:value="pane.data.hosts[0].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="pane.data.hosts[0].authMode"
-                    default-value="0"
-                    :options="dict.neHostAuthMode"
-                  >
-                  </a-select>
-                </a-form-item>
-              </a-col>
-            </a-row>
+          <template v-if="modalState.from.hosts[0].authMode === '1'">
+            <a-form-item
+              :label="t('views.ne.neHost.privateKey')"
+              :label-col="{ span: 3 }"
+              :label-wrap="true"
+            >
+              <a-textarea
+                v-model:value="modalState.from.hosts[0].privateKey"
+                :auto-size="{ minRows: 4, maxRows: 6 }"
+                :maxlength="3000"
+                :show-count="true"
+                :placeholder="t('views.ne.neHost.privateKeyPlease')"
+              />
+            </a-form-item>
 
             <a-form-item
-              v-if="pane.data.hosts[0].authMode === '0'"
-              :label="t('views.ne.neHost.password')"
+              :label="t('views.ne.neHost.passPhrase')"
               :label-col="{ span: 3 }"
               :label-wrap="true"
             >
               <a-input-password
-                v-model:value="pane.data.hosts[0].password"
+                v-model:value="modalState.from.hosts[0].passPhrase"
                 :maxlength="128"
                 :placeholder="t('common.inputPlease')"
               >
               </a-input-password>
             </a-form-item>
-
-            <template v-if="pane.data.hosts[0].authMode === '1'">
-              <a-form-item
-                :label="t('views.ne.neHost.privateKey')"
-                :label-col="{ span: 3 }"
-                :label-wrap="true"
-              >
-                <a-textarea
-                  v-model:value="pane.data.hosts[0].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"
-              >
-                <a-input-password
-                  v-model:value="pane.data.hosts[0].passPhrase"
-                  :maxlength="128"
-                  :placeholder="t('common.inputPlease')"
-                >
-                </a-input-password>
-              </a-form-item>
-            </template>
-
-            <a-form-item
-              :label="t('views.ne.neHost.test')"
-              name="test"
-              :label-col="{ span: 3 }"
-              :label-wrap="true"
-            >
-              <a-button
-                type="dashed"
-                shape="round"
-                @click="fnHostTest(pane.data.hosts[0])"
-                :disabled="tabState.confirmLoading"
-              >
-                <template #icon><LinkOutlined /></template>
-              </a-button>
-
-              <a-button
-                type="link"
-                @click="fnHostAuthorized(pane.data.hosts[0])"
-                :disabled="tabState.confirmLoading"
-                v-if="
-                  pane.data.hosts[0].hostType === 'ssh' &&
-                  pane.data.hosts[0].authMode !== '2'
-                "
-              >
-                {{ t('views.ne.neHost.authRSA') }}
-              </a-button>
-            </a-form-item>
           </template>
 
-          <a-form-item :wrapper-col="{ offset: 10, span: 4 }">
+          <a-form-item
+            :label="t('views.ne.neHost.test')"
+            name="test"
+            :label-col="{ span: 3 }"
+            :label-wrap="true"
+          >
             <a-button
-              type="primary"
-              ghost
-              html-type="submit"
+              type="dashed"
+              shape="round"
+              @click="fnHostTest(modalState.from.hosts[0])"
               :disabled="tabState.confirmLoading"
             >
-              {{ t('views.system.quickStart.save') }}
+              <template #icon><LinkOutlined /></template>
+            </a-button>
+
+            <a-button
+              type="link"
+              @click="fnHostAuthorized(modalState.from.hosts[0])"
+              :disabled="tabState.confirmLoading"
+              v-if="
+                modalState.from.hosts[0].hostType === 'ssh' &&
+                modalState.from.hosts[0].authMode !== '2'
+              "
+            >
+              {{ t('views.ne.neHost.authRSA') }}
             </a-button>
           </a-form-item>
-        </a-form>
-      </a-tab-pane>
-    </a-tabs>
+        </template>
+
+        <!-- <a-form-item :wrapper-col="{ offset: 10, span: 4 }">
+          <a-button
+            type="primary"
+            ghost
+            html-type="submit"
+            :disabled="tabState.confirmLoading"
+          >
+            {{ t('views.system.quickStart.save') }}
+          </a-button>
+        </a-form-item> -->
+      </a-form>
+    </ProModal>
 
     <div class="ne-oper">
       <a-space direction="horizontal" :size="18">
+        <!-- 添加网元 -->
+        <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
+          <template #icon><PlusOutlined /></template>
+          {{ t('common.addText') }}
+        </a-button>
+
         <a-button @click="fnStepPrev()" :disabled="tabState.confirmLoading">
           {{ t('views.system.quickStart.exit') }}
         </a-button>
@@ -657,7 +777,7 @@ onMounted(() => {
         <a-button
           type="primary"
           @click="fnStepNext('NeInfoConfigPara5G')"
-          :disabled="tabState.confirmLoading"
+          :loading="tabState.confirmLoading"
         >
           {{ t('views.system.quickStart.stepNext') }}
         </a-button>

From 023e317b0d2a158bf944a867114d111fc8e73c16 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Mon, 29 Jul 2024 14:36:19 +0800
Subject: [PATCH 10/15] =?UTF-8?q?feat:=20=E7=BD=91=E5=85=83=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=A4=87=E4=BB=BD=E6=93=8D=E4=BD=9C=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=E6=8E=A7=E5=88=B6=E5=88=A0=E9=99=A4/=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ne/neConfigBackup/index.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/views/ne/neConfigBackup/index.vue b/src/views/ne/neConfigBackup/index.vue
index 33542842..931ce9c7 100644
--- a/src/views/ne/neConfigBackup/index.vue
+++ b/src/views/ne/neConfigBackup/index.vue
@@ -444,6 +444,7 @@ onMounted(() => {
             :disabled="tableState.selectedRowKeys.length <= 0"
             :loading="modalState.confirmLoading"
             @click.prevent="fnRecordDelete('0')"
+            v-perms:has="['ne:neConfigBackup:remove']"
           >
             <template #icon><DeleteOutlined /></template>
             {{ t('common.deleteText') }}
@@ -528,6 +529,7 @@ onMounted(() => {
                 <a-button
                   type="link"
                   @click.prevent="fnRecordDelete(record.id)"
+                  v-perms:has="['ne:neConfigBackup:remove']"
                 >
                   <template #icon><DeleteOutlined /></template>
                 </a-button>
@@ -537,6 +539,7 @@ onMounted(() => {
                 <a-button
                   type="link"
                   @click.prevent="fnModalVisibleByEdit(record)"
+                  v-perms:has="['ne:neConfigBackup:edit']"
                 >
                   <template #icon><FormOutlined /></template>
                 </a-button>

From c73fcbd91cc8dc1f3a35c2da91e46ff750b2fac2 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Mon, 29 Jul 2024 18:27:15 +0800
Subject: [PATCH 11/15] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E5=8F=B7=202.240729?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development | 6 +++---
 .env.production  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.env.development b/.env.development
index 12c39038..b122d84f 100644
--- a/.env.development
+++ b/.env.development
@@ -5,13 +5,13 @@ VITE_HISTORY_HASH = false
 VITE_HISTORY_BASE_URL = "/"
 
 # 应用名称
-VITE_APP_NAME = "Core Network EMS"
+VITE_APP_NAME = "Core Network OMC"
 
 # 应用标识
-VITE_APP_CODE = "CN EMS"
+VITE_APP_CODE = "OMC"
 
 # 应用版本
-VITE_APP_VERSION = "2.240727"
+VITE_APP_VERSION = "2.240729"
 
 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"
diff --git a/.env.production b/.env.production
index ebbaf2c6..5498a878 100644
--- a/.env.production
+++ b/.env.production
@@ -5,13 +5,13 @@ VITE_HISTORY_HASH = true
 VITE_HISTORY_BASE_URL = "/"
 
 # 应用名称
-VITE_APP_NAME = "Core Network EMS"
+VITE_APP_NAME = "Core Network OMC"
 
 # 应用标识
-VITE_APP_CODE = "CN EMS"
+VITE_APP_CODE = "OMC"
 
 # 应用版本
-VITE_APP_VERSION = "2.240727"
+VITE_APP_VERSION = "2.240729"
 
 # 接口基础URL地址-不带/后缀
 VITE_API_BASE_URL = "/omc-api"

From 6ab4fbea6f3450eb6e24357c3f935778508f5031 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Tue, 30 Jul 2024 11:27:12 +0800
Subject: [PATCH 12/15] =?UTF-8?q?fix:=20UDM=E7=AD=BE=E7=BA=A6=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AEcnType=E6=94=B95GC=20Flag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/locales/en-US.ts      |  8 +--
 src/i18n/locales/zh-CN.ts      |  4 +-
 src/views/neUser/sub/index.vue | 93 ++++++++++++++++++----------------
 3 files changed, 55 insertions(+), 50 deletions(-)

diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 48339c5d..52fd7648 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -878,8 +878,8 @@ export default {
         checkDel: 'Check Delete',
         batchAddText: 'Batch Add',
         batchDelText: 'Batch Delete',
-        enable:'Enable',
-        disable:'Disable',
+        enable:'Enabled',
+        disable:'Disabled',
         startIMSI: 'Start IMSI',
         imsiTip: 'IMSI=MCC+MNC+MSIN',
         imsiTip1: 'MCC=Mobile Country Code, consisting of three digits.',
@@ -887,13 +887,13 @@ export default {
         imsiTip3: 'MSIN = Mobile Subscriber Identification Number, consisting of 10 equal digits.',
         msisdnTip: 'Maximum parameter length {num}',
         inputTip: 'The maximum length of the parameter is {num}',
-        cnTypeTip: 'Type of network access allowed',
         arfbTip: 'Restricted area template, in which the UE is not allowed to communicate with the network in the restricted area specified in the template',
         sarTip: 'Service Area Restriction template, defining permitted areas in which the UE can communicate with the network, and disallowed areas in which the UE and the network are not allowed to initiate Service Requests or SM signaling to obtain subscriber services',
         micoTip: 'Signed MICO business flag bits',
         rfspTip:'RFSP index, in NG-RAN, the index of a specific RRM configuration, parameter between 0 and 127',
         ueTypeTip: 'Operator-defined subscriber UE Usage Type, integer, parameter between 0 and 127',
-        epsFlagTip: 'Enable or disable 4G EPS service',
+        cnFlag: 'Whether to enable 5G Core Network service',
+        epsFlagTip: 'Whether to enable 4G EPS service',
         contextIdTip: 'To sign up for an APN Context ID, you must select it from the APN Context list.',
         apnContextTip: 'The list of APNs available to the phone, up to six, is defined in the HSS.',
         staticIpTip: 'Specify the static IP address to be used by the cell phone user to access the Internet, and "-" means dynamic IP address is used.',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 6b9acb97..8a54c3e8 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -887,13 +887,13 @@ export default {
         imsiTip3: 'MSIN=移动客户识别码，采用等长10位数字构成',
         msisdnTip: '参数最大长度 {num}',
         inputTip: '参数最大长度为 {num}',
-        cnTypeTip: '允许接入的网络类型',
         arfbTip: '限制区域模板，在模板指定的限制区域中，UE 不允许与网络通信',
         sarTip: '服务区域限制模板，定义允许的区域，UE 在这些区域中可以和网络通信；定义不允许的区，UE 和网络在这些区域中，不允许发起Service Request 或 SM 信令来获取用户服务',
         micoTip: '签约的 MICO 业务标志位',
         rfspTip:'RFSP 索引，在 NG-RAN 中，特定 RRM 配置的索引,参数介于0到127之间',
         ueTypeTip: '运营商定义的用户 UE Usage Type，整型，参数介于0到127之间',
-        epsFlagTip: '是否开启4G EPS 服务',
+        cnFlag: '是否开启 5G Core Network 服务',
+        epsFlagTip: '是否开启 4G EPS 服务',
         contextIdTip: '签约APN 上下文ID，必须从APN Context list 中选择。',
         apnContextTip: '手机可用的APN列表，最多六个，在HSS中定义。',
         staticIpTip: '指定手机用户上网时使用的静态IP地址,为"-"时表示使用动态IP地址',
diff --git a/src/views/neUser/sub/index.vue b/src/views/neUser/sub/index.vue
index 6ecc587b..c085c6b6 100644
--- a/src/views/neUser/sub/index.vue
+++ b/src/views/neUser/sub/index.vue
@@ -8,7 +8,6 @@ import { ColumnsType } from 'ant-design-vue/lib/table';
 import UploadModal from '@/components/UploadModal/index.vue';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import useNeInfoStore from '@/store/modules/neinfo';
-import useDictStore from '@/store/modules/dict';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import saveAs from 'file-saver';
@@ -26,15 +25,6 @@ import {
 } from '@/api/neData/udm_sub';
 import { uploadFile } from '@/api/tool/file';
 const { t } = useI18n();
-const { getDict } = useDictStore();
-
-/**字典数据 */
-let dict: {
-  /**CN Type可选类型 */
-  udmSubCNType: DictType[];
-} = reactive({
-  udmSubCNType: [],
-});
 
 /**网元参数 */
 let neOtions = ref<Record<string, any>[]>([]);
@@ -147,15 +137,16 @@ let tableColumns = ref<ColumnsType>([
     width: 100,
   },
   {
-    title: 'CN Type',
+    title: '5G',
     dataIndex: 'cn',
-    key: 'cn',
+    key: 'cnFlag',
     align: 'center',
     width: 100,
   },
   {
-    title: 'EPS',
+    title: '4G',
     dataIndex: 'epsFlag',
+    key: 'epsFlag',
     align: 'center',
     width: 100,
   },
@@ -1200,13 +1191,6 @@ function delBigRow(bigIndex: any) {
 }
 
 onMounted(() => {
-  // 初始字典数据
-  Promise.allSettled([getDict('udm_sub_cn_type')]).then(resArr => {
-    if (resArr[0].status === 'fulfilled') {
-      dict.udmSubCNType = resArr[0].value;
-    }
-  });
-
   // 获取网元网元列表
   useNeInfoStore()
     .fnNelist()
@@ -1476,8 +1460,19 @@ onMounted(() => {
         }"
       >
         <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'cn'">
-            <DictTag :options="dict.udmSubCNType" :value="record.cn" />
+          <template v-if="column.key === 'cnFlag'">
+            {{
+              record.cn === '3'
+                ? t('views.neUser.sub.enable')
+                : t('views.neUser.sub.disable')
+            }}
+          </template>
+          <template v-if="column.key === 'epsFlag'">
+            {{
+              record.epsFlag === '1'
+                ? t('views.neUser.sub.enable')
+                : t('views.neUser.sub.disable')
+            }}
           </template>
           <template v-if="column.key === 'imsi'">
             <a-space :size="8" align="center">
@@ -1556,17 +1551,6 @@ onMounted(() => {
                 </template>
               </a-input>
             </a-form-item>
-            <a-form-item
-              label="CN Type"
-              name="cn"
-              :help="t('views.neUser.sub.cnTypeTip')"
-            >
-              <a-select
-                v-model:value="modalState.from.cn"
-                :options="dict.udmSubCNType"
-                :placeholder="t('common.selectPlease')"
-              />
-            </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
@@ -1705,6 +1689,22 @@ onMounted(() => {
               <a-divider orientation="left" style="margin: -2px">5G</a-divider>
             </template>
             <a-row :gutter="16">
+              <a-col :lg="24" :md="24" :xs="24">
+                <a-form-item
+                  label="5GC Flag"
+                  name="cnFlag"
+                  :help="t('views.neUser.sub.cnFlag')"
+                >
+                  <a-select v-model:value="modalState.from.cn">
+                    <a-select-option value="3">
+                      {{ t('views.neUser.sub.enable') }}
+                    </a-select-option>
+                    <a-select-option value="0">
+                      {{ t('views.neUser.sub.disable') }}
+                    </a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
               <a-col :lg="24" :md="24" :xs="24">
                 <a-form-item
                   label="5G Subscribed UE AMBR Template"
@@ -2107,17 +2107,6 @@ onMounted(() => {
                 </template>
               </a-input>
             </a-form-item>
-            <a-form-item
-              label="CN Type"
-              name="cn"
-              :help="t('views.neUser.sub.cnTypeTip')"
-            >
-              <a-select
-                v-model:value="modalState.BatchForm.cn"
-                :options="dict.udmSubCNType"
-                :placeholder="t('common.selectPlease')"
-              />
-            </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
@@ -2257,6 +2246,22 @@ onMounted(() => {
             </template>
 
             <a-row :gutter="16">
+              <a-col :lg="24" :md="24" :xs="24">
+                <a-form-item
+                  label="5GC Flag"
+                  name="cnFlag"
+                  :help="t('views.neUser.sub.cnFlag')"
+                >
+                  <a-select v-model:value="modalState.BatchForm.cn">
+                    <a-select-option value="3">
+                      {{ t('views.neUser.sub.enable') }}
+                    </a-select-option>
+                    <a-select-option value="0">
+                      {{ t('views.neUser.sub.disable') }}
+                    </a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
               <a-col :lg="24" :md="24" :xs="24">
                 <a-form-item
                   label="5G Subscribed UE AMBR Template"

From bc3940016a540b18a46382e3aa873d182c646534 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Tue, 30 Jul 2024 18:22:32 +0800
Subject: [PATCH 13/15] =?UTF-8?q?perf:=20=E7=BD=91=E5=85=83=E5=85=AC?=
 =?UTF-8?q?=E5=85=B1=E5=8F=82=E6=95=B0=E5=90=88=E5=B9=B6=E5=88=B0=E7=BD=91?=
 =?UTF-8?q?=E5=85=83=E5=BF=AB=E9=80=9F=E5=AE=89=E8=A3=85=EF=BC=8C=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E7=9B=B8=E5=85=B3=E5=A4=9A=E8=AF=AD=E8=A8=80=E7=BF=BB?=
 =?UTF-8?q?=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/locales/en-US.ts                     |  13 +-
 src/i18n/locales/zh-CN.ts                     |  13 +-
 src/views/ne/neConfPara5G/index.vue           | 296 ------------------
 .../components/Para5GForm.vue                 |  12 +-
 src/views/ne/neQuickSetup/hooks/usePara5G.ts  | 139 ++++++++
 src/views/ne/neQuickSetup/hooks/useStep.ts    |  31 +-
 src/views/ne/neQuickSetup/index.vue           |  59 ++--
 .../components/NeInfoConfigPara5G.vue         |   4 +-
 8 files changed, 216 insertions(+), 351 deletions(-)
 delete mode 100644 src/views/ne/neConfPara5G/index.vue
 rename src/views/ne/{neConfPara5G => neQuickSetup}/components/Para5GForm.vue (98%)
 create mode 100644 src/views/ne/neQuickSetup/hooks/usePara5G.ts

diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index 52fd7648..3ebe951c 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -769,23 +769,13 @@ export default {
         uploadChangeOk: 'Network Element renewed license successfully and is being calibrated in the background!',
         uploadChangeFail: "Some network elements failed to update the license, please check whether the service terminal environment is available!",
       },
-      neConfPara5G: {
-        headerTip: 'Check and save the public parameter properties of the network element before performing the installation of the network element, and make sure that the latest parameter properties are applied.',
-        headerTipToPage: 'Jump Installation',
-        save: 'Save',
-        reload: 'Reload',
-        title: 'Save Info',
-        sync: 'Sync to NE',
-        syncNe: 'Select NE',
-        syncNeDone: 'Synchronization to network element terminals complete',
-        saveOk: 'Save Success!', 
-      },
       neConfigBackup: {
         name: "Name",
         downTip: 'Confirmed to download the backup file [{txt}]?',
         title: "Modify Backup {txt}",
       },
       neQuickSetup: {
+        reloadPara5G: 'Reload',
         stepPrev: 'Previous',
         stepPrevTip: 'Confirm that you want to abandon the current change and return to the previous step?',
         stepNext: 'Next',
@@ -1952,6 +1942,7 @@ export default {
         stepNeInfoStepNext: 'Confirm that you want to proceed to the next step to configure the parameters of the network element?',
         stepPara5GTitle: "Configuration Parameter",
         stepPara5GDesc: "Setting network element global parameter information",
+        savePara5GOk: 'Save Success!',
         stepPara5GStepPrev: 'Confirm that you want to abandon the current change and return to the previous step?',
         stepPara5GStepNext: 'Confirm that you want to proceed to the next step for the network element service installation?',
         stepInstallTitle: "Service Install",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 8a54c3e8..32e76e82 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -769,23 +769,13 @@ export default {
         uploadChangeOk: '网元更新许可证成功，正在后台校验！',
         uploadChangeFail: "部分网元更新许可证失败，请检查服务终端环境是否可用！",
       },
-      neConfPara5G: {
-        headerTip: '进行网元安装前检查并保存网元公共参数属性，确认应用为最新参数属性',
-        headerTipToPage: '跳转安装',
-        save: '保存',
-        reload: '刷新',
-        title: '保存信息',
-        sync: '同步到网元',
-        syncNe: '选择网元',
-        syncNeDone: '同步到网元终端完成',
-        saveOk: '保存成功！',
-      },
       neConfigBackup: {
         name: "名称",
         downTip: '确认要下载备份文件【{txt}】吗？',
         title: "修改备份信息 {txt}",
       },
       neQuickSetup: {
+        reloadPara5G: '刷新',
         stepPrev: '上一步',
         stepPrevTip: '确认要放弃当前变更返回上一步吗？',
         stepNext: '下一步',
@@ -1952,6 +1942,7 @@ export default {
         stepNeInfoStepNext: '确认要下一步进行网元配置参数？',
         stepPara5GTitle: "网元配置参数",
         stepPara5GDesc: "设置网元全局参数信息",
+        savePara5GOk: '保存成功！',
         stepPara5GStepPrev: '确认要放弃当前变更返回上一步吗？',
         stepPara5GStepNext: '确认要下一步进行网元服务安装吗？',
         stepInstallTitle: "网元服务安装",
diff --git a/src/views/ne/neConfPara5G/index.vue b/src/views/ne/neConfPara5G/index.vue
deleted file mode 100644
index 58d4efae..00000000
--- a/src/views/ne/neConfPara5G/index.vue
+++ /dev/null
@@ -1,296 +0,0 @@
-<script setup lang="ts">
-import { reactive, onMounted, toRaw } from 'vue';
-import { PageContainer } from 'antdv-pro-layout';
-import { message } from 'ant-design-vue/lib';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import useI18n from '@/hooks/useI18n';
-import {
-  getPara5GFilee,
-  listNeInfo,
-  savePara5GFile,
-  updateNeInfo,
-} from '@/api/ne/neInfo';
-import useNeInfoStore from '@/store/modules/neinfo';
-import Para5GForm from './components/Para5GForm.vue';
-const { t } = useI18n();
-
-/**对象信息信息状态类型 */
-type StateType = {
-  /**保存选择同步到网元窗 */
-  visible: boolean;
-  /**网元选择 */
-  neSelectOtions: any[];
-  /**同步到网元 */
-  sync: boolean;
-  syncNe: string[];
-  syncMsg: string;
-  /**表单数据 */
-  from: Record<string, any>;
-  /**OMC信息，需修改当前的IP */
-  omcInfo: Record<string, any>;
-  /**根据网元显示配置项 */
-  hasNE: {
-    amf: boolean;
-    upf: boolean;
-    ims: boolean;
-    mme: boolean;
-  };
-  /**确定按钮 loading */
-  confirmLoading: boolean;
-};
-
-/**对象信息状态 */
-let state: StateType = reactive({
-  visible: false,
-  neSelectOtions: [],
-  sync: false,
-  syncNe: [],
-  syncMsg: '',
-  from: {},
-  omcInfo: {},
-  hasNE: {
-    amf: false,
-    upf: false,
-    ims: false,
-    mme: false,
-  },
-  confirmLoading: false,
-});
-
-/**对话框弹出确认执行函数*/
-function fnModalOk() {
-  if (state.confirmLoading) return;
-  state.confirmLoading = true;
-  savePara5GFile({
-    content: toRaw(state.from),
-    syncNe: state.sync ? state.syncNe : [],
-  })
-    .then(res => {
-      if (state.sync) {
-        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.saveOk'));
-        // 更新omc_ip
-        state.omcInfo.ip = state.from.sbi.omc_ip;
-        updateNeInfo(toRaw(state.omcInfo));
-      }
-    })
-    .finally(() => {
-      state.confirmLoading = false;
-    });
-}
-
-/**对话框弹出关闭执行函数*/
-function fnModalCancel() {
-  state.visible = false;
-  state.sync = false;
-  state.syncNe = [];
-  state.syncMsg = '';
-}
-
-/**保存文件数据*/
-function fnSaveData() {
-  state.visible = true;
-}
-
-/**获取文件数据*/
-function fnGetData() {
-  state.confirmLoading = true;
-  Promise.all([
-    getPara5GFilee(),
-    listNeInfo({
-      pageNum: 1,
-      pageSize: 20,
-    }),
-  ]).then(resArr => {
-    // 已保存的配置
-    if (resArr[0].code === RESULT_CODE_SUCCESS) {
-      Object.assign(state.from, resArr[0].data);
-    }
-    // 填充固定网元类型的ip
-    if (
-      resArr[1].code === RESULT_CODE_SUCCESS &&
-      Array.isArray(resArr[1].rows)
-    ) {
-      for (const item of resArr[1].rows) {
-        switch (item.neType) {
-          case 'OMC':
-            // state.from.sbi.omc_ip = item.ip;
-            Object.assign(state.omcInfo, item); // 主动改OMC_IP
-            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;
-            break;
-          case 'UDM':
-            state.from.sbi.udm_ip = item.ip;
-            state.from.sbi.db_ip = '0.0.0.0';
-            break;
-          case 'SMF':
-            state.from.sbi.smf_ip = item.ip;
-            break;
-          case 'PCF':
-            state.from.sbi.pcf_ip = item.ip;
-            break;
-          case 'NSSF':
-            state.from.sbi.nssf_ip = item.ip;
-            break;
-          case 'NRF':
-            state.from.sbi.nrf_ip = item.ip;
-            break;
-          case 'UPF':
-            state.from.sbi.upf_ip = item.ip;
-            state.hasNE.upf = true;
-            break;
-          case 'LMF':
-            state.from.sbi.lmf_ip = item.ip;
-            break;
-          case 'NEF':
-            state.from.sbi.nef_ip = item.ip;
-            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;
-            break;
-        }
-      }
-    }
-    state.confirmLoading = false;
-  });
-}
-
-onMounted(() => {
-  useNeInfoStore()
-    .fnNelist()
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
-        for (const row of res.data) {
-          state.neSelectOtions.push({
-            label: `[${row.neType} ${row.neId}] ${row.neName}`,
-            value: `${row.neType}@${row.neId}`,
-          });
-        }
-      } else {
-        message.warning({
-          content: t('common.noData'),
-          duration: 2,
-        });
-      }
-    })
-    .finally(() => {
-      // 获取文件数据
-      fnGetData();
-    });
-});
-</script>
-
-<template>
-  <PageContainer>
-    <template #content>
-      {{ t('views.ne.neConfPara5G.headerTip') }}
-      <RouterLink :to="{ name: 'NeQuickSetup_2142' }">
-        {{ t('views.ne.neConfPara5G.headerTipToPage') }}
-      </RouterLink>
-    </template>
-
-    <a-card :bordered="false">
-      <!-- 公共参数表单 -->
-      <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="primary"
-            :loading="state.confirmLoading"
-            @click="fnSaveData()"
-          >
-            <template #icon><SaveOutlined /></template>
-            {{ 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>
-      </div>
-    </a-card>
-
-    <!-- 保存选择同步网元 -->
-    <ProModal
-      :drag="true"
-      :minHeight="0"
-      :keyboard="false"
-      :mask-closable="false"
-      :visible="state.visible"
-      :title="t('views.ne.neConfPara5G.title')"
-      :confirm-loading="state.confirmLoading"
-      @ok="fnModalOk"
-      @cancel="fnModalCancel"
-    >
-      <a-form
-        name="syncNeModal"
-        layout="horizontal"
-        :label-col="{ span: 5 }"
-        :label-wrap="true"
-      >
-        <a-form-item :label="t('views.ne.neConfPara5G.sync')" name="sync">
-          <a-switch
-            :checked-children="t('common.switch.open')"
-            :un-checked-children="t('common.switch.shut')"
-            v-model:checked="state.sync"
-            :disabled="state.confirmLoading"
-          ></a-switch>
-        </a-form-item>
-        <a-form-item
-          :label="t('views.ne.neConfPara5G.syncNe')"
-          name="syncNe"
-          v-if="state.sync"
-        >
-          <a-select
-            v-model:value="state.syncNe"
-            mode="multiple"
-            :placeholder="t('common.selectPlease')"
-            :max-tag-count="3"
-            :options="state.neSelectOtions"
-          >
-            <template #maxTagPlaceholder="omittedValues">
-              <span>+ {{ omittedValues.length }} ...</span>
-            </template>
-          </a-select>
-        </a-form-item>
-        <a-form-item label="Sync Msg" name="syncMsg" v-if="state.syncMsg">
-          <a-textarea
-            :disabled="true"
-            :value="state.syncMsg"
-            :auto-size="{ minRows: 2, maxRows: 8 }"
-            style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
-          />
-        </a-form-item>
-      </a-form>
-    </ProModal>
-  </PageContainer>
-</template>
-
-<style lang="less" scoped></style>
diff --git a/src/views/ne/neConfPara5G/components/Para5GForm.vue b/src/views/ne/neQuickSetup/components/Para5GForm.vue
similarity index 98%
rename from src/views/ne/neConfPara5G/components/Para5GForm.vue
rename to src/views/ne/neQuickSetup/components/Para5GForm.vue
index 66ba7738..3189365f 100644
--- a/src/views/ne/neConfPara5G/components/Para5GForm.vue
+++ b/src/views/ne/neQuickSetup/components/Para5GForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted, watch } from 'vue';
+import { reactive, watch } from 'vue';
 import useI18n from '@/hooks/useI18n';
 const { t } = useI18n();
 const emit = defineEmits(['update:data']);
@@ -98,9 +98,7 @@ let state: StateType = reactive({
 watch(
   () => props.data,
   val => {
-    if (val) {
-      Object.assign(state.from, val);
-    }
+    if (val) Object.assign(state.from, val);
   },
   { deep: true }
 );
@@ -108,9 +106,7 @@ watch(
 watch(
   () => props.ne,
   val => {
-    if (val) {
-      Object.assign(state.hasNE, val);
-    }
+    if (val) Object.assign(state.hasNE, val);
   },
   { deep: true }
 );
@@ -122,8 +118,6 @@ watch(
   },
   { deep: true, immediate: true }
 );
-
-onMounted(() => {});
 </script>
 
 <template>
diff --git a/src/views/ne/neQuickSetup/hooks/usePara5G.ts b/src/views/ne/neQuickSetup/hooks/usePara5G.ts
new file mode 100644
index 00000000..9e3bc050
--- /dev/null
+++ b/src/views/ne/neQuickSetup/hooks/usePara5G.ts
@@ -0,0 +1,139 @@
+import { onMounted, 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';
+
+/**对象信息信息状态类型 */
+type StateType = {
+  /**表单数据 */
+  from: Record<string, any>;
+  /**OMC信息，需修改当前的IP */
+  omcInfo: Record<string, any>;
+  /**根据网元显示配置项 */
+  hasNE: {
+    amf: boolean;
+    upf: boolean;
+    ims: boolean;
+    mme: boolean;
+  };
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+export function usePara5G({ t }: any) {
+  /**对象信息状态 */
+  let state: StateType = reactive({
+    from: {},
+    omcInfo: {},
+    hasNE: {
+      amf: false,
+      upf: false,
+      ims: false,
+      mme: false,
+    },
+    confirmLoading: false,
+  });
+
+  /**载入数据*/
+  function fnReloadData() {
+    state.confirmLoading = true;
+    Promise.all([getPara5GFilee(), useNeInfoStore().fnRefreshNelist()]).then(
+      resArr => {
+        // 已保存的配置
+        if (resArr[0].code === RESULT_CODE_SUCCESS) {
+          Object.assign(state.from, resArr[0].data);
+        }
+        // 填充固定网元类型的ip
+        if (
+          resArr[1].code === RESULT_CODE_SUCCESS &&
+          Array.isArray(resArr[1].data)
+        ) {
+          for (const item of resArr[1].data) {
+            // 公共配置文件sbi的各网元IP
+            switch (item.neType) {
+              case 'OMC':
+                // state.from.sbi.omc_ip = item.ip;
+                Object.assign(state.omcInfo, item); // 主动改OMC_IP
+                break;
+              case 'IMS':
+                state.from.sbi.ims_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;
+                break;
+              case 'UDM':
+                state.from.sbi.udm_ip = item.ip;
+                state.from.sbi.db_ip = '0.0.0.0';
+                break;
+              case 'SMF':
+                state.from.sbi.smf_ip = item.ip;
+                break;
+              case 'PCF':
+                state.from.sbi.pcf_ip = item.ip;
+                break;
+              case 'NSSF':
+                state.from.sbi.nssf_ip = item.ip;
+                break;
+              case 'NRF':
+                state.from.sbi.nrf_ip = item.ip;
+                break;
+              case 'UPF':
+                state.from.sbi.upf_ip = item.ip;
+                state.hasNE.upf = true;
+                break;
+              case 'LMF':
+                state.from.sbi.lmf_ip = item.ip;
+                break;
+              case 'NEF':
+                state.from.sbi.nef_ip = item.ip;
+                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;
+                break;
+            }
+          }
+        }
+        state.confirmLoading = false;
+      }
+    );
+  }
+
+  /**保存数据 */
+  async function fnSaveData() {
+    if (state.confirmLoading) return;
+    state.confirmLoading = true;
+    const res = await savePara5GFile({
+      content: toRaw(state.from),
+      syncNe: [],
+    });
+    if (res.code === RESULT_CODE_SUCCESS) {
+      // 更新omc_ip
+      state.omcInfo.ip = state.from.sbi.omc_ip;
+      await updateNeInfo(toRaw(state.omcInfo));
+    }
+    state.confirmLoading = false;
+    return res;
+  }
+
+  onMounted(() => {
+    fnReloadData();
+  });
+
+  return {
+    state,
+    fnReloadData,
+    fnSaveData,
+  };
+}
diff --git a/src/views/ne/neQuickSetup/hooks/useStep.ts b/src/views/ne/neQuickSetup/hooks/useStep.ts
index 210cf113..ec20e2b6 100644
--- a/src/views/ne/neQuickSetup/hooks/useStep.ts
+++ b/src/views/ne/neQuickSetup/hooks/useStep.ts
@@ -1,4 +1,10 @@
-import { reactive } from 'vue';
+import {
+  defineAsyncComponent,
+  onMounted,
+  reactive,
+  shallowRef,
+  watch,
+} from 'vue';
 
 /**步骤信息状态类型 */
 type StepStateType = {
@@ -80,3 +86,26 @@ export function fnToStepName(stepName: string) {
 
   stepState.stepName = stepName;
 }
+
+export function useStep({ t }: any) {
+  // 异步加载组件
+  const Start = defineAsyncComponent(() => import('../components/Start.vue'));
+
+  // 当前组件
+  const currentComponent = shallowRef(Start);
+
+  watch(
+    () => stepState.stepName,
+    v => {
+      const loadComponent = defineAsyncComponent(
+        () => import(`../components/${v}.vue`)
+      );
+      currentComponent.value = loadComponent;
+    }
+  );
+
+  onMounted(() => {
+    fnRestStepState(t);
+  });
+  return { currentComponent };
+}
diff --git a/src/views/ne/neQuickSetup/index.vue b/src/views/ne/neQuickSetup/index.vue
index 6dec407e..6bb2c66c 100644
--- a/src/views/ne/neQuickSetup/index.vue
+++ b/src/views/ne/neQuickSetup/index.vue
@@ -1,34 +1,27 @@
 <script lang="ts" setup>
 import { PageContainer } from 'antdv-pro-layout';
-import { defineAsyncComponent, watch, shallowRef, onMounted } from 'vue';
-import { stepState, fnRestStepState } from './hooks/useStep';
+import Para5GForm from './components/Para5GForm.vue';
+import { stepState, useStep } from './hooks/useStep';
+import { usePara5G } from './hooks/usePara5G';
 import useI18n from '@/hooks/useI18n';
+import { ref } from 'vue';
 const { t } = useI18n();
 
-// 异步加载组件
-const Start = defineAsyncComponent(() => import('./components/Start.vue'));
+const { currentComponent } = useStep(t);
+const { state, fnReloadData, fnSaveData } = usePara5G(t);
 
-// 当前组件
-const currentComponent = shallowRef(Start);
-
-watch(
-  () => stepState.stepName,
-  v => {
-    const loadComponent = defineAsyncComponent(
-      () => import(`./components/${v}.vue`)
-    );
-    currentComponent.value = loadComponent;
-  }
-);
-
-onMounted(() => {
-  fnRestStepState(t);
-});
+const installNE = ref(false);
+/**公共参数保存前下一步进行网元安装 */
+function fnNext() {
+  fnSaveData().then(() => {
+    installNE.value = !installNE.value;
+  });
+}
 </script>
 
 <template>
   <PageContainer>
-    <a-card :bordered="false">
+    <a-card :bordered="false" v-if="installNE">
       <!-- 插槽-卡片左侧 -->
       <template #title>
         <!-- 步骤进度 -->
@@ -46,6 +39,30 @@ onMounted(() => {
       <!-- 步骤页面 -->
       <component :is="currentComponent" />
     </a-card>
+    <a-card :bordered="false" v-else>
+      <!-- 公共参数表单 -->
+      <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="primary"
+            :loading="state.confirmLoading"
+            @click="fnNext()"
+          >
+            {{ t('views.ne.neQuickSetup.stepNext') }}
+          </a-button>
+          <a-button
+            type="default"
+            :disabled="state.confirmLoading"
+            @click.prevent="fnReloadData()"
+          >
+            <template #icon><ReloadOutlined /></template>
+            {{ t('views.ne.neQuickSetup.reloadPara5G') }}
+          </a-button>
+        </a-space>
+      </div>
+    </a-card>
   </PageContainer>
 </template>
 
diff --git a/src/views/system/quick-start/components/NeInfoConfigPara5G.vue b/src/views/system/quick-start/components/NeInfoConfigPara5G.vue
index 9268d8dd..99364ae3 100644
--- a/src/views/system/quick-start/components/NeInfoConfigPara5G.vue
+++ b/src/views/system/quick-start/components/NeInfoConfigPara5G.vue
@@ -10,7 +10,7 @@ import {
   updateNeInfo,
 } from '@/api/ne/neInfo';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import Para5GForm from '@/views/ne/neConfPara5G/components/Para5GForm.vue';
+import Para5GForm from '@/views/ne/neQuickSetup/components/Para5GForm.vue';
 const { t } = useI18n();
 
 /**对象信息信息状态类型 */
@@ -60,7 +60,7 @@ function fnSave() {
   })
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS) {
-        message.success(t('views.ne.neConfPara5G.saveOk'));
+        message.success(t('views.system.quickStart.savePara5GOk'));
         state.saveFile = true;
         // 更新omc_ip
         state.omcInfo.ip = state.from.sbi.omc_ip;

From 3c1ee63359ad87f252b4ef1e19d587260887f076 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Tue, 30 Jul 2024 18:23:51 +0800
Subject: [PATCH 14/15] =?UTF-8?q?fix:=20=E5=BC=80=E7=AB=99=E7=BD=91?=
 =?UTF-8?q?=E5=85=83=E5=AE=89=E8=A3=85=E4=BF=A1=E6=81=AF=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E8=A7=A6=E5=8F=91=E6=93=8D=E4=BD=9C=E4=B8=8D=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/quick-start/components/NeInfoConfig.vue   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/system/quick-start/components/NeInfoConfig.vue b/src/views/system/quick-start/components/NeInfoConfig.vue
index 66e2359e..cbe0b7d2 100644
--- a/src/views/system/quick-start/components/NeInfoConfig.vue
+++ b/src/views/system/quick-start/components/NeInfoConfig.vue
@@ -396,10 +396,6 @@ function fnStepPrev() {
 
 /**下一步操作 先全部集体发过去请求新增 */
 function fnStepNext(stepName: 'NeInfoConfigPara5G') {
-  let promises = tabState.panes.map((item: any) => {
-    return item.id ? updateNeInfo(item) : addNeInfo(item);
-  });
-
   if (stepName === 'NeInfoConfigPara5G') {
     Modal.confirm({
       title: t('common.tipTitle'),
@@ -408,9 +404,13 @@ function fnStepNext(stepName: 'NeInfoConfigPara5G') {
         loading: tabState.confirmLoading,
       },
       onOk() {
-        // 使用 Promise.allSettled 等待所有 Promise 完成
         tabState.confirmLoading = true;
-        Promise.allSettled(promises).finally(() => {
+        // 使用 Promise.allSettled 等待所有 Promise 完成
+        Promise.allSettled(
+          tabState.panes.map((item: any) =>
+            item.id ? updateNeInfo(item) : addNeInfo(item)
+          )
+        ).finally(() => {
           tabState.confirmLoading = false;
           fnToStepName('NeInfoConfigPara5G');
         });

From e21a8dc8981c208d63174aa37a9152902f4f099b Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 1 Aug 2024 17:34:16 +0800
Subject: [PATCH 15/15] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=BF=AB?=
 =?UTF-8?q?=E9=80=9F=E5=AE=89=E8=A3=85=E9=85=8D=E7=BD=AE=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ne/neQuickSetup/components/Para5GForm.vue | 192 ++++-----
 .../ne/neQuickSetup/components/Start.vue      | 398 ++++++++++--------
 src/views/ne/neQuickSetup/hooks/usePara5G.ts  |  16 +-
 src/views/ne/neQuickSetup/hooks/useStep.ts    |   8 +-
 src/views/ne/neQuickSetup/index.vue           |  70 +--
 5 files changed, 350 insertions(+), 334 deletions(-)

diff --git a/src/views/ne/neQuickSetup/components/Para5GForm.vue b/src/views/ne/neQuickSetup/components/Para5GForm.vue
index 3189365f..b55c1de7 100644
--- a/src/views/ne/neQuickSetup/components/Para5GForm.vue
+++ b/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 = {
-  /**表单数据 */
-  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',
+/**表单信息状态 */
+let fromState = ref({
+  basic: {
+    plmnId: {
+      mcc: '001',
+      mnc: '01',
     },
-    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',
-      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',
+    tac: '4388',
+    snssai: {
+      sst: '1',
+      sd: '000001',
     },
+    dnn_data: 'internet',
+    dnn_ims: 'ims',
   },
-  hasNE: {
-    amf: false,
-    upf: false,
-    ims: false,
-    mme: false,
+  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',
+    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,
-  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,
+  () => fromState,
   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="state.hasNE.amf">
+        <template v-if="props.ne.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"
diff --git a/src/views/ne/neQuickSetup/components/Start.vue b/src/views/ne/neQuickSetup/components/Start.vue
index a63955d9..15df7a53 100644
--- a/src/views/ne/neQuickSetup/components/Start.vue
+++ b/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>
-    <a-descriptions-item :label="t('views.ne.neQuickSetup.addr')" :span="3">
-      {{ state.info.addr }}
-    </a-descriptions-item>
-    <a-descriptions-item :label="t('views.ne.neQuickSetup.kernelName')">
-      {{ state.info.kernelName }}
-    </a-descriptions-item>
-    <a-descriptions-item :label="t('views.ne.neQuickSetup.machine')">
-      {{ state.info.machine }}
-    </a-descriptions-item>
-    <a-descriptions-item :label="t('views.ne.neQuickSetup.kernelRelease')">
-      {{ state.info.kernelRelease }}
-    </a-descriptions-item>
-    <a-descriptions-item>
-      <template #label>
-        {{ t('views.ne.neQuickSetup.prettyName') }}
-        <a-tooltip placement="topLeft">
-          <template #title>
-            {{ t('views.ne.neQuickSetup.prettyNameTip') }}
+  <div class="ne">
+    <a-descriptions :column="{ lg: 3, md: 2, sm: 2, xs: 1 }" bordered>
+      <a-descriptions-item :label="t('views.ne.neQuickSetup.addr')" :span="3">
+        {{ state.info.addr }}
+      </a-descriptions-item>
+      <a-descriptions-item :label="t('views.ne.neQuickSetup.kernelName')">
+        {{ state.info.kernelName }}
+      </a-descriptions-item>
+      <a-descriptions-item :label="t('views.ne.neQuickSetup.machine')">
+        {{ state.info.machine }}
+      </a-descriptions-item>
+      <a-descriptions-item :label="t('views.ne.neQuickSetup.kernelRelease')">
+        {{ state.info.kernelRelease }}
+      </a-descriptions-item>
+      <a-descriptions-item>
+        <template #label>
+          {{ t('views.ne.neQuickSetup.prettyName') }}
+          <a-tooltip placement="topLeft">
+            <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)" />
-        </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>
-        {{ t('views.ne.neQuickSetup.sudo') }}
-      </a-tag>
+          {{ t('views.ne.neQuickSetup.sudo') }}
+        </a-tag>
 
-      <a-tag :color="state.info.sshLink ? 'success' : 'error'">
-        <template #icon>
-          <CheckCircleOutlined v-if="state.info.sshLink" />
-          <CloseCircleOutlined v-else />
-        </template>
-        {{ t('views.ne.neQuickSetup.sshLink') }}
-      </a-tag>
-    </a-descriptions-item>
-    <a-descriptions-item :span="2">
-      <a-form
-        name="checkStateFrom"
-        layout="horizontal"
-        :label-col="{ span: 6 }"
-        :label-wrap="false"
+        <a-tag :color="state.info.sshLink ? 'success' : 'error'">
+          <template #icon>
+            <CheckCircleOutlined v-if="state.info.sshLink" />
+            <CloseCircleOutlined v-else />
+          </template>
+          {{ t('views.ne.neQuickSetup.sshLink') }}
+        </a-tag>
+      </a-descriptions-item>
+    </a-descriptions>
+
+    <a-form
+      name="checkStateFrom"
+      layout="horizontal"
+      :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-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-input-password
+          v-model:value="state.from.password"
+          :maxlength="128"
+          :placeholder="t('common.inputPlease')"
+        >
+        </a-input-password>
+      </a-form-item>
 
+      <template v-if="state.from.authMode === '1'">
         <a-form-item
-          v-if="state.from.authMode === '0'"
-          :label="t('views.ne.neHost.password')"
+          :label="t('views.ne.neHost.privateKey')"
+          :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
-            :label="t('views.ne.neHost.privateKey')"
-            :label-col="{ span: 3 }"
-            :label-wrap="true"
-            name="privateKey"
-            v-bind="checkStateFrom.validateInfos.privateKey"
+      <a-form-item :wrapper-col="{ span: 8, offset: 3 }">
+        <a-space direction="horizontal" :size="18">
+          <a-button
+            type="primary"
+            ghost
+            html-type="submit"
+            @click="fnCheckInfo()"
+            :loading="state.confirmLoading"
           >
-            <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>
+            {{ t('views.ne.neHost.test') }}
+          </a-button>
 
-          <a-form-item
-            :label="t('views.ne.neHost.passPhrase')"
-            :label-col="{ span: 3 }"
-            :label-wrap="true"
+          <a-button
+            type="dashed"
+            @click="fnHostAuthorized()"
+            :disabled="state.confirmLoading"
+            v-if="state.from.authMode !== '2'"
           >
-            <a-input-password
-              v-model:value="state.from.passPhrase"
-              :maxlength="128"
-              :placeholder="t('common.inputPlease')"
-            >
-            </a-input-password>
-          </a-form-item>
-        </template>
+            {{ t('views.ne.neHost.authRSA') }}
+          </a-button>
 
-        <a-form-item :wrapper-col="{ span: 10, offset: 3 }">
-          <a-space direction="horizontal" :size="18">
-            <a-button
-              type="primary"
-              ghost
-              html-type="submit"
-              @click="fnCheckInfo()"
-              :loading="state.confirmLoading"
-            >
-              {{ t('views.ne.neHost.test') }}
-            </a-button>
-            <a-button
-              type="primary"
-              @click="fnStepNext()" 
-              :disabled="!state.stepNext"
-            >
-              {{ t('views.ne.neQuickSetup.stepNext') }}
-            </a-button>
+          <a-button
+            type="link"
+            @click="fnCheckInfoReset()"
+            :disabled="state.confirmLoading"
+          >
+            {{ t('common.reset') }}
+          </a-button>
+        </a-space>
+      </a-form-item>
+    </a-form>
 
-            <a-button
-              type="dashed"
-              @click="fnHostAuthorized()"
-              :disabled="state.confirmLoading"
-              v-if="state.from.authMode !== '2'"
-            >
-              {{ t('views.ne.neHost.authRSA') }}
-            </a-button>
+    <div class="ne-oper">
+      <a-space direction="horizontal" :size="18">
+        <a-button @click="fnStepPrev()">
+          {{ t('views.ne.neQuickSetup.stepPrev') }}
+        </a-button>
 
-            <a-button
-              type="link"
-              @click="fnCheckInfoReset()"
-              :disabled="state.confirmLoading"
-            >
-              {{ t('common.reset') }}
-            </a-button>
-          </a-space>
-        </a-form-item>
-      </a-form>
-    </a-descriptions-item>
-  </a-descriptions>
+        <a-button
+          type="primary"
+          @click="fnStepNext()"
+          :disabled="!state.stepNext"
+        >
+          {{ t('views.ne.neQuickSetup.stepNext') }}
+        </a-button>
+      </a-space>
+    </div>
+  </div>
 </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>
diff --git a/src/views/ne/neQuickSetup/hooks/usePara5G.ts b/src/views/ne/neQuickSetup/hooks/usePara5G.ts
index 9e3bc050..21cffcd5 100644
--- a/src/views/ne/neQuickSetup/hooks/usePara5G.ts
+++ b/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;
-      await updateNeInfo(toRaw(state.omcInfo));
+      if (state.omcInfo.id) {
+        state.omcInfo.ip = state.from.sbi.omc_ip;
+        await updateNeInfo(toRaw(state.omcInfo));
+      }
     }
     state.confirmLoading = false;
     return res;
   }
 
-  onMounted(() => {
-    fnReloadData();
-  });
-
   return {
     state,
     fnReloadData,
diff --git a/src/views/ne/neQuickSetup/hooks/useStep.ts b/src/views/ne/neQuickSetup/hooks/useStep.ts
index ec20e2b6..0db07b25 100644
--- a/src/views/ne/neQuickSetup/hooks/useStep.ts
+++ b/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.current = 0;
+  stepState.stepName = 'Para5G';
+  stepState.current = -1;
   stepState.neHost = {};
   stepState.neInfo = {};
   // 多语言翻译
diff --git a/src/views/ne/neQuickSetup/index.vue b/src/views/ne/neQuickSetup/index.vue
index 6bb2c66c..c4f91521 100644
--- a/src/views/ne/neQuickSetup/index.vue
+++ b/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>