diff --git a/.changeset/friendly-dingos-call.md b/.changeset/friendly-dingos-call.md new file mode 100644 index 000000000..b1b9d1996 --- /dev/null +++ b/.changeset/friendly-dingos-call.md @@ -0,0 +1,5 @@ +--- +"@hera/plugin-mobile": patch +--- + +新增mobile筛选类型 diff --git a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/swiper/SwiperFieldSettings.tsx b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/swiper/SwiperFieldSettings.tsx index 4a262e50f..f763763b7 100644 --- a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/swiper/SwiperFieldSettings.tsx +++ b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/swiper/SwiperFieldSettings.tsx @@ -73,7 +73,7 @@ export const SwiperFieldSettings = new SchemaSettings({ dn.refresh(); }; return { - title: t('SetShowfield'), + title: t('Set show field'), options, value: fieldSchema['x-component-props'].fieldValue, onChange, @@ -86,6 +86,7 @@ export const SwiperFieldSettings = new SchemaSettings({ useComponentProps() { const fieldSchema = useFieldSchema(); const { dn } = useDesignable(); + const { t } = useTranslation(); const options = []; for (let i = 1; i <= 20; i++) { options.push({ @@ -104,7 +105,7 @@ export const SwiperFieldSettings = new SchemaSettings({ dn.refresh(); }; return { - title: 'setFieldCount', + title: t('Set field count'), options, value: fieldSchema['x-component-props'].pageSize || 5, onChange, diff --git a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputItemAction.ts b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputItemAction.ts index 956cf49ae..c88648874 100644 --- a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputItemAction.ts +++ b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputItemAction.ts @@ -1,36 +1,74 @@ import { useMemo, useState } from 'react'; import { useFieldSchema } from '@nocobase/schema'; -import { useTranslation } from '../../../../locale'; -import { useCollection, useDesigner } from '@nocobase/client'; -import { isTabSearchCollapsibleInputItem } from '../../utils'; +import { useCollection, useCollectionManager, useDesignable, useDesigner } from '@nocobase/client'; +import { canBeDataField, canBeRelatedField, convertFormat, isTabSearchCollapsibleInputItem } from '../../utils'; import { useTabSearchCollapsibleInputItem } from './hooks'; +import { dayjs } from '@nocobase/utils/client'; export const useTabSearchCollapsibleInputItemAction = (props) => { const { onSelected } = useTabSearchCollapsibleInputItem(); const fieldSchema = useFieldSchema(); const collection = useCollection(); + const cm = useCollectionManager(); + const { dn } = useDesignable(); const collectionField = useMemo(() => collection?.getField(fieldSchema.name as any), [collection, fieldSchema.name]); const properties = fieldSchema.parent.properties; const Designer = useDesigner(); - const [value, setValue] = useState(''); const [customLabelKey, setCustomLabelKey] = useState(fieldSchema['name'] as string); - + const [fieldInterface, setFieldInterface] = useState(fieldSchema['x-component-props'].interface); + const defaultValue = canBeDataField(fieldInterface) + ? convertFormat(new Date()) + '&' + convertFormat(new Date()) + : ''; + const [value, setValue] = useState(defaultValue); const options = Object.values(properties) .map((option) => { if (isTabSearchCollapsibleInputItem(option['x-component'])) { return { label: option['title'], value: option['name'], + interface: option['x-component-props'].interface, }; } }) .filter(Boolean); const onSelect = (value) => { - onSelected([value], customLabelKey); + let time; + let filterKey = `${customLabelKey}.$includes`; + if (canBeDataField(fieldInterface)) { + time = value.split('&'); + filterKey = `${customLabelKey}.$dateBetween`; + } + if (canBeRelatedField(fieldInterface)) { + const label = fieldSchema['x-component-props']['fieldNames'].label; + const correlation = fieldSchema['x-component-props']['correlation']; + filterKey = `${correlation}.${label}.$includes`; + } + onSelected(time || [value], filterKey); }; - const onSelectChange = (label) => setCustomLabelKey(label as string); + const onSelectChange = (label) => { + const type = Object.values(properties).find((value) => value.name === label)['x-component-props'].interface; + if (canBeRelatedField(type)) { + const titleField = cm.getCollection(collection.name + '.' + label).titleField; + fieldSchema['x-component-props']['correlation'] = label; + fieldSchema['x-component-props']['fieldNames'] = { label: titleField }; + dn.emit('patch', { + schema: { + ['u-id']: fieldSchema['u-id'], + ['x-component-props']: fieldSchema['x-component-props'], + }, + }); + dn.refresh(); + } + setFieldInterface(type); + if (canBeDataField(type)) { + setValue(convertFormat(new Date()) + '&' + convertFormat(new Date())); + } else { + setValue(''); + } + setCustomLabelKey(label as string); + }; const onInputChange = (v) => { const inputValue = v.target?.value || v; setValue(inputValue); @@ -41,6 +79,20 @@ export const useTabSearchCollapsibleInputItemAction = (props) => { const onButtonClick = () => { onSelect(value); }; + const onDateClick = (time) => { + onSelect(time); + }; - return { collectionField, Designer, options, value, onSelectChange, onInputChange, onButtonClick, customLabelKey }; + return { + collectionField, + Designer, + options, + value, + onSelectChange, + onInputChange, + onButtonClick, + customLabelKey, + fieldInterface, + onDateClick, + }; }; diff --git a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputMItem.tsx b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputMItem.tsx index 8081d0e8b..da3fed830 100644 --- a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputMItem.tsx +++ b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputMItem.tsx @@ -2,24 +2,40 @@ import { SortableItem, withDynamicSchemaProps } from '@nocobase/client'; import { Grid } from 'antd-mobile'; import React from 'react'; import { useTabSearchCollapsibleInputItemAction } from './TabSearchCollapsibleInputItemAction'; -import { IButton, IInput, ISelect } from './TabSearchCollapsibleInputMItemChild'; +import { IButton, IDatePicker, IInput, ISelect } from './TabSearchCollapsibleInputMItemChild'; +import { canBeDataField } from '../../utils'; export const TabSearchCollapsibleInputMItem = withDynamicSchemaProps( (props) => { - const { collectionField, Designer, options, value, onSelectChange, onInputChange, onButtonClick, customLabelKey } = - useTabSearchCollapsibleInputItemAction(props); + const { + collectionField, + Designer, + options, + value, + onSelectChange, + onInputChange, + onButtonClick, + customLabelKey, + fieldInterface, + onDateClick, + } = useTabSearchCollapsibleInputItemAction(props); if (!collectionField) { return null; } - return ( - - + {canBeDataField(fieldInterface) ? ( + + ) : ( + <> + + + + )} ); diff --git a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputMItemChild.tsx b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputMItemChild.tsx index fd50bbcb1..b013dd08e 100644 --- a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputMItemChild.tsx +++ b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputMItemChild.tsx @@ -1,8 +1,9 @@ import React, { useState } from 'react'; import { useTranslation } from '../../../../locale'; -import { Grid, Divider, Picker, Input, Space, ActionSheet } from 'antd-mobile'; +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'; export const ISelect = (props) => { const { options, onChange, customLabelKey } = props; @@ -53,6 +54,43 @@ export const ISelect = (props) => { ) : null; }; +export const IDatePicker = (props) => { + const { options, value, onChange, onInputChange } = props; + const time = value.split('&'); + const [visible, setVisible] = useState(false); + return ( + 1 ? 3 : 4}> +
{ + setVisible(true); + }} + > + + + {time[0]} + + + - + + + {time[1]} + + +
+ setVisible(false)} + onClose={() => setVisible(false)} + onConfirm={(v) => { + onInputChange(convertFormat(v[0]) + '&' + convertFormat(v[1])); + onChange(convertFormat(v[0]) + '&' + convertFormat(v[1])); + }} + /> +
+ ); +}; + export const IInput = (props) => { const { options, value, onChange } = props; const { t } = useTranslation(); @@ -71,7 +109,6 @@ export const IInput = (props) => { export const IButton = (props) => { const { onClick } = props; const { t } = useTranslation(); - return ( {t('Search')} diff --git a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchFieldItemAction.ts b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchFieldItemAction.ts index 8025bfeae..014554780 100644 --- a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchFieldItemAction.ts +++ b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchFieldItemAction.ts @@ -15,7 +15,7 @@ export const useTabSearchFieldItemAction = (props) => { const labelKey = _labelKey || fieldSchema['x-component-props']?.fieldNames?.label || valueKey; const onSelect = (itemKey) => { const key = itemKey.keyPath?.[0] || itemKey; - onSelected([key], null, filterKey); + onSelected([key], filterKey); }; const fieldNames = { title: labelKey || valueKey, diff --git a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchFieldItemProps.ts b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchFieldItemProps.ts index 9c87c4436..fa5fb9679 100644 --- a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchFieldItemProps.ts +++ b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchFieldItemProps.ts @@ -8,7 +8,6 @@ import { canBeOptionalField } from '../../utils'; export const useTabSearchFieldItemProps = () => { const fieldSchema = useFieldSchema(); const collection = useCollection(); - const optionalFieldList = useOptionalFieldList(); const cm = useCollectionManager(); const collectionField = useMemo(() => collection?.getField(fieldSchema.name as any), [collection, fieldSchema.name]); diff --git a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/hooks.tsx b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/hooks.tsx index ba18fe794..448ed0daf 100644 --- a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/hooks.tsx +++ b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/hooks.tsx @@ -9,16 +9,13 @@ export const useTabSearchCollapsibleInputItem = () => { const { getDataBlocks } = useFilterBlock(); const collectionField = useMemo(() => collection?.getField(fieldSchema.name as any), [collection, fieldSchema.name]); - const onSelected = (value, customLabelKey?, filterKey?) => { + const onSelected = (value, filterKey) => { const { targets, uid } = findFilterTargets(fieldSchema); getDataBlocks().forEach((block) => { const target = targets.find((target) => target.uid === block.uid); if (!target) return; const key = `${uid}${fieldSchema.name}`; const param = block.service.params?.[0] || {}; - if (!collectionField?.target && customLabelKey) { - filterKey = `${customLabelKey}.$includes`; - } // 保留原有的 filter let storedFilter = block.service.params?.[1]?.filters || {}; if (value.length) { diff --git a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/create/createTabSearchItemSchema.ts b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/create/createTabSearchItemSchema.ts index b9154a863..0caacac5f 100644 --- a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/create/createTabSearchItemSchema.ts +++ b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/create/createTabSearchItemSchema.ts @@ -1,5 +1,5 @@ export const createTabSearchItemSchema = (options) => { - const { field, itemComponent, label, itemUseProps } = options; + const { field, itemComponent, label, itemUseProps, collection } = options; return { name: field.key, title: field.uiSchema?.title, @@ -17,6 +17,8 @@ export const createTabSearchItemSchema = (options) => { label, }, interface: field.interface, + collectionName: collection?.name, + correlation: field.name, }, properties: {}, }, diff --git a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/initializer/TabSearchFieldSchemaInitializer.tsx b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/initializer/TabSearchFieldSchemaInitializer.tsx index ebd22b3ff..175af229f 100644 --- a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/initializer/TabSearchFieldSchemaInitializer.tsx +++ b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/initializer/TabSearchFieldSchemaInitializer.tsx @@ -1,7 +1,7 @@ import { SchemaInitializer, SchemaInitializerItemType, useCollection, useCollectionManager } from '@nocobase/client'; import _ from 'lodash'; import { tval } from '../../../locale'; -import { canBeOptionalField, canBeRelatedField, canBeSearchField } from '../utils'; +import { canBeDataField, canBeOptionalField, canBeRelatedField, canBeSearchField } from '../utils'; import { createTabSearchItemSchema } from '../create/createTabSearchItemSchema'; import { useIsMobile } from '../components/field-item/hooks'; @@ -12,13 +12,19 @@ const textFieldsItem: SchemaInitializerItemType = { useChildren() { const collection = useCollection(); const associatedFields = collection.fields; + const cm = useCollectionManager(); const isMobield = useIsMobile(); const itemComponent = isMobield ? 'TabSearchCollapsibleInputMItem' : 'TabSearchCollapsibleInputItem'; const children = associatedFields .map((field) => { - if (canBeSearchField(field.interface) || (canBeOptionalField(field.interface) && !field['isForeignKey'])) { - const label = field.name; - return createTabSearchItemSchema({ field, itemComponent, label }); + if ( + !field['isForeignKey'] && + (canBeSearchField(field.interface) || canBeRelatedField(field.interface) || canBeDataField(field.interface)) + ) { + const label = canBeRelatedField(field.interface) + ? cm.getCollection(`${collection.name}.${field.name}`).titleField + : field.name; + return createTabSearchItemSchema({ field, itemComponent, label, collection }); } }) .filter(Boolean); diff --git a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/settings/TabSearchItemFieldSettings.tsx b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/settings/TabSearchItemFieldSettings.tsx index dbea2c112..99688c8cd 100644 --- a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/settings/TabSearchItemFieldSettings.tsx +++ b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/settings/TabSearchItemFieldSettings.tsx @@ -72,8 +72,12 @@ export const TabSearchItemFieldSettings = new SchemaSettings({ const { t } = useTranslation(); const cm = useCollectionManager(); const c = useCollection(); + const fieldCollection = fieldSchema['x-component-props']?.['collectionName']; + const correlation = fieldSchema['x-component-props']?.['correlation']; const collectionField = - c.getField(fieldSchema['name']) || cm.getCollectionField(fieldSchema['x-collection-field']); + c.getField(fieldSchema['name']) || + cm.getCollectionField(fieldSchema['x-collection-field']) || + cm.getCollection(fieldCollection + '.' + correlation); const compile = useCompile(); const { dn } = useDesignable(); const targetFields = collectionField?.target ? cm.getCollectionFields(collectionField?.target) : []; @@ -87,6 +91,7 @@ export const TabSearchItemFieldSettings = new SchemaSettings({ const schema = { ['x-uid']: fieldSchema['x-uid'], }; + const fieldNames = { ...collectionField?.uiSchema?.['x-component-props']?.['fieldNames'], ...fieldSchema['x-component-props']?.['fieldNames'], @@ -94,6 +99,7 @@ export const TabSearchItemFieldSettings = new SchemaSettings({ }; fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {}; fieldSchema['x-component-props']['fieldNames'] = fieldNames; + schema['x-component-props'] = fieldSchema['x-component-props']; dn.emit('patch', { schema, @@ -111,7 +117,10 @@ export const TabSearchItemFieldSettings = new SchemaSettings({ }, useVisible() { const fieldSchema = useFieldSchema(); - return !isTabSearchCollapsibleInputItem(fieldSchema['x-component']); + return ( + isTabSearchCollapsibleInputItem(fieldSchema['x-component']) || + fieldSchema['x-component-props']?.['correlation'] + ); }, }, ]; diff --git a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/utils.ts b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/utils.ts index 4f0a164ed..7c0713878 100644 --- a/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/utils.ts +++ b/packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/utils.ts @@ -1,5 +1,8 @@ +import { dayjs } from '@nocobase/utils/client'; + const canBeOptionalFields = ['select', 'multipleSelect', 'radioGroup', 'checkboxGroup']; const canBeRelatedFields = ['oho', 'obo', 'o2m', 'm2o', 'm2m']; +const canBeDataFields = ['datetime']; const canBeSearchFields = [ 'input', @@ -22,5 +25,9 @@ export const isTabSearchCollapsibleInputItem = (component: string) => export const canBeOptionalField = (_interface: string) => canBeOptionalFields.includes(_interface); export const canBeRelatedField = (_interface: string) => canBeRelatedFields.includes(_interface); - +export const canBeDataField = (_interface: string) => canBeDataFields.includes(_interface); export const canBeSearchField = (_interface: string) => canBeSearchFields.includes(_interface); + +export const convertFormat = (currentDate) => { + return dayjs(currentDate).format('YYYY-MM-DD'); +}; diff --git a/packages/plugins/@hera/plugin-mobile/src/locale/en-US.json b/packages/plugins/@hera/plugin-mobile/src/locale/en-US.json new file mode 100644 index 000000000..05b770a8b --- /dev/null +++ b/packages/plugins/@hera/plugin-mobile/src/locale/en-US.json @@ -0,0 +1,14 @@ +{ + "Choices fields":"Choices fields", + "Text fields":"Text fields", + "Generic properties":"Generic properties", + "Search":"Search", + "Please enter search content":"Please enter search content", + "Title field":"Title field", + "Set show field":"Set show field", + "Set field count":"Set field count", + "Configure field": "Configure field", + "Configure fields": "Configure fields", + "Configure columns": "Configure columns", + "Add block": "Add block" +} diff --git a/packages/plugins/@hera/plugin-mobile/src/locale/zh-CN.json b/packages/plugins/@hera/plugin-mobile/src/locale/zh-CN.json new file mode 100644 index 000000000..cac01aac6 --- /dev/null +++ b/packages/plugins/@hera/plugin-mobile/src/locale/zh-CN.json @@ -0,0 +1,14 @@ +{ + "Choices fields":"选择字段", + "Text fields":"文本字段", + "Generic properties":"通用属性", + "Search":"搜索", + "Please enter search content":"请输入查询内容", + "Title field":"标题字段", + "Set show field":"设置展示字段", + "Set field count":"设置展示数量", + "Configure field": "配置字段", + "Configure fields": "配置字段", + "Configure columns": "配置字段", + "Add block": "创建区块" +}