From 9d98941267cc92b6e9e94e794a257079b39956e1 Mon Sep 17 00:00:00 2001 From: wjh Date: Fri, 7 Jun 2024 16:12:49 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E5=BF=AB=E9=80=9F=E6=B7=BB=E5=8A=A0=E5=92=8C=E5=BC=B9=E7=AA=97?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8A=9F=E8=83=BD=20(#1141)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/1141 Reviewed-by: sealday Co-authored-by: wjh Co-committed-by: wjh --- .../todos/component/TabDuplicateItem.tsx | 1 - .../antd-mobile/Select/AntdPopupContext.tsx | 7 - .../antd-mobile/Select/AntdSelect.tsx | 244 +++++++++--------- .../antd-mobile/Select/CreateRecordAction.tsx | 78 ++++-- .../components/antd-mobile/Select/Select.tsx | 69 ++--- .../antd-mobile/Select/hook/hooks.ts | 23 -- 6 files changed, 207 insertions(+), 215 deletions(-) delete mode 100644 packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/AntdPopupContext.tsx delete mode 100644 packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/hook/hooks.ts diff --git a/packages/plugins/@hera/plugin-approval-mobile/src/client/approval/todos/component/TabDuplicateItem.tsx b/packages/plugins/@hera/plugin-approval-mobile/src/client/approval/todos/component/TabDuplicateItem.tsx index eda45ffc8..0d512ce40 100644 --- a/packages/plugins/@hera/plugin-approval-mobile/src/client/approval/todos/component/TabDuplicateItem.tsx +++ b/packages/plugins/@hera/plugin-approval-mobile/src/client/approval/todos/component/TabDuplicateItem.tsx @@ -6,7 +6,6 @@ import { Space } from 'antd-mobile'; import { ApprovalReachDataType } from '../../component/ApprovalReachDataType'; import { ApprovalTemplateType } from '../../component/ApprovalTemplateType'; -import { PendingStatus } from '../../constants'; import { useTodosContext } from '../provider/todosContext'; import { TabApplicantType } from './TabApplicantType'; import { TabApprovalItem } from './TabApprovalItem'; diff --git a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/AntdPopupContext.tsx b/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/AntdPopupContext.tsx deleted file mode 100644 index 1bf178f8d..000000000 --- a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/AntdPopupContext.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { createContext, useContext } from 'react'; - -export const AntdPopupContext = createContext({}); - -export const useAntdPopupContext = () => { - return useContext(AntdPopupContext); -}; diff --git a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/AntdSelect.tsx b/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/AntdSelect.tsx index 44e98caea..f1a5aea0b 100644 --- a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/AntdSelect.tsx +++ b/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/AntdSelect.tsx @@ -1,25 +1,27 @@ import React, { useEffect, useState } from 'react'; -import { observer, RecursionField, useField, useFieldSchema, useForm } from '@tachybase/schema'; +import { observer, RecursionField, Schema, useField, useFieldSchema, useForm } from '@tachybase/schema'; import { Button, CheckList, Divider, Modal, PickerView, Popup, SearchBar, Space, Tag, Toast } from 'antd-mobile'; -import { MInput } from '../Input'; - import './style'; import { BlockItem, - CollectionProvider_deprecated, + CollectionProvider, + SchemaComponent, useAPIClient, + useCollection, + useCollectionField, useCollectionManager, useDesignable, useRequest, } from '@tachybase/client'; import { isArray } from '@tachybase/utils/client'; +import { getMobileColor } from '../../../CustomColor'; +import { MobileProvider } from '../../../provider'; +import { MInput } from '../Input'; import { CreateRecordAction } from './CreateRecordAction'; -import { useInsertSchema } from './hook/hooks'; -import schema from './schema'; import { useStyles } from './style'; export const AntdSelect = observer((props) => { @@ -30,13 +32,21 @@ export const AntdSelect = observer((props) => { const [options, setOptions] = useState([]); const fieldSchema = useFieldSchema(); const cm = useCollectionManager(); - const [visibleValue, setVisibleValue] = useState({}); + const collection = useCollection(); const [filter, setFilter] = useState(service?.params?.filter); const api = useAPIClient(); - const field = useField(); - const { insertAfterBegin } = useDesignable(); - const insertAddNewer = useInsertSchema('AddNewer', fieldSchema, insertAfterBegin); const [selectValue, setSelectValue] = useState(value); + const fieldNamesLabel = fieldNames?.label || 'label'; + const fieldNamesValue = fieldNames?.value || 'value'; + let inputValue = ''; + if (isArray(value)) { + value.forEach((item, index) => { + inputValue += `${item.label}${value.length - 1 === index ? '' : ','}`; + }); + } else if (value && typeof value === 'object') { + inputValue = value[fieldNamesLabel]; + } + const { data, run } = useRequest( { resource: collectionName, @@ -57,8 +67,8 @@ export const AntdSelect = observer((props) => { const dataOption = data['data']?.map((value) => { return { ...value, - label: value[fieldNames.label], - value: value[fieldNames.value], + label: value[fieldNamesLabel], + value: value[fieldNamesValue], }; }); setOptions(dataOption); @@ -71,13 +81,12 @@ export const AntdSelect = observer((props) => { } else { const field = cm.getCollectionField(fieldSchema['x-collection-field']); const data = field.uiSchema?.enum; - setVisibleValue(data.find((item) => item.value === value) || ''); setOptions(data); } }; - const addData = () => { - api + const addData = (data) => { + data[fieldNamesLabel] = api .request({ url: collectionName + ':create', method: 'post', @@ -96,7 +105,7 @@ export const AntdSelect = observer((props) => { }); } const paramsFilter = { ...filter }; - delete paramsFilter[fieldNames.label]; + delete paramsFilter[fieldNamesLabel]; setFilter(paramsFilter); setSearchValue(''); setPopupVisible(false); @@ -107,131 +116,108 @@ export const AntdSelect = observer((props) => { }; const quickAdd = () => { const data = {}; - data[fieldNames.label] = searchValue; - addData(); - }; - const modalAdd = () => { - const collectionField = cm.getCollectionField(fieldSchema['x-collection-field']); - // console.log('🚀 ~ modalAdd ~ collectionField:', collectionField); - const targetCollection = cm.getCollection(collectionField?.target); - - // insertAddNewer(schema.AddNewer); - // const props = { - // fieldSchema, - // field, - // targetCollection, - // }; - Modal.show({ - content: ( - - { - return s['x-component'] === 'AssociationField.AddNewer'; - }} - /> - - ), - showCloseButton: true, - }); + data[fieldNamesLabel] = searchValue; + addData(data); }; return ( - - {!value || typeof value === 'object' ? ( + +
{ + if (fieldSchema['x-disabled']) return; setPopupVisible(true); checkedPopup(); }} style={{ color: '#c5c5c5' }} > - {isArray(value) && value.length ? ( - value.map((item, index) => ( - {`${item.label}${value.length - 1 === index ? '' : ','}`} - )) + {value?.length || (value && !isArray(value)) ? ( + ) : ( - {value?.label || '请选择内容'} + {fieldSchema['x-disabled'] ? '' : '请选择内容'} )}
- ) : ( - {value?.['label']} - )} + + + { + const paramsFilter = { ...filter }; + paramsFilter[fieldNamesLabel] = { $includes: value }; + setFilter(paramsFilter); + setSearchValue(value); + }} + /> + {searchValue && addMode === 'quickAdd' ? ( + + + 创建{searchValue} + + ) : null} + + {multiple || mode === 'multiple' ? ( + { + if (!value.length) { + setSelectValue(null); + return; + } + const filterValue = options.filter((item) => value.includes(item.value)); + setSelectValue(filterValue); + }} + > + {options.map((item, index) => { + return ( + + {item.label} + + ); + })} + + ) : ( + { + const changeValue = options.find((item) => item['value'] === value[0]); + setSelectValue(changeValue); + }} + /> + )} - - { - const paramsFilter = { ...filter }; - paramsFilter[fieldNames.label] = { $includes: value }; - setFilter(paramsFilter); - setSearchValue(value); - }} - /> - {searchValue && addMode === 'quickAdd' ? ( - - + 创建{searchValue} - - ) : null} - - {multiple || mode === 'multiple' ? ( - { - if (!value.length) { - setSelectValue(null); - return; - } - const filterValue = options.filter((item) => value.includes(item.value)); - setSelectValue(filterValue); - }} - > - {options.map((item, index) => { - return ( - - {item.label} - - ); - })} - - ) : ( - { - const changeValue = options.find((item) => item['value'] === value[0]); - setSelectValue(changeValue); - }} - /> - )} - - - {/* {addMode === 'modalAdd' ? ( - - ) : null} */} - - - - - + + {addMode === 'modalAdd' ? ( + + ) : null} + + + + + + + ); }); diff --git a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/CreateRecordAction.tsx b/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/CreateRecordAction.tsx index fea4a2e6e..b01e44837 100644 --- a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/CreateRecordAction.tsx +++ b/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/CreateRecordAction.tsx @@ -1,29 +1,55 @@ import React, { useState } from 'react'; -import { - CollectionProvider, - CollectionProvider_deprecated, - useActionContext, - useCollectionManager, - useCollectionManager_deprecated, -} from '@tachybase/client'; -import { RecursionField } from '@tachybase/schema'; +import { css, SchemaComponentOptions, useApp, useCollection } from '@tachybase/client'; +import { observer, RecursionField, useField, useFieldSchema } from '@tachybase/schema'; -import { useInsertSchema } from './hook/hooks'; -import schema from './schema'; +import { Button, CenterPopup, Modal, Popup } from 'antd-mobile'; -export const CreateRecordAction = ({ field, fieldSchema, targetCollection }) => { - const [currentCollection, setCurrentCollection] = useState(targetCollection?.name); - const [currentDataSource, setCurrentDataSource] = useState(targetCollection?.dataSource); - return ( - - { - return s['x-component'] === 'AssociationField.AddNewer'; - }} - /> - - ); -}; +import { MobileProvider } from '../../../provider'; + +export const CreateRecordAction = observer( + (props) => { + const { fieldSchema } = props as any; + + const [visible, setVisible] = useState(false); + const addNew = fieldSchema.reduceProperties((buf, schema) => { + const found = schema.reduceProperties((buf, schema) => { + if (schema['x-component'] === 'AssociationField.AddNewer') { + return schema; + } + return buf; + }); + if (found) { + return found; + } + return buf; + }, {}); + const modalAdd = () => { + setVisible(true); + }; + return ( +
+ + + { + setVisible(false); + }} + className={css` + .adm-popup-body { + height: 80vh; + overflow: auto; + } + `} + > + + + + +
+ ); + }, + { displayName: 'CreateRecordAction' }, +); diff --git a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/Select.tsx b/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/Select.tsx index ce2d48507..6cd76d0f5 100644 --- a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/Select.tsx +++ b/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/Select.tsx @@ -15,48 +15,59 @@ export const MSelect = connect( const fieldSchema = useFieldSchema(); const cm = useCollectionManager(); const collection = cm.getCollection(fieldSchema['x-collection-field']); + const field = useField(); + const collectionField = useCollectionField(); + const dataSource = field.dataSource || collectionField?.uiSchema.enum || []; + if (collection) { filterProps['collectionName'] = collection.name; } + if (typeof filterProps['value'] !== 'object') { + filterProps['value'] = dataSource.filter((item) => item.value.toString() === filterProps['value']); + } return { ...filterProps }; }), mapReadPretty((props) => { const { value, fieldNames } = props; - const isCollectionField = typeof value === 'object' && fieldNames; - if (isCollectionField) { - const isArrayField = isArray(value); - return isArrayField ? ( -
- {value.map((item, index) => ( - {`${item?.[fieldNames.label] || ''}${value.length - 1 === index ? '' : ','}`} - ))} -
- ) : ( - {value?.[fieldNames.label] || ''} - ); - } else { - const field = useField(); - const collectionField = useCollectionField(); - const dataSource = field.dataSource || collectionField?.uiSchema.enum || []; - const options = - typeof value === 'object' - ? value - .map((item) => { - if (dataSource.find((dataItem) => dataItem.value === item.value)) { - return item; - } - }) - .filter(Boolean) - : dataSource.filter((item) => item.value.toString() === value); + const collectionField = useCollectionField(); + const isSlectField = ['multipleSelect', 'select'].includes(collectionField.interface); + const field = useField(); + const dataSource = field.dataSource || collectionField?.uiSchema.enum || []; + const fieldNamesLabel = fieldNames?.label || 'label'; + if (isSlectField) { + const option = []; + if (!isArray(value)) { + if (typeof value === 'object') { + option.push(value); + } else { + option.push(dataSource.find((item) => item.value === value)); + } + } else { + option.push(...value); + } return (
- {options.map((option, key) => ( - - {option.label} + {option.map((item, index) => ( + + {item.label} ))}
); + } else { + let redValue = ''; + if (isArray(value)) { + redValue = value.reduce((prev, curr) => { + return prev + curr[fieldNamesLabel]; + }, ''); + } else { + redValue = value[fieldNamesLabel]; + } + return ( +
+ {redValue} +
+ ); } }), ); diff --git a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/hook/hooks.ts b/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/hook/hooks.ts deleted file mode 100644 index 22f41f1a3..000000000 --- a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/hook/hooks.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { useCallback } from 'react'; -import { useDesignable } from '@tachybase/client'; -import { GeneralField, reaction, useField, useFieldSchema } from '@tachybase/schema'; -import { flatten, getValuesByPath } from '@tachybase/utils/client'; - -import _, { isString } from 'lodash'; -import cloneDeep from 'lodash/cloneDeep'; - -export const useInsertSchema = (component, fieldSchema, insertAfterBegin) => { - const insert = (ss) => { - const schema = fieldSchema.reduceProperties((buf, s) => { - if (s['x-component'] === 'AssociationField.' + component) { - return s; - } - return buf; - }, null); - if (!schema) { - insertAfterBegin(cloneDeep(ss)); - } - }; - - return insert; -};