fix: 修复手机端表单使用相对应的组件 (#1054)
Reviewed-on: daoyoucloud/tachybase#1054 Co-authored-by: wjh <wwwjh0710@163.com> Co-committed-by: wjh <wwwjh0710@163.com>
This commit is contained in:
parent
f3353379ce
commit
502ba8f21c
@ -1,17 +1,22 @@
|
|||||||
import React, { createContext, useEffect, useState } from 'react';
|
import React, { createContext, useContext, useEffect, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
CollectionProvider_deprecated,
|
CollectionProvider_deprecated,
|
||||||
|
parseCollectionName,
|
||||||
RemoteSchemaComponent,
|
RemoteSchemaComponent,
|
||||||
SchemaComponent,
|
SchemaComponent,
|
||||||
SchemaComponentContext,
|
SchemaComponentContext,
|
||||||
parseCollectionName,
|
|
||||||
useAPIClient,
|
useAPIClient,
|
||||||
} from '@tachybase/client';
|
} from '@tachybase/client';
|
||||||
import { useContext } from 'react';
|
|
||||||
import { NavBar } from 'antd-mobile';
|
import { NavBar } from 'antd-mobile';
|
||||||
import { useNavigate, useParams } from 'react-router-dom';
|
import { useNavigate, useParams } from 'react-router-dom';
|
||||||
|
|
||||||
import { useTranslation } from '../../locale';
|
import { useTranslation } from '../../locale';
|
||||||
|
|
||||||
import '../../style/style.css';
|
import '../../style/style.css';
|
||||||
|
|
||||||
|
import { MobileProvider } from '@tachybase/plugin-mobile-client/client';
|
||||||
|
|
||||||
import { APPROVAL_ACTION_STATUS } from '../../constants';
|
import { APPROVAL_ACTION_STATUS } from '../../constants';
|
||||||
import { useCreateSubmit } from '../hook/useCreateSubmit';
|
import { useCreateSubmit } from '../hook/useCreateSubmit';
|
||||||
|
|
||||||
@ -41,21 +46,28 @@ export const ViewActionInitiationsContent = () => {
|
|||||||
const [dataSource, name] = parseCollectionName(formConfig.config.collection);
|
const [dataSource, name] = parseCollectionName(formConfig.config.collection);
|
||||||
const resSchema = {
|
const resSchema = {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'MPage',
|
'x-component': 'MobileProvider',
|
||||||
'x-designer': 'MPage.Designer',
|
|
||||||
'x-component-props': {},
|
|
||||||
properties: {
|
properties: {
|
||||||
Approval: {
|
page: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-decorator': 'CollectionProvider_deprecated',
|
'x-component': 'MPage',
|
||||||
'x-decorator-props': {
|
'x-designer': 'MPage.Designer',
|
||||||
name,
|
'x-decorator': 'MobileProvider',
|
||||||
dataSource,
|
'x-component-props': {},
|
||||||
},
|
properties: {
|
||||||
'x-component': 'RemoteSchemaComponent',
|
Approval: {
|
||||||
'x-component-props': {
|
type: 'void',
|
||||||
uid: formConfig.config.applyForm,
|
'x-decorator': 'CollectionProvider_deprecated',
|
||||||
noForm: true,
|
'x-decorator-props': {
|
||||||
|
name,
|
||||||
|
dataSource,
|
||||||
|
},
|
||||||
|
'x-component': 'RemoteSchemaComponent',
|
||||||
|
'x-component-props': {
|
||||||
|
uid: formConfig.config.applyForm,
|
||||||
|
noForm: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -86,6 +98,7 @@ export const ViewActionInitiationsContent = () => {
|
|||||||
ApplyActionStatusProvider: ContextInitiationsApprovalStatusProvider,
|
ApplyActionStatusProvider: ContextInitiationsApprovalStatusProvider,
|
||||||
ActionBarProvider,
|
ActionBarProvider,
|
||||||
WithdrawActionProvider: WithdrawActionProvider,
|
WithdrawActionProvider: WithdrawActionProvider,
|
||||||
|
MobileProvider,
|
||||||
}}
|
}}
|
||||||
scope={{
|
scope={{
|
||||||
useSubmit: useCreateSubmit,
|
useSubmit: useCreateSubmit,
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useContext, useEffect, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
RemoteSchemaComponent,
|
RemoteSchemaComponent,
|
||||||
SchemaComponent,
|
SchemaComponent,
|
||||||
@ -11,24 +11,28 @@ import {
|
|||||||
} from '@tachybase/client';
|
} from '@tachybase/client';
|
||||||
import { DetailsBlockProvider, FlowContext } from '@tachybase/plugin-workflow/client';
|
import { DetailsBlockProvider, FlowContext } from '@tachybase/plugin-workflow/client';
|
||||||
import { useFieldSchema, useForm } from '@tachybase/schema';
|
import { useFieldSchema, useForm } from '@tachybase/schema';
|
||||||
|
|
||||||
import { Result, Spin } from 'antd';
|
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 { NavBar, Skeleton, TabBar } from 'antd-mobile';
|
||||||
|
import { FileOutline, UserContactOutline } from 'antd-mobile-icons';
|
||||||
import { useNavigate, useParams } from 'react-router-dom';
|
import { useNavigate, useParams } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { ContextApprovalExecution } from '../../context/ApprovalExecution';
|
||||||
import { FormBlockProvider } from '../../context/FormBlock';
|
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 { ActionBarProvider } from '../provider/ActionBar';
|
||||||
import { ApplyActionStatusProvider } from '../provider/ApplyActionStatus';
|
import { ApplyActionStatusProvider } from '../provider/ApplyActionStatus';
|
||||||
import { WithdrawActionProvider } from '../provider/WithdrawAction';
|
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 '../../style/style.css';
|
||||||
|
|
||||||
|
import { MobileProvider } from '@tachybase/plugin-mobile-client/client';
|
||||||
|
|
||||||
export const ViewActionUserInitiationsContent = () => {
|
export const ViewActionUserInitiationsContent = () => {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@ -118,18 +122,25 @@ export const ViewActionUserInitiationsContent = () => {
|
|||||||
const UserInitiationsComponent = (applyDetail, t, currContext) => {
|
const UserInitiationsComponent = (applyDetail, t, currContext) => {
|
||||||
const formContextSchema = {
|
const formContextSchema = {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'MPage',
|
'x-component': 'MobileProvider',
|
||||||
'x-designer': 'MPage.Designer',
|
|
||||||
'x-component-props': {},
|
|
||||||
properties: {
|
properties: {
|
||||||
Approval: {
|
page: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-decorator': 'SchemaComponentContextProvider',
|
'x-component': 'MPage',
|
||||||
'x-decorator-props': { designable: false },
|
'x-designer': 'MPage.Designer',
|
||||||
'x-component': 'RemoteSchemaComponent',
|
'x-decorator': 'MobileProvider',
|
||||||
'x-component-props': {
|
'x-component-props': {},
|
||||||
uid: applyDetail,
|
properties: {
|
||||||
noForm: true,
|
Approval: {
|
||||||
|
type: 'void',
|
||||||
|
'x-decorator': 'SchemaComponentContextProvider',
|
||||||
|
'x-decorator-props': { designable: false },
|
||||||
|
'x-component': 'RemoteSchemaComponent',
|
||||||
|
'x-component-props': {
|
||||||
|
uid: applyDetail,
|
||||||
|
noForm: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -137,14 +148,20 @@ const UserInitiationsComponent = (applyDetail, t, currContext) => {
|
|||||||
|
|
||||||
const approvalSchema = {
|
const approvalSchema = {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'MPage',
|
'x-component': 'MobileProvider',
|
||||||
'x-designer': 'MPage.Designer',
|
|
||||||
'x-component-props': {},
|
|
||||||
properties: {
|
properties: {
|
||||||
process: {
|
page: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-decorator': 'CardItem',
|
'x-component': 'MPage',
|
||||||
'x-component': 'ApprovalCommon.ViewComponent.MApprovalProcess',
|
'x-designer': 'MPage.Designer',
|
||||||
|
'x-component-props': {},
|
||||||
|
properties: {
|
||||||
|
process: {
|
||||||
|
type: 'void',
|
||||||
|
'x-decorator': 'CardItem',
|
||||||
|
'x-component': 'ApprovalCommon.ViewComponent.MApprovalProcess',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -160,6 +177,7 @@ const UserInitiationsComponent = (applyDetail, t, currContext) => {
|
|||||||
ApplyActionStatusProvider,
|
ApplyActionStatusProvider,
|
||||||
WithdrawActionProvider,
|
WithdrawActionProvider,
|
||||||
DetailsBlockProvider,
|
DetailsBlockProvider,
|
||||||
|
MobileProvider,
|
||||||
}}
|
}}
|
||||||
scope={{
|
scope={{
|
||||||
useForm,
|
useForm,
|
||||||
|
@ -1,8 +1,10 @@
|
|||||||
import { joinCollectionName, useAPIClient, useBlockRequestContext, useCollection_deprecated } from '@tachybase/client';
|
import { joinCollectionName, useAPIClient, useBlockRequestContext, useCollection_deprecated } from '@tachybase/client';
|
||||||
import { useField, useForm } from '@tachybase/schema';
|
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 { Toast } from 'antd-mobile';
|
||||||
|
import { useNavigate, useParams } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { APPROVAL_ACTION_STATUS } from '../../constants';
|
||||||
|
|
||||||
export function useCreateSubmit() {
|
export function useCreateSubmit() {
|
||||||
const from = useForm();
|
const from = useForm();
|
||||||
@ -28,7 +30,6 @@ export function useCreateSubmit() {
|
|||||||
workflowId: workflowId,
|
workflowId: workflowId,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
console.log('🚀 ~ res ~ res:', res);
|
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
Toast.show({
|
Toast.show({
|
||||||
icon: 'success',
|
icon: 'success',
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import React, { useContext, useEffect, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
RemoteSchemaComponent,
|
RemoteSchemaComponent,
|
||||||
SchemaComponent,
|
SchemaComponent,
|
||||||
@ -7,26 +8,30 @@ import {
|
|||||||
useRecord,
|
useRecord,
|
||||||
useRequest,
|
useRequest,
|
||||||
} from '@tachybase/client';
|
} 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 { 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 { 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 { useNavigate, useParams } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { ContextApprovalExecution } from '../../context/ApprovalExecution';
|
||||||
|
import { FormBlockProvider } from '../../context/FormBlock';
|
||||||
import { SchemaComponentContextProvider } from '../../context/SchemaComponent';
|
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 { useApprovalDetailBlockProps } from '../hook/useApprovalDetailBlockProps';
|
||||||
import { useApprovalFormBlockProps } from '../hook/useApprovalFormBlockProps';
|
import { useApprovalFormBlockProps } from '../hook/useApprovalFormBlockProps';
|
||||||
import { useSubmit } from '../hook/useSubmit';
|
import { useSubmit } from '../hook/useSubmit';
|
||||||
import { CouponOutline, FileOutline, ScanCodeOutline, UserContactOutline } from 'antd-mobile-icons';
|
|
||||||
import { ActionBarProvider } from '../provider/ActionBarProvider';
|
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 '../../style/style.css';
|
||||||
|
|
||||||
|
import { MobileProvider } from '@tachybase/plugin-mobile-client/client';
|
||||||
|
|
||||||
// 审批-待办-查看: 内容
|
// 审批-待办-查看: 内容
|
||||||
export const ViewActionTodosContent = () => {
|
export const ViewActionTodosContent = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@ -130,18 +135,25 @@ export const ViewActionTodosContent = () => {
|
|||||||
const todosComponent = (applyDetail, t, currContext) => {
|
const todosComponent = (applyDetail, t, currContext) => {
|
||||||
const formContextSchema = {
|
const formContextSchema = {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'MPage',
|
'x-component': 'MobileProvider',
|
||||||
'x-designer': 'MPage.Designer',
|
|
||||||
'x-component-props': {},
|
|
||||||
properties: {
|
properties: {
|
||||||
Approval: {
|
page: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-decorator': 'SchemaComponentContextProvider',
|
'x-component': 'MPage',
|
||||||
'x-decorator-props': { designable: false },
|
'x-designer': 'MPage.Designer',
|
||||||
'x-component': 'RemoteSchemaComponent',
|
'x-decorator': 'MobileProvider',
|
||||||
'x-component-props': {
|
'x-component-props': {},
|
||||||
uid: applyDetail,
|
properties: {
|
||||||
noForm: true,
|
Approval: {
|
||||||
|
type: 'void',
|
||||||
|
'x-decorator': 'SchemaComponentContextProvider',
|
||||||
|
'x-decorator-props': { designable: false },
|
||||||
|
'x-component': 'RemoteSchemaComponent',
|
||||||
|
'x-component-props': {
|
||||||
|
uid: applyDetail,
|
||||||
|
noForm: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -149,14 +161,20 @@ const todosComponent = (applyDetail, t, currContext) => {
|
|||||||
|
|
||||||
const approvalSchema = {
|
const approvalSchema = {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'MPage',
|
'x-component': 'MobileProvider',
|
||||||
'x-designer': 'MPage.Designer',
|
|
||||||
'x-component-props': {},
|
|
||||||
properties: {
|
properties: {
|
||||||
process: {
|
page: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-decorator': 'CardItem',
|
'x-component': 'MPage',
|
||||||
'x-component': 'ApprovalCommon.ViewComponent.MApprovalProcess',
|
'x-designer': 'MPage.Designer',
|
||||||
|
'x-component-props': {},
|
||||||
|
properties: {
|
||||||
|
process: {
|
||||||
|
type: 'void',
|
||||||
|
'x-decorator': 'CardItem',
|
||||||
|
'x-component': 'ApprovalCommon.ViewComponent.MApprovalProcess',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -173,6 +191,7 @@ const todosComponent = (applyDetail, t, currContext) => {
|
|||||||
ApprovalFormBlockProvider: ApprovalFormBlockDecorator,
|
ApprovalFormBlockProvider: ApprovalFormBlockDecorator,
|
||||||
DetailsBlockProvider,
|
DetailsBlockProvider,
|
||||||
TabBar,
|
TabBar,
|
||||||
|
MobileProvider,
|
||||||
}}
|
}}
|
||||||
scope={{
|
scope={{
|
||||||
useApprovalDetailBlockProps,
|
useApprovalDetailBlockProps,
|
||||||
|
@ -1,46 +1,49 @@
|
|||||||
import { SchemaComponentOptions } from '@tachybase/client';
|
|
||||||
import React, { PropsWithChildren } from 'react';
|
import React, { PropsWithChildren } from 'react';
|
||||||
|
import { SchemaComponentOptions } from '@tachybase/client';
|
||||||
|
|
||||||
import {
|
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,
|
ImageSearchInitializer,
|
||||||
ImageSearchProvider,
|
|
||||||
ImageSearchItemIntializer,
|
ImageSearchItemIntializer,
|
||||||
ImageSearchItemToolbar,
|
ImageSearchItemToolbar,
|
||||||
ImageSearchItemView,
|
ImageSearchItemView,
|
||||||
|
ImageSearchProvider,
|
||||||
|
ImageSearchView,
|
||||||
|
MCheckbox,
|
||||||
|
MContainer,
|
||||||
|
MDatePicker,
|
||||||
|
MHeader,
|
||||||
|
MImageUploader,
|
||||||
|
MInput,
|
||||||
|
MMenu,
|
||||||
|
MMenuBlockInitializer,
|
||||||
|
MPage,
|
||||||
|
MRadio,
|
||||||
|
MSettings,
|
||||||
|
MSettingsBlockInitializer,
|
||||||
|
MTabBar,
|
||||||
NoticeBlock,
|
NoticeBlock,
|
||||||
NoticeBlockInitializer,
|
NoticeBlockInitializer,
|
||||||
useSwiperBlockProps,
|
SwiperBlock,
|
||||||
|
SwiperBlockInitializer,
|
||||||
|
SwiperPage,
|
||||||
|
TabSearch,
|
||||||
|
TabSearchBlockInitializer,
|
||||||
|
TabSearchCollapsibleInputItem,
|
||||||
|
TabSearchCollapsibleInputMItem,
|
||||||
|
TabSearchFieldItem,
|
||||||
|
TabSearchFieldMItem,
|
||||||
|
TabSearchFieldSchemaInitializerGadget,
|
||||||
|
TabSearchProvider,
|
||||||
|
useGridCardBlockItemProps,
|
||||||
|
useGridCardBlockProps,
|
||||||
usePropsOptionalImageSearchItemField,
|
usePropsOptionalImageSearchItemField,
|
||||||
usePropsRelatedImageSearchItemField,
|
usePropsRelatedImageSearchItemField,
|
||||||
|
useSwiperBlockProps,
|
||||||
useTabSearchFieldItemProps,
|
useTabSearchFieldItemProps,
|
||||||
useTabSearchFieldItemRelatedProps,
|
useTabSearchFieldItemRelatedProps,
|
||||||
MInput,
|
|
||||||
MCheckbox,
|
|
||||||
MDatePicker,
|
|
||||||
MRadio,
|
|
||||||
MImageUploader,
|
|
||||||
} from './schema';
|
} from './schema';
|
||||||
|
|
||||||
import './bridge';
|
import './bridge';
|
||||||
import './assets/svg';
|
import './assets/svg';
|
||||||
|
|
||||||
@ -83,6 +86,7 @@ export const MobileCore: React.FC<PropsWithChildren> = (props) => {
|
|||||||
MDatePicker,
|
MDatePicker,
|
||||||
MRadio,
|
MRadio,
|
||||||
MImageUploader,
|
MImageUploader,
|
||||||
|
CollectionField: CollectionField,
|
||||||
}}
|
}}
|
||||||
scope={{
|
scope={{
|
||||||
useGridCardBlockItemProps,
|
useGridCardBlockItemProps,
|
||||||
|
@ -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 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(
|
export const MDatePicker = connect(
|
||||||
(props) => {
|
(props) => {
|
||||||
@ -33,5 +34,10 @@ export const MDatePicker = connect(
|
|||||||
mapProps((props) => {
|
mapProps((props) => {
|
||||||
return { ...props };
|
return { ...props };
|
||||||
}),
|
}),
|
||||||
|
mapReadPretty((props) => {
|
||||||
|
const changeProps = { ...props };
|
||||||
|
changeProps.value = dayjs(props.value).format(props.dateFormat);
|
||||||
|
return <Input {...changeProps} readOnly />;
|
||||||
|
}),
|
||||||
);
|
);
|
||||||
export default MDatePicker;
|
export default MDatePicker;
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
import { useAPIClient } from '@tachybase/client';
|
import { useAPIClient } from '@tachybase/client';
|
||||||
import { connect, mapProps, mapReadPretty, useForm } from '@tachybase/schema';
|
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(
|
export const MImageUploader = connect(
|
||||||
(props) => {
|
(props) => {
|
||||||
@ -52,6 +53,18 @@ export const MImageUploader = connect(
|
|||||||
mapProps((props) => {
|
mapProps((props) => {
|
||||||
return { ...props };
|
return { ...props };
|
||||||
}),
|
}),
|
||||||
|
mapReadPretty((props) => {
|
||||||
|
return (
|
||||||
|
<ImageUploader
|
||||||
|
{...props}
|
||||||
|
disableUpload
|
||||||
|
showUpload={false}
|
||||||
|
upload={async () => {
|
||||||
|
return { url: '' };
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}),
|
||||||
);
|
);
|
||||||
export default MImageUploader;
|
export default MImageUploader;
|
||||||
|
|
||||||
|
@ -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';
|
import { Input, InputProps, TextArea, TextAreaProps } from 'antd-mobile';
|
||||||
|
|
||||||
type ComposedInput = React.FC<InputProps> & {
|
type ComposedInput = React.FC<InputProps> & {
|
||||||
@ -8,14 +10,20 @@ type ComposedInput = React.FC<InputProps> & {
|
|||||||
export const MInput: ComposedInput = connect(
|
export const MInput: ComposedInput = connect(
|
||||||
Input,
|
Input,
|
||||||
mapProps((props) => {
|
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(
|
const MTextArea = connect(
|
||||||
TextArea,
|
TextArea,
|
||||||
mapProps((props) => {
|
mapProps((props) => {
|
||||||
return { placeholder: '请输入内容', ...props };
|
return { ...props, placeholder: '请输入内容', clearable: true, style: { fontSize: '12px' } };
|
||||||
|
}),
|
||||||
|
mapReadPretty((props) => {
|
||||||
|
return <TextArea {...props} readOnly style={{ fontSize: '12px' }} />;
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -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';
|
@ -0,0 +1 @@
|
|||||||
|
export * from './CollectionField';
|
@ -1,7 +1,8 @@
|
|||||||
|
import { useMemo } from 'react';
|
||||||
import { findFilterTargets, mergeFilter, useCollection, useFilterBlock } from '@tachybase/client';
|
import { findFilterTargets, mergeFilter, useCollection, useFilterBlock } from '@tachybase/client';
|
||||||
import { useFieldSchema } from '@tachybase/schema';
|
import { useFieldSchema } from '@tachybase/schema';
|
||||||
|
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import { useMemo } from 'react';
|
|
||||||
|
|
||||||
export const useGetSelected = () => {
|
export const useGetSelected = () => {
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
@ -65,9 +66,3 @@ export const useGetSelected = () => {
|
|||||||
onSelected,
|
onSelected,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useIsMobile = () => {
|
|
||||||
const fieldSchema = useFieldSchema();
|
|
||||||
const isMobile = Object.values(fieldSchema.root.properties).some((value) => value['x-component'] === 'MContainer');
|
|
||||||
return isMobile;
|
|
||||||
};
|
|
||||||
|
@ -10,3 +10,4 @@ export * from './tab-search';
|
|||||||
export * from './notice';
|
export * from './notice';
|
||||||
export * from './form';
|
export * from './form';
|
||||||
export * from './antd-mobile';
|
export * from './antd-mobile';
|
||||||
|
export * from './collection-field';
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
|
|
||||||
import { MobileContext } from '../provider/MobileProvider';
|
import { MobileContext } from '../provider/MobileProvider';
|
||||||
|
|
||||||
export const useIsMobile = () => {
|
export const useIsMobile = () => {
|
||||||
const ctx = useContext(MobileContext);
|
const ctx = useContext(MobileContext);
|
||||||
return ctx.isMobile;
|
return ctx?.isMobile;
|
||||||
};
|
};
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
export * from './initializers';
|
export * from './initializers';
|
||||||
export * from './components';
|
export * from './components';
|
||||||
export * from './scopes';
|
export * from './scopes';
|
||||||
|
export * from './hooks';
|
||||||
|
export * from './provider';
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React, { createContext } from 'react';
|
import React, { createContext } from 'react';
|
||||||
|
|
||||||
export const MobileContext = createContext<any>({});
|
export const MobileContext = createContext<any>({ isMobile: false });
|
||||||
|
|
||||||
export const MobileProvider = (props) => {
|
export const MobileProvider = (props) => {
|
||||||
return <MobileContext.Provider value={{ isMobile: true }}> {props.children}</MobileContext.Provider>;
|
return <MobileContext.Provider value={{ isMobile: true }}> {props.children}</MobileContext.Provider>;
|
||||||
|
@ -0,0 +1 @@
|
|||||||
|
export * from './MobileProvider';
|
Loading…
Reference in New Issue
Block a user