DataBlockRequestProvider
其内部获取到 BlockResourceProvider 提供的 resource，根据 BlockProvider 提供的参数，自动调用 resource.get() 或者 resource.list() 获取的卡片的数据，并通过 context 传递下去。
请求参数
请求参数是获取 DataBlockProvider 提供中的 params 和 filterByTk。
1const schema = {
2 'x-decorator': 'DataBlockProvider',
3 'x-decorator-props': {
4 'collection': 'users',
5 'action': 'list',
6 // 静态参数
7 params: {
8 pageSize: 10,
9 }
10 },
11 // 动态参数
12 'x-use-decorator-props': 'useDynamicDataBlockProps',
13}
14
15const useDynamicDataBlockProps: UseDataBlockProps<'CollectionList'> = () => {
16 return {
17 params: {
18 size: 15,
19 }
20 }
21}
会自动调用 resource.list() 获取数据，发起 GET /api/users:list?pageSize=10&size=15 的请求。
Hooks
useDataBlockRequest()
用于获取请求对象，一般用卡片组件中。
1const MyTable = () => {
2 const { data, loading } = useDataBlockRequest();
3
4 return (
5 <Table
6 dataSource={data?.data || []}
7 loading={loading}
8 pagination={{
9 total: data?.meta.total,
10 pageSize: data?.meta.pageSize,
11 page: data?.meta.page,
12 }}
13 />
14 )
15}
Record
Get 请求
对于 get 请求，当获取到 data 数据后，会通过 CollectionRecordProvider 提供 record 对象，用于获取当前卡片的数据。
1const schema = {
2 'x-decorator': 'DataBlockProvider',
3 'x-decorator-props': {
4 'collection': 'users',
5 'action': 'get', // get 请求
6 },
7 // 动态参数
8 'x-use-decorator-props': 'useDynamicFormProps',
9}
10
11const useDynamicDataBlockProps: UseDataBlockProps<'CollectionGet'> = () => {
12 return {
13 params: {
14 filterByTk: 1,
15 }
16 }
17}
会自动调用 resource.get() 获取数据，发起 GET /api/users:get/1 的请求，并通过 CollectionRecordProvider 提供上下文。
1const { data } = useDataBlockRequest();
2const record = useCollectionRecord(); // record 上下文数据
3
4// 相等
5record.data === data;
List 请求
对于 list 请求则不会提供 record 对象，需要自己通过 <CollectionRecordProvider /> 设置上下文。
1const MyTable = () => {
2 const { data } = useDataBlockRequest();
3
4 return (
5 <Table
6 dataSource={data?.data || []}
7 columns={[
8 {
9 title: 'ID',
10 dataIndex: 'id',
11 },
12 {
13 title: 'Action',
14 render: (v, record) => {
15 return (
16 <CollectionRecordProvider record={record}>
17 <MyAction />
18 </CollectionRecordProvider>
19 )
20 },
21 },
22 ]}
23 pagination={{
24 total: data?.meta.total,
25 pageSize: data?.meta.pageSize,
26 page: data?.meta.page,
27 }}
28 />
29 )
30}
31
32const MyAction = () => {
33 const record = useCollectionRecord();
34 return (
35 <Button onClick={() => {
36 console.log(record.data);
37 }}>Dialog</Button>
38 )
39}
