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

packages/core/client/src/block-provider/TableBlockProvider.tsx

@@ -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 }) {
+    onChange({ current, pageSize }, filters, sorter) {
-      ctx.service.run({ ...ctx.service.params?.[0], page: current, pageSize });
+      let sort = sorter.order ? (sorter.order ===  `ascend` ? [sorter.field] : [`-${sorter.field}`]) : globalSort || null;
+
+      ctx.service.run({ ...ctx.service.params?.[0], page: current, pageSize, sort });
     },
   };
 };

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

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

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

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 (
     <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')}

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

@@ -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}

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

@@ -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);