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

feat: 网元安装页面

Browse Source
This commit is contained in:
TsMask
2024-03-27 19:13:54 +08:00
parent e10a82ff35
commit 5380c4fb3f
5 changed files with 917 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,13 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw } from 'vue';
import { message, Form } from 'ant-design-vue/lib';
import { message, Form, Modal } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { neHostCheckInfo } from '@/api/ne/neHost';
import { neHostAuthorizedRSA, neHostCheckInfo } from '@/api/ne/neHost';
import useDictStore from '@/store/modules/dict';
import { stepState } from '../hooks/useStep';
const { getDict } = useDictStore();
const { t } = useI18n();
const emit = defineEmits(['next']);
const props = defineProps({
state: {
type: Object,
},
});
/**字典数据 */
let dict: {
@@ -35,7 +30,7 @@ type CheckStateType = {
/**检查对象信息状态 */
let checkState: CheckStateType = reactive({
info: {
addr: '0.0.0.0',
addr: '未连接',
kernelName: '-',
kernelRelease: '-',
machine: '-',
@@ -49,11 +44,11 @@ let checkState: CheckStateType = reactive({
hostType: 'ssh',
groupId: '1',
title: 'SSH_NE_22',
addr: '192.168.2.211',
addr: '192.168.5.57',
port: 22,
user: 'agtuser',
authMode: '0',
password: 'admin123',
password: 'QWERqwer',
privateKey: '',
passPhrase: '',
remark: '',
@@ -116,39 +111,65 @@ function fnCheckInfo() {
} else {
validateArr.push('privateKey');
}
checkState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
checkStateFrom
.validate(validateArr)
.then(() => {
checkState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
neHostCheckInfo(form)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
checkState.info = res.data;
emit('next', {
info: checkState.info,
from: checkState.from,
});
message.success({
content: `${form.addr}:${form.port} ${t(
'views.ne.neHost.testOk'
)}`,
duration: 2,
});
} else {
message.error({
content: `${form.addr}:${form.port} ${res.msg}`,
duration: 2,
});
}
})
.finally(() => {
hide();
checkState.confirmLoading = false;
Object.assign(checkState.info, {
addr: '未连接',
kernelName: '-',
kernelRelease: '-',
machine: '-',
nodename: '-',
prettyName: '-',
sshLink: false,
sudo: false,
});
stepState.stepNext = false;
return neHostCheckInfo(form);
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
checkState.info = res.data;
if (!res.data.sudo) {
message.warning({
content: `请配置服务器授予当前用户无密码 sudo 权限，确保有权限进行软件包安装`,
duration: 2,
});
return;
}
if (!res.data.sshLink) {
message.warning({
content: `请配置服务器间免密信任关系，确保服务器间文件传输功能`,
duration: 2,
});
return;
}
message.success({
content: `${form.addr}:${form.port} ${t('views.ne.neHost.testOk')}`,
duration: 2,
});
// 记录当前步骤状态信息
stepState.states[stepState.current] = {
info: checkState.info,
from: checkState.from,
};
stepState.stepNext = true;
} else {
message.error({
content: `${form.addr}:${form.port} ${res.msg}`,
duration: 2,
});
}
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
})
.finally(() => {
hide();
checkState.confirmLoading = false;
});
}
@@ -157,6 +178,32 @@ function fnCheckInfoReset() {
checkStateFrom.resetFields();
}
/**SSH连接-免密直连 */
function fnSSHLink() {
if (checkState.info.sshLink) return;
Modal.confirm({
title: '提示',
content: '是否要配置免密直连？',
onOk: () => {
const form = toRaw(checkState.from);
neHostAuthorizedRSA(form).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: `操作成功`,
duration: 2,
});
checkState.info.sshLink = true;
} else {
message.error({
content: `操作失败`,
duration: 2,
});
}
});
},
});
}
onMounted(() => {
// 初始字典数据
Promise.allSettled([getDict('ne_host_authMode')]).then(resArr => {
@@ -165,13 +212,14 @@ onMounted(() => {
}
});
// 状态还原
if (props.state) {
if (props.state.info) {
const info = toRaw(props.state.info);
const state = stepState.states[stepState.current];
if (state) {
if (state.info) {
const info = toRaw(state.info);
Object.assign(checkState.info, info);
}
if (props.state.from) {
const from = toRaw(props.state.from);
if (state.from) {
const from = toRaw(state.from);
Object.assign(checkState.from, from);
}
}
@@ -205,7 +253,7 @@ onMounted(() => {
<a-descriptions-item label="主机名">
{{ checkState.info.nodename }}
</a-descriptions-item>
<a-descriptions-item label="安全">
<a-descriptions-item label="授予权限">
<a-tag :color="checkState.info.sudo ? 'success' : 'error'">
<template #icon>
<CheckCircleOutlined v-if="checkState.info.sudo" />
@@ -213,7 +261,12 @@ onMounted(() => {
</template>
可提权
</a-tag>
<a-tag :color="checkState.info.sshLink ? 'success' : 'error'">
<a-tag
:color="checkState.info.sshLink ? 'success' : 'error'"
style="cursor: pointer"
@click="fnSSHLink()"
>
<template #icon>
<CheckCircleOutlined v-if="checkState.info.sshLink" />
<CloseCircleOutlined v-else />
@@ -336,14 +389,14 @@ onMounted(() => {
</a-form-item>
</template>
<a-form-item :wrapper-col="{ span: 14, offset: 3 }">
<a-form-item :wrapper-col="{ span: 8, offset: 3 }">
<a-button
type="primary"
html-type="submit"
@click="fnCheckInfo()"
:loading="checkState.confirmLoading"
>
{{ t('views.ne.neHost.test') }}
进行连接
</a-button>
<a-button style="margin-left: 12px" @click="fnCheckInfoReset()">
重置

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

@@ -1,39 +1,28 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, watch } from 'vue';
import { message, Form } from 'ant-design-vue/lib';
import { reactive, onMounted, toRaw, watch, ref } from 'vue';
import { message, Form, Upload } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
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 { testNeHost } from '@/api/ne/neHost';
import useDictStore from '@/store/modules/dict';
import TerminalSSH from '@/components/TerminalSSH/index.vue';
import { ColumnsType } from 'ant-design-vue/lib/table';
import {
addNeSoftware,
installNeSoftware,
installCheckNeSoftware,
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';
const { getDict } = useDictStore();
import { stepState } from '../hooks/useStep';
const { t } = useI18n();
const emit = defineEmits(['next']);
const props = defineProps({
state: {
type: Object,
},
});
/**字典数据 */
let dict: {
/**认证模式 */
neHostAuthMode: DictType[];
} = reactive({
neHostAuthMode: [],
});
/**表格字段列 */
let tableColumns: ColumnsType = [
@@ -138,7 +127,6 @@ function fnTableSelectedRowKeys(
keys: (string | number)[],
selectedRows: any[]
) {
console.log(keys, selectedRows);
tableState.selectedRowKeys = keys;
// 选择的表单数据填充
const row = selectedRows[0];
@@ -172,10 +160,18 @@ function fnGetList(pageNum?: number) {
/**安装对象信息状态类型 */
type InstallStateType = {
/**步骤 */
setp: 'pkg' | 'preinput' | 'ssh';
/**安装步骤命令 */
setpSSHArr: string[];
/**安装步骤命令-当前执行 */
setpSSHIdx: number;
/**主机ID */
hostId: string;
/**文件操作类型 上传 or 选择 */
optionType: 'upload' | 'option';
/**表单数据 */
from: {
/**文件操作类型 上传 or 选择 */
optionType: 'upload' | 'option';
/**网元类型 */
neType: string;
fileName: string;
@@ -188,14 +184,16 @@ type InstallStateType = {
confirmLoading: boolean;
/**上传文件 */
uploadFiles: any[];
/**安装日志 */
logMsg: string;
};
/**安装对象信息状态 */
let installState: InstallStateType = reactive({
setp: 'pkg',
setpSSHArr: [],
setpSSHIdx: 0,
hostId: '',
optionType: 'upload',
from: {
optionType: 'upload',
neType: '',
fileName: '',
path: '',
@@ -204,7 +202,6 @@ let installState: InstallStateType = reactive({
},
confirmLoading: false,
uploadFiles: [],
logMsg: '',
});
/**
@@ -212,7 +209,7 @@ let installState: InstallStateType = reactive({
*/
function fnNeTypeChange(v: any) {
tableState.queryParams.neType = v;
if (installState.from.optionType === 'option') {
if (installState.optionType === 'option') {
fnGetList(1);
}
}
@@ -221,13 +218,13 @@ function fnNeTypeChange(v: any) {
* 表单修改文件操作类型
*/
function fnOptionTypeChange() {
if (installState.from.optionType === 'upload') {
if (installState.optionType === 'upload') {
installState.from.fileName = '';
installState.from.path = '';
installState.from.version = '';
installState.from.comment = '';
}
if (installState.from.optionType === 'option') {
if (installState.optionType === 'option') {
tableState.queryParams.neType = installState.from.neType;
fnGetList(1);
}
@@ -274,7 +271,7 @@ function fnBeforeUploadFile(file: FileType) {
}),
3
);
return false;
return Upload.LIST_IGNORE;
}
// 根据给定的软件名取版本号 ims-r2.2312.x-ub22.deb
const matches = fileName.match(/([0-9.]+[0-9x]+)/);
@@ -283,7 +280,11 @@ function fnBeforeUploadFile(file: FileType) {
}
const neTypeIndex = fileName.indexOf('-');
if (neTypeIndex !== -1) {
installState.from.neType = fileName.substring(0, neTypeIndex).toUpperCase();
const neType = fileName.substring(0, neTypeIndex).toUpperCase();
if (installState.from.neType !== neType) {
message.error('请上传对应网元类型的安装包', 3);
return Upload.LIST_IGNORE;
}
}
return true;
}
@@ -324,11 +325,13 @@ function fnInstallUpload() {
.then(() => {
installState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
// 新增软件包
addNeSoftware(form)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
// 安装网元
return installNeSoftware(form);
Object.assign(form, { hostId: installState.hostId });
return installCheckNeSoftware(form);
} else {
message.error(res.msg, 3);
}
@@ -336,7 +339,9 @@ function fnInstallUpload() {
.then(res => {
if (!res) return;
if (res.code === RESULT_CODE_SUCCESS) {
console.log(res);
installState.setpSSHArr = res.data;
installState.setpSSHIdx = 0;
installState.setp = 'ssh';
} else {
message.error(res.msg, 3);
}
@@ -351,21 +356,19 @@ function fnInstallUpload() {
});
}
/**软件包上传安装表单重置 */
function fnInstallInfoReset() {
installStateFrom.resetFields();
}
/**软件包选择安装 */
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);
installNeSoftware(form)
installCheckNeSoftware(form)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
console.log(res);
installState.setpSSHArr = res.data;
installState.setpSSHIdx = 0;
installState.setp = 'preinput';
} else {
message.error(res.msg, 3);
}
@@ -376,13 +379,99 @@ function fnInstallOptions() {
});
}
onMounted(() => {
// 初始字典数据
Promise.allSettled([getDict('ne_host_authMode')]).then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.neHostAuthMode = resArr[0].value;
/**安装检查预输入 */
function fnInstallPreinput() {
if (installState.confirmLoading) return;
// 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');
const modintraip = installState.setpSSHArr[2];
modintraip.replace('{PRIIP}', '192.168.5.57');
}
installState.setpSSHIdx = 0;
installState.setp = 'ssh';
}
/**安装终端 */
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('y');
return;
}
// 命令结束后继续输入命令
if (data.endsWith('$ ')) {
console.log('结束');
const cmdStr = installState.setpSSHArr[installState.setpSSHIdx];
if (cmdStr) {
installTerminal.value.send(cmdStr);
installState.setpSSHIdx += 1;
}
});
return;
}
}
/**
* 终端关闭状态
* @param data 主机连接结果
*/
function fnTerminalClose(data: Record<string, any>) {
console.log('fnTerminalClose', data);
}
/**终端重新安装 */
function fnTerminalReset() {
installState.setpSSHIdx = 0;
installState.setp = 'pkg';
installState.optionType = 'option';
}
onMounted(() => {
// 读取上一步的网元信息
const stepPrevFrom = stepState.states[stepState.current - 1].from;
installState.from.neType = stepPrevFrom.neType;
installState.hostId = stepPrevFrom.hostIds.split(',')[0];
});
</script>
@@ -391,200 +480,225 @@ onMounted(() => {
name="installStateFrom"
layout="horizontal"
:label-col="{ span: 3 }"
:wrapper-col="{ span: 8 }"
:label-wrap="true"
>
<a-form-item
:label="t('views.configManage.softwareManage.neType')"
name="neType"
v-bind="installStateFrom.validateInfos.neType"
>
<a-auto-complete
v-model:value="installState.from.neType"
:options="NE_TYPE_LIST.map(v => ({ value: v }))"
@change="fnNeTypeChange"
<div>---- 安装软件包</div>
<template v-if="installState.setp === 'pkg'">
<a-form-item
:label="t('views.configManage.softwareManage.neType')"
name="neType"
v-bind="installStateFrom.validateInfos.neType"
>
<a-input
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="32"
<a-auto-complete
v-model:value="installState.from.neType"
:disabled="true"
:options="NE_TYPE_LIST.map(v => ({ value: v }))"
@change="fnNeTypeChange"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
{{ t('views.configManage.neManage.neTypeTip') }}
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
</a-auto-complete>
</a-form-item>
<a-form-item label="软件来源" name="optionType">
<a-radio-group
v-model:value="installState.from.optionType"
button-style="solid"
@change="fnOptionTypeChange"
:disabled="installState.confirmLoading"
>
<a-radio-button value="upload">新上传</a-radio-button>
<a-radio-button value="option">已上传</a-radio-button>
</a-radio-group>
</a-form-item>
<!-- 重新上传 -->
<template v-if="installState.from.optionType === 'upload'">
<a-form-item
:label="t('views.configManage.softwareManage.version')"
name="version"
v-bind="installStateFrom.validateInfos.version"
>
<a-input
v-model:value="installState.from.version"
allow-clear
:placeholder="t('views.configManage.softwareManage.versionPlease')"
></a-input>
<a-input
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="32"
:disabled="true"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
{{ t('views.configManage.neManage.neTypeTip') }}
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
</a-auto-complete>
</a-form-item>
<a-form-item
:label="t('views.configManage.softwareManage.updateComment')"
name="comment"
v-bind="installStateFrom.validateInfos.comment"
>
<a-textarea
v-model:value="installState.from.comment"
:auto-size="{ minRows: 1, maxRows: 4 }"
:maxlength="500"
:show-count="true"
:placeholder="
t('views.configManage.softwareManage.updateCommentPlease')
"
/>
</a-form-item>
<a-form-item
:label="t('views.configManage.softwareManage.updateFile')"
name="file"
v-bind="installStateFrom.validateInfos.path"
>
<a-upload
name="file"
v-model:file-list="installState.uploadFiles"
accept=".rpm,.deb"
list-type="text"
:max-count="1"
:show-upload-list="{
showPreviewIcon: false,
showRemoveIcon: false,
showDownloadIcon: false,
}"
:before-upload="fnBeforeUploadFile"
:custom-request="fnUploadFile"
<a-form-item label="软件来源" name="optionType">
<a-radio-group
v-model:value="installState.optionType"
button-style="solid"
@change="fnOptionTypeChange"
:disabled="installState.confirmLoading"
>
<a-button type="default" :disabled="installState.confirmLoading">
{{ t('views.configManage.softwareManage.selectFile') }}
</a-button>
</a-upload>
<a-radio-button value="upload">新上传</a-radio-button>
<a-radio-button value="option">已上传</a-radio-button>
</a-radio-group>
</a-form-item>
</template>
<!-- 选择已上传 -->
<template v-if="installState.from.optionType === 'option'">
<a-form-item label="选择记录" name="option">
<a-table
class="table"
row-key="id"
:columns="tableColumns"
:loading="tableState.loading"
:data-source="tableState.data"
:pagination="tablePagination"
size="small"
:scroll="{ x: tableColumns.length * 100, y: '400px' }"
:row-selection="{
type: 'radio',
columnWidth: '48px',
selectedRowKeys: tableState.selectedRowKeys,
onChange: fnTableSelectedRowKeys,
}"
<!-- 重新上传 -->
<template v-if="installState.optionType === 'upload'">
<a-form-item
:label="t('views.configManage.softwareManage.version')"
name="version"
v-bind="installStateFrom.validateInfos.version"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'fileName'">
<a-tooltip placement="topLeft">
<template #title>{{ record.path }}</template>
<div style="cursor: pointer">{{ record.fileName }}</div>
</a-tooltip>
<a-input
v-model:value="installState.from.version"
allow-clear
:placeholder="t('views.configManage.softwareManage.versionPlease')"
></a-input>
</a-form-item>
<a-form-item
:label="t('views.configManage.softwareManage.updateComment')"
name="comment"
v-bind="installStateFrom.validateInfos.comment"
>
<a-textarea
v-model:value="installState.from.comment"
:auto-size="{ minRows: 1, maxRows: 4 }"
:maxlength="500"
:show-count="true"
:placeholder="
t('views.configManage.softwareManage.updateCommentPlease')
"
/>
</a-form-item>
<a-form-item
:label="t('views.configManage.softwareManage.updateFile')"
name="file"
v-bind="installStateFrom.validateInfos.path"
>
<a-upload
name="file"
v-model:file-list="installState.uploadFiles"
accept=".rpm,.deb"
list-type="text"
:max-count="1"
:show-upload-list="{
showPreviewIcon: false,
showRemoveIcon: false,
showDownloadIcon: false,
}"
:before-upload="fnBeforeUploadFile"
:custom-request="fnUploadFile"
:disabled="installState.confirmLoading"
>
<a-button type="default" :disabled="installState.confirmLoading">
{{ t('views.configManage.softwareManage.selectFile') }}
</a-button>
</a-upload>
</a-form-item>
</template>
<!-- 选择已上传 -->
<template v-if="installState.optionType === 'option'">
<a-form-item label="选择记录" name="option" :wrapper-col="{ span: 24 }">
<a-table
class="table"
row-key="id"
:columns="tableColumns"
:loading="tableState.loading"
:data-source="tableState.data"
:pagination="tablePagination"
size="small"
:scroll="{ x: tableColumns.length * 100, y: '400px' }"
:row-selection="{
type: 'radio',
columnWidth: '48px',
selectedRowKeys: tableState.selectedRowKeys,
onChange: fnTableSelectedRowKeys,
}"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'fileName'">
<a-tooltip placement="topLeft">
<template #title>{{ record.path }}</template>
<div style="cursor: pointer">{{ record.fileName }}</div>
</a-tooltip>
</template>
<template v-if="column.key === 'comment'">
<a-tooltip placement="topLeft">
<template #title>{{ record.comment }}</template>
<div style="cursor: pointer">{{ record.comment }}</div>
</a-tooltip>
</template>
</template>
<template v-if="column.key === 'comment'">
<a-tooltip placement="topLeft">
<template #title>{{ record.comment }}</template>
<div style="cursor: pointer">{{ record.comment }}</div>
</a-tooltip>
</template>
</template>
</a-table>
</a-table>
</a-form-item>
</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()"
:loading="installState.confirmLoading"
>
安装检查
</a-button>
</a-form-item>
</template>
<a-form-item :wrapper-col="{ span: 14, offset: 3 }">
<template v-if="installState.from.optionType === 'upload'">
<div>--- 安装前预输入</div>
<template v-if="installState.setp === 'preinput'">
<a-form-item
name="info"
label="安装前预输入"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<div style="align-items: center">-----</div>
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 3 }">
<a-button
type="primary"
html-type="submit"
@click="fnInstallUpload()"
@click="fnInstallPreinput()"
:loading="installState.confirmLoading"
>
进行安装
开始安装
</a-button>
<a-button style="margin-left: 12px" @click="fnInstallInfoReset()">
重置
</a-form-item>
</template>
<div>---- 安装进行信息</div>
<template v-if="installState.setp === 'ssh'">
<a-form-item
name="info"
label="安装日志"
:label-col="{ span: 3 }"
: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>
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 3 }">
<a-button
type="primary"
html-type="submit"
@click="fnTerminalReset()"
:loading="installState.confirmLoading"
>
返回重新选择安装
</a-button>
</template>
<a-button
v-if="installState.from.optionType === 'option'"
type="primary"
html-type="submit"
@click="fnInstallOptions()"
:loading="installState.confirmLoading"
>
进行安装
</a-button>
</a-form-item>
--- 安装前预输入
<a-form-item
name="info"
label="安装前预输入"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<div style="align-items: center">-----</div>
</a-form-item>
---- 安装进行日志结果
<a-form-item
name="info"
label="安装日志"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<CodemirrorEdite
:value="installState.logMsg"
:disabled="true"
:editor-style="{ height: '400px !important' }"
></CodemirrorEdite>
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 3 }">
<a-button
type="primary"
html-type="submit"
@click="fnInstallOptions()"
:loading="installState.confirmLoading"
>
重新安装
</a-button>
</a-form-item>
</a-form-item>
</template>
</a-form>
</template>

469
src/views/tool/neQuickSetup/components/StepNeInfo.vue Normal file
View File

@@ -0,0 +1,469 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw } from 'vue';
import { message, Form, Modal } from 'ant-design-vue/lib';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo';
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 = {
/**新增框或修改框是否显示 */
visibleByEdit: boolean;
/**标题 */
title: string;
/**表单数据 */
from: Record<string, any>;
/**确定按钮 loading */
confirmLoading: boolean;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visibleByEdit: false,
title: '网元',
from: {
id: undefined,
neId: '001',
neType: 'OMC',
neName: '',
ip: '',
port: 3030,
pvFlag: 'PNF',
rmUid: '4400HX1OMC001',
neAddress: '',
dn: '',
vendorName: '',
province: '',
// 主机
hosts: [
{
hostId: undefined,
hostType: 'ssh',
groupId: '1',
title: 'SSH_NE_22',
addr: '',
port: 22,
user: 'user',
authMode: '0',
password: 'user',
privateKey: '',
passPhrase: '',
remark: '',
},
{
hostId: undefined,
hostType: 'telnet',
groupId: '1',
title: 'Telnet_NE_4100',
addr: '',
port: 4100,
user: 'user',
authMode: '0',
password: 'user',
remark: '',
},
],
},
confirmLoading: false,
});
/**对话框内表单属性和校验规则 */
const modalStateFrom = Form.useForm(
modalState.from,
reactive({
neType: [
{
required: true,
message: '请输入网元类型',
},
],
neId: [
{
required: true,
message: '请输入网元标识',
},
],
rmUid: [
{
required: true,
message: '请输入资源唯一标识',
},
],
ip: [
{
required: true,
message: '请输入网元IP地址',
},
],
neName: [
{
required: true,
message: '请输入网元名称',
},
],
})
);
/**测试连接检查信息 */
function fnNeInfo() {
const from = toRaw(modalState.from);
modalStateFrom
.validate()
.then(e => {
modalState.confirmLoading = true;
return getTypeAndIDNeInfo(from.neType, from.neId);
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.warning({
content: `${from.neType} 已存在网元标识：${from.neId} ，资源唯一标识：${from.rmUid}`,
duration: 3,
});
from.id = res.data.id;
from.hostIds = res.data.hostIds;
const hostIds = res.data.hostIds.split(',');
if (hostIds.length == 2) {
from.hosts[0].hostId = hostIds[0];
from.hosts[1].hostId = hostIds[1];
}
return true;
} else {
message.success({
content: `${from.neType} 可使用网元标识：${from.neId}`,
duration: 3,
});
return false;
}
})
.then(state => {
let confirmTitle = '新增提示';
let confirmContent = '是否新增为新的网元信息并继续？';
if (state) {
confirmTitle = '更新提示';
confirmContent = '是否更新替换已存在网元信息并继续？';
}
Modal.confirm({
title: confirmTitle,
content: confirmContent,
okText: '确认',
cancelText: '取消',
onCancel: () => {
from.id = undefined;
},
onOk: () => {
const result = from.id ? updateNeInfo(from) : addNeInfo(from);
const hide = message.loading(t('common.loading'), 0);
result
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: '操作成功',
duration: 3,
});
// 刷新缓存的网元信息
useNeInfoStore()
.fnRefreshNelist()
.then(neRes => {
const itemNe = neRes.data.find(
(item: any) =>
item.neType === from.neType && item.neId === from.neId
);
if (itemNe) {
Object.assign(from, itemNe);
// 记录当前步骤状态信息
stepState.states[stepState.current] = { from };
stepState.stepNext = true;
}
});
} else {
message.error({
content: `${t('views.configManage.neManage.operFail')}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
},
});
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
})
.finally(() => {
modalState.confirmLoading = false;
});
}
onMounted(() => {
// 读取上一步的主机信息
const statePerv = stepState.states[stepState.current - 1];
modalState.from.ip = statePerv.from.addr;
Object.assign(modalState.from.hosts[0], statePerv.from);
Object.assign(modalState.from.hosts[1], {
addr: modalState.from.ip,
user: 'admin',
password: 'admin',
});
// 状态还原
const state = stepState.states[stepState.current];
if (state) {
if (state.from) {
const from = toRaw(state.from);
Object.assign(modalState.from, from);
}
}
});
</script>
<template>
<a-form
name="modalStateFrom"
layout="horizontal"
:label-col="{ span: 6 }"
:labelWrap="true"
>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.configManage.neManage.neType')"
name="neType"
v-bind="modalStateFrom.validateInfos.neType"
>
<a-auto-complete
v-model:value="modalState.from.neType"
:options="NE_TYPE_LIST.map(v => ({ value: v }))"
>
<a-input
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="32"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
{{ t('views.configManage.neManage.neTypeTip') }}
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
</a-auto-complete>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.configManage.neManage.pvflag')"
name="pvFlag"
v-bind="modalStateFrom.validateInfos.pvFlag"
>
<a-select v-model:value="modalState.from.pvFlag" default-value="PNF">
<a-select-opt-group :label="t('views.configManage.neManage.pnf')">
<a-select-option value="PNF">PNF</a-select-option>
</a-select-opt-group>
<a-select-opt-group :label="t('views.configManage.neManage.vnf')">
<a-select-option value="VNF">VNF</a-select-option>
</a-select-opt-group>
</a-select>
</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.neId')"
name="neId"
v-bind="modalStateFrom.validateInfos.neId"
>
<a-input
v-model:value="modalState.from.neId"
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="t('views.configManage.neManage.neName')"
name="neName"
v-bind="modalStateFrom.validateInfos.neName"
>
<a-input
v-model:value="modalState.from.neName"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="64"
>
</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.ip')"
name="ip"
v-bind="modalStateFrom.validateInfos.ip"
>
<a-input
v-model:value="modalState.from.ip"
allow-clear
:disabled="true"
:placeholder="t('common.inputPlease')"
:maxlength="128"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
<div>
{{ t('views.ne.neInfo.ipAddr') }}
</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.port')"
name="port"
v-bind="modalStateFrom.validateInfos.port"
>
<a-input-number
v-model:value="modalState.from.port"
style="width: 100%"
:min="1"
:max="65535"
placeholder="<=65535"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
<div>{{ t('views.configManage.neManage.portTip') }}</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input-number>
</a-form-item>
</a-col>
</a-row>
<a-form-item
:label="t('views.configManage.neManage.uid')"
name="rmUid"
v-bind="modalStateFrom.validateInfos.rmUid"
:label-col="{ span: 3 }"
:labelWrap="true"
>
<a-input
v-model:value="modalState.from.rmUid"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="40"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
<div>
{{ t('views.ne.neInfo.rmUID') }}
</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</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="modalState.from.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="modalState.from.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="modalState.from.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="modalState.from.province"
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="fnNeInfo()"
:loading="modalState.confirmLoading"
>
检查信息
</a-button>
</a-form-item>
</a-form>
</template>
<style lang="less" scoped></style>

16
src/views/tool/neQuickSetup/hooks/useStep.ts
View File

@@ -23,6 +23,10 @@ export const stepState: StepStateType = reactive({
title: '环境检查',
description: '服务器检查，触发免密脚本',
},
{
title: '网元信息',
description: '记录下所安装网元基础信息',
},
{
title: '网元安装',
description: '安装包上传执行安装启动服务等待10秒停止服务',
@@ -44,18 +48,12 @@ export const stepState: StepStateType = reactive({
states: [],
});
export function fnStepNext(e?: any) {
console.log(e);
if (e) {
stepState.states[stepState.current] = e;
stepState.stepNext = true;
return;
}
export function fnStepNext() {
stepState.current++;
// stepState.stepNext = false;
stepState.stepNext = false;
}
export function fnStepPrev() {
stepState.current--;
// stepState.stepNext = true;
stepState.stepNext = true;
}

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

@@ -1,20 +1,13 @@
<script lang="ts" setup>
import { PageContainer } from 'antdv-pro-layout';
import { Modal, message } from 'ant-design-vue/lib';
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 { reactive, toRaw } from 'vue';
import { parseDuration } from '@/utils/date-utils';
import { listNeHost } from '@/api/ne/neHost';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { useRouter } from 'vue-router';
import { stepState, fnStepPrev, fnStepNext } from './hooks/useStep';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const router = useRouter();
</script>
<template>
@@ -73,27 +66,12 @@ const router = useRouter();
</template>
<!-- 步骤页面 -->
<StepCheck
v-if="stepState.current === 0"
:state="stepState.states[stepState.current]"
@next="e => fnStepNext(e)"
></StepCheck>
<StepInstall
v-if="stepState.current === 1"
@next="fnStepNext"
></StepInstall>
<StepConfig
v-if="stepState.current === 2"
@next="fnStepNext"
></StepConfig>
<StepActivate
v-if="stepState.current === 3"
@next="fnStepNext"
></StepActivate>
<StepFinish
v-if="stepState.current === 4"
@next="fnStepNext"
></StepFinish>
<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>
</a-card>
</PageContainer>
</template>