fix: 修复自定义组件下拉框没有自定义显示选项 (#730)
Reviewed-on: daoyoucloud/tachycode#730 Co-authored-by: wjh <wwwjh0710@163.com> Co-committed-by: wjh <wwwjh0710@163.com>
This commit is contained in:
		
							parent
							
								
									a20a4df543
								
							
						
					
					
						commit
						e0be6a7aba
					
				
							
								
								
									
										6
									
								
								.changeset/fuzzy-snails-arrive.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										6
									
								
								.changeset/fuzzy-snails-arrive.md
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,6 @@
 | 
			
		||||
---
 | 
			
		||||
"@hera/plugin-core": patch
 | 
			
		||||
"@nocobase/client": patch
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
修复自定义组件没有格式化名称
 | 
			
		||||
@ -22,29 +22,10 @@ const isEmptyObject = (val: any) => !isValid(val) || (typeof val === 'object' &&
 | 
			
		||||
 | 
			
		||||
const ObjectSelect = (props: Props) => {
 | 
			
		||||
  const { value, options, onChange, mode, fieldNames, loading, rawOptions, defaultValue, ...others } = props;
 | 
			
		||||
  const [defoptions, setDefOptions] = useState();
 | 
			
		||||
  const fieldSchema = useFieldSchema();
 | 
			
		||||
  const collectionName = fieldSchema['collectionName'];
 | 
			
		||||
  const filterField = others?.['params'];
 | 
			
		||||
  const api = useAPIClient();
 | 
			
		||||
  const form = useForm();
 | 
			
		||||
  useAsyncEffect(async () => {
 | 
			
		||||
    if (collectionName) {
 | 
			
		||||
      const defValue = await api.request({
 | 
			
		||||
        url: collectionName + ':list',
 | 
			
		||||
        params: {
 | 
			
		||||
          pageSize: 99999,
 | 
			
		||||
          filter: filterField ? { ...filterField.filter } : {},
 | 
			
		||||
        },
 | 
			
		||||
      });
 | 
			
		||||
      const changOptions = defValue?.data?.data.map((value) => {
 | 
			
		||||
        value['label'] = value[fieldNames.label];
 | 
			
		||||
        value['value'] = value[fieldNames.value];
 | 
			
		||||
        return value;
 | 
			
		||||
      });
 | 
			
		||||
      setDefOptions(changOptions);
 | 
			
		||||
    }
 | 
			
		||||
  }, [filterField?.filter, collectionName]);
 | 
			
		||||
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
    if (collectionName && fieldSchema['name'].toString().includes('custom') && defaultValue) {
 | 
			
		||||
      const name = fieldSchema['name'].toString().split('.')[1];
 | 
			
		||||
@ -60,7 +41,7 @@ const ObjectSelect = (props: Props) => {
 | 
			
		||||
      .map((val) => {
 | 
			
		||||
        return isPlainObject(val) ? val[fieldNames.value] : val;
 | 
			
		||||
      });
 | 
			
		||||
    const filterOption = defoptions ? defoptions : options;
 | 
			
		||||
    const filterOption = options;
 | 
			
		||||
    const currentOptions = getCurrentOptions(values, filterOption, fieldNames)?.map((val) => {
 | 
			
		||||
      return {
 | 
			
		||||
        label: val[fieldNames.label],
 | 
			
		||||
@ -88,7 +69,7 @@ const ObjectSelect = (props: Props) => {
 | 
			
		||||
      }}
 | 
			
		||||
      labelInValue
 | 
			
		||||
      notFoundContent={loading ? <Spin /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
 | 
			
		||||
      options={defoptions || options}
 | 
			
		||||
      options={options}
 | 
			
		||||
      fieldNames={fieldNames}
 | 
			
		||||
      showSearch
 | 
			
		||||
      popupMatchSelectWidth={false}
 | 
			
		||||
@ -105,7 +86,7 @@ const ObjectSelect = (props: Props) => {
 | 
			
		||||
      onChange={(changed) => {
 | 
			
		||||
        const current = getCurrentOptions(
 | 
			
		||||
          toArr(changed).map((v) => v.value),
 | 
			
		||||
          defoptions || rawOptions || options,
 | 
			
		||||
          rawOptions || options,
 | 
			
		||||
          fieldNames,
 | 
			
		||||
        );
 | 
			
		||||
        if (['tags', 'multiple'].includes(mode as string) || props.multiple) {
 | 
			
		||||
@ -151,7 +132,7 @@ const useLabelOptions = (others) => {
 | 
			
		||||
    [fieldSchema['x-collection-field']],
 | 
			
		||||
  );
 | 
			
		||||
  const request = {
 | 
			
		||||
    resource: collectionField?.target,
 | 
			
		||||
    resource: collectionField?.target || fieldSchema['collectionName'],
 | 
			
		||||
    action: 'list',
 | 
			
		||||
    params: {
 | 
			
		||||
      pageSize: 99999,
 | 
			
		||||
@ -211,11 +192,37 @@ const useLabelOptions = (others) => {
 | 
			
		||||
const FormulaSelect = (props) => {
 | 
			
		||||
  const { objectValue, loading, value, rawOptions, defaultValue, ...others } = props;
 | 
			
		||||
  let mode: any = props.multiple ? 'multiple' : props.mode;
 | 
			
		||||
  const filterField = others?.['params'];
 | 
			
		||||
  const [options, setOptions] = useState([]);
 | 
			
		||||
  const [collectionName, setCollectionName] = useState('');
 | 
			
		||||
  const api = useAPIClient();
 | 
			
		||||
  if (mode && !['multiple', 'tags'].includes(mode)) {
 | 
			
		||||
    mode = undefined;
 | 
			
		||||
  }
 | 
			
		||||
  const modifiedProps = useLabelOptions(others);
 | 
			
		||||
 | 
			
		||||
  const fieldProps = { ...others };
 | 
			
		||||
  if (others?.collection && others.collection !== collectionName) {
 | 
			
		||||
    api
 | 
			
		||||
      .request({
 | 
			
		||||
        url: others.collection + ':list',
 | 
			
		||||
        params: {
 | 
			
		||||
          pageSize: 99999,
 | 
			
		||||
          filter: filterField ? { ...filterField.filter } : {},
 | 
			
		||||
        },
 | 
			
		||||
      })
 | 
			
		||||
      .then((res) => {
 | 
			
		||||
        setOptions(res?.data.data);
 | 
			
		||||
        fieldProps['options'] = res?.data.data;
 | 
			
		||||
      })
 | 
			
		||||
      .catch(() => {
 | 
			
		||||
        return;
 | 
			
		||||
      });
 | 
			
		||||
    setCollectionName(others.collection);
 | 
			
		||||
  } else if (others?.collection === collectionName) {
 | 
			
		||||
    fieldProps['options'] = options.map((option) => {
 | 
			
		||||
      return { ...option };
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
  const modifiedProps = useLabelOptions(fieldProps);
 | 
			
		||||
  return (
 | 
			
		||||
    <ObjectSelect
 | 
			
		||||
      rawOptions={rawOptions}
 | 
			
		||||
 | 
			
		||||
@ -353,6 +353,7 @@ export const FilterItemCustomDesigner: React.FC = () => {
 | 
			
		||||
      {component === 'Select' || component === 'AutoComplete' ? <SchemaSettingCollection /> : null}
 | 
			
		||||
      {component === 'Select' || component === 'AutoComplete' ? <SchemaSettingComponent /> : null}
 | 
			
		||||
      {component === 'Select' || component === 'AutoComplete' ? <EditTitleField /> : null}
 | 
			
		||||
      <EditFormulaTitleField />
 | 
			
		||||
      <EditDefaultValue />
 | 
			
		||||
      <SchemaSettingsDivider />
 | 
			
		||||
      <SchemaSettingsRemove
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user