fix(表格): json-schema自动加一行&表格支持不选子数据且不统计

This commit is contained in:
baiqi 2024-07-09 16:38:03 +08:00 committed by Craftsman
parent 510bea2c95
commit 86908a2dc6
7 changed files with 67 additions and 40 deletions

View File

@ -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'">

View File

@ -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;

View File

@ -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();

View File

@ -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]);

View File

@ -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;
} }

View File

@ -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;

View File

@ -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,