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-19 20:24:29 +08:00
parent 302ea84cde
commit 6e7402fd63
7 changed files with 154 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,20 +1,11 @@
<script setup lang="ts">
import {
reactive,
ref,
onMounted,
toRaw,
watch,
nextTick,
computed,
} from 'vue';
import { reactive, ref, onMounted, toRaw, watch, computed } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { ProModal } from 'antdv-pro-modal';
import { message } from 'ant-design-vue/es';
import { message, TreeSelect, type TreeSelectProps } 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';
@@ -30,14 +21,13 @@ const { ruleVerification, smfByUPFIdLoadData, smfByUPFIdOptions } = useOptions({
/**网元类型 type,[](type,id) */
let neCascaderOptions = ref<Record<string, any>[]>([]);
/**网元类型 [](type,id) */
let neSelectOptions = ref<Record<string, any>[]>([]);
/**网元类型 [](label,value,children) */
let neSelectTreeDate = ref<TreeSelectProps['treeData']>([]);
/**网元类型选择 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;
@@ -47,7 +37,7 @@ async function fnSelectNeType(_: any, info: any) {
content: `${t('views.ne.neConfig.noConfigData')}`,
duration: 3,
});
treeState.selectLoading = true;
treeState.selectLoading = true;
neIdSelect.value = [];
return;
}
@@ -57,28 +47,49 @@ async function fnSelectNeType(_: any, info: any) {
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 neArr = info.children.concat();
for (let index = 0; index < neArr.length; index++) {
const v = neArr[index];
const ne = {
label: v.neName,
value: v.neId,
disabled: false,
};
// 检查下级网元是否可用
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);
}
ne.disabled = !res.data.length;
} else {
neSelectOptions.value[index].disabled = true;
ne.disabled = true;
}
// 添加到树形数据
const root = neSelectTreeDate.value?.find(s => s.label === v.province);
if (root && Array.isArray(root.children)) {
root.children.push(ne);
} else {
neSelectTreeDate.value?.push({
label: v.province,
value: 'SYNC_' + v.province,
children: [ne],
});
}
const key = 'SYNC_' + v.province;
// 初始区域
if (neIdSelect.value.length === 0) {
neTypeSelect.value[1] = key;
}
// 同区域内添加
if (neTypeSelect.value[1] === key) {
neIdSelect.value.push(v.neId);
}
}
}
@@ -87,20 +98,23 @@ async function fnSelectNeType(_: any, info: any) {
}
/**网元类型neId选择 */
function fnSelectNeId(_: any, info: any) {
if (!info) {
neTypeSelect.value[1] = 'SYNC';
if (info.children && Array.isArray(info.children)) {
const okArr = info.children.filter((item: any) => !item.disabled);
if (Array.isArray(okArr) && okArr.length === 0) {
message.warning({
content: `${t('views.ne.neConfig.noConfigdDisabled')}`,
duration: 3,
});
neIdSelect.value = [];
return;
}
neTypeSelect.value[1] = info.value;
neIdSelect.value = okArr.map((item: any) => item.value);
} else {
neTypeSelect.value[1] = info.neId;
neTypeSelect.value[1] = info.value;
}
fnActiveConfigNode(treeState.data[0].key);
}
/**网元服务地区选择 */
function fnSelectProvince(province: string) {
// neTypeSelectProvince.value = province;
nextTick(() => {
fnActiveConfigNode(treeState.data[0].key);
});
}
/**左侧导航是否可收起 */
let collapsible = ref<boolean>(true);
@@ -181,7 +195,7 @@ function fnActiveConfigNode(key: string | number) {
let neId = neTypeSelect.value[1];
// 无neId时取首个可连接的
if (neId === 'SYNC') {
if (neId.startsWith('SYNC')) {
const oneNeId = neIdSelect.value[0];
if (oneNeId) {
neId = oneNeId;
@@ -253,7 +267,7 @@ async function fnGetNeConfig(neType: string) {
/**过滤可见项 */
const treeStateData = computed(() => {
// 公共
if (neTypeSelect.value[1] === 'SYNC') {
if (neTypeSelect.value[1].startsWith('SYNC')) {
return treeState.data.filter(item => item.visible === 'public');
}
// 具体网元
@@ -295,7 +309,7 @@ function fnGetNeConfigData(
if (param.paramType === 'list') {
// 过滤可见规则项
let ruleArrFilter: Record<string, any>[] = [];
if (neTypeSelect.value[1] === 'SYNC') {
if (neTypeSelect.value[1].startsWith('SYNC')) {
ruleArrFilter = ruleArr.filter(item => item['visible'] === 'public');
} else {
ruleArrFilter = ruleArr.filter(item => item['visible'] === 'self');
@@ -461,7 +475,12 @@ watch(
val => {
// SMF需要选择配置的UPF id
if (val && neTypeSelect.value[0] === 'SMF') {
smfByUPFIdLoadData(neTypeSelect.value[1]);
if (neTypeSelect.value[1].startsWith('SYNC')) {
smfByUPFIdLoadData(neTypeSelect.value[1]);
return;
} else {
smfByUPFIdLoadData(neTypeSelect.value[1]);
}
}
}
);
@@ -533,12 +552,10 @@ onMounted(() => {
// 默认选择AMF
const item = neCascaderOptions.value.find(s => s.value === 'AMF');
if (item && item.children) {
neSelectOptions.value = item.children.concat();
fnSelectNeType(null, item);
// const info = item.children[0];
// neTypeSelect.value = [info.neType, info.neId];
} else {
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];
@@ -581,15 +598,23 @@ onMounted(() => {
style="width: 40%"
>
</a-select>
<a-select
<a-tree-select
v-model:value="neTypeSelect[1]"
:status="neIdSelect.length === 0 ? 'warning' : ''"
:disabled="treeState.selectLoading"
:value="neTypeSelect[1]"
:options="neSelectOptions"
:allow-clear="true"
@change="fnSelectNeId"
:tree-data="neSelectTreeDate"
:maxTagCount="1"
:show-search="true"
:allow-clear="false"
:tree-default-expand-all="true"
:tree-checkable="false"
:show-checked-strategy="TreeSelect.SHOW_PARENT"
placement="bottomRight"
tree-node-filter-prop="label"
style="width: 60%"
@select="fnSelectNeId"
>
</a-select>
</a-tree-select>
</a-input-group>
</a-form-item>
<a-form-item name="treeStateData">
@@ -632,13 +657,6 @@ onMounted(() => {
</template>
<template #extra>
<a-space :size="8" align="center" v-show="!treeState.selectLoading">
<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