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

feat: 网元配置多网元同时配置HA功能

Browse Source
This commit is contained in:
TsMask
2024-12-18 15:33:52 +08:00
parent d3a18f95db
commit 8a53ac8b9f
5 changed files with 810 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

346
src/views/ne/neConfig/index.vue
View File

@@ -1,11 +1,20 @@
<script setup lang="ts">
import { reactive, ref, onMounted, toRaw, watch } from 'vue';
import {
reactive,
ref,
onMounted,
toRaw,
watch,
nextTick,
computed,
} from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { ProModal } from 'antdv-pro-modal';
import { message } from 'ant-design-vue/es';
import { DataNode } from 'ant-design-vue/es/tree';
import useI18n from '@/hooks/useI18n';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import CheckSyncNe from './components/CheckSyncNe/index.vue';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useNeInfoStore from '@/store/modules/neinfo';
import useOptions from './hooks/useOptions';
@@ -19,11 +28,79 @@ const { ruleVerification, smfByUPFIdLoadData, smfByUPFIdOptions } = useOptions({
t,
});
/**网元类型_多neId */
/**网元类型 type,[](type,id) */
let neCascaderOptions = ref<Record<string, any>[]>([]);
/**网元类型 [](type,id) */
let neSelectOptions = ref<Record<string, any>[]>([]);
/**网元类型选择 type,id */
let neTypeSelect = ref<string[]>(['', '']);
/**网元类型选择 id */
let neIdSelect = ref<string[]>([]);
let neTypeSelectStatus = ref(true);
let neTypeSelectProvince = ref('-');
/**网元类型neType选择 */
async function fnSelectNeType(_: any, info: any) {
if (!info) return;
await fnGetNeConfig(info.value);
if (treeState.data.length === 0) {
message.warning({
content: `${t('views.ne.neConfig.noConfigData')}`,
duration: 3,
});
treeState.selectLoading = true;
neIdSelect.value = [];
return;
}
neTypeSelect.value[0] = info.value;
neTypeSelect.value[1] = 'SYNC';
treeState.selectLoading = true;
neTypeSelectStatus.value = true;
neIdSelect.value = [];
// 检查下级网元是否可用
if (Array.isArray(info.children) && info.children.length > 0) {
neSelectOptions.value = info.children.concat();
for (let index = 0; index < neSelectOptions.value.length; index++) {
const v = neSelectOptions.value[index];
const res = await getNeConfigData({
neType: v.neType,
neId: v.neId,
paramName: `${treeState.data[0].key}`,
});
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
neSelectOptions.value[index].disabled = !res.data.length;
// 初始区域
if (neIdSelect.value.length === 0) {
neTypeSelectProvince.value = v.province;
}
// 同区域内添加
if (neTypeSelectProvince.value === v.province) {
neIdSelect.value.push(v.neId);
}
} else {
neSelectOptions.value[index].disabled = true;
}
}
}
fnActiveConfigNode(treeState.data[0].key);
neTypeSelectStatus.value = false;
}
/**网元类型neId选择 */
function fnSelectNeId(_: any, info: any) {
if (!info) {
neTypeSelect.value[1] = 'SYNC';
} else {
neTypeSelect.value[1] = info.neId;
}
fnActiveConfigNode(treeState.data[0].key);
}
/**网元服务地区选择 */
function fnSelectProvince(province: string) {
// neTypeSelectProvince.value = province;
nextTick(() => {
fnActiveConfigNode(treeState.data[0].key);
});
}
/**左侧导航是否可收起 */
let collapsible = ref<boolean>(true);
@@ -49,6 +126,7 @@ type TreeStateType = {
paramType: string;
paramPerms: string[];
paramData: Record<string, any>[];
visible: string;
};
/**选择 loading */
selectLoading: boolean;
@@ -63,6 +141,7 @@ let treeState: TreeStateType = reactive({
paramType: '',
paramPerms: [],
paramData: [],
visible: 'public',
// 树形节点需要有
title: '',
key: '',
@@ -100,22 +179,134 @@ function fnActiveConfigNode(key: string | number) {
}
treeState.selectNode = JSON.parse(JSON.stringify(param));
let neId = neTypeSelect.value[1];
// 无neId时取首个可连接的
if (neId === 'SYNC') {
const oneNeId = neIdSelect.value[0];
if (oneNeId) {
neId = oneNeId;
} else {
return;
}
}
// 获取网元端的配置数据
getNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: key,
}).then(res => {
fnGetNeConfigData(neTypeSelect.value[0], neId, key);
}
/**
* 查询配置可选属性值列表
* neTypeSelect.value[0]
*/
async function fnGetNeConfig(neType: string) {
if (!neType) {
message.warning({
content: t('views.ne.neConfig.neTypePleace'),
duration: 3,
});
return;
}
treeState.loading = true;
// 获取数据
const res = await getAllNeConfig(neType);
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
const arr = [];
for (const v of res.data) {
const item = JSON.parse(JSON.stringify(v));
// 规则项
let paramData: Record<string, string>[] = [];
for (let index = 0; index < item.paramData.length; index++) {
const element = item.paramData[index];
if (!element['visible']) {
element['visible'] = 'public';
}
paramData.push(element);
}
// 权限控制
let paramPerms: string[] = [];
if (item.paramPerms) {
paramPerms = item.paramPerms.split(',');
} else {
paramPerms = ['post', 'put', 'delete'];
}
arr.push({
children: undefined,
title: item.paramDisplay,
key: item.paramName,
paramName: item.paramName,
paramDisplay: item.paramDisplay,
paramType: item.paramType,
paramPerms: paramPerms,
paramData: paramData,
visible: item.visible,
});
}
treeState.data = arr;
treeState.loading = false;
} else {
treeState.data = [];
neTypeSelectStatus.value = false;
}
}
/**过滤可见项 */
const treeStateData = computed(() => {
// 公共
if (neTypeSelect.value[1] === 'SYNC') {
return treeState.data.filter(item => item.visible === 'public');
}
// 具体网元
const arr: DataNode[] = [];
for (const item of treeState.data) {
if (item.visible === 'self') {
arr.push(item);
} else if (item.paramType === 'list') {
for (let index = 0; index < item.paramData.length; index++) {
const element = item.paramData[index];
if (element['visible'] === 'self') {
arr.push(item);
break;
}
}
}
}
return arr;
});
/**
* 查询配置属性值数据
* paramName = treeState.data[0].key
*/
function fnGetNeConfigData(
neType: string,
neId: string,
paramName: string | number
) {
const param = treeState.selectNode;
// 获取网元端的配置数据
getNeConfigData({ neType, neId, paramName }).then(res => {
// 数据处理
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
const ruleArr = param.paramData;
const ruleArr: Record<string, any>[] = JSON.parse(
JSON.stringify(param.paramData)
);
const dataArr = res.data;
if (param.paramType === 'list') {
// 过滤可见规则项
let ruleArrFilter: Record<string, any>[] = [];
if (neTypeSelect.value[1] === 'SYNC') {
ruleArrFilter = ruleArr.filter(item => item['visible'] === 'public');
} else {
ruleArrFilter = ruleArr.filter(item => item['visible'] === 'self');
}
// 列表项数据
const dataList = [];
for (const item of dataArr) {
for (const key in item) {
// 规则为准
for (const rule of ruleArr) {
for (const rule of ruleArrFilter) {
// 取到对应规则key设置值
if (rule['name'] === key) {
const ruleItem = Object.assign(rule, {
optional: 'true',
@@ -190,64 +381,19 @@ function fnActiveConfigNode(key: string | number) {
tablePagination.current = 1;
arrayEditClose();
}
// 有数据关闭loading
setTimeout(() => {
treeState.selectLoading = false;
}, 300);
} else {
message.warning({
content: `${param.paramDisplay} ${t(
'views.configManage.configParamForm.noConfigData'
)}`,
content: `${param.paramDisplay} ${t('views.ne.neConfig.noConfigData')}`,
duration: 3,
});
}
});
}
/**查询配置可选属性值列表 */
function fnGetNeConfig() {
const neType = neTypeSelect.value[0];
if (!neType) {
message.warning({
content: t('views.configManage.configParamForm.neTypePleace'),
duration: 3,
});
return;
}
treeState.loading = true;
// 获取数据
getAllNeConfig(neType).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
const arr = [];
for (const item of res.data) {
let paramPerms: string[] = [];
if (item.paramPerms) {
paramPerms = item.paramPerms.split(',');
} else {
paramPerms = ['post', 'put', 'delete'];
}
arr.push({
...item,
children: undefined,
title: item.paramDisplay,
key: item.paramName,
paramPerms,
});
}
treeState.data = arr;
treeState.loading = false;
// 取首个tag
if (res.data.length > 0) {
const item = JSON.parse(JSON.stringify(treeState.data[0]));
treeState.selectNode = item;
treeState.selectLoading = false;
fnActiveConfigNode(item.key);
}
}
});
}
/**对话框对象信息状态类型 */
type ModalStateType = {
/**添加框是否显示 */
@@ -321,7 +467,7 @@ watch(
);
const { tablePagination, listState, listEdit, listEditClose, listEditOk } =
useConfigList({ t, treeState, neTypeSelect, ruleVerification });
useConfigList({ t, treeState, neTypeSelect, neIdSelect, ruleVerification });
const {
arrayState,
@@ -337,6 +483,7 @@ const {
t,
treeState,
neTypeSelect,
neIdSelect,
fnActiveConfigNode,
ruleVerification,
modalState,
@@ -355,6 +502,7 @@ const {
t,
treeState,
neTypeSelect,
neIdSelect,
fnActiveConfigNode,
ruleVerification,
modalState,
@@ -385,13 +533,16 @@ onMounted(() => {
// 默认选择AMF
const item = neCascaderOptions.value.find(s => s.value === 'AMF');
if (item && item.children) {
const info = item.children[0];
neTypeSelect.value = [info.neType, info.neId];
neSelectOptions.value = item.children.concat();
fnSelectNeType(null, item);
// const info = item.children[0];
// neTypeSelect.value = [info.neType, info.neId];
} else {
const info = neCascaderOptions.value[0].children[0];
neTypeSelect.value = [info.neType, info.neId];
neSelectOptions.value = neCascaderOptions.value[0].children.concat();
fnSelectNeType(null, neCascaderOptions.value[0]);
// const info = neCascaderOptions.value[0].children[0];
// neTypeSelect.value = [info.neType, info.neId];
}
fnGetNeConfig();
}
} else {
message.warning({
@@ -416,20 +567,35 @@ onMounted(() => {
<!-- 网元类型 -->
<a-card size="small" :bordered="false" :loading="treeState.loading">
<template #title>
{{ t('views.configManage.configParamForm.treeTitle') }}
{{ t('views.ne.neConfig.treeTitle') }}
</template>
<a-form layout="vertical" autocomplete="off">
<a-form-item name="neId ">
<a-cascader
v-model:value="neTypeSelect"
:options="neCascaderOptions"
:allow-clear="false"
@change="fnGetNeConfig"
/>
<a-form-item name="neTypeSelect ">
<a-input-group compact>
<a-select
:disabled="neTypeSelectStatus"
:value="neTypeSelect[0]"
:options="neCascaderOptions"
:allow-clear="false"
@change="fnSelectNeType"
style="width: 40%"
>
</a-select>
<a-select
:disabled="treeState.selectLoading"
:value="neTypeSelect[1]"
:options="neSelectOptions"
:allow-clear="true"
@change="fnSelectNeId"
style="width: 60%"
>
</a-select>
</a-input-group>
</a-form-item>
<a-form-item name="listeningPort">
<a-form-item name="treeStateData">
<a-tree
:tree-data="treeState.data"
:disabled="neTypeSelectStatus"
:tree-data="treeStateData"
:selected-keys="[treeState.selectNode.paramName]"
@select="fnSelectConfigNode"
>
@@ -461,12 +627,19 @@ onMounted(() => {
{{ treeState.selectNode.paramDisplay }}
</a-typography-text>
<a-typography-text type="danger" v-else>
{{ t('views.configManage.configParamForm.treeSelectTip') }}
{{ t('views.ne.neConfig.treeSelectTip') }}
</a-typography-text>
</template>
<template #extra>
<a-space :size="8" align="center" v-show="!treeState.selectLoading">
<a-tooltip>
<CheckSyncNe
v-if="neTypeSelect[1] === 'SYNC'"
:selects="neSelectOptions"
v-model:checks="neIdSelect"
v-model:province="neTypeSelectProvince"
@province="fnSelectProvince"
></CheckSyncNe>
<a-tooltip placement="topRight">
<template #title>{{ t('common.reloadText') }}</template>
<a-button
type="default"
@@ -549,10 +722,9 @@ onMounted(() => {
<template #title> {{ t('common.ok') }} </template>
<a-popconfirm
:title="
t(
'views.configManage.configParamForm.editOkTip',
{ num: record['display'] }
)
t('views.ne.neConfig.editOkTip', {
num: record['display'],
})
"
placement="topRight"
:disabled="listState.confirmLoading"
@@ -610,7 +782,7 @@ onMounted(() => {
</a-table>
<!-- array类型 -->
<template v-if="treeState.selectNode.paramType === 'array'">
<template v-else-if="treeState.selectNode.paramType === 'array'">
<a-table
class="table"
row-key="index"
@@ -689,9 +861,7 @@ onMounted(() => {
"
>
<template #icon><BarsOutlined /></template>
{{
t('views.configManage.configParamForm.arrayMore')
}}
{{ t('views.ne.neConfig.arrayMore') }}
</a-button>
<!--特殊字段拓展显示-->
<span
@@ -792,11 +962,7 @@ onMounted(() => {
<template v-if="text.array">
<a-button type="default" size="small">
<template #icon><BarsOutlined /></template>
{{
t(
'views.configManage.configParamForm.arrayMore'
)
}}
{{ t('views.ne.neConfig.arrayMore') }}
</a-button>
</template>
@@ -816,6 +982,10 @@ onMounted(() => {
</template>
</a-table>
</template>
<template v-else>
<a-alert type="warning" show-icon message="No Data" />
</template>
</a-card>
</a-col>
</a-row>