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 1/7] =?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 2/7] =?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 3/7] =?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 4/7] =?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 5/7] =?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 6/7] =?UTF-8?q?fix:=20=E5=BC=80=E7=AB=99=E7=BD=91=E5=85=83?=
 =?UTF-8?q?=E5=AE=89=E8=A3=85=E4=BF=A1=E6=81=AF=E4=BF=9D=E5=AD=98=E8=A7=A6?=
 =?UTF-8?q?=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 7/7] =?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>