feat: support-business-fields (#879)

Reviewed-on: daoyoucloud/tachybase#879

packages/plugins/@hera/plugin-rental/src/client/index.tsx

@@ -50,6 +50,7 @@ import {
 } from './schema-initializer/actions/RecordPrintSetupMargingTopInitializer';
 import { UnusedRecordsBlockHelper } from './schema-initializer/blocks/UnusedRecordsBlockInitializer';
 import { MovementFieldInterface } from './interfaces/movement';
+import { Movement } from './schema-components/Movement';
 export class PluginRentalClient extends Plugin {
   locale: Locale;
   async afterAdd() {}
@@ -167,6 +168,7 @@ export class PluginRentalClient extends Plugin {
     this.app.addComponents({
       RecordFeeConvertedAmount,
       ReadFeeConvertedAmount,
+      Movement,
       RecordFeeScope,
       RecordItemValuationQuantity,
       RecordItemWeight,

packages/plugins/@hera/plugin-rental/src/client/interfaces/movement.ts

@@ -1,5 +1,6 @@
 import { CollectionFieldInterface, dataSource, defaultProps, operators } from '@nocobase/client';
 import { tval } from '../locale';
+import { Field, uid } from '@nocobase/schema';
 
 export class MovementFieldInterface extends CollectionFieldInterface {
   name = 'movement';
@@ -11,14 +12,137 @@ export class MovementFieldInterface extends CollectionFieldInterface {
     type: 'string',
     uiSchema: {
       type: 'string',
-      'x-component': 'Radio.Group',
+      'x-component': 'Movement',
     },
   };
   availableTypes = ['string', 'integer', 'boolean', 'integer'];
-  hasDefaultValue = true;
   properties = {
     ...defaultProps,
-    // 'uiSchema.enum': dataSource,
+    'uiSchema.left': {
+      type: 'string',
+      title: tval('Left part'),
+      required: true,
+      'x-component': 'Expression',
+      'x-decorator': 'FormItem',
+      'x-component-props': {
+        useCurrentFields: '{{ useCurrentFields }}',
+      },
+    },
+    'uiSchema.righ': {
+      type: 'string',
+      title: tval('Right part'),
+      required: true,
+      'x-component': 'Expression',
+      'x-decorator': 'FormItem',
+      'x-component-props': {
+        useCurrentFields: '{{ useCurrentFields }}',
+      },
+    },
+    'uiSchema.enum': {
+      type: 'array',
+      title: tval('Options'),
+      'x-decorator': 'FormItem',
+      'x-component': 'ArrayTable',
+      'x-component-props': {
+        pagination: {
+          pageSize: 1000,
+        },
+      },
+      items: {
+        type: 'object',
+        properties: {
+          column1: {
+            type: 'void',
+            'x-component': 'ArrayTable.Column',
+            'x-component-props': { width: 50, title: '', align: 'center' },
+            properties: {
+              sort: {
+                type: 'void',
+                'x-component': 'ArrayTable.SortHandle',
+              },
+            },
+          },
+          column2: {
+            type: 'void',
+            'x-component': 'ArrayTable.Column',
+            'x-component-props': { title: tval('Option value') },
+            properties: {
+              value: {
+                type: 'string',
+                required: true,
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+                'x-reactions': (field: Field) => {
+                  if (!field.initialValue) {
+                    field.initialValue = uid();
+                  }
+                },
+              },
+            },
+          },
+          column3: {
+            type: 'void',
+            'x-component': 'ArrayTable.Column',
+            'x-component-props': { title: tval('Option label') },
+            properties: {
+              label: {
+                type: 'string',
+                required: true,
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+              },
+            },
+          },
+          column5: {
+            type: 'void',
+            'x-component': 'ArrayTable.Column',
+            'x-component-props': {
+              title: '',
+              dataIndex: 'operations',
+              fixed: 'right',
+            },
+            properties: {
+              item: {
+                type: 'void',
+                'x-component': 'FormItem',
+                properties: {
+                  remove: {
+                    type: 'void',
+                    'x-component': 'ArrayTable.Remove',
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      properties: {
+        add: {
+          type: 'void',
+          'x-component': 'ArrayTable.Addition',
+          'x-component-props': {
+            randomValue: true,
+          },
+          title: tval('Add option'),
+        },
+      },
+    },
+    defaultValue: {
+      type: 'string',
+      title: tval('default value'),
+      required: true,
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio.Group',
+      'x-reactions': {
+        dependencies: ['.uiSchema.enum'],
+        when: '{{$deps.length > 0}}',
+        fulfill: {
+          schema: {
+            enum: '{{ $deps[0].map((item) => ({label: item.label, value: item.value})) }}',
+          },
+        },
+      },
+    },
   };
   filterable = {
     operators: operators.enumType,

packages/plugins/@hera/plugin-rental/src/client/schema-components/Movement.tsx

@@ -0,0 +1,45 @@
+import { useCollectionField } from '@nocobase/client';
+import { connect, isValid, mapProps, mapReadPretty, useField } from '@nocobase/schema';
+import { Radio, Tag } from 'antd';
+import React from 'react';
+import { useEffect } from 'react';
+
+export const Movement = connect(
+  Radio.Group,
+  mapProps(
+    {
+      dataSource: 'options',
+    },
+    (props: any, field: any) => {
+      useEffect(() => {
+        const defaultOption = field.dataSource?.find((option) => option.value === props.value);
+        if (defaultOption) {
+          field.setValue(defaultOption.value);
+        }
+      }, [props.value, field.dataSource]);
+      return {
+        ...props,
+      };
+    },
+  ),
+  mapReadPretty((props) => {
+    if (!isValid(props.value)) {
+      return <div></div>;
+    }
+    const { value } = props;
+    const field = useField<any>();
+    const collectionField = useCollectionField();
+    const dataSource = field.dataSource || collectionField?.uiSchema.enum || [];
+    return (
+      <div>
+        {dataSource
+          .filter((option) => option.value === value)
+          .map((option, key) => (
+            <Tag key={key} color={option.color} icon={option.icon}>
+              {option.label}
+            </Tag>
+          ))}
+      </div>
+    );
+  }),
+);