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

feat: 网元公共参数页面同步操作改弹出窗显示操作信息

Browse Source
This commit is contained in:
TsMask
2024-04-24 15:25:56 +08:00
parent 03caa354da
commit e351960229
1 changed files with 175 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
src/views/ne/neConfPara5G/index.vue
View File

@@ -8,24 +8,29 @@ import { getPara5GFilee, savePara5GFile } from '@/api/ne/neInfo';
import useNeInfoStore from '@/store/modules/neinfo';
const { t } = useI18n();
/**对话框对象信息状态类型 */
type ModalStateType = {
/**对象信息信息状态类型 */
type StateType = {
/**保存选择同步到网元窗 */
visible: boolean;
/**网元选择 */
neSelectOtions: any[];
/**同步到网元 */
sync: boolean;
syncNe: string[];
syncMsg: string;
/**表单数据 */
from: Record<string, any>;
/**确定按钮 loading */
confirmLoading: boolean;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
/**对象信息状态 */
let state: StateType = reactive({
visible: false,
neSelectOtions: [],
sync: false,
syncNe: [],
syncMsg: '',
from: {
basic: {
dnn_data: 'internet',
@@ -54,47 +59,51 @@ let modalState: ModalStateType = reactive({
confirmLoading: false,
});
/**获取文件数据*/
function fnGetData() {
if (modalState.confirmLoading) return;
modalState.confirmLoading = true;
getPara5GFilee('yaml')
/**对话框弹出确认执行函数*/
function fnModalOk() {
if (state.confirmLoading) return;
state.confirmLoading = true;
savePara5GFile({
fileType: 'yaml',
content: toRaw(state.from),
syncNe: state.sync ? state.syncNe : [],
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
Object.assign(modalState.from, res.data);
if (state.sync) {
state.syncMsg = res.msg;
} else {
message.error({
content: res.msg,
duration: 3,
});
message.success('Save Success');
}
})
.finally(() => {
modalState.confirmLoading = false;
state.confirmLoading = false;
});
}
/**对话框弹出关闭执行函数*/
function fnModalCancel() {
state.visible = false;
state.sync = false;
state.syncNe = [];
}
/**保存文件数据*/
function fnSaveData() {
if (modalState.confirmLoading) return;
modalState.confirmLoading = true;
savePara5GFile({
fileType: 'yaml',
content: toRaw(modalState.from),
syncNe: modalState.sync ? modalState.syncNe : [],
})
state.visible = true;
}
/**获取文件数据*/
function fnGetData() {
if (state.confirmLoading) return;
state.confirmLoading = true;
getPara5GFilee('yaml')
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success('Save complete!');
} else {
message.error({
content: t('common.operateErr'),
duration: 3,
});
if (typeof res.data === 'object') {
Object.assign(state.from, res.data);
}
})
.finally(() => {
modalState.confirmLoading = false;
state.confirmLoading = false;
});
}
@@ -104,8 +113,8 @@ onMounted(() => {
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
for (const row of res.data) {
modalState.neSelectOtions.push({
label: `${row.neType} : ${row.ip}`,
state.neSelectOtions.push({
label: `[${row.neType} ${row.neId}] ${row.neName}`,
value: `${row.neType}@${row.neId}`,
});
}
@@ -127,39 +136,14 @@ onMounted(() => {
<PageContainer>
<a-card :bordered="false">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-form layout="inline">
<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="modalState.sync"
:disabled="modalState.confirmLoading"
></a-switch>
</a-form-item>
<a-form-item label="NE Select" name="syncNe" v-if="modalState.sync">
<a-select
v-model:value="modalState.syncNe"
mode="multiple"
style="width: 480px"
:placeholder="t('common.selectPlease')"
:max-tag-count="2"
:options="modalState.neSelectOtions"
>
<template #maxTagPlaceholder="omittedValues">
<span>+ {{ omittedValues.length }} ...</span>
</template>
</a-select>
</a-form-item>
</a-form>
</template>
<template #title> </template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-space :size="8" align="center">
<a-button
type="default"
:disabled="modalState.confirmLoading"
:disabled="state.confirmLoading"
@click.prevent="fnGetData()"
>
<template #icon><ReloadOutlined /></template>
@@ -167,9 +151,10 @@ onMounted(() => {
</a-button>
<a-button
type="primary"
:loading="modalState.confirmLoading"
:loading="state.confirmLoading"
@click="fnSaveData()"
>
<template #icon><SaveOutlined /></template>
Save
</a-button>
</a-space>
@@ -183,10 +168,39 @@ onMounted(() => {
>
<a-divider orientation="left">Basic Data </a-divider>
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<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="modalState.from.basic.dnn_data"
v-model:value="state.from.basic.dnn_data"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -194,10 +208,10 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="dnn_ims" name="dnn_ims">
<a-input
v-model:value="modalState.from.basic.dnn_ims"
v-model:value="state.from.basic.dnn_ims"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -205,52 +219,10 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="oamEnable" name="oamEnable">
<a-switch
:checked-children="t('common.switch.open')"
:un-checked-children="t('common.switch.shut')"
v-model:checked="modalState.from.basic.oamEnable"
></a-switch>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="snmpEnable" name="snmpEnable">
<a-switch
:checked-children="t('common.switch.open')"
:un-checked-children="t('common.switch.shut')"
v-model:checked="modalState.from.basic.snmpEnable"
></a-switch>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="plmnId.mcc" name="plmnId.mcc">
<a-input
v-model:value="modalState.from.basic.plmnId.mcc"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="plmnId.mnc" name="plmnId.mnc">
<a-input
v-model:value="modalState.from.basic.plmnId.mnc"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
>
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="snssai.sd" name="snssai.sd">
<a-input
v-model:value="modalState.from.basic.snssai.sd"
v-model:value="state.from.basic.snssai.sd"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -258,10 +230,10 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="snssai.sst" name="snssai.sst">
<a-input
v-model:value="modalState.from.basic.snssai.sst"
v-model:value="state.from.basic.snssai.sst"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -270,10 +242,38 @@ onMounted(() => {
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="tac" name="tac">
<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="modalState.from.basic.tac"
v-model:value="state.from.basic.tac"
:min="1"
:max="65535"
placeholder="1-65535"
@@ -284,10 +284,10 @@ onMounted(() => {
<a-divider orientation="left">External Data </a-divider>
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="amfn2_ip" name="amfn2_ip">
<a-input
v-model:value="modalState.from.external.amfn2_ip"
v-model:value="state.from.external.amfn2_ip"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -295,10 +295,10 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="ue_pool" name="ue_pool">
<a-input
v-model:value="modalState.from.external.ue_pool"
v-model:value="state.from.external.ue_pool"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -306,10 +306,10 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="upfn3_gw" name="upfn3_gw">
<a-input
v-model:value="modalState.from.external.upfn3_gw"
v-model:value="state.from.external.upfn3_gw"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -317,10 +317,10 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="upfn3_ip" name="upfn3_ip">
<a-input
v-model:value="modalState.from.external.upfn3_ip"
v-model:value="state.from.external.upfn3_ip"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -328,10 +328,10 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="upfn6_gw" name="upfn6_gw">
<a-input
v-model:value="modalState.from.external.upfn6_gw"
v-model:value="state.from.external.upfn6_gw"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -339,10 +339,10 @@ onMounted(() => {
</a-input>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="upfn6_ip" name="upfn6_ip">
<a-input
v-model:value="modalState.from.external.upfn6_ip"
v-model:value="state.from.external.upfn6_ip"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="50"
@@ -353,6 +353,55 @@ onMounted(() => {
</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>