fix: improve the display of the title field (#1741)

* fix: fix the displaying problem of Select * fix: fix error * fix: filter out fields * feat: format date * feat: optimize * fix: fix error * feat: use the default title field * fix: fix bug
2023-04-22 11:04:10 +08:00 · 2023-04-22 11:04:10 +08:00 · 71af0f16a9
commit 71af0f16a9
parent 7b892cec50
10 changed files with 133 additions and 26 deletions
--- a/packages/core/client/src/collection-manager/Configuration/CollectionFields.tsx
+++ b/packages/core/client/src/collection-manager/Configuration/CollectionFields.tsx
@ -42,6 +42,12 @@ const titlePrompt = 'Default title for each record';
 const expectTypes = ['string', 'integer', 'bigInt', 'float', 'double', 'decimal', 'date', 'dateonly', 'time'];
 const excludeInterfaces = ['icon'];

+// 是否可以作为标题字段
+export const isTitleField = (field) => {
+  if (!field) return false;
+  return !field.isForeignKey && expectTypes.includes(field.type) && !excludeInterfaces.includes(field.interface);
+};
+
 const CurrentFields = (props) => {
  const compile = useCompile();
  const { getInterface } = useCollectionManager();
@ -91,7 +97,7 @@ const CurrentFields = (props) => {
            });
        };

-        return expectTypes.includes(record.type) && !excludeInterfaces.includes(record.interface) ? (
+        return isTitleField(record) ? (
          <Tooltip title={t(titlePrompt)} placement="right" overlayInnerStyle={{ textAlign: 'center' }}>
            <Switch
              size="small"
@ -201,7 +207,7 @@ const InheritFields = (props) => {
            });
        };

-        return expectTypes.includes(record.type) && !excludeInterfaces.includes(record.interface) ? (
+        return isTitleField(record) ? (
          <Tooltip title={t(titlePrompt)} placement="right" overlayInnerStyle={{ textAlign: 'center' }}>
            <Switch
              size="small"
--- a/packages/core/client/src/collection-manager/interfaces/linkTo.ts
+++ b/packages/core/client/src/collection-manager/interfaces/linkTo.ts
@ -47,6 +47,11 @@ export const linkTo: IField = {
  },
  availableTypes: ['belongsToMany'],
  schemaInitialize(schema: ISchema, { readPretty, block, targetCollection }) {
+    if (targetCollection?.titleField && schema['x-component-props']) {
+      schema['x-component-props'].fieldNames = schema['x-component-props'].fieldNames || { value: 'id' };
+      schema['x-component-props'].fieldNames.label = targetCollection.titleField;
+    }
+
    if (targetCollection?.template === 'file') {
      const fieldNames = schema['x-component-props']['fieldNames'] || { label: 'preview', value: 'id' };
      fieldNames.label = 'preview';
--- a/packages/core/client/src/collection-manager/interfaces/m2m.tsx
+++ b/packages/core/client/src/collection-manager/interfaces/m2m.tsx
@ -51,8 +51,13 @@ export const m2m: IField = {
      },
    },
  },
-  availableTypes:['belongsToMany'],
+  availableTypes: ['belongsToMany'],
  schemaInitialize(schema: ISchema, { readPretty, block, targetCollection }) {
+    if (targetCollection?.titleField && schema['x-component-props']) {
+      schema['x-component-props'].fieldNames = schema['x-component-props'].fieldNames || { value: 'id' };
+      schema['x-component-props'].fieldNames.label = targetCollection.titleField;
+    }
+
    if (targetCollection?.template === 'file') {
      const fieldNames = schema['x-component-props']['fieldNames'] || { label: 'preview', value: 'id' };
      fieldNames.label = 'preview';
--- a/packages/core/client/src/collection-manager/interfaces/m2o.tsx
+++ b/packages/core/client/src/collection-manager/interfaces/m2o.tsx
@ -52,6 +52,11 @@ export const m2o: IField = {
  },
  availableTypes:['belongsTo'],
  schemaInitialize(schema: ISchema, { block, readPretty, targetCollection }) {
+    if (targetCollection?.titleField && schema['x-component-props']) {
+      schema['x-component-props'].fieldNames = schema['x-component-props'].fieldNames || { value: 'id' };
+      schema['x-component-props'].fieldNames.label = targetCollection.titleField;
+    }
+
    if (targetCollection?.template === 'file') {
      const fieldNames = schema['x-component-props']['fieldNames'] || { label: 'preview', value: 'id' };
      fieldNames.label = 'preview';
--- a/packages/core/client/src/collection-manager/interfaces/o2m.tsx
+++ b/packages/core/client/src/collection-manager/interfaces/o2m.tsx
@ -51,7 +51,12 @@ export const o2m: IField = {
    },
  },
  availableTypes: ['hasMany'],
-  schemaInitialize(schema: ISchema, { field, block, readPretty }) {
+  schemaInitialize(schema: ISchema, { field, block, readPretty, targetCollection }) {
+    if (targetCollection?.titleField && schema['x-component-props']) {
+      schema['x-component-props'].fieldNames = schema['x-component-props'].fieldNames || { value: 'id' };
+      schema['x-component-props'].fieldNames.label = targetCollection.titleField;
+    }
+
    if (block === 'Form') {
      if (schema['x-component'] === 'TableField') {
        const association = `${field.collectionName}.${field.name}`;
--- a/packages/core/client/src/collection-manager/interfaces/o2o.tsx
+++ b/packages/core/client/src/collection-manager/interfaces/o2o.tsx
@ -475,6 +475,11 @@ export const obo: IField = {
      schema['x-component-props']['size'] = 'small';
    }

+    if (targetCollection?.titleField && schema['x-component-props']) {
+      schema['x-component-props'].fieldNames = schema['x-component-props'].fieldNames || { value: 'id' };
+      schema['x-component-props'].fieldNames.label = targetCollection.titleField;
+    }
+
    if (targetCollection?.template === 'file') {
      const fieldNames = schema['x-component-props']['fieldNames'] || { label: 'preview', value: 'id' };
      fieldNames.label = 'preview';
--- a/packages/core/client/src/schema-component/antd/association-select/AssociationSelect.tsx
+++ b/packages/core/client/src/schema-component/antd/association-select/AssociationSelect.tsx
@ -13,6 +13,7 @@ import {
  useCollectionManager,
  useSortFields,
 } from '../../../collection-manager';
+import { isTitleField } from '../../../collection-manager/Configuration/CollectionFields';
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
 import { useCompile, useDesignable, useFieldComponentOptions, useFieldTitle } from '../../hooks';
 import { removeNullCondition } from '../filter';
@ -91,7 +92,7 @@ interface AssociationSelectInterface {

 export const AssociationSelect = InternalAssociationSelect as unknown as AssociationSelectInterface;

-AssociationSelect.Designer = () => {
+AssociationSelect.Designer = function Designer() {
  const { getCollectionFields, getInterface, getCollectionJoinField, getCollection } = useCollectionManager();
  const { getField, template } = useCollection();
  const { form } = useFormBlockContext();
@ -99,7 +100,6 @@ AssociationSelect.Designer = () => {
  const fieldSchema = useFieldSchema();
  const { t } = useTranslation();
  const tk = useFilterByTk();
-  const {} = useCollection();
  const { dn, refresh, insertAdjacent } = useDesignable();
  const compile = useCompile();
  const collectionField = getField(fieldSchema['name']) || getCollectionJoinField(fieldSchema['x-collection-field']);
@ -134,7 +134,7 @@ AssociationSelect.Designer = () => {
  }

  const options = targetFields
-    .filter((field) => !field?.target && field.type !== 'boolean')
+    .filter((field) => isTitleField(field))
    .map((field) => ({
      value: field?.name,
      label: compile(field?.uiSchema?.title) || field?.name,
@ -691,7 +691,7 @@ AssociationSelect.Designer = () => {
 * 用于筛选表单区块
 * @returns
 */
-AssociationSelect.FilterDesigner = () => {
+AssociationSelect.FilterDesigner = function FilterDesigner() {
  const { getCollectionFields, getInterface, getCollectionJoinField } = useCollectionManager();
  const { getField } = useCollection();
  const { form } = useFormBlockContext();
--- a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
+++ b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { ACLCollectionFieldProvider } from '../../../acl/ACLProvider';
 import { BlockRequestContext, useFilterByTk, useFormBlockContext } from '../../../block-provider';
 import { Collection, useCollection, useCollectionManager } from '../../../collection-manager';
+import { isTitleField } from '../../../collection-manager/Configuration/CollectionFields';
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
 import { useCompile, useDesignable, useFieldComponentOptions } from '../../hooks';
 import { BlockItem } from '../block-item';
@ -70,7 +71,7 @@ export const FormItem: any = observer((props: any) => {
  );
 });

-FormItem.Designer = () => {
+FormItem.Designer = function Designer() {
  const { getCollectionFields, getInterface, getCollectionJoinField, getCollection } = useCollectionManager();
  const { getField } = useCollection();
  const tk = useFilterByTk();
@ -97,11 +98,14 @@ FormItem.Designer = () => {
    initialValue['required'] = field.required;
  }
  const options = targetFields
-    .filter((field) => !field?.target && field.type !== 'boolean')
+    .filter((field) => {
+      return isTitleField(field);
+    })
    .map((field) => ({
      value: field?.name,
      label: compile(field?.uiSchema?.title) || field?.name,
    }));
+
  let readOnlyMode = 'editable';
  if (fieldSchema['x-disabled'] === true) {
    readOnlyMode = 'readonly';
--- a/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx
+++ b/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx
@ -1,9 +1,11 @@
 import { LoadingOutlined } from '@ant-design/icons';
-import { connect, mapProps, mapReadPretty } from '@formily/react';
-import { SelectProps } from 'antd';
+import { connect, mapProps, mapReadPretty, useFieldSchema } from '@formily/react';
+import { SelectProps, Tag } from 'antd';
+import moment from 'moment';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ResourceActionOptions, useRequest } from '../../../api-client';
 import { mergeFilter } from '../../../block-provider/SharedFilterProvider';
+import { useCollection, useCollectionManager } from '../../../collection-manager';
 import { useCompile } from '../../hooks';
 import { Select, defaultFieldNames } from '../select';
 import { ReadPretty } from './ReadPretty';
@ -15,6 +17,7 @@ export type RemoteSelectProps<P = any> = SelectProps<P, any> & {
  wait?: number;
  manual?: boolean;
  mapOptions?: (data: any) => RemoteSelectProps['fieldNames'];
+  targetField?: any;
  service: ResourceActionOptions<P>;
 };

@ -28,10 +31,73 @@ const InternalRemoteSelect = connect(
      objectValue,
      manual = true,
      mapOptions,
+      targetField: _targetField,
      ...others
    } = props;
    const compile = useCompile();
    const firstRun = useRef(false);
+    const fieldSchema = useFieldSchema();
+    const { getField } = useCollection();
+    const { getCollectionJoinField } = useCollectionManager();
+    const collectionField = getField(fieldSchema.name);
+    const targetField =
+      _targetField ||
+      (collectionField?.target &&
+        fieldNames?.label &&
+        getCollectionJoinField(`${collectionField.target}.${fieldNames.label}`));
+
+    const mapOptionsToTags = useCallback(
+      (options) => {
+        try {
+          return options.map((option) => {
+            let label = option[fieldNames.label];
+
+            if (targetField?.uiSchema?.enum) {
+              if (Array.isArray(label)) {
+                label = label
+                  .map((item, index) => {
+                    const option = targetField.uiSchema.enum.find((i) => i.value === item);
+                    if (option) {
+                      return (
+                        <Tag key={index} color={option.color} style={{ marginRight: 3 }}>
+                          {option?.label || item}
+                        </Tag>
+                      );
+                    } else {
+                      return <Tag>{item}</Tag>;
+                    }
+                  })
+                  .reverse();
+              } else {
+                const item = targetField.uiSchema.enum.find((i) => i.value === label);
+                if (item) {
+                  label = <Tag color={item.color}>{item.label}</Tag>;
+                }
+              }
+            }
+
+            if (targetField?.type === 'date') {
+              label = moment(label).format('YYYY-MM-DD');
+            }
+
+            if (mapOptions) {
+              return mapOptions({
+                [fieldNames.label]: label,
+                [fieldNames.value]: option[fieldNames.value],
+              });
+            }
+            return {
+              [fieldNames.label]: label || option[fieldNames.value],
+              [fieldNames.value]: option[fieldNames.value],
+            };
+          });
+        } catch (err) {
+          console.error(err);
+          return options;
+        }
+      },
+      [targetField?.uiSchema, fieldNames],
+    );

    const { data, run, loading } = useRequest(
      {
@ -82,11 +148,8 @@ const InternalRemoteSelect = connect(

    const getOptionsByFieldNames = useCallback(
      (item) => {
-        if (mapOptions) {
-          return mapOptions(item);
-        }
        return Object.keys(fieldNames).reduce((obj, key) => {
-          const value = item[fieldNames[key]];
+          let value = item[fieldNames[key]];
          if (value) {
            // support hidden, disabled, etc.
            obj[['label', 'value', 'options'].includes(key) ? fieldNames[key] : key] =
@ -138,7 +201,7 @@ const InternalRemoteSelect = connect(
        value={value}
        {...others}
        loading={loading}
-        options={options}
+        options={mapOptionsToTags(options)}
      />
    );
  },
--- a/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx
+++ b/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx
@ -21,9 +21,10 @@ export const FormDataTemplates = observer((props: any) => {
  const { useProps } = props;
  const { defaultValues, collectionName } = useProps();
  const { collectionList, getEnableFieldTree } = useCollectionState(collectionName);
-  const { getCollection } = useCollectionManager();
+  const { getCollection, getCollectionField } = useCollectionManager();
  const collection = getCollection(collectionName);
  const { t } = useTranslation();
+  const field = getCollectionField(`${collectionName}.${collection?.titleField || 'id'}`);

  return (
    <SchemaComponent
@ -83,16 +84,24 @@ export const FormDataTemplates = observer((props: any) => {
                        multiple: false,
                        objectValue: false,
                        manual: false,
-                        mapOptions: (item) => {
-                          return {
-                            ...item,
-                            [collection.titleField || 'label']: `#${item.id} ${item[collection.titleField] || ''}`,
-                            value: item.id,
-                          };
+                        targetField: field,
+                        mapOptions(option) {
+                          try {
+                            const label = collection?.titleField || 'id';
+                            option[label] = (
+                              <>
+                                #{option.id} {option[label]}
+                              </>
+                            );
+                            return option;
+                          } catch (error) {
+                            console.error(error);
+                            return option;
+                          }
                        },
                        fieldNames: {
-                          label: collection.titleField || 'label',
-                          value: 'value',
+                          label: collection?.titleField || 'id',
+                          value: 'id',
                        },
                      },
                      'x-reactions': [