fix: 修改子表格快捷添加的样式，审批表格的字段显示顺序，表格分页排序问题 (#1183)

Co-authored-by: sealday <zhanglin@daoyoucloud.com>
Reviewed-on: daoyoucloud/tachybase#1183
Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>

packages/core/client/src/modules/blocks/data-blocks/table/hooks/useTableBlockProps.tsx

@@ -1,18 +1,19 @@
-import { ArrayField } from '@tachybase/schema';
-import { useField, useFieldSchema } from '@tachybase/schema';
 import { useEffect } from 'react';
+import { ArrayField, useField, useFieldSchema } from '@tachybase/schema';
+
+import _ from 'lodash';
+
+import { findFilterTargets } from '../../../../../block-provider/hooks';
+import { useTableBlockContext } from '../../../../../block-provider/TableBlockProvider';
 import { useFilterBlock } from '../../../../../filter-provider/FilterProvider';
 import { mergeFilter } from '../../../../../filter-provider/utils';
 import { removeNullCondition } from '../../../../../schema-component';
-import { findFilterTargets } from '../../../../../block-provider/hooks';
-import { useTableBlockContext } from '../../../../../block-provider/TableBlockProvider';
-import _ from 'lodash';
 
 export const useTableBlockProps = () => {
   const field = useField<ArrayField>();
   const fieldSchema = useFieldSchema();
   const ctx = useTableBlockContext();
-  const globalSort = fieldSchema.parent?.['x-decorator-props']?.['params']?.['sort'];
+  const globalSort = fieldSchema.parent?.['x-decorator-props']?.['dragSortBy'];
   const { getDataBlocks } = useFilterBlock();
   const isLoading = ctx?.service?.loading;
   const params = ctx?.service?.params;

packages/core/client/src/schema-component/antd/association-field/SubTabs/InternalCollapse.tsx

@@ -20,8 +20,9 @@ export const ObservableItem = ({ item, onChange, leftRef }) => {
   const { ref } = useInView({
     threshold: 0.1,
     onChange: (inView: boolean) => {
-      if (inView) {
+      if (inView && leftRef.current) {
-        leftRef.current?.querySelector('#parent-item-' + item.id).scrollIntoView({
+        const currentId = '#parent-item-' + item.id;
+        leftRef.current.querySelector(currentId).scrollIntoView({
           behavior: 'auto',
           block: 'nearest',
           inline: 'start',
@@ -240,6 +241,17 @@ export const InternalTabs = observer((props) => {
                       block: 'nearest',
                       inline: 'start',
                     });
+                    const currentId = '#parent-item-' + item.id;
+                    ref.current.querySelector(currentId).scrollIntoView({
+                      behavior: 'auto',
+                      block: 'nearest',
+                      inline: 'start',
+                    });
+                    ref.current.querySelector(currentId).style.color = '#166cff';
+                    const allElements = ref.current.querySelectorAll('div:not(' + currentId + ')');
+                    allElements?.forEach(function (element: any) {
+                      element.style.color = '#1e1e1e';
+                    });
                   }}
                 >
                   {item.label}

packages/core/client/src/schema-component/antd/association-field/SubTabs/styles.ts

@@ -16,13 +16,14 @@ export const useStyles = createStyles(({ css }) => {
         /* 隐藏滚动条 微软/火狐 */
         -ms-overflow-style: none;
         scrollbar-width: none;
+        border-right: 2px solid #d4d4d4;
+        padding: 2px;
+        margin-right: 5px;
         div {
-          background-color: #ddd;
+          background-color: #ffffff;
           white-space: normal;
           cursor: pointer;
-          margin-bottom: 2px;
+          margin: 5px 0 5px;
-          padding-left: 2px;
-          padding-right: 2px;
         }
         div:last-of-type {
           margin-bottom: 0;

packages/plugins/@hera/plugin-approval/src/client/usage/approval-block/launch/Sm.ApprovalBlockLaunch.tsx

@@ -83,51 +83,6 @@ export const SchemaApprovalBlockLaunch = {
             },
           },
         },
-        workflow: {
-          type: 'void',
-          'x-decorator': 'TableV2.Column.Decorator',
-          'x-component': 'TableV2.Column',
-          'x-component-props': {
-            width: 200,
-          },
-          title: '{{t("Workflow", { ns: "workflow" })}}',
-          properties: {
-            workflow: {
-              'x-component': 'WorkflowColumn',
-              'x-read-pretty': true,
-            },
-          },
-        },
-        status: {
-          type: 'void',
-          'x-decorator': 'TableV2.Column.Decorator',
-          'x-component': 'TableV2.Column',
-          'x-component-props': {
-            width: 100,
-          },
-          title: '{{t("Status", { ns: "workflow" })}}',
-          properties: {
-            status: {
-              'x-component': 'CollectionField',
-              'x-read-pretty': true,
-            },
-          },
-        },
-        createdBy: {
-          type: 'void',
-          'x-decorator': 'TableV2.Column.Decorator',
-          'x-component': 'TableV2.Column',
-          'x-component-props': {
-            width: 140,
-          },
-          title: `{{t("Initiator", { ns: "${NAMESPACE}" })}}`,
-          properties: {
-            createdBy: {
-              'x-component': 'UserColumn',
-              'x-read-pretty': true,
-            },
-          },
-        },
         createdAt: {
           type: 'void',
           'x-decorator': 'TableV2.Column.Decorator',
@@ -156,6 +111,51 @@ export const SchemaApprovalBlockLaunch = {
             },
           },
         },
+        createdBy: {
+          type: 'void',
+          'x-decorator': 'TableV2.Column.Decorator',
+          'x-component': 'TableV2.Column',
+          'x-component-props': {
+            width: 140,
+          },
+          title: `{{t("Initiator", { ns: "${NAMESPACE}" })}}`,
+          properties: {
+            createdBy: {
+              'x-component': 'UserColumn',
+              'x-read-pretty': true,
+            },
+          },
+        },
+        status: {
+          type: 'void',
+          'x-decorator': 'TableV2.Column.Decorator',
+          'x-component': 'TableV2.Column',
+          'x-component-props': {
+            width: 100,
+          },
+          title: '{{t("Status", { ns: "workflow" })}}',
+          properties: {
+            status: {
+              'x-component': 'CollectionField',
+              'x-read-pretty': true,
+            },
+          },
+        },
+        workflow: {
+          type: 'void',
+          'x-decorator': 'TableV2.Column.Decorator',
+          'x-component': 'TableV2.Column',
+          'x-component-props': {
+            width: 200,
+          },
+          title: '{{t("Workflow", { ns: "workflow" })}}',
+          properties: {
+            workflow: {
+              'x-component': 'WorkflowColumn',
+              'x-read-pretty': true,
+            },
+          },
+        },
       },
     },
   },

packages/plugins/@hera/plugin-approval/src/client/usage/approval-block/todos/Sm.ApprovalBlockTodos.tsx

@@ -75,6 +75,58 @@ export const SchemaApprovalBlockTodos = {
             },
           },
         },
+        createdAt: {
+          type: 'void',
+          'x-decorator': 'TableV2.Column.Decorator',
+          'x-component': 'TableV2.Column',
+          'x-component-props': { width: 160 },
+          properties: {
+            createdAt: {
+              type: 'string',
+              'x-component': 'CollectionField',
+              'x-read-pretty': true,
+            },
+          },
+        },
+        summary: {
+          type: 'void',
+          'x-decorator': 'TableV2.Column.Decorator',
+          'x-component': 'TableV2.Column',
+          title: tval('Approval Summary'),
+          properties: {
+            summary: {
+              type: 'string',
+              'x-component': 'CollectionField',
+              'x-read-pretty': true,
+            },
+          },
+        },
+        user: {
+          type: 'void',
+          'x-decorator': 'TableV2.Column.Decorator',
+          'x-component': 'TableV2.Column',
+          'x-component-props': { width: 140 },
+          title: `{{t("Assignee", { ns: "${NAMESPACE}" })}}`,
+          properties: {
+            user: {
+              'x-component': 'UserColumn',
+              'x-read-pretty': true,
+            },
+          },
+        },
+        status: {
+          type: 'void',
+          'x-decorator': 'TableV2.Column.Decorator',
+          'x-component': 'TableV2.Column',
+          'x-component-props': { width: 100 },
+          title: '{{t("Status", { ns: "workflow" })}}',
+          properties: {
+            status: {
+              'x-component': 'ApprovalRecordStatusColumn',
+              'x-read-pretty': true,
+            },
+          },
+        },
         workflow: {
           type: 'void',
           'x-decorator': 'TableV2.Column.Decorator',
@@ -105,58 +157,6 @@ export const SchemaApprovalBlockTodos = {
             },
           },
         },
-        status: {
-          type: 'void',
-          'x-decorator': 'TableV2.Column.Decorator',
-          'x-component': 'TableV2.Column',
-          'x-component-props': { width: 100 },
-          title: '{{t("Status", { ns: "workflow" })}}',
-          properties: {
-            status: {
-              'x-component': 'ApprovalRecordStatusColumn',
-              'x-read-pretty': true,
-            },
-          },
-        },
-        user: {
-          type: 'void',
-          'x-decorator': 'TableV2.Column.Decorator',
-          'x-component': 'TableV2.Column',
-          'x-component-props': { width: 140 },
-          title: `{{t("Assignee", { ns: "${NAMESPACE}" })}}`,
-          properties: {
-            user: {
-              'x-component': 'UserColumn',
-              'x-read-pretty': true,
-            },
-          },
-        },
-        createdAt: {
-          type: 'void',
-          'x-decorator': 'TableV2.Column.Decorator',
-          'x-component': 'TableV2.Column',
-          'x-component-props': { width: 160 },
-          properties: {
-            createdAt: {
-              type: 'string',
-              'x-component': 'CollectionField',
-              'x-read-pretty': true,
-            },
-          },
-        },
-        summary: {
-          type: 'void',
-          'x-decorator': 'TableV2.Column.Decorator',
-          'x-component': 'TableV2.Column',
-          title: tval('Approval Summary'),
-          properties: {
-            summary: {
-              type: 'string',
-              'x-component': 'CollectionField',
-              'x-read-pretty': true,
-            },
-          },
-        },
       },
     },
   },

packages/plugins/@tachybase/plugin-workflow-notice/src/client/usage/NoticeCenter.schema.tsx

@@ -111,6 +111,45 @@ const schema = {
             },
           },
         },
+        createdAt: {
+          type: 'void',
+          'x-decorator': 'TableV2.Column.Decorator',
+          'x-component': 'TableV2.Column',
+          'x-component-props': { width: 160 },
+          properties: {
+            createdAt: {
+              type: 'string',
+              'x-component': 'CollectionField',
+              'x-read-pretty': true,
+            },
+          },
+        },
+        summary: {
+          type: 'void',
+          'x-decorator': 'TableV2.Column.Decorator',
+          'x-component': 'TableV2.Column',
+          title: tval('Summary'),
+          properties: {
+            summary: {
+              type: 'string',
+              'x-component': 'CollectionField',
+              'x-read-pretty': true,
+            },
+          },
+        },
+        user: {
+          type: 'void',
+          'x-decorator': 'TableV2.Column.Decorator',
+          'x-component': 'TableV2.Column',
+          'x-component-props': { width: 140 },
+          title: tval('The Notified Person'),
+          properties: {
+            user: {
+              'x-component': 'ColumnUser',
+              'x-read-pretty': true,
+            },
+          },
+        },
         workflow: {
           type: 'void',
           'x-decorator': 'TableV2.Column.Decorator',
@@ -154,45 +193,6 @@ const schema = {
         //     },
         //   },
         // },
-        user: {
-          type: 'void',
-          'x-decorator': 'TableV2.Column.Decorator',
-          'x-component': 'TableV2.Column',
-          'x-component-props': { width: 140 },
-          title: tval('The Notified Person'),
-          properties: {
-            user: {
-              'x-component': 'ColumnUser',
-              'x-read-pretty': true,
-            },
-          },
-        },
-        createdAt: {
-          type: 'void',
-          'x-decorator': 'TableV2.Column.Decorator',
-          'x-component': 'TableV2.Column',
-          'x-component-props': { width: 160 },
-          properties: {
-            createdAt: {
-              type: 'string',
-              'x-component': 'CollectionField',
-              'x-read-pretty': true,
-            },
-          },
-        },
-        summary: {
-          type: 'void',
-          'x-decorator': 'TableV2.Column.Decorator',
-          'x-component': 'TableV2.Column',
-          title: tval('Summary'),
-          properties: {
-            summary: {
-              type: 'string',
-              'x-component': 'CollectionField',
-              'x-read-pretty': true,
-            },
-          },
-        },
       },
     },
   },