formily schema 布局实例

横向+纵向布局

横向+纵向布局平级使用 FormLayout & FormLayout ，FormGrid 包裹需要展示在同一行的2个组件

同一行展示2个组件

使用FormGrid组件包裹FormItem，FormGrid的属性中maxWidth属性优先于maxColumns，用maxWidth使2个FormItem贴贴

Checkbox组件展示title

Checkbox 组件可以使用Children属性设置后面的文案。 也可以使用title属性，但是默认在后面，使用的话还得设置一下

import { Schema } from '@formily/react';

export const OutstandingPremiumConfigSchema = new Schema({
  type: 'object',
  properties: {
    verticleLayout: {
      type: 'void',
      'x-component': 'FormLayout',
      'x-component-props': {
        colon: false,
        layout: 'vertical',
      },
      properties: {
        productCodes: { }
      },
    },
    horizontalLayout: {
      type: 'void',
      'x-component': 'FormLayout',
      'x-component-props': {
        colon: false,
        layout: 'horizontal',
      },
      properties: {
        outstandingPremiumCollectionPeriod: {
        },
        allowUncollectedPremiumDeductionFromPaidClaim: {
        },
        FormGrid: {
          type: 'void',
          'x-component': 'FormGrid',
          'x-component-props': {
            maxColumns: 4,
            minColumns: 2,
            colWrap: false,
            maxWidth: 220,
          },
          properties: {
            paidClaimGeFixedAmount: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Checkbox',
              'x-decorator-props': {
                valuePropName: 'checked',
              },
              'x-component-props': {
                children: `{{  t('Paid Claim ≥ Fixed Amount') }}`,
              },
            },
            amount: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'AmountInput',
            },
          },
        },

        allowManualPremiumCollection: {
      },
    },
  },
});

ArrayTable

ArrayItem & Add & Remove

设置外层字段为dependency