perf: 网元公共参数合并到网元快速安装，移除相关多语言翻译
This commit is contained in:
TsMask
506
src/views/ne/neQuickSetup/components/Para5GForm.vue
Normal file
506
src/views/ne/neQuickSetup/components/Para5GForm.vue
Normal file
@@ -0,0 +1,506 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch } from 'vue';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
const { t } = useI18n();
|
||||
const emit = defineEmits(['update:data']);
|
||||
const props = defineProps({
|
||||
/**表单数据 */
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
/**根据网元显示配置项 */
|
||||
ne: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
amf: false,
|
||||
upf: false,
|
||||
ims: false,
|
||||
mme: false,
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
/**对话框对象信息状态类型 */
|
||||
type StateType = {
|
||||
/**表单数据 */
|
||||
from: Record<string, any>;
|
||||
/**根据网元显示配置项 */
|
||||
hasNE: {
|
||||
amf: boolean;
|
||||
upf: boolean;
|
||||
ims: boolean;
|
||||
mme: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
/**对话框对象信息状态 */
|
||||
let state: StateType = reactive({
|
||||
from: {
|
||||
basic: {
|
||||
plmnId: {
|
||||
mcc: '001',
|
||||
mnc: '01',
|
||||
},
|
||||
tac: '4388',
|
||||
snssai: {
|
||||
sst: '1',
|
||||
sd: '000001',
|
||||
},
|
||||
dnn_data: 'internet',
|
||||
dnn_ims: 'ims',
|
||||
},
|
||||
external: {
|
||||
amfn2_ip: '192.168.8.120',
|
||||
upfn3_ip: '192.168.8.190/24',
|
||||
upfn3_gw: '192.168.1.1',
|
||||
upfn6_ip: '192.168.8.191/24',
|
||||
upfn6_gw: '192.168.1.1',
|
||||
ue_pool: '10.2.1.0/24',
|
||||
// 非指定属性
|
||||
mmes1_ip: '192.168.8.220/20',
|
||||
mmes10_ip: '172.16.5.221/24',
|
||||
mmes11_ip: '172.16.5.220/24',
|
||||
ims_sip_ip: '192.168.8.110',
|
||||
upf_type: 'LightUPF',
|
||||
upfn3_pci: '0000:00:00.0',
|
||||
upfn3_mac: '00:00:00:00:00:00',
|
||||
upfn6_pci: '0000:00:00.0',
|
||||
upfn6_mac: '00:00:00:00:00:00',
|
||||
},
|
||||
sbi: {
|
||||
omc_ip: '172.16.5.100',
|
||||
ims_ip: '172.16.5.110',
|
||||
amf_ip: '172.16.5.120',
|
||||
ausf_ip: '172.16.5.130',
|
||||
udm_ip: '172.16.5.140',
|
||||
db_ip: '0.0.0.0',
|
||||
smf_ip: '172.16.5.150',
|
||||
pcf_ip: '172.16.5.160',
|
||||
nssf_ip: '172.16.5.170',
|
||||
nrf_ip: '172.16.5.180',
|
||||
upf_ip: '172.16.5.190',
|
||||
lmf_ip: '172.16.5.200',
|
||||
nef_ip: '172.16.5.210',
|
||||
mme_ip: '172.16.5.220',
|
||||
n3iwf_ip: '172.16.5.230',
|
||||
},
|
||||
},
|
||||
hasNE: {
|
||||
amf: false,
|
||||
upf: false,
|
||||
ims: false,
|
||||
mme: false,
|
||||
},
|
||||
});
|
||||
|
||||
/**监听数据 */
|
||||
watch(
|
||||
() => props.data,
|
||||
val => {
|
||||
if (val) Object.assign(state.from, val);
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.ne,
|
||||
val => {
|
||||
if (val) Object.assign(state.hasNE, val);
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => state.from,
|
||||
val => {
|
||||
if (val) emit('update:data', val);
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-form
|
||||
name="para5GFileeFrom"
|
||||
layout="horizontal"
|
||||
:label-col="{ span: 8 }"
|
||||
:label-wrap="true"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="16" :md="16" :xs="24">
|
||||
<a-divider orientation="left">Basic</a-divider>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item label="DNN_DATA" name="basic.dnn_data">
|
||||
<a-input
|
||||
v-model:value="state.from.basic.dnn_data"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title> DNN </template>
|
||||
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="MCC" name="basic.plmnId.mcc">
|
||||
<a-input
|
||||
v-model:value="state.from.basic.plmnId.mcc"
|
||||
placeholder="1-65535"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="SST" name="basic.snssai.sst">
|
||||
<a-input-number
|
||||
v-model:value="state.from.basic.snssai.sst"
|
||||
:min="1"
|
||||
:max="3"
|
||||
placeholder="1-3"
|
||||
style="width: 100%"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title> 1-3 </template>
|
||||
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input-number>
|
||||
</a-form-item>
|
||||
<a-form-item label="TAC" name="basic.tac">
|
||||
<a-input
|
||||
v-model:value="state.from.basic.tac"
|
||||
placeholder="1-65535"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item label="DNN_IMS" name="basic.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-form-item label="MNC" name="basic.plmnId.mnc">
|
||||
<a-input
|
||||
v-model:value="state.from.basic.plmnId.mnc"
|
||||
placeholder="1-65535"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="SD" name="basic.snssai.sd">
|
||||
<a-input
|
||||
v-model:value="state.from.basic.snssai.sd"
|
||||
placeholder="1-65535"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
|
||||
<a-col :lg="8" :md="8" :xs="24">
|
||||
<a-divider orientation="left">OMC</a-divider>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="24" :md="24" :xs="24">
|
||||
<a-form-item
|
||||
label="OMC_IP"
|
||||
name="sbi.omc_ip"
|
||||
:required="true"
|
||||
:validate-on-rule-change="false"
|
||||
:validateTrigger="[]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.from.sbi.omc_ip"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title>
|
||||
Network Elemment send data tu EMS IP
|
||||
</template>
|
||||
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<template v-if="state.hasNE.amf">
|
||||
<a-divider orientation="left">AMF</a-divider>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="24" :md="24" :xs="24">
|
||||
<a-form-item label="N2_IP" name="external.amfn2_ip">
|
||||
<a-input
|
||||
v-model:value="state.from.external.amfn2_ip"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title> AMF N2 </template>
|
||||
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-col>
|
||||
|
||||
<a-col :lg="16" :md="16" :xs="24" v-if="state.hasNE.upf">
|
||||
<a-divider orientation="left">UPF</a-divider>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
label="UPF_TYPE"
|
||||
name="external.upf_type"
|
||||
help="Install of Standard or Light"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="state.from.external.upf_type"
|
||||
:placeholder="t('common.selectPlease')"
|
||||
>
|
||||
<a-select-option value="StandardUPF">
|
||||
StandardUPF
|
||||
</a-select-option>
|
||||
<a-select-option value="LightUPF">LightUPF</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item label="UE_POOL" name="external.ue_pool">
|
||||
<a-input
|
||||
v-model:value="state.from.external.ue_pool"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title> UE IP and maxk </template>
|
||||
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</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="N3_IP" name="external.upfn3_ip">
|
||||
<a-input
|
||||
v-model:value="state.from.external.upfn3_ip"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title> netwrok ip </template>
|
||||
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="N3_GW" name="external.upfn3_gw">
|
||||
<a-input
|
||||
v-model:value="state.from.external.upfn3_gw"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title> geteway </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"
|
||||
v-if="state.from.external.upf_type === 'StandardUPF'"
|
||||
>
|
||||
<a-form-item label="N3_PCI" name="external.upfn3_pci">
|
||||
<a-input
|
||||
v-model:value="state.from.external.upfn3_pci"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title>
|
||||
use `ip a` show info, to inet ip
|
||||
</template>
|
||||
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="N3_MAC" name="external.upfn3_mac">
|
||||
<a-input
|
||||
v-model:value="state.from.external.upfn3_mac"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title>
|
||||
use `ip a` show info, to inet ip
|
||||
</template>
|
||||
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<template v-if="state.from.external.upf_type === 'StandardUPF'">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-form-item label="N6_IP" name="external.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 label="N6_GW" name="external.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="N6_PCI" name="external.upfn6_pci">
|
||||
<a-input
|
||||
v-model:value="state.from.external.upfn6_pci"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="N6_MAC" name="external.upfn6_mac">
|
||||
<a-input
|
||||
v-model:value="state.from.external.upfn6_mac"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-col>
|
||||
|
||||
<a-col :lg="8" :md="8" :xs="24">
|
||||
<template v-if="state.hasNE.ims">
|
||||
<a-divider orientation="left">IMS</a-divider>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="24" :md="24" :xs="24">
|
||||
<a-form-item label="SIP_IP" name="external.ims_sip_ip">
|
||||
<a-input
|
||||
v-model:value="state.from.external.ims_sip_ip"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title> IMS SIP </template>
|
||||
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<template v-if="state.hasNE.mme">
|
||||
<a-divider orientation="left">MME</a-divider>
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="24" :md="24" :xs="24">
|
||||
<a-form-item label="S1_IP" name="external.mmes1_ip">
|
||||
<a-input
|
||||
v-model:value="state.from.external.mmes1_ip"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title>
|
||||
MME binded interface for S1-C or S1-MME communication
|
||||
(S1AP), can be ethernet interface, virtual ethernet
|
||||
interface, we don't advise wireless interfaces
|
||||
</template>
|
||||
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="S10_IP" name="external.mmes10_ip">
|
||||
<a-input
|
||||
v-model:value="state.from.external.mmes10_ip"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title> Interface </template>
|
||||
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="S11_IP" name="external.mmes11_ip">
|
||||
<a-input
|
||||
v-model:value="state.from.external.mmes11_ip"
|
||||
allow-clear
|
||||
:placeholder="t('common.inputPlease')"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title>
|
||||
MME binded interface for S11-U communication (GTPV1-U)
|
||||
</template>
|
||||
<InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
139
src/views/ne/neQuickSetup/hooks/usePara5G.ts
Normal file
139
src/views/ne/neQuickSetup/hooks/usePara5G.ts
Normal file
@@ -0,0 +1,139 @@
|
||||
import { onMounted, reactive, toRaw } from 'vue';
|
||||
import { getPara5GFilee, savePara5GFile, updateNeInfo } from '@/api/ne/neInfo';
|
||||
import useNeInfoStore from '@/store/modules/neinfo';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
|
||||
/**对象信息信息状态类型 */
|
||||
type StateType = {
|
||||
/**表单数据 */
|
||||
from: Record<string, any>;
|
||||
/**OMC信息，需修改当前的IP */
|
||||
omcInfo: Record<string, any>;
|
||||
/**根据网元显示配置项 */
|
||||
hasNE: {
|
||||
amf: boolean;
|
||||
upf: boolean;
|
||||
ims: boolean;
|
||||
mme: boolean;
|
||||
};
|
||||
/**确定按钮 loading */
|
||||
confirmLoading: boolean;
|
||||
};
|
||||
|
||||
export function usePara5G({ t }: any) {
|
||||
/**对象信息状态 */
|
||||
let state: StateType = reactive({
|
||||
from: {},
|
||||
omcInfo: {},
|
||||
hasNE: {
|
||||
amf: false,
|
||||
upf: false,
|
||||
ims: false,
|
||||
mme: false,
|
||||
},
|
||||
confirmLoading: false,
|
||||
});
|
||||
|
||||
/**载入数据*/
|
||||
function fnReloadData() {
|
||||
state.confirmLoading = true;
|
||||
Promise.all([getPara5GFilee(), useNeInfoStore().fnRefreshNelist()]).then(
|
||||
resArr => {
|
||||
// 已保存的配置
|
||||
if (resArr[0].code === RESULT_CODE_SUCCESS) {
|
||||
Object.assign(state.from, resArr[0].data);
|
||||
}
|
||||
// 填充固定网元类型的ip
|
||||
if (
|
||||
resArr[1].code === RESULT_CODE_SUCCESS &&
|
||||
Array.isArray(resArr[1].data)
|
||||
) {
|
||||
for (const item of resArr[1].data) {
|
||||
// 公共配置文件sbi的各网元IP
|
||||
switch (item.neType) {
|
||||
case 'OMC':
|
||||
// state.from.sbi.omc_ip = item.ip;
|
||||
Object.assign(state.omcInfo, item); // 主动改OMC_IP
|
||||
break;
|
||||
case 'IMS':
|
||||
state.from.sbi.ims_ip = item.ip;
|
||||
state.hasNE.ims = true;
|
||||
break;
|
||||
case 'AMF':
|
||||
state.from.sbi.amf_ip = item.ip;
|
||||
state.hasNE.amf = true;
|
||||
break;
|
||||
case 'AUSF':
|
||||
state.from.sbi.ausf_ip = item.ip;
|
||||
break;
|
||||
case 'UDM':
|
||||
state.from.sbi.udm_ip = item.ip;
|
||||
state.from.sbi.db_ip = '0.0.0.0';
|
||||
break;
|
||||
case 'SMF':
|
||||
state.from.sbi.smf_ip = item.ip;
|
||||
break;
|
||||
case 'PCF':
|
||||
state.from.sbi.pcf_ip = item.ip;
|
||||
break;
|
||||
case 'NSSF':
|
||||
state.from.sbi.nssf_ip = item.ip;
|
||||
break;
|
||||
case 'NRF':
|
||||
state.from.sbi.nrf_ip = item.ip;
|
||||
break;
|
||||
case 'UPF':
|
||||
state.from.sbi.upf_ip = item.ip;
|
||||
state.hasNE.upf = true;
|
||||
break;
|
||||
case 'LMF':
|
||||
state.from.sbi.lmf_ip = item.ip;
|
||||
break;
|
||||
case 'NEF':
|
||||
state.from.sbi.nef_ip = item.ip;
|
||||
break;
|
||||
case 'MME':
|
||||
state.from.sbi.mme_ip = item.ip;
|
||||
if (item.ip.includes('.')) {
|
||||
state.from.external.mmes11_ip = item.ip + '/24';
|
||||
}
|
||||
state.hasNE.mme = true;
|
||||
break;
|
||||
case 'N3IWF':
|
||||
state.from.sbi.n3iwf_ip = item.ip;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
state.confirmLoading = false;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**保存数据 */
|
||||
async function fnSaveData() {
|
||||
if (state.confirmLoading) return;
|
||||
state.confirmLoading = true;
|
||||
const res = await savePara5GFile({
|
||||
content: toRaw(state.from),
|
||||
syncNe: [],
|
||||
});
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
// 更新omc_ip
|
||||
state.omcInfo.ip = state.from.sbi.omc_ip;
|
||||
await updateNeInfo(toRaw(state.omcInfo));
|
||||
}
|
||||
state.confirmLoading = false;
|
||||
return res;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fnReloadData();
|
||||
});
|
||||
|
||||
return {
|
||||
state,
|
||||
fnReloadData,
|
||||
fnSaveData,
|
||||
};
|
||||
}
|
||||
@@ -1,4 +1,10 @@
|
||||
import { reactive } from 'vue';
|
||||
import {
|
||||
defineAsyncComponent,
|
||||
onMounted,
|
||||
reactive,
|
||||
shallowRef,
|
||||
watch,
|
||||
} from 'vue';
|
||||
|
||||
/**步骤信息状态类型 */
|
||||
type StepStateType = {
|
||||
@@ -80,3 +86,26 @@ export function fnToStepName(stepName: string) {
|
||||
|
||||
stepState.stepName = stepName;
|
||||
}
|
||||
|
||||
export function useStep({ t }: any) {
|
||||
// 异步加载组件
|
||||
const Start = defineAsyncComponent(() => import('../components/Start.vue'));
|
||||
|
||||
// 当前组件
|
||||
const currentComponent = shallowRef(Start);
|
||||
|
||||
watch(
|
||||
() => stepState.stepName,
|
||||
v => {
|
||||
const loadComponent = defineAsyncComponent(
|
||||
() => import(`../components/${v}.vue`)
|
||||
);
|
||||
currentComponent.value = loadComponent;
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
fnRestStepState(t);
|
||||
});
|
||||
return { currentComponent };
|
||||
}
|
||||
|
||||
@@ -1,34 +1,27 @@
|
||||
<script lang="ts" setup>
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import { defineAsyncComponent, watch, shallowRef, onMounted } from 'vue';
|
||||
import { stepState, fnRestStepState } from './hooks/useStep';
|
||||
import Para5GForm from './components/Para5GForm.vue';
|
||||
import { stepState, useStep } from './hooks/useStep';
|
||||
import { usePara5G } from './hooks/usePara5G';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { ref } from 'vue';
|
||||
const { t } = useI18n();
|
||||
|
||||
// 异步加载组件
|
||||
const Start = defineAsyncComponent(() => import('./components/Start.vue'));
|
||||
const { currentComponent } = useStep(t);
|
||||
const { state, fnReloadData, fnSaveData } = usePara5G(t);
|
||||
|
||||
// 当前组件
|
||||
const currentComponent = shallowRef(Start);
|
||||
|
||||
watch(
|
||||
() => stepState.stepName,
|
||||
v => {
|
||||
const loadComponent = defineAsyncComponent(
|
||||
() => import(`./components/${v}.vue`)
|
||||
);
|
||||
currentComponent.value = loadComponent;
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
fnRestStepState(t);
|
||||
});
|
||||
const installNE = ref(false);
|
||||
/**公共参数保存前下一步进行网元安装 */
|
||||
function fnNext() {
|
||||
fnSaveData().then(() => {
|
||||
installNE.value = !installNE.value;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageContainer>
|
||||
<a-card :bordered="false">
|
||||
<a-card :bordered="false" v-if="installNE">
|
||||
<!-- 插槽-卡片左侧 -->
|
||||
<template #title>
|
||||
<!-- 步骤进度 -->
|
||||
@@ -46,6 +39,30 @@ onMounted(() => {
|
||||
<!-- 步骤页面 -->
|
||||
<component :is="currentComponent" />
|
||||
</a-card>
|
||||
<a-card :bordered="false" v-else>
|
||||
<!-- 公共参数表单 -->
|
||||
<Para5GForm v-model:data="state.from" :ne="state.hasNE"></Para5GForm>
|
||||
|
||||
<div style="padding: 24px 12px 0; text-align: end">
|
||||
<a-space :size="8" align="center">
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="state.confirmLoading"
|
||||
@click="fnNext()"
|
||||
>
|
||||
{{ t('views.ne.neQuickSetup.stepNext') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="default"
|
||||
:disabled="state.confirmLoading"
|
||||
@click.prevent="fnReloadData()"
|
||||
>
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
{{ t('views.ne.neQuickSetup.reloadPara5G') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-card>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user