fix(表格): json-schema自动加一行&表格支持不选子数据且不统计
This commit is contained in:
parent
510bea2c95
commit
86908a2dc6
|
@ -141,7 +141,7 @@
|
||||||
class="ms-form-table-input"
|
class="ms-form-table-input"
|
||||||
:auto-size="{ minRows: 1, maxRows: 1 }"
|
:auto-size="{ minRows: 1, maxRows: 1 }"
|
||||||
:size="item.size || 'medium'"
|
:size="item.size || 'medium'"
|
||||||
@change="() => handleFormChange(record, rowIndex, item)"
|
@input="() => handleFormChange(record, rowIndex, item)"
|
||||||
></a-textarea>
|
></a-textarea>
|
||||||
<MsQuickInput
|
<MsQuickInput
|
||||||
v-else-if="item.inputType === 'quickInput'"
|
v-else-if="item.inputType === 'quickInput'"
|
||||||
|
@ -149,7 +149,7 @@
|
||||||
:title="item.title as string || ''"
|
:title="item.title as string || ''"
|
||||||
class="ms-form-table-input"
|
class="ms-form-table-input"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
@change="() => handleFormChange(record, rowIndex, item)"
|
@input="() => handleFormChange(record, rowIndex, item)"
|
||||||
>
|
>
|
||||||
</MsQuickInput>
|
</MsQuickInput>
|
||||||
<template v-else-if="item.inputType === 'text'">
|
<template v-else-if="item.inputType === 'text'">
|
||||||
|
|
|
@ -47,6 +47,7 @@
|
||||||
class="ms-form-table-input"
|
class="ms-form-table-input"
|
||||||
:max-length="255"
|
:max-length="255"
|
||||||
size="medium"
|
size="medium"
|
||||||
|
@input="addLineIfLast(record, rowIndex)"
|
||||||
/>
|
/>
|
||||||
</a-popover>
|
</a-popover>
|
||||||
</template>
|
</template>
|
||||||
|
@ -639,7 +640,6 @@
|
||||||
slotName: 'title',
|
slotName: 'title',
|
||||||
inputType: 'input',
|
inputType: 'input',
|
||||||
size: 'medium',
|
size: 'medium',
|
||||||
addLineDisabled: true,
|
|
||||||
columnSelectorDisabled: true,
|
columnSelectorDisabled: true,
|
||||||
fixed: 'left',
|
fixed: 'left',
|
||||||
},
|
},
|
||||||
|
@ -862,6 +862,12 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addLineIfLast(record: TableData, rowIndex: number) {
|
||||||
|
if (rowIndex === (record.parent || data.value[0]).children.length - 1) {
|
||||||
|
addChild(data.value[0]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function handleSelectAll(checked: boolean) {
|
function handleSelectAll(checked: boolean) {
|
||||||
traverseTree<JsonSchemaTableItem>(data.value, (item) => {
|
traverseTree<JsonSchemaTableItem>(data.value, (item) => {
|
||||||
item.enable = checked;
|
item.enable = checked;
|
||||||
|
|
|
@ -40,24 +40,26 @@
|
||||||
:show-select-all="!!attrs.showPagination && props.showSelectorAll"
|
:show-select-all="!!attrs.showPagination && props.showSelectorAll"
|
||||||
:disabled="(attrs.data as []).length === 0"
|
:disabled="(attrs.data as []).length === 0"
|
||||||
:row-key="rowKey"
|
:row-key="rowKey"
|
||||||
|
:row-selection-disabled-config="attrs.rowSelectionDisabledConfig as MsTableRowSelectionDisabledConfig"
|
||||||
@change="handleSelectAllChange"
|
@change="handleSelectAllChange"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #cell="{ record }">
|
<template #cell="{ record }">
|
||||||
<MsCheckbox
|
<template v-if="!isDisabledChildren(record)">
|
||||||
v-if="attrs.selectorType === 'checkbox'"
|
<MsCheckbox
|
||||||
:value="getChecked(record)"
|
v-if="attrs.selectorType === 'checkbox'"
|
||||||
:indeterminate="getIndeterminate(record)"
|
:value="getChecked(record)"
|
||||||
:disabled="isDisabledChildren(record)"
|
:indeterminate="getIndeterminate(record)"
|
||||||
@click.stop
|
@click.stop
|
||||||
@change="rowSelectChange(record)"
|
@change="rowSelectChange(record)"
|
||||||
/>
|
/>
|
||||||
<a-radio
|
<a-radio
|
||||||
v-else-if="attrs.selectorType === 'radio'"
|
v-else-if="attrs.selectorType === 'radio'"
|
||||||
v-model:model-value="record.tableChecked"
|
v-model:model-value="record.tableChecked"
|
||||||
@click.stop
|
@click.stop
|
||||||
@change="(val) => handleRadioChange(val as boolean, record)"
|
@change="(val) => handleRadioChange(val as boolean, record)"
|
||||||
/>
|
/>
|
||||||
|
</template>
|
||||||
<div v-if="attrs.showPagination && props.showSelectorAll" class="w-[16px]"></div>
|
<div v-if="attrs.showPagination && props.showSelectorAll" class="w-[16px]"></div>
|
||||||
</template>
|
</template>
|
||||||
</a-table-column>
|
</a-table-column>
|
||||||
|
@ -317,6 +319,7 @@
|
||||||
MsTableColumnData,
|
MsTableColumnData,
|
||||||
MsTableDataItem,
|
MsTableDataItem,
|
||||||
MsTableProps,
|
MsTableProps,
|
||||||
|
MsTableRowSelectionDisabledConfig,
|
||||||
} from './type';
|
} from './type';
|
||||||
import { getCurrentRecordChildrenIds } from './utils';
|
import { getCurrentRecordChildrenIds } from './utils';
|
||||||
import type { TableChangeExtra, TableColumnData, TableData } from '@arco-design/web-vue';
|
import type { TableChangeExtra, TableColumnData, TableData } from '@arco-design/web-vue';
|
||||||
|
@ -334,10 +337,6 @@
|
||||||
excludeKeys: Set<string>;
|
excludeKeys: Set<string>;
|
||||||
selectorStatus: SelectAllEnum;
|
selectorStatus: SelectAllEnum;
|
||||||
actionConfig?: BatchActionConfig;
|
actionConfig?: BatchActionConfig;
|
||||||
disabledConfig?: {
|
|
||||||
disabledChildren?: boolean;
|
|
||||||
parentKey?: string;
|
|
||||||
};
|
|
||||||
noDisable?: boolean;
|
noDisable?: boolean;
|
||||||
showSetting?: boolean;
|
showSetting?: boolean;
|
||||||
columns: MsTableColumn;
|
columns: MsTableColumn;
|
||||||
|
@ -737,8 +736,16 @@
|
||||||
emit('filterChange', dataIndex, value, isCustomParam);
|
emit('filterChange', dataIndex, value, isCustomParam);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function isDisabledChildren(record: TableData) {
|
||||||
|
if (!(attrs.rowSelectionDisabledConfig as MsTableRowSelectionDisabledConfig)?.disabledChildren) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// 子级禁用
|
||||||
|
return !!record[(attrs.rowSelectionDisabledConfig as MsTableRowSelectionDisabledConfig).parentKey || 'parent'];
|
||||||
|
}
|
||||||
|
|
||||||
function getChecked(record: TableData) {
|
function getChecked(record: TableData) {
|
||||||
if (!record.children) {
|
if (!record.children || (attrs.rowSelectionDisabledConfig as MsTableRowSelectionDisabledConfig)?.disabledChildren) {
|
||||||
return props.selectedKeys.has(record[rowKey || 'id']);
|
return props.selectedKeys.has(record[rowKey || 'id']);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -747,7 +754,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function getIndeterminate(record: TableData) {
|
function getIndeterminate(record: TableData) {
|
||||||
if (!record.children) {
|
if (!record.children || (attrs.rowSelectionDisabledConfig as MsTableRowSelectionDisabledConfig)?.disabledChildren) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
const childKeyIds = getCurrentRecordChildrenIds(record.children, rowKey || 'id');
|
const childKeyIds = getCurrentRecordChildrenIds(record.children, rowKey || 'id');
|
||||||
|
@ -762,14 +769,6 @@
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function isDisabledChildren(record: TableData) {
|
|
||||||
if (!props.disabledConfig?.disabledChildren) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
// 子级禁用
|
|
||||||
return !!record[props.disabledConfig.parentKey || 'parent'];
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await initColumn();
|
await initColumn();
|
||||||
batchLeft.value = getBatchLeft();
|
batchLeft.value = getBatchLeft();
|
||||||
|
|
|
@ -34,7 +34,7 @@
|
||||||
|
|
||||||
import { SelectAllEnum } from '@/enums/tableEnum';
|
import { SelectAllEnum } from '@/enums/tableEnum';
|
||||||
|
|
||||||
import { MsTableDataItem } from './type';
|
import { MsTableDataItem, MsTableRowSelectionDisabledConfig } from './type';
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
@ -51,6 +51,7 @@
|
||||||
disabled: boolean;
|
disabled: boolean;
|
||||||
excludeKeys: string[];
|
excludeKeys: string[];
|
||||||
rowKey?: string;
|
rowKey?: string;
|
||||||
|
rowSelectionDisabledConfig?: MsTableRowSelectionDisabledConfig;
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
current: 0,
|
current: 0,
|
||||||
|
@ -137,7 +138,7 @@
|
||||||
rowKey: string
|
rowKey: string
|
||||||
): boolean {
|
): boolean {
|
||||||
return data.some((item: any) => {
|
return data.some((item: any) => {
|
||||||
if (item.children && item.children.length > 0) {
|
if (item.children && item.children.length > 0 && !props.rowSelectionDisabledConfig?.disabledChildren) {
|
||||||
return hasUnselectedChildren(item.children, selectedKeys, rowKey);
|
return hasUnselectedChildren(item.children, selectedKeys, rowKey);
|
||||||
}
|
}
|
||||||
return !selectedKeys.has(item[rowKey]);
|
return !selectedKeys.has(item[rowKey]);
|
||||||
|
|
|
@ -34,6 +34,11 @@ export interface MsTableColumnFilterConfig {
|
||||||
secondLabelKey?: string;
|
secondLabelKey?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface MsTableRowSelectionDisabledConfig {
|
||||||
|
disabledChildren?: boolean;
|
||||||
|
parentKey?: string;
|
||||||
|
}
|
||||||
|
|
||||||
export interface MsTableColumnData extends TableColumnData {
|
export interface MsTableColumnData extends TableColumnData {
|
||||||
// 是否可排序
|
// 是否可排序
|
||||||
showDrag?: boolean;
|
showDrag?: boolean;
|
||||||
|
@ -122,6 +127,8 @@ export interface MsTableProps<T> {
|
||||||
onlyPageSize?: boolean; // 简单设置气泡下,是否只展示页码调整
|
onlyPageSize?: boolean; // 简单设置气泡下,是否只展示页码调整
|
||||||
filterIconAlignLeft?: boolean; // 筛选图标是否靠左
|
filterIconAlignLeft?: boolean; // 筛选图标是否靠左
|
||||||
paginationSize?: 'small' | 'mini' | 'medium' | 'large';
|
paginationSize?: 'small' | 'mini' | 'medium' | 'large';
|
||||||
|
// 行选择器禁用配置
|
||||||
|
rowSelectionDisabledConfig?: MsTableRowSelectionDisabledConfig;
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -301,7 +301,7 @@ export default function useTableProps<T>(
|
||||||
propsRes.value.excludeKeys.delete(item[rowKey]);
|
propsRes.value.excludeKeys.delete(item[rowKey]);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.children && item.children.length > 0) {
|
if (item.children && item.children.length > 0 && !props?.rowSelectionDisabledConfig?.disabledChildren) {
|
||||||
processChildren(item.children as MsTableDataItem<T>[], rowKey);
|
processChildren(item.children as MsTableDataItem<T>[], rowKey);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -344,7 +344,7 @@ export default function useTableProps<T>(
|
||||||
propsRes.value.selectedKeys.add(item[rowKey]);
|
propsRes.value.selectedKeys.add(item[rowKey]);
|
||||||
propsRes.value.excludeKeys.delete(item[rowKey]);
|
propsRes.value.excludeKeys.delete(item[rowKey]);
|
||||||
}
|
}
|
||||||
if (item.children) {
|
if (item.children && !props?.rowSelectionDisabledConfig?.disabledChildren) {
|
||||||
collectIds(item.children, rowKey);
|
collectIds(item.children, rowKey);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -491,6 +491,20 @@ export default function useTableProps<T>(
|
||||||
const { rowKey } = propsRes.value;
|
const { rowKey } = propsRes.value;
|
||||||
const key = record[rowKey || 'id'];
|
const key = record[rowKey || 'id'];
|
||||||
const { selectedKeys, excludeKeys, data } = propsRes.value;
|
const { selectedKeys, excludeKeys, data } = propsRes.value;
|
||||||
|
if (props?.rowSelectionDisabledConfig?.disabledChildren) {
|
||||||
|
if (selectedKeys.has(key)) {
|
||||||
|
// 当前已选中,取消选中
|
||||||
|
selectedKeys.delete(key);
|
||||||
|
excludeKeys.add(key);
|
||||||
|
} else {
|
||||||
|
// 当前未选中,选中
|
||||||
|
selectedKeys.add(key);
|
||||||
|
if (excludeKeys.has(key)) {
|
||||||
|
excludeKeys.delete(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
// 是否包含子级
|
// 是否包含子级
|
||||||
const isHasChildrenData = data.some((item) => item.children);
|
const isHasChildrenData = data.some((item) => item.children);
|
||||||
let isSelectChildren;
|
let isSelectChildren;
|
||||||
|
|
|
@ -39,10 +39,6 @@
|
||||||
:selectable="hasOperationPermission && showType !== testPlanTypeEnum.ALL && !isArchived"
|
:selectable="hasOperationPermission && showType !== testPlanTypeEnum.ALL && !isArchived"
|
||||||
filter-icon-align-left
|
filter-icon-align-left
|
||||||
:expanded-keys="expandedKeys"
|
:expanded-keys="expandedKeys"
|
||||||
:disabled-config="{
|
|
||||||
disabledChildren: true,
|
|
||||||
parentKey: 'parent',
|
|
||||||
}"
|
|
||||||
:first-column-width="32"
|
:first-column-width="32"
|
||||||
v-on="propsEvent"
|
v-on="propsEvent"
|
||||||
@batch-action="handleTableBatch"
|
@batch-action="handleTableBatch"
|
||||||
|
@ -825,11 +821,15 @@
|
||||||
showSelectorAll: false,
|
showSelectorAll: false,
|
||||||
draggable: { type: 'handle' },
|
draggable: { type: 'handle' },
|
||||||
draggableCondition: true,
|
draggableCondition: true,
|
||||||
|
rowSelectionDisabledConfig: {
|
||||||
|
disabledChildren: true,
|
||||||
|
parentKey: 'parent',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
function getTags(record: TestPlanItem) {
|
function getTags(record: TestPlanItem) {
|
||||||
if (record.children && record.children.length) {
|
if (record.children && record.children.length) {
|
||||||
record.children = record.children.map((child: TestPlanItem) => getTags(child));
|
record.children = record.children.map((child: TestPlanItem) => ({ ...getTags(child), disabled: true }));
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
...record,
|
...record,
|
||||||
|
|
Loading…
Reference in New Issue