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

feat: 网元公共配置文件配置页面

Browse Source
This commit is contained in:
TsMask
2024-04-16 19:38:16 +08:00
parent 832f18e2ee
commit d3794ba904
2 changed files with 389 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/api/ne/neInfo.ts
View File

@@ -141,6 +141,36 @@ export function saveConfigFile(data: Record<string, any>) {
});
}
/**
* 网元端公共配置文件读取
* @param fileType oam_manager.yaml '' txt json yaml yml 根据指定文件类型进行解析序列出map->json
* @returns object
*/
export function getPara5GFilee(fileType: string) {
return request({
url: '/ne/info/para5GFile',
method: 'get',
params: {
fileType,
},
});
}
/**
* 网元端公共配置文件写入
* @param fileType yaml 解析内容数据到对应文件类型
* @param content txt内容为字符串 其他文件格式都用json对象
* @param syncNe 同步到网元端 NeType@ NeId
* @returns object
*/
export function savePara5GFile(data: Record<string, any>) {
return request({
url: `/ne/info/para5GFile`,
method: 'put',
data: data,
});
}
/**
* 网元服务操作
* @param data 对象 {neType,neId,action}

359
src/views/ne/neConfPara5G/index.vue Normal file
View File

@@ -0,0 +1,359 @@
<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 ModalStateType = {
/**网元选择 */
neSelectOtions: any[];
/**同步到网元 */
sync: boolean;
syncNe: string[];
/**表单数据 */
from: Record<string, any>;
/**确定按钮 loading */
confirmLoading: boolean;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
neSelectOtions: [],
sync: false,
syncNe: [],
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 fnGetData() {
if (modalState.confirmLoading) return;
modalState.confirmLoading = true;
getPara5GFilee('yaml')
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
Object.assign(modalState.from, res.data);
} else {
message.error({
content: res.msg,
duration: 3,
});
}
})
.finally(() => {
modalState.confirmLoading = false;
});
}
/**保存文件数据*/
function fnSaveData() {
if (modalState.confirmLoading) return;
modalState.confirmLoading = true;
savePara5GFile({
fileType: 'yaml',
content: toRaw(modalState.from),
syncNe: modalState.sync ? modalState.syncNe : [],
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success('Save complete!');
} else {
message.error({
content: t('common.operateErr'),
duration: 3,
});
}
})
.finally(() => {
modalState.confirmLoading = false;
});
}
onMounted(() => {
useNeInfoStore()
.fnNelist()
.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}`,
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>
<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 #extra>
<a-space :size="8" align="center">
<a-button
type="default"
:disabled="modalState.confirmLoading"
@click.prevent="fnGetData()"
>
<template #icon><ReloadOutlined /></template>
Reload
</a-button>
<a-button
type="primary"
:loading="modalState.confirmLoading"
@click="fnSaveData()"
>
Save
</a-button>
</a-space>
</template>
<a-form
name="modalStateFromByEdit"
layout="horizontal"
:label-col="{ span: 6 }"
:label-wrap="true"
>
<a-divider orientation="left">Basic Data </a-divider>
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="dnn_data" name="dnn_data">
<a-input
v-model:value="modalState.from.basic.dnn_data"
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="dnn_ims" name="dnn_ims">
<a-input
v-model:value="modalState.from.basic.dnn_ims"
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="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-form-item label="snssai.sd" name="snssai.sd">
<a-input
v-model:value="modalState.from.basic.snssai.sd"
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="snssai.sst" name="snssai.sst">
<a-input
v-model:value="modalState.from.basic.snssai.sst"
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="tac" name="tac">
<a-input-number
v-model:value="modalState.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="6" :md="12" :xs="24">
<a-form-item label="amfn2_ip" name="amfn2_ip">
<a-input
v-model:value="modalState.from.external.amfn2_ip"
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="ue_pool" name="ue_pool">
<a-input
v-model:value="modalState.from.external.ue_pool"
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="upfn3_gw" name="upfn3_gw">
<a-input
v-model:value="modalState.from.external.upfn3_gw"
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="upfn3_ip" name="upfn3_ip">
<a-input
v-model:value="modalState.from.external.upfn3_ip"
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="upfn6_gw" name="upfn6_gw">
<a-input
v-model:value="modalState.from.external.upfn6_gw"
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="upfn6_ip" name="upfn6_ip">
<a-input
v-model:value="modalState.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>
</PageContainer>
</template>
<style lang="less" scoped></style>