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,
|
useCollection,
|
||||||
useCollectionFilterOptions,
|
useCollectionFilterOptions,
|
||||||
useCollectionManager,
|
useCollectionManager,
|
||||||
useSortFields,
|
|
||||||
} from '../../../collection-manager';
|
} from '../../../collection-manager';
|
||||||
import { isTitleField } from '../../../collection-manager/Configuration/CollectionFields';
|
import { isTitleField } from '../../../collection-manager/Configuration/CollectionFields';
|
||||||
import { GeneralSchemaItems } from '../../../schema-items/GeneralSchemaItems';
|
import { GeneralSchemaItems } from '../../../schema-items/GeneralSchemaItems';
|
||||||
@ -195,21 +194,8 @@ FormItem.Designer = function Designer() {
|
|||||||
}
|
}
|
||||||
const dataSource = useCollectionFilterOptions(collectionField?.target);
|
const dataSource = useCollectionFilterOptions(collectionField?.target);
|
||||||
const defaultFilter = fieldSchema?.['x-component-props']?.service?.params?.filter || {};
|
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 fieldMode = field?.componentProps?.['mode'] || (isFileField ? 'FileManager' : 'Select');
|
||||||
const isSelectFieldMode = isAssociationField && fieldMode === '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 isSubFormMode = fieldSchema['x-component-props']?.mode === 'Nester';
|
||||||
const isPickerMode = fieldSchema['x-component-props']?.mode === 'Picker';
|
const isPickerMode = fieldSchema['x-component-props']?.mode === 'Picker';
|
||||||
const showFieldMode = isAssociationField && fieldModeOptions && !isTableField;
|
const showFieldMode = isAssociationField && fieldModeOptions && !isTableField;
|
||||||
@ -424,98 +410,7 @@ FormItem.Designer = function Designer() {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{isSelectFieldMode && !field.readPretty && (
|
{isSelectFieldMode && !field.readPretty && <SchemaSettings.SortingRule />}
|
||||||
<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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{showFieldMode && (
|
{showFieldMode && (
|
||||||
<SchemaSettings.SelectItem
|
<SchemaSettings.SelectItem
|
||||||
key="field-mode"
|
key="field-mode"
|
||||||
|
@ -2,6 +2,7 @@ import { ISchema, useField, useFieldSchema } from '@formily/react';
|
|||||||
import { set } from 'lodash';
|
import { set } from 'lodash';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { ArrayItems } from '@formily/antd-v5';
|
||||||
import { useCollectionFilterOptions, useCollectionManager } from '../../../collection-manager';
|
import { useCollectionFilterOptions, useCollectionManager } from '../../../collection-manager';
|
||||||
import { GeneralSchemaDesigner, SchemaSettings, isPatternDisabled, isShowDefaultValue } from '../../../schema-settings';
|
import { GeneralSchemaDesigner, SchemaSettings, isPatternDisabled, isShowDefaultValue } from '../../../schema-settings';
|
||||||
import { useCompile, useDesignable, useFieldModeOptions } from '../../hooks';
|
import { useCompile, useDesignable, useFieldModeOptions } from '../../hooks';
|
||||||
@ -58,7 +59,7 @@ export const TableColumnDesigner = (props) => {
|
|||||||
const targetCollection = getCollection(collectionField?.target);
|
const targetCollection = getCollection(collectionField?.target);
|
||||||
const isFileField = isFileCollection(targetCollection);
|
const isFileField = isFileCollection(targetCollection);
|
||||||
const isSubTableColumn = ['QuickEdit', 'FormItem'].includes(fieldSchema['x-decorator']);
|
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 defaultFilter = fieldSchema?.['x-component-props']?.service?.params?.filter || {};
|
||||||
const dataSource = useCollectionFilterOptions(collectionField?.target);
|
const dataSource = useCollectionFilterOptions(collectionField?.target);
|
||||||
const isDateField = ['datetime', 'createdAt', 'updatedAt'].includes(collectionField?.interface);
|
const isDateField = ['datetime', 'createdAt', 'updatedAt'].includes(collectionField?.interface);
|
||||||
@ -132,10 +133,9 @@ export const TableColumnDesigner = (props) => {
|
|||||||
set(field.componentProps, 'service.params.filter', filter);
|
set(field.componentProps, 'service.params.filter', filter);
|
||||||
fieldSchema['x-component-props'] = field.componentProps;
|
fieldSchema['x-component-props'] = field.componentProps;
|
||||||
const path = field.path?.splice(field.path?.length - 1, 1);
|
const path = field.path?.splice(field.path?.length - 1, 1);
|
||||||
(tableField as any)?.value.map((_, index) => {
|
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
|
||||||
field.form.query(`${path.concat(`${index}.` + fieldSchema.name)}`).take((f) => {
|
// set(f.componentProps, 'service.params.filter', filter);
|
||||||
set(f.componentProps, 'service.params.filter', filter);
|
f.componentProps.service.params.filter = filter;
|
||||||
});
|
|
||||||
});
|
});
|
||||||
dn.emit('patch', {
|
dn.emit('patch', {
|
||||||
schema: {
|
schema: {
|
||||||
@ -239,7 +239,8 @@ export const TableColumnDesigner = (props) => {
|
|||||||
label,
|
label,
|
||||||
};
|
};
|
||||||
fieldSchema['x-component-props']['fieldNames'] = fieldNames;
|
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;
|
f.componentProps.fieldNames = fieldNames;
|
||||||
});
|
});
|
||||||
dn.emit('patch', {
|
dn.emit('patch', {
|
||||||
@ -318,10 +319,8 @@ export const TableColumnDesigner = (props) => {
|
|||||||
fieldSchema['required'] = required;
|
fieldSchema['required'] = required;
|
||||||
schema['required'] = required;
|
schema['required'] = required;
|
||||||
const path = field.path?.splice(field.path?.length - 1, 1);
|
const path = field.path?.splice(field.path?.length - 1, 1);
|
||||||
(tableField as any)?.value.map((_, index) => {
|
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
|
||||||
field.form.query(`${path.concat(`${index}.` + fieldSchema.name)}`).take((f) => {
|
f.required = required;
|
||||||
f.required = required;
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
dn.emit('patch', {
|
dn.emit('patch', {
|
||||||
schema,
|
schema,
|
||||||
@ -354,11 +353,9 @@ export const TableColumnDesigner = (props) => {
|
|||||||
fieldSchema['x-disabled'] = true;
|
fieldSchema['x-disabled'] = true;
|
||||||
schema['x-read-pretty'] = false;
|
schema['x-read-pretty'] = false;
|
||||||
schema['x-disabled'] = true;
|
schema['x-disabled'] = true;
|
||||||
(tableField as any)?.value.map((_, index) => {
|
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
|
||||||
field.form.query(`${path.concat(`${index}.` + fieldSchema.name)}`).take((f) => {
|
f.readonly = true;
|
||||||
f.readonly = true;
|
f.disabled = true;
|
||||||
f.disabled = true;
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -367,10 +364,8 @@ export const TableColumnDesigner = (props) => {
|
|||||||
fieldSchema['x-disabled'] = false;
|
fieldSchema['x-disabled'] = false;
|
||||||
schema['x-read-pretty'] = true;
|
schema['x-read-pretty'] = true;
|
||||||
schema['x-disabled'] = false;
|
schema['x-disabled'] = false;
|
||||||
(tableField as any)?.value.map((_, index) => {
|
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
|
||||||
field.form.query(`${path.concat(`${index}.` + fieldSchema.name)}`).take((f) => {
|
f.readPretty = true;
|
||||||
f.readPretty = true;
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -379,11 +374,9 @@ export const TableColumnDesigner = (props) => {
|
|||||||
fieldSchema['x-disabled'] = false;
|
fieldSchema['x-disabled'] = false;
|
||||||
schema['x-read-pretty'] = false;
|
schema['x-read-pretty'] = false;
|
||||||
schema['x-disabled'] = false;
|
schema['x-disabled'] = false;
|
||||||
(tableField as any)?.value.map((_, index) => {
|
field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
|
||||||
field.form.query(`${path.concat(`${index}.` + fieldSchema.name)}`).take((f) => {
|
f.readPretty = false;
|
||||||
f.readPretty = false;
|
f.disabled + false;
|
||||||
f.disabled + false;
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -398,7 +391,20 @@ export const TableColumnDesigner = (props) => {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{isDateField && <SchemaSettings.DataFormat fieldSchema={fieldSchema} />}
|
{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) && (
|
{isSubTableColumn && !field?.readPretty && isShowDefaultValue(collectionField, getInterface) && (
|
||||||
<SchemaSettings.DefaultValue fieldSchema={fieldSchema} />
|
<SchemaSettings.DefaultValue fieldSchema={fieldSchema} />
|
||||||
)}
|
)}
|
||||||
|
@ -56,6 +56,7 @@ import {
|
|||||||
useFilterBlock,
|
useFilterBlock,
|
||||||
useGlobalTheme,
|
useGlobalTheme,
|
||||||
useLinkageCollectionFilterOptions,
|
useLinkageCollectionFilterOptions,
|
||||||
|
useSortFields,
|
||||||
} from '..';
|
} from '..';
|
||||||
import { useTableBlockContext } from '../block-provider';
|
import { useTableBlockContext } from '../block-provider';
|
||||||
import { findFilterTargets, updateFilterTargets } from '../block-provider/hooks';
|
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) => {
|
export const isShowDefaultValue = (collectionField: CollectionFieldOptions, getInterface) => {
|
||||||
return (
|
return (
|
||||||
|
Loading…
Reference in New Issue
Block a user