fix: table appends (#1099)

Reviewed-on: daoyoucloud/tachybase#1099
2024-05-31 20:03:14 +08:00 · 2024-05-31 20:03:14 +08:00 · c8b5005bd7
commit c8b5005bd7
parent dceee2ea0b
9 changed files with 151 additions and 59 deletions
--- a/packages/core/client/src/block-provider/hooks/index.ts
+++ b/packages/core/client/src/block-provider/hooks/index.ts
@ -1187,6 +1187,13 @@ export const useAssociationNames = (dataSource?: string) => {
      const isAssociationField =
        collectionField && ['hasOne', 'hasMany', 'belongsTo', 'belongsToMany'].includes(collectionField.type);

+      // 从属性中取 appends
+      if (s['x-component-props']?.['appends']) {
+        _.forEach(s['x-component-props']?.['appends'], (append) => {
+          appends.add(append);
+        });
+      }
+
      // 根据联动规则中条件的字段获取一些 appends
      if (s['x-linkage-rules']) {
        const collectAppends = (obj) => {
--- a/packages/core/client/src/modules/blocks/data-blocks/table/tableColumnSettings.tsx
+++ b/packages/core/client/src/modules/blocks/data-blocks/table/tableColumnSettings.tsx
@ -298,25 +298,7 @@ export const tableColumnSettings = new SchemaSettings({
      useChildren() {
        const app = useApp();
        const fieldComponentName = useFieldComponentName();
-        console.log('🚀 ~ file: tableColumnSettings.tsx:300 ~ useChildren ~ fieldComponentName:', fieldComponentName);
-        const map = {
-          Select: 'Select',
-          DatePicker: 'DatePicker',
-          Nester: 'Nester',
-          SubTable: 'SubTable',
-          Picker: 'Picker',
-          PopoverNester: 'PopoverNester',
-          Tag: 'Tag',
-        };
-        const componentSettings = app.schemaSettingsManager.get(
-          `fieldSettings:component:${map[fieldComponentName] || fieldComponentName}`,
-        );
-        console.log(
-          '🚀 ~ file: tableColumnSettings.tsx:313 ~ useChildren ~ componentSettings:',
-          componentSettings,
-          app.schemaSettingsManager.getAll(),
-        );
-        console.log(`fieldSettings:component:${map[fieldComponentName] || fieldComponentName}`, 'fieldComponentName');
+        const componentSettings = app.schemaSettingsManager.get(`fieldSettings:component:${fieldComponentName}`);
        return componentSettings?.items || [];
      },
    },
--- a/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx
@ -1,10 +1,20 @@
-import { ArrayTable } from '@tachybase/components';
-import { Field, onFieldValueChange } from '@tachybase/schema';
-import { ISchema, useField, useFieldSchema, useForm, useFormEffects } from '@tachybase/schema';
-import { isValid, uid } from '@tachybase/schema';
-import { Alert, Flex, ModalProps, Tag } from 'antd';
 import React, { useCallback, useMemo, useState } from 'react';
+import { ArrayTable } from '@tachybase/components';
+import {
+  Field,
+  ISchema,
+  isValid,
+  onFieldValueChange,
+  uid,
+  useField,
+  useFieldSchema,
+  useForm,
+  useFormEffects,
+} from '@tachybase/schema';
+
+import { Alert, Flex, ModalProps, Tag } from 'antd';
 import { useTranslation } from 'react-i18next';
+
 import { RemoteSelect, useCompile, useDesignable } from '../..';
 import { isInitializersSame, useApp } from '../../../application';
 import { usePlugin } from '../../../application/hooks';
@ -13,13 +23,15 @@ import { useSchemaToolbar } from '../../../application/schema-toolbar';
 import { useFormBlockContext } from '../../../block-provider';
 import {
  joinCollectionName,
-  useCollectionManager_deprecated,
  useCollection_deprecated,
+  useCollectionManager_deprecated,
 } from '../../../collection-manager';
+import { DataSourceProvider, useDataSourceKey } from '../../../data-source';
 import { FlagProvider } from '../../../flag-provider';
 import { SaveMode } from '../../../modules/actions/submit/createSubmitActionSettings';
 import { SchemaSettingOpenModeSchemaItems } from '../../../schema-items';
 import { GeneralSchemaDesigner } from '../../../schema-settings/GeneralSchemaDesigner';
+import { DefaultValueProvider } from '../../../schema-settings/hooks/useIsAllowToSetDefaultValue';
 import {
  SchemaSettingsActionModalItem,
  SchemaSettingsDivider,
@ -29,10 +41,8 @@ import {
  SchemaSettingsRemove,
  SchemaSettingsSwitchItem,
 } from '../../../schema-settings/SchemaSettings';
-import { DefaultValueProvider } from '../../../schema-settings/hooks/useIsAllowToSetDefaultValue';
 import { useLinkageAction } from './hooks';
 import { requestSettingsSchema } from './utils';
-import { DataSourceProvider, useDataSourceKey } from '../../../data-source';

 const MenuGroup = (props) => {
  return props.children;
--- a/packages/core/client/src/schema-component/antd/appends-tree-select/AppendsTreeSelectV2.tsx
+++ b/packages/core/client/src/schema-component/antd/appends-tree-select/AppendsTreeSelectV2.tsx
@ -88,7 +88,7 @@ function getCollectionFieldOptions(
  });
 }
 // XXX: 目前 AppendsTreeSelectV2 和 AppendsTreeSelect 都有特化逻辑, 需要整理出一个通用组件
-export const AppendsTreeSelectV2: React.FC<TreeSelectProps & AppendsTreeSelectPropsV2> = (props) => {
+export const AppendsTreeSelectV2 = (props: TreeSelectProps & AppendsTreeSelectPropsV2) => {
  const {
    title,
    value: propsValue,
@ -247,8 +247,6 @@ export const AppendsTreeSelectV2: React.FC<TreeSelectProps & AppendsTreeSelectPr

  return (
    <TreeSelect
-      // @ts-ignore
-      role="button"
      data-testid={`select-field${title ? `-${title}` : ''}`}
      value={filteredValue}
      placeholder={t('Select field')}
--- a/packages/core/client/src/schema-component/antd/table-v2/Table.Column.Decorator.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/Table.Column.Decorator.tsx
@ -57,20 +57,7 @@ export const TableColumnDecorator = (props) => {
    <SortableItem className={styles.designer}>
      <CollectionFieldContext.Provider value={collectionField}>
        <Designer fieldSchema={fieldSchema} uiSchema={uiSchema} collectionField={collectionField} />
-        {/* <RecursionField name={columnSchema.name} schema={columnSchema}/> */}
        <div role="button">{field?.title || compile(uiSchema?.title)}</div>
-        {/* <div
-        onClick={() => {
-          field.title = uid();
-          // columnSchema.title = field.title = field.title;
-          // refresh();
-          // field.query(`.*.${fieldSchema.name}`).take((f) => {
-          //   f.componentProps.dateFormat = 'YYYY-MM-DD';
-          // });
-        }}
-      >
-        Edit
-      </div> */}
      </CollectionFieldContext.Provider>
    </SortableItem>
  );
--- a/packages/core/client/src/schema-component/antd/table-v2/index.ts
+++ b/packages/core/client/src/schema-component/antd/table-v2/index.ts
@ -10,6 +10,7 @@ import { TableSelector } from './TableSelector';
 export * from './TableBlockDesigner';
 export * from './TableField';
 export * from './TableSelectorDesigner';
+export { useColumnSchema } from './Table.Column.Decorator';

 export const TableV2 = Table;

--- a/packages/plugins/@hera/plugin-core/src/client/features/custom-components/index.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/custom-components/index.tsx
@ -1,12 +1,23 @@
 import React from 'react';
-import { Plugin, SchemaSettings, SchemaSettingsModalItem, useCollection, useDesignable } from '@tachybase/client';
-import { ISchema, useField, useFieldSchema } from '@tachybase/schema';
+import {
+  Plugin,
+  SchemaSettings,
+  SchemaSettingsModalItem,
+  useCollection,
+  useColumnSchema,
+  useDesignable,
+} from '@tachybase/client';
+import { ISchema, useFieldSchema } from '@tachybase/schema';

 import { get, set } from 'lodash';

+import { useTranslation } from '../../locale';
+
 const SchemaSettingsAppends = () => {
-  const fieldSchema = useFieldSchema();
-  const field = useField();
+  const originFieldSchema = useFieldSchema();
+  const { fieldSchema: columnSchema } = useColumnSchema();
+  const fieldSchema = columnSchema ?? originFieldSchema;
+  const { t } = useTranslation();
  const c = useCollection();
  const { dn } = useDesignable();

@ -14,35 +25,37 @@ const SchemaSettingsAppends = () => {
    <SchemaSettingsModalItem
      key="appends"
      title="设置加载关联字段"
+      scope={{
+        fieldFilter(field) {
+          return ['belongsTo', 'hasOne'].includes(field.type);
+        },
+      }}
      schema={
        {
          type: 'object',
          title: '设置加载关联字段',
          properties: {
            appends: {
-              default: get(fieldSchema, 'x-component-props.service.params.appends', []),
+              default: get(fieldSchema, 'x-component-props.appends', []),
              'x-decorator': 'FormItem',
-              'x-component': 'Select',
+              'x-component': 'AppendsTreeSelect',
              'x-component-props': {
-                mode: 'multiple',
+                placeholder: t('Select context'),
+                popupMatchSelectWidth: false,
+                collection: `${c.dataSource && c.dataSource !== 'main' ? `${c.dataSource}:` : ''}${c.name}`,
+                multiple: true,
+                allowClear: false,
              },
-              enum: c?.fields.map((item) => item.name),
            },
          },
        } as ISchema
      }
      onSubmit={({ appends }) => {
-        set(field.componentProps, 'service.params.appends', appends);
-        fieldSchema['x-component-props'] = field.componentProps;
-        const path = field.path?.splice(field.path?.length - 1, 1);
-        field.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
-          f.componentProps.service = f.componentProps.service || { params: {} };
-          f.componentProps.service.params.appends = appends;
-        });
+        set(fieldSchema['x-component-props'], 'appends', appends ?? []);
        dn.emit('patch', {
          schema: {
            ['x-uid']: fieldSchema['x-uid'],
-            'x-component-props': field.componentProps,
+            'x-component-props': fieldSchema['x-component-props'],
          },
        });

--- a/packages/plugins/@hera/plugin-rental/src/client/custom-components/RecordDetails2.tsx
+++ b/packages/plugins/@hera/plugin-rental/src/client/custom-components/RecordDetails2.tsx
@ -0,0 +1,92 @@
+import React from 'react';
+import { FormPath, useField, useFieldSchema, useForm } from '@tachybase/schema';
+
+import { CustomComponentType, CustomFunctionComponent } from '@hera/plugin-core/client';
+import { Descriptions } from 'antd';
+import _ from 'lodash';
+
+import { formatQuantity } from '../../utils/currencyUtils';
+
+export const RecordDetails2: CustomFunctionComponent = () => {
+  const form = useForm();
+  const fieldSchema = useFieldSchema();
+  const field = useField();
+  const path: any = field.path.entire;
+  const fieldPath = path?.replace(`.${fieldSchema.name}`, '');
+  const itemPath = FormPath.parse('.', fieldPath).toString();
+
+  const item = form.getValuesIn(itemPath);
+
+  const displayItems = [];
+  const productItem = {};
+  const items = item?.items || [];
+
+  items.forEach((item) => {
+    if (!item.product) return;
+    const key = item.product.name;
+    const count = item.product.category.convertible ? item.count * item.product.ratio : item.count;
+    const unit = item.product.category.convertible ? item.product.category.conversion_unit : item.product.category.unit;
+
+    const weight = item.count * item.product.weight;
+    if (productItem[key]) {
+      productItem[key].count += count;
+      productItem[key].feeItems = productItem[key].feeItems.concat(item.fee_items || []);
+    } else {
+      productItem[key] = {
+        label: item.product.name,
+        sort: item.product.category.sort,
+        unit,
+        count,
+        weight: formatQuantity(weight, 2) + 'KG',
+        feeItems: item.fee_items || [],
+      };
+    }
+  });
+  for (const key in productItem) {
+    displayItems.push(productItem[key]);
+    productItem[key].children = formatQuantity(productItem[key].count, 2) + productItem[key].unit;
+    productItem[key].span = 1;
+    displayItems.push({
+      label: '理论重量',
+      children: [productItem[key].weight],
+    });
+
+    const children = [];
+    if (productItem[key].feeItems.length > 0) {
+      const feeItems = productItem[key].feeItems.reduce((prev, current) => {
+        if (current.product) {
+          if (!prev[current.product.label]) {
+            prev[current.product.label] = 0;
+          }
+          prev[current.product.label] += current.count;
+        }
+        return prev;
+      }, {});
+      productItem[key].span = 1;
+      for (const name in feeItems) {
+        if (children.length > 0) {
+          children.push(<br />);
+        }
+        children.push(name + ' ' + formatQuantity(feeItems[name], 2));
+      }
+    }
+    if (children.length > 0) {
+      displayItems.push({
+        label: '维修赔偿',
+        children,
+      });
+    } else {
+      displayItems.push({
+        label: '',
+        children,
+      });
+    }
+  }
+  displayItems.sort((a, b) => a.sort - b.sort);
+
+  return <Descriptions items={displayItems} column={3} />;
+};
+
+RecordDetails2.displayName = 'RecordDetails2';
+RecordDetails2.__componentType = CustomComponentType.CUSTOM_FIELD;
+RecordDetails2.__componentLabel = '记录单 - 详情2';
--- a/packages/plugins/@hera/plugin-rental/src/client/index.tsx
+++ b/packages/plugins/@hera/plugin-rental/src/client/index.tsx
@ -2,6 +2,7 @@ import { Plugin, useCollection } from '@tachybase/client';

 import { DetailChecks } from './custom-components/DetailChecks';
 import { RecordDetails } from './custom-components/RecordDetails';
+import { RecordDetails2 } from './custom-components/RecordDetails2';
 import { RecordFeeConvertedAmount } from './custom-components/RecordFeeConverted';
 import { ReadFeeConvertedAmount } from './custom-components/RecordFeeConvertedRead';
 import { RecordFeeScope } from './custom-components/RecordFeeScope';
@ -181,6 +182,7 @@ export class PluginRentalClient extends Plugin {
      RecordSummary,
      RecordTotalPrice,
      RecordDetails,
+      RecordDetails2,
      DetailChecks,
      PdfIsDoubleProvider,
      PrintStyleSetupInitializer,