feat: 网元安装检查页面组件
This commit is contained in:
TsMask
437
src/views/ne/neQuickSetup/components/Start.vue
Normal file
437
src/views/ne/neQuickSetup/components/Start.vue
Normal file
@@ -0,0 +1,437 @@
|
||||
<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 { neHostAuthorizedRSA, neHostCheckInfo } from '@/api/ne/neHost';
|
||||
import useDictStore from '@/store/modules/dict';
|
||||
import { fnToStepName, stepState } from '../hooks/useStep';
|
||||
const { getDict } = useDictStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
/**字典数据 */
|
||||
let dict: {
|
||||
/**认证模式 */
|
||||
neHostAuthMode: DictType[];
|
||||
} = reactive({
|
||||
neHostAuthMode: [],
|
||||
});
|
||||
|
||||
/**对象信息状态类型 */
|
||||
type StateType = {
|
||||
/**服务器信息 */
|
||||
info: Record<string, any>;
|
||||
/**表单数据 */
|
||||
from: Record<string, any>;
|
||||
/**是否可以下一步 */
|
||||
stepNext: boolean;
|
||||
/**确定按钮 loading */
|
||||
confirmLoading: boolean;
|
||||
};
|
||||
|
||||
/**对象信息状态 */
|
||||
let state: StateType = reactive({
|
||||
info: {
|
||||
addr: '0.0.0.0',
|
||||
kernelName: '-',
|
||||
kernelRelease: '-',
|
||||
machine: '-',
|
||||
nodename: '-',
|
||||
prettyName: '-',
|
||||
sshLink: false,
|
||||
sudo: false,
|
||||
},
|
||||
from: {
|
||||
hostId: undefined,
|
||||
hostType: 'ssh',
|
||||
groupId: '1',
|
||||
title: 'SSH_NE_22',
|
||||
addr: '172.60.5.150',
|
||||
port: 22,
|
||||
user: 'agtuser',
|
||||
authMode: '2',
|
||||
password: 'admin123',
|
||||
privateKey: '',
|
||||
passPhrase: '',
|
||||
remark: '',
|
||||
},
|
||||
stepNext: false,
|
||||
confirmLoading: false,
|
||||
});
|
||||
|
||||
/**表单属性和校验规则 */
|
||||
const checkStateFrom = Form.useForm(
|
||||
state.from,
|
||||
reactive({
|
||||
addr: [
|
||||
{
|
||||
required: true,
|
||||
min: 1,
|
||||
max: 128,
|
||||
message: t('views.ne.neHost.addrPlease'),
|
||||
},
|
||||
],
|
||||
port: [
|
||||
{
|
||||
required: true,
|
||||
message: t('views.ne.neHost.portPlease'),
|
||||
},
|
||||
],
|
||||
user: [
|
||||
{
|
||||
required: true,
|
||||
min: 1,
|
||||
max: 50,
|
||||
message: t('views.ne.neHost.userPlease'),
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
min: 1,
|
||||
max: 128,
|
||||
message: t('views.ne.neHost.passwordPlease'),
|
||||
},
|
||||
],
|
||||
privateKey: [
|
||||
{
|
||||
required: true,
|
||||
min: 1,
|
||||
max: 128,
|
||||
message: t('views.ne.neHost.privateKeyPlease'),
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
|
||||
/**测试连接检查信息 */
|
||||
function fnCheckInfo() {
|
||||
if (state.confirmLoading) return;
|
||||
const form = toRaw(state.from);
|
||||
console.log(form);
|
||||
const validateArr = ['addr', 'port', 'user'];
|
||||
if (form.authMode === '0') {
|
||||
validateArr.push('password');
|
||||
}
|
||||
if (form.authMode === '1') {
|
||||
validateArr.push('privateKey');
|
||||
}
|
||||
|
||||
state.confirmLoading = true;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
checkStateFrom
|
||||
.validate(validateArr)
|
||||
.then(() => {
|
||||
Object.assign(state.info, {
|
||||
addr: '0.0.0.0',
|
||||
kernelName: '-',
|
||||
kernelRelease: '-',
|
||||
machine: '-',
|
||||
nodename: '-',
|
||||
prettyName: '-',
|
||||
sshLink: false,
|
||||
sudo: false,
|
||||
});
|
||||
return neHostCheckInfo(form);
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
state.info = res.data;
|
||||
if (!res.data.sudo) {
|
||||
message.warning({
|
||||
content: `请配置服务器授予当前用户无密码 sudo 权限，确保有权限进行软件包安装`,
|
||||
duration: 2,
|
||||
});
|
||||
return;
|
||||
}
|
||||
// if (!res.data.sshLink) {
|
||||
// message.warning({
|
||||
// content: `请配置服务器间免密信任关系，确保服务器间文件传输功能`,
|
||||
// duration: 2,
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
|
||||
stepState.neHost = form; // 保存主机连接信息
|
||||
state.stepNext = true; // 开启下一步
|
||||
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,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
|
||||
})
|
||||
.finally(() => {
|
||||
hide();
|
||||
state.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**测试连接检查信息表单重置 */
|
||||
function fnCheckInfoReset() {
|
||||
Object.assign(state.info, {
|
||||
addr: '0.0.0.0',
|
||||
kernelName: '-',
|
||||
kernelRelease: '-',
|
||||
machine: '-',
|
||||
nodename: '-',
|
||||
prettyName: '-',
|
||||
sshLink: false,
|
||||
sudo: false,
|
||||
});
|
||||
state.stepNext = false;
|
||||
checkStateFrom.resetFields();
|
||||
}
|
||||
|
||||
/**测试主机连接-免密直连 */
|
||||
function fnHostAuthorized() {
|
||||
if (state.confirmLoading) return;
|
||||
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '是否要配置免密直连？',
|
||||
onOk: () => {
|
||||
const form = toRaw(state.from);
|
||||
state.confirmLoading = true;
|
||||
neHostAuthorizedRSA(form).then(res => {
|
||||
state.confirmLoading = false;
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: `操作成功`,
|
||||
duration: 2,
|
||||
});
|
||||
} else {
|
||||
message.error({
|
||||
content: `操作失败`,
|
||||
duration: 2,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**下一步操作 */
|
||||
function fnStepNext() {
|
||||
if (!state.stepNext) return;
|
||||
Modal.confirm({
|
||||
title: t('common.tipTitle'),
|
||||
content: '确认要下一步进行配置网元信息？',
|
||||
onOk() {
|
||||
fnToStepName('NeInfoConfig');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 初始字典数据
|
||||
Promise.allSettled([getDict('ne_host_authMode')]).then(resArr => {
|
||||
if (resArr[0].status === 'fulfilled') {
|
||||
dict.neHostAuthMode = resArr[0].value;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-descriptions :column="{ lg: 3, md: 2, sm: 2, xs: 1 }" bordered>
|
||||
<a-descriptions-item label="服务器IP" :span="3">
|
||||
{{ state.info.addr }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="系统">
|
||||
{{ state.info.kernelName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="架构">
|
||||
{{ state.info.machine }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="内核">
|
||||
{{ state.info.kernelRelease }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item>
|
||||
<template #label>
|
||||
平台
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title> 支持 Ubuntu </template>
|
||||
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
{{ state.info.prettyName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="主机名">
|
||||
{{ state.info.nodename }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="授予权限">
|
||||
<a-tag :color="state.info.sudo ? 'success' : 'error'">
|
||||
<template #icon>
|
||||
<CheckCircleOutlined v-if="state.info.sudo" />
|
||||
<CloseCircleOutlined v-else />
|
||||
</template>
|
||||
可提权
|
||||
</a-tag>
|
||||
|
||||
<a-tag :color="state.info.sshLink ? 'success' : 'error'">
|
||||
<template #icon>
|
||||
<CheckCircleOutlined v-if="state.info.sshLink" />
|
||||
<CloseCircleOutlined v-else />
|
||||
</template>
|
||||
可免密直连
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="连接检查">
|
||||
<a-form
|
||||
name="checkStateFrom"
|
||||
layout="horizontal"
|
||||
:label-col="{ span: 6 }"
|
||||
:label-wrap="true"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.ne.neHost.addr')"
|
||||
name="addr"
|
||||
v-bind="checkStateFrom.validateInfos.addr"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.from.addr"
|
||||
allow-clear
|
||||
:maxlength="128"
|
||||
:placeholder="t('common.inputPlease')"
|
||||
>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.ne.neHost.port')"
|
||||
name="port"
|
||||
v-bind="checkStateFrom.validateInfos.port"
|
||||
>
|
||||
<a-input-number
|
||||
v-model:value="state.from.port"
|
||||
:min="10"
|
||||
:max="65535"
|
||||
:step="1"
|
||||
style="width: 100%"
|
||||
></a-input-number>
|
||||
</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.ne.neHost.user')"
|
||||
name="user"
|
||||
v-bind="checkStateFrom.validateInfos.user"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.from.user"
|
||||
allow-clear
|
||||
:maxlength="50"
|
||||
:placeholder="t('common.inputPlease')"
|
||||
>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item :label="t('views.ne.neHost.authMode')">
|
||||
<a-select
|
||||
v-model:value="state.from.authMode"
|
||||
default-value="0"
|
||||
:options="dict.neHostAuthMode"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item
|
||||
v-if="state.from.authMode === '0'"
|
||||
:label="t('views.ne.neHost.password')"
|
||||
:label-col="{ span: 3 }"
|
||||
:label-wrap="true"
|
||||
name="password"
|
||||
v-bind="checkStateFrom.validateInfos.password"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="state.from.password"
|
||||
:maxlength="128"
|
||||
:placeholder="t('common.inputPlease')"
|
||||
>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<template v-if="state.from.authMode === '1'">
|
||||
<a-form-item
|
||||
:label="t('views.ne.neHost.privateKey')"
|
||||
:label-col="{ span: 3 }"
|
||||
:label-wrap="true"
|
||||
name="privateKey"
|
||||
v-bind="checkStateFrom.validateInfos.privateKey"
|
||||
>
|
||||
<a-textarea
|
||||
v-model:value="state.from.privateKey"
|
||||
:auto-size="{ minRows: 4, maxRows: 6 }"
|
||||
:maxlength="3000"
|
||||
:show-count="true"
|
||||
:placeholder="t('views.ne.neHost.privateKeyPlease')"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:label="t('views.ne.neHost.passPhrase')"
|
||||
:label-col="{ span: 3 }"
|
||||
:label-wrap="true"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="state.from.passPhrase"
|
||||
:maxlength="128"
|
||||
:placeholder="t('common.inputPlease')"
|
||||
>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<a-form-item :wrapper-col="{ span: 10, offset: 3 }">
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
@click="fnCheckInfo()"
|
||||
:loading="state.confirmLoading"
|
||||
>
|
||||
进行连接
|
||||
</a-button>
|
||||
<a-button
|
||||
type="default"
|
||||
@click="fnStepNext()"
|
||||
:disabled="!state.stepNext"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
type="dashed"
|
||||
@click="fnHostAuthorized()"
|
||||
:loading="state.confirmLoading"
|
||||
v-if="state.from.authMode !== '2'"
|
||||
>
|
||||
免密授权
|
||||
</a-button>
|
||||
|
||||
<a-button type="link" @click="fnCheckInfoReset()"> 重置 </a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
Reference in New Issue
Block a user