From 553088e8391e6dd64bd9a178de99b2c9e207789a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=87=91=E6=98=B6?= Date: Mon, 20 Jun 2022 16:48:52 +0800 Subject: [PATCH] feat: column sortable and form item pattern (#518) --- .../src/block-provider/TableBlockProvider.tsx | 8 ++- .../client/src/block-provider/hooks/index.ts | 6 +- packages/core/client/src/locale/zh_CN.ts | 5 ++ .../antd/form-item/FormItem.tsx | 65 +++++++++++++++++++ .../antd/table-v2/Table.Column.Designer.tsx | 21 +++++- .../schema-component/antd/table-v2/Table.tsx | 17 ++++- 6 files changed, 114 insertions(+), 8 deletions(-) diff --git a/packages/core/client/src/block-provider/TableBlockProvider.tsx b/packages/core/client/src/block-provider/TableBlockProvider.tsx index 7b21fc957..60df78e51 100644 --- a/packages/core/client/src/block-provider/TableBlockProvider.tsx +++ b/packages/core/client/src/block-provider/TableBlockProvider.tsx @@ -81,7 +81,9 @@ export const useTableBlockContext = () => { export const useTableBlockProps = () => { const field = useField(); + const fieldSchema = useFieldSchema(); const ctx = useTableBlockContext(); + const globalSort = fieldSchema.parent?.['x-decorator-props']?.['params']?.['sort']; useEffect(() => { if (!ctx?.service?.loading) { field.value = ctx?.service?.data?.data; @@ -116,8 +118,10 @@ export const useTableBlockProps = () => { }); ctx.service.refresh(); }, - onChange({ current, pageSize }) { - ctx.service.run({ ...ctx.service.params?.[0], page: current, pageSize }); + onChange({ current, pageSize }, filters, sorter) { + let sort = sorter.order ? (sorter.order === `ascend` ? [sorter.field] : [`-${sorter.field}`]) : globalSort || null; + + ctx.service.run({ ...ctx.service.params?.[0], page: current, pageSize, sort }); }, }; }; diff --git a/packages/core/client/src/block-provider/hooks/index.ts b/packages/core/client/src/block-provider/hooks/index.ts index eede036b7..c7f121d4a 100644 --- a/packages/core/client/src/block-provider/hooks/index.ts +++ b/packages/core/client/src/block-provider/hooks/index.ts @@ -311,11 +311,11 @@ export const useUpdateActionProps = () => { ...assignedValues, }, }); - actionField.data.loading = false; - __parent?.service?.refresh?.(); - if (!(resource instanceof TableFieldResource)) { + actionField.data.loading = false; + if (!(resource instanceof TableFieldResource)) { __parent?.__parent?.service?.refresh?.(); } + __parent?.service?.refresh?.(); setVisible?.(false); if (!onSuccess?.successMessage) { return; diff --git a/packages/core/client/src/locale/zh_CN.ts b/packages/core/client/src/locale/zh_CN.ts index 56e3ec286..796279ba4 100644 --- a/packages/core/client/src/locale/zh_CN.ts +++ b/packages/core/client/src/locale/zh_CN.ts @@ -183,6 +183,11 @@ export default { "Subform mode": "子表单模式", "Edit block title": "编辑区块标题", "Block title": "区块标题", + "Pattern": "模式", + "Editable": "可编辑", + "Readonly": "只读（禁止编辑）", + "Easy-reading": "只读（阅读模式）", + "Sortable": "可排序", "Add filter": "添加筛选条件", "Add filter group": "添加筛选分组", "is": "等于", diff --git a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx index 3721fe463..9d611f76c 100644 --- a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx +++ b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx @@ -56,6 +56,13 @@ FormItem.Designer = () => { value: field?.name, label: compile(field?.uiSchema?.title) || field?.name, })); + let readOnlyMode = 'editable'; + if (fieldSchema['x-read-pretty'] === true) { + readOnlyMode = 'read-pretty'; + } + if (fieldSchema['x-component-props']?.['readOnly'] === true) { + readOnlyMode = 'readonly'; + } return ( {collectionField && ( @@ -172,6 +179,64 @@ FormItem.Designer = () => { }} /> )} + {!field.readPretty && ( + { + const schema = { + ['x-uid']: fieldSchema['x-uid'], + }; + + switch(v) { + case 'readonly': { + fieldSchema['x-read-pretty'] = false; + schema['x-read-pretty'] = false; + fieldSchema['x-component-props'] = { + ...fieldSchema['x-component-props'], + readOnly: true, + } + schema['x-component-props'] = fieldSchema['x-component-props']; + field.readPretty = false; + field.componentProps.readOnly = true; + break; + } + case 'read-pretty': { + fieldSchema['x-read-pretty'] = true; + schema['x-read-pretty'] = true; + fieldSchema['x-component-props'] = { + ...fieldSchema['x-component-props'], + readOnly: false, + } + schema['x-component-props'] = fieldSchema['x-component-props']; + field.readPretty = true; + field.componentProps.readOnly = false; + break; + } + default: { + fieldSchema['x-read-pretty'] = false; + schema['x-read-pretty'] = false; + fieldSchema['x-component-props'] = { + ...fieldSchema['x-component-props'], + readOnly: false, + } + schema['x-component-props'] = fieldSchema['x-component-props']; + field.readPretty = false; + field.componentProps.readOnly = false; + break; + } + } + dn.emit('patch', { + schema + }); + + dn.refresh(); + }} + /> + )} {collectionField?.target && ( { dn.refresh(); }} /> - {['linkTo', 'm2m', 'm2o', 'obo', 'oho'].includes(collectionField?.interface) && ( + { + const schema: ISchema = { + ['x-uid']: columnSchema['x-uid'], + }; + columnSchema['x-component-props'] = { + ...columnSchema['x-component-props'], + sorter: v + } + schema['x-component-props'] = columnSchema['x-component-props']; + field.componentProps.sorter = v; + dn.emit('patch', { + schema + }); + dn.refresh(); + }} + /> + {['linkTo', 'm2m', 'm2o', 'o2m', 'obo', 'oho'].includes(collectionField?.interface) && ( { return schema['x-component']?.endsWith('.Column') > -1; }; +const isCollectionFieldComponent = (schema: ISchema) => { + return schema['x-component'] === 'CollectionField'; +} + const useTableColumns = () => { const start = Date.now(); const field = useField(); const schema = useFieldSchema(); const { exists, render } = useSchemaInitializer(schema['x-initializer']); + // console.log('useTableColumns', exists); const columns = schema .reduceProperties((buf, s) => { if (isColumnComponent(s)) { @@ -26,10 +31,18 @@ const useTableColumns = () => { } }, []) .map((s: Schema) => { + const collectionFields = s + .reduceProperties((buf, s) => { + if (isCollectionFieldComponent(s)) { + return buf.concat([s]); + } + }, []); + const dataIndex = collectionFields?.length > 0 ? collectionFields[0].name : s.name; return { title: , - dataIndex: s.name, + dataIndex, key: s.name, + sorter: s['x-component-props']?.['sorter'], // width: 300, render: (v, record) => { const index = field.value?.indexOf(record);