From bcc417a79f47a5cae262c0ce814c830ef8b83d9f Mon Sep 17 00:00:00 2001 From: chenos Date: Sat, 1 Apr 2023 21:37:12 +0800 Subject: [PATCH] fix(record-picker): title field --- .../AssociationFilter.Item.Designer.tsx | 9 +++++---- .../antd/association-filter/AssociationFilter.Item.tsx | 6 +++++- .../antd/record-picker/ReadPrettyRecordPicker.tsx | 3 +-- .../src/schema-component/antd/record-picker/util.ts | 7 ++++++- 4 files changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.Designer.tsx b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.Designer.tsx index fb66225a21..d3b0e8c316 100644 --- a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.Designer.tsx +++ b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.Designer.tsx @@ -1,4 +1,5 @@ import { ISchema, useField, useFieldSchema } from '@formily/react'; +import _ from 'lodash'; import React from 'react'; import { useTranslation } from 'react-i18next'; import { @@ -9,7 +10,6 @@ import { } from '../../../collection-manager'; import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings'; import { useCompile, useDesignable } from '../../hooks'; -import _ from 'lodash'; export const AssociationFilterItemDesigner = (props) => { const fieldSchema = useFieldSchema(); @@ -30,9 +30,10 @@ export const AssociationFilterItemDesigner = (props) => { const targetFields = collectionField?.target ? getCollectionFields(collectionField?.target) : []; const options = targetFields - .filter( - (field) => field?.interface && ['id', 'input', 'phone', 'email', 'integer', 'number'].includes(field?.interface), - ) + // .filter( + // (field) => field?.interface && ['id', 'input', 'phone', 'email', 'integer', 'number'].includes(field?.interface), + // ) + .filter((field) => !field?.target && field.type !== 'boolean') .map((field) => ({ value: field?.name, label: compile(field?.uiSchema?.title) || field?.name, diff --git a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx index 1f693b023b..3d52f35561 100644 --- a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx +++ b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx @@ -6,6 +6,7 @@ import cls from 'classnames'; import React, { ChangeEvent, MouseEvent, useMemo, useState } from 'react'; import { SortableItem } from '../../common'; import { useCompile, useDesigner, useProps } from '../../hooks'; +import { getLabelFormatValue, useLabelUiSchema } from '../record-picker'; import { AssociationFilter } from './AssociationFilter'; const { Panel } = Collapse; @@ -78,6 +79,7 @@ export const AssociationFilterItem = (props) => { }; const title = fieldSchema.title ?? collectionField.uiSchema?.title; + const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.title || 'label'); return ( { treeData={list} onSelect={onSelect} fieldNames={fieldNames} - titleRender={(node) => compile(node[labelKey])} + titleRender={(node) => { + return getLabelFormatValue(labelUiSchema, compile(node[labelKey])); + }} selectedKeys={selectedKeys} blockNode /> diff --git a/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx b/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx index 96d77a74a8..0efaffefe1 100644 --- a/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx +++ b/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx @@ -1,4 +1,3 @@ -import { css } from '@emotion/css'; import { observer, RecursionField, useFieldSchema } from '@formily/react'; import { toArr } from '@formily/shared'; import { Typography } from 'antd'; @@ -46,7 +45,7 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => { const renderRecords = () => toArr(props.value).map((record, index, arr) => { const val = toValue(compile(record?.[fieldNames?.label || 'label']), 'N/A'); - const text = getLabelFormatValue(labelUiSchema, val); + const text = getLabelFormatValue(labelUiSchema, val, true); return ( diff --git a/packages/core/client/src/schema-component/antd/record-picker/util.ts b/packages/core/client/src/schema-component/antd/record-picker/util.ts index 506cf476a8..ae4e518f04 100644 --- a/packages/core/client/src/schema-component/antd/record-picker/util.ts +++ b/packages/core/client/src/schema-component/antd/record-picker/util.ts @@ -1,7 +1,9 @@ import { ISchema } from '@formily/react'; import { isArr } from '@formily/shared'; import { getDefaultFormat, str2moment } from '@nocobase/utils/client'; +import { Tag } from 'antd'; import moment from 'moment'; +import React from 'react'; import { CollectionFieldOptions, useCollectionManager } from '../../../collection-manager'; export const useLabelUiSchema = (collectionField: CollectionFieldOptions, label: string): ISchema => { @@ -20,9 +22,12 @@ export const getDatePickerLabels = (props): string => { return isArr(labels) ? labels.join('~') : labels; }; -export const getLabelFormatValue = (labelUiSchema: ISchema, value: any): string => { +export const getLabelFormatValue = (labelUiSchema: ISchema, value: any, isTag = false): any => { if (Array.isArray(labelUiSchema?.enum) && value) { const opt: any = labelUiSchema.enum.find((option: any) => option.value === value); + if (isTag) { + return React.createElement(Tag, { color: opt?.color, children: opt?.label }); + } return opt?.label; } switch (labelUiSchema?.['x-component']) {