@nocobase/client-v2 2.2.0-beta.1 → 2.2.0-beta.10

package/src/flow/models/blocks/table/__tests__/TableColumnModel.test.tsx

@@ -130,9 +130,14 @@ describe('TableColumnModel sorter settings', () => {
     const titleFieldStep = model.getFlow('tableColumnSettings')?.steps?.fieldNames as any;
     const setStepParams = vi.fn();
     const setProps = vi.fn();
+    const setFieldProps = vi.fn();
     const dispatchEvent = vi.fn();
+    const saveFieldModel = vi.fn();
     const targetCollectionField = {
-      getComponentProps: () => ({}),
+      getComponentProps: () => ({
+        format: 'hh:mm:ss a',
+        timeFormat: 'hh:mm:ss a',
+      }),
     };
 
     await titleFieldStep.beforeParamsSave(
@@ -156,8 +161,10 @@ describe('TableColumnModel sorter settings', () => {
           subModels: {
             field: {
               use: 'DisplayTextFieldModel',
+              setProps: setFieldProps,
               setStepParams,
               dispatchEvent,
+              save: saveFieldModel,
             },
           },
           setStepParams,
@@ -169,6 +176,206 @@ describe('TableColumnModel sorter settings', () => {
     );
 
     expect(setStepParams).toHaveBeenCalledWith('tableColumnSettings', 'model', { use: 'DisplayTextFieldModel' });
+    expect(setFieldProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        format: 'hh:mm:ss a',
+        timeFormat: 'hh:mm:ss a',
+        titleField: 'code',
+      }),
+    );
+    expect(setProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        format: 'hh:mm:ss a',
+        timeFormat: 'hh:mm:ss a',
+        titleField: 'code',
+      }),
+    );
+    expect(saveFieldModel).toHaveBeenCalled();
+  });
+
+  it('clears stale datetime display props when association title field changes to date only', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({ uid: 'table-column-title-field-date-only', flowEngine: engine } as any);
+    const titleFieldStep = model.getFlow('tableColumnSettings')?.steps?.fieldNames as any;
+    const setStepParams = vi.fn();
+    const setProps = vi.fn();
+    const setFieldProps = vi.fn();
+    const targetCollectionField = {
+      getComponentProps: () => ({
+        dateOnly: true,
+        showTime: false,
+      }),
+    };
+
+    await titleFieldStep.beforeParamsSave(
+      {
+        collectionField: {
+          isAssociationField: () => true,
+          targetCollection: {
+            name: 'departments',
+            getField: () => targetCollectionField,
+          },
+        },
+        model: {
+          collectionField: {
+            dataSourceKey: 'main',
+          },
+          constructor: {
+            getDefaultBindingByField: () => ({
+              modelName: 'DisplayDateTimeFieldModel',
+            }),
+          },
+          subModels: {
+            field: {
+              use: 'DisplayDateTimeFieldModel',
+              setProps: setFieldProps,
+              setStepParams,
+              dispatchEvent: vi.fn(),
+              save: vi.fn(),
+            },
+          },
+          setStepParams,
+          setProps,
+        },
+      },
+      { label: 'dateOnly' },
+      { label: 'time' },
+    );
+
+    expect(setFieldProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateOnly: true,
+        format: undefined,
+        showTime: false,
+        timeFormat: undefined,
+        titleField: 'dateOnly',
+      }),
+    );
+    expect(setProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateOnly: true,
+        format: undefined,
+        showTime: false,
+        timeFormat: undefined,
+        titleField: 'dateOnly',
+      }),
+    );
+  });
+
+  it('keeps saved association title datetime format when table column initializes again', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({
+      uid: 'table-column-title-field-saved-datetime-format',
+      flowEngine: engine,
+    } as any);
+    const initStep = model.getFlow('tableColumnSettings')?.steps?.init as any;
+    const setProps = vi.fn();
+    const targetCollectionField = {
+      getComponentProps: () => ({
+        dateFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      }),
+    };
+
+    await initStep.handler({
+      model: {
+        context: {
+          collectionField: {
+            title: 'Shipments',
+            name: 'shipments',
+            isAssociationField: () => true,
+            getComponentProps: () => ({
+              fieldNames: {
+                label: 'shipmentsDatetime',
+              },
+            }),
+            targetCollection: {
+              getField: () => targetCollectionField,
+            },
+          },
+        },
+        props: {
+          titleField: 'shipmentsDatetime',
+        },
+        subModels: {
+          field: {
+            getStepParams: (flowKey, stepKey) =>
+              flowKey === 'datetimeSettings' && stepKey === 'dateFormat'
+                ? {
+                    picker: 'date',
+                    dateFormat: 'YYYY-MM-DD',
+                    showTime: true,
+                    timeFormat: 'h:mm a',
+                  }
+                : undefined,
+          },
+        },
+        applySubModelsBeforeRenderFlows: vi.fn(),
+        setProps,
+      },
+    });
+
+    expect(setProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD h:mm a',
+        showTime: true,
+        timeFormat: 'h:mm a',
+      }),
+    );
+  });
+
+  it('keeps saved ordinary datetime format when table column initializes again', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({
+      uid: 'table-column-saved-datetime-format',
+      flowEngine: engine,
+    } as any);
+    const initStep = model.getFlow('tableColumnSettings')?.steps?.init as any;
+    const setProps = vi.fn();
+
+    await initStep.handler({
+      model: {
+        context: {
+          collectionField: {
+            title: 'Datetime',
+            name: 'datetime',
+            isAssociationField: () => false,
+            getComponentProps: () => ({
+              dateFormat: 'YYYY-MM-DD',
+              showTime: false,
+            }),
+          },
+        },
+        props: {},
+        subModels: {
+          field: {
+            getStepParams: (flowKey, stepKey) =>
+              flowKey === 'datetimeSettings' && stepKey === 'dateFormat'
+                ? {
+                    picker: 'date',
+                    dateFormat: 'YYYY-MM-DD',
+                    showTime: true,
+                    timeFormat: 'HH:mm:ss',
+                  }
+                : undefined,
+          },
+        },
+        applySubModelsBeforeRenderFlows: vi.fn(),
+        setProps,
+      },
+    });
+
+    expect(setProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      }),
+    );
   });
 
   it('does not update field component setting when title field refresh fails', async () => {
@@ -203,8 +410,10 @@ describe('TableColumnModel sorter settings', () => {
             subModels: {
               field: {
                 use: 'DisplayTextFieldModel',
+                setProps: vi.fn(),
                 setStepParams: vi.fn(),
                 dispatchEvent: vi.fn().mockRejectedValue(new Error('beforeRender failed')),
+                save: vi.fn(),
               },
             },
             setStepParams,

package/src/flow/models/blocks/table/dragSort/dragSortHooks.tsx

@@ -19,16 +19,23 @@ export function useDragSortBodyWrapper(
   model: TableBlockModel,
   dataSourceRef: React.MutableRefObject<any>,
   getRowKeyFunc: (record: any) => string | number,
+  dragSortFieldName?: string,
 ) {
+  const expandedRowKeys = model.props.expandedRowKeys;
+  const defaultExpandAllRows = model.props.defaultExpandAllRows;
+  const resource = model.resource;
+  const filterTargetKey = model.collection.filterTargetKey;
+  const message = (model as { ctx?: { message?: { error?: (content: string) => void } } }).ctx?.message;
+
   return useMemo(() => {
-    if (!model.props.dragSort) {
+    if (!dragSortFieldName) {
       return (props) => <tbody {...props} />;
     }
 
     const flattenTreeData = (data: any[]) => {
       const result: any[] = [];
-      const expandedKeys = new Set((model.props.expandedRowKeys || []).map((key) => (key == null ? key : String(key))));
-      const includeAll = !!model.props.defaultExpandAllRows;
+      const expandedKeys = new Set((expandedRowKeys || []).map((key) => (key == null ? key : String(key))));
+      const includeAll = !!defaultExpandAllRows;
 
       const walk = (nodes: any[]) => {
         if (!nodes?.length) return;
@@ -73,22 +80,22 @@ export function useDragSortBodyWrapper(
         }
 
         if (from && to) {
-          model.resource
+          resource
             .runAction('move', {
               method: 'post',
               params: {
-                sourceId: getRowKey(from, model.collection.filterTargetKey),
-                targetId: getRowKey(to, model.collection.filterTargetKey),
-                sortField: model.props.dragSort ? model.props.dragSortBy : undefined,
+                sourceId: getRowKey(from, filterTargetKey),
+                targetId: getRowKey(to, filterTargetKey),
+                sortField: dragSortFieldName,
               },
             })
             .then(() => {
-              model.resource.refresh();
+              resource.refresh();
             })
             .catch((error) => {
               console.error('Move failed:', error);
               // Show a user-facing error message if the message system is available
-              (model as any)?.ctx?.message?.error?.(error?.message || 'Move failed');
+              message?.error?.(error?.message || 'Move failed');
             });
         }
       };
@@ -104,13 +111,14 @@ export function useDragSortBodyWrapper(
       );
     };
   }, [
-    model.props.dragSort,
-    model.props.dragSortBy,
-    model.props.expandedRowKeys,
-    model.props.defaultExpandAllRows,
-    model.resource,
-    model.collection.filterTargetKey,
+    dataSourceRef,
+    defaultExpandAllRows,
+    dragSortFieldName,
+    expandedRowKeys,
+    filterTargetKey,
     getRowKeyFunc,
+    message,
+    resource,
   ]);
 }
 
@@ -124,7 +132,10 @@ export function useDragSortRowComponent(dragSort: boolean) {
 }
 
 export function initDragSortParams(model: TableBlockModel) {
-  if (model.props.dragSort && model.props.dragSortBy) {
-    model.resource.setSort([model.props.dragSortBy]);
+  const dragSortFieldName = model.getDragSortFieldName();
+  if (dragSortFieldName) {
+    model.resource.setSort([dragSortFieldName]);
+  } else if (model.props.dragSort && model.props.dragSortBy) {
+    model.resource.setSort(Array.isArray(model.props.globalSort) ? model.props.globalSort : []);
   }
 }

package/src/flow/models/blocks/table/dragSort/dragSortSettings.ts

@@ -9,7 +9,11 @@
 
 import { tExpr } from '@nocobase/flow-engine';
 import type { TableBlockModel } from '../TableBlockModel';
-import { convertFieldsToOptions, getSortFields } from './dragSortUtils';
+import { convertFieldsToOptions, getSortFields, hasSortField } from './dragSortUtils';
+
+function getFallbackSort(model: TableBlockModel): string[] {
+  return Array.isArray(model.props.globalSort) ? model.props.globalSort : [];
+}
 
 export const dragSortSettings = {
   title: tExpr('Enable drag and drop sorting'),
@@ -17,9 +21,12 @@ export const dragSortSettings = {
   defaultParams: {
     dragSort: false,
   },
-  async handler(ctx, params) {
+  handler(ctx, params) {
     const model = ctx.model as TableBlockModel;
     model.setProps('dragSort', params.dragSort);
+    if (!params.dragSort) {
+      model.resource.setSort(getFallbackSort(model));
+    }
 
     // Note: automatic configuration of the drag sort field has been removed;
     // users now configure `dragSortBy` explicitly via `dragSortBySettings`.
@@ -45,6 +52,7 @@ export const dragSortBySettings = {
       key: 'dragSortBy',
       props: {
         options,
+        allowClear: true,
         placeholder: ctx.t('Select field'),
       },
     };
@@ -54,9 +62,8 @@ export const dragSortBySettings = {
   },
   handler(ctx, params) {
     const model = ctx.model as TableBlockModel;
-    model.setProps('dragSortBy', params.dragSortBy);
-    if (params.dragSortBy) {
-      model.resource.setSort([params.dragSortBy]);
-    }
+    const dragSortBy = hasSortField(model.collection, params.dragSortBy) ? params.dragSortBy : null;
+    model.setProps('dragSortBy', dragSortBy);
+    model.resource.setSort(dragSortBy ? [dragSortBy] : getFallbackSort(model));
   },
 };

package/src/flow/models/blocks/table/dragSort/dragSortUtils.ts

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import type { Collection } from '@nocobase/flow-engine';
+import type { Collection, CollectionField } from '@nocobase/flow-engine';
 
 /**
  * 从 collection 中获取所有 sort 类型的字段
@@ -24,6 +24,19 @@ export function getSortFields(collection: Collection | undefined) {
   });
 }
 
+export function getSortField(
+  collection: Collection | undefined,
+  fieldName?: string | null,
+): CollectionField | undefined {
+  if (!collection || !fieldName) return undefined;
+
+  return getSortFields(collection).find((field) => field.name === fieldName);
+}
+
+export function hasSortField(collection: Collection | undefined, fieldName?: string | null): boolean {
+  return !!getSortField(collection, fieldName);
+}
+
 /**
  * 获取 collection 中第一个可用的 sort 字段
  * @param collection - 集合对象
@@ -39,7 +52,7 @@ export function getFirstSortField(collection: Collection | undefined) {
  * @param fields - 字段数组
  * @returns 选项数组
  */
-export function convertFieldsToOptions(fields: any[]) {
+export function convertFieldsToOptions(fields: CollectionField[]) {
   return fields.map((field) => ({
     label: field?.uiSchema?.title || field?.name,
     value: field?.name,

package/src/flow/models/fields/AssociationFieldModel/AssociationFieldModel.tsx

@@ -11,7 +11,7 @@ import { FormItemModel } from '../../blocks/form/FormItemModel';
 import { FieldModel } from '../../base/FieldModel';
 export class AssociationFieldModel extends FieldModel {
   operator = '$eq';
-  updateAssociation = true;
+  updateAssociation = false;
 }
 
 AssociationFieldModel.registerFlow({

package/src/flow/models/fields/AssociationFieldModel/PopupSubTableFieldModel/PopupSubTableFieldModel.tsx

@@ -126,6 +126,7 @@ const RenderCell = observer<any>((props) => {
                 fieldPath: dataIndex,
                 record: record,
                 fieldProps: { ...columnModel.props, ...columnModel.subModels.field.props },
+                sourceFieldModelUid: columnModel.subModels.field.uid,
                 onOk: (values) => {
                   record[dataIndex] = values[dataIndex];
                   // 仅重渲染单元格
@@ -203,6 +204,8 @@ const DisplayTable = (props) => {
     onSelectExitRecordClick,
     resetPage,
     allowCreate,
+    formValuesChangeEmitter,
+    onResetFieldValue,
   } = props;
   const [currentPage, setCurrentPage] = useState(1);
   const [currentPageSize, setCurrentPageSize] = useState(pageSize);
@@ -223,6 +226,18 @@ const DisplayTable = (props) => {
     resetPage && setCurrentPage(1);
   }, [resetPage]);
 
+  useEffect(() => {
+    if (!formValuesChangeEmitter?.on || !formValuesChangeEmitter?.off || !onResetFieldValue) return;
+    const listener = () => {
+      onResetFieldValue();
+      setTableData([]);
+    };
+    formValuesChangeEmitter.on('onFieldReset', listener);
+    return () => {
+      formValuesChangeEmitter.off('onFieldReset', listener);
+    };
+  }, [formValuesChangeEmitter, onResetFieldValue]);
+
   const pagination = useMemo(() => {
     return {
       current: currentPage, // 当前页码
@@ -237,7 +252,7 @@ const DisplayTable = (props) => {
         return t('Total {{count}} items', { count: total });
       },
     } as any;
-  }, [currentPage, currentPageSize, tableData]);
+  }, [currentPage, currentPageSize, tableData, t]);
 
   const columns = useMemo(() => {
     const cols = adjustColumnOrder(
@@ -421,10 +436,6 @@ export class PopupSubTableFieldModel extends AssociationFieldModel {
           currentPageSize,
         });
       };
-      // 监听表单reset
-      this.context.blockModel.emitter.on('onFieldReset', () => {
-        this.props?.onChange([]);
-      });
     }
   }
 
@@ -457,8 +468,21 @@ export class PopupSubTableFieldModel extends AssociationFieldModel {
   }
 
   public render() {
+    const fieldPathArray = this.context.fieldPathArray ?? this.parent?.context?.fieldPathArray;
+    const onResetFieldValue = () => {
+      const value = [];
+      this.setProps({ value });
+      this.context.blockModel?.setFieldValue?.(fieldPathArray, value);
+    };
     return (
-      <DisplayTable {...this.props} collection={this.collection} baseColumns={this.getBaseColumns(this)} model={this} />
+      <DisplayTable
+        {...this.props}
+        collection={this.collection}
+        baseColumns={this.getBaseColumns(this)}
+        model={this}
+        formValuesChangeEmitter={this.context.blockModel?.emitter}
+        onResetFieldValue={onResetFieldValue}
+      />
     );
   }
 }

package/src/flow/models/fields/AssociationFieldModel/RecordSelectFieldModel.tsx

@@ -99,6 +99,18 @@ export function collectAssociationHydrationCandidates(options: {
   return candidates;
 }
 
+export function getAssociationHydrationNamePath(model: any) {
+  return model?.context?.fieldPathArray ?? model?.context?.fieldPath ?? model?.props?.name;
+}
+
+export function getAssociationHydrationSetterContext(model: any) {
+  if (typeof model?.context?.setFormValue === 'function') {
+    return model.context;
+  }
+
+  return model?.context?.blockModel?.context;
+}
+
 function markAssociationHydrationDone(statusMap: Map<string, HydrateStatus>, tkKey: string | null | undefined) {
   if (!tkKey) return;
   statusMap.set(tkKey, 'done');
@@ -186,6 +198,48 @@ const useFieldPermissionMessage = (model, allowEdit) => {
   return messageValue;
 };
 
+const recordSelectClassName = css`
+  min-width: 0;
+
+  .ant-select-selector {
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .ant-select-selection-search,
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder,
+  .ant-select-selection-overflow,
+  .ant-select-selection-overflow-item {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .ant-select-selection-item,
+  .ant-select-selection-item-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+const recordSelectLabelClassName = css`
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  * {
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap !important;
+  }
+`;
+
 const LazySelect = (props: Readonly<LazySelectProps>) => {
   const {
     fieldNames,
@@ -198,6 +252,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
     onChange,
     allowCreate = true,
     allowEdit = true,
+    className,
     ...others
   } = props;
   const model: any = useFlowModel();
@@ -245,8 +300,8 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
     });
     if (!candidates.length) return;
 
-    const namePath = model?.props?.name ?? model?.context?.fieldPathArray;
-    const blockCtx: any = model?.context?.blockModel?.context;
+    const namePath = getAssociationHydrationNamePath(model);
+    const setterCtx: any = getAssociationHydrationSetterContext(model);
 
     candidates.forEach(({ item, tk, tkKey }) => {
       void (async () => {
@@ -268,8 +323,8 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
               })
             : merge;
 
-          if (blockCtx && typeof blockCtx.setFormValue === 'function' && namePath != null) {
-            await blockCtx.setFormValue(namePath, nextValue, {
+          if (setterCtx && typeof setterCtx.setFormValue === 'function' && namePath != null) {
+            await setterCtx.setFormValue(namePath, nextValue, {
               source: 'default',
               markExplicit: false,
               triggerEvent: false,
@@ -305,6 +360,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
       <Select
         style={{ width: '100%' }}
         {...others}
+        className={[recordSelectClassName, className].filter(Boolean).join(' ')}
         allowClear
         showSearch
         maxTagCount="responsive"
@@ -397,19 +453,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
         }}
         popupMatchSelectWidth
         labelRender={(data) => {
-          return (
-            <div
-              className={css`
-                div {
-                  white-space: nowrap !important;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                }
-              `}
-            >
-              {data.label}
-            </div>
-          );
+          return <div className={recordSelectLabelClassName}>{data.label}</div>;
         }}
         dropdownRender={(menu) => {
           const isFullMatch = realOptions.some((v) => v[normalizedFieldNames.label] === others.searchText);