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] =?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>