@ywfe/materials-design/lowcode/yw-json-form/common/form-base-props.ts

YwDesign for lowcode

import { IProps } from '../../types';
import { hideProp } from '../../_utils';
import { BaseFormItemProps } from '../../_base';
import { layoutConfig, sizeConfig } from '../../_base/json-form-base-props';

export const formItemsProps: any = {
  name: 'items',
  title: { label: '表单项', tip: 'items | 表单项' },
  display: 'accordion',
  virtual: true,
  setter: {
    componentName: 'ArraySetter',
    props: {
      itemSetter: {
        componentName: 'ObjectSetter',
        props: {
          descriptor: 'title',
          config: {
            items: BaseFormItemProps,
          },
        },
        initialValue: () => {
          const mockProps: any = {};
          BaseFormItemProps.forEach((item) => {
            if (item.defaultValue) {
              if (typeof item.defaultValue === 'function') {
                mockProps[item.name] = item.defaultValue();
              } else {
                mockProps[item.name] = item.defaultValue;
              }
            }
          });
          return {
            component: 'Input',
            ...mockProps,
          };
        },
      },
    },
  },
};

const props: IProps[] = [
  {
    // name: 'globalConfig',
    title: { label: '全局配置', tip: 'globalConfig | 全局配置' },
    type: 'group',
    display: 'accordion',
    items: [
      {
        name: 'ref',
        condition: hideProp,
        setter: (target: any) => {
          if (!target?.getValue()) {
            target?.setValue(`pro-form-${target?.id}`);
          }
          return 'StringSetter';
        },
      },

      {
        name: 'editable',
        title: { label: '状态', tip: 'editable | 状态' },
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '预览态',
                value: false,
              },
              {
                title: '编辑态',
                value: true,
              },
            ],
          },
        },
        defaultValue: true,
      },
      {
        name: 'disabled',
        // virtual: true,
        title: { label: '禁用', tip: 'disabled | 禁用' },
        setter: 'BoolSetter',
        defaultValue: false,
      },
      sizeConfig,
      {
        name: 'layoutProps',
        title: { label: '表单布局', tip: 'layoutProps | 表单布局' },
        setter: {
          componentName: 'ObjectSetter',
          props: {
            config: layoutConfig,
          },
          initialValue: {
            labelCol: '6',
            wrapperCol: '10',
          },
        },
      },
      // {
      //   name: 'layoutProps.layout',
      //   title: {
      //     label: {
      //       type: 'i18n',
      //       zh_CN: '标签位置',
      //       en_US: 'Label Align',
      //     },
      //     tip: {
      //       type: 'i18n',
      //       zh_CN: '属性: labelAlign | 说明: 标签的位置\n@enumdesc 上, 左, 内',
      //       en_US: 'prop: labelAlign | description: label align',
      //     },
      //   },
      //   setter: {
      //     componentName: 'RadioGroupSetter',
      //     props: {
      //       options: [
      //         {
      //           title: '上',
      //           value: 'top',
      //         },
      //         {
      //           title: '左',
      //           value: 'left',
      //         },
      //       ],
      //     },
      //   },
      //   extraProps: {
      //     setValue: (target, value) => {
      //       if (value === 'top') {
      //         target.getProps().setPropValue('layoutProps', {
      //           layout: 'vertical',
      //           labelCol: '6',
      //           wrapperCol: '10',
      //         });
      //       } else if (value === 'left') {
      //         target.getProps().setPropValue('layoutProps', {
      //           layout: 'horizontal',
      //           labelCol: '6',
      //           wrapperCol: '10',
      //         });
      //       }
      //     },
      //   },
      //   defaultValue: 'top',
      // },
      // {
      //   name: 'colon',
      //   title: '是否展示冒号',
      //   setter: 'BoolSetter',
      // },
    ],
  },
  {
    name: 'initialValues',
    title: {
      label: '表单默认值',
      tip: 'initialValues | 表单默认值',
    },
    setter: {
      componentName: 'MixedSetter',
      props: {
        setters: ['JsonSetter', 'FunctionSetter'],
      },
    },
  },
  {
    name: 'onSubmit',
    title: { label: '提交事件', tip: 'onSubmit | 提交事件' },
    setter: {
      componentName: 'MixedSetter',
      props: {
        setters: [
          {
            componentName: 'SchemaFunctionSetter',
            props: {
              title: 'getDataSource',
              async: true,
              properties: {
                input: {
                  type: 'object',
                  properties: {
                    values: {
                      type: 'object',
                    },
                  },
                  required: ['values'],
                },
                body: {
                  type: 'array',
                  items: [
                    {
                      type: 'Function',
                      properties: {
                        template: 'RequestFunction',
                        variable: 'requestRes',
                        extraProps: {
                          params: '{{values}}',
                        },
                      },
                    },
                    {
                      type: 'Function',
                      properties: {
                        template: 'HistoryPushFunction',
                        extraProps: {
                          url: '',
                          params: '{{undefined}}',
                          hash: '{{undefined}}',
                        },
                      },
                    },
                  ],
                },
              },
            },
          },
        ],
      },
    },
  },
  // {
  //   name: 'getFormValues',
  //   title: {
  //     label: '动态获取表单数据',
  //     tip: 'getFormValues | 动态获取表单数据',
  //   },
  //   setter: 'FunctionSetter',
  // },
  // {
  //   name: '_getFormData',
  //   title: {
  //     label: '动态数据源',
  //     tip: '_getFormData | 动态数据源',
  //   },
  //   setter: {
  //     componentName: 'MixedSetter',
  //     props: {
  //       setters: ['DatasourceSetter', 'ExpressionSetter'],
  //     },
  //   },
  // },
  formItemsProps,
];

export default props;