feat: 网元安装步骤页面
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user