feat: 系统首次使用引导页面

2024-04-19 19:54:07 +08:00
parent c9c39d2d4a
commit 857f8c4313
7 changed files with 205 additions and 13 deletions
--- 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')">
--- 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>
--- 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>

--- 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')"
    >
--- 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>
--- 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>
--- 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;
 }