fix: 参数配置嵌套展开加图标按钮类型

This commit is contained in:
TsMask
2023-11-17 10:02:27 +08:00
parent b8feb6fa35
commit ae6feb15a2
2 changed files with 38 additions and 54 deletions

View File

@@ -1383,18 +1383,17 @@ onMounted(() => {
</a-select> </a-select>
</div> </div>
<template v-if="item.array"> <template v-else-if="item.array">
<span v-if="arrayState.newIndex === -1">-</span>
<a-button <a-button
type="link" type="default"
size="small" size="small"
@click.prevent="arrayChildExpand(data.key, item)" @click.prevent="arrayChildExpand(data.key, item)"
v-else
> >
<template #icon><BarsOutlined /></template>
{{ {{
arrayState.newIndex === -1 t('views.configManage.configParamForm.arrayMore')
? '-'
: t(
'views.configManage.configParamForm.arrayMore'
)
}} }}
</a-button> </a-button>
<!--特殊字段拓展显示--> <!--特殊字段拓展显示-->
@@ -1414,6 +1413,7 @@ onMounted(() => {
#extra #extra
v-if=" v-if="
Array.isArray(item.array) && Array.isArray(item.array) &&
arrayChildState.loc.startsWith(data.key) &&
item.display === arrayChildState.title item.display === arrayChildState.title
" "
> >
@@ -1613,19 +1613,25 @@ onMounted(() => {
</a-select> </a-select>
</div> </div>
<a-button <template v-else-if="item.array">
type="link" <span v-if="arrayChildState.newIndex === -1">
size="small" -
v-else-if="item.array" </span>
> <a-button
{{ type="default"
arrayChildState.newIndex === -1 size="small"
? '-' v-else
: t( >
'views.configManage.configParamForm.arrayMore' <template #icon>
) <BarsOutlined />
}} </template>
</a-button> {{
t(
'views.configManage.configParamForm.arrayMore'
)
}}
</a-button>
</template>
<div v-else> <div v-else>
{{ `${item.value || '&nbsp;'}` }} {{ `${item.value || '&nbsp;'}` }}

View File

@@ -119,7 +119,6 @@ function fnActiveConfigNode(key: string | number) {
}); });
arrayState.columns = columns; arrayState.columns = columns;
arrayState.collapseActiveKey = [];
arrayEditClose(); arrayEditClose();
} }
} else { } else {
@@ -273,8 +272,6 @@ function listEditOk() {
/**多列列表状态类型 */ /**多列列表状态类型 */
type ArrayStateType = { type ArrayStateType = {
/**面板激活项 */
collapseActiveKey: string[];
/**紧凑型 */ /**紧凑型 */
size: SizeType; size: SizeType;
/**多列嵌套记录字段 */ /**多列嵌套记录字段 */
@@ -288,26 +285,16 @@ type ArrayStateType = {
data: Record<string, any>[]; data: Record<string, any>[];
/**多列记录规则 */ /**多列记录规则 */
dataRule: Record<string, any>; dataRule: Record<string, any>;
/**新增行记录Index 编辑-1/新增>=0 */
newIndex: number;
/**编辑行Key值 */
editKey: number | string;
/**编辑行记录 */
editRecord: Record<string, any>;
}; };
/**多列列表状态 */ /**多列列表状态 */
let arrayState: ArrayStateType = reactive({ let arrayState: ArrayStateType = reactive({
collapseActiveKey: [],
size: 'middle', size: 'middle',
columns: [], columns: [],
columnsData: [], columnsData: [],
arrayChildExpandKeys: [], arrayChildExpandKeys: [],
data: [], data: [],
dataRule: {}, dataRule: {},
newIndex: -2,
editKey: -1,
editRecord: {},
}); });
/**多列表编辑 */ /**多列表编辑 */
@@ -504,8 +491,6 @@ type ArrayChildStateType = {
title: string; title: string;
/**层级index */ /**层级index */
loc: string; loc: string;
/**面板激活项 */
collapseActiveKey: string[];
/**紧凑型 */ /**紧凑型 */
size: SizeType; size: SizeType;
/**多列嵌套记录字段 */ /**多列嵌套记录字段 */
@@ -517,27 +502,17 @@ type ArrayChildStateType = {
data: Record<string, any>[]; data: Record<string, any>[];
/**多列嵌套记录规则 */ /**多列嵌套记录规则 */
dataRule: Record<string, any>; dataRule: Record<string, any>;
/**新增嵌套行记录Index 编辑-1/新增>=0 */
newIndex: number;
/**编辑嵌套行Key值 */
editKey: number | string;
/**编辑嵌套行记录 */
editRecord: Record<string, any>;
}; };
/**表格状态 */ /**表格状态 */
let arrayChildState: ArrayChildStateType = reactive({ let arrayChildState: ArrayChildStateType = reactive({
title: '', title: '',
loc: '', loc: '',
collapseActiveKey: [],
size: 'middle', size: 'middle',
columns: [], columns: [],
columnsData: [], columnsData: [],
data: [], data: [],
dataRule: {}, dataRule: {},
newIndex: -2,
editKey: -1,
editRecord: {},
}); });
/**多列表展开嵌套行 */ /**多列表展开嵌套行 */
@@ -625,11 +600,8 @@ function arrayChildExpand(
arrayState.arrayChildExpandKeys = [indexRow]; arrayState.arrayChildExpandKeys = [indexRow];
arrayChildState.loc = `${loc}/${from['name']}`; arrayChildState.loc = `${loc}/${from['name']}`;
arrayChildState.newIndex = -3;
// 设置展开列表标题 // 设置展开列表标题
arrayChildState.title = `${from['display']}`; arrayChildState.title = `${from['display']}`;
// 关闭默认展开
arrayChildState.collapseActiveKey = [];
} }
/**多列表展开嵌套行 */ /**多列表展开嵌套行 */
@@ -1357,12 +1329,13 @@ onMounted(() => {
<div class="editable-cell"> <div class="editable-cell">
<template v-if="text.array"> <template v-if="text.array">
<a-button <a-button
type="link" type="default"
size="small" size="small"
@click.prevent=" @click.prevent="
arrayChildExpand(record['index'], text) arrayChildExpand(record['index'], text)
" "
> >
<template #icon><BarsOutlined /></template>
{{ {{
t('views.configManage.configParamForm.arrayMore') t('views.configManage.configParamForm.arrayMore')
}} }}
@@ -1437,11 +1410,16 @@ onMounted(() => {
{{ text.comment }} {{ text.comment }}
</template> </template>
<div class="editable-cell"> <div class="editable-cell">
<a-button type="link" size="small" v-if="text.array"> <template v-if="text.array">
{{ <a-button type="default" size="small">
t('views.configManage.configParamForm.arrayMore') <template #icon><BarsOutlined /></template>
}} {{
</a-button> t(
'views.configManage.configParamForm.arrayMore'
)
}}
</a-button>
</template>
<div v-else> <div v-else>
{{ `${text.value || '&nbsp;'}` }} {{ `${text.value || '&nbsp;'}` }}