From c01f9f3830961d9365ce4df08c31108f01611aa3 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Wed, 24 Apr 2024 15:29:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=80=E7=AB=99=E7=BD=91=E5=85=83?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E9=A1=B5=E9=9D=A2=E9=80=BB=E8=BE=91=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../quick-build/components/ConfigNeInfo.vue   | 786 ++++++++++++++++--
 1 file changed, 696 insertions(+), 90 deletions(-)

diff --git a/src/views/system/quick-build/components/ConfigNeInfo.vue b/src/views/system/quick-build/components/ConfigNeInfo.vue
index 13f1d7c7..55d6d0e5 100644
--- a/src/views/system/quick-build/components/ConfigNeInfo.vue
+++ b/src/views/system/quick-build/components/ConfigNeInfo.vue
@@ -1,71 +1,50 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
-import { stepState, fnToStepName } from '../hooks/useStep';
-import { Modal } from 'ant-design-vue';
+import { Modal, message } from 'ant-design-vue/lib';
+import { onMounted, reactive, toRaw } from 'vue';
+import {
+  addNeInfo,
+  delNeInfo,
+  listAllNeInfo,
+  updateNeInfo,
+} from '@/api/ne/neInfo';
+import { neHostAuthorizedRSA, testNeHost } from '@/api/ne/neHost';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { NE_TYPE_LIST } from '@/constants/ne-constants';
+import { fnToStepName } from '../hooks/useStep';
 import useI18n from '@/hooks/useI18n';
-import { listAllNeInfo } from '@/api/ne/neInfo';
+import useDictStore from '@/store/modules/dict';
+const { getDict } = useDictStore();
 const { t } = useI18n();
 
+/**字典数据 */
+let dict: {
+  /**主机类型 */
+  neHostType: DictType[];
+  /**分组 */
+  neHostGroupId: DictType[];
+  /**认证模式 */
+  neHostAuthMode: DictType[];
+} = reactive({
+  neHostType: [],
+  neHostGroupId: [],
+  neHostAuthMode: [],
+});
+
 /**标签对象信息状态类型 */
 type TabStateType = {
   /**激活选中 */
   activeKey: string;
   /**页签数据 */
   panes: Record<string, any>[];
+  /**等待loading */
+  confirmLoading: boolean;
 };
 
 /**标签对象信息状态 */
 const tabState: TabStateType = reactive({
   activeKey: 'neType@neId',
-  panes: [
-    {
-      key: 'neType@neId',
-      data: {
-        id: undefined,
-        neId: '001',
-        neType: 'AMF',
-        neName: '',
-        ip: '',
-        port: 33030,
-        pvFlag: 'PNF',
-        rmUid: '4400HX1AMF001',
-        neAddress: '',
-        dn: '',
-        vendorName: '',
-        province: '',
-        // 主机
-        hosts: [
-          {
-            hostId: undefined,
-            hostType: 'ssh',
-            groupId: '1',
-            title: 'SSH_NE_22',
-            addr: '',
-            port: 22,
-            user: 'user',
-            authMode: '0',
-            password: 'user',
-            privateKey: '',
-            passPhrase: '',
-            remark: '',
-          },
-          {
-            hostId: undefined,
-            hostType: 'telnet',
-            groupId: '1',
-            title: 'Telnet_NE_4100',
-            addr: '',
-            port: 4100,
-            user: 'user',
-            authMode: '0',
-            password: 'user',
-            remark: '',
-          },
-        ],
-      },
-      status: false,
-    },
-  ],
+  panes: [],
+  confirmLoading: false,
 });
 
 /**
@@ -79,20 +58,21 @@ function fnTabClose(key: string) {
   const item = tabState.panes[tabIndex];
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: t('views.tool.terminal.closeTip', {
-      num: `${item.data.neType}@${item.data.neId}`,
-    }),
+    content: `确认要删除${item.data.neType}@${item.data.neId}网元信息？`,
     onOk() {
-      tabState.panes.splice(tabIndex, 1);
-      // 激活前一项标签
-      tabState.activeKey = tabState.panes[tabIndex - 1].id;
+      delNeInfo(item.data.id).finally(() => {
+        tabState.panes.splice(tabIndex, 1);
+        // 激活前一项标签
+        const idx = tabIndex === 0 ? 0 : tabIndex - 1;
+        tabState.activeKey = tabState.panes[idx].id;
+      });
     },
   });
 }
 
 /**新建网元信息 */
-function fnCreateNe() {
-  const neType = 'AMF';
+function fnTabCreate() {
+  const neType = 'NE';
   const neId = '001' + new Date().getMilliseconds();
   tabState.panes.push({
     key: `${neType}@${neId}`,
@@ -119,7 +99,7 @@ function fnCreateNe() {
           addr: '',
           port: 22,
           user: 'user',
-          authMode: '0',
+          authMode: '2',
           password: 'user',
           privateKey: '',
           passPhrase: '',
@@ -141,23 +121,219 @@ function fnCreateNe() {
     },
     status: false,
   });
+  tabState.activeKey = `${neType}@${neId}`;
+}
+
+/**
+ * 对话框弹出测试连接
+ */
+function fnModalTest(row: Record<string, any>) {
+  if (tabState.confirmLoading || !row.addr) return;
+  tabState.confirmLoading = true;
+  const hide = message.loading(t('common.loading'), 0);
+  testNeHost(row)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success({
+          content: `${row.addr}:${row.port} ${t('views.ne.neHost.testOk')}`,
+          duration: 2,
+        });
+      } else {
+        message.error({
+          content: `${row.addr}:${row.port} ${res.msg}`,
+          duration: 2,
+        });
+      }
+    })
+    .finally(() => {
+      hide();
+      tabState.confirmLoading = false;
+    });
+}
+
+/**SSH连接-免密直连 */
+function fnSSHLink(row: Record<string, any>) {
+  if (tabState.confirmLoading) return;
+
+  Modal.confirm({
+    title: '提示',
+    content: '是否要配置免密直连？',
+    onOk: () => {
+      tabState.confirmLoading = true;
+      neHostAuthorizedRSA(row).then(res => {
+        tabState.confirmLoading = false;
+        if (res.code === RESULT_CODE_SUCCESS) {
+          message.success({
+            content: `操作成功`,
+            duration: 2,
+          });
+        } else {
+          message.error({
+            content: `操作失败`,
+            duration: 2,
+          });
+        }
+      });
+    },
+  });
+}
+
+/**
+ * 表单修改网元类型
+ */
+function fnNeTypeChange(v: any, data: any) {
+  const hostsLen = data.hosts.length;
+  // 网元默认只含22和4100
+  if (hostsLen === 3 && v !== 'UPF') {
+    data.hosts.pop();
+  }
+  // UPF标准版本可支持5002
+  if (hostsLen === 2 && v === 'UPF') {
+    data.hosts.push({
+      hostId: undefined,
+      hostType: 'telnet',
+      groupId: '1',
+      title: 'Telnet_NE_5002',
+      addr: '',
+      port: 5002,
+      user: 'user',
+      authMode: '0',
+      password: 'user',
+      remark: '',
+    });
+  }
+}
+
+/**
+ * 表单修改网元IP
+ */
+function fnNeIPChange(e: any, data: any) {
+  const v = e.target.value;
+  if (v.length < 7) return;
+  for (const host of data.hosts) {
+    host.addr = v;
+  }
+}
+
+/**保存信息 */
+function fnSaveFinish(pane: any) {
+  console.log('Success:', pane);
+  tabState.confirmLoading = true;
+  const from = toRaw(pane);
+  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;
+        }
+        tabState.panes.findIndex;
+
+        const tabItem = tabState.panes.find(
+          tab => tab.key === tabState.activeKey
+        );
+        if (tabItem) {
+          tabItem.status = true;
+        }
+        message.success({
+          content: '操作成功',
+          duration: 3,
+        });
+      } else {
+        const tabItem = tabState.panes.find(
+          tab => tab.key === tabState.activeKey
+        );
+        if (tabItem) {
+          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({
+    title: t('common.tipTitle'),
+    content: '确认要放弃当前变更返回上一步吗？',
+    onOk() {
+      fnToStepName('ConfigSystem');
+    },
+  });
+}
+
+/**下一步操作 */
+function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
+  if (stepName === 'ConfigNeInfoPara5G') {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: '确认要下一步进行各网元公共参数的设置？',
+      onOk() {
+        fnToStepName('ConfigNeInfoPara5G');
+      },
+    });
+  }
+}
+
+function fnInit() {
+  listAllNeInfo({
+    bandHost: true,
+  }).then(res => {
+    console.log(res);
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+      for (const item of res.data) {
+        tabState.panes.push({
+          key: `${item.neType}@${item.neId}`,
+          data: item,
+          status: false,
+        });
+      }
+      // 选择首个
+      if (tabState.panes.length > 0) {
+        tabState.activeKey = tabState.panes[0].key;
+      }
+    }
+  });
 }
 
 onMounted(() => {
-  // listAllNeInfo({
-  //   bandHost: true,
-  // }).then(res => {
-  //   console.log(res);
-  // });
+  // 初始字典数据
+  Promise.allSettled([
+    getDict('ne_host_type'),
+    getDict('ne_host_groupId'),
+    getDict('ne_host_authMode'),
+  ]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.neHostType = resArr[0].value;
+    }
+    if (resArr[1].status === 'fulfilled') {
+      dict.neHostGroupId = resArr[1].value;
+    }
+    if (resArr[2].status === 'fulfilled') {
+      dict.neHostAuthMode = resArr[2].value;
+    }
+  });
+  fnInit();
 });
 </script>
 
 <template>
   <div>
-    <div>配置网元信息</div>
-    <div :style="{ marginBottom: '16px' }">
-      <a-button @click="">ADD</a-button>
-    </div>
+    <h2>配置网元信息</h2>
+
     <a-tabs
       class="neinfo-tabs"
       hide-add
@@ -168,6 +344,17 @@ onMounted(() => {
       v-model:activeKey="tabState.activeKey"
       @edit="(key:any) => fnTabClose(key as string)"
     >
+      <template #rightExtra>
+        <a-space :size="8" align="center">
+          <a-tooltip placement="topRight">
+            <template #title> 新增网元 </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"
@@ -175,33 +362,452 @@ onMounted(() => {
       >
         <template #tab>
           <a-badge
-            :status="pane.status ? 'success' : 'error'"
+            :status="pane.status ? 'success' : 'default'"
             :text="`${pane.data.neType}@${pane.data.neId}`"
           />
         </template>
 
-        {{ pane.data }}
-      </a-tab-pane>
+        <!-- {{ 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.configManage.neManage.neType')"
+                name="neType"
+                :rules="{
+                  required: true,
+                  message: '请输入网元类型',
+                }"
+              >
+                <a-auto-complete
+                  v-model:value="pane.data.neType"
+                  :options="NE_TYPE_LIST.map(v => ({ value: v }))"
+                  @change="v => fnNeTypeChange(v, pane.data)"
+                >
+                  <a-input
+                    allow-clear
+                    :placeholder="t('common.inputPlease')"
+                    :maxlength="32"
+                  >
+                    <template #prefix>
+                      <a-tooltip placement="topLeft">
+                        <template #title>
+                          {{ t('views.configManage.neManage.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.configManage.neManage.pvflag')"
+                name="pvFlag"
+              >
+                <a-select v-model:value="pane.data.pvFlag" default-value="PNF">
+                  <a-select-opt-group
+                    :label="t('views.configManage.neManage.pnf')"
+                  >
+                    <a-select-option value="PNF">PNF</a-select-option>
+                  </a-select-opt-group>
+                  <a-select-opt-group
+                    :label="t('views.configManage.neManage.vnf')"
+                  >
+                    <a-select-option value="VNF">VNF</a-select-option>
+                  </a-select-opt-group>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
 
-      <template #rightExtra>
-        <a-space :size="8" align="center">
-          <a-tooltip placement="topRight">
-            <template #title> new Nf </template>
-            <a-button type="default" shape="circle" @click="fnCreateNe()">
-              <template #icon><PlusOutlined /></template>
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.neId')"
+                name="neId"
+                :rules="{
+                  required: true,
+                  message: '请输入网元标识',
+                }"
+              >
+                <a-input
+                  v-model:value="pane.data.neId"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="32"
+                ></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.neName')"
+                name="neName"
+                :rules="{
+                  required: true,
+                  message: '请输入网元名称',
+                }"
+              >
+                <a-input
+                  v-model:value="pane.data.neName"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="64"
+                >
+                </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.configManage.neManage.ip')"
+                name="ip"
+                :rules="{
+                  required: true,
+                  message: '请输入网元IP地址',
+                }"
+              >
+                <a-input
+                  v-model:value="pane.data.ip"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="128"
+                  @change="e => fnNeIPChange(e, pane.data)"
+                >
+                  <template #prefix>
+                    <a-tooltip placement="topLeft">
+                      <template #title>
+                        <div>
+                          {{ t('views.ne.neInfo.ipAddr') }}
+                        </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-form-item
+                :label="t('views.configManage.neManage.port')"
+                name="port"
+                :rules="{
+                  required: true,
+                  message: '请输入网元端口',
+                }"
+              >
+                <a-input-number
+                  v-model:value="pane.data.port"
+                  style="width: 100%"
+                  :min="1"
+                  :max="65535"
+                  placeholder="<=65535"
+                >
+                  <template #prefix>
+                    <a-tooltip placement="topLeft">
+                      <template #title>
+                        <div>
+                          {{ t('views.configManage.neManage.portTip') }}
+                        </div>
+                      </template>
+                      <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                    </a-tooltip>
+                  </template>
+                </a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-form-item
+            :label="t('views.configManage.neManage.uid')"
+            name="rmUid"
+            :rules="{
+              required: true,
+              message: '请输入资源唯一标识',
+            }"
+            :label-col="{ span: 3 }"
+            :labelWrap="true"
+          >
+            <a-input
+              v-model:value="pane.data.rmUid"
+              allow-clear
+              :placeholder="t('common.inputPlease')"
+              :maxlength="40"
+            >
+              <template #prefix>
+                <a-tooltip placement="topLeft">
+                  <template #title>
+                    <div>
+                      {{ t('views.ne.neInfo.rmUID') }}
+                    </div>
+                  </template>
+                  <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
+                </a-tooltip>
+              </template>
+            </a-input>
+          </a-form-item>
+
+          <a-row :gutter="16">
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.mac')"
+                name="neAddress"
+              >
+                <a-input
+                  v-model:value="pane.data.neAddress"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="64"
+                >
+                  <template #prefix>
+                    <a-tooltip placement="topLeft">
+                      <template #title>
+                        <div>
+                          {{ t('views.configManage.neManage.macTip') }}
+                        </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-form-item
+                :label="t('views.configManage.neManage.dn')"
+                name="dn"
+              >
+                <a-input
+                  v-model:value="pane.data.dn"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="255"
+                ></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.configManage.neManage.vendorName')"
+                name="vendorName"
+              >
+                <a-input
+                  v-model:value="pane.data.vendorName"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="64"
+                >
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="12" :md="12" :xs="24">
+              <a-form-item
+                :label="t('views.configManage.neManage.province')"
+                name="province"
+              >
+                <a-input
+                  v-model:value="pane.data.province"
+                  allow-clear
+                  :placeholder="t('common.inputPlease')"
+                  :maxlength="32"
+                ></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-divider orientation="left">
+            {{ t('views.ne.neInfo.hostConfig') }}
+          </a-divider>
+
+          <!-- 主机连接配置 -->
+          <a-collapse class="collapse" ghost>
+            <a-collapse-panel
+              v-for="host in pane.data.hosts"
+              :key="host.title"
+              :header="`${host.hostType.toUpperCase()} ${host.port}`"
+            >
+              <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="host.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="host.port"
+                      :min="10"
+                      :max="65535"
+                      :step="1"
+                      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="host.user"
+                      allow-clear
+                      :maxlength="50"
+                      :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="host.authMode"
+                      default-value="0"
+                      :options="dict.neHostAuthMode"
+                      :disabled="host.hostType === 'telnet'"
+                    >
+                    </a-select>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+
+              <a-form-item
+                v-if="host.authMode === '0'"
+                :label="t('views.ne.neHost.password')"
+                :label-col="{ span: 3 }"
+                :label-wrap="true"
+              >
+                <a-input-password
+                  v-model:value="host.password"
+                  :maxlength="128"
+                  :placeholder="t('common.inputPlease')"
+                >
+                </a-input-password>
+              </a-form-item>
+
+              <template v-if="host.authMode === '1'">
+                <a-form-item
+                  :label="t('views.ne.neHost.privateKey')"
+                  :label-col="{ span: 3 }"
+                  :label-wrap="true"
+                >
+                  <a-textarea
+                    v-model:value="host.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="host.passPhrase"
+                    :maxlength="128"
+                    :placeholder="t('common.inputPlease')"
+                  >
+                  </a-input-password>
+                </a-form-item>
+              </template>
+
+              <a-form-item
+                :label="t('views.ne.neHost.remark')"
+                :label-col="{ span: 3 }"
+                :label-wrap="true"
+              >
+                <a-textarea
+                  v-model:value="host.remark"
+                  :auto-size="{ minRows: 1, maxRows: 6 }"
+                  :maxlength="450"
+                  :show-count="true"
+                  :placeholder="t('common.inputPlease')"
+                />
+              </a-form-item>
+
+              <a-form-item
+                :label="t('views.ne.neHost.test')"
+                name="test"
+                :label-col="{ span: 3 }"
+                :label-wrap="true"
+              >
+                <a-button
+                  type="primary"
+                  shape="round"
+                  @click="fnModalTest(host)"
+                  :loading="tabState.confirmLoading"
+                >
+                  <template #icon><LinkOutlined /></template>
+                </a-button>
+
+                <a-button
+                  type="link"
+                  @click="fnSSHLink(host)"
+                  :loading="tabState.confirmLoading"
+                  v-if="host.hostType === 'ssh' && host.authMode !== '2'"
+                >
+                  <template #icon><LinkOutlined /></template>
+                  免密授权
+                </a-button>
+              </a-form-item>
+            </a-collapse-panel>
+          </a-collapse>
+
+          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
+            <a-button
+              type="primary"
+              html-type="submit"
+              :loading="tabState.confirmLoading"
+            >
+              保存信息
             </a-button>
-          </a-tooltip>
-        </a-space>
-      </template>
+          </a-form-item>
+        </a-form>
+      </a-tab-pane>
     </a-tabs>
 
-    <a-button style="margin-left: 8px" @click="fnToStepName('ConfigSystem')">
-      上一步
-    </a-button>
-    <a-button type="primary" @click="fnToStepName('ConfigNeInfoPara5G')">
-      下一步
-    </a-button>
+    <div>
+      <a-space direction="horizontal" :size="18">
+        <a-button @click="fnStepPrev()"> 上一步 </a-button>
+
+        <a-button type="dashed" @click="fnStepNext('ConfigNeInfoPara5G')">
+          下一步
+        </a-button>
+      </a-space>
+    </div>
   </div>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.neinfo-tabs :deep(.ant-tabs-tabpane) {
+  height: 72vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin-bottom: 24px;
+  margin-top: 24px;
+}
+</style>