perf: 替换旧网元参数配置页面
This commit is contained in:
TsMask
942
src/views/ne/neConfig/index.vue
Normal file
942
src/views/ne/neConfig/index.vue
Normal file
@@ -0,0 +1,942 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted, toRaw, watch } from 'vue';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import { message } from 'ant-design-vue/lib';
|
||||
import { DataNode } from 'ant-design-vue/lib/tree';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import useNeInfoStore from '@/store/modules/neinfo';
|
||||
import useOptions from './hooks/useOptions';
|
||||
import useConfigList from './hooks/useConfigList';
|
||||
import useConfigArray from './hooks/useConfigArray';
|
||||
import useConfigArrayChild from './hooks/useConfigArrayChild';
|
||||
import { getAllNeConfig, getNeConfigData } from '@/api/ne/neConfig';
|
||||
const neInfoStore = useNeInfoStore();
|
||||
const { t } = useI18n();
|
||||
const { ruleVerification, smfByUPFIdLoadData, smfByUPFIdOptions } = useOptions({
|
||||
t,
|
||||
});
|
||||
|
||||
/**网元参数 */
|
||||
let neCascaderOptions = ref<Record<string, any>[]>([]);
|
||||
|
||||
/**网元类型选择 type,id */
|
||||
let neTypeSelect = ref<string[]>(['', '']);
|
||||
|
||||
/**左侧导航是否可收起 */
|
||||
let collapsible = ref<boolean>(true);
|
||||
|
||||
/**改变收起状态 */
|
||||
function changeCollapsible() {
|
||||
collapsible.value = !collapsible.value;
|
||||
}
|
||||
|
||||
/**对象信息状态类型 */
|
||||
type TreeStateType = {
|
||||
/**网元 loading */
|
||||
loading: boolean;
|
||||
/**网元配置 tree */
|
||||
data: DataNode[];
|
||||
/**选择对应Node一级 tree */
|
||||
selectNode: {
|
||||
title: string;
|
||||
key: string;
|
||||
// 可选属性数据
|
||||
paramName: string;
|
||||
paramDisplay: string;
|
||||
paramType: string;
|
||||
paramPerms: string[];
|
||||
paramData: Record<string, any>[];
|
||||
};
|
||||
/**选择 loading */
|
||||
selectLoading: boolean;
|
||||
};
|
||||
|
||||
let treeState: TreeStateType = reactive({
|
||||
loading: true,
|
||||
data: [],
|
||||
selectNode: {
|
||||
paramName: '',
|
||||
paramDisplay: '',
|
||||
paramType: '',
|
||||
paramPerms: [],
|
||||
paramData: [],
|
||||
// 树形节点需要有
|
||||
title: '',
|
||||
key: '',
|
||||
},
|
||||
selectLoading: true,
|
||||
});
|
||||
|
||||
/**查询可选命令列表 */
|
||||
function fnSelectConfigNode(_: any, info: any) {
|
||||
const { key } = info.node;
|
||||
if (treeState.selectNode.paramName == key) {
|
||||
return;
|
||||
}
|
||||
fnActiveConfigNode(key);
|
||||
}
|
||||
|
||||
/**列表项点击监听 */
|
||||
function fnActiveConfigNode(key: string | number) {
|
||||
listState.data = [];
|
||||
arrayState.data = [];
|
||||
treeState.selectLoading = true;
|
||||
if (key === '#') {
|
||||
key = treeState.selectNode.paramName;
|
||||
} else {
|
||||
treeState.selectNode.paramName = key as string;
|
||||
}
|
||||
|
||||
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: key,
|
||||
}).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.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;
|
||||
tablePagination.current = 1;
|
||||
listEditClose();
|
||||
}
|
||||
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>[] = [];
|
||||
for (const v of arrayState.data) {
|
||||
const row: Record<string, any> = {};
|
||||
for (const item of v.record) {
|
||||
row[item.name] = item;
|
||||
}
|
||||
columnsData.push(row);
|
||||
}
|
||||
arrayState.columnsData = columnsData;
|
||||
// 列表字段
|
||||
const columns: Record<string, any>[] = [];
|
||||
for (const rule of arrayState.dataRule.record) {
|
||||
columns.push({
|
||||
title: rule.display,
|
||||
dataIndex: rule.name,
|
||||
align: 'left',
|
||||
resizable: true,
|
||||
width: 150,
|
||||
minWidth: 100,
|
||||
maxWidth: 350,
|
||||
});
|
||||
}
|
||||
columns.push({
|
||||
title: t('common.operate'),
|
||||
dataIndex: 'index',
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
});
|
||||
arrayState.columns = columns;
|
||||
tablePagination.current = 1;
|
||||
arrayEditClose();
|
||||
}
|
||||
setTimeout(() => {
|
||||
treeState.selectLoading = false;
|
||||
}, 300);
|
||||
} else {
|
||||
message.warning({
|
||||
content: `${param.paramDisplay} ${t(
|
||||
'views.configManage.configParamForm.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 = {
|
||||
/**添加框是否显示 */
|
||||
visible: boolean;
|
||||
/**标题 */
|
||||
title: string;
|
||||
/**表单数据 */
|
||||
from: Record<string, any>;
|
||||
/**确定按钮 loading */
|
||||
confirmLoading: boolean;
|
||||
/**项类型 */
|
||||
type: 'arrayAdd' | 'arrayEdit' | 'arrayChildAdd' | 'arrayChildEdit';
|
||||
/**项Key */
|
||||
key: string | number;
|
||||
/**项数据 */
|
||||
data: Record<string, any>[];
|
||||
};
|
||||
|
||||
/**对话框对象信息状态 */
|
||||
let modalState: ModalStateType = reactive({
|
||||
visible: false,
|
||||
title: 'Item',
|
||||
from: {},
|
||||
confirmLoading: false,
|
||||
type: 'arrayAdd',
|
||||
key: '',
|
||||
data: [],
|
||||
});
|
||||
|
||||
/**
|
||||
* 对话框弹出确认执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalOk() {
|
||||
const from = toRaw(modalState.from);
|
||||
if (modalState.type === 'arrayAdd') {
|
||||
arrayAddOk(from);
|
||||
}
|
||||
if (modalState.type === 'arrayEdit') {
|
||||
arrayEditOk(from);
|
||||
}
|
||||
if (modalState.type === 'arrayChildAdd') {
|
||||
arrayChildAddOk(from);
|
||||
}
|
||||
if (modalState.type === 'arrayChildEdit') {
|
||||
arrayChildEditOk(from);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 对话框弹出关闭执行函数
|
||||
* 进行表达规则校验
|
||||
*/
|
||||
function fnModalCancel() {
|
||||
modalState.visible = false;
|
||||
modalState.from = {};
|
||||
modalState.type = 'arrayAdd';
|
||||
modalState.key = '';
|
||||
modalState.data = [];
|
||||
}
|
||||
|
||||
// 监听新增编辑弹窗
|
||||
watch(
|
||||
() => modalState.visible,
|
||||
val => {
|
||||
// SMF需要选择配置的UPF id
|
||||
if (val && neTypeSelect.value[0] === 'SMF') {
|
||||
smfByUPFIdLoadData(neTypeSelect.value[1]);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const { tablePagination, listState, listEdit, listEditClose, listEditOk } =
|
||||
useConfigList({ t, treeState, neTypeSelect, ruleVerification });
|
||||
|
||||
const {
|
||||
arrayState,
|
||||
arrayEdit,
|
||||
arrayEditClose,
|
||||
arrayEditOk,
|
||||
arrayDelete,
|
||||
arrayAdd,
|
||||
arrayAddOk,
|
||||
arrayInitEdit,
|
||||
arrayInitAdd,
|
||||
} = useConfigArray({
|
||||
t,
|
||||
treeState,
|
||||
neTypeSelect,
|
||||
fnActiveConfigNode,
|
||||
ruleVerification,
|
||||
modalState,
|
||||
fnModalCancel,
|
||||
});
|
||||
|
||||
const {
|
||||
arrayChildState,
|
||||
arrayChildExpand,
|
||||
arrayChildEdit,
|
||||
arrayChildEditOk,
|
||||
arrayChildDelete,
|
||||
arrayChildAdd,
|
||||
arrayChildAddOk,
|
||||
} = useConfigArrayChild({
|
||||
t,
|
||||
treeState,
|
||||
neTypeSelect,
|
||||
fnActiveConfigNode,
|
||||
ruleVerification,
|
||||
modalState,
|
||||
arrayState,
|
||||
arrayInitEdit,
|
||||
arrayInitAdd,
|
||||
arrayEditClose,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// 获取网元网元列表
|
||||
neInfoStore.fnNelist().then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
if (res.data.length > 0) {
|
||||
// 过滤不可用的网元
|
||||
neCascaderOptions.value = neInfoStore.getNeSelectOtions.filter(
|
||||
(item: any) => {
|
||||
return !['OMC', 'LMF', 'NEF'].includes(item.value);
|
||||
}
|
||||
);
|
||||
if (neCascaderOptions.value.length === 0) {
|
||||
message.warning({
|
||||
content: t('common.noData'),
|
||||
duration: 2,
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 默认选择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];
|
||||
} else {
|
||||
const info = neCascaderOptions.value[0].children[0];
|
||||
neTypeSelect.value = [info.neType, info.neId];
|
||||
}
|
||||
fnGetNeConfig();
|
||||
}
|
||||
} else {
|
||||
message.warning({
|
||||
content: t('common.noData'),
|
||||
duration: 2,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageContainer>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
:lg="6"
|
||||
:md="6"
|
||||
:xs="24"
|
||||
style="margin-bottom: 24px"
|
||||
v-show="collapsible"
|
||||
>
|
||||
<!-- 网元类型 -->
|
||||
<a-card size="small" :bordered="false" :loading="treeState.loading">
|
||||
<template #title>
|
||||
{{ t('views.configManage.configParamForm.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>
|
||||
<a-form-item name="listeningPort">
|
||||
<a-tree
|
||||
:tree-data="treeState.data"
|
||||
:selected-keys="[treeState.selectNode.paramName]"
|
||||
@select="fnSelectConfigNode"
|
||||
>
|
||||
</a-tree>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="collapsible ? 18 : 24" :md="collapsible ? 18 : 24" :xs="24">
|
||||
<a-card
|
||||
size="small"
|
||||
:bordered="false"
|
||||
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
|
||||
:loading="treeState.selectLoading"
|
||||
>
|
||||
<template #title>
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.prevent="changeCollapsible()"
|
||||
>
|
||||
<template #icon>
|
||||
<MenuFoldOutlined v-show="collapsible" />
|
||||
<MenuUnfoldOutlined v-show="!collapsible" />
|
||||
</template>
|
||||
</a-button>
|
||||
|
||||
<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') }}
|
||||
</a-typography-text>
|
||||
</template>
|
||||
<template #extra>
|
||||
<a-space :size="8" align="center" v-show="!treeState.selectLoading">
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.reloadText') }}</template>
|
||||
<a-button
|
||||
type="default"
|
||||
size="small"
|
||||
@click.prevent="fnActiveConfigNode('#')"
|
||||
>
|
||||
<template #icon>
|
||||
<ReloadOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 单列表格列表 -->
|
||||
<a-table
|
||||
v-if="treeState.selectNode.paramType === 'list'"
|
||||
class="table"
|
||||
row-key="name"
|
||||
:size="listState.size"
|
||||
:columns="listState.columns"
|
||||
:data-source="listState.data"
|
||||
:pagination="tablePagination"
|
||||
:bordered="true"
|
||||
:scroll="{ x: true, y: '500px' }"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column.dataIndex === 'value'">
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title v-if="record.comment">
|
||||
{{ record.comment }}
|
||||
</template>
|
||||
<div class="editable-cell">
|
||||
<div
|
||||
v-if="
|
||||
listState.editRecord['display'] === record['display']
|
||||
"
|
||||
class="editable-cell__input-wrapper"
|
||||
>
|
||||
<a-input-number
|
||||
v-if="record['type'] === 'int'"
|
||||
v-model:value="listState.editRecord['value']"
|
||||
:disabled="listState.confirmLoading"
|
||||
style="width: 100%"
|
||||
></a-input-number>
|
||||
<a-switch
|
||||
v-else-if="record['type'] === 'bool'"
|
||||
v-model:checked="listState.editRecord['value']"
|
||||
:checked-children="t('common.switch.open')"
|
||||
:un-checked-children="t('common.switch.shut')"
|
||||
:disabled="listState.confirmLoading"
|
||||
></a-switch>
|
||||
<a-select
|
||||
v-else-if="record['type'] === 'enum'"
|
||||
v-model:value="listState.editRecord['value']"
|
||||
:allow-clear="true"
|
||||
:disabled="listState.confirmLoading"
|
||||
style="width: 100%"
|
||||
>
|
||||
<a-select-option
|
||||
:value="+v"
|
||||
:key="+v"
|
||||
v-for="(k, v) in JSON.parse(record['filter'])"
|
||||
>
|
||||
{{ k }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-input
|
||||
v-else
|
||||
v-model:value="listState.editRecord['value']"
|
||||
:disabled="listState.confirmLoading"
|
||||
></a-input>
|
||||
<a-space
|
||||
:size="8"
|
||||
align="center"
|
||||
direction="horizontal"
|
||||
style="margin-left: 18px"
|
||||
>
|
||||
<a-tooltip placement="bottomRight">
|
||||
<template #title> {{ t('common.ok') }} </template>
|
||||
<a-popconfirm
|
||||
:title="
|
||||
t(
|
||||
'views.configManage.configParamForm.editOkTip',
|
||||
{ num: record['display'] }
|
||||
)
|
||||
"
|
||||
placement="topRight"
|
||||
:disabled="listState.confirmLoading"
|
||||
@confirm="listEditOk()"
|
||||
>
|
||||
<a-button
|
||||
type="text"
|
||||
class="editable-cell__icon-edit"
|
||||
:disabled="listState.confirmLoading"
|
||||
>
|
||||
<template #icon>
|
||||
<CheckOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="bottomRight">
|
||||
<template #title> {{ t('common.cancel') }} </template>
|
||||
<a-button
|
||||
type="text"
|
||||
class="editable-cell__icon-edit"
|
||||
:disabled="listState.confirmLoading"
|
||||
@click.prevent="listEditClose()"
|
||||
>
|
||||
<template #icon>
|
||||
<CloseOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="editable-cell__text-wrapper"
|
||||
@dblclick="listEdit(record)"
|
||||
>
|
||||
<template v-if="record['type'] === 'enum'">
|
||||
{{ JSON.parse(record['filter'])[text] }}
|
||||
</template>
|
||||
<template v-else>{{ `${text}` || ' ' }}</template>
|
||||
<EditOutlined
|
||||
class="editable-cell__icon"
|
||||
@click="listEdit(record)"
|
||||
style="margin-left: 18px"
|
||||
v-if="
|
||||
!['read-only', 'read', 'ro'].includes(
|
||||
record.access
|
||||
) && !listState.confirmLoading
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<!-- array类型 -->
|
||||
<template v-if="treeState.selectNode.paramType === 'array'">
|
||||
<a-table
|
||||
class="table"
|
||||
row-key="index"
|
||||
: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"
|
||||
:bordered="true"
|
||||
:scroll="{ x: arrayState.columnsDnd.length * 200, y: 480 }"
|
||||
@resizeColumn="(w:number, col:any) => (col.width = w)"
|
||||
:show-expand-column="false"
|
||||
v-model:expanded-row-keys="arrayState.arrayChildExpandKeys"
|
||||
>
|
||||
<!-- 多列新增操作 -->
|
||||
<template #title>
|
||||
<a-space :size="16" align="center">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click.prevent="arrayAdd()"
|
||||
size="small"
|
||||
v-if="treeState.selectNode.paramPerms.includes('post')"
|
||||
>
|
||||
<template #icon> <PlusOutlined /> </template>
|
||||
{{ t('common.addText') }}
|
||||
</a-button>
|
||||
<TableColumnsDnd
|
||||
type="ghost"
|
||||
:cache-id="treeState.selectNode.key"
|
||||
: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>
|
||||
</template>
|
||||
|
||||
<!-- 多列数据渲染 -->
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column?.key === 'index'">
|
||||
<a-space :size="16" align="center">
|
||||
<a-tooltip
|
||||
v-if="treeState.selectNode.paramPerms.includes('put')"
|
||||
>
|
||||
<template #title>{{ t('common.editText') }}</template>
|
||||
<a-button type="link" @click.prevent="arrayEdit(text)">
|
||||
<template #icon><FormOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip
|
||||
v-if="treeState.selectNode.paramPerms.includes('delete')"
|
||||
>
|
||||
<template #title>{{ t('common.deleteText') }}</template>
|
||||
<a-button type="link" @click.prevent="arrayDelete(text)">
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else-if="text">
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title v-if="text.comment">
|
||||
{{ text.comment }}
|
||||
</template>
|
||||
<div class="editable-cell">
|
||||
<template v-if="text.array">
|
||||
<a-button
|
||||
type="default"
|
||||
size="small"
|
||||
@click.prevent="
|
||||
arrayChildExpand(record['index'], text)
|
||||
"
|
||||
>
|
||||
<template #icon><BarsOutlined /></template>
|
||||
{{
|
||||
t('views.configManage.configParamForm.arrayMore')
|
||||
}}
|
||||
</a-button>
|
||||
<!--特殊字段拓展显示-->
|
||||
<span
|
||||
v-if="
|
||||
text.name === 'dnnList' && Array.isArray(text.value)
|
||||
"
|
||||
>
|
||||
({{
|
||||
text.value.length > 4
|
||||
? `${text.value
|
||||
.slice(0, 3)
|
||||
.map((s: any) => s.dnn)
|
||||
.join()}...${text.value.length}`
|
||||
: text.value.map((s: any) => s.dnn).join()
|
||||
}})
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<div v-else class="editable-cell__text-wrapper">
|
||||
<template v-if="text['type'] === 'enum'">
|
||||
{{ JSON.parse(text['filter'])[text.value] }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ `${text.value}` || ' ' }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 多列嵌套类型 -->
|
||||
<template #expandedRowRender>
|
||||
<a-table
|
||||
class="table"
|
||||
row-key="index"
|
||||
:columns="arrayChildState.columnsDnd"
|
||||
:data-source="arrayChildState.columnsData"
|
||||
:size="arrayChildState.size"
|
||||
:pagination="tablePagination"
|
||||
:bordered="true"
|
||||
:scroll="{
|
||||
x: arrayChildState.columnsDnd.length * 200,
|
||||
y: 200,
|
||||
}"
|
||||
@resizeColumn="(w:number, col:any) => (col.width = w)"
|
||||
>
|
||||
<template #title>
|
||||
<a-space :size="16" align="center">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click.prevent="arrayChildAdd"
|
||||
size="small"
|
||||
>
|
||||
<template #icon> <PlusOutlined /> </template>
|
||||
{{ t('common.addText') }} {{ arrayChildState.title }}
|
||||
</a-button>
|
||||
<TableColumnsDnd
|
||||
type="ghost"
|
||||
:cache-id="`${treeState.selectNode.key}:${arrayChildState.loc}`"
|
||||
:columns="[...arrayChildState.columns]"
|
||||
v-model:columns-dnd="arrayChildState.columnsDnd"
|
||||
v-if="arrayChildState.loc"
|
||||
></TableColumnsDnd>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column?.key === 'index'">
|
||||
<a-space :size="8" align="center">
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.editText') }}</template>
|
||||
<a-button
|
||||
type="link"
|
||||
@click.prevent="arrayChildEdit(text)"
|
||||
>
|
||||
<template #icon><FormOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
{{ t('common.deleteText') }}
|
||||
</template>
|
||||
<a-button
|
||||
type="link"
|
||||
@click.prevent="arrayChildDelete(text)"
|
||||
>
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-else-if="text">
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title v-if="text.comment">
|
||||
{{ text.comment }}
|
||||
</template>
|
||||
<div class="editable-cell">
|
||||
<template v-if="text.array">
|
||||
<a-button type="default" size="small">
|
||||
<template #icon><BarsOutlined /></template>
|
||||
{{
|
||||
t(
|
||||
'views.configManage.configParamForm.arrayMore'
|
||||
)
|
||||
}}
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<div v-else>
|
||||
<template v-if="text['type'] === 'enum'">
|
||||
{{ JSON.parse(text['filter'])[text.value] }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ `${text.value}` || ' ' }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 新增框或修改框 -->
|
||||
<ProModal
|
||||
:drag="true"
|
||||
:width="800"
|
||||
:destroyOnClose="true"
|
||||
:body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
|
||||
:keyboard="false"
|
||||
:mask-closable="false"
|
||||
:visible="modalState.visible"
|
||||
:title="modalState.title"
|
||||
:confirm-loading="modalState.confirmLoading"
|
||||
@ok="fnModalOk"
|
||||
@cancel="fnModalCancel"
|
||||
>
|
||||
<a-form
|
||||
class="form"
|
||||
layout="horizontal"
|
||||
autocomplete="off"
|
||||
:validate-on-rule-change="false"
|
||||
:validateTrigger="[]"
|
||||
:label-col="{ span: 6 }"
|
||||
:labelWrap="true"
|
||||
>
|
||||
<a-form-item
|
||||
v-for="item in modalState.data"
|
||||
:label="item.display"
|
||||
:name="item.name"
|
||||
:required="item.optional === 'false'"
|
||||
style="margin-bottom: 4px"
|
||||
>
|
||||
<a-tooltip placement="topLeft">
|
||||
<template #title v-if="item.comment">
|
||||
{{ item.comment }}
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<div
|
||||
v-if="
|
||||
!Array.isArray(item.array) &&
|
||||
modalState.from[item.name] !== undefined
|
||||
"
|
||||
>
|
||||
<!-- 特殊SMF-upfid选择 -->
|
||||
<a-select
|
||||
v-if="
|
||||
neTypeSelect[0] === 'SMF' &&
|
||||
modalState.from[item.name]['name'] === 'upfId'
|
||||
"
|
||||
v-model:value="modalState.from[item.name]['value']"
|
||||
:options="smfByUPFIdOptions"
|
||||
:disabled="['read-only', 'read', 'ro'].includes(item.access)"
|
||||
:allow-clear="true"
|
||||
style="width: 100%"
|
||||
>
|
||||
</a-select>
|
||||
<!-- 常规 -->
|
||||
<a-input-number
|
||||
v-else-if="item['type'] === 'int'"
|
||||
v-model:value="modalState.from[item.name]['value']"
|
||||
:disabled="['read-only', 'read', 'ro'].includes(item.access)"
|
||||
style="width: 100%"
|
||||
></a-input-number>
|
||||
<a-switch
|
||||
v-else-if="item['type'] === 'bool'"
|
||||
v-model:checked="modalState.from[item.name]['value']"
|
||||
:checked-children="t('common.switch.open')"
|
||||
:un-checked-children="t('common.switch.shut')"
|
||||
:disabled="['read-only', 'read', 'ro'].includes(item.access)"
|
||||
></a-switch>
|
||||
<a-select
|
||||
v-else-if="item['type'] === 'enum'"
|
||||
v-model:value="modalState.from[item.name]['value']"
|
||||
:disabled="['read-only', 'read', 'ro'].includes(item.access)"
|
||||
:allow-clear="true"
|
||||
style="width: 100%"
|
||||
>
|
||||
<a-select-option
|
||||
:value="+v"
|
||||
:key="+v"
|
||||
v-for="(k, v) in JSON.parse(item['filter'])"
|
||||
>
|
||||
{{ k }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-input
|
||||
v-else
|
||||
v-model:value="modalState.from[item.name]['value']"
|
||||
:disabled="['read-only', 'read', 'ro'].includes(item.access)"
|
||||
></a-input>
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ `${item.value || ' '}` }}
|
||||
</div>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ProModal>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.editable-cell {
|
||||
&__icon {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
&__icon:hover {
|
||||
color: var(--ant-primary-color);
|
||||
}
|
||||
&__icon-edit:hover {
|
||||
color: var(--ant-primary-color);
|
||||
}
|
||||
&__text-wrapper {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
&__text-wrapper:hover &__icon {
|
||||
display: inline-block;
|
||||
}
|
||||
&__input-wrapper {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user