diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalCascadeSelect.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalCascadeSelect.tsx index 1d1be90a8c..b59dec00ad 100644 --- a/packages/core/client/src/schema-component/antd/association-field/InternalCascadeSelect.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/InternalCascadeSelect.tsx @@ -13,6 +13,8 @@ import { FormProvider, connect, createSchemaField, observer, useField, useFieldS import { uid } from '@formily/shared'; import { Select as AntdSelect, Input, Space, Spin, Tag } from 'antd'; import dayjs from 'dayjs'; +import { css } from '@emotion/css'; +import { debounce } from 'lodash'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useAPIClient, useCollectionManager_deprecated } from '../../../'; @@ -152,7 +154,11 @@ const CascadeSelect = connect((props) => { } else { associationField.value = option; } - onChange?.(options); + if (options.length === 1 && !options[0].value) { + onChange?.(null); + } else { + onChange?.(options); + } }; const onDropdownVisibleChange = async (visible, selectedValue, index) => { @@ -238,28 +244,38 @@ export const InternalCascadeSelect = observer( const fieldSchema = useFieldSchema(); const { loading, data: formData } = useDataBlockRequest() || {}; const initialValue = formData?.data?.[fieldSchema.name]; + + const handleFormValuesChange = debounce((form) => { + if (collectionField.interface === 'm2o') { + // 对 m2o 类型字段,提取最后一个非 null 值 + const value = extractLastNonNullValueObjects(form.values?.[fieldSchema.name]); + setTimeout(() => { + form.setValuesIn(fieldSchema.name, value); + field.value = value; + }); + } else { + // 对 select_array 类型字段,过滤掉空对象 + const value = extractLastNonNullValueObjects(form.values?.select_array).filter( + (v) => v && Object.keys(v).length > 0, + ); + setTimeout(() => { + field.value = value; + }); + } + }, 300); + useEffect(() => { const id = uid(); selectForm.addEffects(id, () => { onFormValuesChange((form) => { - if (collectionField.interface === 'm2o') { - const value = extractLastNonNullValueObjects(form.values?.[fieldSchema.name]); - setTimeout(() => { - form.setValuesIn(fieldSchema.name, value); - field.value = value; - }); - } else { - const value = extractLastNonNullValueObjects(form.values?.select_array).filter( - (v) => v && Object.keys(v).length > 0, - ); - setTimeout(() => { - field.value = value; - }); - } + handleFormValuesChange(form); }); }); + return () => { selectForm.removeEffects(id); + // 清除防抖定时器 + handleFormValuesChange.cancel(); }; }, []); @@ -282,6 +298,24 @@ export const InternalCascadeSelect = observer( items: { type: 'void', 'x-component': 'Space', + 'x-component-props': { + style: { + width: '100%', + display: 'flex', + }, + className: css` + .ant-formily-item-control { + max-width: 100% !important; + } + .ant-space-item:nth-child(1) { + flex: 0.1; + } + + .ant-space-item:nth-child(2) { + flex: 3; + } + `, + }, properties: { sort: { type: 'void',