test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/pure/ms-form-table/index.vue
View File

@ -141,7 +141,7 @@
class="ms-form-table-input"
:auto-size="{ minRows: 1, maxRows: 1 }"
:size="item.size || 'medium'"
@change="() => handleFormChange(record, rowIndex, item)"
@input="() => handleFormChange(record, rowIndex, item)"
></a-textarea>
<MsQuickInput
v-else-if="item.inputType === 'quickInput'"
@ -149,7 +149,7 @@
:title="item.title as string || ''"
class="ms-form-table-input"
type="textarea"
@change="() => handleFormChange(record, rowIndex, item)"
@input="() => handleFormChange(record, rowIndex, item)"
>
</MsQuickInput>
<template v-else-if="item.inputType === 'text'">

8
frontend/src/components/pure/ms-json-schema/index.vue
View File

@ -47,6 +47,7 @@
class="ms-form-table-input"
:max-length="255"
size="medium"
@input="addLineIfLast(record, rowIndex)"
/>
</a-popover>
</template>
@ -639,7 +640,6 @@
slotName: 'title',
inputType: 'input',
size: 'medium',
addLineDisabled: true,
columnSelectorDisabled: true,
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) {
traverseTree<JsonSchemaTableItem>(data.value, (item) => {
item.enable = checked;

55
frontend/src/components/pure/ms-table/base-table.vue
View File

@ -40,24 +40,26 @@
:show-select-all="!!attrs.showPagination && props.showSelectorAll"
:disabled="(attrs.data as []).length === 0"
:row-key="rowKey"
:row-selection-disabled-config="attrs.rowSelectionDisabledConfig as MsTableRowSelectionDisabledConfig"
@change="handleSelectAllChange"
/>
</template>
<template #cell="{ record }">
<MsCheckbox
v-if="attrs.selectorType === 'checkbox'"
:value="getChecked(record)"
:indeterminate="getIndeterminate(record)"
:disabled="isDisabledChildren(record)"
@click.stop
@change="rowSelectChange(record)"
/>
<a-radio
v-else-if="attrs.selectorType === 'radio'"
v-model:model-value="record.tableChecked"
@click.stop
@change="(val) => handleRadioChange(val as boolean, record)"
/>
<template v-if="!isDisabledChildren(record)">
<MsCheckbox
v-if="attrs.selectorType === 'checkbox'"
:value="getChecked(record)"
:indeterminate="getIndeterminate(record)"
@click.stop
@change="rowSelectChange(record)"
/>
<a-radio
v-else-if="attrs.selectorType === 'radio'"
v-model:model-value="record.tableChecked"
@click.stop
@change="(val) => handleRadioChange(val as boolean, record)"
/>
</template>
<div v-if="attrs.showPagination && props.showSelectorAll" class="w-[16px]"></div>
</template>
</a-table-column>
@ -317,6 +319,7 @@
MsTableColumnData,
MsTableDataItem,
MsTableProps,
MsTableRowSelectionDisabledConfig,
} from './type';
import { getCurrentRecordChildrenIds } from './utils';
import type { TableChangeExtra, TableColumnData, TableData } from '@arco-design/web-vue';
@ -334,10 +337,6 @@
excludeKeys: Set<string>;
selectorStatus: SelectAllEnum;
actionConfig?: BatchActionConfig;
disabledConfig?: {
disabledChildren?: boolean;
parentKey?: string;
};
noDisable?: boolean;
showSetting?: boolean;
columns: MsTableColumn;
@ -737,8 +736,16 @@
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) {
if (!record.children) {
if (!record.children || (attrs.rowSelectionDisabledConfig as MsTableRowSelectionDisabledConfig)?.disabledChildren) {
return props.selectedKeys.has(record[rowKey || 'id']);
}
@ -747,7 +754,7 @@
}
function getIndeterminate(record: TableData) {
if (!record.children) {
if (!record.children || (attrs.rowSelectionDisabledConfig as MsTableRowSelectionDisabledConfig)?.disabledChildren) {
return false;
}
const childKeyIds = getCurrentRecordChildrenIds(record.children, rowKey || 'id');
@ -762,14 +769,6 @@
return false;
}
function isDisabledChildren(record: TableData) {
if (!props.disabledConfig?.disabledChildren) {
return false;
}
// 子级禁用
return !!record[props.disabledConfig.parentKey || 'parent'];
}
onMounted(async () => {
await initColumn();
batchLeft.value = getBatchLeft();

5
frontend/src/components/pure/ms-table/select-all.vue
View File

@ -34,7 +34,7 @@
import { SelectAllEnum } from '@/enums/tableEnum';
import { MsTableDataItem } from './type';
import { MsTableDataItem, MsTableRowSelectionDisabledConfig } from './type';
const { t } = useI18n();
@ -51,6 +51,7 @@
disabled: boolean;
excludeKeys: string[];
rowKey?: string;
rowSelectionDisabledConfig?: MsTableRowSelectionDisabledConfig;
}>(),
{
current: 0,
@ -137,7 +138,7 @@
rowKey: string
): boolean {
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 !selectedKeys.has(item[rowKey]);

7
frontend/src/components/pure/ms-table/type.ts
View File

@ -34,6 +34,11 @@ export interface MsTableColumnFilterConfig {
secondLabelKey?: string;
}
export interface MsTableRowSelectionDisabledConfig {
disabledChildren?: boolean;
parentKey?: string;
}
export interface MsTableColumnData extends TableColumnData {
// 是否可排序
showDrag?: boolean;
@ -122,6 +127,8 @@ export interface MsTableProps<T> {
onlyPageSize?: boolean; // 简单设置气泡下，是否只展示页码调整
filterIconAlignLeft?: boolean; // 筛选图标是否靠左
paginationSize?: 'small' | 'mini' | 'medium' | 'large';
// 行选择器禁用配置
rowSelectionDisabledConfig?: MsTableRowSelectionDisabledConfig;
[key: string]: any;
}

18
frontend/src/components/pure/ms-table/useTable.ts
View File

@ -301,7 +301,7 @@ export default function useTableProps<T>(
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);
}
});
@ -344,7 +344,7 @@ export default function useTableProps<T>(
propsRes.value.selectedKeys.add(item[rowKey]);
propsRes.value.excludeKeys.delete(item[rowKey]);
}
if (item.children) {
if (item.children && !props?.rowSelectionDisabledConfig?.disabledChildren) {
collectIds(item.children, rowKey);
}
});
@ -491,6 +491,20 @@ export default function useTableProps<T>(
const { rowKey } = propsRes.value;
const key = record[rowKey || 'id'];
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);
let isSelectChildren;

10
frontend/src/views/test-plan/testPlan/components/planTable.vue
View File

@ -39,10 +39,6 @@
:selectable="hasOperationPermission && showType !== testPlanTypeEnum.ALL && !isArchived"
filter-icon-align-left
:expanded-keys="expandedKeys"
:disabled-config="{
disabledChildren: true,
parentKey: 'parent',
}"
:first-column-width="32"
v-on="propsEvent"
@batch-action="handleTableBatch"
@ -825,11 +821,15 @@
showSelectorAll: false,
draggable: { type: 'handle' },
draggableCondition: true,
rowSelectionDisabledConfig: {
disabledChildren: true,
parentKey: 'parent',
},
});
function getTags(record: TestPlanItem) {
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 {
...record,