feat: 添加自定义组件可以修改数据来源和组件,修复筛选框清空和重置后的查询问题 (#418)
<!-- Note --> <!-- This is a template for submitting a new feature. Use the bug fix template if you're submitting a bug fix pull request by adding `template=bug_fix.md` to your pull request URL. --> # Description <!-- Describe the new feature or modification to an existing feature clearly and consciously. --> # Motivation <!-- Explain the reason for adding or modifying this feature. --> # Key changes <!-- Provide a technically detailed description of the key changes made. --> - Frontend - Backend # Test plan ## Suggestions <!-- Provide any suggestions or recommendations for improvements in the testing plan. --> ## Underlying risk <!-- Identify any potential risks or issues that may arise from the new feature or modification. --> # Showcase <!-- Including any screenshots of the new feature or modification. --> Co-authored-by: sealday <sealday@gmail.com> Reviewed-on: daoyoucloud/tachycode#418 Reviewed-by: sealday <zhanglin@daoyoucloud.com> Co-authored-by: wjh <wwwjh0710@163.com> Co-committed-by: wjh <wwwjh0710@163.com>
This commit is contained in:
		
							parent
							
								
									e5baa89cac
								
							
						
					
					
						commit
						f4be99e802
					
				| @ -110,8 +110,6 @@ export const VariableInput = (props: Props) => { | ||||
|     operator, | ||||
|     uiSchema, | ||||
|     targetFieldSchema, | ||||
|     currentFormCollectionName, | ||||
|     currentIterationCollectionName, | ||||
|   }); | ||||
|   const contextVariable = useContextAssociationFields({ schema, maxDepth: 2, contextCollectionName, collectionField }); | ||||
|   const { compatOldVariables } = useCompatOldVariables({ | ||||
|  | ||||
| @ -0,0 +1,13 @@ | ||||
| export * from './custom-components/CustomAssociatedField'; | ||||
| export * from './custom-components/CustomComponentDispatcher'; | ||||
| export * from './custom-components/CustomField'; | ||||
| export * from './fields/AssociatedField'; | ||||
| export * from './fields/CalcResult'; | ||||
| export * from './fields/Expression'; | ||||
| export * from './system/MobileLink'; | ||||
| export * from './system/Notifications'; | ||||
| export * from './system/OnlineUserProvider'; | ||||
| export * from './PDFViewer'; | ||||
| export * from './SignatureInput'; | ||||
| export * from './SignaturePad'; | ||||
| export * from './GroupBlockConfigure/GroupBlockConfigure'; | ||||
| @ -137,7 +137,6 @@ export const useFilterBlockActionProps = () => { | ||||
|               ...Object.values(storedFilter).map((filter) => removeNullCondition(filter, fieldSchema)), | ||||
|               block.defaultFilter, | ||||
|             ]); | ||||
| 
 | ||||
|             return block.doFilter( | ||||
|               { | ||||
|                 ...param, | ||||
|  | ||||
| @ -1,5 +1,4 @@ | ||||
| import React from 'react'; | ||||
| import { autorun } from '@formily/reactive'; | ||||
| import { | ||||
|   Menu, | ||||
|   Plugin, | ||||
| @ -9,27 +8,10 @@ import { | ||||
|   useCollection, | ||||
| } from '@nocobase/client'; | ||||
| import { remove } from 'lodash'; | ||||
| import { CalendarBlockInitializer } from './schema-initializer/CalendarBlockInitializer'; | ||||
| import { MenuDesigner } from './schema-components/deprecated/ExtendedMenuDesigner'; | ||||
| import { InternalPDFViewer } from './schema-components/PDFViewer'; | ||||
| import { | ||||
|   PDFViewerBlockInitializer, | ||||
|   PDFViewerPrintActionInitializer, | ||||
|   PDFViewerProvider, | ||||
|   pdfViewActionInitializer, | ||||
|   usePDFViewerPrintActionProps, | ||||
| } from './schema-initializer/PDFVIewerBlockInitializer'; | ||||
| import { useCustomizeUpdateActionProps } from './hooks/useCustomizeUpdateActionProps'; | ||||
| import { OutboundButton, OutboundLinkActionInitializer } from './schema-initializer/OutboundLinkActionInitializer'; | ||||
| import { CreateSubmitActionInitializer } from './schema-initializer/CreateSubmitActionInitializer'; | ||||
| import { FilterAssociatedFields } from './schema-initializer/FilterAssociatedFields'; | ||||
| import { useFieldSchema } from '@formily/react'; | ||||
| import { isValid } from '@formily/shared'; | ||||
| import { useCreateActionProps } from './hooks/useCreateActionProps'; | ||||
| import { useOutboundActionProps } from './hooks/useOutboundActionProps'; | ||||
| import { AssociatedField } from './components/fields/AssociatedField'; | ||||
| import { DatePicker } from './schema-components/date-picker'; | ||||
| import { SettingBlockInitializer } from './schema-initializer/SettingBlockInitializer'; | ||||
| import { autorun } from '@formily/reactive'; | ||||
| import { Locale, tval } from './locale'; | ||||
| import { | ||||
|   SessionSubmit, | ||||
|   SessionUpdate, | ||||
| @ -42,45 +24,64 @@ import { | ||||
|   useSetFilterScopeVisible, | ||||
|   AfterSuccess, | ||||
| } from './schema-settings'; | ||||
| import { SignatureInput } from './components/SignatureInput'; | ||||
| import { RemoteSelect } from './schema-components/remote-select'; | ||||
| import { Select } from './schema-components/select/Select'; | ||||
| import { Locale, tval } from './locale'; | ||||
| import { | ||||
|   GroupBlockInitializer, | ||||
|   GroupBlockProvider, | ||||
|   GroupBlockToolbar, | ||||
|   groupBlockSettings, | ||||
| } from './schema-initializer/GroupBlockInitializer'; | ||||
| import { useCreateActionProps } from './hooks/useCreateActionProps'; | ||||
| import { useCustomizeUpdateActionProps } from './hooks/useCustomizeUpdateActionProps'; | ||||
| import { useFilterBlockActionProps } from './hooks/useFilterBlockActionProps'; | ||||
| import { useFilterFormCustomProps } from './hooks/useFilterFormCustomProps'; | ||||
| import { useGetCustomAssociatedComponents } from './hooks/useGetCustomAssociatedComponents'; | ||||
| import { useGetCustomComponents } from './hooks/useGetCustomComponents'; | ||||
| import { useOutboundActionProps } from './hooks/useOutboundActionProps'; | ||||
| import { AdminLayout, DetailsPage, HomePage, OutboundPage, PageLayout } from './pages'; | ||||
| import { Configuration, HomePageConfiguration, LinkManager } from './settings-manager-components'; | ||||
| import { | ||||
|   FilterFormItem, | ||||
|   FilterItemCustomDesigner, | ||||
|   FilterFormItemCustom, | ||||
| } from './schema-initializer/FilterFormItemCustomInitializer/FilterFormItemCustom'; | ||||
| import { GroupBlock } from './schema-components/GroupBlock'; | ||||
|   AssociatedFieldInterface, | ||||
|   CalcFieldInterface, | ||||
|   CustomFieldInterface, | ||||
|   CustomAssociatedFieldInterface, | ||||
|   SignaturePadFieldInterface, | ||||
| } from './interfaces'; | ||||
| import { | ||||
|   AssociatedField, | ||||
|   CalcResult, | ||||
|   CustomAssociatedField, | ||||
|   CustomField, | ||||
|   CustomComponentDispatcher, | ||||
|   CustomComponentStub, | ||||
|   customComponentDispatcherSettings, | ||||
| } from './components/custom-components/CustomComponentDispatcher'; | ||||
| import { useFilterBlockActionProps } from './hooks/useFilterBlockActionProps'; | ||||
| import { GroupBlockConfigure } from './components/GroupBlockConfigure/GroupBlockConfigure'; | ||||
| import { AssociatedFieldInterface } from './interfaces/associated'; | ||||
| import { CalcFieldInterface } from './interfaces/calc'; | ||||
| import { CustomFieldInterface } from './interfaces/custom'; | ||||
| import { CustomAssociatedFieldInterface } from './interfaces/customAssociated'; | ||||
| import { SignaturePadFieldInterface } from './interfaces/signatureSchema'; | ||||
| import { CalcResult } from './components/fields/CalcResult'; | ||||
| import { CustomAssociatedField } from './components/custom-components/CustomAssociatedField'; | ||||
| import Expression from './components/fields/Expression'; | ||||
| import { CustomField } from './components/custom-components/CustomField'; | ||||
| import { useGetCustomAssociatedComponents } from './hooks/useGetCustomAssociatedComponents'; | ||||
| import { useGetCustomComponents } from './hooks/useGetCustomComponents'; | ||||
| import { AutoComplete } from './schema-components/AutoComplete/AutoComplete'; | ||||
| import { AdminLayout, DetailsPage, HomePage, OutboundPage, PageLayout } from './pages'; | ||||
| import { Configuration, HomePageConfiguration, LinkManager } from './settings-manager-components'; | ||||
| export { usePDFViewerRef } from './schema-initializer/PDFVIewerBlockInitializer'; | ||||
|   Expression, | ||||
|   GroupBlockConfigure, | ||||
|   SignatureInput, | ||||
| } from './components'; | ||||
| import { | ||||
|   AutoComplete, | ||||
|   DatePicker, | ||||
|   GroupBlock, | ||||
|   InternalPDFViewer, | ||||
|   MenuDesigner, | ||||
|   RemoteSelect, | ||||
|   Select, | ||||
| } from './schema-components'; | ||||
| import { | ||||
|   CalendarBlockInitializer, | ||||
|   CreateSubmitActionInitializer, | ||||
|   FilterAssociatedFields, | ||||
|   FilterFormItem, | ||||
|   FilterFormItemCustom, | ||||
|   FilterItemCustomDesigner, | ||||
|   GroupBlockInitializer, | ||||
|   GroupBlockProvider, | ||||
|   GroupBlockToolbar, | ||||
|   OutboundButton, | ||||
|   OutboundLinkActionInitializer, | ||||
|   PDFViewerBlockInitializer, | ||||
|   PDFViewerPrintActionInitializer, | ||||
|   PDFViewerProvider, | ||||
|   SettingBlockInitializer, | ||||
|   groupBlockSettings, | ||||
|   pdfViewActionInitializer, | ||||
|   usePDFViewerPrintActionProps, | ||||
| } from './schema-initializer'; | ||||
| export { usePDFViewerRef } from './schema-initializer'; | ||||
| export * from './components/custom-components/custom-components'; | ||||
| 
 | ||||
| export class PluginCoreClient extends Plugin { | ||||
|  | ||||
| @ -0,0 +1,5 @@ | ||||
| export * from './associated'; | ||||
| export * from './calc'; | ||||
| export * from './custom'; | ||||
| export * from './customAssociated'; | ||||
| export * from './signatureSchema'; | ||||
| @ -28,7 +28,7 @@ export const AutoComplete = (props) => { | ||||
|       }, | ||||
|     }); | ||||
|     changLable(defultOptions?.data?.data); | ||||
|   }, [fieldFilter?.filter]); | ||||
|   }, [fieldFilter?.filter, fieldSchema['collectionName']]); | ||||
| 
 | ||||
|   useEffect(() => { | ||||
|     changLable(defultValue); | ||||
| @ -57,14 +57,15 @@ export const AutoComplete = (props) => { | ||||
|       } | ||||
|       const valueLabel = options.filter((item) => item.value === data)[0]; | ||||
|       if (valueLabel) { | ||||
|         setValue(valueLabel.label); | ||||
|         form.values.custom[fieldSchema['collectionName']] = valueLabel; | ||||
|         setValue(valueLabel.label); | ||||
|       } else { | ||||
|         setValue(data); | ||||
|         form.values.custom[fieldSchema['collectionName']] = {}; | ||||
|         form.values.custom[fieldSchema['collectionName']][fieldNames.label] = data; | ||||
|         setValue(data); | ||||
|       } | ||||
|     } else { | ||||
|       form.values.custom[fieldSchema['collectionName']] = {}; | ||||
|       setValue(data); | ||||
|       setOptions(defultValue); | ||||
|     } | ||||
|  | ||||
| @ -0,0 +1,41 @@ | ||||
| import { useField, useFieldSchema, useForm } from '@formily/react'; | ||||
| import { | ||||
|   SchemaSettingsSelectItem, | ||||
|   useCollection, | ||||
|   useCollectionField, | ||||
|   useCollectionManager, | ||||
|   useDesignable, | ||||
| } from '@nocobase/client'; | ||||
| import React from 'react'; | ||||
| 
 | ||||
| export const SchemaSettingCollection = () => { | ||||
|   const fieldSchema = useFieldSchema(); | ||||
|   const field = useField(); | ||||
|   const collections = useCollectionManager(); | ||||
|   const options = collections?.dataSource['options']?.collections.map((value) => { | ||||
|     return { | ||||
|       label: value.name, | ||||
|       value: value.name, | ||||
|     }; | ||||
|   }); | ||||
|   const { dn } = useDesignable(); | ||||
|   return ( | ||||
|     <SchemaSettingsSelectItem | ||||
|       key="component-field" | ||||
|       title="Edit Collection" | ||||
|       options={options} | ||||
|       value={fieldSchema['collectionName']} | ||||
|       onChange={(name) => { | ||||
|         fieldSchema['collectionName'] = name; | ||||
|         fieldSchema['name'] = 'custom.' + name; | ||||
|         const schema = { | ||||
|           ['x-uid']: fieldSchema['x-uid'], | ||||
|           collectionName: name, | ||||
|           name: 'custom.' + name, | ||||
|         }; | ||||
|         void dn.emit('patch', { schema }); | ||||
|         dn.refresh(); | ||||
|       }} | ||||
|     /> | ||||
|   ); | ||||
| }; | ||||
| @ -0,0 +1,30 @@ | ||||
| import { useField, useFieldSchema } from '@formily/react'; | ||||
| import { SchemaSettingsSelectItem, useDesignable } from '@nocobase/client'; | ||||
| import { useFieldComponents } from '../schema-initializer/FilterFormItemCustomInitializer/FilterFormItemCustom'; | ||||
| import React from 'react'; | ||||
| 
 | ||||
| export const SchemaSettingComponent = () => { | ||||
|   const fieldSchema = useFieldSchema(); | ||||
|   const field = useField(); | ||||
|   const { options } = useFieldComponents(); | ||||
|   const { dn } = useDesignable(); | ||||
|   return ( | ||||
|     <SchemaSettingsSelectItem | ||||
|       key="component-field" | ||||
|       title="Field Component" | ||||
|       options={options} | ||||
|       value={fieldSchema['x-component']} | ||||
|       onChange={(mode) => { | ||||
|         const schema = { | ||||
|           ['x-uid']: fieldSchema['x-uid'], | ||||
|           ['x-component']: mode, | ||||
|         }; | ||||
|         field.component = mode; | ||||
|         void dn.emit('patch', { | ||||
|           schema, | ||||
|         }); | ||||
|         dn.refresh(); | ||||
|       }} | ||||
|     /> | ||||
|   ); | ||||
| }; | ||||
| @ -0,0 +1,7 @@ | ||||
| export * from './AutoComplete/AutoComplete'; | ||||
| export * from './GroupBlock'; | ||||
| export * from './PDFViewer'; | ||||
| export * from './date-picker'; | ||||
| export * from './deprecated/ExtendedMenuDesigner'; | ||||
| export * from './remote-select'; | ||||
| export * from './select/Select'; | ||||
| @ -26,6 +26,7 @@ const ObjectSelect = (props: Props) => { | ||||
|   const fieldSchema = useFieldSchema(); | ||||
|   const collectionName = fieldSchema['collectionName']; | ||||
|   const filterField = fieldSchema['x-component-props']['params']; | ||||
|   const fieldName = fieldSchema['x-component-props'].fieldNames; | ||||
|   const api = useAPIClient(); | ||||
|   useAsyncEffect(async () => { | ||||
|     if (collectionName) { | ||||
| @ -36,9 +37,14 @@ const ObjectSelect = (props: Props) => { | ||||
|           filter: filterField ? { ...filterField.filter } : {}, | ||||
|         }, | ||||
|       }); | ||||
|       setDefOptions(defValue?.data?.data); | ||||
|       const changOptions = defValue?.data?.data.map((value) => { | ||||
|         value['label'] = value[fieldName.label]; | ||||
|         value['value'] = value[fieldNames.label]; | ||||
|         return value; | ||||
|       }); | ||||
|       setDefOptions(changOptions); | ||||
|     } | ||||
|   }, [filterField?.filter]); | ||||
|   }, [filterField?.filter, collectionName]); | ||||
|   const toValue = (v: any) => { | ||||
|     if (isEmptyObject(v)) { | ||||
|       return; | ||||
|  | ||||
| @ -34,6 +34,8 @@ import { EditFormulaTitleField, EditTitle, EditTitleField } from '../../schema-s | ||||
| import _ from 'lodash'; | ||||
| import { SchemaSettingsRemove } from '../../components/FormFilter/SchemaSettingsRemove'; | ||||
| import { useTranslation } from '../../locale'; | ||||
| import { SchemaSettingComponent } from '../../schema-components/SchemaSettingsFieldComponent'; | ||||
| import { SchemaSettingCollection } from '../../schema-components/SchemaSettingsFieldComponent copy'; | ||||
| 
 | ||||
| export const useFieldComponents = () => { | ||||
|   const { t } = useTranslation(); | ||||
| @ -182,7 +184,8 @@ export const FilterItemCustomDesigner: React.FC = () => { | ||||
|           }); | ||||
|         }} | ||||
|       /> | ||||
|       <EditComponent /> | ||||
|       <SchemaSettingCollection /> | ||||
|       <SchemaSettingComponent /> | ||||
|       <EditTitleField /> | ||||
|       <EditFormulaTitleField /> | ||||
|       <SchemaSettingsDivider /> | ||||
|  | ||||
| @ -0,0 +1,8 @@ | ||||
| export * from './FilterFormItemCustomInitializer/FilterFormItemCustom'; | ||||
| export * from './CalendarBlockInitializer'; | ||||
| export * from './PDFVIewerBlockInitializer'; | ||||
| export * from './OutboundLinkActionInitializer'; | ||||
| export * from './CreateSubmitActionInitializer'; | ||||
| export * from './FilterAssociatedFields'; | ||||
| export * from './SettingBlockInitializer'; | ||||
| export * from './GroupBlockInitializer'; | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user