From 857f8c431305a39b8f396778c8a66a01cdbf703e Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Fri, 19 Apr 2024 19:54:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=B3=BB=E7=BB=9F=E9=A6=96=E6=AC=A1?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E5=BC=95=E5=AF=BC=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../quick-build/components/ConfigNeInfo.vue   | 194 +++++++++++++++++-
 .../components/ConfigNeInfoPara5G.vue         |   3 +
 .../quick-build/components/ConfigSystem.vue   |   2 +-
 .../components/SoftwareInstall.vue            |   3 +-
 .../components/SoftwareLicense.vue            |   6 +-
 .../system/quick-build/components/Start.vue   |   9 +-
 src/views/system/quick-build/index.vue        |   1 +
 7 files changed, 205 insertions(+), 13 deletions(-)

diff --git a/src/views/system/quick-build/components/ConfigNeInfo.vue b/src/views/system/quick-build/components/ConfigNeInfo.vue
index cf3867d3..13f1d7c7 100644
--- a/src/views/system/quick-build/components/ConfigNeInfo.vue
+++ b/src/views/system/quick-build/components/ConfigNeInfo.vue
@@ -1,15 +1,201 @@
 <script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
 import { stepState, fnToStepName } from '../hooks/useStep';
+import { Modal } from 'ant-design-vue';
+import useI18n from '@/hooks/useI18n';
+import { listAllNeInfo } from '@/api/ne/neInfo';
+const { t } = useI18n();
+
+/**标签对象信息状态类型 */
+type TabStateType = {
+  /**激活选中 */
+  activeKey: string;
+  /**页签数据 */
+  panes: Record<string, any>[];
+};
+
+/**标签对象信息状态 */
+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,
+    },
+  ],
+});
+
+/**
+ * 导航标签关闭
+ * @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: t('views.tool.terminal.closeTip', {
+      num: `${item.data.neType}@${item.data.neId}`,
+    }),
+    onOk() {
+      tabState.panes.splice(tabIndex, 1);
+      // 激活前一项标签
+      tabState.activeKey = tabState.panes[tabIndex - 1].id;
+    },
+  });
+}
+
+/**新建网元信息 */
+function fnCreateNe() {
+  const neType = 'AMF';
+  const neId = '001' + new Date().getMilliseconds();
+  tabState.panes.push({
+    key: `${neType}@${neId}`,
+    data: {
+      id: undefined,
+      neId: neId,
+      neType: neType,
+      neName: '',
+      ip: '',
+      port: 33030,
+      pvFlag: 'PNF',
+      rmUid: `4400HX1${neType}001`,
+      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,
+  });
+}
+
+onMounted(() => {
+  // listAllNeInfo({
+  //   bandHost: true,
+  // }).then(res => {
+  //   console.log(res);
+  // });
+});
 </script>
 
 <template>
   <div>
     <div>配置网元信息</div>
-    <a-button
-      v-if="stepState.current > 0"
-      style="margin-left: 8px"
-      @click="fnToStepName('ConfigSystem')"
+    <div :style="{ marginBottom: '16px' }">
+      <a-button @click="">ADD</a-button>
+    </div>
+    <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-tab-pane
+        v-for="pane in tabState.panes"
+        :key="pane.key"
+        :closable="tabState.panes.length > 1"
+      >
+        <template #tab>
+          <a-badge
+            :status="pane.status ? 'success' : 'error'"
+            :text="`${pane.data.neType}@${pane.data.neId}`"
+          />
+        </template>
+
+        {{ pane.data }}
+      </a-tab-pane>
+
+      <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-button>
+          </a-tooltip>
+        </a-space>
+      </template>
+    </a-tabs>
+
+    <a-button style="margin-left: 8px" @click="fnToStepName('ConfigSystem')">
       上一步
     </a-button>
     <a-button type="primary" @click="fnToStepName('ConfigNeInfoPara5G')">
diff --git a/src/views/system/quick-build/components/ConfigNeInfoPara5G.vue b/src/views/system/quick-build/components/ConfigNeInfoPara5G.vue
index fa4fd8f6..1a07016c 100644
--- a/src/views/system/quick-build/components/ConfigNeInfoPara5G.vue
+++ b/src/views/system/quick-build/components/ConfigNeInfoPara5G.vue
@@ -6,6 +6,9 @@ import { fnToStepName } from '../hooks/useStep';
   <div>
     <div>网元公共参数设置</div>
 
+    <a-button style="margin-left: 8px" @click="fnToStepName('ConfigNeInfo')">
+      上一步
+    </a-button>
     <a-button type="primary" @click="fnToStepName('SoftwareInstall')">
       下一步
     </a-button>
diff --git a/src/views/system/quick-build/components/ConfigSystem.vue b/src/views/system/quick-build/components/ConfigSystem.vue
index 13ad10cc..2086a9dd 100644
--- a/src/views/system/quick-build/components/ConfigSystem.vue
+++ b/src/views/system/quick-build/components/ConfigSystem.vue
@@ -14,7 +14,7 @@ import { fnToStepName } from '../hooks/useStep';
     <a-button type="primary" @click="fnToStepName('ConfigNeInfo')">
       安装网元
     </a-button>
-    <a-button type="primary" @click="fnToStepName('End')"> 下一步 </a-button>
+    <a-button type="link" @click="fnToStepName('End')"> 跳过网元安装 </a-button>
   </div>
 </template>
 
diff --git a/src/views/system/quick-build/components/SoftwareInstall.vue b/src/views/system/quick-build/components/SoftwareInstall.vue
index 35f594df..cd573a2b 100644
--- a/src/views/system/quick-build/components/SoftwareInstall.vue
+++ b/src/views/system/quick-build/components/SoftwareInstall.vue
@@ -5,8 +5,7 @@ import { stepState, fnToStepName } from '../hooks/useStep';
 <template>
   <div>
     <div>软件安装</div>
-    <a-button
-      v-if="stepState.current > 0"
+    <a-button 
       style="margin-left: 8px"
       @click="fnToStepName('ConfigNeInfoPara5G')"
     >
diff --git a/src/views/system/quick-build/components/SoftwareLicense.vue b/src/views/system/quick-build/components/SoftwareLicense.vue
index 8b7cf8e0..c59d0783 100644
--- a/src/views/system/quick-build/components/SoftwareLicense.vue
+++ b/src/views/system/quick-build/components/SoftwareLicense.vue
@@ -5,11 +5,7 @@ import { stepState, fnToStepName, fnStepPrev } from '../hooks/useStep';
 <template>
   <div>
     <div>软件授权激活</div>
-    <a-button
-      v-if="stepState.current > 0"
-      style="margin-left: 8px"
-      @click="fnToStepName('SoftwareInstall')"
-    >
+    <a-button style="margin-left: 8px" @click="fnToStepName('SoftwareInstall')">
       上一步
     </a-button>
     <a-button type="primary" @click="fnToStepName('End')"> 跳过 </a-button>
diff --git a/src/views/system/quick-build/components/Start.vue b/src/views/system/quick-build/components/Start.vue
index e025196d..e44ef2a9 100644
--- a/src/views/system/quick-build/components/Start.vue
+++ b/src/views/system/quick-build/components/Start.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { reactive } from 'vue';
 import { fnToStepName } from '../hooks/useStep';
+
+const state = reactive({
+  copyright: ` `,
+});
 </script>
 
 <template>
   <div>
     <div>欢迎使用</div>
     <div>语言切换：中文</div>
-    <div>软件声明:无第三方信息采集</div>
+    ====
+    <div>软件声明: </div>
     <div>1. 网管配置，网元安装可选</div>
     <div>2. 可选项，网元安装</div>
+
     <a-button type="primary" @click="fnToStepName('ConfigSystem')">
       开始
     </a-button>
diff --git a/src/views/system/quick-build/index.vue b/src/views/system/quick-build/index.vue
index d7291034..621cec47 100644
--- a/src/views/system/quick-build/index.vue
+++ b/src/views/system/quick-build/index.vue
@@ -79,6 +79,7 @@ onMounted(() => {
 
 .build-card {
   width: 60%;
+  min-width: 360px;
   margin: 0 auto;
   border-radius: 6px;
 }