feat: improve table schema initializer
This commit is contained in:
parent
0125ae8df9
commit
8c3e30df52
@ -1,7 +1,7 @@
|
|||||||
import { observer, useForm } from '@formily/react';
|
import { observer, useForm } from '@formily/react';
|
||||||
import { cloneDeep } from 'lodash';
|
import { cloneDeep } from 'lodash';
|
||||||
import React, { createContext, useContext, useState } from 'react';
|
import React, { createContext, useContext, useState } from 'react';
|
||||||
import { CollectionOptions, CollectionProvider, useActionContext, useRecord, useRequest } from '../';
|
import { CollectionOptions, CollectionProvider, useActionContext, useRecord, useRecordIndex, useRequest } from '../';
|
||||||
import { useAPIClient } from '../api-client';
|
import { useAPIClient } from '../api-client';
|
||||||
import { options } from './Configuration/interfaces';
|
import { options } from './Configuration/interfaces';
|
||||||
|
|
||||||
@ -104,10 +104,10 @@ const useBulkDestroyAction = () => {
|
|||||||
const { selectedRowKeys, setSelectedRowKeys } = ctx;
|
const { selectedRowKeys, setSelectedRowKeys } = ctx;
|
||||||
return {
|
return {
|
||||||
async run() {
|
async run() {
|
||||||
const dataSource = ctx.dataSource || [];
|
const dataSource: any[] = ctx.dataSource || [];
|
||||||
ctx.setDataSource(
|
ctx.setDataSource(
|
||||||
dataSource.filter((item) => {
|
dataSource.filter((_, index) => {
|
||||||
return !selectedRowKeys.includes(item[ctx.rowKey]);
|
return !selectedRowKeys.includes(index);
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
setSelectedRowKeys([]);
|
setSelectedRowKeys([]);
|
||||||
@ -116,16 +116,15 @@ const useBulkDestroyAction = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const useUpdateAction = () => {
|
const useUpdateAction = () => {
|
||||||
const record = useRecord();
|
const recordIndex = useRecordIndex();
|
||||||
const form = useForm();
|
const form = useForm();
|
||||||
const { setVisible } = useActionContext();
|
const { setVisible } = useActionContext();
|
||||||
const ctx = useContext(DataSourceContext);
|
const ctx = useContext(DataSourceContext);
|
||||||
return {
|
return {
|
||||||
async run() {
|
async run() {
|
||||||
const dataSource = ctx?.dataSource || [];
|
const dataSource: any[] = ctx?.dataSource || [];
|
||||||
const rowKey = ctx?.rowKey;
|
const values = dataSource.map((item, index) => {
|
||||||
const values = dataSource.map((item) => {
|
if (index === recordIndex) {
|
||||||
if (record[rowKey] === item[rowKey]) {
|
|
||||||
return { ...form.values };
|
return { ...form.values };
|
||||||
}
|
}
|
||||||
return item;
|
return item;
|
||||||
@ -137,15 +136,14 @@ const useUpdateAction = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const useDestroyAction = () => {
|
const useDestroyAction = () => {
|
||||||
const record = useRecord();
|
const recordIndex = useRecordIndex();
|
||||||
const ctx = useContext(DataSourceContext);
|
const ctx = useContext(DataSourceContext);
|
||||||
return {
|
return {
|
||||||
async run() {
|
async run() {
|
||||||
const rowKey = ctx.rowKey;
|
const dataSource: any[] = ctx.dataSource || [];
|
||||||
const dataSource = ctx.dataSource || [];
|
|
||||||
ctx.setDataSource(
|
ctx.setDataSource(
|
||||||
dataSource.filter((item) => {
|
dataSource.filter((_, index) => {
|
||||||
return record[rowKey] !== item[rowKey];
|
return recordIndex !== index;
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
@ -216,7 +214,7 @@ export const SubFieldDataSourceProvider = observer((props) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const DataSourceProvider = observer((props: any) => {
|
export const DataSourceProvider = observer((props: any) => {
|
||||||
const { rowKey = 'id', collection, association } = props;
|
const { rowKey, collection, association } = props;
|
||||||
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
||||||
const [dataSource, setDataSource] = useState([]);
|
const [dataSource, setDataSource] = useState([]);
|
||||||
const record = useRecord();
|
const record = useRecord();
|
||||||
|
@ -1,13 +1,22 @@
|
|||||||
import { useRequest } from 'ahooks';
|
|
||||||
import React, { createContext, useContext } from 'react';
|
import React, { createContext, useContext } from 'react';
|
||||||
|
|
||||||
export const RecordContext = createContext({});
|
export const RecordContext = createContext({});
|
||||||
|
export const RecordIndexContext = createContext(null);
|
||||||
|
|
||||||
export const RecordProvider: React.FC<{ record: any }> = (props) => {
|
export const RecordProvider: React.FC<{ record: any }> = (props) => {
|
||||||
const { record, children } = props;
|
const { record, children } = props;
|
||||||
return <RecordContext.Provider value={record}>{children}</RecordContext.Provider>;
|
return <RecordContext.Provider value={record}>{children}</RecordContext.Provider>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const RecordIndexProvider: React.FC<{ index: any }> = (props) => {
|
||||||
|
const { index, children } = props;
|
||||||
|
return <RecordIndexContext.Provider value={index}>{children}</RecordIndexContext.Provider>;
|
||||||
|
};
|
||||||
|
|
||||||
export function useRecord<D = any>() {
|
export function useRecord<D = any>() {
|
||||||
return useContext(RecordContext) as D;
|
return useContext(RecordContext) as D;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function useRecordIndex() {
|
||||||
|
return useContext(RecordIndexContext);
|
||||||
|
}
|
||||||
|
@ -5,7 +5,7 @@ import { Table, TableColumnProps } from 'antd';
|
|||||||
import cls from 'classnames';
|
import cls from 'classnames';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { DndContext } from '../..';
|
import { DndContext } from '../..';
|
||||||
import { RecordProvider, useRequest, useSchemaInitializer } from '../../../';
|
import { RecordIndexProvider, RecordProvider, useRequest, useSchemaInitializer } from '../../../';
|
||||||
|
|
||||||
const isColumnComponent = (schema: Schema) => {
|
const isColumnComponent = (schema: Schema) => {
|
||||||
return schema['x-component']?.endsWith('.Column') > -1;
|
return schema['x-component']?.endsWith('.Column') > -1;
|
||||||
@ -29,9 +29,11 @@ const useTableColumns = () => {
|
|||||||
render: (v, record) => {
|
render: (v, record) => {
|
||||||
const index = field.value?.indexOf(record);
|
const index = field.value?.indexOf(record);
|
||||||
return (
|
return (
|
||||||
<RecordProvider record={record}>
|
<RecordIndexProvider index={index}>
|
||||||
<RecursionField schema={s} name={index} onlyRenderProperties />
|
<RecordProvider record={record}>
|
||||||
</RecordProvider>
|
<RecursionField schema={s} name={index} onlyRenderProperties />
|
||||||
|
</RecordProvider>
|
||||||
|
</RecordIndexProvider>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
} as TableColumnProps<any>;
|
} as TableColumnProps<any>;
|
||||||
@ -119,9 +121,15 @@ export const TableArray: React.FC<any> = observer((props) => {
|
|||||||
}
|
}
|
||||||
: undefined,
|
: undefined,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const defaultRowKey = (record: any) => {
|
||||||
|
return field.value?.indexOf?.(record);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Table
|
<Table
|
||||||
|
rowKey={defaultRowKey}
|
||||||
{...others}
|
{...others}
|
||||||
{...restProps}
|
{...restProps}
|
||||||
components={components}
|
components={components}
|
||||||
|
@ -76,7 +76,7 @@ const useDefSelectedRowKeys = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const TableVoid: React.FC<TableVoidProps> = observer((props) => {
|
export const TableVoid: React.FC<TableVoidProps> = observer((props) => {
|
||||||
const { useDataSource = useDef, useSelectedRowKeys = useDefSelectedRowKeys } = props;
|
const { rowKey = 'id', useDataSource = useDef, useSelectedRowKeys = useDefSelectedRowKeys } = props;
|
||||||
const field = useField<Field>();
|
const field = useField<Field>();
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
const form = useMemo(() => createForm(), []);
|
const form = useMemo(() => createForm(), []);
|
||||||
@ -108,6 +108,7 @@ export const TableVoid: React.FC<TableVoidProps> = observer((props) => {
|
|||||||
<FieldContext.Provider value={f}>
|
<FieldContext.Provider value={f}>
|
||||||
<TableArray
|
<TableArray
|
||||||
{...props}
|
{...props}
|
||||||
|
rowKey={rowKey}
|
||||||
useSelectedRowKeys={useSelectedRowKeys}
|
useSelectedRowKeys={useSelectedRowKeys}
|
||||||
loading={result?.loading}
|
loading={result?.loading}
|
||||||
pagination={usePaginationProps(props, result)}
|
pagination={usePaginationProps(props, result)}
|
||||||
|
@ -26,7 +26,6 @@ export const SubTableFieldInitializer = (props) => {
|
|||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'DataSourceProvider',
|
'x-component': 'DataSourceProvider',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
rowKey: 'id',
|
|
||||||
collection: item?.field?.target,
|
collection: item?.field?.target,
|
||||||
association: {
|
association: {
|
||||||
name: item.field.name,
|
name: item.field.name,
|
||||||
@ -127,7 +126,6 @@ export const SubTableFieldInitializer = (props) => {
|
|||||||
expandable: {
|
expandable: {
|
||||||
childrenColumnName: '__nochildren__',
|
childrenColumnName: '__nochildren__',
|
||||||
},
|
},
|
||||||
rowKey: 'id',
|
|
||||||
rowSelection: {
|
rowSelection: {
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
},
|
},
|
||||||
@ -142,7 +140,7 @@ export const SubTableFieldInitializer = (props) => {
|
|||||||
'x-decorator': 'Table.Column.ActionBar',
|
'x-decorator': 'Table.Column.ActionBar',
|
||||||
'x-component': 'Table.Column',
|
'x-component': 'Table.Column',
|
||||||
'x-designer': 'Table.RowActionDesigner',
|
'x-designer': 'Table.RowActionDesigner',
|
||||||
'x-initializer': 'TableRecordActionInitializers',
|
'x-initializer': 'TableFieldRecordActionInitializers',
|
||||||
properties: {
|
properties: {
|
||||||
actions: {
|
actions: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
|
@ -0,0 +1,186 @@
|
|||||||
|
import { MenuOutlined } from '@ant-design/icons';
|
||||||
|
import { css } from '@emotion/css';
|
||||||
|
import { useFieldSchema } from '@formily/react';
|
||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { SchemaInitializer } from '../..';
|
||||||
|
import { useAPIClient } from '../../api-client';
|
||||||
|
import { createDesignable, useDesignable } from '../../schema-component';
|
||||||
|
|
||||||
|
export const TableFieldRecordActionInitializers = (props: any) => {
|
||||||
|
const fieldSchema = useFieldSchema();
|
||||||
|
const api = useAPIClient();
|
||||||
|
const { refresh } = useDesignable();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
return (
|
||||||
|
<SchemaInitializer.Button
|
||||||
|
className={css`
|
||||||
|
border: 0 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
background: none !important;
|
||||||
|
height: auto !important;
|
||||||
|
line-height: 12px !important;
|
||||||
|
width: 12px !important;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
`}
|
||||||
|
insertPosition={'beforeEnd'}
|
||||||
|
insert={(schema) => {
|
||||||
|
const spaceSchema = fieldSchema.reduceProperties((buf, schema) => {
|
||||||
|
if (schema['x-component'] === 'Space') {
|
||||||
|
return schema;
|
||||||
|
}
|
||||||
|
return buf;
|
||||||
|
}, null);
|
||||||
|
if (!spaceSchema) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const dn = createDesignable({
|
||||||
|
api,
|
||||||
|
refresh,
|
||||||
|
current: spaceSchema,
|
||||||
|
});
|
||||||
|
dn.loadAPIClientEvents();
|
||||||
|
dn.insertBeforeEnd(schema);
|
||||||
|
}}
|
||||||
|
items={[
|
||||||
|
{
|
||||||
|
type: 'itemGroup',
|
||||||
|
title: t('Enable actions'),
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: 'item',
|
||||||
|
title: t('View'),
|
||||||
|
component: 'ActionInitializer',
|
||||||
|
schema: {
|
||||||
|
title: '{{ t("View") }}',
|
||||||
|
type: 'void',
|
||||||
|
'x-action': 'view',
|
||||||
|
'x-designer': 'Action.Designer',
|
||||||
|
'x-component': 'Action.Link',
|
||||||
|
'x-component-props': {},
|
||||||
|
properties: {
|
||||||
|
drawer: {
|
||||||
|
type: 'void',
|
||||||
|
'x-component': 'Action.Drawer',
|
||||||
|
title: '{{ t("View record") }}',
|
||||||
|
properties: {
|
||||||
|
tabs: {
|
||||||
|
type: 'void',
|
||||||
|
'x-component': 'Tabs',
|
||||||
|
'x-component-props': {},
|
||||||
|
properties: {
|
||||||
|
tab1: {
|
||||||
|
type: 'void',
|
||||||
|
title: '详情',
|
||||||
|
'x-component': 'Tabs.TabPane',
|
||||||
|
'x-component-props': {},
|
||||||
|
properties: {
|
||||||
|
grid: {
|
||||||
|
type: 'void',
|
||||||
|
'x-decorator': 'Form',
|
||||||
|
'x-component': 'Grid',
|
||||||
|
'x-read-pretty': true,
|
||||||
|
'x-item-initializer': 'RecordBlockInitializer',
|
||||||
|
properties: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'item',
|
||||||
|
title: t('Edit'),
|
||||||
|
component: 'ActionInitializer',
|
||||||
|
schema: {
|
||||||
|
title: '{{ t("Edit") }}',
|
||||||
|
type: 'void',
|
||||||
|
'x-action': 'update',
|
||||||
|
'x-designer': 'Action.Designer',
|
||||||
|
'x-component': 'Action.Link',
|
||||||
|
'x-component-props': {},
|
||||||
|
properties: {
|
||||||
|
drawer: {
|
||||||
|
type: 'void',
|
||||||
|
'x-decorator': 'Form',
|
||||||
|
'x-decorator-props': {
|
||||||
|
useValues: '{{ cm.useValuesFromRecord }}',
|
||||||
|
},
|
||||||
|
'x-component': 'Action.Drawer',
|
||||||
|
title: '{{ t("Edit record") }}',
|
||||||
|
properties: {
|
||||||
|
grid: {
|
||||||
|
type: 'void',
|
||||||
|
'x-component': 'Grid',
|
||||||
|
'x-initializer': 'GridFormItemInitializers',
|
||||||
|
properties: {},
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
type: 'void',
|
||||||
|
'x-component': 'Action.Drawer.Footer',
|
||||||
|
properties: {
|
||||||
|
actions: {
|
||||||
|
type: 'void',
|
||||||
|
'x-decorator': 'DndContext',
|
||||||
|
'x-component': 'ActionBar',
|
||||||
|
'x-component-props': {
|
||||||
|
layout: 'one-column',
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
cancel: {
|
||||||
|
title: '{{ t("Cancel") }}',
|
||||||
|
'x-action': 'cancel',
|
||||||
|
'x-component': 'Action',
|
||||||
|
'x-component-props': {
|
||||||
|
useAction: '{{ cm.useCancelAction }}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
submit: {
|
||||||
|
title: '{{ t("Submit") }}',
|
||||||
|
'x-action': 'submit',
|
||||||
|
'x-component': 'Action',
|
||||||
|
'x-component-props': {
|
||||||
|
type: 'primary',
|
||||||
|
useAction: '{{ ds.useUpdateAction }}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'item',
|
||||||
|
title: t('Delete'),
|
||||||
|
component: 'ActionInitializer',
|
||||||
|
schema: {
|
||||||
|
title: '{{ t("Delete") }}',
|
||||||
|
'x-action': 'destroy',
|
||||||
|
'x-designer': 'Action.Designer',
|
||||||
|
'x-component': 'Action.Link',
|
||||||
|
'x-component-props': {
|
||||||
|
confirm: {
|
||||||
|
title: "{{t('Delete record')}}",
|
||||||
|
content: "{{t('Are you sure you want to delete it?')}}",
|
||||||
|
},
|
||||||
|
useAction: '{{ ds.useDestroyAction }}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<MenuOutlined />
|
||||||
|
</SchemaInitializer.Button>
|
||||||
|
);
|
||||||
|
};
|
@ -126,13 +126,29 @@ export const TableRecordActionInitializers = (props: any) => {
|
|||||||
properties: {
|
properties: {
|
||||||
actions: {
|
actions: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-initializer': 'PopupFormActionInitializers',
|
|
||||||
'x-decorator': 'DndContext',
|
|
||||||
'x-component': 'ActionBar',
|
'x-component': 'ActionBar',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
layout: 'one-column',
|
layout: 'one-column',
|
||||||
},
|
},
|
||||||
properties: {},
|
properties: {
|
||||||
|
cancel: {
|
||||||
|
title: '{{ t("Cancel") }}',
|
||||||
|
'x-action': 'cancel',
|
||||||
|
'x-component': 'Action',
|
||||||
|
'x-component-props': {
|
||||||
|
useAction: '{{ cm.useCancelAction }}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
submit: {
|
||||||
|
title: '{{ t("Submit") }}',
|
||||||
|
'x-action': 'submit',
|
||||||
|
'x-component': 'Action',
|
||||||
|
'x-component-props': {
|
||||||
|
type: 'primary',
|
||||||
|
useAction: '{{ cm.useUpdateAction }}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -166,4 +182,4 @@ export const TableRecordActionInitializers = (props: any) => {
|
|||||||
<MenuOutlined />
|
<MenuOutlined />
|
||||||
</SchemaInitializer.Button>
|
</SchemaInitializer.Button>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -8,8 +8,8 @@ import { PopupFormActionInitializers } from './PopupFormActionInitializers';
|
|||||||
import { RecordBlockInitializers } from './RecordBlockInitializers';
|
import { RecordBlockInitializers } from './RecordBlockInitializers';
|
||||||
import { TableActionInitializers } from './TableActionInitializers';
|
import { TableActionInitializers } from './TableActionInitializers';
|
||||||
import { TableColumnInitializers } from './TableColumnInitializers';
|
import { TableColumnInitializers } from './TableColumnInitializers';
|
||||||
|
import { TableFieldRecordActionInitializers } from './TableFieldRecordActionInitializers';
|
||||||
import { TableRecordActionInitializers } from './TableRecordActionInitializers';
|
import { TableRecordActionInitializers } from './TableRecordActionInitializers';
|
||||||
|
|
||||||
export const items = { ...Items };
|
export const items = { ...Items };
|
||||||
|
|
||||||
export const initializes = {
|
export const initializes = {
|
||||||
@ -33,4 +33,6 @@ export const initializes = {
|
|||||||
TableColumnInitializers,
|
TableColumnInitializers,
|
||||||
// 表格当前行记录的「操作配置」
|
// 表格当前行记录的「操作配置」
|
||||||
TableRecordActionInitializers,
|
TableRecordActionInitializers,
|
||||||
|
// 表格字段(子表格)场景的当前行记录的「操作配置」
|
||||||
|
TableFieldRecordActionInitializers,
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user