diff --git a/packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts b/packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts index aaf0e34ed..ed9d1f9e0 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts +++ b/packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts @@ -1,4 +1,5 @@ import { useMemo } from 'react'; +import { useCollection, useCollectionFields, useCollectionManager, useDataSource } from '@tachybase/client'; import { ArrayItems } from '@tachybase/components'; import { ISchema, useField, useFieldSchema } from '@tachybase/schema'; @@ -7,7 +8,7 @@ import { useTranslation } from 'react-i18next'; import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings'; import { useFormBlockContext } from '../../../../block-provider'; -import { useCollection_deprecated, useSortFields } from '../../../../collection-manager'; +import { useCollection_deprecated, useCollectionFieldsOptions, useSortFields } from '../../../../collection-manager'; import { removeNullCondition, useDesignable } from '../../../../schema-component'; import { defaultColumnCount, @@ -301,6 +302,10 @@ export const gridCardBlockSettings = new SchemaSettings({ }, }; }, + useVisible() { + const fieldSchema = useFieldSchema(); + return fieldSchema['x-decorator-props']?.['linkConfig']?.['link']; + }, }, { name: 'setInfiniteScroll', @@ -326,6 +331,58 @@ export const gridCardBlockSettings = new SchemaSettings({ }; }, }, + { + name: 'setLinkConfig', + type: 'modal', + useComponentProps() { + const { t } = useTranslation(); + const collection = useCollection(); + const fieldSchema = useFieldSchema(); + const fields = useSortFields(fieldSchema['x-decorator-props']?.['collection'] || collection.name); + const { dn } = useDesignable(); + const dataSource = useDataSource(); + return { + title: t('Set LinkConfig'), + schema: { + type: 'object', + title: 'Set LinkConfig', + properties: { + link: { + type: 'string', + title: t('Link'), + required: true, + 'x-decorator': 'FormItem', + 'x-component': 'Input', + default: fieldSchema['x-decorator-props']?.['linkConfig']?.['link'] || '', + }, + fields: { + type: 'object', + title: t('Field'), + 'x-decorator': 'FormItem', + 'x-component': 'Select', + enum: fields, + default: fieldSchema['x-decorator-props']?.['linkConfig']?.['fields'] || null, + 'x-component-props': { + multiple: true, + }, + }, + }, + }, + onSubmit: (value) => { + fieldSchema['x-decorator-props']['linkConfig'] = { + ...fieldSchema['x-decorator-props']?.['linkConfig'], + link: value.link, + fields: value.fields, + linkDataSource: dataSource.key, + linkCollection: collection.name, + }; + dn.emit('patch', { + schema: { 'x-uid': fieldSchema['x-uid'], 'x-decorator-props': fieldSchema['x-decorator-props'] }, + }); + }, + }; + }, + }, { name: 'ConvertReferenceToDuplicate', Component: SchemaSettingsTemplate, diff --git a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx index d11865fd7..023df983c 100644 --- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx +++ b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx @@ -9,7 +9,7 @@ import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSche import { useCollection } from '../../../data-source'; import { useCollectionParentRecordData } from '../../../data-source/collection-record/CollectionRecordProvider'; import { RecordProvider } from '../../../record-provider'; -import { useGridCardDetailUrl } from './hooks'; +import { useGridCardDetailUrl, useGridCustomPageUrl } from './hooks'; const useStyles = createStyles(({ css }) => { return { @@ -42,7 +42,7 @@ export const GridCardItem = withDynamicSchemaProps((props) => { const parentRecordData = useCollectionParentRecordData(); const navigate = useNavigate(); const { styles } = useStyles(); - const detailUrl = useGridCardDetailUrl({ collection, field, fieldSchema }); + const detailUrl = useGridCustomPageUrl({ field, fieldSchema }); // XXX: 实现的有些丑陋, 需要想想有没有更好的办法 const handleClick = () => { // 1. 依赖schema的层级,不合适 diff --git a/packages/core/client/src/schema-component/antd/grid-card/hooks.ts b/packages/core/client/src/schema-component/antd/grid-card/hooks.ts index ac2c64a26..e8ef5db93 100644 --- a/packages/core/client/src/schema-component/antd/grid-card/hooks.ts +++ b/packages/core/client/src/schema-component/antd/grid-card/hooks.ts @@ -20,3 +20,15 @@ export const useGridCardDetailUrl = ({ collection, field, fieldSchema }) => { return `/mobile/${name}/${datasource}/${collectionName}/${primaryKeyValue}`; }; + +export const useGridCustomPageUrl = ({ field, fieldSchema }) => { + const { linkCollection, fields, linkDataSource, link } = + fieldSchema?.parent?.parent?.['x-decorator-props']?.['linkConfig'] || {}; + const { record } = field; + let options = '?'; + fields.forEach((item, index) => { + if (!record[item]) return; + return (options += `${index === 0 ? '' : '&'}${item}=${record[item]}`); + }); + return `${link}/${linkDataSource}/${linkCollection}${options}`; +}; diff --git a/packages/plugins/@hera/plugin-sancongtou/src/client/index.tsx b/packages/plugins/@hera/plugin-sancongtou/src/client/index.tsx index 306442104..13f62ece2 100644 --- a/packages/plugins/@hera/plugin-sancongtou/src/client/index.tsx +++ b/packages/plugins/@hera/plugin-sancongtou/src/client/index.tsx @@ -4,6 +4,7 @@ import { Plugin } from '@tachybase/client'; import { ShareProduct } from './custom-components/ShareProduct'; import { ShowDetail } from './custom-components/ShowDetail'; import { CardDetailSC, SCCardDetail } from './pages/CardDetail.schema'; +import { TestPage } from './pages/testPage/testPage'; import { getPathProductDetail } from './utils/path'; export class PluginSancongtouClient extends Plugin { @@ -48,6 +49,10 @@ export class PluginSancongtouClient extends Plugin { }), Component: CardDetailSC, }); + this.app.router.add('mobile.testPage', { + path: '/mobile/:name/detail/:dataSource/:collection', + Component: TestPage, + }); } } diff --git a/packages/plugins/@hera/plugin-sancongtou/src/client/pages/testPage/testPage.tsx b/packages/plugins/@hera/plugin-sancongtou/src/client/pages/testPage/testPage.tsx new file mode 100644 index 000000000..82881e401 --- /dev/null +++ b/packages/plugins/@hera/plugin-sancongtou/src/client/pages/testPage/testPage.tsx @@ -0,0 +1,46 @@ +import React, { useState } from 'react'; +import { css, useRequest } from '@tachybase/client'; + +import { useLocation, useParams } from 'react-router-dom'; + +export const TestPage = () => { + const search = useLocation().search; + const { dataSource, collection } = useParams(); + const filter = {}; + if (search.includes('?')) { + const options = search.slice(1).split('&'); + options.forEach((item) => { + const filterValue = item.split('='); + filter[filterValue[0]] = filterValue[1]; + }); + } + const { data } = useRequest({ + resource: collection, + action: 'list', + params: { + filter, + appends: ['main_images'], + }, + }); + return ( + data?.data && ( +
+ {data.data?.map((item) => { + return ( +
+ {item.main_images?.map((image) => { + return ; + })} +
+ ); + })} +
+ ) + ); +};