fix: 修复手机端表单使用相对应的组件 (#1054)

Reviewed-on: daoyoucloud/tachybase#1054
Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>

packages/plugins/@hera/plugin-approval-mobile/src/client/approval/initiations/component/ViewActionInitiationsContent.tsx

@@ -1,17 +1,22 @@
-import React, { createContext, useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 import {
   CollectionProvider_deprecated,
+  parseCollectionName,
   RemoteSchemaComponent,
   SchemaComponent,
   SchemaComponentContext,
-  parseCollectionName,
   useAPIClient,
 } from '@tachybase/client';
-import { useContext } from 'react';
+
 import { NavBar } from 'antd-mobile';
 import { useNavigate, useParams } from 'react-router-dom';
+
 import { useTranslation } from '../../locale';
+
 import '../../style/style.css';
+
+import { MobileProvider } from '@tachybase/plugin-mobile-client/client';
+
 import { APPROVAL_ACTION_STATUS } from '../../constants';
 import { useCreateSubmit } from '../hook/useCreateSubmit';
 
@@ -40,9 +45,14 @@ export const ViewActionInitiationsContent = () => {
         const formConfig = res.data.data[0];
         const [dataSource, name] = parseCollectionName(formConfig.config.collection);
         const resSchema = {
+          type: 'void',
+          'x-component': 'MobileProvider',
+          properties: {
+            page: {
               type: 'void',
               'x-component': 'MPage',
               'x-designer': 'MPage.Designer',
+              'x-decorator': 'MobileProvider',
               'x-component-props': {},
               properties: {
                 Approval: {
@@ -59,6 +69,8 @@ export const ViewActionInitiationsContent = () => {
                   },
                 },
               },
+            },
+          },
         };
         setSchema(resSchema);
       })
@@ -86,6 +98,7 @@ export const ViewActionInitiationsContent = () => {
               ApplyActionStatusProvider: ContextInitiationsApprovalStatusProvider,
               ActionBarProvider,
               WithdrawActionProvider: WithdrawActionProvider,
+              MobileProvider,
             }}
             scope={{
               useSubmit: useCreateSubmit,

packages/plugins/@hera/plugin-approval-mobile/src/client/approval/initiations/component/ViewActionUserInitiationsContent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import {
   RemoteSchemaComponent,
   SchemaComponent,
@@ -11,24 +11,28 @@ import {
 } from '@tachybase/client';
 import { DetailsBlockProvider, FlowContext } from '@tachybase/plugin-workflow/client';
 import { useFieldSchema, useForm } from '@tachybase/schema';
+
 import { Result, Spin } from 'antd';
-import { useContext } from 'react';
-import { ContextWithActionEnabled } from '../../context/WithActionEnabled';
-import { SchemaComponentContextProvider } from '../../context/SchemaComponent';
 import { NavBar, Skeleton, TabBar } from 'antd-mobile';
+import { FileOutline, UserContactOutline } from 'antd-mobile-icons';
 import { useNavigate, useParams } from 'react-router-dom';
+
+import { ContextApprovalExecution } from '../../context/ApprovalExecution';
 import { FormBlockProvider } from '../../context/FormBlock';
+import { SchemaComponentContextProvider } from '../../context/SchemaComponent';
+import { ContextWithActionEnabled } from '../../context/WithActionEnabled';
+import { useTranslation } from '../../locale';
+import { useFormBlockProps } from '../hook/useFormBlockProps';
+import { useUpdateSubmit } from '../hook/useUpadteSubmit';
+import { useWithdrawAction } from '../hook/useWithdrawAction';
 import { ActionBarProvider } from '../provider/ActionBar';
 import { ApplyActionStatusProvider } from '../provider/ApplyActionStatus';
 import { WithdrawActionProvider } from '../provider/WithdrawAction';
-import { ContextApprovalExecution } from '../../context/ApprovalExecution';
+
-import { useUpdateSubmit } from '../hook/useUpadteSubmit';
-import { useFormBlockProps } from '../hook/useFormBlockProps';
-import { useWithdrawAction } from '../hook/useWithdrawAction';
-import { FileOutline, UserContactOutline } from 'antd-mobile-icons';
-import { useTranslation } from '../../locale';
 import '../../style/style.css';
 
+import { MobileProvider } from '@tachybase/plugin-mobile-client/client';
+
 export const ViewActionUserInitiationsContent = () => {
   const params = useParams();
   const navigate = useNavigate();
@@ -117,9 +121,14 @@ export const ViewActionUserInitiationsContent = () => {
 
 const UserInitiationsComponent = (applyDetail, t, currContext) => {
   const formContextSchema = {
+    type: 'void',
+    'x-component': 'MobileProvider',
+    properties: {
+      page: {
         type: 'void',
         'x-component': 'MPage',
         'x-designer': 'MPage.Designer',
+        'x-decorator': 'MobileProvider',
         'x-component-props': {},
         properties: {
           Approval: {
@@ -133,9 +142,15 @@ const UserInitiationsComponent = (applyDetail, t, currContext) => {
             },
           },
         },
+      },
+    },
   };
 
   const approvalSchema = {
+    type: 'void',
+    'x-component': 'MobileProvider',
+    properties: {
+      page: {
         type: 'void',
         'x-component': 'MPage',
         'x-designer': 'MPage.Designer',
@@ -147,6 +162,8 @@ const UserInitiationsComponent = (applyDetail, t, currContext) => {
             'x-component': 'ApprovalCommon.ViewComponent.MApprovalProcess',
           },
         },
+      },
+    },
   };
 
   return (
@@ -160,6 +177,7 @@ const UserInitiationsComponent = (applyDetail, t, currContext) => {
         ApplyActionStatusProvider,
         WithdrawActionProvider,
         DetailsBlockProvider,
+        MobileProvider,
       }}
       scope={{
         useForm,

packages/plugins/@hera/plugin-approval-mobile/src/client/approval/initiations/hook/useCreateSubmit.tsx

@@ -1,8 +1,10 @@
 import { joinCollectionName, useAPIClient, useBlockRequestContext, useCollection_deprecated } from '@tachybase/client';
 import { useField, useForm } from '@tachybase/schema';
-import { APPROVAL_ACTION_STATUS } from '../../constants';
+
-import { useNavigate, useParams } from 'react-router-dom';
 import { Toast } from 'antd-mobile';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { APPROVAL_ACTION_STATUS } from '../../constants';
 
 export function useCreateSubmit() {
   const from = useForm();
@@ -28,7 +30,6 @@ export function useCreateSubmit() {
             workflowId: workflowId,
           },
         });
-        console.log('🚀 ~ res ~ res:', res);
         if (res.status === 200) {
           Toast.show({
             icon: 'success',

packages/plugins/@hera/plugin-approval-mobile/src/client/approval/todos/component/ViewActionTodosContent.tsx

@@ -1,3 +1,4 @@
+import React, { useContext, useEffect, useState } from 'react';
 import {
   RemoteSchemaComponent,
   SchemaComponent,
@@ -7,26 +8,30 @@ import {
   useRecord,
   useRequest,
 } from '@tachybase/client';
-import { Result } from 'antd';
-import _ from 'lodash';
-import React, { useContext, useEffect, useState } from 'react';
-import { useTranslation } from '../../locale';
 import { DetailsBlockProvider } from '@tachybase/plugin-workflow/client';
-import { ContextWithActionEnabled } from '../../context/WithActionEnabled';
+
-import { ContextApprovalExecution } from '../../context/ApprovalExecution';
+import { Result } from 'antd';
 import { NavBar, Skeleton, TabBar } from 'antd-mobile';
+import { CouponOutline, FileOutline, ScanCodeOutline, UserContactOutline } from 'antd-mobile-icons';
+import _ from 'lodash';
 import { useNavigate, useParams } from 'react-router-dom';
+
+import { ContextApprovalExecution } from '../../context/ApprovalExecution';
+import { FormBlockProvider } from '../../context/FormBlock';
 import { SchemaComponentContextProvider } from '../../context/SchemaComponent';
-import { ApprovalActionProvider } from '../provider/ApprovalAction';
+import { ContextWithActionEnabled } from '../../context/WithActionEnabled';
-import { ApprovalFormBlockDecorator } from '../provider/ApprovalFormBlock';
+import { useTranslation } from '../../locale';
 import { useApprovalDetailBlockProps } from '../hook/useApprovalDetailBlockProps';
 import { useApprovalFormBlockProps } from '../hook/useApprovalFormBlockProps';
 import { useSubmit } from '../hook/useSubmit';
-import { CouponOutline, FileOutline, ScanCodeOutline, UserContactOutline } from 'antd-mobile-icons';
 import { ActionBarProvider } from '../provider/ActionBarProvider';
-import { FormBlockProvider } from '../../context/FormBlock';
+import { ApprovalActionProvider } from '../provider/ApprovalAction';
+import { ApprovalFormBlockDecorator } from '../provider/ApprovalFormBlock';
+
 import '../../style/style.css';
 
+import { MobileProvider } from '@tachybase/plugin-mobile-client/client';
+
 // 审批-待办-查看: 内容
 export const ViewActionTodosContent = () => {
   const { t } = useTranslation();
@@ -129,9 +134,14 @@ export const ViewActionTodosContent = () => {
 
 const todosComponent = (applyDetail, t, currContext) => {
   const formContextSchema = {
+    type: 'void',
+    'x-component': 'MobileProvider',
+    properties: {
+      page: {
         type: 'void',
         'x-component': 'MPage',
         'x-designer': 'MPage.Designer',
+        'x-decorator': 'MobileProvider',
         'x-component-props': {},
         properties: {
           Approval: {
@@ -145,9 +155,15 @@ const todosComponent = (applyDetail, t, currContext) => {
             },
           },
         },
+      },
+    },
   };
 
   const approvalSchema = {
+    type: 'void',
+    'x-component': 'MobileProvider',
+    properties: {
+      page: {
         type: 'void',
         'x-component': 'MPage',
         'x-designer': 'MPage.Designer',
@@ -159,6 +175,8 @@ const todosComponent = (applyDetail, t, currContext) => {
             'x-component': 'ApprovalCommon.ViewComponent.MApprovalProcess',
           },
         },
+      },
+    },
   };
 
   return (
@@ -173,6 +191,7 @@ const todosComponent = (applyDetail, t, currContext) => {
         ApprovalFormBlockProvider: ApprovalFormBlockDecorator,
         DetailsBlockProvider,
         TabBar,
+        MobileProvider,
       }}
       scope={{
         useApprovalDetailBlockProps,

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/index.tsx

@@ -1,46 +1,49 @@
-import { SchemaComponentOptions } from '@tachybase/client';
 import React, { PropsWithChildren } from 'react';
+import { SchemaComponentOptions } from '@tachybase/client';
+
 import {
-  MMenuBlockInitializer,
+  CollectionField,
-  MMenu,
-  MContainer,
-  MTabBar,
-  MPage,
-  MHeader,
-  MSettingsBlockInitializer,
-  MSettings,
-  useGridCardBlockItemProps,
-  useGridCardBlockProps,
-  TabSearch,
-  TabSearchProvider,
-  TabSearchBlockInitializer,
-  TabSearchFieldItem,
-  TabSearchFieldMItem,
-  TabSearchCollapsibleInputItem,
-  TabSearchCollapsibleInputMItem,
-  TabSearchFieldSchemaInitializerGadget,
-  SwiperBlockInitializer,
-  SwiperBlock,
-  SwiperPage,
-  ImageSearchView,
   ImageSearchInitializer,
-  ImageSearchProvider,
   ImageSearchItemIntializer,
   ImageSearchItemToolbar,
   ImageSearchItemView,
+  ImageSearchProvider,
+  ImageSearchView,
+  MCheckbox,
+  MContainer,
+  MDatePicker,
+  MHeader,
+  MImageUploader,
+  MInput,
+  MMenu,
+  MMenuBlockInitializer,
+  MPage,
+  MRadio,
+  MSettings,
+  MSettingsBlockInitializer,
+  MTabBar,
   NoticeBlock,
   NoticeBlockInitializer,
-  useSwiperBlockProps,
+  SwiperBlock,
+  SwiperBlockInitializer,
+  SwiperPage,
+  TabSearch,
+  TabSearchBlockInitializer,
+  TabSearchCollapsibleInputItem,
+  TabSearchCollapsibleInputMItem,
+  TabSearchFieldItem,
+  TabSearchFieldMItem,
+  TabSearchFieldSchemaInitializerGadget,
+  TabSearchProvider,
+  useGridCardBlockItemProps,
+  useGridCardBlockProps,
   usePropsOptionalImageSearchItemField,
   usePropsRelatedImageSearchItemField,
+  useSwiperBlockProps,
   useTabSearchFieldItemProps,
   useTabSearchFieldItemRelatedProps,
-  MInput,
-  MCheckbox,
-  MDatePicker,
-  MRadio,
-  MImageUploader,
 } from './schema';
+
 import './bridge';
 import './assets/svg';
 
@@ -83,6 +86,7 @@ export const MobileCore: React.FC<PropsWithChildren> = (props) => {
         MDatePicker,
         MRadio,
         MImageUploader,
+        CollectionField: CollectionField,
       }}
       scope={{
         useGridCardBlockItemProps,

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/DatePicker/DatePicker.tsx

@@ -1,7 +1,8 @@
-import { dayjs } from '@tachybase/utils/client';
-import { connect, mapProps } from '@tachybase/schema';
-import { Button, DatePicker, Input, Space } from 'antd-mobile';
 import React, { useState } from 'react';
+import { connect, mapProps, mapReadPretty } from '@tachybase/schema';
+import { dayjs } from '@tachybase/utils/client';
+
+import { Button, DatePicker, Input, Space } from 'antd-mobile';
 
 export const MDatePicker = connect(
   (props) => {
@@ -33,5 +34,10 @@ export const MDatePicker = connect(
   mapProps((props) => {
     return { ...props };
   }),
+  mapReadPretty((props) => {
+    const changeProps = { ...props };
+    changeProps.value = dayjs(props.value).format(props.dateFormat);
+    return <Input {...changeProps} readOnly />;
+  }),
 );
 export default MDatePicker;

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/ImageUploader/ImageUploader.tsx

@@ -1,7 +1,8 @@
+import React, { useEffect, useState } from 'react';
 import { useAPIClient } from '@tachybase/client';
 import { connect, mapProps, mapReadPretty, useForm } from '@tachybase/schema';
-import { ImageUploadItem, ImageUploader } from 'antd-mobile';
+
-import React, { useEffect, useState } from 'react';
+import { ImageUploader, ImageUploadItem } from 'antd-mobile';
 
 export const MImageUploader = connect(
   (props) => {
@@ -52,6 +53,18 @@ export const MImageUploader = connect(
   mapProps((props) => {
     return { ...props };
   }),
+  mapReadPretty((props) => {
+    return (
+      <ImageUploader
+        {...props}
+        disableUpload
+        showUpload={false}
+        upload={async () => {
+          return { url: '' };
+        }}
+      />
+    );
+  }),
 );
 export default MImageUploader;
 

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Input/Input.tsx

@@ -1,4 +1,6 @@
-import { connect, mapProps } from '@tachybase/schema';
+import React from 'react';
+import { connect, mapProps, mapReadPretty } from '@tachybase/schema';
+
 import { Input, InputProps, TextArea, TextAreaProps } from 'antd-mobile';
 
 type ComposedInput = React.FC<InputProps> & {
@@ -8,14 +10,20 @@ type ComposedInput = React.FC<InputProps> & {
 export const MInput: ComposedInput = connect(
   Input,
   mapProps((props) => {
-    return { placeholder: '请输入内容', clearable: true, ...props };
+    return { placeholder: '请输入内容', clearable: true, ...props, style: { fontSize: '12px' } };
+  }),
+  mapReadPretty((props) => {
+    return <Input {...props} readOnly style={{ fontSize: '12px' }} />;
   }),
 );
 
 const MTextArea = connect(
   TextArea,
   mapProps((props) => {
-    return { placeholder: '请输入内容', ...props };
+    return { ...props, placeholder: '请输入内容', clearable: true, style: { fontSize: '12px' } };
+  }),
+  mapReadPretty((props) => {
+    return <TextArea {...props} readOnly style={{ fontSize: '12px' }} />;
   }),
 );
 

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/collection-field/CollectionField.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useMemo } from 'react';
+import {
+  CollectionFieldProvider,
+  useCollectionField,
+  useCompile,
+  useComponent,
+  useFormBlockContext,
+  useIsAllowToSetDefaultValue,
+} from '@tachybase/client';
+import { connect, Field, merge, useField, useFieldSchema } from '@tachybase/schema';
+
+import { concat } from 'lodash';
+
+import { useIsMobile } from '../../hooks';
+import { canMobileField } from '../form/CustomComponent';
+
+type Props = {
+  component: any;
+  children?: React.ReactNode;
+};
+
+/**
+ * TODO: 初步适配
+ * @internal
+ */
+export const CollectionFieldInternalField: React.FC = (props: Props) => {
+  const { component } = props;
+  const compile = useCompile();
+  const field = useField<Field>();
+  const fieldSchema = useFieldSchema();
+  const { uiSchema: uiSchemaOrigin, defaultValue } = useCollectionField();
+  const { isAllowToSetDefaultValue } = useIsAllowToSetDefaultValue();
+  const uiSchema = useMemo(() => compile(uiSchemaOrigin), [JSON.stringify(uiSchemaOrigin)]);
+  const isMobile = useIsMobile();
+  const Component = useComponent(component || uiComponent(isMobile, uiSchema) || 'Input');
+  const setFieldProps = (key, value) => {
+    field[key] = typeof field[key] === 'undefined' ? value : field[key];
+  };
+  const setRequired = () => {
+    if (typeof fieldSchema['required'] === 'undefined') {
+      field.required = !!uiSchema['required'];
+    }
+  };
+  const ctx = useFormBlockContext();
+
+  useEffect(() => {
+    if (ctx?.field) {
+      ctx.field.added = ctx.field.added || new Set();
+      ctx.field.added.add(fieldSchema.name);
+    }
+  });
+  // TODO: 初步适配
+  useEffect(() => {
+    if (!uiSchema) {
+      return;
+    }
+
+    setFieldProps('content', uiSchema['x-content']);
+    setFieldProps('title', uiSchema.title);
+    setFieldProps('description', uiSchema.description);
+    if (ctx?.form) {
+      const defaultVal = isAllowToSetDefaultValue() ? fieldSchema.default || defaultValue : undefined;
+      defaultVal !== null && defaultVal !== undefined && setFieldProps('initialValue', defaultVal);
+    }
+
+    if (!field.validator && (uiSchema['x-validator'] || fieldSchema['x-validator'])) {
+      const concatSchema = concat([], uiSchema['x-validator'] || [], fieldSchema['x-validator'] || []);
+      field.validator = concatSchema;
+    }
+    if (fieldSchema['x-disabled'] === true) {
+      field.disabled = true;
+    }
+    if (fieldSchema['x-read-pretty'] === true) {
+      field.readPretty = true;
+    }
+    setRequired();
+    // @ts-ignore
+    field.dataSource = uiSchema.enum;
+    const originalProps = compile(uiSchema['x-component-props']) || {};
+    const componentProps = merge(originalProps, field.componentProps || {});
+    field.component = [Component, componentProps];
+  }, [JSON.stringify(uiSchema)]);
+  if (!uiSchema) {
+    return null;
+  }
+  return <Component {...props} />;
+};
+
+export const CollectionField = connect((props) => {
+  const fieldSchema = useFieldSchema();
+  return (
+    <CollectionFieldProvider name={fieldSchema.name}>
+      <CollectionFieldInternalField {...props} />
+    </CollectionFieldProvider>
+  );
+});
+
+export const uiComponent = (isMobile, uiSchema) => {
+  const isMobileComponent = canMobileField(uiSchema['x-component']);
+  if (isMobile && isMobileComponent) {
+    return isMobileComponent;
+  } else {
+    return uiSchema['x-component'];
+  }
+};
+
+CollectionField.displayName = 'CollectionField';

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/collection-field/index.ts

@@ -0,0 +1 @@
+export * from './CollectionField';

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/image-search/hooks/useSelect.ts

@@ -1,7 +1,8 @@
+import { useMemo } from 'react';
 import { findFilterTargets, mergeFilter, useCollection, useFilterBlock } from '@tachybase/client';
 import { useFieldSchema } from '@tachybase/schema';
+
 import _ from 'lodash';
-import { useMemo } from 'react';
 
 export const useGetSelected = () => {
   const fieldSchema = useFieldSchema();
@@ -65,9 +66,3 @@ export const useGetSelected = () => {
     onSelected,
   };
 };
-
-export const useIsMobile = () => {
-  const fieldSchema = useFieldSchema();
-  const isMobile = Object.values(fieldSchema.root.properties).some((value) => value['x-component'] === 'MContainer');
-  return isMobile;
-};

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/index.ts

@@ -10,3 +10,4 @@ export * from './tab-search';
 export * from './notice';
 export * from './form';
 export * from './antd-mobile';
+export * from './collection-field';

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/hooks/useIsMobile.ts

@@ -1,7 +1,8 @@
 import { useContext } from 'react';
+
 import { MobileContext } from '../provider/MobileProvider';
 
 export const useIsMobile = () => {
   const ctx = useContext(MobileContext);
-  return ctx.isMobile;
+  return ctx?.isMobile;
 };

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/index.ts

@@ -1,3 +1,5 @@
 export * from './initializers';
 export * from './components';
 export * from './scopes';
+export * from './hooks';
+export * from './provider';

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/provider/MobileProvider.tsx

@@ -1,6 +1,6 @@
 import React, { createContext } from 'react';
 
-export const MobileContext = createContext<any>({});
+export const MobileContext = createContext<any>({ isMobile: false });
 
 export const MobileProvider = (props) => {
   return <MobileContext.Provider value={{ isMobile: true }}> {props.children}</MobileContext.Provider>;

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/provider/index.ts

@@ -0,0 +1 @@
+export * from './MobileProvider';