OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

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

Browse Source
This commit is contained in:
TsMask
2024-04-28 10:23:14 +08:00
parent efb98ac577
commit 957868cc27
10 changed files with 566 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/views/system/quick-start/components/Done.vue
View File

@@ -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>
<div>结束</div>
<p>安装网元会有：网元信息-授权有效期</p>
=======提示
<p>未配置相关网元，请进入系统后，根据情况单独安装网元</p>
<a-result
status="success"
title="完成配置"
sub-title="请进入系统后，根据情况进行更多相关配置"
>
<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>
<div class="result-content">
<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>

142
src/views/system/quick-start/components/ConfigNeInfo.vue → src/views/system/quick-start/components/NeInfoConfig.vue
View File

@@ -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') {
if (stepName === 'ConfigNeInfoPara5G') {
function fnStepNext(stepName: 'NeInfoConfigPara5G') {
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') {
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();
])
.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;
}
})
.finally(() => {
fnGetList();
});
});
</script>
<template>
<div>
<h2>配置网元信息</h2>
<div class="ne">
<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-top: 24px;
// margin-bottom: 24px;
// margin-top: 24px;
}
.ne {
padding-top: 12px;
height: 78vh;
overflow-x: hidden;
overflow-y: auto;
&-oper {
padding-top: 24px;
text-align: end;
}
}
</style>

33
src/views/system/quick-start/components/ConfigNeInfoPara5G.vue → src/views/system/quick-start/components/NeInfoConfigPara5G.vue
View File

@@ -84,19 +84,19 @@ function fnStepPrev() {
title: t('common.tipTitle'),
content: '确认要放弃当前变更返回上一步吗？',
onOk() {
fnToStepName('ConfigNeInfo');
fnToStepName('NeInfoConfig');
},
});
}
/**下一步操作 */
function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
if (stepName === 'ConfigNeInfoPara5G') {
function fnStepNext(stepName: 'NeInfoSoftwareInstall') {
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>
<h2>网元公共参数设置</h2>
<div class="ne">
<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>

76
src/views/system/quick-start/components/SoftwareInstall.vue → src/views/system/quick-start/components/NeInfoSoftwareInstall.vue
View File

@@ -195,19 +195,19 @@ function fnStepPrev() {
title: t('common.tipTitle'),
content: '确认要放弃当前变更返回上一步吗？',
onOk() {
fnToStepName('ConfigNeInfoPara5G');
fnToStepName('NeInfoConfigPara5G');
},
});
}
/**下一步操作 */
function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
if (stepName === 'ConfigNeInfoPara5G') {
function fnStepNext(stepName: 'NeInfoSoftwareLicense') {
if (stepName === 'NeInfoSoftwareLicense') {
Modal.confirm({
title: t('common.tipTitle'),
content: '确认要下一步进行各网元授权吗？',
onOk() {
fnToStepName('SoftwareLicense');
fnToStepName('NeInfoSoftwareLicense');
},
});
}
@@ -219,32 +219,7 @@ onMounted(() => {
</script>
<template>
<div>
<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>
<div class="ne">
<!-- 表格列表 -->
<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>

296
src/views/system/quick-start/components/NeInfoSoftwareLicense.vue Normal file
View File

@@ -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>

15
src/views/system/quick-start/components/SoftwareLicense.vue
View File

@@ -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>

2
src/views/system/quick-start/components/Start.vue
View File

@@ -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>

13
src/views/system/quick-start/components/ConfigSystem.vue → src/views/system/quick-start/components/SystemConfig.vue
View File

@@ -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') {
if (stepName === 'ConfigNeInfo') {
function fnStepNext(stepName: 'NeInfoConfig' | 'Done') {
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>

49
src/views/system/quick-start/hooks/useStep.ts
View File

@@ -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;
}

16
src/views/system/quick-start/index.vue
View File

@@ -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>