perf: 重构网元公共文件编辑参数

This commit is contained in:
TsMask
2024-04-29 18:16:39 +08:00
parent 7bf2672981
commit dd5604c8b7
2 changed files with 824 additions and 409 deletions

View File

@@ -4,7 +4,7 @@ import { PageContainer } from 'antdv-pro-layout';
import { message } from 'ant-design-vue/lib'; import { message } from 'ant-design-vue/lib';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { getPara5GFilee, savePara5GFile } from '@/api/ne/neInfo'; import { getPara5GFilee, listNeInfo, savePara5GFile } from '@/api/ne/neInfo';
import useNeInfoStore from '@/store/modules/neinfo'; import useNeInfoStore from '@/store/modules/neinfo';
const { t } = useI18n(); const { t } = useI18n();
@@ -32,29 +32,50 @@ let state: StateType = reactive({
syncNe: [], syncNe: [],
syncMsg: '', syncMsg: '',
from: { from: {
basic: { SIPIP: '192.168.5.90',
dnn_data: 'internet', N2IP: '192.168.5.90',
dnn_ims: 'ims',
oamEnable: true, OMCIP: '172.60.5.100',
plmnId: { AMFIP: '172.60.5.120',
mcc: '001', AUSFIP: '172.60.5.130',
mnc: '01', UDMIP: '172.60.5.140',
}, SMFIP: '172.60.5.150',
snmpEnable: false, PCFIP: '172.60.5.160',
snssai: { NSSFIP: '172.60.5.170',
sd: '000001', NRFIP: '172.60.5.180',
sst: '1', UPFIP: '172.60.5.190',
}, ADBIP: '172.60.5.140',
tac: 4388, IMSIP: '172.60.5.110',
},
external: { S1_MMEIP: '192.168.5.90',
amfn2_ip: '192.168.8.120', S20_MMEIP: '172.60.5.220',
ue_pool: '10.2.1.0/24', S21_MMEIP: '172.60.5.221',
upfn3_gw: '192.168.1.1',
upfn3_ip: '192.168.8.190/24', LTETAC: '88',
upfn6_gw: '192.168.1.1', MCC: '460',
upfn6_ip: '192.168.8.191/24', MNC: '00',
}, SST: '1',
SD: '010204',
DNN: 'cmnet',
NRTAC: '88',
KPI_TIMER: '60', // KPI上报周期秒
UPFType: 'Light', // UPF类型 Standard标准版 Light轻量版
UEIP: '10.10.40.0',
UEIPMask: '255.255.255.0',
N3IP: '192.168.5.191',
N3Mask: '255.255.240.0',
N3GW: '192.168.1.1',
N3PCI: '0000:13:00.0',
N3MAC: '00:0c:29:10:ac:d7',
N6IP: '192.168.5.191',
N6Mask: '255.255.240.0',
N6GW: '192.168.1.1',
N6PCI: '0000:1b:00.0',
N6MAC: '00:0c:29:10:ac:e1',
}, },
confirmLoading: false, confirmLoading: false,
}); });
@@ -84,6 +105,7 @@ function fnModalCancel() {
state.visible = false; state.visible = false;
state.sync = false; state.sync = false;
state.syncNe = []; state.syncNe = [];
state.syncMsg = '';
} }
/**保存文件数据*/ /**保存文件数据*/
@@ -93,17 +115,58 @@ function fnSaveData() {
/**获取文件数据*/ /**获取文件数据*/
function fnGetData() { function fnGetData() {
if (state.confirmLoading) return;
state.confirmLoading = true; state.confirmLoading = true;
getPara5GFilee() Promise.all([
.then(res => { getPara5GFilee(),
if (typeof res.data === 'object') { listNeInfo({
Object.assign(state.from, res.data); pageNum: 1,
pageSize: 20,
}),
]).then(resArr => {
// 已保存的配置
if (resArr[0].code === RESULT_CODE_SUCCESS) {
state.from = resArr[0].data;
}
// 填充固定网元类型的ip
if (
resArr[1].code === RESULT_CODE_SUCCESS &&
Array.isArray(resArr[1].rows)
) {
for (const item of resArr[1].rows) {
switch (item.neType) {
case 'AMF':
state.from.AMFIP = item.ip;
break;
case 'AUSF':
state.from.AUSFIP = item.ip;
break;
case 'UDM':
state.from.UDMIP = item.ip;
state.from.ADBIP = item.ip;
break;
case 'SMF':
state.from.SMFIP = item.ip;
break;
case 'PCF':
state.from.PCFIP = item.ip;
break;
case 'NSSF':
state.from.NSSFIP = item.ip;
break;
case 'NRF':
state.from.NRFIP = item.ip;
break;
case 'UPF':
state.from.UPFIP = item.ip;
break;
case 'IMS':
state.from.IMSIP = item.ip;
break;
}
} }
}) }
.finally(() => { state.confirmLoading = false;
state.confirmLoading = false; });
});
} }
onMounted(() => { onMounted(() => {
@@ -165,114 +228,111 @@ onMounted(() => {
:label-col="{ span: 6 }" :label-col="{ span: 6 }"
:label-wrap="true" :label-wrap="true"
> >
<a-divider orientation="left">Basic Data </a-divider> <a-divider orientation="left">Basic</a-divider>
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :lg="24" :md="24" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item label="N2IP" name="N2IP">
<a-input
v-model:value="state.from.N2IP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="SIPIP" name="SIPIP">
<a-input
v-model:value="state.from.SIPIP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="NRTAC" name="NRTAC">
<a-input
v-model:value="state.from.NRTAC"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="DNN" name="DNN">
<a-input
v-model:value="state.from.DNN"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="6" :xs="24">
<a-form-item <a-form-item
label="oamEnable" label="MCC"
name="oamEnable" name="MCC"
:label-col="{ span: 3 }" :label-col="{ span: 13 }"
:label-wrap="true" :label-wrap="true"
> >
<a-switch <a-input
:checked-children="t('common.switch.open')" v-model:value="state.from.MCC"
:un-checked-children="t('common.switch.shut')" placeholder="1-65535"
v-model:checked="state.from.basic.oamEnable" ></a-input>
></a-switch>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="24" :md="24" :xs="24"> <a-col :lg="6" :md="6" :xs="24">
<a-form-item label="MNC" name="MNC">
<a-input
v-model:value="state.from.MNC"
placeholder="1-65535"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="6" :xs="24">
<a-form-item <a-form-item
label="snmpEnable" label="SST"
name="snmpEnable" name="SST"
:label-col="{ span: 3 }" :label-col="{ span: 13 }"
:label-wrap="true"
>
<a-switch
:checked-children="t('common.switch.open')"
:un-checked-children="t('common.switch.shut')"
v-model:checked="state.from.basic.snmpEnable"
></a-switch>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="dnn_data" name="dnn_data">
<a-input
v-model:value="state.from.basic.dnn_data"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="dnn_ims" name="dnn_ims">
<a-input
v-model:value="state.from.basic.dnn_ims"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="snssai.sd" name="snssai.sd">
<a-input
v-model:value="state.from.basic.snssai.sd"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="snssai.sst" name="snssai.sst">
<a-input
v-model:value="state.from.basic.snssai.sst"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="plmnId.mcc" name="plmnId.mcc">
<a-input
v-model:value="state.from.basic.plmnId.mcc"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="plmnId.mnc" name="plmnId.mnc">
<a-input
v-model:value="state.from.basic.plmnId.mnc"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="24" :md="24" :xs="24">
<a-form-item
label="tac"
name="tac"
:label-col="{ span: 3 }"
:label-wrap="true" :label-wrap="true"
> >
<a-input-number <a-input-number
v-model:value="state.from.basic.tac" v-model:value="state.from.SST"
:min="1"
:max="3"
placeholder="1-3"
></a-input-number>
</a-form-item>
</a-col>
<a-col :lg="6" :md="6" :xs="24">
<a-form-item label="SD" name="SD">
<a-input
v-model:value="state.from.SD"
placeholder="1-65535"
></a-input>
</a-form-item>
</a-col>
</a-row>
<a-divider orientation="left">OMC</a-divider>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="OMCIP" name="OMCIP">
<a-input
v-model:value="state.from.OMCIP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="KPI_TIMER" name="KPI_TIMER">
<a-input-number
v-model:value="state.from.KPI_TIMER"
:min="1" :min="1"
:max="65535" :max="65535"
placeholder="1-65535" placeholder="1-65535"
@@ -281,23 +341,38 @@ onMounted(() => {
</a-col> </a-col>
</a-row> </a-row>
<a-divider orientation="left">External Data </a-divider> <a-divider orientation="left">MME</a-divider>
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item label="amfn2_ip" name="amfn2_ip"> <a-form-item label="S1_MMEIP" name="S1_MMEIP">
<a-input <a-input
v-model:value="state.from.external.amfn2_ip" v-model:value="state.from.S1_MMEIP"
allow-clear allow-clear
:placeholder="t('common.inputPlease')" :placeholder="t('common.inputPlease')"
:maxlength="50" :maxlength="50"
> >
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-form-item label="LTETAC" name="LTETAC">
<a-input
v-model:value="state.from.LTETAC"
placeholder="1-65535"
></a-input>
</a-form-item>
</a-col> </a-col>
<a-col :lg="12" :md="12" :xs="24"> <a-col :lg="12" :md="12" :xs="24">
<a-form-item label="ue_pool" name="ue_pool"> <a-form-item label="S20_MMEIP" name="S20_MMEIP">
<a-input <a-input
v-model:value="state.from.external.ue_pool" v-model:value="state.from.S20_MMEIP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="S21_MMEIP" name="S21_MMEIP">
<a-input
v-model:value="state.from.S21_MMEIP"
allow-clear allow-clear
:placeholder="t('common.inputPlease')" :placeholder="t('common.inputPlease')"
:maxlength="50" :maxlength="50"
@@ -305,50 +380,172 @@ onMounted(() => {
</a-input> </a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="12" :md="12" :xs="24"> </a-row>
<a-form-item label="upfn3_gw" name="upfn3_gw">
<a-input <a-divider orientation="left">UPF</a-divider>
v-model:value="state.from.external.upfn3_gw" <a-row :gutter="16">
allow-clear <a-col :lg="24" :md="24" :xs="24">
:placeholder="t('common.inputPlease')" <a-form-item
:maxlength="50" label="UPFType"
name="UPFType"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-select
v-model:value="state.from.UPFType"
:placeholder="t('common.selectPlease')"
> >
</a-input> <a-select-option value="Standard" key="Standard">
</a-form-item> Standard
</a-col> </a-select-option>
<a-col :lg="12" :md="12" :xs="24"> <a-select-option value="Light" key="Light">
<a-form-item label="upfn3_ip" name="upfn3_ip"> Light
<a-input </a-select-option>
v-model:value="state.from.external.upfn3_ip" </a-select>
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="upfn6_gw" name="upfn6_gw">
<a-input
v-model:value="state.from.external.upfn6_gw"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="upfn6_ip" name="upfn6_ip">
<a-input
v-model:value="state.from.external.upfn6_ip"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<!-- UPF轻量 -->
<template v-if="state.from.UPFType === 'Light'">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="N3IP" name="N3IP">
<a-input
v-model:value="state.from.N3IP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3Mask" name="N3Mask">
<a-input
v-model:value="state.from.N3Mask"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="UEIP" name="UEIP">
<a-input
v-model:value="state.from.UEIP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="UEIPMask" name="UEIPMask">
<a-input
v-model:value="state.from.UEIPMask"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
</template>
<!-- UPF标准 -->
<template v-if="state.from.UPFType === 'Standard'">
<!-- N3 -->
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="N3IP" name="N3IP">
<a-input
v-model:value="state.from.N3IP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3Mask" name="N3Mask">
<a-input
v-model:value="state.from.N3Mask"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3GW" name="N3GW">
<a-input
v-model:value="state.from.N3GW"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3PCI" name="N3PCI">
<a-input
v-model:value="state.from.N3PCI"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3MAC" name="N3MAC">
<a-input
v-model:value="state.from.N3MAC"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<!-- N6 -->
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="N6IP" name="N6IP">
<a-input
v-model:value="state.from.N6IP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N6Mask" name="N6Mask">
<a-input
v-model:value="state.from.N6Mask"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N6GW" name="N6GW">
<a-input
v-model:value="state.from.N6GW"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N6PCI" name="N6PCI">
<a-input
v-model:value="state.from.N6PCI"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N6MAC" name="N6MAC">
<a-input
v-model:value="state.from.N6MAC"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
</template>
</a-row> </a-row>
</a-form> </a-form>
</a-card> </a-card>

View File

@@ -3,19 +3,16 @@ import { Modal, message } from 'ant-design-vue/lib';
import { onMounted, reactive, toRaw } from 'vue'; import { onMounted, reactive, toRaw } from 'vue';
import { fnToStepName } from '../hooks/useStep'; import { fnToStepName } from '../hooks/useStep';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { savePara5GFile } from '@/api/ne/neInfo'; import { listNeInfo, getPara5GFilee, savePara5GFile } from '@/api/ne/neInfo';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
const { t } = useI18n(); const { t } = useI18n();
/**对象信息信息状态类型 */ /**对象信息信息状态类型 */
type StateType = { type StateType = {
/**保存选择同步到网元窗 */ /**加载等待 */
visible: boolean; loading: boolean;
/**网元选择 */ /**保存文件标记 */
neSelectOtions: any[]; saveFile: boolean;
/**同步到网元 */
sync: boolean;
syncNe: string[];
syncMsg: string;
/**表单数据 */ /**表单数据 */
from: Record<string, any>; from: Record<string, any>;
/**确定按钮 loading */ /**确定按钮 loading */
@@ -24,35 +21,53 @@ type StateType = {
/**对象信息状态 */ /**对象信息状态 */
let state: StateType = reactive({ let state: StateType = reactive({
visible: false, loading: false,
neSelectOtions: [], saveFile: false,
sync: false,
syncNe: [],
syncMsg: '',
from: { from: {
basic: { SIPIP: '192.168.5.90',
dnn_data: 'internet', N2IP: '192.168.5.90',
dnn_ims: 'ims',
oamEnable: true, OMCIP: '172.60.5.100',
plmnId: { AMFIP: '172.60.5.120',
mcc: '001', AUSFIP: '172.60.5.130',
mnc: '01', UDMIP: '172.60.5.140',
}, SMFIP: '172.60.5.150',
snmpEnable: false, PCFIP: '172.60.5.160',
snssai: { NSSFIP: '172.60.5.170',
sd: '000001', NRFIP: '172.60.5.180',
sst: '1', UPFIP: '172.60.5.190',
}, ADBIP: '172.60.5.140',
tac: 4388, IMSIP: '172.60.5.110',
},
external: { S1_MMEIP: '192.168.5.90',
amfn2_ip: '192.168.8.120', S20_MMEIP: '172.60.5.220',
ue_pool: '10.2.1.0/24', S21_MMEIP: '172.60.5.221',
upfn3_gw: '192.168.1.1',
upfn3_ip: '192.168.8.190/24', LTETAC: '88',
upfn6_gw: '192.168.1.1', MCC: '460',
upfn6_ip: '192.168.8.191/24', MNC: '00',
}, SST: '1',
SD: '010204',
DNN: 'cmnet',
NRTAC: '88',
KPI_TIMER: '60', // KPI上报周期秒
UPFType: 'Light', // UPF类型 Standard标准版 Light轻量版
UEIP: '10.10.40.0',
UEIPMask: '255.255.255.0',
N3IP: '192.168.5.191',
N3Mask: '255.255.240.0',
N3GW: '192.168.1.1',
N3PCI: '0000:13:00.0',
N3MAC: '00:0c:29:10:ac:d7',
N6IP: '192.168.5.191',
N6Mask: '255.255.240.0',
N6GW: '192.168.1.1',
N6PCI: '0000:1b:00.0',
N6MAC: '00:0c:29:10:ac:e1',
}, },
confirmLoading: false, confirmLoading: false,
}); });
@@ -64,13 +79,14 @@ function fnSave() {
savePara5GFile({ savePara5GFile({
fileType: 'yaml', fileType: 'yaml',
content: toRaw(state.from), content: toRaw(state.from),
syncNe: state.sync ? state.syncNe : [], syncNe: [],
}) })
.then(res => { .then(res => {
if (state.sync) { if (res.code === RESULT_CODE_SUCCESS) {
state.syncMsg = res.msg;
} else {
message.success('Save Success'); message.success('Save Success');
state.saveFile = true;
} else {
message.warning(res.nsg);
} }
}) })
.finally(() => { .finally(() => {
@@ -78,6 +94,62 @@ function fnSave() {
}); });
} }
/**获取网元列表填充IP */
function fnGetList() {
state.loading = true;
Promise.all([
getPara5GFilee(),
listNeInfo({
pageNum: 1,
pageSize: 20,
}),
]).then(resArr => {
// 已保存的配置
if (resArr[0].code === RESULT_CODE_SUCCESS) {
state.from = resArr[0].data;
}
// 填充固定网元类型的ip
if (
resArr[1].code === RESULT_CODE_SUCCESS &&
Array.isArray(resArr[1].rows)
) {
for (const item of resArr[1].rows) {
switch (item.neType) {
case 'AMF':
state.from.AMFIP = item.ip;
break;
case 'AUSF':
state.from.AUSFIP = item.ip;
break;
case 'UDM':
state.from.UDMIP = item.ip;
state.from.ADBIP = item.ip;
break;
case 'SMF':
state.from.SMFIP = item.ip;
break;
case 'PCF':
state.from.PCFIP = item.ip;
break;
case 'NSSF':
state.from.NSSFIP = item.ip;
break;
case 'NRF':
state.from.NRFIP = item.ip;
break;
case 'UPF':
state.from.UPFIP = item.ip;
break;
case 'IMS':
state.from.IMSIP = item.ip;
break;
}
}
}
state.loading = false;
});
}
/**返回上一步 */ /**返回上一步 */
function fnStepPrev() { function fnStepPrev() {
Modal.confirm({ Modal.confirm({
@@ -101,202 +173,342 @@ function fnStepNext(stepName: 'NeInfoSoftwareInstall') {
}); });
} }
} }
onMounted(() => {
fnGetList();
});
</script> </script>
<template> <template>
<div class="ne"> <div class="ne">
<a-form <a-spin tip="Loading..." style="width: 100%" :spinning="state.loading">
name="para5GFileeFrom" <a-form
layout="horizontal" name="para5GFileeFrom"
:label-col="{ span: 6 }" layout="horizontal"
:label-wrap="true" :label-col="{ span: 6 }"
> :label-wrap="true"
<a-divider orientation="left">Basic Data </a-divider> >
<a-row :gutter="16"> <a-divider orientation="left">Basic</a-divider>
<a-col :lg="24" :md="24" :xs="24"> <a-row :gutter="16">
<a-form-item <a-col :lg="12" :md="12" :xs="24">
label="oamEnable" <a-form-item label="N2IP" name="N2IP">
name="oamEnable" <a-input
:label-col="{ span: 3 }" v-model:value="state.from.N2IP"
:label-wrap="true" allow-clear
> :placeholder="t('common.inputPlease')"
<a-switch :maxlength="50"
:checked-children="t('common.switch.open')" >
:un-checked-children="t('common.switch.shut')" </a-input>
v-model:checked="state.from.basic.oamEnable" </a-form-item>
></a-switch> <a-form-item label="SIPIP" name="SIPIP">
</a-form-item> <a-input
</a-col> v-model:value="state.from.SIPIP"
<a-col :lg="24" :md="24" :xs="24"> allow-clear
<a-form-item :placeholder="t('common.inputPlease')"
label="snmpEnable" :maxlength="50"
name="snmpEnable" >
:label-col="{ span: 3 }" </a-input>
:label-wrap="true" </a-form-item>
> </a-col>
<a-switch <a-col :lg="12" :md="12" :xs="24">
:checked-children="t('common.switch.open')" <a-form-item label="NRTAC" name="NRTAC">
:un-checked-children="t('common.switch.shut')" <a-input
v-model:checked="state.from.basic.snmpEnable" v-model:value="state.from.NRTAC"
></a-switch> allow-clear
</a-form-item> :placeholder="t('common.inputPlease')"
</a-col> :maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="DNN" name="DNN">
<a-input
v-model:value="state.from.DNN"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="6" :xs="24">
<a-form-item
label="MCC"
name="MCC"
:label-col="{ span: 13 }"
:label-wrap="true"
>
<a-input
v-model:value="state.from.MCC"
placeholder="1-65535"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="6" :xs="24">
<a-form-item label="MNC" name="MNC">
<a-input
v-model:value="state.from.MNC"
placeholder="1-65535"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="6" :xs="24">
<a-form-item
label="SST"
name="SST"
:label-col="{ span: 13 }"
:label-wrap="true"
>
<a-input-number
v-model:value="state.from.SST"
:min="1"
:max="3"
placeholder="1-3"
></a-input-number>
</a-form-item>
</a-col>
<a-col :lg="6" :md="6" :xs="24">
<a-form-item label="SD" name="SD">
<a-input
v-model:value="state.from.SD"
placeholder="1-65535"
></a-input>
</a-form-item>
</a-col>
</a-row>
<a-col :lg="12" :md="12" :xs="24"> <a-divider orientation="left">OMC</a-divider>
<a-form-item label="dnn_data" name="dnn_data"> <a-row :gutter="16">
<a-input <a-col :lg="12" :md="12" :xs="24">
v-model:value="state.from.basic.dnn_data" <a-form-item label="OMCIP" name="OMCIP">
allow-clear <a-input
:placeholder="t('common.inputPlease')" v-model:value="state.from.OMCIP"
:maxlength="50" allow-clear
> :placeholder="t('common.inputPlease')"
</a-input> :maxlength="50"
</a-form-item> >
</a-col> </a-input>
<a-col :lg="12" :md="12" :xs="24"> </a-form-item>
<a-form-item label="dnn_ims" name="dnn_ims"> </a-col>
<a-input <a-col :lg="12" :md="12" :xs="24">
v-model:value="state.from.basic.dnn_ims" <a-form-item label="KPI_TIMER" name="KPI_TIMER">
allow-clear <a-input-number
:placeholder="t('common.inputPlease')" v-model:value="state.from.KPI_TIMER"
:maxlength="50" :min="1"
> :max="65535"
</a-input> placeholder="1-65535"
</a-form-item> ></a-input-number>
</a-col> </a-form-item>
<a-col :lg="12" :md="12" :xs="24"> </a-col>
<a-form-item label="snssai.sd" name="snssai.sd"> </a-row>
<a-input
v-model:value="state.from.basic.snssai.sd"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="snssai.sst" name="snssai.sst">
<a-input
v-model:value="state.from.basic.snssai.sst"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24"> <a-divider orientation="left">MME</a-divider>
<a-form-item label="plmnId.mcc" name="plmnId.mcc"> <a-row :gutter="16">
<a-input <a-col :lg="12" :md="12" :xs="24">
v-model:value="state.from.basic.plmnId.mcc" <a-form-item label="S1_MMEIP" name="S1_MMEIP">
allow-clear <a-input
:placeholder="t('common.inputPlease')" v-model:value="state.from.S1_MMEIP"
:maxlength="50" allow-clear
> :placeholder="t('common.inputPlease')"
</a-input> :maxlength="50"
</a-form-item> >
</a-col> </a-input>
<a-col :lg="12" :md="12" :xs="24"> </a-form-item>
<a-form-item label="plmnId.mnc" name="plmnId.mnc"> <a-form-item label="LTETAC" name="LTETAC">
<a-input <a-input
v-model:value="state.from.basic.plmnId.mnc" v-model:value="state.from.LTETAC"
allow-clear placeholder="1-65535"
:placeholder="t('common.inputPlease')" ></a-input>
:maxlength="50" </a-form-item>
> </a-col>
</a-input> <a-col :lg="12" :md="12" :xs="24">
</a-form-item> <a-form-item label="S20_MMEIP" name="S20_MMEIP">
</a-col> <a-input
v-model:value="state.from.S20_MMEIP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="S21_MMEIP" name="S21_MMEIP">
<a-input
v-model:value="state.from.S21_MMEIP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-col :lg="24" :md="24" :xs="24"> <a-divider orientation="left">UPF</a-divider>
<a-form-item <a-row :gutter="16">
label="tac" <a-col :lg="24" :md="24" :xs="24">
name="tac" <a-form-item
:label-col="{ span: 3 }" label="UPFType"
:label-wrap="true" name="UPFType"
> :label-col="{ span: 3 }"
<a-input-number :label-wrap="true"
v-model:value="state.from.basic.tac"
:min="1"
:max="65535"
placeholder="1-65535"
></a-input-number>
</a-form-item>
</a-col>
</a-row>
<a-divider orientation="left">External Data </a-divider>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="amfn2_ip" name="amfn2_ip">
<a-input
v-model:value="state.from.external.amfn2_ip"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
> >
</a-input> <a-select
</a-form-item> v-model:value="state.from.UPFType"
</a-col> :placeholder="t('common.selectPlease')"
<a-col :lg="12" :md="12" :xs="24"> >
<a-form-item label="ue_pool" name="ue_pool"> <a-select-option value="Standard" key="Standard">
<a-input Standard
v-model:value="state.from.external.ue_pool" </a-select-option>
allow-clear <a-select-option value="Light" key="Light">
:placeholder="t('common.inputPlease')" Light
:maxlength="50" </a-select-option>
> </a-select>
</a-input> </a-form-item>
</a-form-item> </a-col>
</a-col> <!-- UPF轻量 -->
<a-col :lg="12" :md="12" :xs="24"> <template v-if="state.from.UPFType === 'Light'">
<a-form-item label="upfn3_gw" name="upfn3_gw"> <a-col :lg="12" :md="12" :xs="24">
<a-input <a-form-item label="N3IP" name="N3IP">
v-model:value="state.from.external.upfn3_gw" <a-input
allow-clear v-model:value="state.from.N3IP"
:placeholder="t('common.inputPlease')" allow-clear
:maxlength="50" :placeholder="t('common.inputPlease')"
> :maxlength="50"
</a-input> >
</a-form-item> </a-input>
</a-col> </a-form-item>
<a-col :lg="12" :md="12" :xs="24"> <a-form-item label="N3Mask" name="N3Mask">
<a-form-item label="upfn3_ip" name="upfn3_ip"> <a-input
<a-input v-model:value="state.from.N3Mask"
v-model:value="state.from.external.upfn3_ip" allow-clear
allow-clear :placeholder="t('common.inputPlease')"
:placeholder="t('common.inputPlease')" :maxlength="50"
:maxlength="50" >
> </a-input>
</a-input> </a-form-item>
</a-form-item> </a-col>
</a-col> <a-col :lg="12" :md="12" :xs="24">
<a-col :lg="12" :md="12" :xs="24"> <a-form-item label="UEIP" name="UEIP">
<a-form-item label="upfn6_gw" name="upfn6_gw"> <a-input
<a-input v-model:value="state.from.UEIP"
v-model:value="state.from.external.upfn6_gw" allow-clear
allow-clear :placeholder="t('common.inputPlease')"
:placeholder="t('common.inputPlease')" :maxlength="50"
:maxlength="50" >
> </a-input>
</a-input> </a-form-item>
</a-form-item> <a-form-item label="UEIPMask" name="UEIPMask">
</a-col> <a-input
<a-col :lg="12" :md="12" :xs="24"> v-model:value="state.from.UEIPMask"
<a-form-item label="upfn6_ip" name="upfn6_ip"> allow-clear
<a-input :placeholder="t('common.inputPlease')"
v-model:value="state.from.external.upfn6_ip" :maxlength="50"
allow-clear >
:placeholder="t('common.inputPlease')" </a-input>
:maxlength="50" </a-form-item>
> </a-col>
</a-input> </template>
</a-form-item> <!-- UPF标准 -->
</a-col> <template v-if="state.from.UPFType === 'Standard'">
</a-row> <!-- N3 -->
</a-form> <a-col :lg="12" :md="12" :xs="24">
<a-form-item label="N3IP" name="N3IP">
<a-input
v-model:value="state.from.N3IP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3Mask" name="N3Mask">
<a-input
v-model:value="state.from.N3Mask"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3GW" name="N3GW">
<a-input
v-model:value="state.from.N3GW"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3PCI" name="N3PCI">
<a-input
v-model:value="state.from.N3PCI"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N3MAC" name="N3MAC">
<a-input
v-model:value="state.from.N3MAC"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<!-- N6 -->
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="N6IP" name="N6IP">
<a-input
v-model:value="state.from.N6IP"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N6Mask" name="N6Mask">
<a-input
v-model:value="state.from.N6Mask"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N6GW" name="N6GW">
<a-input
v-model:value="state.from.N6GW"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N6PCI" name="N6PCI">
<a-input
v-model:value="state.from.N6PCI"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
<a-form-item label="N6MAC" name="N6MAC">
<a-input
v-model:value="state.from.N6MAC"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
</template>
</a-row>
</a-form>
</a-spin>
<div class="ne-oper"> <div class="ne-oper">
<a-space direction="horizontal" :size="18"> <a-space direction="horizontal" :size="18">
@@ -308,7 +520,11 @@ function fnStepNext(stepName: 'NeInfoSoftwareInstall') {
> >
保存信息 保存信息
</a-button> </a-button>
<a-button type="dashed" @click="fnStepNext('NeInfoSoftwareInstall')"> <a-button
type="dashed"
@click="fnStepNext('NeInfoSoftwareInstall')"
:disabled="!state.saveFile"
>
下一步 下一步
</a-button> </a-button>
</a-space> </a-space>
@@ -323,8 +539,10 @@ function fnStepNext(stepName: 'NeInfoSoftwareInstall') {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
& > form { & .ant-form {
height: 90%; height: 70vh;
overflow-y: auto;
overflow-x: hidden;
} }
&-oper { &-oper {
padding-top: 24px; padding-top: 24px;