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

191
src/views/ne/neConfig/components/CheckSyncNe/index.vue Normal file
View File

@@ -0,0 +1,191 @@
<script setup lang="ts">
import { computed, nextTick, reactive, watch } from 'vue';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const emit = defineEmits(['province', 'update:province', 'update:checks']);
const props = defineProps({
/**
* 可选类型下的网元列表 neSelectOptions
*/
selects: {
type: Array<any>,
required: true,
},
/**
* 选择区域
*/
province: {
type: String,
default: '',
},
/**
* 选择勾选的同步网元neId
*/
checks: {
type: Array<string>,
default: () => [],
},
});
/**表格字段列勾选状态 */
const state = reactive<{
indeterminate: boolean;
/**是否全选 */
checkAll: boolean;
/**勾选列表 */
checks: string[];
}>({
indeterminate: false,
checkAll: true,
checks: props.checks,
});
watch(
() => props.checks,
val => {
state.checks = val;
}
);
/**列全选操作 */
function fnCheckAllChange(e: any) {
state.indeterminate = false;
state.checks = [];
const checked = e.target.checked;
if (checked) {
const group = selectGroup.value;
const arr = group[props.province];
for (const v of arr) {
if (v.disabled) {
continue;
}
state.checks.push(`${v.neId}`);
}
}
emit('update:checks', state.checks);
}
/**列勾选字段变化 */
function fnUpdateCheck(_: any) {
// 同区域全选
const selects: string[] = [];
const group = selectGroup.value;
const arr = group[props.province];
for (const v of arr) {
if (v.disabled) {
continue;
}
selects.push(`${v.neId}`);
}
// 判断是否全选
const len = state.checks.length;
state.indeterminate = !!len && len < selects.length;
state.checkAll = len === selects.length;
emit('update:checks', state.checks);
}
/**
* 选择的网元分组
*/
const selectGroup = computed(() => {
const group: Record<string, any> = {};
for (const element of props.selects) {
const key = element['province'];
if (group[key]) {
group[key].push(element);
} else {
group[key] = [element];
}
}
return group;
});
/**
* 选择的网元分组
*/
function fnProvinceCheck(province: string) {
emit('update:province', province);
nextTick(() => {
fnCheckAllChange({ target: { checked: true } });
}).finally(() => {
emit('province', province);
});
}
</script>
<template>
<a-tooltip placement="topRight">
<template #title>
{{ t('views.ne.neConfig.checkSync.tip') }}
</template>
<a-popover trigger="click" placement="bottomRight">
<template #title>
<div class="title">
<a-checkbox
v-model:checked="state.checkAll"
:indeterminate="state.indeterminate"
@change="fnCheckAllChange"
>
{{ t('views.ne.neConfig.checkSync.title') }}
</a-checkbox>
</div>
</template>
<template #content>
<a-checkbox-group
v-model:value="state.checks"
@change="fnUpdateCheck"
style="width: 200px; max-height: 450px; overflow-y: auto"
>
<template v-for="(v, k) in selectGroup" :key="k">
<div class="item-title">
<span> {{ k }} </span>
<a-button size="small" type="dashed" @click="fnProvinceCheck(k)">
{{ t('views.ne.neConfig.checkSync.selectProvince') }}
</a-button>
</div>
<div class="item" v-for="i in v">
<a-checkbox
:value="i.neId"
:disabled="i.disabled || k !== province"
>
{{ i.neName }}
</a-checkbox>
</div>
<a-divider style="margin: 0"> </a-divider>
</template>
</a-checkbox-group>
</template>
<a-tag
:color="state.checks.length > 0 ? 'processing' : 'warning'"
style="cursor: pointer"
>
<template #icon> <SyncOutlined /> </template>
{{ t('views.ne.neConfig.checkSync.sync') }}
</a-tag>
</a-popover>
</a-tooltip>
</template>
<style lang="less" scoped>
.title {
display: flex;
align-items: center;
justify-content: space-between;
height: 32px;
margin-left: 4px;
}
.item-title {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 4px;
}
.item {
display: flex;
align-items: center;
width: 100%;
padding: 4px;
}
</style>

208
src/views/ne/neConfig/hooks/useConfigArray.ts
View File

@@ -4,19 +4,20 @@ import {
editNeConfigData,
} from '@/api/ne/neConfig';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { Modal,message } from 'ant-design-vue/es';
import { Modal, message } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { reactive, watch } from 'vue';
/**
* 参数配置array类型
* @param param 父级传入 { t, treeState, neTypeSelect, fnActiveConfigNode, ruleVerification, modalState, fnModalCancel}
* @param param 父级传入 { t, treeState, neTypeSelect, neIdSelect, fnActiveConfigNode, ruleVerification, modalState, fnModalCancel}
* @returns
*/
export default function useConfigArray({
t,
treeState,
neTypeSelect,
neIdSelect,
fnActiveConfigNode,
ruleVerification,
modalState,
@@ -130,29 +131,61 @@ export default function useConfigArray({
data[key] = from[key]['value'];
}
// 发送
// 请求
const reqArr = [];
if (neTypeSelect.value[1] !== 'SYNC') {
reqArr.push(
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc: loc,
})
);
} else {
for (const neId of neIdSelect.value) {
reqArr.push(
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neId,
paramName: treeState.selectNode.paramName,
paramData: data,
loc: loc,
})
);
}
}
// 无请求提示
if (reqArr.length === 0) {
message.warning({
content: t('views.ne.neConfig.neIdSyncPleace'),
duration: 3,
});
arrayEditClose();
return;
}
const hide = message.loading(t('common.loading'), 0);
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc: loc,
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
Promise.allSettled(reqArr)
.then(resArr => {
const rejected = resArr.find(res => res.status === 'rejected');
if (rejected) {
message.warning({
content: t('views.ne.neConfig.updateItemErr'),
duration: 3,
});
} else {
message.success({
content: t('views.ne.neConfig.updateItem', {
num: modalState.title,
}),
duration: 3,
});
}
const fulfilled = resArr.find(res => res.status === 'fulfilled');
if (fulfilled) {
fnActiveConfigNode('#');
} else {
message.warning({
content: t('views.ne.neConfig.updateItemErr'),
duration: 3,
});
}
})
.finally(() => {
@@ -172,28 +205,65 @@ export default function useConfigArray({
num: title,
}),
onOk() {
delNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
loc: loc,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.ne.neConfig.delItemOk', {
num: title,
}),
duration: 2,
});
arrayEditClose();
fnActiveConfigNode('#');
} else {
message.error({
content: `${res.msg}`,
duration: 2,
});
// 请求
const reqArr = [];
if (neTypeSelect.value[1] !== 'SYNC') {
reqArr.push(
delNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
loc: loc,
})
);
} else {
for (const neId of neIdSelect.value) {
reqArr.push(
delNeConfigData({
neType: neTypeSelect.value[0],
neId: neId,
paramName: treeState.selectNode.paramName,
loc: loc,
})
);
}
});
}
// 无请求提示
if (reqArr.length === 0) {
message.warning({
content: t('views.ne.neConfig.neIdSyncPleace'),
duration: 3,
});
arrayEditClose();
return;
}
const hide = message.loading(t('common.loading'), 0);
Promise.allSettled(reqArr)
.then(resArr => {
const rejected = resArr.find(res => res.status === 'rejected');
if (rejected) {
message.error({
content: `${rejected.reason}`,
duration: 2,
});
} else {
message.success({
content: t('views.ne.neConfig.delItemOk', {
num: title,
}),
duration: 2,
});
}
const fulfilled = resArr.find(res => res.status === 'fulfilled');
if (fulfilled) {
fnActiveConfigNode('#');
}
})
.finally(() => {
hide();
arrayEditClose();
});
},
});
}
@@ -264,29 +334,61 @@ export default function useConfigArray({
data[key] = from[key]['value'];
}
// 发送
// 请求
const reqArr = [];
if (neTypeSelect.value[1] !== 'SYNC') {
reqArr.push(
addNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc: `${from['index']['value']}`,
})
);
} else {
for (const neId of neIdSelect.value) {
reqArr.push(
addNeConfigData({
neType: neTypeSelect.value[0],
neId: neId,
paramName: treeState.selectNode.paramName,
paramData: data,
loc: `${from['index']['value']}`,
})
);
}
}
// 无请求提示
if (reqArr.length === 0) {
message.warning({
content: t('views.ne.neConfig.neIdSyncPleace'),
duration: 3,
});
arrayEditClose();
return;
}
const hide = message.loading(t('common.loading'), 0);
addNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc: `${from['index']['value']}`,
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
Promise.allSettled(reqArr)
.then(resArr => {
const rejected = resArr.find(res => res.status === 'rejected');
if (rejected) {
message.warning({
content: t('views.ne.neConfig.addItemErr'),
duration: 3,
});
} else {
message.success({
content: t('views.ne.neConfig.addItemOk', {
num: modalState.title,
}),
duration: 3,
});
}
const fulfilled = resArr.find(res => res.status === 'fulfilled');
if (fulfilled) {
fnActiveConfigNode('#');
} else {
message.warning({
content: t('views.ne.neConfig.addItemErr'),
duration: 3,
});
}
})
.finally(() => {

206
src/views/ne/neConfig/hooks/useConfigArrayChild.ts
View File

@@ -10,13 +10,14 @@ import { nextTick, reactive } from 'vue';
/**
* 参数配置array类型的嵌套array
* @param param 父级传入 { t, treeState, neTypeSelect, fnActiveConfigNode, ruleVerification, modalState, arrayState, arrayInitEdit, arrayInitAdd, arrayEditClose}
* @param param 父级传入 { t, treeState, neTypeSelect, neIdSelect, fnActiveConfigNode, ruleVerification, modalState, arrayState, arrayInitEdit, arrayInitAdd, arrayEditClose}
* @returns
*/
export default function useConfigArrayChild({
t,
treeState,
neTypeSelect,
neIdSelect,
fnActiveConfigNode,
ruleVerification,
modalState,
@@ -198,29 +199,61 @@ export default function useConfigArrayChild({
data[key] = from[key]['value'];
}
// 发送
// 请求
const reqArr = [];
if (neTypeSelect.value[1] !== 'SYNC') {
reqArr.push(
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc,
})
);
} else {
for (const neId of neIdSelect.value) {
reqArr.push(
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neId,
paramName: treeState.selectNode.paramName,
paramData: data,
loc,
})
);
}
}
// 无请求提示
if (reqArr.length === 0) {
message.warning({
content: t('views.ne.neConfig.neIdSyncPleace'),
duration: 3,
});
arrayEditClose();
return;
}
const hide = message.loading(t('common.loading'), 0);
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc,
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
Promise.allSettled(reqArr)
.then(resArr => {
const rejected = resArr.find(res => res.status === 'rejected');
if (rejected) {
message.warning({
content: t('views.ne.neConfig.updateItemErr'),
duration: 3,
});
} else {
message.success({
content: t('views.ne.neConfig.updateItem', {
num: modalState.title,
}),
duration: 3,
});
}
const fulfilled = resArr.find(res => res.status === 'fulfilled');
if (fulfilled) {
fnActiveConfigNode('#');
} else {
message.warning({
content: t('views.ne.neConfig.updateItemErr'),
duration: 3,
});
}
})
.finally(() => {
@@ -241,28 +274,65 @@ export default function useConfigArrayChild({
num: title,
}),
onOk() {
delNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
loc,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.ne.neConfig.delItemOk', {
num: title,
}),
duration: 2,
});
arrayEditClose();
fnActiveConfigNode('#');
} else {
message.error({
content: `${res.msg}`,
duration: 2,
});
// 请求
const reqArr = [];
if (neTypeSelect.value[1] !== 'SYNC') {
reqArr.push(
delNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
loc,
})
);
} else {
for (const neId of neIdSelect.value) {
reqArr.push(
delNeConfigData({
neType: neTypeSelect.value[0],
neId: neId,
paramName: treeState.selectNode.paramName,
loc,
})
);
}
});
}
// 无请求提示
if (reqArr.length === 0) {
message.warning({
content: t('views.ne.neConfig.neIdSyncPleace'),
duration: 3,
});
arrayEditClose();
return;
}
const hide = message.loading(t('common.loading'), 0);
Promise.allSettled(reqArr)
.then(resArr => {
const rejected = resArr.find(res => res.status === 'rejected');
if (rejected) {
message.error({
content: `${rejected.reason}`,
duration: 2,
});
} else {
message.success({
content: t('views.ne.neConfig.delItemOk', {
num: title,
}),
duration: 2,
});
}
const fulfilled = resArr.find(res => res.status === 'fulfilled');
if (fulfilled) {
fnActiveConfigNode('#');
}
})
.finally(() => {
hide();
arrayEditClose();
});
},
});
}
@@ -309,29 +379,61 @@ export default function useConfigArrayChild({
data[key] = from[key]['value'];
}
// 发送
// 请求
const reqArr = [];
if (neTypeSelect.value[1] !== 'SYNC') {
reqArr.push(
addNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc,
})
);
} else {
for (const neId of neIdSelect.value) {
reqArr.push(
addNeConfigData({
neType: neTypeSelect.value[0],
neId: neId,
paramName: treeState.selectNode.paramName,
paramData: data,
loc,
})
);
}
}
// 无请求提示
if (reqArr.length === 0) {
message.warning({
content: t('views.ne.neConfig.neIdSyncPleace'),
duration: 3,
});
arrayEditClose();
return;
}
const hide = message.loading(t('common.loading'), 0);
addNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc,
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
Promise.allSettled(reqArr)
.then(resArr => {
const rejected = resArr.find(res => res.status === 'rejected');
if (rejected) {
message.warning({
content: t('views.ne.neConfig.addItemErr'),
duration: 3,
});
} else {
message.success({
content: t('views.ne.neConfig.addItemOk', {
num: modalState.title,
}),
duration: 3,
});
}
const fulfilled = resArr.find(res => res.status === 'fulfilled');
if (fulfilled) {
fnActiveConfigNode('#');
} else {
message.warning({
content: t('views.ne.neConfig.addItemErr'),
duration: 3,
});
}
})
.finally(() => {

69
src/views/ne/neConfig/hooks/useConfigList.ts
View File

@@ -6,13 +6,14 @@ import { reactive, toRaw } from 'vue';
/**
* list类型参数处理
* @param param 父级传入 {t, treeState, neTypeSelect, ruleVerification}
* @param param 父级传入 {t, treeState, neTypeSelect, neIdSelect, ruleVerification}
* @returns
*/
export default function useConfigList({
t,
treeState,
neTypeSelect,
neIdSelect,
ruleVerification,
}: any) {
/**单列表状态类型 */
@@ -83,25 +84,64 @@ export default function useConfigList({
return;
}
// 发送
// 请求
const reqArr = [];
if (neTypeSelect.value[1] !== 'SYNC') {
reqArr.push(
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: {
[from['name']]: from['value'],
},
})
);
} else {
for (const neId of neIdSelect.value) {
reqArr.push(
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neId,
paramName: treeState.selectNode.paramName,
paramData: {
[from['name']]: from['value'],
},
})
);
}
}
// 无请求提示
if (reqArr.length === 0) {
message.warning({
content: t('views.ne.neConfig.neIdSyncPleace'),
duration: 3,
});
listState.confirmLoading = false;
listState.editRecord = {};
return;
}
listState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: {
[from['name']]: from['value'],
},
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
Promise.allSettled(reqArr)
.then(resArr => {
const rejected = resArr.find(res => res.status === 'rejected');
if (rejected) {
message.warning({
content: t('views.ne.neConfig.updateValueErr'),
duration: 3,
});
} else {
message.success({
content: t('views.ne.neConfig.updateValue', {
num: from['display'],
}),
duration: 3,
});
}
const fulfilled = resArr.find(res => res.status === 'fulfilled');
if (fulfilled) {
// 改变表格数据
const item = listState.data.find(
(item: Record<string, any>) => from['name'] === item['name']
@@ -109,11 +149,6 @@ export default function useConfigList({
if (item) {
Object.assign(item, listState.editRecord);
}
} else {
message.warning({
content: t('views.ne.neConfig.updateValueErr'),
duration: 3,
});
}
})
.finally(() => {

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>