fix(client/record-picker): support record-picker show format DataPicker (#888)

* fix(client/record-picker): support record-picker show format DataPicker

* fix(client/record-picker): undefined judgment and when change field's label refresh format in time

(cherry picked from commit 381e71b1f72a8dd092c9e6ad0c36926102b8a7e2)

packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx

@@ -9,6 +9,7 @@ import { FormProvider, SchemaComponentOptions } from '../../core';
 import { useCompile } from '../../hooks';
 import { ActionContext, useActionContext } from '../action';
 import { useFieldNames } from './useFieldNames';
+import { getLabelFormatValue, useLabelUiSchema } from './util';
 
 const RecordPickerContext = createContext(null);
 
@@ -31,7 +32,7 @@ const useTableSelectorProps = () => {
         const allSelectedRows = rcSelectRows || [];
         const otherRows = differenceBy(allSelectedRows, scopeRows, rowKey || 'id');
         const unionSelectedRows = unionBy(otherRows, selectedRows, rowKey || 'id');
-        const unionSelectedRowKeys = unionSelectedRows.map((item) => item[rowKey||'id'])
+        const unionSelectedRowKeys = unionSelectedRows.map((item) => item[rowKey || 'id']);
         setSelectedRows?.(unionSelectedRows);
         onRowSelectionChange?.(unionSelectedRowKeys, unionSelectedRows);
       } else {
@@ -74,30 +75,31 @@ export const InputRecordPicker: React.FC<any> = (props) => {
   const fieldSchema = useFieldSchema();
   const collectionField = useAssociation(props);
   const compile = useCompile();
+  const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
 
   const [selectedRows, setSelectedRows] = useState([]);
   const [options, setOptions] = useState([]);
 
   useEffect(() => {
     if (value) {
-      const opts = (Array.isArray(value) ? value : value ? [value] : []).map(option => {
+      const opts = (Array.isArray(value) ? value : value ? [value] : []).map((option) => {
         const label = option[fieldNames.label];
         return {
           ...option,
-          [fieldNames.label]: compile(label),
+          [fieldNames.label]: getLabelFormatValue(labelUiSchema, compile(label)),
         };
       });
       setOptions(opts);
       setSelectedRows(opts);
     }
-  }, [value])
+  }, [value,fieldNames?.label]);
 
   const getValue = () => {
     if (multiple == null) return null;
     // console.log('getValue', multiple, value, Array.isArray(value));
 
-    return Array.isArray(value) ? value?.map(v => v[fieldNames.value]) : value?.[fieldNames.value];
-  }
+    return Array.isArray(value) ? value?.map((v) => v[fieldNames.value]) : value?.[fieldNames.value];
+  };
   return (
     <div>
       <Select

packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx

@@ -10,10 +10,12 @@ import { useCompile } from '../../hooks';
 import { ActionContext } from '../action';
 import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip';
 import { useFieldNames } from './useFieldNames';
+import { getLabelFormatValue, useLabelUiSchema } from './util';
 
 interface IEllipsisWithTooltipRef {
   setPopoverVisible: (boolean) => void;
 }
+
 export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
   const { ellipsis } = props;
   const fieldSchema = useFieldSchema();
@@ -27,10 +29,13 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
   const collectionField = getField(fieldSchema.name) || getCollectionJoinField(fieldSchema?.['x-collection-field']);
   const [record, setRecord] = useState({});
   const compile = useCompile();
+  const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
 
   const ellipsisWithTooltipRef = useRef<IEllipsisWithTooltipRef>();
   const renderRecords = () =>
     toArr(field.value).map((record, index, arr) => {
+      const val =
+        compile(record?.[fieldNames?.label || 'label']) || record?.[fieldNames?.value || 'value'] || record?.id;
       return (
         <Fragment key={`${record.id}_${index}`}>
           <span>
@@ -43,7 +48,7 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
                 ellipsisWithTooltipRef?.current?.setPopoverVisible(false);
               }}
             >
-              {compile(record?.[fieldNames?.label || 'label']) || record?.[fieldNames?.value || 'value'] || record?.id}
+              {getLabelFormatValue(labelUiSchema, val)}
             </a>
           </span>
           {index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>,</span> : null}

packages/core/client/src/schema-component/antd/record-picker/util.ts

@@ -0,0 +1,27 @@
+import { getDefaultFormat, str2moment } from '@nocobase/utils/client';
+import moment from 'moment';
+import { isArr } from '@formily/shared';
+import { CollectionFieldOptions, useCollectionManager } from '../../../collection-manager';
+import { ISchema } from '@formily/react';
+
+export const useLabelUiSchema = (collectionField: CollectionFieldOptions, label: string): ISchema => {
+  const { getCollectionJoinField } = useCollectionManager();
+  const labelField = getCollectionJoinField(`${collectionField.target}.${label}`) as CollectionFieldOptions;
+  return labelField?.uiSchema;
+};
+
+export const getDatePickerLabels = (props): string => {
+  const format = getDefaultFormat(props) as string;
+  const m = str2moment(props.value, props) as moment.Moment;
+  const labels = m && m.isValid() ? m.format(format) : props.value;
+  return isArr(labels) ? labels.join('~') : labels;
+};
+
+export const getLabelFormatValue = (labelUiSchema: ISchema, value: any): string => {
+  switch (labelUiSchema?.['x-component']) {
+    case 'DatePicker':
+      return getDatePickerLabels({ ...labelUiSchema?.['x-component-props'], value });
+    default:
+      return value;
+  }
+};