From db104c20ce03c70f23a135bd33d153312335db8a Mon Sep 17 00:00:00 2001 From: wjh Date: Wed, 20 Mar 2024 12:02:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E7=BB=84=E4=BB=B6=E4=B8=8B=E6=8B=89=E6=A1=86=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=20(#436)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachycode/pulls/436 Reviewed-by: sealday Co-authored-by: wjh Co-committed-by: wjh --- .../FormFilter/SchemaSettingsRemove.tsx | 2 +- .../FilterFormItemCustom.tsx | 135 ++++++++++++++++-- 2 files changed, 122 insertions(+), 15 deletions(-) diff --git a/packages/plugins/@hera/plugin-core/src/client/components/FormFilter/SchemaSettingsRemove.tsx b/packages/plugins/@hera/plugin-core/src/client/components/FormFilter/SchemaSettingsRemove.tsx index f990c1086..8fa01ba6d 100644 --- a/packages/plugins/@hera/plugin-core/src/client/components/FormFilter/SchemaSettingsRemove.tsx +++ b/packages/plugins/@hera/plugin-core/src/client/components/FormFilter/SchemaSettingsRemove.tsx @@ -43,7 +43,7 @@ export const SchemaSettingsRemove: FC = (props) => { } await dn.remove(null, options); await confirm?.onOk?.(); - if (fieldSchema['x-component'] === 'Select' || fieldSchema['x-component'] === 'AutoComplete') { + if (fieldSchema['collectionName']) { delete form.values['custom'][fieldSchema['collectionName']]; } else { if (form.values['custom']?.[fieldName]) { diff --git a/packages/plugins/@hera/plugin-core/src/client/schema-initializer/FilterFormItemCustomInitializer/FilterFormItemCustom.tsx b/packages/plugins/@hera/plugin-core/src/client/schema-initializer/FilterFormItemCustomInitializer/FilterFormItemCustom.tsx index 40478231a..64c6afe2b 100644 --- a/packages/plugins/@hera/plugin-core/src/client/schema-initializer/FilterFormItemCustomInitializer/FilterFormItemCustom.tsx +++ b/packages/plugins/@hera/plugin-core/src/client/schema-initializer/FilterFormItemCustomInitializer/FilterFormItemCustom.tsx @@ -24,10 +24,10 @@ import { useFormBlockContext, useAPIClient, } from '@nocobase/client'; -import { ConfigProvider } from 'antd'; -import React, { memo, useCallback, useContext, useMemo } from 'react'; -import { Schema, SchemaOptionsContext, observer, useField, useFieldSchema } from '@formily/react'; -import { FormLayout } from '@formily/antd-v5'; +import { ConfigProvider, Radio, Space } from 'antd'; +import React, { memo, useCallback, useContext, useMemo, Profiler } from 'react'; +import { Schema, SchemaOptionsContext, observer, useField, useFieldSchema, useForm } from '@formily/react'; +import { ArrayItems, FormLayout } from '@formily/antd-v5'; import { uid } from '@formily/shared'; import { Field, onFieldValueChange } from '@formily/core'; import { @@ -41,12 +41,99 @@ import _ from 'lodash'; import { SchemaSettingsRemove } from '../../components/FormFilter/SchemaSettingsRemove'; import { useTranslation } from '../../locale'; +const FieldComponentProps: React.FC = observer( + (props) => { + const { scope, components } = useContext(SchemaOptionsContext); + const schema = { + type: 'object', + properties: { + mode: { + type: 'string', + enum: [ + { + label: '{{ t("Single select") }}', + value: '', + }, + ], + 'x-decorator': 'FormItem', + 'x-component': 'Radio.Group', + 'x-component-props': { + defaultValue: '', + }, + }, + options: { + title: '{{t("Options")}}', + type: 'array', + 'x-decorator': 'FormItem', + 'x-component': 'ArrayItems', + items: { + type: 'object', + properties: { + space: { + type: 'void', + 'x-component': 'Space', + properties: { + sort: { + type: 'void', + 'x-decorator': 'FormItem', + 'x-component': 'ArrayItems.SortHandle', + }, + label: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + 'x-component-props': { + placeholder: '{{t("Option label")}}', + }, + required: true, + }, + value: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + 'x-component-props': { + placeholder: '{{t("Option value")}}', + }, + required: true, + }, + remove: { + type: 'void', + 'x-decorator': 'FormItem', + 'x-component': 'ArrayItems.Remove', + }, + }, + }, + }, + }, + properties: { + add: { + type: 'void', + title: '{{t("add")}}', + 'x-component': 'ArrayItems.Addition', + }, + }, + }, + }, + }; + console.log(scope, 'scope'); + console.log(components, 'components'); + + return ( + + + + ); + }, + { displayName: 'FieldComponentProps' }, +); + export const useFieldComponents = () => { const { t } = useTranslation(); const options = [ { label: t('Input'), value: 'Input' }, { label: t('AutoComplete'), value: 'AutoComplete' }, { label: t('Select'), value: 'Select' }, + // { label: t('CustomSelect***'), value: 'CustomSelect' }, ]; return { options, @@ -77,7 +164,10 @@ export const FilterCustomItemInitializer: React.FC<{ const values = await FormDialog( t('Add custom field'), () => ( - + @@ -126,13 +223,23 @@ export const FilterCustomItemInitializer: React.FC<{ effects() { onFieldValueChange('component', (field) => { const name = field.value; - const component = field.query('.collection').take() as Field; + const collectionComponent = field.query('.collection').take() as Field; + const propsComponent = field.query('.props').take() as Field; if (name === 'Select' || name === 'AutoComplete') { - component.setDisplay('visible'); - component.setRequired(true); + collectionComponent.setDisplay('visible'); + collectionComponent.setRequired(true); + propsComponent.setDisplay('none'); + propsComponent.setRequired(false); + } else if (name === 'CustomSelect') { + collectionComponent.setDisplay('none'); + collectionComponent.setRequired(false); + propsComponent.setDisplay('visible'); + propsComponent.setRequired(true); } else { - component.setDisplay('none'); - component.setRequired(false); + collectionComponent.setDisplay('none'); + collectionComponent.setRequired(false); + propsComponent.setDisplay('none'); + propsComponent.setRequired(false); } }); }, @@ -212,10 +319,10 @@ export const FilterItemCustomDesigner: React.FC = () => { }} /> ) : null} - {component !== 'Input' ? : null} - {component !== 'Input' ? : null} - {component !== 'Input' ? : null} - {component !== 'Input' ? : null} + {component === 'Select' || component === 'AutoComplete' ? : null} + {component === 'Select' || component === 'AutoComplete' ? : null} + {component === 'Select' || component === 'AutoComplete' ? : null} + {component === 'Select' || component === 'AutoComplete' ? : null}