feat: 开站网元信息页面逻辑对接
This commit is contained in:
TsMask
@@ -1,71 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { stepState, fnToStepName } from '../hooks/useStep';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { Modal, message } from 'ant-design-vue/lib';
|
||||
import { onMounted, reactive, toRaw } from 'vue';
|
||||
import {
|
||||
addNeInfo,
|
||||
delNeInfo,
|
||||
listAllNeInfo,
|
||||
updateNeInfo,
|
||||
} from '@/api/ne/neInfo';
|
||||
import { neHostAuthorizedRSA, testNeHost } from '@/api/ne/neHost';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { NE_TYPE_LIST } from '@/constants/ne-constants';
|
||||
import { fnToStepName } from '../hooks/useStep';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { listAllNeInfo } from '@/api/ne/neInfo';
|
||||
import useDictStore from '@/store/modules/dict';
|
||||
const { getDict } = useDictStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
/**字典数据 */
|
||||
let dict: {
|
||||
/**主机类型 */
|
||||
neHostType: DictType[];
|
||||
/**分组 */
|
||||
neHostGroupId: DictType[];
|
||||
/**认证模式 */
|
||||
neHostAuthMode: DictType[];
|
||||
} = reactive({
|
||||
neHostType: [],
|
||||
neHostGroupId: [],
|
||||
neHostAuthMode: [],
|
||||
});
|
||||
|
||||
/**标签对象信息状态类型 */
|
||||
type TabStateType = {
|
||||
/**激活选中 */
|
||||
activeKey: string;
|
||||
/**页签数据 */
|
||||
panes: Record<string, any>[];
|
||||
/**等待loading */
|
||||
confirmLoading: boolean;
|
||||
};
|
||||
|
||||
/**标签对象信息状态 */
|
||||
const tabState: TabStateType = reactive({
|
||||
activeKey: 'neType@neId',
|
||||
panes: [
|
||||
{
|
||||
key: 'neType@neId',
|
||||
data: {
|
||||
id: undefined,
|
||||
neId: '001',
|
||||
neType: 'AMF',
|
||||
neName: '',
|
||||
ip: '',
|
||||
port: 33030,
|
||||
pvFlag: 'PNF',
|
||||
rmUid: '4400HX1AMF001',
|
||||
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: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
status: false,
|
||||
},
|
||||
],
|
||||
panes: [],
|
||||
confirmLoading: false,
|
||||
});
|
||||
|
||||
/**
|
||||
@@ -79,20 +58,21 @@ function fnTabClose(key: string) {
|
||||
const item = tabState.panes[tabIndex];
|
||||
Modal.confirm({
|
||||
title: t('common.tipTitle'),
|
||||
content: t('views.tool.terminal.closeTip', {
|
||||
num: `${item.data.neType}@${item.data.neId}`,
|
||||
}),
|
||||
content: `确认要删除${item.data.neType}@${item.data.neId}网元信息？`,
|
||||
onOk() {
|
||||
tabState.panes.splice(tabIndex, 1);
|
||||
// 激活前一项标签
|
||||
tabState.activeKey = tabState.panes[tabIndex - 1].id;
|
||||
delNeInfo(item.data.id).finally(() => {
|
||||
tabState.panes.splice(tabIndex, 1);
|
||||
// 激活前一项标签
|
||||
const idx = tabIndex === 0 ? 0 : tabIndex - 1;
|
||||
tabState.activeKey = tabState.panes[idx].id;
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**新建网元信息 */
|
||||
function fnCreateNe() {
|
||||
const neType = 'AMF';
|
||||
function fnTabCreate() {
|
||||
const neType = 'NE';
|
||||
const neId = '001' + new Date().getMilliseconds();
|
||||
tabState.panes.push({
|
||||
key: `${neType}@${neId}`,
|
||||
@@ -119,7 +99,7 @@ function fnCreateNe() {
|
||||
addr: '',
|
||||
port: 22,
|
||||
user: 'user',
|
||||
authMode: '0',
|
||||
authMode: '2',
|
||||
password: 'user',
|
||||
privateKey: '',
|
||||
passPhrase: '',
|
||||
@@ -141,23 +121,219 @@ function fnCreateNe() {
|
||||
},
|
||||
status: false,
|
||||
});
|
||||
tabState.activeKey = `${neType}@${neId}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出测试连接
|
||||
*/
|
||||
function fnModalTest(row: Record<string, any>) {
|
||||
if (tabState.confirmLoading || !row.addr) return;
|
||||
tabState.confirmLoading = true;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
testNeHost(row)
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: `${row.addr}:${row.port} ${t('views.ne.neHost.testOk')}`,
|
||||
duration: 2,
|
||||
});
|
||||
} else {
|
||||
message.error({
|
||||
content: `${row.addr}:${row.port} ${res.msg}`,
|
||||
duration: 2,
|
||||
});
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
hide();
|
||||
tabState.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**SSH连接-免密直连 */
|
||||
function fnSSHLink(row: Record<string, any>) {
|
||||
if (tabState.confirmLoading) return;
|
||||
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '是否要配置免密直连？',
|
||||
onOk: () => {
|
||||
tabState.confirmLoading = true;
|
||||
neHostAuthorizedRSA(row).then(res => {
|
||||
tabState.confirmLoading = false;
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: `操作成功`,
|
||||
duration: 2,
|
||||
});
|
||||
} else {
|
||||
message.error({
|
||||
content: `操作失败`,
|
||||
duration: 2,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单修改网元类型
|
||||
*/
|
||||
function fnNeTypeChange(v: any, data: any) {
|
||||
const hostsLen = data.hosts.length;
|
||||
// 网元默认只含22和4100
|
||||
if (hostsLen === 3 && v !== 'UPF') {
|
||||
data.hosts.pop();
|
||||
}
|
||||
// UPF标准版本可支持5002
|
||||
if (hostsLen === 2 && v === 'UPF') {
|
||||
data.hosts.push({
|
||||
hostId: undefined,
|
||||
hostType: 'telnet',
|
||||
groupId: '1',
|
||||
title: 'Telnet_NE_5002',
|
||||
addr: '',
|
||||
port: 5002,
|
||||
user: 'user',
|
||||
authMode: '0',
|
||||
password: 'user',
|
||||
remark: '',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单修改网元IP
|
||||
*/
|
||||
function fnNeIPChange(e: any, data: any) {
|
||||
const v = e.target.value;
|
||||
if (v.length < 7) return;
|
||||
for (const host of data.hosts) {
|
||||
host.addr = v;
|
||||
}
|
||||
}
|
||||
|
||||
/**保存信息 */
|
||||
function fnSaveFinish(pane: any) {
|
||||
console.log('Success:', pane);
|
||||
tabState.confirmLoading = true;
|
||||
const from = toRaw(pane);
|
||||
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) {
|
||||
if (res.data) {
|
||||
pane.id = res.data;
|
||||
}
|
||||
tabState.panes.findIndex;
|
||||
|
||||
const tabItem = tabState.panes.find(
|
||||
tab => tab.key === tabState.activeKey
|
||||
);
|
||||
if (tabItem) {
|
||||
tabItem.status = true;
|
||||
}
|
||||
message.success({
|
||||
content: '操作成功',
|
||||
duration: 3,
|
||||
});
|
||||
} else {
|
||||
const tabItem = tabState.panes.find(
|
||||
tab => tab.key === tabState.activeKey
|
||||
);
|
||||
if (tabItem) {
|
||||
tabItem.status = false;
|
||||
}
|
||||
message.error({
|
||||
content: `${res.msg}`,
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
hide();
|
||||
tabState.confirmLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**保存信息有错误的情况 */
|
||||
function fnSaveFinishFailed(e: any) {
|
||||
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
|
||||
}
|
||||
|
||||
/**返回上一步 */
|
||||
function fnStepPrev() {
|
||||
Modal.confirm({
|
||||
title: t('common.tipTitle'),
|
||||
content: '确认要放弃当前变更返回上一步吗？',
|
||||
onOk() {
|
||||
fnToStepName('ConfigSystem');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**下一步操作 */
|
||||
function fnStepNext(stepName: 'ConfigNeInfoPara5G') {
|
||||
if (stepName === 'ConfigNeInfoPara5G') {
|
||||
Modal.confirm({
|
||||
title: t('common.tipTitle'),
|
||||
content: '确认要下一步进行各网元公共参数的设置？',
|
||||
onOk() {
|
||||
fnToStepName('ConfigNeInfoPara5G');
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function fnInit() {
|
||||
listAllNeInfo({
|
||||
bandHost: true,
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
for (const item of res.data) {
|
||||
tabState.panes.push({
|
||||
key: `${item.neType}@${item.neId}`,
|
||||
data: item,
|
||||
status: false,
|
||||
});
|
||||
}
|
||||
// 选择首个
|
||||
if (tabState.panes.length > 0) {
|
||||
tabState.activeKey = tabState.panes[0].key;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// listAllNeInfo({
|
||||
// bandHost: true,
|
||||
// }).then(res => {
|
||||
// console.log(res);
|
||||
// });
|
||||
// 初始字典数据
|
||||
Promise.allSettled([
|
||||
getDict('ne_host_type'),
|
||||
getDict('ne_host_groupId'),
|
||||
getDict('ne_host_authMode'),
|
||||
]).then(resArr => {
|
||||
if (resArr[0].status === 'fulfilled') {
|
||||
dict.neHostType = resArr[0].value;
|
||||
}
|
||||
if (resArr[1].status === 'fulfilled') {
|
||||
dict.neHostGroupId = resArr[1].value;
|
||||
}
|
||||
if (resArr[2].status === 'fulfilled') {
|
||||
dict.neHostAuthMode = resArr[2].value;
|
||||
}
|
||||
});
|
||||
fnInit();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>配置网元信息</div>
|
||||
<div :style="{ marginBottom: '16px' }">
|
||||
<a-button @click="">ADD</a-button>
|
||||
</div>
|
||||
<h2>配置网元信息</h2>
|
||||
|
||||
<a-tabs
|
||||
class="neinfo-tabs"
|
||||
hide-add
|
||||
@@ -168,6 +344,17 @@ onMounted(() => {
|
||||
v-model:activeKey="tabState.activeKey"
|
||||
@edit="(key:any) => fnTabClose(key as string)"
|
||||
>
|
||||
<template #rightExtra>
|
||||
<a-space :size="8" align="center">
|
||||
<a-tooltip placement="topRight">
|
||||
<template #title> 新增网元 </template>
|
||||
<a-button type="default" shape="circle" @click="fnTabCreate()">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<a-tab-pane
|
||||
v-for="pane in tabState.panes"
|
||||
:key="pane.key"
|
||||
@@ -175,33 +362,452 @@ onMounted(() => {
|
||||
>
|
||||
<template #tab>
|
||||
<a-badge
|
||||
:status="pane.status ? 'success' : 'error'"
|
||||
:status="pane.status ? 'success' : 'default'"
|
||||
:text="`${pane.data.neType}@${pane.data.neId}`"
|
||||
/>
|
||||
</template>
|
||||
|
||||
{{ pane.data }}
|
||||
</a-tab-pane>
|
||||
<!-- {{ pane.data }} -->
|
||||
<a-form
|
||||
:name="pane.key"
|
||||
layout="horizontal"
|
||||
:model="pane.data"
|
||||
:label-col="{ span: 6 }"
|
||||
:labelWrap="true"
|
||||
autocomplete="off"
|
||||
@finish="fnSaveFinish(pane.data)"
|
||||
@finishFailed="fnSaveFinishFailed"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.configManage.neManage.neType')"
|
||||
name="neType"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请输入网元类型',
|
||||
}"
|
||||
>
|
||||
<a-auto-complete
|
||||
v-model:value="pane.data.neType"
|
||||
:options="NE_TYPE_LIST.map(v => ({ value: v }))"
|
||||
@change="v => fnNeTypeChange(v, pane.data)"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<a-select v-model:value="pane.data.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>
|
||||
|
||||
<template #rightExtra>
|
||||
<a-space :size="8" align="center">
|
||||
<a-tooltip placement="topRight">
|
||||
<template #title> new Nf </template>
|
||||
<a-button type="default" shape="circle" @click="fnCreateNe()">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.configManage.neManage.neId')"
|
||||
name="neId"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请输入网元标识',
|
||||
}"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="pane.data.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"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请输入网元名称',
|
||||
}"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="pane.data.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"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请输入网元IP地址',
|
||||
}"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="pane.data.ip"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="128"
|
||||
@change="e => fnNeIPChange(e, pane.data)"
|
||||
>
|
||||
<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"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请输入网元端口',
|
||||
}"
|
||||
>
|
||||
<a-input-number
|
||||
v-model:value="pane.data.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"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请输入资源唯一标识',
|
||||
}"
|
||||
:label-col="{ span: 3 }"
|
||||
:labelWrap="true"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="pane.data.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="pane.data.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="pane.data.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="pane.data.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="pane.data.province"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="32"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-divider orientation="left">
|
||||
{{ t('views.ne.neInfo.hostConfig') }}
|
||||
</a-divider>
|
||||
|
||||
<!-- 主机连接配置 -->
|
||||
<a-collapse class="collapse" ghost>
|
||||
<a-collapse-panel
|
||||
v-for="host in pane.data.hosts"
|
||||
:key="host.title"
|
||||
:header="`${host.hostType.toUpperCase()} ${host.port}`"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item :label="t('views.ne.neHost.addr')">
|
||||
<a-input
|
||||
v-model:value="host.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">
|
||||
<a-input-number
|
||||
v-model:value="host.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')">
|
||||
<a-input
|
||||
v-model:value="host.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="host.authMode"
|
||||
default-value="0"
|
||||
:options="dict.neHostAuthMode"
|
||||
:disabled="host.hostType === 'telnet'"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item
|
||||
v-if="host.authMode === '0'"
|
||||
:label="t('views.ne.neHost.password')"
|
||||
:label-col="{ span: 3 }"
|
||||
:label-wrap="true"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="host.password"
|
||||
:maxlength="128"
|
||||
:placeholder="t('common.inputPlease')"
|
||||
>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<template v-if="host.authMode === '1'">
|
||||
<a-form-item
|
||||
:label="t('views.ne.neHost.privateKey')"
|
||||
:label-col="{ span: 3 }"
|
||||
:label-wrap="true"
|
||||
>
|
||||
<a-textarea
|
||||
v-model:value="host.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="host.passPhrase"
|
||||
:maxlength="128"
|
||||
:placeholder="t('common.inputPlease')"
|
||||
>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<a-form-item
|
||||
:label="t('views.ne.neHost.remark')"
|
||||
:label-col="{ span: 3 }"
|
||||
:label-wrap="true"
|
||||
>
|
||||
<a-textarea
|
||||
v-model:value="host.remark"
|
||||
:auto-size="{ minRows: 1, maxRows: 6 }"
|
||||
:maxlength="450"
|
||||
:show-count="true"
|
||||
:placeholder="t('common.inputPlease')"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:label="t('views.ne.neHost.test')"
|
||||
name="test"
|
||||
:label-col="{ span: 3 }"
|
||||
:label-wrap="true"
|
||||
>
|
||||
<a-button
|
||||
type="primary"
|
||||
shape="round"
|
||||
@click="fnModalTest(host)"
|
||||
:loading="tabState.confirmLoading"
|
||||
>
|
||||
<template #icon><LinkOutlined /></template>
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
type="link"
|
||||
@click="fnSSHLink(host)"
|
||||
:loading="tabState.confirmLoading"
|
||||
v-if="host.hostType === 'ssh' && host.authMode !== '2'"
|
||||
>
|
||||
<template #icon><LinkOutlined /></template>
|
||||
免密授权
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
|
||||
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
:loading="tabState.confirmLoading"
|
||||
>
|
||||
保存信息
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<a-button style="margin-left: 8px" @click="fnToStepName('ConfigSystem')">
|
||||
上一步
|
||||
</a-button>
|
||||
<a-button type="primary" @click="fnToStepName('ConfigNeInfoPara5G')">
|
||||
下一步
|
||||
</a-button>
|
||||
<div>
|
||||
<a-space direction="horizontal" :size="18">
|
||||
<a-button @click="fnStepPrev()"> 上一步 </a-button>
|
||||
|
||||
<a-button type="dashed" @click="fnStepNext('ConfigNeInfoPara5G')">
|
||||
下一步
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
.neinfo-tabs :deep(.ant-tabs-tabpane) {
|
||||
height: 72vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user