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

fix: 网元信息编辑带主机配置页面

Browse Source
This commit is contained in:
TsMask
2024-03-05 16:18:45 +08:00
parent 104041eea5
commit e5896c8513
2 changed files with 109 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
src/views/ne/neInfo/components/EditModal.vue
View File

@@ -93,8 +93,8 @@ let modalState: ModalStateType = reactive({
{
hostId: undefined,
hostType: 'ssh',
groupId: '0',
title: '',
groupId: '1',
title: 'SSH_NE_22',
addr: '',
port: 22,
user: 'user',
@@ -107,11 +107,12 @@ let modalState: ModalStateType = reactive({
{
hostId: undefined,
hostType: 'telnet',
groupId: '0',
title: '',
groupId: '1',
title: 'Telnet_NE_4100',
addr: '',
port: 4100,
user: 'user',
authMode: '0',
password: 'user',
remark: '',
},
@@ -234,10 +235,48 @@ function fnModalCancel() {
emit('cancel');
}
/**
* 表单修改网元类型
*/
function fnNeTypeChange(v: any) {
const hostsLen = modalState.from.hosts.length;
// 网元默认只含22和4100
if (hostsLen === 3 && v !== 'UPF') {
modalState.from.hosts.pop();
}
// UPF标准版本可支持5002
if (hostsLen === 2 && v === 'UPF') {
modalState.from.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) {
const v = e.target.value;
if (v.length < 7) return;
for (const host of modalState.from.hosts) {
host.addr = v;
}
}
/**监听是否显示，初始数据 */
watch(
() => props.visible,
val => {
console.log(val);
if (val) fnModalVisibleByEdit(props.editId);
}
);
@@ -289,6 +328,7 @@ onMounted(() => {
<a-auto-complete
v-model:value="modalState.from.neType"
:options="NE_TYPE_LIST.map(v => ({ value: v }))"
@change="fnNeTypeChange"
>
<a-input
allow-clear
@@ -369,8 +409,19 @@ onMounted(() => {
v-model:value="modalState.from.ip"
allow-clear
:maxlength="128"
@change=""
></a-input>
@change="fnNeIPChange"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
<div>
支持IPV4/IPV6,修改改属性会同步变更下方配置的客户端连接地址
</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">
@@ -412,6 +463,14 @@ onMounted(() => {
:maxlength="40"
:placeholder="t('views.configManage.neManage.uidTip')"
>
<template #prefix>
<a-tooltip placement="topLeft">
<template #title>
<div>用于日志、告警等数据资源定位标识符</div>
</template>
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
</a-tooltip>
</template>
</a-input>
</a-form-item>
@@ -425,14 +484,16 @@ onMounted(() => {
v-model:value="modalState.from.neAddress"
allow-clear
:maxlength="64"
><template #prefix>
>
<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-tooltip>
</template>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
@@ -476,7 +537,7 @@ onMounted(() => {
<!-- 主机连接配置 -->
<a-collapse class="collapse" ghost>
<a-collapse-panel key="ssh" header="配置SSH">
<a-collapse-panel key="host" header="配置主机">
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
@@ -504,51 +565,23 @@ onMounted(() => {
</a-row>
</a-collapse-panel>
<a-collapse-panel
:key="`${host.hostType}_${host.title}`"
:header="host.hostType.toUpperCase()"
:key="host.title"
v-for="host in modalState.from.hosts"
>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
:label="t('views.ne.neHost.hostType')"
name="hostType"
<template #header>
<div class="collapse-header">
<div>{{ `${host.hostType.toUpperCase()} ${host.port}` }}</div>
<a-button
size="small"
type="primary"
shape="round"
@click.prevent="fnModalTest"
:loading="modalState.confirmLoading"
>
<a-select
v-model:value="host.hostType"
default-value="ssh"
:options="dict.neHostType"
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.ne.neHost.groupId')" name="groupId">
<a-select
v-model:value="modalState.from.groupId"
default-value="0"
:options="dict.neHostGroupId"
>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item
:label="t('views.ne.neHost.title')"
name="title"
v-bind="modalStateFrom.validateInfos.title"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-input
v-model:value="modalState.from.title"
allow-clear
:maxlength="50"
>
</a-input>
</a-form-item>
<template #icon><LinkOutlined /></template>
</a-button>
</div>
</template>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
@@ -556,18 +589,14 @@ onMounted(() => {
name="addr"
v-bind="modalStateFrom.validateInfos.addr"
>
<a-input
v-model:value="modalState.from.addr"
allow-clear
:maxlength="50"
>
<a-input v-model:value="host.addr" allow-clear :maxlength="50">
</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="modalState.from.port"
v-model:value="host.port"
:min="10"
:max="65535"
:step="1"
@@ -584,8 +613,7 @@ onMounted(() => {
name="user"
v-bind="modalStateFrom.validateInfos.user"
>
<a-input v-model:value="modalState.from.user" allow-clear>
</a-input>
<a-input v-model:value="host.user" allow-clear> </a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
@@ -594,9 +622,10 @@ onMounted(() => {
name="authMode"
>
<a-select
v-model:value="modalState.from.authMode"
v-model:value="host.authMode"
default-value="0"
:options="dict.neHostAuthMode"
:disabled="host.hostType === 'telnet'"
>
</a-select>
</a-form-item>
@@ -604,21 +633,17 @@ onMounted(() => {
</a-row>
<a-form-item
v-if="modalState.from.authMode === '0'"
v-if="host.authMode === '0'"
:label="t('views.ne.neHost.password')"
name="password"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-input
v-model:value="modalState.from.password"
allow-clear
:maxlength="256"
>
</a-input>
<a-input-password v-model:value="host.password" :maxlength="128">
</a-input-password>
</a-form-item>
<template v-if="modalState.from.authMode === '1'">
<template v-if="host.authMode === '1'">
<a-form-item
:label="t('views.ne.neHost.privateKey')"
name="privateKey"
@@ -626,7 +651,7 @@ onMounted(() => {
:label-wrap="true"
>
<a-textarea
v-model:value="modalState.from.privateKey"
v-model:value="host.privateKey"
:auto-size="{ minRows: 4, maxRows: 6 }"
:maxlength="3000"
:show-count="true"
@@ -639,8 +664,11 @@ onMounted(() => {
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-input v-model:value="modalState.from.passPhrase" allow-clear>
</a-input>
<a-input-password
v-model:value="host.passPhrase"
:maxlength="128"
>
</a-input-password>
</a-form-item>
</template>
@@ -651,8 +679,8 @@ onMounted(() => {
:label-wrap="true"
>
<a-textarea
v-model:value="modalState.from.remark"
:auto-size="{ minRows: 4, maxRows: 6 }"
v-model:value="host.remark"
:auto-size="{ minRows: 1, maxRows: 6 }"
:maxlength="450"
:show-count="true"
/>
@@ -684,4 +712,10 @@ onMounted(() => {
padding-left: 0;
padding-right: 0;
}
.collapse-header {
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
}
</style>

2
src/views/ne/neInfo/index.vue
View File

@@ -185,7 +185,7 @@ function fnModalVisibleByEdit(row?: Record<string, any>) {
} else {
modalState.editId = row.id;
}
modalState.visibleByEdit = true;
modalState.visibleByEdit = !modalState.visibleByEdit;
}
/**