refactor: association field support sorting rules in sub-table (#2326)

* refactor: association field support sorting rules in sub-table

* refactor: code improve
This commit is contained in:
katherinehhh 2023-08-04 10:56:34 +08:00 committed by GitHub
parent d333ad201a
commit d6cc87d9a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 149 additions and 131 deletions

View File

@ -16,7 +16,6 @@ import {
useCollection,
useCollectionFilterOptions,
useCollectionManager,
useSortFields,
} from '../../../collection-manager';
import { isTitleField } from '../../../collection-manager/Configuration/CollectionFields';
import { GeneralSchemaItems } from '../../../schema-items/GeneralSchemaItems';
@ -195,21 +194,8 @@ FormItem.Designer = function Designer() {
}
const dataSource = useCollectionFilterOptions(collectionField?.target);
const defaultFilter = fieldSchema?.['x-component-props']?.service?.params?.filter || {};
const sortFields = useSortFields(collectionField?.target);
const defaultSort = field.componentProps?.service?.params?.sort || [];
const fieldMode = field?.componentProps?.['mode'] || (isFileField ? 'FileManager' : 'Select');
const isSelectFieldMode = isAssociationField && fieldMode === 'Select';
const sort = defaultSort?.map((item: string) => {
return item?.startsWith('-')
? {
field: item.substring(1),
direction: 'desc',
}
: {
field: item,
direction: 'asc',
};
});
const isSubFormMode = fieldSchema['x-component-props']?.mode === 'Nester';
const isPickerMode = fieldSchema['x-component-props']?.mode === 'Picker';
const showFieldMode = isAssociationField && fieldModeOptions && !isTableField;
@ -424,98 +410,7 @@ FormItem.Designer = function Designer() {
}}
/>
)}
{isSelectFieldMode && !field.readPretty && (
<SchemaSettings.ModalItem
title={t('Set default sorting rules')}
components={{ ArrayItems }}
schema={
{
type: 'object',
title: t('Set default sorting rules'),
properties: {
sort: {
type: 'array',
default: sort,
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
items: {
type: 'object',
properties: {
space: {
type: 'void',
'x-component': 'Space',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
field: {
type: 'string',
enum: sortFields,
required: true,
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
style: {
width: 260,
},
},
},
direction: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Radio.Group',
'x-component-props': {
optionType: 'button',
},
enum: [
{
label: t('ASC'),
value: 'asc',
},
{
label: t('DESC'),
value: 'desc',
},
],
},
remove: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
},
},
properties: {
add: {
type: 'void',
title: t('Add sort field'),
'x-component': 'ArrayItems.Addition',
},
},
},
},
} as ISchema
}
onSubmit={({ sort }) => {
const sortArr = sort.map((item) => {
return item.direction === 'desc' ? `-${item.field}` : item.field;
});
_.set(field.componentProps, 'service.params.sort', sortArr);
fieldSchema['x-component-props'] = field.componentProps;
dn.emit('patch', {
schema: {
['x-uid']: fieldSchema['x-uid'],
'x-component-props': field.componentProps,
},
});
}}
/>
)}
{isSelectFieldMode && !field.readPretty && <SchemaSettings.SortingRule />}
{showFieldMode && (
<SchemaSettings.SelectItem
key="field-mode"

View File

@ -2,6 +2,7 @@ import { ISchema, useField, useFieldSchema } from '@formily/react';
import { set } from 'lodash';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { ArrayItems } from '@formily/antd-v5';
import { useCollectionFilterOptions, useCollectionManager } from '../../../collection-manager';
import { GeneralSchemaDesigner, SchemaSettings, isPatternDisabled, isShowDefaultValue } from '../../../schema-settings';
import { useCompile, useDesignable, useFieldModeOptions } from '../../hooks';
@ -58,7 +59,7 @@ export const TableColumnDesigner = (props) => {
const targetCollection = getCollection(collectionField?.target);
const isFileField = isFileCollection(targetCollection);
const isSubTableColumn = ['QuickEdit', 'FormItem'].includes(fieldSchema['x-decorator']);
const { currentMode, field: tableField } = useAssociationFieldContext();
const { currentMode } = useAssociationFieldContext();
const defaultFilter = fieldSchema?.['x-component-props']?.service?.params?.filter || {};
const dataSource = useCollectionFilterOptions(collectionField?.target);
const isDateField = ['datetime', 'createdAt', 'updatedAt'].includes(collectionField?.interface);
@ -132,10 +133,9 @@ export const TableColumnDesigner = (props) => {
set(field.componentProps, 'service.params.filter', filter);
fieldSchema['x-component-props'] = field.componentProps;
const path = field.path?.splice(field.path?.length - 1, 1);
(tableField as any)?.value.map((_, index) => {
field.form.query(`${path.concat(`${index}.` + fieldSchema.name)}`).take((f) => {
set(f.componentProps, 'service.params.filter', filter);
});
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
// set(f.componentProps, 'service.params.filter', filter);
f.componentProps.service.params.filter = filter;
});
dn.emit('patch', {
schema: {
@ -239,7 +239,8 @@ export const TableColumnDesigner = (props) => {
label,
};
fieldSchema['x-component-props']['fieldNames'] = fieldNames;
field.query(`.*.${fieldSchema.name}`).take((f) => {
const path = field.path?.splice(field.path?.length - 1, 1);
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
f.componentProps.fieldNames = fieldNames;
});
dn.emit('patch', {
@ -318,10 +319,8 @@ export const TableColumnDesigner = (props) => {
fieldSchema['required'] = required;
schema['required'] = required;
const path = field.path?.splice(field.path?.length - 1, 1);
(tableField as any)?.value.map((_, index) => {
field.form.query(`${path.concat(`${index}.` + fieldSchema.name)}`).take((f) => {
f.required = required;
});
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
f.required = required;
});
dn.emit('patch', {
schema,
@ -354,11 +353,9 @@ export const TableColumnDesigner = (props) => {
fieldSchema['x-disabled'] = true;
schema['x-read-pretty'] = false;
schema['x-disabled'] = true;
(tableField as any)?.value.map((_, index) => {
field.form.query(`${path.concat(`${index}.` + fieldSchema.name)}`).take((f) => {
f.readonly = true;
f.disabled = true;
});
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
f.readonly = true;
f.disabled = true;
});
break;
}
@ -367,10 +364,8 @@ export const TableColumnDesigner = (props) => {
fieldSchema['x-disabled'] = false;
schema['x-read-pretty'] = true;
schema['x-disabled'] = false;
(tableField as any)?.value.map((_, index) => {
field.form.query(`${path.concat(`${index}.` + fieldSchema.name)}`).take((f) => {
f.readPretty = true;
});
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
f.readPretty = true;
});
break;
}
@ -379,11 +374,9 @@ export const TableColumnDesigner = (props) => {
fieldSchema['x-disabled'] = false;
schema['x-read-pretty'] = false;
schema['x-disabled'] = false;
(tableField as any)?.value.map((_, index) => {
field.form.query(`${path.concat(`${index}.` + fieldSchema.name)}`).take((f) => {
f.readPretty = false;
f.disabled + false;
});
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
f.readPretty = false;
f.disabled + false;
});
break;
}
@ -398,7 +391,20 @@ export const TableColumnDesigner = (props) => {
/>
)}
{isDateField && <SchemaSettings.DataFormat fieldSchema={fieldSchema} />}
{isSubTableColumn &&
!field?.readPretty &&
['obo', 'oho', 'o2o', 'o2m', 'm2m', 'm2o'].includes(collectionField?.interface) && (
<SchemaSettings.SortingRule
fieldSchema={fieldSchema}
onSubmitCallBack={(sortArr) => {
const path = field.path?.splice(field.path?.length - 1, 1);
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
f.componentProps.service = f.componentProps.service || { params: {} };
f.componentProps.service.params.sort = sortArr;
});
}}
/>
)}
{isSubTableColumn && !field?.readPretty && isShowDefaultValue(collectionField, getInterface) && (
<SchemaSettings.DefaultValue fieldSchema={fieldSchema} />
)}

View File

@ -56,6 +56,7 @@ import {
useFilterBlock,
useGlobalTheme,
useLinkageCollectionFilterOptions,
useSortFields,
} from '..';
import { useTableBlockContext } from '../block-provider';
import { findFilterTargets, updateFilterTargets } from '../block-provider/hooks';
@ -1537,6 +1538,122 @@ SchemaSettings.DefaultValue = function DefaultValueConfigure(props) {
/>
);
};
SchemaSettings.SortingRule = function SortRuleConfigure(props) {
const field = useField();
const { dn } = useDesignable();
const { t } = useTranslation();
const currentSchema = useFieldSchema();
const { getField } = useCollection();
const { getCollectionJoinField } = useCollectionManager();
const fieldSchema = props?.fieldSchema ?? currentSchema;
const collectionField = getField(fieldSchema['name']) || getCollectionJoinField(fieldSchema['x-collection-field']);
const sortFields = useSortFields(collectionField?.target);
const defaultSort = fieldSchema['x-component-props']?.service?.params?.sort || [];
const sort = defaultSort?.map((item: string) => {
return item?.startsWith('-')
? {
field: item.substring(1),
direction: 'desc',
}
: {
field: item,
direction: 'asc',
};
});
return (
<SchemaSettings.ModalItem
title={t('Set default sorting rules')}
components={{ ArrayItems }}
schema={
{
type: 'object',
title: t('Set default sorting rules'),
properties: {
sort: {
type: 'array',
default: sort,
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
items: {
type: 'object',
properties: {
space: {
type: 'void',
'x-component': 'Space',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
field: {
type: 'string',
enum: sortFields,
required: true,
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
style: {
width: 260,
},
},
},
direction: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Radio.Group',
'x-component-props': {
optionType: 'button',
},
enum: [
{
label: t('ASC'),
value: 'asc',
},
{
label: t('DESC'),
value: 'desc',
},
],
},
remove: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
},
},
properties: {
add: {
type: 'void',
title: t('Add sort field'),
'x-component': 'ArrayItems.Addition',
},
},
},
},
} as ISchema
}
onSubmit={({ sort }) => {
const sortArr = sort.map((item) => {
return item.direction === 'desc' ? `-${item.field}` : item.field;
});
_.set(field.componentProps, 'service.params.sort', sortArr);
props?.onSubmitCallBack?.(sortArr);
fieldSchema['x-component-props'] = field.componentProps;
dn.emit('patch', {
schema: {
['x-uid']: fieldSchema['x-uid'],
'x-component-props': field.componentProps,
},
});
}}
/>
);
};
// 是否显示默认值配置项
export const isShowDefaultValue = (collectionField: CollectionFieldOptions, getInterface) => {
return (