fix: 处理同名组件选择异常情况，文本切换组件阈值，时间选择具体范围 (#712)

Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>

.changeset/yellow-papayas-shout.md

@@ -0,0 +1,5 @@
+---
+"@hera/plugin-mobile": patch
+---
+
+修改mobile组件同名切换问题，文本切换阈值，时间范围

packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputItemAction.ts

@@ -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('');
     }

packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputMItemChild.tsx

@@ -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) => {
+        onConfirm={([start, end]) => {
-          onInputChange(convertFormat(v[0]) + '&' + convertFormat(v[1]));
+          const startTime = dayjs(start).startOf('date').toISOString();
-          onChange(convertFormat(v[0]) + '&' + convertFormat(v[1]));
+          const endTime = dayjs(end).endOf('date').toISOString();
+
+          // TODO: 此处受上游影响,格式必须确定为这样, 时间有限,不再往上追查
+          const timeString = `"${startTime}"&"${endTime}"`;
+
+          onInputChange(timeString);
+          onChange(timeString);
         }}
       />
     </Grid.Item>

packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchFieldItemAction.ts

@@ -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;

packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchFieldItemProps.ts

@@ -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 {

packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/create/createTabSearchItemSchema.ts

@@ -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',

packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/initializer/TabSearchFieldSchemaInitializer.tsx

@@ -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',
           });
         }
       })

packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/utils.ts

@@ -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));
+};