feat: 新增自定义跳转页面 (#1499)

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

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,

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的层级,不合适

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}`;
+};

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,
+    });
   }
 }
 

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 && (
+      <div
+        className={css`
+          width: 100%;
+          height: 100%;
+          background-color: 255, 249, 243;
+        `}
+      >
+        {data.data?.map((item) => {
+          return (
+            <div key={item.id}>
+              {item.main_images?.map((image) => {
+                return <img src={image.url} key={item.id} />;
+              })}
+            </div>
+          );
+        })}
+      </div>
+    )
+  );
+};