feat: support date picker modification

This commit is contained in:
sealday 2024-03-30 04:07:16 +08:00
parent 53bb505823
commit d675e2815c
2 changed files with 97 additions and 1 deletions

View File

@ -1,5 +1,12 @@
import React from 'react';
import { Menu, Plugin, RemoteSchemaTemplateManagerProvider, EditTitleField, useCollection } from '@nocobase/client';
import {
Menu,
Plugin,
RemoteSchemaTemplateManagerProvider,
EditTitleField,
useCollection,
SchemaSettingsDateFormat,
} from '@nocobase/client';
import { remove } from 'lodash';
import { useFieldSchema } from '@formily/react';
import { isValid } from '@formily/shared';
@ -65,6 +72,7 @@ import {
sheetBlockSettings,
} from './schema-initializer/blocks/SheetBlockInitializer';
import AssociationCascader from './schema-components/association-cascader/AssociationCascader';
import { SchemaSettingsDatePickerType } from './schema-settings/SchemaSettingsDatePickerType';
export { usePDFViewerRef } from './schema-initializer';
export * from './components/custom-components/custom-components';
@ -89,6 +97,10 @@ export class PluginCoreClient extends Plugin {
Component: EditDefaultValue,
});
this.schemaSettingsManager.addItem('fieldSettings:component:DatePicker', 'datePickerType', {
Component: SchemaSettingsDatePickerType,
});
this.schemaSettingsManager.addItem('FormItemSettings', 'hera-divider', {
type: 'divider',
useVisible() {

View File

@ -0,0 +1,84 @@
import React from 'react';
import { ISchema, useField, useFieldSchema } from '@formily/react';
import { SchemaSettingsModalItem, useCollectionManager, useDesignable } from '@nocobase/client';
import { tval, useTranslation } from '../locale';
export const SchemaSettingsDatePickerType: React.FC = () => {
const fieldSchema = useFieldSchema();
const field = useField();
const { dn } = useDesignable();
const { t } = useTranslation();
const cm = useCollectionManager();
const collectionField = cm.getCollectionField(fieldSchema?.['x-collection-field']) || {};
const defaultPicker =
fieldSchema?.['x-component-props']?.picker || collectionField?.uiSchema?.['x-component-props']?.picker || '';
return (
<SchemaSettingsModalItem
title={t('Date picker type')}
schema={
{
type: 'object',
properties: {
picker: {
type: 'string',
title: tval('Picker type'),
'x-component': 'Select',
'x-decorator': 'FormItem',
'x-decorator-props': {},
default: defaultPicker,
enum: [
{
label: t('default'),
value: '',
},
{
label: t('year'),
value: 'year',
},
{
label: t('quarter'),
value: 'quarter',
},
{
label: t('month'),
value: 'month',
},
{
label: t('week'),
value: 'week',
},
],
},
},
} as ISchema
}
onSubmit={(data) => {
const schema = {
['x-uid']: fieldSchema['x-uid'],
};
schema['x-component-props'] = fieldSchema['x-component-props'] || {};
fieldSchema['x-component-props'] = {
...(fieldSchema['x-component-props'] || {}),
...data,
};
schema['x-component-props'] = fieldSchema['x-component-props'];
field.componentProps = fieldSchema['x-component-props'];
//子表格/表格区块
const parts = (field.path.entire as string).split('.');
parts.pop();
const modifiedString = parts.join('.');
field.query(`${modifiedString}.*[0:].${fieldSchema.name}`).forEach((f) => {
if (f.props.name === fieldSchema.name) {
f.setComponentProps({ ...data });
}
});
dn.emit('patch', {
schema,
});
dn.refresh();
}}
/>
);
};
SchemaSettingsDatePickerType.displayName = 'SchemaSettingsDatePickerType';