feat: 网元安装步骤页面

This commit is contained in:
TsMask
2024-04-01 15:58:06 +08:00
parent 3d40e0856e
commit 00e8b7acbb
6 changed files with 749 additions and 419 deletions

View File

@@ -1,21 +1,15 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, watch, ref } from 'vue';
import { reactive, onMounted, toRaw, ref } 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 useNeInfoStore from '@/store/modules/neinfo';
import { getNeInfo, addNeInfo, updateNeInfo } from '@/api/ne/neInfo';
import { NE_TYPE_LIST } from '@/constants/ne-constants';
import TerminalSSH from '@/components/TerminalSSH/index.vue';
import { ColumnsType } from 'ant-design-vue/lib/table';
import {
addNeSoftware,
installCheckNeSoftware,
listNeSoftware,
} from '@/api/ne/neSoftware';
import { checkInstallNeSoftware, 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';
@@ -131,10 +125,10 @@ function fnTableSelectedRowKeys(
// 选择的表单数据填充
const row = selectedRows[0];
installState.from.neType = row.neType;
installState.from.fileName = row.fileName;
installState.from.name = row.name;
installState.from.path = row.path;
installState.from.version = row.version;
installState.from.comment = row.comment;
installState.from.description = row.description;
}
/**查询列表, pageNum初始页数 */
@@ -164,8 +158,6 @@ type InstallStateType = {
setp: 'pkg' | 'preinput' | 'ssh';
/**安装步骤命令 */
setpSSHArr: string[];
/**安装步骤命令-当前执行 */
setpSSHIdx: number;
/**主机ID */
hostId: string;
/**文件操作类型 上传 or 选择 */
@@ -174,34 +166,41 @@ type InstallStateType = {
from: {
/**网元类型 */
neType: string;
fileName: string;
name: string;
path: string;
version: string;
/**备注 */
comment: string;
description: string;
};
/**确定按钮 loading */
confirmLoading: boolean;
/**上传文件 */
uploadFiles: any[];
/**预输入 */
preinput: Record<string, any>;
};
/**安装对象信息状态 */
let installState: InstallStateType = reactive({
setp: 'pkg',
setpSSHArr: [],
setpSSHIdx: 0,
hostId: '',
optionType: 'upload',
from: {
neType: '',
fileName: '',
name: '',
path: '',
version: '',
comment: '',
description: '',
},
confirmLoading: false,
uploadFiles: [],
preinput: {
// IMS
pubIP: '192.168.5.57',
mcc: '001',
mnc: '01',
priIP: '172.16.16.51',
},
});
/**
@@ -219,10 +218,10 @@ function fnNeTypeChange(v: any) {
*/
function fnOptionTypeChange() {
if (installState.optionType === 'upload') {
installState.from.fileName = '';
installState.from.name = '';
installState.from.path = '';
installState.from.version = '';
installState.from.comment = '';
installState.from.description = '';
}
if (installState.optionType === 'option') {
tableState.queryParams.neType = installState.from.neType;
@@ -304,7 +303,7 @@ function fnUploadFile(up: UploadRequestOption) {
file.status = 'done';
// 预置到表单
const { fileName, originalFileName } = res.data;
installState.from.fileName = originalFileName;
installState.from.name = originalFileName;
installState.from.path = fileName;
} else {
message.error(res.msg, 3);
@@ -316,63 +315,29 @@ function fnUploadFile(up: UploadRequestOption) {
});
}
/**软件包上传安装 */
function fnInstallUpload() {
/**软件包运行检查 */
function fnRunCheck() {
if (installState.confirmLoading) return;
const form = toRaw(installState.from);
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;
const hide = message.loading(t('common.loading'), 0);
// 新增软件包
addNeSoftware(form)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
// 安装网元
Object.assign(form, { hostId: installState.hostId });
return installCheckNeSoftware(form);
} else {
message.error(res.msg, 3);
}
})
.then(res => {
if (!res) return;
if (res.code === RESULT_CODE_SUCCESS) {
installState.setpSSHArr = res.data;
installState.setpSSHIdx = 0;
installState.setp = 'ssh';
} else {
message.error(res.msg, 3);
}
})
.finally(() => {
hide();
installState.confirmLoading = false;
});
return checkInstallNeSoftware(form);
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
});
}
/**软件包选择安装 */
function fnInstallOptions() {
if (installState.confirmLoading) return;
const form = toRaw(installState.from);
Object.assign(form, { hostId: installState.hostId });
installState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
installCheckNeSoftware(form)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
installState.setpSSHArr = res.data;
installState.setpSSHIdx = 0;
installState.setp = 'preinput';
} else {
message.error(res.msg, 3);
}
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
})
.finally(() => {
hide();
installState.confirmLoading = false;
@@ -385,13 +350,23 @@ function fnInstallPreinput() {
// IMS
if (installState.from.neType === 'IMS') {
const modipplmn = installState.setpSSHArr[1];
modipplmn.replace('{PUBIP}', '192.168.5.57');
modipplmn.replace('{MCC}', '001');
modipplmn.replace('{MNC}', '01');
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];
modintraip.replace('{PRIIP}', '192.168.5.57');
if (modintraip.includes('modintraip.sh')) {
installState.setpSSHArr[2] = modintraip.replace(
'{PRIIP}',
installState.preinput.priIP
);
}
}
installState.setpSSHIdx = 0;
// 其他
//
installState.setp = 'ssh';
}
@@ -436,17 +411,16 @@ function fnTerminalMessage(res: Record<string, any>) {
// IMS预输入
if (data.includes('(P/I/S-CSCF Config)? <y/n>')) {
installTerminal.value.send('y');
installTerminal.value.send(installState.preinput.pisCSCF);
return;
}
// 命令结束后继续输入命令
if (data.endsWith('$ ')) {
console.log('结束');
const cmdStr = installState.setpSSHArr[installState.setpSSHIdx];
const cmdStr = installState.setpSSHArr.shift();
if (cmdStr) {
installTerminal.value.send(cmdStr);
installState.setpSSHIdx += 1;
}
return;
}
@@ -462,14 +436,13 @@ function fnTerminalClose(data: Record<string, any>) {
/**终端重新安装 */
function fnTerminalReset() {
installState.setpSSHIdx = 0;
installState.setp = 'pkg';
installState.optionType = 'option';
}
onMounted(() => {
// 读取上一步的网元信息
const stepPrevFrom = stepState.states[stepState.current - 1].from;
// 读取步骤:网元信息
const stepPrevFrom = stepState.states[1].from;
installState.from.neType = stepPrevFrom.neType;
installState.hostId = stepPrevFrom.hostIds.split(',')[0];
});
@@ -546,7 +519,7 @@ onMounted(() => {
v-bind="installStateFrom.validateInfos.comment"
>
<a-textarea
v-model:value="installState.from.comment"
v-model:value="installState.from.description"
:auto-size="{ minRows: 1, maxRows: 4 }"
:maxlength="500"
:show-count="true"
@@ -620,21 +593,10 @@ onMounted(() => {
</template>
<a-form-item :wrapper-col="{ span: 14, offset: 3 }">
<template v-if="installState.optionType === 'upload'">
<a-button
type="primary"
html-type="submit"
@click="fnInstallUpload()"
:loading="installState.confirmLoading"
>
安装检查
</a-button>
</template>
<a-button
v-if="installState.optionType === 'option'"
type="primary"
html-type="submit"
@click="fnInstallOptions()"
@click="fnRunCheck()"
:loading="installState.confirmLoading"
>
安装检查
@@ -654,6 +616,45 @@ onMounted(() => {
<div style="align-items: center">-----</div>
</a-form-item>
<!-- IMS 预输入 -->
<template v-if="installState.from.neType === 'IMS'">
<a-form-item label="P/I/S-CSCF Config" name="pisCSCF">
<a-input
v-model:value="installState.preinput.pisCSCF"
allow-clear
placeholder="P/I/S-CSCF Config"
></a-input>
</a-form-item>
<a-form-item label="modipplmn IP" name="pubIP">
<a-input
v-model:value="installState.preinput.pubIP"
allow-clear
placeholder="IMS modipplmn IP"
></a-input>
</a-form-item>
<a-form-item label="modipplmn mcc" name="mcc">
<a-input
v-model:value="installState.preinput.mcc"
allow-clear
placeholder="IMS modipplmn mcc"
></a-input>
</a-form-item>
<a-form-item label="modipplmn mnc" name="mnc">
<a-input
v-model:value="installState.preinput.mnc"
allow-clear
placeholder="IMS modipplmn mnc"
></a-input>
</a-form-item>
<a-form-item label="modintraip priIP" name="priIP">
<a-input
v-model:value="installState.preinput.priIP"
allow-clear
placeholder="IMS modintraip priIP"
></a-input>
</a-form-item>
</template>
<a-form-item :wrapper-col="{ span: 14, offset: 3 }">
<a-button
type="primary"