fix: 处理同名组件选择异常情况,文本切换组件阈值,时间选择具体范围 (#712)
Co-authored-by: wjh <wwwjh0710@163.com> Co-committed-by: wjh <wwwjh0710@163.com>
This commit is contained in:
		
							parent
							
								
									a87d95210c
								
							
						
					
					
						commit
						2020643371
					
				
							
								
								
									
										5
									
								
								.changeset/yellow-papayas-shout.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										5
									
								
								.changeset/yellow-papayas-shout.md
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,5 @@
 | 
			
		||||
---
 | 
			
		||||
"@hera/plugin-mobile": patch
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
修改mobile组件同名切换问题,文本切换阈值,时间范围
 | 
			
		||||
@ -1,7 +1,13 @@
 | 
			
		||||
import { useMemo, useState } from 'react';
 | 
			
		||||
import { useFieldSchema } from '@nocobase/schema';
 | 
			
		||||
import { useCollection, useCollectionManager, useDesignable, useDesigner } from '@nocobase/client';
 | 
			
		||||
import { canBeDataField, canBeRelatedField, convertFormat, isTabSearchCollapsibleInputItem } from '../../utils';
 | 
			
		||||
import {
 | 
			
		||||
  canBeDataField,
 | 
			
		||||
  canBeRelatedField,
 | 
			
		||||
  changFormat,
 | 
			
		||||
  convertFormat,
 | 
			
		||||
  isTabSearchCollapsibleInputItem,
 | 
			
		||||
} from '../../utils';
 | 
			
		||||
import { useTabSearchCollapsibleInputItem } from './hooks';
 | 
			
		||||
import { dayjs } from '@nocobase/utils/client';
 | 
			
		||||
 | 
			
		||||
@ -11,13 +17,16 @@ export const useTabSearchCollapsibleInputItemAction = (props) => {
 | 
			
		||||
  const collection = useCollection();
 | 
			
		||||
  const cm = useCollectionManager();
 | 
			
		||||
  const { dn } = useDesignable();
 | 
			
		||||
  const collectionField = useMemo(() => collection?.getField(fieldSchema.name as any), [collection, fieldSchema.name]);
 | 
			
		||||
  const collectionField = useMemo(
 | 
			
		||||
    () => collection?.getField(fieldSchema['fieldName'] as any),
 | 
			
		||||
    [collection, fieldSchema['fieldName']],
 | 
			
		||||
  );
 | 
			
		||||
  const properties = fieldSchema.parent.properties;
 | 
			
		||||
  const Designer = useDesigner();
 | 
			
		||||
  const [customLabelKey, setCustomLabelKey] = useState(fieldSchema['name'] as string);
 | 
			
		||||
  const [customLabelKey, setCustomLabelKey] = useState(fieldSchema['fieldName'] as string);
 | 
			
		||||
  const [fieldInterface, setFieldInterface] = useState(fieldSchema['x-component-props'].interface);
 | 
			
		||||
  const defaultValue = canBeDataField(fieldInterface)
 | 
			
		||||
    ? convertFormat(new Date()) + '&' + convertFormat(new Date())
 | 
			
		||||
    ? changFormat(dayjs(new Date()).startOf('date')) + '&' + changFormat(dayjs(new Date()).endOf('date'))
 | 
			
		||||
    : '';
 | 
			
		||||
  const [value, setValue] = useState(defaultValue);
 | 
			
		||||
  const options = Object.values(properties)
 | 
			
		||||
@ -25,7 +34,7 @@ export const useTabSearchCollapsibleInputItemAction = (props) => {
 | 
			
		||||
      if (isTabSearchCollapsibleInputItem(option['x-component'])) {
 | 
			
		||||
        return {
 | 
			
		||||
          label: option['title'],
 | 
			
		||||
          value: option['name'],
 | 
			
		||||
          value: option['fieldName'],
 | 
			
		||||
          interface: option['x-component-props'].interface,
 | 
			
		||||
        };
 | 
			
		||||
      }
 | 
			
		||||
@ -36,7 +45,7 @@ export const useTabSearchCollapsibleInputItemAction = (props) => {
 | 
			
		||||
    let time;
 | 
			
		||||
    let filterKey = `${customLabelKey}.$includes`;
 | 
			
		||||
    if (canBeDataField(fieldInterface)) {
 | 
			
		||||
      time = value.split('&');
 | 
			
		||||
      time = value.split('&').map((value) => JSON.parse(value));
 | 
			
		||||
      filterKey = `${customLabelKey}.$dateBetween`;
 | 
			
		||||
    }
 | 
			
		||||
    if (canBeRelatedField(fieldInterface)) {
 | 
			
		||||
@ -48,7 +57,7 @@ export const useTabSearchCollapsibleInputItemAction = (props) => {
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const onSelectChange = (label) => {
 | 
			
		||||
    const type = Object.values(properties).find((value) => value.name === label)['x-component-props'].interface;
 | 
			
		||||
    const type = Object.values(properties).find((value) => value['fieldName'] === label)['x-component-props'].interface;
 | 
			
		||||
    if (canBeRelatedField(type)) {
 | 
			
		||||
      const titleField = cm.getCollection(collection.name + '.' + label).titleField;
 | 
			
		||||
      fieldSchema['x-component-props']['correlation'] = label;
 | 
			
		||||
@ -63,7 +72,7 @@ export const useTabSearchCollapsibleInputItemAction = (props) => {
 | 
			
		||||
    }
 | 
			
		||||
    setFieldInterface(type);
 | 
			
		||||
    if (canBeDataField(type)) {
 | 
			
		||||
      setValue(convertFormat(new Date()) + '&' + convertFormat(new Date()));
 | 
			
		||||
      setValue(changFormat(new Date()) + '&' + changFormat(new Date()));
 | 
			
		||||
    } else {
 | 
			
		||||
      setValue('');
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -3,7 +3,8 @@ import { useTranslation } from '../../../../locale';
 | 
			
		||||
import { Grid, Divider, Picker, Input, Space, ActionSheet, DatePicker, CalendarPicker } from 'antd-mobile';
 | 
			
		||||
import { DownOutline } from 'antd-mobile-icons';
 | 
			
		||||
import type { Action } from 'antd-mobile/es/components/action-sheet';
 | 
			
		||||
import { convertFormat } from '../../utils';
 | 
			
		||||
import { changFormat, convertFormat } from '../../utils';
 | 
			
		||||
import { dayjs } from '@nocobase/utils/client';
 | 
			
		||||
 | 
			
		||||
export const ISelect = (props) => {
 | 
			
		||||
  const { options, onChange, customLabelKey } = props;
 | 
			
		||||
@ -25,7 +26,7 @@ export const ISelect = (props) => {
 | 
			
		||||
        {options.find((option) => option.value === customLabelKey).label}
 | 
			
		||||
      </span>
 | 
			
		||||
      <DownOutline />
 | 
			
		||||
      {options.length <= 3 ? (
 | 
			
		||||
      {options.length <= 5 ? (
 | 
			
		||||
        <ActionSheet
 | 
			
		||||
          visible={visible}
 | 
			
		||||
          actions={actions}
 | 
			
		||||
@ -67,13 +68,13 @@ export const IDatePicker = (props) => {
 | 
			
		||||
      >
 | 
			
		||||
        <Grid columns={5}>
 | 
			
		||||
          <Grid.Item span={2} style={{ textAlign: 'end' }}>
 | 
			
		||||
            {time[0]}
 | 
			
		||||
            {convertFormat(JSON.parse(time[0]))}
 | 
			
		||||
          </Grid.Item>
 | 
			
		||||
          <Grid.Item span={1} style={{ textAlign: 'center' }}>
 | 
			
		||||
            -
 | 
			
		||||
          </Grid.Item>
 | 
			
		||||
          <Grid.Item span={2} style={{ textAlign: 'start' }}>
 | 
			
		||||
            {time[1]}
 | 
			
		||||
            {convertFormat(JSON.parse(time[1]))}
 | 
			
		||||
          </Grid.Item>
 | 
			
		||||
        </Grid>
 | 
			
		||||
      </div>
 | 
			
		||||
@ -82,9 +83,15 @@ export const IDatePicker = (props) => {
 | 
			
		||||
        selectionMode="range"
 | 
			
		||||
        onMaskClick={() => setVisible(false)}
 | 
			
		||||
        onClose={() => setVisible(false)}
 | 
			
		||||
        onConfirm={(v) => {
 | 
			
		||||
          onInputChange(convertFormat(v[0]) + '&' + convertFormat(v[1]));
 | 
			
		||||
          onChange(convertFormat(v[0]) + '&' + convertFormat(v[1]));
 | 
			
		||||
        onConfirm={([start, end]) => {
 | 
			
		||||
          const startTime = dayjs(start).startOf('date').toISOString();
 | 
			
		||||
          const endTime = dayjs(end).endOf('date').toISOString();
 | 
			
		||||
 | 
			
		||||
          // TODO: 此处受上游影响,格式必须确定为这样, 时间有限,不再往上追查
 | 
			
		||||
          const timeString = `"${startTime}"&"${endTime}"`;
 | 
			
		||||
 | 
			
		||||
          onInputChange(timeString);
 | 
			
		||||
          onChange(timeString);
 | 
			
		||||
        }}
 | 
			
		||||
      />
 | 
			
		||||
    </Grid.Item>
 | 
			
		||||
 | 
			
		||||
@ -9,7 +9,10 @@ export const useTabSearchFieldItemAction = (props) => {
 | 
			
		||||
  const { t } = useTranslation();
 | 
			
		||||
  const fieldSchema = useFieldSchema();
 | 
			
		||||
  const c = useCollection();
 | 
			
		||||
  const collectionField = React.useMemo(() => c?.getField(fieldSchema.name as any), [c, fieldSchema.name]);
 | 
			
		||||
  const collectionField = React.useMemo(
 | 
			
		||||
    () => c?.getField(fieldSchema['fieldName'] as any),
 | 
			
		||||
    [c, fieldSchema['fieldName']],
 | 
			
		||||
  );
 | 
			
		||||
  const Designer = useDesigner();
 | 
			
		||||
  const valueKey = _valueKey || collectionField?.targetKey || 'id';
 | 
			
		||||
  const labelKey = _labelKey || fieldSchema['x-component-props']?.fieldNames?.label || valueKey;
 | 
			
		||||
 | 
			
		||||
@ -10,7 +10,10 @@ export const useTabSearchFieldItemProps = () => {
 | 
			
		||||
  const collection = useCollection();
 | 
			
		||||
  const optionalFieldList = useOptionalFieldList();
 | 
			
		||||
  const cm = useCollectionManager();
 | 
			
		||||
  const collectionField = useMemo(() => collection?.getField(fieldSchema.name as any), [collection, fieldSchema.name]);
 | 
			
		||||
  const collectionField = useMemo(
 | 
			
		||||
    () => collection?.getField(fieldSchema['fieldName'] as any),
 | 
			
		||||
    [collection, fieldSchema['fieldName']],
 | 
			
		||||
  );
 | 
			
		||||
  const { onSelected } = useTabSearchCollapsibleInputItem();
 | 
			
		||||
  const result = { list: null, valueKey: '', labelKey: '', filterKey: '' };
 | 
			
		||||
  if (!collection) return;
 | 
			
		||||
@ -18,7 +21,7 @@ export const useTabSearchFieldItemProps = () => {
 | 
			
		||||
  result.labelKey = fieldSchema['x-component-props']?.fieldNames?.label || result.valueKey;
 | 
			
		||||
  const fieldInterface = fieldSchema['x-component-props'].interface;
 | 
			
		||||
  if (canBeOptionalField(fieldInterface)) {
 | 
			
		||||
    const field = optionalFieldList.find((field) => field.name === fieldSchema.name);
 | 
			
		||||
    const field = optionalFieldList.find((field) => field.fieldName === fieldSchema['fieldName']);
 | 
			
		||||
    const operatorMap = {
 | 
			
		||||
      select: '$in',
 | 
			
		||||
      multipleSelect: '$anyOf',
 | 
			
		||||
@ -30,7 +33,7 @@ export const useTabSearchFieldItemProps = () => {
 | 
			
		||||
    result.valueKey = 'value';
 | 
			
		||||
    result.labelKey = 'label';
 | 
			
		||||
    result.list = _list;
 | 
			
		||||
    result.filterKey = `${field.name}.${operatorMap[field.interface]}`;
 | 
			
		||||
    result.filterKey = `${field.fieldName}.${operatorMap[field.interface]}`;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  return {
 | 
			
		||||
 | 
			
		||||
@ -1,11 +1,12 @@
 | 
			
		||||
export const createTabSearchItemSchema = (options) => {
 | 
			
		||||
  const { field, itemComponent, label, itemUseProps, collection } = options;
 | 
			
		||||
  const { field, itemComponent, label, itemUseProps, collection, type } = options;
 | 
			
		||||
  return {
 | 
			
		||||
    name: field.key,
 | 
			
		||||
    title: field.uiSchema?.title,
 | 
			
		||||
    Component: 'TabSearchFieldSchemaInitializerGadget',
 | 
			
		||||
    schema: {
 | 
			
		||||
      name: field.name,
 | 
			
		||||
      name: field.name + type,
 | 
			
		||||
      fieldName: field.name,
 | 
			
		||||
      title: field.uiSchema?.title,
 | 
			
		||||
      type: 'void',
 | 
			
		||||
      'x-toolbar': 'CollapseItemSchemaToolbar',
 | 
			
		||||
 | 
			
		||||
@ -24,7 +24,7 @@ const textFieldsItem: SchemaInitializerItemType<any> = {
 | 
			
		||||
          const label = canBeRelatedField(field.interface)
 | 
			
		||||
            ? cm.getCollection(`${collection.name}.${field.name}`).titleField
 | 
			
		||||
            : field.name;
 | 
			
		||||
          return createTabSearchItemSchema({ field, itemComponent, label, collection });
 | 
			
		||||
          return createTabSearchItemSchema({ field, itemComponent, label, collection, type: 'text' });
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
      .filter(Boolean);
 | 
			
		||||
@ -51,6 +51,7 @@ const choicesFieldsItem: SchemaInitializerItemType<any> = {
 | 
			
		||||
            itemComponent,
 | 
			
		||||
            label,
 | 
			
		||||
            itemUseProps: 'useTabSearchFieldItemProps',
 | 
			
		||||
            type: 'choices',
 | 
			
		||||
          });
 | 
			
		||||
        } else if (canBeRelatedField(field.interface)) {
 | 
			
		||||
          return createTabSearchItemSchema({
 | 
			
		||||
@ -58,6 +59,7 @@ const choicesFieldsItem: SchemaInitializerItemType<any> = {
 | 
			
		||||
            itemComponent,
 | 
			
		||||
            label,
 | 
			
		||||
            itemUseProps: 'useTabSearchFieldItemRelatedProps',
 | 
			
		||||
            type: 'choices',
 | 
			
		||||
          });
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
 | 
			
		||||
@ -31,3 +31,7 @@ export const canBeSearchField = (_interface: string) => canBeSearchFields.includ
 | 
			
		||||
export const convertFormat = (currentDate) => {
 | 
			
		||||
  return dayjs(currentDate).format('YYYY-MM-DD');
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const changFormat = (currentDate) => {
 | 
			
		||||
  return JSON.stringify(dayjs(currentDate));
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user