408 lines
12 KiB
Vue
408 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, onMounted, toRaw } from 'vue';
|
|
import { PageContainer } from 'antdv-pro-layout';
|
|
import { message } from 'ant-design-vue/lib';
|
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
|
import useI18n from '@/hooks/useI18n';
|
|
import { getPara5GFilee, savePara5GFile } from '@/api/ne/neInfo';
|
|
import useNeInfoStore from '@/store/modules/neinfo';
|
|
const { t } = useI18n();
|
|
|
|
/**对象信息信息状态类型 */
|
|
type StateType = {
|
|
/**保存选择同步到网元窗 */
|
|
visible: boolean;
|
|
/**网元选择 */
|
|
neSelectOtions: any[];
|
|
/**同步到网元 */
|
|
sync: boolean;
|
|
syncNe: string[];
|
|
syncMsg: string;
|
|
/**表单数据 */
|
|
from: Record<string, any>;
|
|
/**确定按钮 loading */
|
|
confirmLoading: boolean;
|
|
};
|
|
|
|
/**对象信息状态 */
|
|
let state: StateType = reactive({
|
|
visible: false,
|
|
neSelectOtions: [],
|
|
sync: false,
|
|
syncNe: [],
|
|
syncMsg: '',
|
|
from: {
|
|
basic: {
|
|
dnn_data: 'internet',
|
|
dnn_ims: 'ims',
|
|
oamEnable: true,
|
|
plmnId: {
|
|
mcc: '001',
|
|
mnc: '01',
|
|
},
|
|
snmpEnable: false,
|
|
snssai: {
|
|
sd: '000001',
|
|
sst: '1',
|
|
},
|
|
tac: 4388,
|
|
},
|
|
external: {
|
|
amfn2_ip: '192.168.8.120',
|
|
ue_pool: '10.2.1.0/24',
|
|
upfn3_gw: '192.168.1.1',
|
|
upfn3_ip: '192.168.8.190/24',
|
|
upfn6_gw: '192.168.1.1',
|
|
upfn6_ip: '192.168.8.191/24',
|
|
},
|
|
},
|
|
confirmLoading: false,
|
|
});
|
|
|
|
/**对话框弹出确认执行函数*/
|
|
function fnModalOk() {
|
|
if (state.confirmLoading) return;
|
|
state.confirmLoading = true;
|
|
savePara5GFile({
|
|
content: toRaw(state.from),
|
|
syncNe: state.sync ? state.syncNe : [],
|
|
})
|
|
.then(res => {
|
|
if (state.sync) {
|
|
state.syncMsg = res.msg;
|
|
} else {
|
|
message.success('Save Success');
|
|
}
|
|
})
|
|
.finally(() => {
|
|
state.confirmLoading = false;
|
|
});
|
|
}
|
|
|
|
/**对话框弹出关闭执行函数*/
|
|
function fnModalCancel() {
|
|
state.visible = false;
|
|
state.sync = false;
|
|
state.syncNe = [];
|
|
}
|
|
|
|
/**保存文件数据*/
|
|
function fnSaveData() {
|
|
state.visible = true;
|
|
}
|
|
|
|
/**获取文件数据*/
|
|
function fnGetData() {
|
|
if (state.confirmLoading) return;
|
|
state.confirmLoading = true;
|
|
getPara5GFilee()
|
|
.then(res => {
|
|
if (typeof res.data === 'object') {
|
|
Object.assign(state.from, res.data);
|
|
}
|
|
})
|
|
.finally(() => {
|
|
state.confirmLoading = false;
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
useNeInfoStore()
|
|
.fnNelist()
|
|
.then(res => {
|
|
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
|
for (const row of res.data) {
|
|
state.neSelectOtions.push({
|
|
label: `[${row.neType} ${row.neId}] ${row.neName}`,
|
|
value: `${row.neType}@${row.neId}`,
|
|
});
|
|
}
|
|
} else {
|
|
message.warning({
|
|
content: t('common.noData'),
|
|
duration: 2,
|
|
});
|
|
}
|
|
})
|
|
.finally(() => {
|
|
// 获取文件数据
|
|
fnGetData();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<PageContainer>
|
|
<a-card :bordered="false">
|
|
<!-- 插槽-卡片左侧侧 -->
|
|
<template #title> </template>
|
|
|
|
<!-- 插槽-卡片右侧 -->
|
|
<template #extra>
|
|
<a-space :size="8" align="center">
|
|
<a-button
|
|
type="default"
|
|
:disabled="state.confirmLoading"
|
|
@click.prevent="fnGetData()"
|
|
>
|
|
<template #icon><ReloadOutlined /></template>
|
|
Reload
|
|
</a-button>
|
|
<a-button
|
|
type="primary"
|
|
:loading="state.confirmLoading"
|
|
@click="fnSaveData()"
|
|
>
|
|
<template #icon><SaveOutlined /></template>
|
|
Save
|
|
</a-button>
|
|
</a-space>
|
|
</template>
|
|
|
|
<a-form
|
|
name="para5GFileeFrom"
|
|
layout="horizontal"
|
|
:label-col="{ span: 6 }"
|
|
:label-wrap="true"
|
|
>
|
|
<a-divider orientation="left">Basic Data </a-divider>
|
|
<a-row :gutter="16">
|
|
<a-col :lg="24" :md="24" :xs="24">
|
|
<a-form-item
|
|
label="oamEnable"
|
|
name="oamEnable"
|
|
:label-col="{ span: 3 }"
|
|
:label-wrap="true"
|
|
>
|
|
<a-switch
|
|
:checked-children="t('common.switch.open')"
|
|
:un-checked-children="t('common.switch.shut')"
|
|
v-model:checked="state.from.basic.oamEnable"
|
|
></a-switch>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="24" :md="24" :xs="24">
|
|
<a-form-item
|
|
label="snmpEnable"
|
|
name="snmpEnable"
|
|
:label-col="{ span: 3 }"
|
|
: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"
|
|
>
|
|
<a-input-number
|
|
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-form-item>
|
|
</a-col>
|
|
<a-col :lg="12" :md="12" :xs="24">
|
|
<a-form-item label="ue_pool" name="ue_pool">
|
|
<a-input
|
|
v-model:value="state.from.external.ue_pool"
|
|
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="upfn3_gw" name="upfn3_gw">
|
|
<a-input
|
|
v-model:value="state.from.external.upfn3_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="upfn3_ip" name="upfn3_ip">
|
|
<a-input
|
|
v-model:value="state.from.external.upfn3_ip"
|
|
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-col>
|
|
</a-row>
|
|
</a-form>
|
|
</a-card>
|
|
|
|
<!-- 保存选择同步网元 -->
|
|
<a-modal
|
|
width="500px"
|
|
:keyboard="false"
|
|
:mask-closable="false"
|
|
:visible="state.visible"
|
|
title="保存信息"
|
|
:confirm-loading="state.confirmLoading"
|
|
@ok="fnModalOk"
|
|
@cancel="fnModalCancel"
|
|
>
|
|
<a-form
|
|
name="syncNeModal"
|
|
layout="horizontal"
|
|
:label-col="{ span: 5 }"
|
|
:label-wrap="true"
|
|
>
|
|
<a-form-item label="Sync To NE" name="sync">
|
|
<a-switch
|
|
:checked-children="t('common.switch.open')"
|
|
:un-checked-children="t('common.switch.shut')"
|
|
v-model:checked="state.sync"
|
|
:disabled="state.confirmLoading"
|
|
></a-switch>
|
|
</a-form-item>
|
|
<a-form-item label="Select NE" name="syncNe" v-if="state.sync">
|
|
<a-select
|
|
v-model:value="state.syncNe"
|
|
mode="multiple"
|
|
:placeholder="t('common.selectPlease')"
|
|
:max-tag-count="3"
|
|
:options="state.neSelectOtions"
|
|
>
|
|
<template #maxTagPlaceholder="omittedValues">
|
|
<span>+ {{ omittedValues.length }} ...</span>
|
|
</template>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item label="Sync Msg" name="syncMsg" v-if="state.syncMsg">
|
|
<a-textarea
|
|
:disabled="true"
|
|
:value="state.syncMsg"
|
|
:auto-size="{ minRows: 2, maxRows: 8 }"
|
|
style="background-color: transparent; color: rgba(0, 0, 0, 0.85)"
|
|
/>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-modal>
|
|
</PageContainer>
|
|
</template>
|
|
|
|
<style lang="less" scoped></style>
|