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

feat: 快速安装页面

Browse Source
This commit is contained in:
TsMask
2024-04-11 17:35:19 +08:00
parent 3970797d5b
commit dc6f4560d5
9 changed files with 1126 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/tool/neQuickSetup/components/StepActivate.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, ref, onUnmounted } from 'vue';
import { reactive, onMounted, toRaw, onUnmounted } from 'vue';
import { message, Modal, Upload } from 'ant-design-vue/lib';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { useClipboard } from '@vueuse/core';
@@ -21,8 +21,6 @@ const { t } = useI18n();
type LicenseStateType = {
/**步骤 */
setp: 'license' | 'verify';
/**主机ID */
hostId: string;
/**表单数据 */
from: {
neType: string;
@@ -40,7 +38,6 @@ type LicenseStateType = {
/**授权激活对象信息状态 */
const licenseState: LicenseStateType = reactive({
setp: 'license',
hostId: '',
from: {
neType: '',
neId: '',
@@ -139,11 +136,10 @@ function fnGetCode() {
function fnRunCheck() {
if (licenseState.confirmLoading) return;
const form = toRaw(licenseState.from);
if (form.activationRequestCode === '' || form.licensePath === '') {
if (form.licensePath === '') {
message.error(t('common.errorFields', { num: 1 }), 3);
return;
}
Object.assign(form, { hostId: licenseState.hostId });
licenseState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
changeNeLicense(form)
@@ -214,7 +210,6 @@ onMounted(() => {
const { neType, neId } = stepPrevFrom;
licenseState.from.neType = neType;
licenseState.from.neId = neId;
licenseState.hostId = stepPrevFrom.hostIds.split(',')[0];
// 获取code
fnGetCode();
});
@@ -243,7 +238,7 @@ onUnmounted(() => {
<a-input
v-model:value="licenseState.from.activationRequestCode"
:disabled="true"
style="width: calc(100% - 200px)"
style="width: calc(100% - 64px)"
/>
<a-tooltip title="复制">
<a-button type="default" @click="fnCopyCode()">

16
src/views/tool/neQuickSetup/components/StepCheck.vue
View File

@@ -211,15 +211,15 @@ onMounted(() => {
dict.neHostAuthMode = resArr[0].value;
}
});
// 状态还原
const state = stepState.states[stepState.current];
if (state) {
if (state.info) {
const info = toRaw(state.info);
// 读取步骤：环境检查
const stepPrevFrom = stepState.states[0];
if (stepPrevFrom) {
if (stepPrevFrom.info) {
const info = toRaw(stepPrevFrom.info);
Object.assign(checkState.info, info);
}
if (state.from) {
const from = toRaw(state.from);
if (stepPrevFrom.from) {
const from = toRaw(stepPrevFrom.from);
Object.assign(checkState.from, from);
}
}
@@ -244,7 +244,7 @@ onMounted(() => {
<template #label>
平台
<a-tooltip placement="topLeft">
<template #title> 支持 Ubuntu、Ubuntu </template>
<template #title> 支持 Ubuntu </template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>

334
src/views/tool/neQuickSetup/components/StepConfig.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, onMounted, onBeforeMount } from 'vue';
import { reactive, onMounted, onBeforeMount, toRaw } from 'vue';
import { message } from 'ant-design-vue/lib';
import {
RESULT_CODE_ERROR,
@@ -7,97 +7,97 @@ import {
} from '@/constants/result-constants';
import { stepState } from '../hooks/useStep';
import { getConfigFile, saveConfigFile } from '@/api/ne/neInfo';
import { parseDateToStr } from '@/utils/date-utils';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
/**配置对象信息状态类型 */
type ConfigState = {
/**展开指定的树节点 */
expandedKeys: string[];
/**设置选中的树节点 */
selectedKeys: string[];
/**表单数据 */
treeData: any[];
/**等待 loading */
treeLoading: boolean;
/**选中的树节点 */
selected: { title: string; key: string };
/**设置选中的数据内容 */
keyTextData: string;
/**设置选中等待 loading */
keyTextLoading: boolean;
neType: string;
neId: string;
/**文件列表 */
fileList: string[];
/**OAM网管端配置 */
oam: Record<string, any>;
oamFilePath: string;
/**确定按钮 loading */
confirmLoading: boolean;
};
/**配置对象信息状态 */
let configState: ConfigState = reactive({
expandedKeys: ['000'],
selectedKeys: ['oam_manager.yaml'],
treeData: [
{
title: 'NE',
key: '000',
children: [
{
title: 'oam_manager',
key: 'oam_manager.yaml',
},
],
neType: '',
neId: '',
fileList: [],
oam: {
httpManageCfg: {
ipv4: '172.16.5.100',
port: 33030,
},
],
treeLoading: false,
selected: { title: 'oam_manager', key: 'oam_manager.yaml' },
keyTextData: '...',
keyTextLoading: false,
oamConfig: {
enable: true,
neConfig: {
dn: '-',
neId: '001',
neName: 'xxx_001',
pvFlag: 'PNF',
province: '-',
rmUid: '4400HX1xxx001',
vendorName: '',
},
ipv4: '172.16.5.100',
port: 33030,
},
snmpConfig: {
enable: false,
},
},
oamFilePath: '',
confirmLoading: false,
});
/**查询可选命令列表 */
function fnSelectConfigNode(_: any, info: any) {
const { title, key } = info.node;
configState.selectedKeys = [key];
configState.selected = { title, key };
fnGetConfigFile(key);
}
/**查询配置列表 */
/**查询配置文件或内容 */
function fnGetConfigFile(filePath: string = '') {
if (filePath) {
if (configState.keyTextLoading) return;
configState.keyTextLoading = true;
} else {
if (configState.treeLoading) return;
configState.treeLoading = true;
}
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
getConfigFile(stepNeInfo.neType, stepNeInfo.neId, filePath)
if (filePath === '' && configState.confirmLoading) return;
configState.confirmLoading = true;
getConfigFile({
neType: configState.neType,
neId: configState.neId,
filePath: filePath,
fileType: 'yaml',
})
.then(res => {
// 目录列表
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
const treeItem = {
title: stepNeInfo.neType,
key: stepNeInfo.neId,
children: [] as any,
};
treeItem.children = res.data.map((fileName: string) => {
return {
title: fileName.replace(/\.[^.]+$/, ''),
key: fileName,
};
});
configState.treeData = [treeItem];
configState.expandedKeys = [stepNeInfo.neId];
// 选中加载显示内容
if (treeItem.children.length > 0) {
const fileItem = treeItem.children[0];
configState.selectedKeys = [fileItem.key];
configState.selected = fileItem;
fnGetConfigFile(fileItem.key);
configState.fileList = res.data;
// 网管配置
if (res.data.includes('oam_manager.yaml')) {
configState.oamFilePath = 'oam_manager.yaml';
fnGetConfigFile(configState.oamFilePath);
}
return;
}
// 单文件内容
if (res.code === RESULT_CODE_SUCCESS && typeof res.data === 'string') {
configState.keyTextData = res.data;
// 单文件内容 yaml
if (res.code === RESULT_CODE_SUCCESS && typeof res.data === 'object') {
if (filePath.startsWith('oam_manager')) {
configState.oam = res.data;
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
configState.oam.snmpConfig.enable = false;
configState.oam.oamConfig.enable = true;
configState.oam.oamConfig.neConfig = {
dn: stepNeInfo.db,
neId: stepNeInfo.neId,
neName: stepNeInfo.neName,
pvFlag: stepNeInfo.pvFlag,
province: stepNeInfo.province,
rmUid: stepNeInfo.rmUid,
vendorName: stepNeInfo.vendorName,
};
}
return;
}
// 出错
@@ -109,119 +109,133 @@ function fnGetConfigFile(filePath: string = '') {
}
})
.finally(() => {
if (filePath) {
configState.keyTextLoading = false;
} else {
configState.treeLoading = false;
}
configState.confirmLoading = false;
});
}
/**保存配置文件 */
function fnSaveConfigFile() {
if (configState.keyTextLoading) return;
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
saveConfigFile({
neType: stepNeInfo.neType,
neId: stepNeInfo.neId,
filePath: configState.selected.key,
content: configState.keyTextData,
if (configState.confirmLoading) return;
configState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
const data = {
neType: configState.neType,
neId: configState.neId,
fileType: 'yaml',
filePath: '',
content: '',
sync: true, // 同步到网元
})
};
// 配置信息
const oamData = toRaw(configState.oam);
saveConfigFile(
Object.assign(data, {
filePath: configState.oamFilePath,
content: oamData,
})
)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
saveState.saveTime = parseDateToStr(new Date(), 'HH:mm:ss');
message.success({
content: '保存成功',
duration: 3,
});
// 记录当前步骤状态信息
stepState.states[stepState.current] = {
treeData: configState.treeData,
oam: oamData,
};
stepState.stepNext = true;
} else {
message.error({
content: res.msg,
content: '保存失败',
duration: 3,
});
}
})
.finally(() => {
saveState.timer = null;
hide();
configState.confirmLoading = false;
});
}
/**保存文件数据状态 */
const saveState = reactive({
timer: null as any,
saveTime: '',
});
/**文件数据变更 */
function fnChangekeyTextData(val: string) {
console.log(val);
// 在用户停止输入3秒后，执行保存请求的操作
if (saveState.timer) {
clearTimeout(saveState.timer);
}
stepState.stepNext = false;
saveState.timer = setTimeout(fnSaveConfigFile, 3_000);
}
onMounted(() => {
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
configState.neType = stepNeInfo.neType;
configState.neId = stepNeInfo.neId;
// 读取文件列表
fnGetConfigFile();
});
onBeforeMount(() => {
clearTimeout(saveState.timer);
});
onBeforeMount(() => {});
</script>
<template>
<a-row :gutter="8">
<a-col :lg="6" :md="6" :xs="24">
<a-spin :spinning="configState.treeLoading">
<a-directory-tree
v-model:expandedKeys="configState.expandedKeys"
v-model:selectedKeys="configState.selectedKeys"
@select="fnSelectConfigNode"
:tree-data="configState.treeData"
></a-directory-tree>
</a-spin>
</a-col>
<a-col :lg="18" :md="18" :xs="24">
<a-spin :spinning="configState.treeLoading || configState.keyTextLoading">
<CodemirrorEdite
v-model:value="configState.keyTextData"
:disabled="configState.keyTextLoading"
lang="yaml"
height="500px"
@change="fnChangekeyTextData"
></CodemirrorEdite>
<div
class="edite-tip"
:class="{ 'edite-tip__ing': saveState.timer > 0 }"
>
{{ configState.selected.title }}
<template v-if="saveState.saveTime.length > 1">
| 最近保存: {{ saveState.saveTime }}
</template>
</div>
</a-spin>
</a-col>
</a-row>
<a-form
name="modalStateFrom"
layout="horizontal"
:label-col="{ span: 6 }"
:labelWrap="true"
>
<div>网管端配置</div>
{{ configState.oam }}
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="httpManageCfg.ipv4" name="ipv4">
<a-input
v-model:value="configState.oam.httpManageCfg.ipv4"
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="httpManageCfg.port" name="port">
<a-input
v-model:value="configState.oam.httpManageCfg.port"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="32"
></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="oamconfig.ipv4" name="ipv4">
<a-input
v-model:value="configState.oam.oamConfig.ipv4"
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="oamconfig.port" name="port">
<a-input
v-model:value="configState.oam.oamConfig.port"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="32"
></a-input>
</a-form-item>
</a-col>
</a-row>
<a-form-item :wrapper-col="{ span: 14, offset: 3 }">
<a-button
type="primary"
html-type="submit"
@click="fnSaveConfigFile()"
:loading="configState.confirmLoading"
>
保存配置
</a-button>
</a-form-item>
</a-form>
</template>
<style lang="less" scoped>
.edite-tip {
min-height: 24px;
padding: 0 4px;
color: #fff;
line-height: 24px;
background: var(--ant-primary-color);
border-radius: 2px;
cursor: pointer;
transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;
&__ing {
background: var(--ant-primary-color-disabled);
}
}
</style>
<style lang="less" scoped></style>

242
src/views/tool/neQuickSetup/components/StepConfigIMS.vue Normal file
View File

@@ -0,0 +1,242 @@
<script setup lang="ts">
import { reactive, onMounted, onBeforeMount, toRaw } from 'vue';
import { message } from 'ant-design-vue/lib';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import { stepState } from '../hooks/useStep';
import { getConfigFile, saveConfigFile } from '@/api/ne/neInfo';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
/**配置对象信息状态类型 */
type ConfigState = {
neType: string;
neId: string;
/**文件列表 */
fileList: string[];
/**OAM网管端配置 */
oam: Record<string, any>;
oamFilePath: string;
/**确定按钮 loading */
confirmLoading: boolean;
};
/**配置对象信息状态 */
let configState: ConfigState = reactive({
neType: '',
neId: '',
fileList: [],
oam: {
httpmanagecfg: {
ipv4: '172.16.5.110',
port: 33030,
},
oamconfig: {
enable: true,
neconfig: {
dn: '-',
neId: '001',
neName: 'IMS_001',
pVFlag: 'PNF',
province: '-',
rmUID: '4400HX1IMS001',
vendorName: '',
},
ipv4: '172.16.5.100',
port: 33030,
},
snmpconfig: {
enable: false,
},
},
oamFilePath: '',
cfg: {},
cfgFilePath: '',
confirmLoading: false,
});
/**查询配置文件或内容 */
function fnGetConfigFile(filePath: string = '') {
if (filePath === '' && configState.confirmLoading) return;
configState.confirmLoading = true;
getConfigFile({
neType: configState.neType,
neId: configState.neId,
filePath: filePath,
fileType: 'yaml',
})
.then(res => {
// 目录列表
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
configState.fileList = res.data;
// 网管配置
if (res.data.includes('oam_manager.yaml')) {
configState.oamFilePath = 'oam_manager.yaml';
fnGetConfigFile(configState.oamFilePath);
}
return;
}
// 单文件内容 yaml
if (res.code === RESULT_CODE_SUCCESS && typeof res.data === 'object') {
if (filePath.startsWith('oam_manager')) {
configState.oam = res.data;
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
configState.oam.snmpconfig.enable = false;
configState.oam.oamconfig.enable = true;
configState.oam.oamconfig.neconfig = {
dn: stepNeInfo.db,
neId: stepNeInfo.neId,
neName: stepNeInfo.neName,
pVFlag: stepNeInfo.pvFlag,
province: stepNeInfo.province,
rmUID: stepNeInfo.rmUid,
vendorName: stepNeInfo.vendorName,
};
}
return;
}
// 出错
if (res.code === RESULT_CODE_ERROR) {
message.error({
content: res.msg,
duration: 3,
});
}
})
.finally(() => {
configState.confirmLoading = false;
});
}
/**保存配置文件 */
function fnSaveConfigFile() {
if (configState.confirmLoading) return;
configState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
const data = {
neType: configState.neType,
neId: configState.neId,
fileType: 'yaml',
filePath: '',
content: '',
sync: true, // 同步到网元
};
// 配置信息
const oamData = toRaw(configState.oam);
saveConfigFile(
Object.assign(data, {
filePath: configState.oamFilePath,
content: oamData,
})
)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: '保存成功',
duration: 3,
});
// 记录当前步骤状态信息
stepState.states[stepState.current] = {
oam: oamData,
};
stepState.stepNext = true;
} else {
message.error({
content: '保存失败',
duration: 3,
});
}
})
.finally(() => {
hide();
configState.confirmLoading = false;
});
}
onMounted(() => {
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
configState.neType = stepNeInfo.neType;
configState.neId = stepNeInfo.neId;
// 读取文件列表
fnGetConfigFile();
});
onBeforeMount(() => {});
</script>
<template>
<a-form
name="modalStateFrom"
layout="horizontal"
:label-col="{ span: 6 }"
:labelWrap="true"
>
<div>网管端配置</div>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="httpmanagecfg.ipv4" name="ipv4">
<a-input
v-model:value="configState.oam.httpmanagecfg.ipv4"
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="httpmanagecfg.port" name="port">
<a-input
v-model:value="configState.oam.httpmanagecfg.port"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="32"
></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="oamconfig.ipv4" name="ipv4">
<a-input
v-model:value="configState.oam.oamconfig.ipv4"
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="oamconfig.port" name="port">
<a-input
v-model:value="configState.oam.oamconfig.port"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="32"
></a-input>
</a-form-item>
</a-col>
</a-row>
<a-form-item :wrapper-col="{ span: 14, offset: 3 }">
<a-button
type="primary"
html-type="submit"
@click="fnSaveConfigFile()"
:loading="configState.confirmLoading"
>
保存配置
</a-button>
</a-form-item>
</a-form>
</template>
<style lang="less" scoped></style>

310
src/views/tool/neQuickSetup/components/StepConfigSMF.vue Normal file
View File

@@ -0,0 +1,310 @@
<script setup lang="ts">
import { reactive, onMounted, onBeforeMount, toRaw } from 'vue';
import { message } from 'ant-design-vue/lib';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import { stepState } from '../hooks/useStep';
import { getConfigFile, saveConfigFile } from '@/api/ne/neInfo';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
/**配置对象信息状态类型 */
type ConfigState = {
neType: string;
neId: string;
/**文件列表 */
fileList: string[];
/**OAM网管端配置 */
oam: Record<string, any>;
oamFilePath: string;
/**网元主要配置 */
cfg: Record<string, any>;
cfgFilePath: string;
/**确定按钮 loading */
confirmLoading: boolean;
};
/**配置对象信息状态 */
let configState: ConfigState = reactive({
neType: '',
neId: '',
fileList: [],
oam: {
httpmanagecfg: {
ipv4: '172.16.5.150',
port: 33030,
},
oamconfig: {
enable: true,
neconfig: {
dn: '-',
neId: '001',
neName: 'SMF_001',
pVFlag: 'PNF',
province: '-',
rmUID: '4400HX1SMF001',
vendorName: '',
},
ipv4: '172.16.5.100',
port: 33030,
},
snmpconfig: {
enable: false,
},
},
oamFilePath: '',
cfg: {
localconfig: {
n4interfacecfg: {
ipv4: '172.16.5.150',
port: 8805,
},
telnetip: '172.16.5.150',
},
},
cfgFilePath: '',
confirmLoading: false,
});
/**查询配置文件或内容 */
function fnGetConfigFile(filePath: string = '') {
if (filePath === '' && configState.confirmLoading) return;
configState.confirmLoading = true;
getConfigFile({
neType: configState.neType,
neId: configState.neId,
filePath: filePath,
fileType: 'yaml',
})
.then(res => {
// 目录列表
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
configState.fileList = res.data;
// 网管配置
if (res.data.includes('oam_manager.yaml')) {
configState.oamFilePath = 'oam_manager.yaml';
fnGetConfigFile(configState.oamFilePath);
}
// 网元配置
if (res.data.includes('smf_conf.yaml')) {
configState.cfgFilePath = 'smf_conf.yaml';
fnGetConfigFile(configState.cfgFilePath);
}
return;
}
// 单文件内容 yaml
if (res.code === RESULT_CODE_SUCCESS && typeof res.data === 'object') {
if (filePath.startsWith('oam_manager')) {
configState.oam = res.data;
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
configState.oam.snmpconfig.enable = false;
configState.oam.oamconfig.enable = true;
configState.oam.oamconfig.neconfig = {
dn: stepNeInfo.db,
neId: stepNeInfo.neId,
neName: stepNeInfo.neName,
pVFlag: stepNeInfo.pvFlag,
province: stepNeInfo.province,
rmUID: stepNeInfo.rmUid,
vendorName: stepNeInfo.vendorName,
};
}
if (filePath.startsWith('smf_conf')) {
configState.cfg = res.data;
}
return;
}
// 出错
if (res.code === RESULT_CODE_ERROR) {
message.error({
content: res.msg,
duration: 3,
});
}
})
.finally(() => {
configState.confirmLoading = false;
});
}
/**保存配置文件 */
function fnSaveConfigFile() {
if (configState.confirmLoading) return;
configState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
const data = {
neType: configState.neType,
neId: configState.neId,
fileType: 'yaml',
filePath: '',
content: '',
sync: true, // 同步到网元
};
// 配置信息
const oamData = toRaw(configState.oam);
const cfgData = toRaw(configState.cfg);
Promise.all([
saveConfigFile(
Object.assign(data, {
filePath: configState.oamFilePath,
content: oamData,
})
),
saveConfigFile(
Object.assign(data, {
filePath: configState.cfgFilePath,
content: cfgData,
})
),
])
.then(resArr => {
if (
resArr[0].code === RESULT_CODE_SUCCESS &&
resArr[1].code === RESULT_CODE_SUCCESS
) {
message.success({
content: '保存成功',
duration: 3,
});
// 记录当前步骤状态信息
stepState.states[stepState.current] = {
oam: oamData,
cfg: cfgData,
};
stepState.stepNext = true;
} else {
message.error({
content: '保存失败',
duration: 3,
});
}
})
.finally(() => {
hide();
configState.confirmLoading = false;
});
}
onMounted(() => {
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
configState.neType = stepNeInfo.neType;
configState.neId = stepNeInfo.neId;
// 读取文件列表
fnGetConfigFile();
});
onBeforeMount(() => {});
</script>
<template>
<a-form
name="modalStateFrom"
layout="horizontal"
:label-col="{ span: 6 }"
:labelWrap="true"
>
<div>网管端配置</div>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="httpmanagecfg.ipv4" name="ipv4">
<a-input
v-model:value="configState.oam.httpmanagecfg.ipv4"
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="httpmanagecfg.port" name="port">
<a-input
v-model:value="configState.oam.httpmanagecfg.port"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="32"
></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="oamconfig.ipv4" name="ipv4">
<a-input
v-model:value="configState.oam.oamconfig.ipv4"
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="oamconfig.port" name="port">
<a-input
v-model:value="configState.oam.oamconfig.port"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="32"
></a-input>
</a-form-item>
</a-col>
</a-row>
<div>网元端配置</div>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="localconfig.n4interfacecfg.ipv4" name="ipv4">
<a-input
v-model:value="configState.cfg.localconfig.n4interfacecfg.ipv4"
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="localconfig.n4interfacecfg.port" name="port">
<a-input
v-model:value="configState.cfg.localconfig.n4interfacecfg.port"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="32"
></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="localconfig.telnetip" name="telnetip">
<a-input
v-model:value="configState.cfg.localconfig.telnetip"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="32"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24"> </a-col>
</a-row>
<a-form-item :wrapper-col="{ span: 14, offset: 3 }">
<a-button
type="primary"
html-type="submit"
@click="fnSaveConfigFile()"
:loading="configState.confirmLoading"
>
保存配置
</a-button>
</a-form-item>
</a-form>
</template>
<style lang="less" scoped></style>

232
src/views/tool/neQuickSetup/components/StepConfigText.vue Normal file
View File

@@ -0,0 +1,232 @@
<script setup lang="ts">
import { reactive, onMounted, onBeforeMount } from 'vue';
import { message } from 'ant-design-vue/lib';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import { stepState } from '../hooks/useStep';
import { getConfigFile, saveConfigFile } from '@/api/ne/neInfo';
import { parseDateToStr } from '@/utils/date-utils';
/**配置对象信息状态类型 */
type ConfigState = {
/**展开指定的树节点 */
expandedKeys: string[];
/**设置选中的树节点 */
selectedKeys: string[];
/**表单数据 */
treeData: any[];
/**等待 loading */
treeLoading: boolean;
/**选中的树节点 */
selected: { title: string; key: string };
/**设置选中的数据内容 */
keyTextData: string;
/**设置选中等待 loading */
keyTextLoading: boolean;
};
/**配置对象信息状态 */
let configState: ConfigState = reactive({
expandedKeys: ['000'],
selectedKeys: ['oam_manager.yaml'],
treeData: [
{
title: 'NE',
key: '000',
children: [
{
title: 'oam_manager',
key: 'oam_manager.yaml',
},
],
},
],
treeLoading: false,
selected: { title: 'oam_manager', key: 'oam_manager.yaml' },
keyTextData: '...',
keyTextLoading: false,
});
/**查询可选命令列表 */
function fnSelectConfigNode(_: any, info: any) {
const { title, key } = info.node;
configState.selectedKeys = [key];
configState.selected = { title, key };
fnGetConfigFile(key);
}
/**查询配置列表 */
function fnGetConfigFile(filePath: string = '') {
if (filePath) {
if (configState.keyTextLoading) return;
configState.keyTextLoading = true;
} else {
if (configState.treeLoading) return;
configState.treeLoading = true;
}
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
getConfigFile({
neType: stepNeInfo.neType,
neId: stepNeInfo.neId,
filePath: filePath,
fileType: 'txt',
})
.then(res => {
// 目录列表
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
const treeItem = {
title: stepNeInfo.neType,
key: stepNeInfo.neId,
children: [] as any,
};
treeItem.children = res.data.map((fileName: string) => {
return {
title: fileName.replace(/\.[^.]+$/, ''),
key: fileName,
};
});
configState.treeData = [treeItem];
configState.expandedKeys = [stepNeInfo.neId];
// 选中加载显示内容
if (treeItem.children.length > 0) {
const fileItem = treeItem.children[0];
configState.selectedKeys = [fileItem.key];
configState.selected = fileItem;
fnGetConfigFile(fileItem.key);
}
}
// 单文件内容
if (res.code === RESULT_CODE_SUCCESS && typeof res.data === 'string') {
configState.keyTextData = res.data;
}
// 出错
if (res.code === RESULT_CODE_ERROR) {
message.error({
content: res.msg,
duration: 3,
});
}
})
.finally(() => {
if (filePath) {
configState.keyTextLoading = false;
} else {
configState.treeLoading = false;
}
});
}
/**保存配置文件 */
function fnSaveConfigFile() {
if (configState.keyTextLoading) return;
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
saveConfigFile({
neType: stepNeInfo.neType,
neId: stepNeInfo.neId,
filePath: configState.selected.key,
content: configState.keyTextData,
sync: true, // 同步到网元
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
saveState.saveTime = parseDateToStr(new Date(), 'HH:mm:ss');
// 记录当前步骤状态信息
stepState.states[stepState.current] = {
treeData: configState.treeData,
};
stepState.stepNext = true;
} else {
message.error({
content: res.msg,
duration: 3,
});
}
})
.finally(() => {
saveState.timer = null;
});
}
/**保存文件数据状态 */
const saveState = reactive({
timer: null as any,
saveTime: '',
});
/**文件数据变更 */
function fnChangekeyTextData(val: string) {
console.log(val);
// 在用户停止输入3秒后，执行保存请求的操作
if (saveState.timer) {
clearTimeout(saveState.timer);
}
stepState.stepNext = false;
saveState.timer = setTimeout(fnSaveConfigFile, 3_000);
}
onMounted(() => {
fnGetConfigFile();
});
onBeforeMount(() => {
clearTimeout(saveState.timer);
});
</script>
<template>
<a-row :gutter="8">
<a-col :lg="6" :md="6" :xs="24">
<a-spin :spinning="configState.treeLoading">
<a-directory-tree
v-model:expandedKeys="configState.expandedKeys"
v-model:selectedKeys="configState.selectedKeys"
@select="fnSelectConfigNode"
:tree-data="configState.treeData"
></a-directory-tree>
</a-spin>
</a-col>
<a-col :lg="18" :md="18" :xs="24">
<a-spin :spinning="configState.treeLoading || configState.keyTextLoading">
<CodemirrorEdite
v-model:value="configState.keyTextData"
:disabled="configState.keyTextLoading"
lang="yaml"
height="500px"
@change="fnChangekeyTextData"
></CodemirrorEdite>
<div
class="edite-tip"
:class="{ 'edite-tip__ing': saveState.timer > 0 }"
>
{{ configState.selected.title }}
<template v-if="saveState.saveTime.length > 1">
| 最近保存: {{ saveState.saveTime }}
</template>
</div>
</a-spin>
</a-col>
</a-row>
</template>
<style lang="less" scoped>
.edite-tip {
min-height: 24px;
padding: 0 4px;
color: #fff;
line-height: 24px;
background: var(--ant-primary-color);
border-radius: 2px;
cursor: pointer;
transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;
&__ing {
background: var(--ant-primary-color-disabled);
}
}
</style>

218
src/views/tool/neQuickSetup/components/StepInstall.vue
View File

@@ -1,22 +1,17 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, ref } from 'vue';
import { reactive, onMounted, toRaw } from 'vue';
import { message, Form, Upload } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { NE_TYPE_LIST } from '@/constants/ne-constants';
import TerminalSSH from '@/components/TerminalSSH/index.vue';
import { ColumnsType } from 'ant-design-vue/lib/table';
import { checkInstallNeSoftware, listNeSoftware } from '@/api/ne/neSoftware';
import { installNeSoftware, listNeSoftware } from '@/api/ne/neSoftware';
import { parseDateToStr } from '@/utils/date-utils';
import { FileType } from 'ant-design-vue/lib/upload/interface';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
import { uploadFileChunk } from '@/api/tool/file';
import { stepState } from '../hooks/useStep';
const { t } = useI18n();
const emit = defineEmits(['next']);
/**表格字段列 */
let tableColumns: ColumnsType = [
@@ -33,9 +28,9 @@ let tableColumns: ColumnsType = [
width: 100,
},
{
title: 'fileName',
dataIndex: 'fileName',
key: 'fileName',
title: 'name',
dataIndex: 'name',
key: 'name',
align: 'left',
width: 300,
},
@@ -46,20 +41,20 @@ let tableColumns: ColumnsType = [
width: 100,
},
{
title: 'comment',
dataIndex: 'comment',
key: 'comment',
title: 'description',
dataIndex: 'description',
key: 'description',
align: 'left',
ellipsis: true,
},
{
title: 'updateTime',
dataIndex: 'updateTime',
title: 'createTime',
dataIndex: 'createTime',
align: 'left',
width: 150,
customRender(opt) {
if (!opt.value) return '';
return parseDateToStr(opt.value);
return parseDateToStr(+opt.value);
},
},
];
@@ -155,9 +150,9 @@ function fnGetList(pageNum?: number) {
/**安装对象信息状态类型 */
type InstallStateType = {
/**步骤 */
setp: 'pkg' | 'preinput' | 'ssh';
/**安装步骤命令 */
setpSSHArr: string[];
setp: 'pkg' | 'preinput' | 'log';
/**步骤日志输出 */
setpLog: string;
/**主机ID */
hostId: string;
/**文件操作类型 上传 or 选择 */
@@ -182,7 +177,7 @@ type InstallStateType = {
/**安装对象信息状态 */
let installState: InstallStateType = reactive({
setp: 'pkg',
setpSSHArr: [],
setpLog: '',
hostId: '',
optionType: 'upload',
from: {
@@ -200,6 +195,7 @@ let installState: InstallStateType = reactive({
mcc: '001',
mnc: '01',
priIP: '172.16.16.51',
pisCSCF: 'true',
},
});
@@ -315,25 +311,14 @@ function fnUploadFile(up: UploadRequestOption) {
});
}
/**软件包运行检查 */
/**软件包检查 */
function fnRunCheck() {
if (installState.confirmLoading) return;
const hide = message.loading(t('common.loading'), 0);
installStateFrom
.validate()
.then(() => {
const form = toRaw(installState.from);
Object.assign(form, { hostId: installState.hostId });
installState.confirmLoading = true;
return checkInstallNeSoftware(form);
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
installState.setpSSHArr = res.data;
installState.setp = 'preinput';
} else {
message.error(res.msg, 3);
}
installState.setp = 'preinput';
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
@@ -344,107 +329,53 @@ function fnRunCheck() {
});
}
/**安装检查预输入 */
function fnInstallPreinput() {
/**开始安装 */
function fnInstall() {
if (installState.confirmLoading) return;
// IMS
if (installState.from.neType === 'IMS') {
const modipplmn = installState.setpSSHArr[1];
if (modipplmn.includes('modipplmn.sh')) {
installState.setpSSHArr[1] = modipplmn
.replace('{PUBIP}', installState.preinput.pubIP)
.replace('{MCC}', installState.preinput.mcc)
.replace('{MNC}', installState.preinput.mnc);
}
const modintraip = installState.setpSSHArr[2];
if (modintraip.includes('modintraip.sh')) {
installState.setpSSHArr[2] = modintraip.replace(
'{PRIIP}',
installState.preinput.priIP
);
}
}
// 其他
//
installState.setp = 'ssh';
installState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
const from = toRaw(installState.from);
const preinput = toRaw(installState.preinput);
Object.assign(from, { hostId: installState.hostId });
installNeSoftware({
software: from,
preinput: preinput,
action: 'install',
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
installState.setp = 'log';
installState.setpLog = res.data;
message.success('软件安装成功', 3);
// 记录当前步骤状态信息
stepState.states[stepState.current] = {
from: from,
preinput: preinput,
};
stepState.stepNext = true;
} else {
message.error(res.msg, 3);
}
})
.finally(() => {
hide();
installState.confirmLoading = false;
});
}
/**安装终端 */
const installTerminal = ref();
/**
* 终端连接状态
* @param data 主机连接结果
*/
function fnTerminalConnect(data: Record<string, any>) {
console.log('fnTerminalConnect', data);
}
/**
* 终端消息数据
* @param data 主机连接结果
*/
function fnTerminalMessage(res: Record<string, any>) {
const { code, requestId, data } = res;
if (code === RESULT_CODE_ERROR) {
console.warn(res.msg);
return;
}
console.log('fnTerminalMessage', data);
// 安装遇到问题
if (data.includes('Errors were encountered while processing:')) {
installTerminal.value.send('logout');
return;
}
// 安装成功后退出
if (data.includes('software install successful')) {
installTerminal.value.send('logout');
message.success('软件安装成功', 3);
// 记录当前步骤状态信息
stepState.states[stepState.current] = { from: {} };
stepState.stepNext = true;
return;
}
// IMS预输入
if (data.includes('(P/I/S-CSCF Config)? <y/n>')) {
installTerminal.value.send(installState.preinput.pisCSCF);
return;
}
// 命令结束后继续输入命令
if (data.endsWith('$ ')) {
console.log('结束');
const cmdStr = installState.setpSSHArr.shift();
if (cmdStr) {
installTerminal.value.send(cmdStr);
}
return;
}
}
/**
* 终端关闭状态
* @param data 主机连接结果
*/
function fnTerminalClose(data: Record<string, any>) {
console.log('fnTerminalClose', data);
}
/**终端重新安装 */
function fnTerminalReset() {
/**重新安装 */
function fnInstallReset() {
installState.setp = 'pkg';
installState.optionType = 'option';
}
onMounted(() => {
// 读取步骤：网元信息
const stepPrevFrom = stepState.states[1].from;
installState.from.neType = stepPrevFrom.neType;
installState.hostId = stepPrevFrom.hostIds.split(',')[0];
const stepPrevFrom = stepState.states[1];
if (stepPrevFrom && stepPrevFrom.from) {
installState.from.neType = stepPrevFrom.from.neType;
installState.hostId = stepPrevFrom.from.hostIds.split(',')[0];
}
});
</script>
@@ -515,8 +446,8 @@ onMounted(() => {
</a-form-item>
<a-form-item
:label="t('views.configManage.softwareManage.updateComment')"
name="comment"
v-bind="installStateFrom.validateInfos.comment"
name="description"
v-bind="installStateFrom.validateInfos.description"
>
<a-textarea
v-model:value="installState.from.description"
@@ -575,16 +506,16 @@ onMounted(() => {
}"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'fileName'">
<template v-if="column.key === 'name'">
<a-tooltip placement="topLeft">
<template #title>{{ record.path }}</template>
<div style="cursor: pointer">{{ record.fileName }}</div>
<div style="cursor: pointer">{{ record.name }}</div>
</a-tooltip>
</template>
<template v-if="column.key === 'comment'">
<template v-if="column.key === 'description'">
<a-tooltip placement="topLeft">
<template #title>{{ record.comment }}</template>
<div style="cursor: pointer">{{ record.comment }}</div>
<template #title>{{ record.description }}</template>
<div style="cursor: pointer">{{ record.description }}</div>
</a-tooltip>
</template>
</template>
@@ -659,7 +590,7 @@ onMounted(() => {
<a-button
type="primary"
html-type="submit"
@click="fnInstallPreinput()"
@click="fnInstall()"
:loading="installState.confirmLoading"
>
开始安装
@@ -669,7 +600,7 @@ onMounted(() => {
<div>---- 安装进行信息</div>
<template v-if="installState.setp === 'ssh'">
<template v-if="installState.setp === 'log'">
<a-form-item
name="info"
label="安装日志"
@@ -677,23 +608,18 @@ onMounted(() => {
:wrapper-col="{ span: 24 }"
:label-wrap="true"
>
<TerminalSSH
ref="installTerminal"
:id="installState.hostId"
:hostId="installState.hostId"
init-cmd="clear"
@connect="fnTerminalConnect"
@message="fnTerminalMessage"
@close="fnTerminalClose"
>
</TerminalSSH>
<TerminalText
id="installLog"
:rows="28"
:value="installState.setpLog"
></TerminalText>
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 3 }">
<a-button
type="primary"
html-type="submit"
@click="fnTerminalReset()"
@click="fnInstallReset()"
:loading="installState.confirmLoading"
>
返回重新选择安装

25
src/views/tool/neQuickSetup/components/StepNeInfo.vue
View File

@@ -8,7 +8,6 @@ import { addNeInfo, updateNeInfo, getTypeAndIDNeInfo } from '@/api/ne/neInfo';
import { NE_TYPE_LIST } from '@/constants/ne-constants';
import { stepState } from '../hooks/useStep';
const { t } = useI18n();
const emit = defineEmits(['next']);
/**对话框对象信息状态类型 */
type ModalStateType = {
@@ -204,14 +203,22 @@ function fnNeInfo() {
onMounted(() => {
// 读取步骤：环境检查
const stepPrevFrom = stepState.states[0].from;
modalState.from.ip = stepPrevFrom.addr;
Object.assign(modalState.from.hosts[0], stepPrevFrom);
Object.assign(modalState.from.hosts[1], {
addr: stepPrevFrom.addr,
user: 'admin',
password: 'admin',
});
const stepPrevFrom = stepState.states[0];
if (stepPrevFrom && stepPrevFrom.from) {
modalState.from.ip = stepPrevFrom.from.addr;
Object.assign(modalState.from.hosts[0], stepPrevFrom.from);
Object.assign(modalState.from.hosts[1], {
addr: modalState.from.ip,
user: 'admin',
password: 'admin',
});
}
// 读取步骤：网元信息
const stepCurrentFrom = stepState.states[1];
if (stepCurrentFrom && stepCurrentFrom.from) {
Object.assign(modalState.from, stepCurrentFrom.from);
}
});
</script>

81
src/views/tool/neQuickSetup/index.vue
View File

@@ -1,13 +1,75 @@
<script lang="ts" setup>
import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib';
import StepCheck from './components/StepCheck.vue';
import StepNeInfo from './components/StepNeInfo.vue';
import StepInstall from './components/StepInstall.vue';
import StepConfig from './components/StepConfig.vue';
import StepActivate from './components/StepActivate.vue';
import StepFinish from './components/StepFinish.vue';
import { defineAsyncComponent, watch, shallowRef } from 'vue';
import { stepState, fnStepPrev, fnStepNext } from './hooks/useStep';
// 异步加载组件
const StepCheck = defineAsyncComponent(
() => import('./components/StepCheck.vue')
);
// 当前组件
const currentComponent = shallowRef(StepCheck);
watch(
() => stepState.current,
v => {
if (v === 0) {
currentComponent.value = StepCheck;
return;
}
if (v === 1) {
const StepNeInfo = defineAsyncComponent(
() => import('./components/StepNeInfo.vue')
);
currentComponent.value = StepNeInfo;
return;
}
if (v === 2) {
const StepInstall = defineAsyncComponent(
() => import('./components/StepInstall.vue')
);
currentComponent.value = StepInstall;
return;
}
if (v === 3) {
// 读取第二步的网元信息
const stepNeInfo = stepState.states[1].from;
if (stepNeInfo.neType === 'SMF') {
const StepConfigSMF = defineAsyncComponent(
() => import('./components/StepConfigSMF.vue')
);
currentComponent.value = StepConfigSMF;
} else if (stepNeInfo.neType === 'AMF') {
const StepConfigText = defineAsyncComponent(
() => import('./components/StepConfigText.vue')
);
currentComponent.value = StepConfigText;
} else {
const StepConfig = defineAsyncComponent(
() => import('./components/StepConfig.vue')
);
currentComponent.value = StepConfig;
}
return;
}
if (v === 4) {
const StepActivate = defineAsyncComponent(
() => import('./components/StepActivate.vue')
);
currentComponent.value = StepActivate;
return;
}
if (v === 5) {
const StepFinish = defineAsyncComponent(
() => import('./components/StepFinish.vue')
);
currentComponent.value = StepFinish;
return;
}
}
);
</script>
<template>
@@ -66,12 +128,7 @@ import { stepState, fnStepPrev, fnStepNext } from './hooks/useStep';
</template>
<!-- 步骤页面 -->
<StepCheck v-if="stepState.current === 0"></StepCheck>
<StepNeInfo v-if="stepState.current === 1"></StepNeInfo>
<StepInstall v-if="stepState.current === 2"></StepInstall>
<StepConfig v-if="stepState.current === 3"></StepConfig>
<StepActivate v-if="stepState.current === 4"></StepActivate>
<StepFinish v-if="stepState.current === 5"></StepFinish>
<component :is="currentComponent" />
</a-card>
</PageContainer>
</template>