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

feat: 配置参数直连数据获取优化

Browse Source
This commit is contained in:
TsMask
2024-07-09 10:05:43 +08:00
parent bc0e463191
commit efa8764bd1
2 changed files with 280 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/api/ne/neConfig.ts Normal file
View File

@@ -0,0 +1,66 @@
import { request } from '@/plugins/http-fetch';
/**
* 网元参数配置可用属性值列表指定网元类型全部无分页
* @param query 查询参数
* @returns object
*/
export function getAllNeConfig(neType: string) {
return request({
url: `/ne/config/list/${neType}`,
method: 'get',
timeout: 60_000,
});
}
/**
* 网元参数配置数据信息
* @param params 数据 {neType,neId,paramName}
* @returns object
*/
export function getNeConfigData(params: Record<string, any>) {
return request({
url: `/ne/config/data`,
params,
method: 'get',
});
}
/**
* 网元参数配置数据更新
* @param data 数据 {neType,neId,paramName:"参数名",paramData:{参数},loc:"层级index仅array"}
* @returns object
*/
export function editNeConfigData(data: Record<string, any>) {
return request({
url: `/ne/config/data`,
method: 'put',
data: data,
});
}
/**
* 网元参数配置数据新增（array）
* @param data 数据 {neType,neId,paramName:"参数名",paramData:{参数},loc:"层级index"}
* @returns object
*/
export function addNeConfigData(data: Record<string, any>) {
return request({
url: `/ne/config/data`,
method: 'post',
data: data,
});
}
/**
* 网元参数配置数据删除（array）
* @param params 数据 {neType,neId,paramName:"参数名",loc:"层级index"}
* @returns object
*/
export function delNeConfigData(params: Record<string, any>) {
return request({
url: `/ne/config/data`,
method: 'delete',
params,
});
}

351
src/views/configManage/configParamTreeTable/index.vue
View File

@@ -17,6 +17,13 @@ import useOptions from './hooks/useOptions';
import useSMFOptions from './hooks/useSMFOptions';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { DataNode } from 'ant-design-vue/lib/tree';
import {
addNeConfigData,
delNeConfigData,
editNeConfigData,
getAllNeConfig,
getNeConfigData,
} from '@/api/ne/neConfig';
const neInfoStore = useNeInfoStore();
const { t } = useI18n();
const { ruleVerification } = useOptions();
@@ -43,7 +50,16 @@ type TreeStateType = {
/**网元配置 tree */
data: DataNode[];
/**选择对应Node一级 tree */
selectNode: Record<string, any>;
selectNode: {
title: string;
key: string;
// 可选属性数据
paramName: string;
paramDisplay: string;
paramType: string;
paramPerms: string[];
paramData: Record<string, any>[];
};
/**选择 loading */
selectLoading: boolean;
};
@@ -52,29 +68,24 @@ let treeState: TreeStateType = reactive({
loading: true,
data: [],
selectNode: {
topDisplay: '' as string,
topTag: '' as string,
method: [] as string[],
//
title: '' as string,
key: '' as string,
type: 'list' as 'list' | 'array',
paramName: '',
paramDisplay: '',
paramType: '',
paramPerms: [],
paramData: [],
// 树形节点需要有
title: '',
key: '',
},
selectLoading: true,
});
/**查询可选命令列表 */
function fnSelectConfigNode(_: any, info: any) {
const { title, key, method } = info.node;
treeState.selectNode.topDisplay = title;
treeState.selectNode.topTag = key;
if (method) {
treeState.selectNode.method = method.split(',');
} else {
treeState.selectNode.method = ['post', 'put', 'delete'];
const { key } = info.node;
if (treeState.selectNode.paramName == key) {
return;
}
treeState.selectNode.title = title;
treeState.selectNode.key = key;
fnActiveConfigNode(key);
}
@@ -83,26 +94,76 @@ function fnActiveConfigNode(key: string | number) {
listState.data = [];
arrayState.data = [];
treeState.selectLoading = true;
if (key !== '#') {
treeState.selectNode.topTag = key as string;
if (key === '#') {
key = treeState.selectNode.paramName;
} else {
treeState.selectNode.paramName = key as string;
}
// 获取数据
const neType = neTypeSelect.value[0];
const neId = neTypeSelect.value[1];
const topTag = treeState.selectNode.topTag;
getParamConfigInfoForm(neType, topTag, neId).then(res => {
if (res.code === RESULT_CODE_SUCCESS && res.data.type) {
const param = treeState.data.find(item => item.key === key);
if (!param) {
message.warning({
content: t('common.noData'),
duration: 3,
});
return;
}
treeState.selectNode = JSON.parse(JSON.stringify(param));
// 获取网元端的配置数据
getNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
treeState.selectLoading = false;
treeState.selectNode.topTag = topTag;
treeState.selectNode.type = res.data.type;
if (res.data.type === 'list') {
listState.data = res.data.data;
const ruleArr = param.paramData;
const dataArr = res.data;
if (param.paramType === 'list') {
// 列表项数据
const dataList = [];
for (const item of dataArr) {
for (const key in item) {
// 规则为准
for (const rule of ruleArr) {
if (rule['name'] === key) {
const ruleItem = Object.assign(rule, {
optional: 'true',
value: item[key],
});
dataList.push(ruleItem);
break;
}
}
}
}
listState.data = dataList;
listEditClose();
}
if (res.data.type === 'array') {
arrayState.data = res.data.data;
arrayState.dataRule = res.data.dataRule;
if (param.paramType === 'array') {
// 列表项数据
const dataArray = [];
for (const item of dataArr) {
const index = item['index'];
let record: Record<string, any>[] = [];
for (const key in item) {
// 规则为准
for (const rule of ruleArr) {
if (rule['name'] === key) {
const ruleItem = Object.assign({ optional: 'true' }, rule, {
value: item[key],
});
record.push(ruleItem);
break;
}
}
}
dataArray.push({ title: `Index-${index}`, key: index, record });
}
arrayState.data = dataArray;
// 无数据时，用于新增
arrayState.dataRule = { title: `Index-0`, key: 0, record: ruleArr };
// 列表数据
const columnsData: Record<string, any>[] = [];
@@ -114,7 +175,6 @@ function fnActiveConfigNode(key: string | number) {
columnsData.push(row);
}
arrayState.columnsData = columnsData;
// 列表字段
const columns: Record<string, any>[] = [];
for (const rule of arrayState.dataRule.record) {
@@ -142,15 +202,17 @@ function fnActiveConfigNode(key: string | number) {
}
} else {
message.warning({
content: t('common.noData'),
content: `${param.paramDisplay} ${t(
'views.configManage.configParamForm.noConfigData'
)}`,
duration: 3,
});
}
});
}
/**查询配置Tag标签 */
function fnGetParamConfigTopTab() {
/**查询配置可选属性值列表 */
function fnGetNeConfig() {
const neType = neTypeSelect.value[0];
if (!neType) {
message.warning({
@@ -162,31 +224,33 @@ function fnGetParamConfigTopTab() {
treeState.loading = true;
// 获取数据
getParamConfigTopTab(neType).then(res => {
getAllNeConfig(neType).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
treeState.data = res.data.map(item => ({
children: undefined,
title: item.topDisplay,
key: item.topTag,
...item,
}));
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 itemOne = res.data[0];
treeState.selectNode = {
title: itemOne.topDisplay,
key: itemOne.topTag,
type: 'list',
...itemOne,
};
fnActiveConfigNode(itemOne.topTag);
const item = JSON.parse(JSON.stringify(treeState.data[0]));
treeState.selectNode = item;
treeState.selectLoading = false;
fnActiveConfigNode(item.key);
}
} else {
message.warning({
content: t('views.configManage.configParamForm.noConfigData'),
duration: 3,
});
}
});
}
@@ -249,18 +313,14 @@ function listEditOk() {
// 发送
const hide = message.loading(t('common.loading'), 0);
let data = {
[from['name']]: from['value'],
};
updateParamConfigInfo(
'list',
{
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
topTag: treeState.selectNode.topTag,
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: {
[from['name']]: from['value'],
},
data
)
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
@@ -270,9 +330,9 @@ function listEditOk() {
duration: 3,
});
// 改变表格数据
const item = listState.data.filter(
const item = listState.data.find(
(item: Record<string, any>) => from['name'] === item['name']
)[0];
);
if (item) {
Object.assign(item, listState.editRecord);
}
@@ -360,7 +420,7 @@ function arrayEdit(rowIndex: Record<string, any>) {
modalState.from = row;
modalState.type = 'arrayEdit';
modalState.title = `${treeState.selectNode.topDisplay} ${from.title}`;
modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
modalState.key = from.key;
modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
modalState.visible = true;
@@ -377,8 +437,6 @@ function arrayEditClose() {
/**多列表编辑确认 */
function arrayEditOk(from: Record<string, any>) {
const loc = from['index']['value'];
const neType = neTypeSelect.value[0];
// 遍历提取属性和值
let data: Record<string, any> = {};
for (const key in from) {
@@ -400,16 +458,13 @@ function arrayEditOk(from: Record<string, any>) {
// 发送
const hide = message.loading(t('common.loading'), 0);
updateParamConfigInfo(
'array',
{
neType: neType,
neId: neTypeSelect.value[1],
topTag: treeState.selectNode.topTag,
loc,
},
data
)
editNeConfigData({
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) {
message.success({
@@ -434,8 +489,8 @@ function arrayEditOk(from: Record<string, any>) {
/**多列表删除单行 */
function arrayDelete(rowIndex: Record<string, any>) {
const index = rowIndex.value;
const title = `${treeState.selectNode.topDisplay} Index-${index}`;
const loc = rowIndex.value;
const title = `${treeState.selectNode.paramDisplay} Index-${loc}`;
Modal.confirm({
title: t('common.tipTitle'),
@@ -443,11 +498,11 @@ function arrayDelete(rowIndex: Record<string, any>) {
num: title,
}),
onOk() {
delParamConfigInfo({
delNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
topTag: treeState.selectNode.topTag,
loc: index,
paramName: treeState.selectNode.paramName,
loc: loc,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
@@ -484,7 +539,7 @@ function arrayAdd() {
modalState.from = row;
modalState.type = 'arrayAdd';
modalState.title = `${treeState.selectNode.topDisplay} ${from.title}`;
modalState.title = `${treeState.selectNode.paramDisplay} ${from.title}`;
modalState.key = from.key;
modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
modalState.visible = true;
@@ -492,8 +547,6 @@ function arrayAdd() {
/**多列表新增单行确认 */
function arrayAddOk(from: Record<string, any>) {
const index = from['index']['value'];
const neType = neTypeSelect.value[0];
// 遍历提取属性和值
let data: Record<string, any> = {};
for (const key in from) {
@@ -515,15 +568,13 @@ function arrayAddOk(from: Record<string, any>) {
// 发送
const hide = message.loading(t('common.loading'), 0);
addParamConfigInfo(
{
neType: neType,
neId: neTypeSelect.value[1],
topTag: treeState.selectNode.topTag,
loc: index,
},
data
)
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) {
message.success({
@@ -703,9 +754,7 @@ function arrayChildEdit(rowIndex: Record<string, any>) {
/**多列表嵌套行编辑确认 */
function arrayChildEditOk(from: Record<string, any>) {
const index = from['index']['value'];
const loc = `${arrayChildState.loc}/${index}`;
const neType = neTypeSelect.value[0];
const loc = `${arrayChildState.loc}/${from['index']['value']}`;
let data: Record<string, any> = {};
for (const key in from) {
@@ -727,16 +776,13 @@ function arrayChildEditOk(from: Record<string, any>) {
// 发送
const hide = message.loading(t('common.loading'), 0);
updateParamConfigInfo(
'array',
{
neType: neType,
neId: neTypeSelect.value[1],
topTag: treeState.selectNode.topTag,
loc,
},
data
)
editNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc,
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
@@ -771,10 +817,10 @@ function arrayChildDelete(rowIndex: Record<string, any>) {
num: title,
}),
onOk() {
delParamConfigInfo({
delNeConfigData({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
topTag: treeState.selectNode.topTag,
paramName: treeState.selectNode.paramName,
loc,
}).then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
@@ -819,8 +865,7 @@ function arrayChildAdd() {
/**多列表新增单行确认 */
function arrayChildAddOk(from: Record<string, any>) {
const index = from['index']['value'];
const loc = `${arrayChildState.loc}/${index}`;
const loc = `${arrayChildState.loc}/${from['index']['value']}`;
const neType = neTypeSelect.value[0];
let data: Record<string, any> = {};
@@ -843,15 +888,13 @@ function arrayChildAddOk(from: Record<string, any>) {
// 发送
const hide = message.loading(t('common.loading'), 0);
addParamConfigInfo(
{
neType: neType,
neId: neTypeSelect.value[1],
topTag: treeState.selectNode.topTag,
loc,
},
data
)
addNeConfigData({
neType: neType,
neId: neTypeSelect.value[1],
paramName: treeState.selectNode.paramName,
paramData: data,
loc,
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
@@ -1055,7 +1098,7 @@ onMounted(() => {
const info = neCascaderOptions.value[0].children[0];
neTypeSelect.value = [info.neType, info.neId];
}
fnGetParamConfigTopTab();
fnGetNeConfig();
}
} else {
message.warning({
@@ -1069,6 +1112,32 @@ onMounted(() => {
<template>
<PageContainer>
<a-card
:bordered="false"
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
>
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="（管理员/教师）查看学生" name="neType ">
<a-auto-complete
:options="neInfoStore.getNeSelectOtions"
allow-clear
:placeholder="t('views.configManage.license.neTypePlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button>(管理员/教师)保存当前网元为示例配置</a-button>
<a-button>(学生/教师)重置当前网元为示例配置</a-button>
<a-button>(学生)申请应用当前网元配置</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-card>
<a-row :gutter="16">
<a-col
:lg="6"
@@ -1090,13 +1159,13 @@ onMounted(() => {
v-model:value="neTypeSelect"
:options="neCascaderOptions"
:allow-clear="false"
@change="fnGetParamConfigTopTab"
@change="fnGetNeConfig"
/>
</a-form-item>
<a-form-item name="listeningPort">
<a-tree
:tree-data="treeState.data"
:selected-keys="[treeState.selectNode.topTag]"
:selected-keys="[treeState.selectNode.paramName]"
@select="fnSelectConfigNode"
>
</a-tree>
@@ -1119,8 +1188,8 @@ onMounted(() => {
</template>
</a-button>
<a-typography-text strong v-if="treeState.selectNode.topDisplay">
{{ treeState.selectNode.topDisplay }}
<a-typography-text strong v-if="treeState.selectNode.paramDisplay">
{{ treeState.selectNode.paramDisplay }}
</a-typography-text>
<a-typography-text type="danger" v-else>
{{ t('views.configManage.configParamForm.treeSelectTip') }}
@@ -1128,6 +1197,14 @@ onMounted(() => {
</template>
<template #extra>
<a-space :size="8" align="center" v-show="!treeState.selectLoading">
<a-tooltip>
<template #title>历史记录</template>
<a-button type="default" @click.prevent="">
<template #icon>
<BlockOutlined />
</template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button
@@ -1144,7 +1221,7 @@ onMounted(() => {
<!-- 单列表格列表 -->
<a-table
v-if="treeState.selectNode.type === 'list'"
v-if="treeState.selectNode.paramType === 'list'"
class="table"
row-key="name"
:size="listState.size"
@@ -1251,11 +1328,11 @@ onMounted(() => {
</a-table>
<!-- array类型 -->
<template v-if="treeState.selectNode.type === 'array'">
<template v-if="treeState.selectNode.paramType === 'array'">
<a-table
class="table"
row-key="index"
:columns="treeState.selectNode.method.includes('get') ? arrayState.columnsDnd.filter((s:any)=>s.key !== 'index') : arrayState.columnsDnd"
:columns="treeState.selectNode.paramPerms.includes('get') ? arrayState.columnsDnd.filter((s:any)=>s.key !== 'index') : arrayState.columnsDnd"
:data-source="arrayState.columnsData"
:size="arrayState.size"
:pagination="tablePagination"
@@ -1272,7 +1349,7 @@ onMounted(() => {
type="primary"
@click.prevent="arrayAdd()"
size="small"
v-if="treeState.selectNode.method.includes('post')"
v-if="treeState.selectNode.paramPerms.includes('post')"
>
<template #icon> <PlusOutlined /> </template>
{{ t('common.addText') }}
@@ -1280,7 +1357,7 @@ onMounted(() => {
<TableColumnsDnd
type="ghost"
:cache-id="treeState.selectNode.key"
:columns="treeState.selectNode.method.includes('get') ? [...arrayState.columns.filter((s:any)=>s.key !== 'index')] : arrayState.columns"
:columns="treeState.selectNode.paramPerms.includes('get') ? [...arrayState.columns.filter((s:any)=>s.key !== 'index')] : arrayState.columns"
v-model:columns-dnd="arrayState.columnsDnd"
></TableColumnsDnd>
</a-space>
@@ -1291,7 +1368,7 @@ onMounted(() => {
<template v-if="column?.key === 'index'">
<a-space :size="16" align="center">
<a-tooltip
v-if="treeState.selectNode.method.includes('put')"
v-if="treeState.selectNode.paramPerms.includes('put')"
>
<template #title>{{ t('common.editText') }}</template>
<a-button type="link" @click.prevent="arrayEdit(text)">
@@ -1299,7 +1376,7 @@ onMounted(() => {
</a-button>
</a-tooltip>
<a-tooltip
v-if="treeState.selectNode.method.includes('delete')"
v-if="treeState.selectNode.paramPerms.includes('delete')"
>
<template #title>{{ t('common.deleteText') }}</template>
<a-button type="link" @click.prevent="arrayDelete(text)">