feat: 开站网元安装步骤进度的显示

src/views/system/quick-start/components/Done.vue

@@ -1,15 +1,71 @@
 <script setup lang="ts">
 import { guideDone } from '@/api';
-import { stepState, fnStepNext, fnStepPrev } from '../hooks/useStep';
+import { stepState, fnToStepName } from '../hooks/useStep';
 import { message, Form, Modal } from 'ant-design-vue/lib';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { removeToken } from '@/plugins/auth-token';
 import { useRouter } from 'vue-router';
 import useAppStore from '@/store/modules/app';
 import useI18n from '@/hooks/useI18n';
+import { onMounted, ref } from 'vue';
 const { t } = useI18n();
 const router = useRouter();
 
+// 信息列表
+const infoList = ref<Record<string, any>[]>([]);
+
+/**获取列表 */
+function fnGetList() {
+  if (!stepState.setupNE) {
+    infoList.value.push({
+      type: 'error',
+      title: '未进行安装配置网元',
+      description: '系统将会默认初始网元信息，可自行修改信息',
+    });
+    return;
+  }
+
+  infoList.value.push({
+    type: 'warning',
+    title: '已经进行网元安装配置',
+    description: '如有部分异常网元请进入系统后可自行配置',
+  });
+
+  // listAllNeInfo({
+  //   bandStatus: true,
+  // }).then(res => {
+  //   if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
+  //     for (const item of res.data) {
+  //       const online = item.serverState.online;
+  //       let description = 'Service Config Error';
+  //       if (online) {
+  //         description = `The License SN:${item.serverState.sn} and Expire:${item.serverState.expire}`;
+  //       }
+  //       infoList.value.push({
+  //         type: online ? 'success' : 'warning',
+  //         title: `${item.neType} ${item.neId}`,
+  //         description,
+  //       });
+  //     }
+  //   }
+  // });
+}
+
+/**返回上一步 */
+function fnStepPrev() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: '确认要返回上一步吗？',
+    onOk() {
+      let stepName = 'NeInfoSoftwareLicense';
+      if (!stepState.setupNE) {
+        stepName = 'SystemConfig';
+      }
+      fnToStepName(stepName);
+    },
+  });
+}
+
 /**引导完成 */
 function fnGuideDone() {
   guideDone()
@@ -23,17 +79,55 @@ function fnGuideDone() {
       router.push({ name: 'Login' });
     });
 }
+
+onMounted(() => {
+  fnGetList();
+});
 </script>
 
 <template>
-  <div>
+  <a-result
-    <div>结束</div>
+    status="success"
-    <p>安装网元会有：网元信息-授权有效期</p>
+    title="完成配置"
-    =======提示
+    sub-title="请进入系统后，根据情况进行更多相关配置"
-    <p>未配置相关网元，请进入系统后，根据情况单独安装网元</p>
+  >
+    <template #extra>
+      <a-space direction="vertical" style="width: 40%">
+        <a-button block type="primary" @click="fnGuideDone()">
+          开始使用
+        </a-button>
+        <a-button block type="default" @click="fnStepPrev()">
+          返回上一步
+        </a-button>
+      </a-space>
+    </template>
 
-    <a-button type="primary" @click="fnGuideDone()"> 开始使用 </a-button>
+    <div class="result-content">
-  </div>
+      <a-spin
+        tip="Loading..."
+        style="width: 100%"
+        :spinning="infoList.length == 0"
+      >
+        <a-alert
+          v-for="s in infoList"
+          :key="s.title"
+          :message="s.title"
+          :description="s.description"
+          :type="s.type"
+          show-icon
+        />
+      </a-spin>
+    </div>
+  </a-result>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.result-content {
+  max-height: 42vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.ant-alert {
+  margin-bottom: 16px;
+}
+</style>

src/views/system/quick-start/components/NeInfoConfig.vue

@@ -268,27 +268,28 @@ function fnSaveFinishFailed(e: any) {
 function fnStepPrev() {
   Modal.confirm({
     title: t('common.tipTitle'),
-    content: '确认要放弃当前变更返回上一步吗？',
+    content: '确认要退出网元安装吗？',
     onOk() {
-      fnToStepName('ConfigSystem');
+      fnToStepName('SystemConfig');
     },
   });
 }
 
 /**下一步操作 */
-function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
+function fnStepNext(stepName: 'NeInfoConfigPara5G') {
-  if (stepName === 'ConfigNeInfoPara5G') {
+  if (stepName === 'NeInfoConfigPara5G') {
     Modal.confirm({
       title: t('common.tipTitle'),
       content: '确认要下一步进行各网元公共参数的设置？',
       onOk() {
-        fnToStepName('ConfigNeInfoPara5G');
+        fnToStepName('NeInfoConfigPara5G');
       },
     });
   }
 }
 
-function fnInit() {
+/**获取列表 */
+function fnGetList() {
   listAllNeInfo({
     bandHost: true,
   }).then(res => {
@@ -315,25 +316,26 @@ onMounted(() => {
     getDict('ne_host_type'),
     getDict('ne_host_groupId'),
     getDict('ne_host_authMode'),
-  ]).then(resArr => {
+  ])
-    if (resArr[0].status === 'fulfilled') {
+    .then(resArr => {
-      dict.neHostType = resArr[0].value;
+      if (resArr[0].status === 'fulfilled') {
-    }
+        dict.neHostType = resArr[0].value;
-    if (resArr[1].status === 'fulfilled') {
+      }
-      dict.neHostGroupId = resArr[1].value;
+      if (resArr[1].status === 'fulfilled') {
-    }
+        dict.neHostGroupId = resArr[1].value;
-    if (resArr[2].status === 'fulfilled') {
+      }
-      dict.neHostAuthMode = resArr[2].value;
+      if (resArr[2].status === 'fulfilled') {
-    }
+        dict.neHostAuthMode = resArr[2].value;
-  });
+      }
-  fnInit();
+    })
+    .finally(() => {
+      fnGetList();
+    });
 });
 </script>
 
 <template>
-  <div>
+  <div class="ne">
-    <h2>配置网元信息</h2>
-
     <a-tabs
       class="neinfo-tabs"
       hide-add
@@ -561,76 +563,6 @@ onMounted(() => {
             </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>
@@ -770,14 +702,13 @@ onMounted(() => {
                   :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-form-item :wrapper-col="{ offset: 10, span: 4 }">
             <a-button
               type="primary"
               html-type="submit"
@@ -790,11 +721,11 @@ onMounted(() => {
       </a-tab-pane>
     </a-tabs>
 
-    <div>
+    <div class="ne-oper">
       <a-space direction="horizontal" :size="18">
-        <a-button @click="fnStepPrev()"> 上一步 </a-button>
+        <a-button @click="fnStepPrev()"> 退出 </a-button>
 
-        <a-button type="dashed" @click="fnStepNext('ConfigNeInfoPara5G')">
+        <a-button type="dashed" @click="fnStepNext('NeInfoConfigPara5G')">
           下一步
         </a-button>
       </a-space>
@@ -804,10 +735,23 @@ onMounted(() => {
 
 <style lang="less" scoped>
 .neinfo-tabs :deep(.ant-tabs-tabpane) {
-  height: 70vh;
+  padding: 24px;
+  height: 65vh;
   overflow-y: auto;
   overflow-x: hidden;
-  margin-bottom: 24px;
+  // margin-bottom: 24px;
-  margin-top: 24px;
+  // margin-top: 24px;
+}
+
+.ne {
+  padding-top: 12px;
+  height: 78vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &-oper {
+    padding-top: 24px;
+    text-align: end;
+  }
 }
 </style>

src/views/system/quick-start/components/NeInfoConfigPara5G.vue

@@ -84,19 +84,19 @@ function fnStepPrev() {
     title: t('common.tipTitle'),
     content: '确认要放弃当前变更返回上一步吗？',
     onOk() {
-      fnToStepName('ConfigNeInfo');
+      fnToStepName('NeInfoConfig');
     },
   });
 }
 
 /**下一步操作 */
-function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
+function fnStepNext(stepName: 'NeInfoSoftwareInstall') {
-  if (stepName === 'ConfigNeInfoPara5G') {
+  if (stepName === 'NeInfoSoftwareInstall') {
     Modal.confirm({
       title: t('common.tipTitle'),
       content: '确认要下一步进行各网元安装吗？',
       onOk() {
-        fnToStepName('SoftwareInstall');
+        fnToStepName('NeInfoSoftwareInstall');
       },
     });
   }
@@ -104,9 +104,7 @@ function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
 </script>
 
 <template>
-  <div>
+  <div class="ne">
-    <h2>网元公共参数设置</h2>
-
     <a-form
       name="para5GFileeFrom"
       layout="horizontal"
@@ -300,7 +298,7 @@ function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
       </a-row>
     </a-form>
 
-    <div>
+    <div class="ne-oper">
       <a-space direction="horizontal" :size="18">
         <a-button @click="fnStepPrev()"> 上一步 </a-button>
         <a-button
@@ -310,7 +308,7 @@ function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
         >
           保存信息
         </a-button>
-        <a-button type="dashed" @click="fnStepNext('ConfigNeInfoPara5G')">
+        <a-button type="dashed" @click="fnStepNext('NeInfoSoftwareInstall')">
           下一步
         </a-button>
       </a-space>
@@ -318,4 +316,19 @@ function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
   </div>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.ne {
+  padding-top: 12px;
+  height: 78vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  & > form {
+    height: 90%;
+  }
+  &-oper {
+    padding-top: 24px;
+    text-align: end;
+  }
+}
+</style>

src/views/system/quick-start/components/NeInfoSoftwareInstall.vue

@@ -195,19 +195,19 @@ function fnStepPrev() {
     title: t('common.tipTitle'),
     content: '确认要放弃当前变更返回上一步吗？',
     onOk() {
-      fnToStepName('ConfigNeInfoPara5G');
+      fnToStepName('NeInfoConfigPara5G');
     },
   });
 }
 
 /**下一步操作 */
-function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
+function fnStepNext(stepName: 'NeInfoSoftwareLicense') {
-  if (stepName === 'ConfigNeInfoPara5G') {
+  if (stepName === 'NeInfoSoftwareLicense') {
     Modal.confirm({
       title: t('common.tipTitle'),
       content: '确认要下一步进行各网元授权吗？',
       onOk() {
-        fnToStepName('SoftwareLicense');
+        fnToStepName('NeInfoSoftwareLicense');
       },
     });
   }
@@ -219,32 +219,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
+  <div class="ne">
-    <h2>网元软件安装</h2>
-
-    <a-space direction="horizontal" :size="18">
-      <a-button
-        type="primary"
-        @click.prevent="
-          () => (state.visibleByMoreFile = !state.visibleByMoreFile)
-        "
-      >
-        <template #icon><PlusOutlined /></template>
-        Upload More Software
-      </a-button>
-
-      <a-button
-        type="default"
-        danger
-        :disabled="state.selectedRowKeys.length <= 0"
-        :loading="state.confirmLoading"
-        @click.prevent="fnRecordInstall()"
-      >
-        <template #icon><ThunderboltOutlined /></template>
-        Check Install
-      </a-button>
-    </a-space>
-
     <!-- 表格列表 -->
     <a-table
       class="table"
@@ -255,7 +230,7 @@ onMounted(() => {
       size="middle"
       :pagination="false"
       @resizeColumn="(w:number, col:any) => (col.width = w)"
-      :scroll="{ y: '60vh' }"
+      :scroll="{ y: '65vh' }"
       :row-selection="{
         type: 'checkbox',
         columnWidth: '48px',
@@ -289,11 +264,32 @@ onMounted(() => {
       </p>
     </a-modal>
 
-    <div>
+    <div class="ne-oper">
       <a-space direction="horizontal" :size="18">
         <a-button @click="fnStepPrev()"> 上一步 </a-button>
 
-        <a-button type="dashed" @click="fnStepNext('ConfigNeInfoPara5G')">
+        <a-button
+          type="primary"
+          @click.prevent="
+            () => (state.visibleByMoreFile = !state.visibleByMoreFile)
+          "
+        >
+          <template #icon><PlusOutlined /></template>
+          Upload More Software
+        </a-button>
+
+        <a-button
+          type="default"
+          danger
+          :disabled="state.selectedRowKeys.length <= 0"
+          :loading="state.confirmLoading"
+          @click.prevent="fnRecordInstall()"
+        >
+          <template #icon><ThunderboltOutlined /></template>
+          Check Install
+        </a-button>
+
+        <a-button type="dashed" @click="fnStepNext('NeInfoSoftwareLicense')">
           下一步
         </a-button>
       </a-space>
@@ -301,4 +297,16 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.ne {
+  padding-top: 12px;
+  height: 78vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &-oper {
+    padding-top: 24px;
+    text-align: end;
+  }
+}
+</style>

src/views/system/quick-start/components/NeInfoSoftwareLicense.vue

@@ -0,0 +1,296 @@
+<script setup lang="ts">
+import { Modal, TableColumnsType, message } from 'ant-design-vue/lib';
+import { defineAsyncComponent, onMounted, reactive, ref, toRaw } from 'vue';
+import { fnToStepName, stepState } from '../hooks/useStep';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import {
+  codeNeLicense,
+  listNeLicense,
+  stateNeLicense,
+} from '@/api/ne/neLicense';
+import saveAs from 'file-saver';
+const { t } = useI18n();
+const UploadLicenseFile = defineAsyncComponent(
+  () => import('../../../ne/neLicense/components/UploadLicenseFile.vue')
+);
+
+/**表格字段列 */
+let tableColumns = ref<TableColumnsType>([
+  {
+    title: 'neType',
+    dataIndex: 'neType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'neId',
+    dataIndex: 'neId',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'status',
+    dataIndex: 'status',
+    key: 'status',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'serialNum',
+    dataIndex: 'serialNum',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: 'expiryDate',
+    dataIndex: 'expiryDate',
+    align: 'left',
+    width: 100,
+  },
+]);
+
+/**对象信息信息状态类型 */
+type StateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**记录数据 */
+  data: any[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+  /**授权文件上传 */
+  visibleByLicenseFile: boolean;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+};
+
+/**对象信息状态 */
+let state: StateType = reactive({
+  loading: false,
+  data: [],
+  selectedRowKeys: [],
+  visibleByLicenseFile: false,
+  confirmLoading: false,
+});
+
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  state.selectedRowKeys = keys;
+}
+
+/**对话框弹出确认执行函数*/
+function fnModalOk() {
+  fnGetList();
+}
+
+/**对话框弹出关闭执行函数*/
+function fnModalCancel() {
+  state.visibleByLicenseFile = false;
+}
+
+/**勾选刷新网元状态 */
+function fnRecordState() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: `check refresh license state?`,
+    onOk: async () => {
+      if (state.confirmLoading) return;
+      state.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      // 勾选的网元数据
+      const selectRows = state.data.filter(item =>
+        state.selectedRowKeys.includes(item.id)
+      );
+
+      for (const row of selectRows) {
+        if (row.neType.toUpperCase() === 'OMC') {
+          continue;
+        }
+        const res = await stateNeLicense(row.neType, row.neId);
+        if (res.code === RESULT_CODE_SUCCESS && res.data) {
+          row.status = '1';
+          row.serialNum = res.data.sn;
+          row.expiryDate = res.data.expire;
+        }
+      }
+      message.success(t('common.operateOk'), 3);
+      hide();
+      state.confirmLoading = false;
+    },
+  });
+}
+
+/**勾选下载网元授权code */
+function fnRecordCode() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: `check download license activation code file?`,
+    onOk: async () => {
+      if (state.confirmLoading) return;
+      state.confirmLoading = true;
+      const hide = message.loading(t('common.loading'), 0);
+      // 勾选的网元数据
+      const selectRows = state.data.filter(item =>
+        state.selectedRowKeys.includes(item.id)
+      );
+
+      const codeArr: string[] = [];
+      for (const row of selectRows) {
+        if (row.neType.toUpperCase() === 'OMC') {
+          continue;
+        }
+        const res = await codeNeLicense(row.neType, row.neId);
+        if (res.code === RESULT_CODE_SUCCESS) {
+          const activationRequestCode = res.data;
+          row.activationRequestCode = activationRequestCode;
+          codeArr.push(`[${row.neType} ${row.neId}]:${activationRequestCode}`);
+        }
+      }
+
+      if (codeArr.length > 0) {
+        const blob = new Blob([codeArr.join('\r\n')], {
+          type: 'text/plain',
+        });
+        saveAs(blob, `CheckRecordActivationCode_${new Date().getTime()}.txt`);
+      }
+
+      hide();
+      state.confirmLoading = false;
+    },
+  });
+}
+
+/**获取列表 */
+function fnGetList() {
+  state.loading = true;
+  listNeLicense({
+    neType: undefined,
+    neId: '',
+    version: '',
+    pageNum: 1,
+    pageSize: 20,
+  }).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
+      // 取消勾选
+      if (state.selectedRowKeys.length > 0) {
+        state.selectedRowKeys = [];
+      }
+      state.data = res.rows;
+    }
+    state.loading = false;
+  });
+}
+
+/**返回上一步 */
+function fnStepPrev() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: '确认要放弃当前变更返回上一步吗？',
+    onOk() {
+      fnToStepName('NeInfoSoftwareInstall');
+    },
+  });
+}
+
+/**下一步操作 */
+function fnStepNext(stepName: 'Done') {
+  if (stepName === 'Done') {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: '确认要结束网元安装吗？',
+      onOk() {
+        stepState.setupNE = true;
+        fnToStepName('Done');
+      },
+    });
+  }
+}
+
+onMounted(() => {
+  fnGetList();
+});
+</script>
+
+<template>
+  <div class="ne">
+    <!-- 表格列表 -->
+    <a-table
+      class="table"
+      row-key="id"
+      :columns="tableColumns"
+      :loading="state.loading"
+      :data-source="state.data"
+      size="middle"
+      :pagination="false"
+      @resizeColumn="(w:number, col:any) => (col.width = w)"
+      :scroll="{ y: '65vh' }"
+      :row-selection="{
+        type: 'checkbox',
+        columnWidth: '48px',
+        selectedRowKeys: state.selectedRowKeys,
+        onChange: fnTableSelectedRowKeys,
+      }"
+    >
+    </a-table>
+
+    <!-- 授权文件上传框 -->
+    <UploadLicenseFile
+      v-model:visible="state.visibleByLicenseFile"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    ></UploadLicenseFile>
+
+    <div class="ne-oper">
+      <a-space direction="horizontal" :size="18">
+        <a-button @click="fnStepPrev()"> 上一步 </a-button>
+
+        <a-button
+          type="primary"
+          @click.prevent="
+            () => (state.visibleByLicenseFile = !state.visibleByLicenseFile)
+          "
+        >
+          <template #icon><UploadOutlined /></template>
+          Upload License
+        </a-button>
+
+        <a-button
+          type="default"
+          danger
+          :disabled="state.selectedRowKeys.length <= 0"
+          :loading="state.confirmLoading"
+          @click.prevent="fnRecordState()"
+        >
+          <template #icon><ReloadOutlined /></template>
+          Refresh State
+        </a-button>
+
+        <a-button
+          type="ghost"
+          :disabled="state.selectedRowKeys.length <= 0"
+          :loading="state.confirmLoading"
+          @click.prevent="fnRecordCode()"
+        >
+          <template #icon><DownloadOutlined /></template>
+          Download Activation Code
+        </a-button>
+
+        <a-button type="dashed" @click="fnStepNext('Done')"> 结束 </a-button>
+      </a-space>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.ne {
+  padding-top: 12px;
+  height: 78vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &-oper {
+    padding-top: 24px;
+    text-align: end;
+  }
+}
+</style>

src/views/system/quick-start/components/SoftwareLicense.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { stepState, fnToStepName, fnStepPrev } from '../hooks/useStep';
-</script>
-
-<template>
-  <div>
-    <div>软件授权激活</div>
-    <a-button style="margin-left: 8px" @click="fnToStepName('SoftwareInstall')">
-      上一步
-    </a-button>
-    <a-button type="primary" @click="fnToStepName('Done')"> 结束 </a-button>
-  </div>
-</template>
-
-<style lang="less" scoped></style>

src/views/system/quick-start/components/Start.vue

@@ -58,7 +58,7 @@ onMounted(() => {
     <div>1. 网管配置，网元安装可选</div>
     <div>2. 可选项，网元安装</div>
 
-    <a-button type="primary" @click="fnToStepName('ConfigSystem')">
+    <a-button type="primary" @click="fnToStepName('SystemConfig')">
       开始
     </a-button>
   </div>

src/views/system/quick-start/components/SystemConfig.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { fnToStepName } from '../hooks/useStep';
+import { fnToStepName, stepState } from '../hooks/useStep';
 import { useRouter } from 'vue-router';
 import useI18n from '@/hooks/useI18n';
 import { reactive } from 'vue';
@@ -160,13 +160,13 @@ function fnStepPrev() {
 }
 
 /**下一步操作 */
-function fnStepNext(stepName: 'ConfigNeInfo' | 'Done') {
+function fnStepNext(stepName: 'NeInfoConfig' | 'Done') {
-  if (stepName === 'ConfigNeInfo') {
+  if (stepName === 'NeInfoConfig') {
     Modal.confirm({
       title: t('common.tipTitle'),
       content: '确认要进行网元快速安装吗？',
       onOk() {
-        fnToStepName('ConfigNeInfo');
+        fnToStepName('NeInfoConfig');
       },
     });
   }
@@ -175,6 +175,7 @@ function fnStepNext(stepName: 'ConfigNeInfo' | 'Done') {
       title: t('common.tipTitle'),
       content: '确认要直接使用核心网管理平台吗？',
       onOk() {
+        stepState.setupNE = false;
         fnToStepName('Done');
       },
     });
@@ -262,10 +263,10 @@ function fnStepNext(stepName: 'ConfigNeInfo' | 'Done') {
         <a-button type="primary" :loading="state.confirmLoading" @click="fnSave()">
           保存信息
         </a-button>
-        <a-button type="dashed" @click="fnStepNext('ConfigNeInfo')">
+        <a-button type="dashed" @click="fnStepNext('NeInfoConfig')">
           安装网元
         </a-button>
-        <a-button type="ghost" @click="fnStepNext('Done')"> 直接使用 </a-button>
+        <a-button type="ghost" @click="fnStepNext('Done')"> 跳过 </a-button>
       </a-space>
     </div>
   </div>

src/views/system/quick-start/hooks/useStep.ts

@@ -4,9 +4,13 @@ import { reactive } from 'vue';
 type StepStateType = {
   /**步骤名称 */
   stepName: string;
+  /**是否安装网元 */
+  setupNE: boolean;
+  /**安装网元步骤信息 */
+  neSteps: any[];
+  /**安装网元步骤当前选中 */
+  neStepsCurrent: number;
 
-  /**当前选中 */
-  current: number;
   /**步骤项 */
   steps: {
     title: string;
@@ -21,8 +25,27 @@ type StepStateType = {
 /**步骤信息状态 */
 export const stepState: StepStateType = reactive({
   stepName: 'Start',
+  setupNE: false,
+  neSteps: [
+    {
+      title: '配置网元信息',
+      description: '服务端与网元服务',
+    },
+    {
+      title: '网元公共参数',
+      description: '全局公共参数配置',
+    },
+    {
+      title: '网元软件安装',
+      description: '软件安装到服务端',
+    },
+    {
+      title: '网元授权激活',
+      description: '网元服务授权激活',
+    },
+  ],
+  neStepsCurrent: -1,
 
-  current: 0,
   steps: [
     {
       title: '版权声明',
@@ -56,23 +79,21 @@ export const stepState: StepStateType = reactive({
 /**步骤信息状态复位 */
 export function fnRestStepState() {
   stepState.stepName = 'Start';
+  stepState.setupNE = false;
+  stepState.neStepsCurrent = -1;
 
-  stepState.current = 0;
   stepState.stepNext = false;
   stepState.states = [];
 }
 
 /**跳转步骤组件 */
 export function fnToStepName(stepName: string) {
+  stepState.neStepsCurrent = [
+    'NeInfoConfig',
+    'NeInfoConfigPara5G',
+    'NeInfoSoftwareInstall',
+    'NeInfoSoftwareLicense',
+  ].indexOf(stepName);
+
   stepState.stepName = stepName;
 }
-
-export function fnStepNext() {
-  stepState.current++;
-  stepState.stepNext = false;
-}
-
-export function fnStepPrev() {
-  stepState.current--;
-  stepState.stepNext = true;
-}

src/views/system/quick-start/index.vue

@@ -56,6 +56,22 @@ onMounted(() => {
 <template>
   <div class="container" :style="calcBG">
     <a-card :bordered="false" class="build-card">
+      <!-- 网元安装步骤进度 -->
+      <a-steps
+        v-if="stepState.neStepsCurrent != -1"
+        :current="stepState.neStepsCurrent"
+        direction="horizontal"
+        type="navigation"
+      >
+        <a-step
+          v-for="s in stepState.neSteps"
+          :key="s.title"
+          :title="s.title"
+          :description="s.description"
+          :disabled="true"
+        />
+      </a-steps>
+
       <!-- 步骤页面 -->
       <component :is="currentComponent" />
     </a-card>