ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: column sortable and form item pattern (#518)

Browse Source
This commit is contained in:
金昶 2022-06-20 16:48:52 +08:00 committed by GitHub
parent 2b0c7384f2
commit 553088e839
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 114 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/core/client/src/block-provider/TableBlockProvider.tsx
View File

@ -81,7 +81,9 @@ export const useTableBlockContext = () => {
export const useTableBlockProps = () => {
const field = useField<ArrayField>();
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 });
},
};
};

2
packages/core/client/src/block-provider/hooks/index.ts
View File

@ -312,10 +312,10 @@ export const useUpdateActionProps = () => {
},
});
actionField.data.loading = false;
__parent?.service?.refresh?.();
if (!(resource instanceof TableFieldResource)) {
__parent?.__parent?.service?.refresh?.();
}
__parent?.service?.refresh?.();
setVisible?.(false);
if (!onSuccess?.successMessage) {
return;

5
packages/core/client/src/locale/zh_CN.ts
View File

@ -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": "等于",

65
packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
View File

@ -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 (
<GeneralSchemaDesigner>
{collectionField && (
@ -172,6 +179,64 @@ FormItem.Designer = () => {
}}
/>
)}
{!field.readPretty && (
<SchemaSettings.SelectItem
title={t('Pattern')}
options={
[{ label: t('Editable'), value: 'editable' }, { label: t('Readonly'), value: 'readonly' }, { label: t('Easy-reading'), value: 'read-pretty' }]
}
value={readOnlyMode}
onChange={(v) => {
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 && (
<SchemaSettings.SelectItem
title={t('Title field')}

21
packages/core/client/src/schema-component/antd/table-v2/Table.Column.Designer.tsx
View File

@ -65,7 +65,26 @@ export const TableColumnDesigner = (props) => {
dn.refresh();
}}
/>
{['linkTo', 'm2m', 'm2o', 'obo', 'oho'].includes(collectionField?.interface) && (
<SchemaSettings.SwitchItem
title={t('Sortable')}
checked={field.componentProps.sorter}
onChange={(v) => {
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) && (
<SchemaSettings.SelectItem
title={t('Title field')}
options={options}

17
packages/core/client/src/schema-component/antd/table-v2/Table.tsx
View File

@ -1,7 +1,7 @@
import { MenuOutlined } from '@ant-design/icons';
import { css } from '@emotion/css';
import { ArrayField } from '@formily/core';
import { observer, RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
import { ISchema, observer, RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
import { Table as AntdTable, TableColumnProps } from 'antd';
import { default as classNames, default as cls } from 'classnames';
import React from 'react';
@ -14,11 +14,16 @@ const isColumnComponent = (schema: Schema) => {
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<ArrayField>();
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: <RecursionField name={s.name} schema={s} onlyRenderSelf />,
dataIndex: s.name,
dataIndex,
key: s.name,
sorter: s['x-component-props']?.['sorter'],
// width: 300,
render: (v, record) => {
const index = field.value?.indexOf(record);