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>
2024-06-13 15:00:04 +08:00 · 2024-06-13 15:00:04 +08:00 · 64741b1726
commit 64741b1726
parent 725b466d62
6 changed files with 162 additions and 148 deletions
--- a/packages/core/client/src/modules/blocks/data-blocks/table/hooks/useTableBlockProps.tsx
+++ b/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;
--- a/packages/core/client/src/schema-component/antd/association-field/SubTabs/InternalCollapse.tsx
+++ b/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) {
-        leftRef.current?.querySelector('#parent-item-' + item.id).scrollIntoView({
+      if (inView && leftRef.current) {
+        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}
--- a/packages/core/client/src/schema-component/antd/association-field/SubTabs/styles.ts
+++ b/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;
-          padding-left: 2px;
-          padding-right: 2px;
+          margin: 5px 0 5px;
        }
        div:last-of-type {
          margin-bottom: 0;
--- a/packages/plugins/@hera/plugin-approval/src/client/usage/approval-block/launch/Sm.ApprovalBlockLaunch.tsx
+++ b/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,
+            },
+          },
+        },
      },
    },
  },
--- a/packages/plugins/@hera/plugin-approval/src/client/usage/approval-block/todos/Sm.ApprovalBlockTodos.tsx
+++ b/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,
-            },
-          },
-        },
      },
    },
  },
--- a/packages/plugins/@tachybase/plugin-workflow-notice/src/client/usage/NoticeCenter.schema.tsx
+++ b/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,
-            },
-          },
-        },
      },
    },
  },