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:
parent
d333ad201a
commit
d6cc87d9a2
@ -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"
|
||||
|
@ -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,11 +319,9 @@ 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) => {
|
||||
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
|
||||
f.required = required;
|
||||
});
|
||||
});
|
||||
dn.emit('patch', {
|
||||
schema,
|
||||
});
|
||||
@ -354,12 +353,10 @@ 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) => {
|
||||
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
|
||||
f.readonly = true;
|
||||
f.disabled = true;
|
||||
});
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'read-pretty': {
|
||||
@ -367,11 +364,9 @@ 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) => {
|
||||
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
|
||||
f.readPretty = true;
|
||||
});
|
||||
});
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
@ -379,12 +374,10 @@ 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) => {
|
||||
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} />
|
||||
)}
|
||||
|
@ -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 (
|
||||
|
Loading…
Reference in New Issue
Block a user