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

feat: 参数配置四个版本排版-_-||

Browse Source
This commit is contained in:
TsMask
2023-11-16 11:40:18 +08:00
parent 1238dc3a35
commit bfc0afdb14
4 changed files with 284 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/views/configManage/configParam/index.vue
View File

@@ -1424,14 +1424,19 @@ onMounted(() => {
</a-select-option>
</a-select>
</div>
<template v-else-if="text.array">
<a-button
type="link"
size="small"
@click.prevent="arrayChildExpand(record['index'], text)"
v-else-if="Array.isArray(text.array)"
>
{{ t('common.viewText') }}
{{ t('views.configManage.configParamForm.arrayMore') }}
</a-button>
<!--特殊字段拓展显示-->
<span v-if="text.name === 'dnnList'">
({{ text.value.map((s: any) => s.dnn).join() }})
</span>
</template>
<div v-else class="editable-cell__text-wrapper">
{{ `${text.value}` || '&nbsp;' }}
</div>

2
src/views/configManage/configParamForm/index.vue
View File

@@ -239,7 +239,6 @@ let arrayState: ArrayStateType = reactive({
/**多列表编辑 */
function arrayEdit(item: Record<string, any>, index: number) {
console.log(item, index);
const row: Record<string, any> = {};
for (const v of item.record) {
row[v.name] = Object.assign({}, v);
@@ -521,7 +520,6 @@ function arrayChildExpandClose() {
/**多列表嵌套行编辑 */
function arrayChildEdit(item: Record<string, any>, index: number) {
console.log(item, index);
const row: Record<string, any> = {};
for (const v of item.record) {
row[v.name] = Object.assign({}, v);

13
src/views/configManage/configParamTree/index.vue
View File

@@ -267,7 +267,6 @@ let arrayState: ArrayStateType = reactive({
/**多列表编辑 */
function arrayEdit(item: Record<string, any>, index: number) {
console.log(item, index);
const row: Record<string, any> = {};
for (const v of item.record) {
row[v.name] = Object.assign({}, v);
@@ -395,7 +394,6 @@ function arrayAdd() {
row[v.name] = Object.assign({}, v);
}
console.log(Array.isArray(from.record), from.record);
modalState.from = row;
modalState.type = 'array';
modalState.title = from.title;
@@ -550,7 +548,6 @@ function arrayChildExpandClose() {
/**多列表嵌套行编辑 */
function arrayChildEdit(item: Record<string, any>, index: number) {
console.log(item, index);
const row: Record<string, any> = {};
for (const v of item.record) {
row[v.name] = Object.assign({}, v);
@@ -1386,11 +1383,11 @@ onMounted(() => {
</a-select>
</div>
<template v-if="item.array">
<a-button
type="link"
size="small"
@click.prevent="arrayChildExpand(data.key, item)"
v-else-if="Array.isArray(item.array)"
>
{{
arrayState.newIndex === -1
@@ -1400,6 +1397,11 @@ onMounted(() => {
)
}}
</a-button>
<!--特殊字段拓展显示-->
<span v-if="item.name === 'dnnList'">
({{ item.value.map((s: any) => s.dnn).join() }})
</span>
</template>
<div v-else>
{{ `${item.value}` || '&nbsp;' }}
@@ -1614,7 +1616,7 @@ onMounted(() => {
<a-button
type="link"
size="small"
v-else-if="Array.isArray(item.array)"
v-else-if="item.array"
>
{{
arrayChildState.newIndex === -1
@@ -1668,6 +1670,7 @@ onMounted(() => {
:label="item.display"
:name="item.name"
:required="item.optional === 'false'"
style="margin-bottom: 2px"
>
<a-tooltip placement="topLeft">
<template #title v-if="item.comment">

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

@@ -87,6 +87,18 @@ function fnActiveConfigNode(key: string | number) {
if (res.data.type === 'array') {
arrayState.data = res.data.data;
arrayState.dataRule = res.data.dataRule;
// 列表数据
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) {
@@ -97,14 +109,16 @@ function fnActiveConfigNode(key: string | number) {
width: 5,
});
}
arrayState.columns = columns;
arrayState.columns.push({
columns.push({
title: t('common.operate'),
dataIndex: 'index',
key: 'index',
align: 'left',
fixed: 'right',
width: 5,
});
arrayState.columns = columns;
arrayState.collapseActiveKey = [];
arrayEditClose();
}
@@ -265,6 +279,8 @@ type ArrayStateType = {
size: SizeType;
/**多列嵌套记录字段 */
columns: Record<string, any>[];
/**多列记录数据 */
columnsData: Record<string, any>[];
/**多列嵌套展开key */
arrayChildExpandKeys: any[];
@@ -285,6 +301,7 @@ let arrayState: ArrayStateType = reactive({
collapseActiveKey: [],
size: 'middle',
columns: [],
columnsData: [],
arrayChildExpandKeys: [],
data: [],
dataRule: {},
@@ -294,23 +311,21 @@ let arrayState: ArrayStateType = reactive({
});
/**多列表编辑 */
function arrayEdit(item: Record<string, any>, index: number) {
console.log(item, index);
function arrayEdit(rowIndex: Record<string, any>) {
const item = arrayState.data.find((s: any) => s.key === rowIndex.value);
if (!item) return;
const row: Record<string, any> = {};
for (const v of item.record) {
row[v.name] = Object.assign({}, v);
}
arrayState.editRecord = row;
arrayState.editKey = item.key;
arrayState.newIndex = index;
// 面板
const hasIndex = arrayState.collapseActiveKey.indexOf(`${item.key}`);
if (hasIndex === -1) {
arrayState.collapseActiveKey.push(`${item.key}`);
} else {
// tableState.collapseActiveKey.splice(hasIndex, 1);
}
modalState.from = row;
modalState.type = 'arrayEdit';
modalState.title = `${treeState.selectNode.topDisplay} ${item.title}`;
modalState.key = item.key;
modalState.data = item.record.filter((v: any) => !Array.isArray(v.array));
modalState.visible = true;
// 关闭嵌套
arrayChildExpandClose();
@@ -318,15 +333,12 @@ function arrayEdit(item: Record<string, any>, index: number) {
/**多列表编辑关闭 */
function arrayEditClose() {
arrayState.editRecord = {};
arrayState.newIndex = -3;
arrayState.editKey = -1;
arrayChildEditClose();
arrayChildExpandClose();
fnModalCancel();
}
/**多列表编辑确认 */
function arrayEditOk() {
const from = toRaw(arrayState.editRecord);
function arrayEditOk(from: Record<string, any>) {
const loc = from['index']['value'];
const neType = neTypeSelect.value[0];
// 遍历提取属性和值
@@ -364,16 +376,14 @@ function arrayEditOk() {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.configManage.configParamForm.updateItem', {
num: loc,
num: modalState.title,
}),
duration: 3,
});
fnActiveConfigNode('#');
} else {
message.warning({
content: t('views.configManage.configParamForm.updateItemErr', {
num: loc,
}),
content: t('views.configManage.configParamForm.updateItemErr'),
duration: 3,
});
}
@@ -385,8 +395,8 @@ function arrayEditOk() {
}
/**多列表删除单行 */
function arrayDelete(row: Record<string, any>) {
const index = row.key;
function arrayDelete(rowIndex: Record<string, any>) {
const index = rowIndex.value;
delParamConfigInfo({
neType: neTypeSelect.value[0],
neId: neTypeSelect.value[1],
@@ -396,10 +406,11 @@ function arrayDelete(row: Record<string, any>) {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.configManage.configParamForm.delItemOk', {
num: index,
num: `${treeState.selectNode.topDisplay} Index-${index}`,
}),
duration: 2,
});
arrayEditClose();
fnActiveConfigNode('#');
} else {
message.error({
@@ -423,13 +434,12 @@ function arrayAdd() {
row[v.name] = Object.assign({}, v);
}
console.log(Array.isArray(from.record), from.record);
modalState.from = row;
modalState.type = 'array';
modalState.title = from.title;
modalState.type = 'arrayAdd';
modalState.title = `${treeState.selectNode.topDisplay} ${from.title}`;
modalState.key = from.key;
modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
modalState.visibleByAdd = true;
modalState.visible = true;
}
/**多列表新增单行确认 */
@@ -470,7 +480,7 @@ function arrayAddOk(from: Record<string, any>) {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.configManage.configParamForm.addItemOk', {
num: index,
num: modalState.title,
}),
duration: 3,
});
@@ -484,7 +494,6 @@ function arrayAddOk(from: Record<string, any>) {
})
.finally(() => {
hide();
fnModalCancel();
arrayEditClose();
});
}
@@ -501,8 +510,8 @@ type ArrayChildStateType = {
size: SizeType;
/**多列嵌套记录字段 */
columns: Record<string, any>[];
/**多列嵌套展开key */
arrayChildExpandKeys: any[];
/**多列记录数据 */
columnsData: Record<string, any>[];
/**多列嵌套记录数据 */
data: Record<string, any>[];
@@ -523,7 +532,7 @@ let arrayChildState: ArrayChildStateType = reactive({
collapseActiveKey: [],
size: 'middle',
columns: [],
arrayChildExpandKeys: [],
columnsData: [],
data: [],
dataRule: {},
newIndex: -2,
@@ -532,9 +541,18 @@ let arrayChildState: ArrayChildStateType = reactive({
});
/**多列表展开嵌套行 */
function arrayChildExpand(key: number | string, row: Record<string, any>) {
const loc = key;
function arrayChildExpand(
indexRow: Record<string, any>,
row: Record<string, any>
) {
const loc = indexRow.value;
if (arrayChildState.loc === `${loc}/${row.name}`) {
arrayChildState.loc = '';
arrayState.arrayChildExpandKeys = [];
return;
}
arrayChildState.loc = '';
arrayState.arrayChildExpandKeys = [];
const from = Object.assign({}, JSON.parse(JSON.stringify(row)));
// 无数据时
if (!Array.isArray(from.value)) {
@@ -572,6 +590,40 @@ function arrayChildExpand(key: number | string, row: Record<string, any>) {
record: ruleArr,
};
// 列表数据
const columnsData: Record<string, any>[] = [];
for (const v of arrayChildState.data) {
const row: Record<string, any> = {};
for (const item of v.record) {
row[item.name] = item;
}
columnsData.push(row);
}
arrayChildState.columnsData = columnsData;
// 列表字段
const columns: Record<string, any>[] = [];
for (const rule of arrayChildState.dataRule.record) {
columns.push({
title: rule.display,
dataIndex: rule.name,
align: 'left',
width: 5,
});
}
columns.push({
title: t('common.operate'),
dataIndex: 'index',
key: 'index',
align: 'left',
fixed: 'right',
width: 5,
});
arrayChildState.columns = columns;
// 设置展开key
arrayState.arrayChildExpandKeys = [indexRow];
arrayChildState.loc = `${loc}/${from['name']}`;
arrayChildState.newIndex = -3;
// 设置展开列表标题
@@ -582,40 +634,30 @@ function arrayChildExpand(key: number | string, row: Record<string, any>) {
/**多列表展开嵌套行 */
function arrayChildExpandClose() {
arrayChildState.title = '';
arrayChildEditClose();
arrayChildState.loc = '';
arrayState.arrayChildExpandKeys = [];
}
/**多列表嵌套行编辑 */
function arrayChildEdit(item: Record<string, any>, index: number) {
console.log(item, index);
function arrayChildEdit(rowIndex: Record<string, any>) {
const item = arrayChildState.data.find((s: any) => s.key === rowIndex.value);
if (!item) return;
const row: Record<string, any> = {};
for (const v of item.record) {
row[v.name] = Object.assign({}, v);
}
arrayChildState.editRecord = row;
arrayChildState.editKey = item.key;
arrayChildState.newIndex = index;
// 面板
const hasIndex = arrayChildState.collapseActiveKey.indexOf(`${item.key}`);
if (hasIndex === -1) {
arrayChildState.collapseActiveKey.push(`${item.key}`);
} else {
// arrayChildState.collapseActiveKey.splice(hasIndex, 1);
}
}
/**多列表嵌套行编辑关闭 */
function arrayChildEditClose() {
arrayChildState.editRecord = {};
arrayChildState.editKey = -1;
arrayChildState.newIndex = -3;
modalState.from = row;
modalState.type = 'arrayChildEdit';
modalState.title = `${arrayChildState.title} ${item.title}`;
modalState.key = item.key;
modalState.data = item.record.filter((v: any) => !Array.isArray(v.array));
modalState.visible = true;
}
/**多列表嵌套行编辑确认 */
function arrayChildEditOk() {
const from = toRaw(arrayChildState.editRecord);
function arrayChildEditOk(from: Record<string, any>) {
const index = from['index']['value'];
const loc = `${arrayChildState.loc}/${index}`;
const neType = neTypeSelect.value[0];
@@ -654,7 +696,7 @@ function arrayChildEditOk() {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.configManage.configParamForm.updateItem', {
num: index,
num: modalState.title,
}),
duration: 3,
});
@@ -668,13 +710,13 @@ function arrayChildEditOk() {
})
.finally(() => {
hide();
arrayChildExpandClose();
arrayEditClose();
});
}
/**多列表嵌套行删除单行 */
function arrayChildDelete(row: Record<string, any>) {
const index = row.key;
function arrayChildDelete(rowIndex: Record<string, any>) {
const index = rowIndex.value;
const loc = `${arrayChildState.loc}/${index}`;
delParamConfigInfo({
neType: neTypeSelect.value[0],
@@ -685,11 +727,11 @@ function arrayChildDelete(row: Record<string, any>) {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.configManage.configParamForm.delItemOk', {
num: index,
num: `${arrayChildState.title} Index-${index}`,
}),
duration: 2,
});
arrayChildExpandClose();
arrayEditClose();
fnActiveConfigNode('#');
} else {
message.error({
@@ -713,11 +755,11 @@ function arrayChildAdd() {
}
modalState.from = row;
modalState.type = 'arrayChild';
modalState.title = from.title;
modalState.type = 'arrayChildAdd';
modalState.title = `${arrayChildState.title} ${from.title}`;
modalState.key = from.key;
modalState.data = from.record.filter((v: any) => !Array.isArray(v.array));
modalState.visibleByAdd = true;
modalState.visible = true;
}
/**多列表新增单行确认 */
@@ -759,7 +801,7 @@ function arrayChildAddOk(from: Record<string, any>) {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('views.configManage.configParamForm.addItemOk', {
num: index,
num: modalState.title,
}),
duration: 3,
});
@@ -773,8 +815,7 @@ function arrayChildAddOk(from: Record<string, any>) {
})
.finally(() => {
hide();
fnModalCancel();
arrayChildExpandClose();
arrayEditClose();
});
}
@@ -998,7 +1039,7 @@ function ruleVerification(row: Record<string, any>): (string | boolean)[] {
/**对话框对象信息状态类型 */
type ModalStateType = {
/**添加框是否显示 */
visibleByAdd: boolean;
visible: boolean;
/**标题 */
title: string;
/**表单数据 */
@@ -1006,7 +1047,7 @@ type ModalStateType = {
/**确定按钮 loading */
confirmLoading: boolean;
/**项类型 */
type: 'array' | 'arrayChild';
type: 'arrayAdd' | 'arrayEdit' | 'arrayChildAdd' | 'arrayChildEdit';
/**项Key */
key: string | number;
/**项数据 */
@@ -1015,11 +1056,11 @@ type ModalStateType = {
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
visibleByAdd: false,
visible: false,
title: 'Item',
from: {},
confirmLoading: false,
type: 'array',
type: 'arrayAdd',
key: '',
data: [],
});
@@ -1030,12 +1071,18 @@ let modalState: ModalStateType = reactive({
*/
function fnModalOk() {
const from = toRaw(modalState.from);
if (modalState.type === 'array') {
if (modalState.type === 'arrayAdd') {
arrayAddOk(from);
}
if (modalState.type === 'arrayChild') {
if (modalState.type === 'arrayEdit') {
arrayEditOk(from);
}
if (modalState.type === 'arrayChildAdd') {
arrayChildAddOk(from);
}
if (modalState.type === 'arrayChildEdit') {
arrayChildEditOk(from);
}
}
/**
@@ -1043,9 +1090,9 @@ function fnModalOk() {
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visibleByAdd = false;
modalState.visible = false;
modalState.from = {};
modalState.type = 'array';
modalState.type = 'arrayAdd';
modalState.key = '';
modalState.data = [];
}
@@ -1260,21 +1307,11 @@ onMounted(() => {
<!-- array类型 -->
<template v-if="treeState.selectNode.type === 'array'">
<!-- 多列新增操作 -->
<a-button
type="primary"
@click.prevent="arrayAdd()"
v-if="treeState.selectNode.method !== 'get'"
>
<template #icon><PlusOutlined /></template>
{{ t('common.addText') }}
</a-button>
<a-table
class="table"
row-key="index"
:columns="arrayState.columns"
:data-source="arrayState.data"
:columns="treeState.selectNode.method === 'get' ? arrayState.columns.filter((s:any)=>s.key !== 'index') :arrayState.columns"
:data-source="arrayState.columnsData"
:size="arrayState.size"
:pagination="false"
:bordered="true"
@@ -1282,425 +1319,140 @@ onMounted(() => {
:show-expand-column="false"
v-model:expanded-row-keys="arrayState.arrayChildExpandKeys"
>
<!-- 多列新增操作 -->
<template #title v-if="treeState.selectNode.method !== 'get'">
<a-button type="primary" @click.prevent="arrayAdd" size="small">
<a-button
type="primary"
@click.prevent="arrayAdd()"
size="small"
>
<template #icon> <PlusOutlined /> </template>
{{ t('common.addText') }}
</a-button>
</template>
<template #bodyCell="{ column, record }">
{{ column }} == {{ record.title }}
</template>
</a-table>
<a-collapse
collapsible="header"
v-model:activeKey="arrayState.collapseActiveKey"
>
<a-collapse-panel
:key="data.key"
:header="data.title"
v-for="data in arrayState.data"
>
<!-- 多列编辑操作 -->
<template #extra>
<a-space
:size="16"
v-if="treeState.selectNode.method !== 'get'"
>
<template
v-if="
arrayState.editKey === data.key &&
arrayState.newIndex === -1
"
>
<a-popconfirm
:title="
t(
'views.configManage.configParamForm.updateItemTip',
{ num: data.key }
)
"
placement="right"
@confirm="arrayEditOk()"
>
<a-button type="primary" size="small">
<template #icon><CheckOutlined /></template>
{{ t('common.ok') }}
</a-button>
</a-popconfirm>
<a-button
type="default"
size="small"
@click.prevent="arrayEditClose()"
>
<template #icon><CloseOutlined /></template>
{{ t('common.close') }}
</a-button>
</template>
<template
v-if="
arrayState.editKey !== data.key ||
arrayState.newIndex < -1
"
>
<a-button
type="default"
size="small"
@click.prevent="arrayEdit(data, -1)"
>
<template #icon><ProfileOutlined /></template>
{{ t('common.editText') }}
</a-button>
<a-popconfirm
:title="
t('views.configManage.configParamForm.delItemTip', {
num: data.key,
})
"
placement="topRight"
@confirm="arrayDelete(data)"
>
<a-button danger type="default" size="small">
<template #icon><DeleteOutlined /></template>
{{ t('common.deleteText') }}
</a-button>
</a-popconfirm>
</template>
</a-space>
</template>
<!-- 多列数据渲染 -->
<a-form
class="form"
layout="horizontal"
autocomplete="off"
:validate-on-rule-change="false"
:validateTrigger="[]"
:no-style="true"
>
<a-form-item
v-for="item in data.record"
:label="item.display"
:name="item.name"
:required="item.optional === 'false'"
style="margin-bottom: 2px"
>
<a-tooltip placement="topLeft">
<template #title v-if="item.comment">
{{ item.comment }}
<template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'index'">
<a-space :size="16" align="center">
<a-tooltip>
<template #title>{{ t('common.editText') }}</template>
<a-button type="link" @click.prevent="arrayEdit(text)">
<template #icon><FormOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip>
<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>
<div>
<div
v-if="
!Array.isArray(item.array) &&
arrayState.editKey === data.key &&
arrayState.newIndex >= -1 &&
arrayState.editRecord[item.name] !== undefined
"
>
<a-input
v-if="
['string', 'ipv6', 'ipv4', 'regex'].includes(
item['type']
)
"
v-model:value="
arrayState.editRecord[item.name]['value']
"
:disabled="item.name === 'index'"
></a-input>
<a-input-number
v-else-if="item['type'] === 'int'"
v-model:value="
arrayState.editRecord[item.name]['value']
"
:min="0"
:max="65535"
:disabled="item.name === 'index'"
style="width: 100%"
></a-input-number>
<a-switch
v-else-if="item['type'] === 'bool'"
v-model:checked="
arrayState.editRecord[item.name]['value']
"
:checked-children="t('common.switch.open')"
:un-checked-children="t('common.switch.shut')"
></a-switch>
<a-select
v-else-if="item['type'] === 'enum'"
v-model:value="
arrayState.editRecord[item.name]['value']
"
: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>
</div>
<template v-else>
<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="link"
size="small"
@click.prevent="arrayChildExpand(data.key, item)"
v-else-if="Array.isArray(item.array)"
@click.prevent="
arrayChildExpand(record['index'], text)
"
>
{{
arrayState.newIndex === -1
? '-'
: t(
'views.configManage.configParamForm.arrayMore'
)
t('views.configManage.configParamForm.arrayMore')
}}
</a-button>
<!--特殊字段拓展显示-->
<span v-if="text.name === 'dnnList'">
({{ text.value.map((s: any) => s.dnn).join() }})
</span>
</template>
<div v-else>
{{ `${item.value}` || '&nbsp;' }}
<div v-else class="editable-cell__text-wrapper">
{{ `${text.value}` || '&nbsp;' }}
</div>
</div>
</a-tooltip>
</template>
</template>
<!-- 多列嵌套类型 -->
<template
#extra
v-if="
Array.isArray(item.array) &&
item.display === arrayChildState.title
"
>
<!-- 多列嵌套新增操作 -->
<a-space
:size="16"
v-if="treeState.selectNode.method !== 'get'"
<template #expandedRowRender>
<a-table
class="table"
row-key="index"
:columns="arrayChildState.columns"
:data-source="arrayChildState.columnsData"
:size="arrayChildState.size"
:pagination="false"
:bordered="true"
:scroll="{
x: arrayChildState.columns.length * 200,
y: 450,
}"
>
<template #title>
<a-button
type="primary"
@click.prevent="arrayChildAdd()"
>
<template #icon><PlusOutlined /></template>
{{ t('common.addText') }}
</a-button>
<a-button
type="default"
@click.prevent="arrayChildExpandClose()"
>
<template #icon><CloseOutlined /></template>
{{ t('common.close') }}
</a-button>
</a-space>
<a-collapse
collapsible="header"
v-model:activeKey="arrayChildState.collapseActiveKey"
>
<a-collapse-panel
:key="cdata.key"
:header="cdata.title"
v-for="cdata in arrayChildState.data"
>
<!-- 多列嵌套编辑操作 -->
<template #extra>
<a-space
:size="16"
v-if="treeState.selectNode.method !== 'get'"
>
<template
v-if="
arrayChildState.editKey === cdata.key &&
arrayChildState.newIndex === -1
"
>
<a-popconfirm
:title="
t(
'views.configManage.configParamForm.updateItemTip',
{ num: cdata.key }
)
"
placement="right"
@confirm="arrayChildEditOk()"
>
<a-button type="primary" size="small">
<template #icon><CheckOutlined /></template>
{{ t('common.ok') }}
</a-button>
</a-popconfirm>
<a-button
type="default"
@click.prevent="arrayChildAdd"
size="small"
@click.prevent="arrayChildEditClose()"
>
<template #icon><CloseOutlined /></template>
{{ t('common.close') }}
<template #icon> <PlusOutlined /> </template>
{{ t('common.addText') }} {{ arrayChildState.title }}
</a-button>
</template>
<template
v-if="
arrayChildState.editKey !== cdata.key ||
arrayChildState.newIndex < -1
"
>
<a-button
type="default"
size="small"
@click.prevent="arrayChildEdit(cdata, -1)"
>
<template #icon><ProfileOutlined /></template>
{{ t('common.editText') }}
</a-button>
<a-popconfirm
:title="
t(
'views.configManage.configParamForm.delItemTip',
{ num: cdata.key }
)
"
placement="topRight"
@confirm="arrayChildDelete(cdata)"
>
<a-button danger type="default" size="small">
<template #icon>
<DeleteOutlined />
</template>
{{ t('common.deleteText') }}
</a-button>
</a-popconfirm>
</template>
</a-space>
</template>
<!-- 多列嵌套数据渲染 -->
<a-form
class="form"
layout="horizontal"
autocomplete="off"
:validate-on-rule-change="false"
:validateTrigger="[]"
:no-style="true"
>
<a-form-item
v-for="item in cdata.record"
:label="item.display"
:name="item.name"
:required="item.optional === 'false'"
style="margin-bottom: 2px"
>
<a-tooltip placement="topLeft">
<template #title v-if="item.comment">
{{ item.comment }}
</template>
<div>
<div
v-if="
!Array.isArray(item.array) &&
arrayChildState.newIndex >= -1 &&
arrayChildState.editKey === cdata.key &&
arrayChildState.editRecord[item.name] !==
undefined
"
>
<a-input
v-if="
[
'string',
'ipv6',
'ipv4',
'regex',
].includes(item['type'])
"
v-model:value="
arrayChildState.editRecord[item.name][
'value'
]
"
:disabled="item.name === 'index'"
></a-input>
<a-input-number
v-else-if="item['type'] === 'int'"
v-model:value="
arrayChildState.editRecord[item.name][
'value'
]
"
:min="0"
:max="65535"
:disabled="item.name === 'index'"
style="width: 100%"
></a-input-number>
<a-switch
v-else-if="item['type'] === 'bool'"
v-model:checked="
arrayChildState.editRecord[item.name][
'value'
]
"
:checked-children="
t('common.switch.open')
"
:un-checked-children="
t('common.switch.shut')
"
></a-switch>
<a-select
v-else-if="item['type'] === 'enum'"
v-model:value="
arrayChildState.editRecord[item.name][
'value'
]
"
: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>
</div>
<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"
size="small"
v-else-if="Array.isArray(item.array)"
@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>
<a-tooltip placement="topLeft">
<template #title v-if="text.comment">
{{ text.comment }}
</template>
<div class="editable-cell">
<a-button type="link" size="small" v-if="text.array">
{{
arrayChildState.newIndex === -1
? '-'
: t(
'views.configManage.configParamForm.arrayMore'
)
t('views.configManage.configParamForm.arrayMore')
}}
</a-button>
<div v-else>
{{ `${item.value || '&nbsp;'}` }}
{{ `${text.value || '&nbsp;'}` }}
</div>
</div>
</a-tooltip>
</a-form-item>
</a-form>
</a-collapse-panel>
</a-collapse>
</template>
</a-form-item>
</a-form>
</a-collapse-panel>
</a-collapse>
</template>
</a-table>
</template>
</a-table>
</template>
</a-card>
</a-col>
@@ -1712,7 +1464,7 @@ onMounted(() => {
:body-style="{ maxHeight: '650px', 'overflow-y': 'scroll' }"
:keyboard="false"
:mask-closable="false"
:visible="modalState.visibleByAdd"
:visible="modalState.visible"
:title="modalState.title"
:confirm-loading="modalState.confirmLoading"
@ok="fnModalOk"
@@ -1730,6 +1482,7 @@ onMounted(() => {
:label="item.display"
:name="item.name"
:required="item.optional === 'false'"
style="margin-bottom: 2px"
>
<a-tooltip placement="topLeft">
<template #title v-if="item.comment">