fix: table appends (#1099)

Reviewed-on: daoyoucloud/tachybase#1099
This commit is contained in:
sealday 2024-05-31 20:03:14 +08:00
parent dceee2ea0b
commit c8b5005bd7
9 changed files with 151 additions and 59 deletions

View File

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

View File

@ -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 || [];
},
},

View File

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

View File

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

View File

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

View File

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

View File

@ -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'],
},
});

View File

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

View File

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