feat: add tab search block

This commit is contained in:
sealday 2024-03-12 04:32:16 +08:00
parent f7872aa16e
commit f98a4305f3
2 changed files with 161 additions and 1 deletions

View File

@ -4,7 +4,6 @@ import {
Menu,
Plugin,
RemoteSchemaTemplateManagerProvider,
TableV2,
EditTitleField,
useCollection_deprecated,
SchemaSettingOptions,
@ -90,6 +89,7 @@ import { useGetCustomAssociatedComponents } from './hooks/useGetCustomAssociated
import { useGetCustomComponents } from './hooks/useGetCustomComponents';
import { SwiperBlock, SwiperBlockInitializer } from './schema-initializer/SwiperBlockInitializer';
import { NoticeBlock, NoticeBlockInitializer } from './schema-initializer/NoticeBlockInitializer';
import { TabSearchBlock, TabSearchBlockInitializer } from './schema-initializer/TabSearchBlockInitializer';
export enum CustomComponentType {
CUSTOM_FORM_ITEM,
@ -202,6 +202,8 @@ export class PluginCoreClient extends Plugin {
// @ts-ignore
Designer: MenuDesigner,
},
TabSearchBlockInitializer,
TabSearchBlock,
NoticeBlock,
NoticeBlockInitializer,
});
@ -299,6 +301,20 @@ export class PluginCoreClient extends Plugin {
Component: 'NoticeBlockInitializer',
});
this.app.schemaInitializerManager.addItem('MBlockInitializers', 'filterBlocks', {
title: '{{t("Filter blocks")}}',
type: 'itemGroup',
children: [
{
name: 'tabSearch',
title: 'tabSearch',
Component: 'TabSearchBlockInitializer',
},
],
});
this.app.schemaInitializerManager.addItem('MBlockInitializers', 'filterBlocks.filterForm', {});
const addCustomComponent = {
name: 'addCustomComponent',
title: this.locale.lang('Add custom component'),

View File

@ -0,0 +1,144 @@
import Icon from '@ant-design/icons';
import { ISchema } from '@formily/react';
import {
DataBlockInitializer,
css,
useCollectionManager,
useSchemaInitializer,
useSchemaInitializerItem,
} from '@nocobase/client';
import React, { useState } from 'react';
import { uid } from '@nocobase/utils/client';
import { Button, SearchBar, Tabs, Picker } from 'antd-mobile';
const TabSearchSvg = () => (
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
<path d="M1263.243636 908.939636l-156.485818-156.392727c25.6-37.050182 39.842909-79.685818 39.842909-128.093091 0-125.114182-102.4-227.514182-227.607272-227.514182a228.258909 228.258909 0 0 0-227.514182 227.514182c0 125.207273 102.4 227.607273 227.514182 227.607273 48.407273 0 91.042909-14.242909 128-39.842909l156.392727 156.392727a41.239273 41.239273 0 0 0 59.764363 0c19.921455-17.035636 19.921455-45.428364 0-59.671273zM921.786182 766.696727a140.846545 140.846545 0 0 1-142.242909-142.242909c0-79.592727 62.557091-142.149818 142.242909-142.149818 79.592727 0 142.242909 62.557091 142.242909 142.149818 0 79.685818-62.650182 142.242909-142.242909 142.242909z"></path>
<path d="M694.272 894.696727H111.150545v-512h583.121455a43.752727 43.752727 0 0 0 42.728727-42.635636 43.752727 43.752727 0 0 0-42.728727-42.728727H111.150545V98.304h853.364364v156.392727a43.752727 43.752727 0 0 0 42.635636 42.635637 43.752727 43.752727 0 0 0 42.728728-42.635637V69.818182a57.064727 57.064727 0 0 0-56.878546-56.878546H82.757818A57.064727 57.064727 0 0 0 25.879273 69.818182v853.364363c0 31.278545 25.6 56.785455 56.785454 56.785455h611.607273a43.752727 43.752727 0 0 0 42.728727-42.635636 43.752727 43.752727 0 0 0-42.728727-42.635637z"></path>
<path d="M637.393455 155.182545c-22.714182 0-42.635636 21.690182-42.635637 46.545455 0 24.762182 19.921455 46.545455 42.635637 46.545455h28.485818c22.714182 0 42.635636-21.783273 42.635636-46.545455 0-24.855273-19.921455-46.545455-42.635636-46.545455h-28.485818z m-199.121455 0c-22.714182 0-42.635636 21.690182-42.635636 46.545455 0 24.762182 19.921455 46.545455 42.635636 46.545455h28.485818c22.714182 0 42.635636-21.783273 42.635637-46.545455 0-24.855273-19.921455-46.545455-42.635637-46.545455h-28.485818z m-199.121455 0c-22.714182 0-42.635636 21.690182-42.635636 46.545455 0 24.762182 19.921455 46.545455 42.635636 46.545455h28.485819c22.714182 0 42.635636-21.783273 42.635636-46.545455 0-24.855273-19.921455-46.545455-42.635636-46.545455h-28.485819z"></path>
</svg>
);
const TabSearchIcon = (props: Partial<any>) => <Icon component={TabSearchSvg} {...props} />;
export const TabSearchBlock = () => {
const [visible, setVisible] = useState(false);
const basicColumns = [
[
{ label: '福建', value: 'Mon' },
{ label: '上海', value: 'Wed' },
],
];
return (
<>
<div
className={css`
display: flex;
margin-bottom: 8px;
`}
>
<Tabs
className={css`
flex: 1;
`}
>
<Tabs.Tab title="水果" key="fruits" />
<Tabs.Tab title="蔬菜" key="vegetables" />
<Tabs.Tab title="动物" key="animals" />
</Tabs>
<Button onClick={() => setVisible(true)}></Button>
<Picker
columns={basicColumns}
visible={visible}
onClose={() => {
setVisible(false);
}}
/>
</div>
<div
className={css`
display: flex;
margin-bottom: 8px;
`}
>
<SearchBar
className={css`
flex: 1;
`}
placeholder="请输入内容"
/>
<Button></Button>
</div>
</>
);
};
export const TabSearchBlockInitializer = () => {
const { insert } = useSchemaInitializer();
const cm = useCollectionManager();
const itemConfig = useSchemaInitializerItem();
return (
<DataBlockInitializer
{...itemConfig}
icon={<TabSearchIcon />}
componentType={'TabSearch'}
onCreateBlockSchema={async ({ item }) => {
const collection = cm.getCollection(item.name);
const schema = createGridCardBlockSchema({
collection: item.name,
dataSource: item.dataSource,
rowKey: collection.filterTargetKey || 'id',
settings: 'blockSettings:gridCard',
});
insert(schema);
}}
/>
);
};
export const createGridCardBlockSchema = (options) => {
const {
formItemInitializers = 'ReadPrettyFormItemInitializers',
actionInitializers = 'GridCardActionInitializers',
itemActionInitializers = 'GridCardItemActionInitializers',
collection,
association,
resource,
template,
dataSource,
settings,
...others
} = options;
const resourceName = resource || association || collection;
const schema: ISchema = {
type: 'void',
'x-acl-action': `${resourceName}:view`,
'x-decorator': 'GridCard.Decorator',
'x-decorator-props': {
resource: resourceName,
collection,
association,
dataSource,
readPretty: true,
action: 'list',
params: {
pageSize: 12,
},
runWhenParamsChanged: true,
...others,
},
'x-component': 'CardItem',
'x-component-props': {
useProps: '{{ useGridCardBlockItemProps }}',
},
'x-toolbar': 'BlockSchemaToolbar',
'x-settings': settings,
properties: {
[uid()]: {
type: 'void',
'x-component': 'TabSearchBlock',
},
},
};
return schema;
};