feat: 添加自定义文本筛选 (#373)
<!-- 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. --> Reviewed-on: daoyoucloud/tachycode#373 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
							
								
									26b1aeacd8
								
							
						
					
					
						commit
						96d35bb829
					
				| @ -122,7 +122,6 @@ export const useFilterBlockActionProps = () => { | |||||||
|             const param = block.service.params?.[0] || {}; |             const param = block.service.params?.[0] || {}; | ||||||
|             // 保留原有的 filter
 |             // 保留原有的 filter
 | ||||||
|             const storedFilter = block.service.params?.[1]?.filters || {}; |             const storedFilter = block.service.params?.[1]?.filters || {}; | ||||||
| 
 |  | ||||||
|             storedFilter[uid] = removeNullCondition( |             storedFilter[uid] = removeNullCondition( | ||||||
|               transformToFilter(form.values, fieldSchema, getCollectionJoinField, name), |               transformToFilter(form.values, fieldSchema, getCollectionJoinField, name), | ||||||
|               fieldSchema, |               fieldSchema, | ||||||
|  | |||||||
| @ -90,6 +90,7 @@ import { useGetCustomComponents } from './hooks/useGetCustomComponents'; | |||||||
| import { SwiperBlock, SwiperBlockInitializer } from './schema-initializer/SwiperBlockInitializer'; | import { SwiperBlock, SwiperBlockInitializer } from './schema-initializer/SwiperBlockInitializer'; | ||||||
| import { NoticeBlock, NoticeBlockInitializer } from './schema-initializer/NoticeBlockInitializer'; | import { NoticeBlock, NoticeBlockInitializer } from './schema-initializer/NoticeBlockInitializer'; | ||||||
| import { TabSearchBlock, TabSearchBlockInitializer } from './schema-initializer/TabSearchBlockInitializer'; | import { TabSearchBlock, TabSearchBlockInitializer } from './schema-initializer/TabSearchBlockInitializer'; | ||||||
|  | import { AutoComplete } from './schema-components/AutoComplete/AutoComplete'; | ||||||
| 
 | 
 | ||||||
| export enum CustomComponentType { | export enum CustomComponentType { | ||||||
|   CUSTOM_FORM_ITEM, |   CUSTOM_FORM_ITEM, | ||||||
| @ -197,6 +198,7 @@ export class PluginCoreClient extends Plugin { | |||||||
|       EditTitleField, |       EditTitleField, | ||||||
|       AfterSuccess, |       AfterSuccess, | ||||||
|       GroupBlockConfigure, |       GroupBlockConfigure, | ||||||
|  |       AutoComplete, | ||||||
|       Menu: { |       Menu: { | ||||||
|         ...Menu, |         ...Menu, | ||||||
|         // @ts-ignore
 |         // @ts-ignore
 | ||||||
|  | |||||||
| @ -0,0 +1,55 @@ | |||||||
|  | import React, { useEffect, useState } from 'react'; | ||||||
|  | import { AutoComplete as AntdAutoComplete } from 'antd'; | ||||||
|  | import { useFieldSchema, useForm } from '@formily/react'; | ||||||
|  | import { useDesigner } from '@nocobase/client'; | ||||||
|  | 
 | ||||||
|  | export const AutoComplete = (props) => { | ||||||
|  |   const fieldSchema = useFieldSchema(); | ||||||
|  |   const { fieldNames, options: defultOptions } = fieldSchema['x-component-props']; | ||||||
|  |   const defultValue = defultOptions.map((item) => { | ||||||
|  |     item['label'] = item[fieldNames.label]; | ||||||
|  |     item['value'] = item[fieldNames.value]; | ||||||
|  |     return item; | ||||||
|  |   }); | ||||||
|  |   const [options, setOptions] = useState([...defultValue]); | ||||||
|  |   const [value, setValue] = useState(''); | ||||||
|  |   const form = useForm(); | ||||||
|  |   if (!form.values['custom']) { | ||||||
|  |     form.values['custom'] = {}; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   const onSearch = (data) => { | ||||||
|  |     if (data) { | ||||||
|  |       const searchValue = defultValue.filter((item) => item[fieldNames.label].includes(data)); | ||||||
|  |       if (searchValue.length) { | ||||||
|  |         setOptions(searchValue); | ||||||
|  |       } else { | ||||||
|  |         setOptions([]); | ||||||
|  |       } | ||||||
|  |       const valueLabel = options.filter((item) => item.value === data)[0]; | ||||||
|  |       if (valueLabel) { | ||||||
|  |         setValue(valueLabel.label); | ||||||
|  |         form.values.custom[fieldSchema['collectionName']] = valueLabel; | ||||||
|  |       } else { | ||||||
|  |         setValue(data); | ||||||
|  |         form.values.custom[fieldSchema['collectionName']] = {}; | ||||||
|  |         form.values.custom[fieldSchema['collectionName']][fieldNames.label] = data; | ||||||
|  |       } | ||||||
|  |     } else { | ||||||
|  |       setValue(data); | ||||||
|  |       setOptions(defultValue); | ||||||
|  |     } | ||||||
|  |   }; | ||||||
|  | 
 | ||||||
|  |   return ( | ||||||
|  |     <AntdAutoComplete | ||||||
|  |       value={value} | ||||||
|  |       options={options} | ||||||
|  |       onSearch={(value) => { | ||||||
|  |         onSearch(value); | ||||||
|  |       }} | ||||||
|  |       onChange={(data) => onSearch(data)} | ||||||
|  |       allowClear | ||||||
|  |     /> | ||||||
|  |   ); | ||||||
|  | }; | ||||||
| @ -40,6 +40,7 @@ export const useFieldComponents = () => { | |||||||
|   const { t } = useTranslation(); |   const { t } = useTranslation(); | ||||||
|   const options = [ |   const options = [ | ||||||
|     { label: t('Input'), value: 'Input' }, |     { label: t('Input'), value: 'Input' }, | ||||||
|  |     { label: t('AutoComplete'), value: 'AutoComplete' }, | ||||||
|     { label: t('Select'), value: 'Select' }, |     { label: t('Select'), value: 'Select' }, | ||||||
|   ]; |   ]; | ||||||
|   return { |   return { | ||||||
| @ -147,6 +148,7 @@ export const FilterCustomItemInitializer: React.FC<{ | |||||||
|           }, |           }, | ||||||
|         }, |         }, | ||||||
|         'x-compoent-custom': true, |         'x-compoent-custom': true, | ||||||
|  |         collectionName: collection, | ||||||
|       }), |       }), | ||||||
|     ); |     ); | ||||||
| 
 | 
 | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user