fix: table appends (#1099)

Reviewed-on: daoyoucloud/tachybase#1099

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) => {

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 componentSettings = app.schemaSettingsManager.get(`fieldSettings:component:${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');
         return componentSettings?.items || [];
       },
     },

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;

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

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

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;
 

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 {
-import { ISchema, useField, useFieldSchema } from '@tachybase/schema';
+  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 originFieldSchema = useFieldSchema();
-  const field = useField();
+  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);
+        set(fieldSchema['x-component-props'], '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;
-        });
         dn.emit('patch', {
           schema: {
             ['x-uid']: fieldSchema['x-uid'],
-            'x-component-props': field.componentProps,
+            'x-component-props': fieldSchema['x-component-props'],
           },
         });
 

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';

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,