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

YwDesign for lowcode

import { getPropValueWithPath, getPropsByDependence, uuid } from '../_utils';
import { IPublicTypeFieldConfig } from '@alilc/lowcode-types';
export const primaryKeyConfig = {
  name: 'primaryKey',
  title: { label: '编号', tip: 'primaryKey | 编号' },
  condition: () => false,
  setter: {
    componentName: 'StringSetter',
    initialValue: `id_${uuid()}`,
  },
};

// 基础组件
const baseComponent = [
  {
    label: '输入框',
    value: 'Input',
  },
  {
    label: '长文本输入框',
    value: 'TextArea',
  },
  {
    label: '选择器',
    value: 'Select',
  },
  {
    label: '搜索框',
    value: 'SearchSelect',
  },
  {
    label: '级联选择器',
    value: 'CascaderSelect',
  },
  {
    label: '类目选择器',
    value: 'CategorySelect',
  },
  {
    label: '开关',
    value: 'Switch',
  },
  {
    label: '复选框',
    value: 'Checkbox',
  },
  {
    label: '单选按钮',
    value: 'RadioGroup',
  },
  {
    label: '复选组合',
    value: 'CheckboxGroup',
  },
  {
    label: '数字输入框',
    value: 'NumberPicker',
  },
  {
    label: '数字范围输入框',
    value: 'NumberRangePicker',
  },
  {
    label: '时间',
    value: 'TimePicker',
  },
  {
    label: '日期时间',
    value: 'DateTimePicker',
  },
  {
    label: '日期',
    value: 'DatePicker',
  },
  {
    label: '月份',
    value: 'MonthPicker',
  },
  {
    label: '时间范围',
    value: 'TimeRangePicker',
  },
  {
    label: '日期范围',
    value: 'DateRangePicker',
  },
  // {
  //   label: 'DateRangeGroup',
  //   value: 'DateRangeGroup',
  // },
  {
    label: '月范围',
    value: 'MonthRangePicker',
  },
  {
    label: '日期时间范围',
    value: 'DateTimeRangePicker',
  },
  {
    label: '树选择器',
    value: 'TreeSelect',
  },
];

// 预览组件
const previewComponent = [
  {
    label: '文本',
    value: 'PreviewText.Input',
  },
  {
    label: '选择项',
    value: 'PreviewText.Select',
  },
  {
    label: '树选择项',
    value: 'PreviewText.TreeSelect',
  },
  {
    label: '级联选择项',
    value: 'PreviewText.Cascader',
  },
  {
    label: '日期',
    value: 'PreviewText.DatePicker',
  },
  {
    label: '日期范围',
    value: 'PreviewText.DateRangePicker',
  },
  {
    label: '时间',
    value: 'PreviewText.TimePicker',
  },
  {
    label: '时间范围',
    value: 'PreviewText.TimeRangePicker',
  },
  {
    label: '数字',
    value: 'PreviewText.NumberPicker',
  },
];
// 组件
const formItemListProps = {
  name: 'component',
  title: { label: '表单项组件', tip: 'component | 表单项组件' },
  defaultValue: 'Input',
  // important: true,
  supportVariable: false,
  setter: {
    componentName: 'SelectSetter',
    props: {
      options: [
        ...baseComponent,
        {
          label: 'InputGroup',
          value: 'InputGroup',
        },
        {
          label: 'RCArrayTable',
          value: 'RCArrayTable',
        },
        {
          label: 'RCArrayItems',
          value: 'RCArrayItems',
        },
        {
          label: 'FormGrid',
          value: 'FormGrid',
        },
        {
          label: 'FormGroup',
          value: 'FormGroup',
        },
        // {
        //   label: 'OrgSeletor',
        //   value: 'OrgSeletor',
        // },
        // {
        //   label: 'EmpSelector',
        //   value: 'EmpSelector',
        // },
        {
          label: '自定义组件',
          value: '',
        },
      ],
    },
  },
  extraProps: {
    // setValue: (target, value) => {
    // console.log('value', value);
    // // 组件补充
    // switch (value) {
    //   case 'Upload':
    //     target.parent.setPropValue('customComponent', {
    //       type: 'JSSlot',
    //       params: ['props', 'value', 'field', 'schema'],
    //       value: [
    //         {
    //           componentName: 'YwUpload',
    //           id: `node_${uuid()}`,
    //           props: {
    //             isOss: true,
    //             securityType: 'public',
    //             ossDir: '/common',
    //             onChange: {
    //               type: 'JSExpression',
    //               value: '(res)=>{ this.field.setValue(res[0]?.url || "")}',
    //             },
    //           },
    //         },
    //       ],
    //       id: `node_${uuid()}`,
    //     });
    //     break;
    //   case '':
    //   default:
    //     break;
    // }
    // },
  },
};

export const customComponentProps = {
  title: { label: '自定义组件', tip: 'customComponent | 自定义组件' },
  name: '_render',
  supportVariable: false,
  defaultValue: null,
  setter: {
    componentName: 'SlotSetter',
    title: '自定义组件插槽',
    hideParams: true,
    initialValue: {
      type: 'JSSlot',
      params: ['props', 'value', 'field', 'schema'],
      value: [],
    },
  },
  condition: (target: any) => {
    return !getPropValueWithPath(target, '.component');
  },
};

// export const writeOnlyProps = {
//   title: { label: '是否只写', tip: 'writeOnly | 自定义组件' },
//   name: 'writeOnly',
//   supportVariable: false,
//   condition: (target: any) => {
//     return [
//       'Input',
//       'Select',
//       'TreeSelect',
//       'DatePicker',
//       'DateRangePicker',
//       'TimePicker',
//       'TimeRangePicker',
//       'NumberPicker',
//     ].includes(getPropValueWithPath(target, '.component'));
//   },
//   extraProps: {
//     setValue: () => {},
//   },
// };
const labelConfig = {
  name: 'title',
  title: { label: '标题', tip: 'title｜ 标题' },
  display: 'inline',
  defaultValue: '表单项',
  isRequired: true,
  supportVariable: false,
  setter: {
    componentName: 'StringSetter',
    props: {
      // options: window.TitleOptions,
      placeholder: '请输入',
    },
  },
  important: true,
};

const nameConfig = {
  name: 'name',
  title: {
    label: '字段标识',
    tip: 'name | 字段标识',
  },
  important: false,
  supportVariable: false,
  defaultValue: uuid(),
  setter: {
    componentName: 'StringSetter',
    props: {
      placeholder: '请输入字段英文名称',
    },
  },
};

const typeConfig = {
  name: 'type',
  title: { label: '数据类型', tip: 'type | 数据类型' },
  supportVariable: false,
  setter: {
    componentName: 'SelectSetter',
    props: {
      options: [
        {
          label: 'string',
          value: 'string',
        },
        {
          label: 'object',
          value: 'object',
        },
        {
          label: 'array',
          value: 'array',
        },
        {
          label: 'void',
          value: 'void',
        },
      ],
    },
    initialValue: 'string',
  },
  extraProps: {
    setValue: (target, value) => {
      target.parent.setPropValue('decorator', value === 'void' ? 'void' : 'FormItem');
    },
  },
};

export const sizeConfig = {
  name: 'size',
  supportVariable: false,
  title: {
    label: '尺寸',
    tip: 'size | 单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。',
  },
  setter: {
    componentName: 'RadioGroupSetter',
    props: {
      options: [
        { label: '小', value: 'small' },
        { label: '中', value: 'medium' },
        { label: '大', value: 'large' },
      ],
    },
  },
  defaultValue: 'medium',
};

export const layoutConfig = [
  {
    name: 'layoutProps.labelCol',
    supportVariable: false,
    title: { label: '标签宽度', tip: 'labelCol | 标签宽度' },
    setter: {
      componentName: 'NumberSetter',
      initialValue: 6,
    },
  },
  {
    name: 'layoutProps.wrapperCol',
    supportVariable: false,
    title: { label: '表单项宽度', tip: 'wrapperCol | 表单项宽度' },
    setter: {
      componentName: 'NumberSetter',
      initialValue: 10,
    },
  },
  {
    name: 'layoutProps.layout',
    supportVariable: false,
    title: { label: '标签位置', tip: 'layout | 标签位置' },
    setter: {
      componentName: 'RadioGroupSetter',
      props: {
        options: [
          {
            title: '左',
            value: 'horizontal',
          },
          {
            title: '上',
            value: 'vertical',
          },
        ],
      },
    },
  },
];

// const childFormConfig = {
//   name: 'childForm',
//   title: '开启子表单',
//   setter: {
//     componentName: 'SlotSetter',
//     initialValue: {
//       type: 'JSSlot',
//       visible: false,
//       value: [
//         {
//           componentName: 'ChildForm',
//           props: {
//             primaryKey: String(Math.floor(Math.random() * 10000)),
//             placeholder: '请在右侧面板添加表单项+',
//             placeholderStyle: {
//               height: '38px',
//               color: '#0088FF',
//               background: '#d8d8d836',
//               border: 0,
//               gridArea: 'span 4 / span 4',
//             },
//             columns: 3,
//             labelCol: {
//               fixedSpan: 4,
//             },
//             labelAlign: 'top',
//             emptyContent: '添加表单项',
//           },
//           children: [...new Array(3).keys()].map((item) => ({
//             componentName: 'FormInput',
//             props: {
//               formItemProps: {
//                 primaryKey: String(Math.floor(Math.random() * 10000) + item),
//                 label: '表单项',
//                 size: 'medium',
//                 device: 'desktop',
//                 fullWidth: true,
//               },
//               placeholder: '请输入',
//             },
//           })),
//         },
//       ],
//     },
//   },
// };

// const enumComponentsList = ['RadioGroup', 'Select', 'CheckboxGroup'];

const enumConfig: any = {
  name: 'enum',
  title: { label: '枚举数据', tip: 'enum | 枚举出表单项可选择的值' },
  display: 'accordion',
  extraProps: {
    defaultCollapsed: true,
  },
  condition: (target: any) => {
    return enumComponentsList.includes(getPropValueWithPath(target, '.component'));
  },
  defaultValue: [],
  setter: {
    componentName: 'ArraySetter',
    props: {
      itemSetter: {
        componentName: 'ObjectSetter',
        props: {
          descriptor: 'value',
          config: {
            items: [
              {
                name: 'label',
                display: 'inline',
                title: { label: '名称', tip: 'label | 名称' },
                setter: {
                  componentName: 'StringSetter',
                  props: {
                    placeholder: '请输入',
                  },
                },
                supportVariable: false,
                isRequired: true,
              },
              {
                name: 'value',
                display: 'inline',
                title: { label: '值', tip: 'value | 值' },
                setter: {
                  componentName: 'MixedSetter',
                  props: {
                    setters: ['StringSetter', 'NumberSetter'],
                  },
                },
                supportVariable: false,
                isRequired: true,
              },
            ],
          },
        },
        initialValue: () => {
          return {
            label: '枚举项',
            value: `id-${uuid()}`,
          };
        },
      },
    },
  },
};

export const descriptionProps = {
  title: { label: '描述', tip: 'description | 描述' },
  name: 'description',
  setter: {
    componentName: 'StringSetter',
    props: {
      placeholder: '请输入',
    },
  },
  supportVariable: false,
};

export const defaultValueProps = {
  title: { label: '默认值', tip: 'defaultValue | 默认值' },
  name: 'defaultValue',
  setter: {
    componentName: 'MixedSetter',
    props: {
      setters: [
        {
          componentName: 'StringSetter',
          props: {
            placeholder: '请输入',
          },
        },
        'NumberSetter',
        'BoolSetter',
      ],
    },
  },
  // setter: 'CustomJsonSetter',
  // supportVariable: false,
};

export const readOnlyProps = {
  title: { label: '只读', tip: 'readOnly | 只读' },
  name: 'readOnly',
  setter: 'BoolSetter',
  supportVariable: false,
};
export const requiredProps = {
  title: { label: '必填', tip: 'required | 必填' },
  name: 'required',
  setter: 'BoolSetter',
  supportVariable: false,
};
export const disabledProps = {
  title: { label: '禁用', tip: 'disabled | 禁用' },
  name: 'disabled',
  setter: 'BoolSetter',
};

export const previewProps = {
  title: { label: '预览态', tip: '_preview | 预览态' },
  name: '_preview',
  setter: 'BoolSetter',
  condition: (target) => {
    return previewComponent
      .map((v) => v.value.split('.')[1])
      .includes(getPropValueWithPath(target, '.component'));
  },
};
// export const minItemsProps = {
//   title: { label: '最小条目数', tip: 'minItems | 最小条目数' },
//   name: 'minItems',
//   setter: 'NumberSetter',
//   supportVariable: false,
//   condition: (target: any) => {
//     return selectComponentsList.includes(getPropValueWithPath(target, '..component'));
//   },
// };
// export const maxItemsProps = {
//   title: { label: '最大条目数', tip: 'maxItems | 最大条目数' },
//   name: 'maxItems',
//   setter: 'NumberSetter',
//   supportVariable: false,
//   condition: (target: any) => {
//     return selectComponentsList.includes(getPropValueWithPath(target, '..component'));
//   },
// };
export const rulesProps = {
  supportVariable: false,
  title: { label: '校验规则', tip: 'rules | 校验规则' },
  name: 'rules',

  setter: {
    componentName: 'RulesSetter',
  },
};
export const decoratorProps = {
  name: 'decorator',
  title: { label: '表单装饰器', tip: 'decorator | 表单装饰器 默认通用，带字段校验布局配置等' },
  defaultValue: 'FormItem',
  setter: {
    componentName: 'RadioGroupSetter',
    props: {
      options: [
        {
          label: '通用',
          value: 'FormItem',
        },
        {
          label: '无',
          value: 'void',
        },
      ],
    },
  },
  supportVariable: false,
};
export const propsProps = {
  title: { label: '布局配置', tip: 'props | 布局配置' },
  name: 'props',
  display: 'popup',
  setter: {
    componentName: 'ObjectSetter',
    props: {
      config: {
        items: [
          {
            name: 'gridSpan',
            display: 'block',
            title: {
              label: '⽹格布局占宽',
              tip: 'gridSpan | gridSpan',
            },
            propType: 'number',
            setter: 'NumberSetter',
            supportVariable: false,
          },
          {
            name: 'labelCol',
            display: 'block',
            title: {
              label: '标签所占列数',
              tip: 'labelCol | 标签⽹格所占列数，和内容列数加起来总和为 24',
            },
            propType: 'number',
            setter: 'NumberSetter',
            supportVariable: false,
          },
          {
            name: 'wrapperCol',
            display: 'block',
            title: {
              label: '内容所占列数',
              tip: 'wrapperCol | 内容⽹格所占列数，和标签列数加起来总和为 24',
            },
            propType: 'number',
            setter: 'NumberSetter',
            supportVariable: false,
          },
          {
            name: 'labelAlign',
            display: 'block',
            title: {
              label: '标签对齐方式',
              tip: 'labelAlign | 标签文本对齐方式',
            },
            propType: 'string',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    label: '左对齐',
                    value: 'left',
                  },
                  {
                    label: '右对齐',
                    value: 'right',
                  },
                ],
              },
            },
            supportVariable: false,
          },
          {
            name: 'colon',
            display: 'block',
            title: { label: '冒号', tip: 'colon | 冒号' },
            setter: 'BoolSetter',
            supportVariable: false,
          },
          {
            name: 'asterisk',
            display: 'block',
            title: { label: '星号', tip: 'asterisk | 星号' },
            setter: 'BoolSetter',
            supportVariable: false,
          },
          {
            name: 'addonBefore',
            display: 'block',
            title: { label: '前缀内容', tip: 'addonBefore | 前缀内容' },
            setter: {
              componentName: 'StringSetter',
              props: {
                placeholder: '请输入',
              },
            },
            supportVariable: false,
          },
          {
            name: 'addonAfter',
            display: 'block',
            title: { label: '后缀内容', tip: 'addonAfter | 后缀内容' },
            setter: {
              componentName: 'SlotSetter',
              title: '表格内容插槽',
              hideParams: true,
              initialValue: {
                type: 'JSSlot',
                params: ['form'],
                value: [],
              },
            },
            supportVariable: false,
          },
          {
            name: 'feedbackLayout',
            display: 'block',
            title: { label: '反馈布局', tip: 'feedbackLayout | 反馈布局' },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    label: '松散模式',
                    value: 'loose',
                  },
                  {
                    label: '紧凑模式',
                    value: 'terse',
                  },
                  {
                    label: '无反馈',
                    value: 'none',
                  },
                ],
              },
            },
            supportVariable: false,
          },
          {
            name: 'bordered',
            display: 'block',
            title: { label: '边框', tip: 'bordered | 是否有边框' },
            setter: 'BoolSetter',
            supportVariable: false,
          },
          {
            name: 'tooltip',
            display: 'block',
            title: { label: '提示信息', tip: 'tooltip | 提示信息' },
            setter: {
              componentName: 'StringSetter',
              props: {
                placeholder: '请输入',
              },
            },
            supportVariable: false,
          },
        ],
      },
    },
  },
  supportVariable: false,
  condition: (target: any) => {
    return getPropValueWithPath(target, '.decorator') === 'FormItem';
  },
};

export const getDataSourceProps = {
  title: { label: '动态数据源', tip: 'getDataSource | 动态数据源' },
  name: 'getDataSource',
  supportVariable: false,
  setter: (target) => {
    const com = getPropValueWithPath(target, '..component');
    let properties = {};
    if (com === 'Select') {
      properties = {
        body: {
          type: 'array',
          items: [
            {
              type: 'Function',
              properties: {
                template: 'RequestFunction',
                variable: 'requestRes',
                extraProps: {
                  params: '{{undefined}}',
                },
              },
            },
          ],
        },
        output: 'requestRes.list',
      };
    } else {
      properties = {
        input: {
          type: 'object',
          properties: {
            value: {
              type: 'string',
            },
          },
          required: ['value'],
        },
        body: {
          type: 'array',
          items: [
            {
              type: 'Function',
              properties: {
                template: 'RequestFunction',
                variable: 'requestRes',
                extraProps: {},
              },
            },
          ],
        },
        output: 'requestRes.list',
      };
    }

    return {
      componentName: 'MixedSetter',
      props: {
        setters: [
          {
            componentName: 'SchemaFunctionSetter',
            props: {
              title: 'getDataSource',
              async: true,
              properties,
            },
          },
        ],
      },
    };
  },
};

// 拥有枚举选项组件
const enumComponentsList = ['RadioGroup', 'Select', 'CheckboxGroup', 'CheckboxGroup', 'RadioGroup'];
// 拥有select独有属性的组件
const selectComponentsList = ['Select', 'SearchSelect', 'CascaderSelect'];
// 业务选择器
const bizSelectorComponentsList = ['OrgSelector', 'EmpSelector'];
// 数字类型组件配置
const numberComponentsList = ['NumberPicker', 'NumberRangePicker'];
// 级联组件
const cascaderComponentsList = ['CascaderSelect', 'CategorySelect'];
// 拥有子组件的组件 复杂类型
const childComponentList = [
  'FormGroup',
  'RCArrayTable',
  'RCArrayItems',
  'ArrayCards',
  'InputGroup',
];

// const arrayComponentList = ['RCArrayTable', 'RCArrayItems'];
// 类input组件
const inputComponentsList = ['Input', 'NumberRangePicker'];

const inputComponentsProps = [
  {
    name: 'prefix',
    title: { label: '前缀', tip: 'prefix | 前缀' },
    supportVariable: false,
    setter: {
      componentName: 'StringSetter',
      props: {
        placeholder: '请输入',
      },
    },
  },
  {
    name: 'suffix',
    title: { label: '后缀', tip: 'suffix | 后缀' },
    supportVariable: false,
    setter: {
      componentName: 'StringSetter',
      props: {
        placeholder: '请输入',
      },
    },
  },
];
// TextArea专用componentProps
const textAreaComponentProps = [
  {
    title: { label: '显示文字个数', tip: 'showCount | 显示文字个数' },
    name: 'showCount',
    supportVariable: false,
    setter: 'BoolSetter',
  },
  {
    title: { label: '最长文字数量', tip: 'maxLength | 最长文字数量' },
    name: 'maxLength',
    supportVariable: false,
    setter: 'NumberSetter',
  },
];

// const enumComponentProps = [
//   {
//     name: 'dict',
//     title: { label: '字典数据源', tip: 'dict | 字典数据源' },
//     supportVariable: true,
//     setter: 'VariableSetter',
//   },
// ];

const selectComponentProps = [
  getDataSourceProps,
  {
    title: { label: '可搜索', tip: 'showSearch | 可搜索' },
    name: 'showSearch',
    setter: 'BoolSetter',
    supportVariable: false,
  },
  {
    name: 'optionFilterProp',
    title: { label: '搜索属性', tip: 'optionFilterProp | 搜索时过滤对应的option属性' },
    supportVariable: false,
    setter: {
      componentName: 'RadioGroupSetter',
      props: {
        options: [
          {
            label: 'label',
            value: 'label',
          },
          {
            label: 'value',
            value: 'value',
          },
        ],
      },
    },
  },
  {
    name: 'mode',
    title: { label: '多选', tip: 'mode | 设置Select的模式' },
    supportVariable: false,
    setter: {
      componentName: 'SelectSetter',
      props: {
        hasClear: true,
        options: [
          {
            label: '多选 | multiple',
            value: 'multiple',
          },
          {
            label: '标签 | tags',
            value: 'tags',
          },
          {
            label: '单选 | single',
            value: 'single',
          },
        ],
      },
    },
  },
  {
    title: {
      label: '节点文本',
      tip: 'labelInValue | 如果需要拿到选中的节点文本 label，可以使用 labelInValue 属性',
    },
    name: 'labelInValue',
    setter: 'BoolSetter',
    supportVariable: false,
  },
  {
    title: { label: '回显标签个数', tip: 'maxTagCount | 最多显示多少个标签' },
    name: 'maxTagCount',
    setter: 'NumberSetter',
    supportVariable: false,
  },

  {
    title: {
      label: '字段映射',
      tip: 'fieldNames | 自定义options中label value children的字段',
    },
    name: 'fieldNames',
    supportVariable: false,
    // display: 'entry',
    display: 'popup',
    extraProps: {
      defaultCollapsed: true,
    },
    setter: {
      componentName: 'ObjectSetter',
      props: {
        config: {
          items: [
            {
              display: 'block',
              name: 'label',
              title: { label: '名称', tip: 'label | options中的名称' },
              propType: 'string',
              setter: {
                componentName: 'StringSetter',
                props: {
                  placeholder: '请输入',
                },
              },
              supportVariable: false,
              isRequired: true,
            },
            {
              display: 'block',
              name: 'value',
              title: { label: '值', tip: 'value | options中的值' },
              propType: 'string',
              setter: {
                componentName: 'StringSetter',
                props: {
                  placeholder: '请输入',
                },
              },
              supportVariable: false,
              isRequired: true,
            },
            {
              display: 'block',
              name: 'children',
              title: { label: '当前节点的子节点', tip: 'children | 当前节点的子节点' },
              propType: 'string',
              supportVariable: false,
              setter: {
                componentName: 'StringSetter',
                props: {
                  placeholder: '请输入',
                },
              },
            },
          ],
        },
      },
    },
  },
];
const cascaderComponentsProps = [
  {
    title: { label: '支持多选节点', tip: 'multiple | 支持多选节点' },
    name: 'multiple',
    setter: 'BoolSetter',
    supportVariable: false,
  },
  {
    title: {
      label: '选中即发生改变',
      tip: 'changeOnSelect | 通过changeOnSelect设置是否选中即发生改变,允许只选中父节点，该属性仅在单选模式下有效',
    },
    name: 'changeOnSelect',
    setter: 'BoolSetter',
    supportVariable: false,
  },
  {
    title: 'loadData',
    name: 'loadData',
    setter: 'BoolSetter',
    supportVariable: false,
  },
  {
    title: {
      label: '动态加载选项',
      tip: 'loadData | 用于动态加载选项，无法与 showSearch 一起使用',
    },
    name: 'dynamicLoadData',
    supportVariable: false,
    setter: {
      componentName: 'FunctionSetter',
      props: {
        template: '(item) => item.label || item.value',
      },
    },
  },
];
const bizSelectorComponentProps = [
  ...selectComponentProps,
  {
    title: { label: '最小条目数', tip: 'minItems | 最小条目数' },
    name: 'minItems',
    setter: 'NumberSetter',
    supportVariable: false,
  },
  {
    title: { label: '最大条目数', tip: 'maxItems | 最大条目数' },
    name: 'maxItems',
    setter: 'NumberSetter',
    supportVariable: false,
  },
];
const numberComponentProps = [
  {
    name: 'formatter',
    title: { label: '格式化数据', tip: 'formatter | 格式化数据' },
    supportVariable: false,
    propType: 'func',
    setter: [
      {
        componentName: 'FunctionSetter',
        props: {
          template: 'formatter(value) { return "value + 1"}',
        },
      },
    ],
  },
];
const styleProps = {
  title: { label: '组件样式', tip: 'style | 组件样式' },
  name: 'style',
  setter: {
    componentName: 'CustomJsonSetter',
  },
  supportVariable: false,
};

const arrayComponentProps = [
  {
    title: { label: '是否有边框', tip: 'bordered | 建议关闭' },
    name: 'bordered',
    setter: 'BoolSetter',
    supportVariable: false,
  },
];
export const componentPropsProps = {
  title: { label: '组件属性配置', tip: 'componentProps | 组件属性配置' },
  name: 'componentProps',
  display: 'accordion',
  // extraProps: {
  //   defaultCollapsed: true,
  // },
  supportVariable: false,
  setter: {
    componentName: 'ObjectSetter',
    props: {
      config: {
        items: [
          styleProps,
          {
            name: 'placeholder',
            title: { label: '空数据提示', tip: 'placeholder | 空数据提示' },
            setter: {
              componentName: 'StringSetter',
              props: {
                placeholder: '请输入',
              },
            },
            supportVariable: false,
          },
          {
            title: { label: '数据清空', tip: 'allowClear | 是否支持数据清空' },
            name: 'allowClear',
            setter: 'BoolSetter',
            supportVariable: false,
          },
          // 枚举相关字段 不需要 不透出
          // ...getPropsByDependence(enumComponentProps, enumComponentsList, '..component'),
          // select类似组件配置项
          ...getPropsByDependence(selectComponentProps, selectComponentsList, '..component'),
          // 级联相关字段
          ...getPropsByDependence(cascaderComponentsProps, cascaderComponentsList, '..component'),
          // 类input组件配置
          ...getPropsByDependence(inputComponentsProps, inputComponentsList, '..component'),

          ...getPropsByDependence(numberComponentProps, numberComponentsList, '..component'),
          ...getPropsByDependence(
            bizSelectorComponentProps,
            bizSelectorComponentsList,
            '..component',
          ),
          // TextArea Props
          ...getPropsByDependence(textAreaComponentProps, ['TextArea'], '..component'),
          ...getPropsByDependence(arrayComponentProps, ['RCArrayTable'], '..component'),
          // {
          //   title: { label: '人员接口配置', tip: 'getDataSource | 人员接口配置' },
          //   name: 'getDataSource',
          //   defaultValue: () => ({
          //     type: 'JSFunction',
          //     schema: {
          //       title: 'getDataSource',
          //       type: 'JSFunction',
          //       name: 'getDataSource',
          //       async: true,
          //       properties: {
          //         input: {
          //           type: 'object',
          //           properties: {
          //             value: {
          //               type: 'string',
          //               defaultValue: '',
          //             },
          //           },
          //           required: ['value'],
          //         },
          //         body: {
          //           type: 'array',
          //           items: [
          //             {
          //               type: 'Function',
          //               properties: {
          //                 template: 'RequestFunction',
          //                 variable: 'result',
          //                 extraProps: {
          //                   apiId: 'API_88_59650_323217f643c3e3f1fe7532e72ac01bb0748c97be',
          //                   params: { keyword: '{{value}}' },
          //                 },
          //               },
          //             },
          //           ],
          //         },
          //       },
          //       required: ['input', 'body'],
          //     },
          //   }),
          //   setter: {
          //     componentName: 'FunctionSetter',
          //   },
          //   condition: (target: any) => {
          //     return ['EmpSelector'].includes(getPropValueWithPath(target, '..component'));
          //   },
          // },
          // {
          //   name: 'getOrgList',
          //   title: { label: '组织架构接口配置', tip: 'getOrgList | 组织架构接口配置' },
          //   supportVariable: false,
          //   defaultValue: () => ({
          //     type: 'JSFunction',
          //     schema: {
          //       title: 'getOrgList',
          //       type: 'JSFunction',
          //       name: 'getOrgList',
          //       async: true,
          //       properties: {
          //         input: {
          //           type: 'object',
          //           properties: {
          //             params: {
          //               type: 'object',
          //               defaultValue: {},
          //             },
          //           },
          //           required: ['params'],
          //         },
          //         body: {
          //           type: 'array',
          //           items: [
          //             {
          //               type: 'Function',
          //               properties: {
          //                 template: 'RequestFunction',
          //                 variable: 'result',
          //                 returnResult: '0',
          //                 extraProps: {
          //                   apiId: 'API_88_59642_323217f643c3e3f1fe7532e72ac01bb0748c97be',
          //                   params: {},
          //                 },
          //               },
          //             },
          //           ],
          //         },
          //       },
          //       required: ['input', 'body'],
          //     },
          //   }),
          //   setter: {
          //     componentName: 'FunctionSetter',
          //   },
          //   condition: (target: any) => {
          //     return ['EmpSelector'].includes(getPropValueWithPath(target, '..component'));
          //   },
          // },
          // {
          //   title: {
          //     label: '通过部门id查询下级用户',
          //     tip: 'getUserListForOrg | 通过部门id查询下级用户',
          //   },
          //   name: 'getUserListForOrg',
          //   defaultValue: () => ({
          //     type: 'JSFunction',
          //     schema: {
          //       title: 'getUserListForOrg',
          //       type: 'JSFunction',
          //       name: 'getUserListForOrg',
          //       async: true,
          //       properties: {
          //         input: {
          //           type: 'object',
          //           properties: {
          //             params: {
          //               type: 'object',
          //               defaultValue: {},
          //             },
          //           },
          //           required: ['params'],
          //         },
          //         body: {
          //           type: 'array',
          //           items: [
          //             {
          //               type: 'Function',
          //               properties: {
          //                 template: 'RequestFunction',
          //                 variable: 'result',
          //                 extraProps: {
          //                   apiId: 'API_88_59658_323217f643c3e3f1fe7532e72ac01bb0748c97be',
          //                   params: { orgId: '{{params.orgIds}}' },
          //                 },
          //               },
          //             },
          //           ],
          //         },
          //       },
          //       required: ['input', 'body'],
          //     },
          //   }),
          //   setter: {
          //     componentName: 'FunctionSetter',
          //   },
          //   condition: (target: any) => {
          //     return ['EmpSelector'].includes(getPropValueWithPath(target, '..component'));
          //   },
          // },
        ],
      },
      defaultValue: {},
    },
  },
};

export const reactionsProps = {
  title: { label: '联动逻辑', tip: 'reactions | 联动逻辑' },
  name: 'reactions',
  setter: {
    componentName: 'ReactionsSetter',
  },
  supportVariable: false,
};

export const visibleProps = {
  title: { label: '显示', tip: 'visible | 是否显示' },
  name: 'visible',
  supportVariable: true,
  setter: ['BoolSetter'],
};

export const childrenProps = {
  title: { label: '子组件', tip: 'children | 子组件' },
  name: 'children',
  setter: {
    componentName: 'CustomJsonSetter',
  },
  supportVariable: false,
  condition: (target: any) => {
    return childComponentList.includes(getPropValueWithPath(target, '.component'));
  },
};

export const arrayTableItemsProps = {
  type: 'object',
  setter: {
    componentName: 'ObjectSetter',
    props: {
      config: {
        items: [
          {
            name: '_children',
            condition: false,
            title: { label: '表格项配置', tip: 'children | 表格项配置' },
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ObjectSetter',
                  props: {
                    descriptor: 'primaryKey',
                    config: {
                      items: [
                        primaryKeyConfig,
                        labelConfig,
                        nameConfig,
                        typeConfig,
                        disabledProps,
                        previewProps,
                        requiredProps,
                        {
                          name: 'width',
                          title: { label: '列宽', tip: 'width | 列宽' },
                          supportVariable: false,
                          setter: 'NumberSetter',
                        },
                        defaultValueProps,
                        decoratorProps,
                        propsProps,
                        {
                          name: 'component',
                          title: { label: '表单项组件', tip: 'component | 表单项组件' },
                          defaultValue: 'Input',
                          // important: true,
                          supportVariable: false,
                          setter: {
                            componentName: 'SelectSetter',
                            props: {
                              options: [
                                ...baseComponent,
                                {
                                  label: '删除',
                                  value: 'RCArrayTable.Remove',
                                },
                                {
                                  label: '上移',
                                  value: 'RCArrayTable.MoveUp',
                                },
                                {
                                  label: '下移',
                                  value: 'RCArrayTable.MoveDown',
                                },
                                {
                                  label: '自定义组件',
                                  value: '',
                                },
                              ],
                            },
                          },
                        },
                        customComponentProps,
                        componentPropsProps,
                      ],
                    },
                  },
                  initialValue: {
                    title: '标题',
                    name: uuid(),
                    component: 'PreviewText.Input',
                    props: {
                      feedbackLayout: 'terse',
                    },
                  },
                },
              },
            },
          },
        ],
      },
    },
  },
  extraProps: {
    setValue: (target, value = []) => {
      const children = value.map((v) => {
        const { title = '标题', width, ...rest } = v;
        return {
          type: 'void',
          component: 'RCArrayTable.Column',
          decorator: 'void',
          componentProps: { title, align: 'left', width },
          children: [rest],
        };
      });
      target.parent.setPropValue('items', {
        type: 'object',
        decorator: 'void',
        children,
      });
      return children;
    },
  },
  condition: (target: any) => {
    return ['RCArrayTable'].includes(getPropValueWithPath(target, '.component'));
  },
};
export const arrayItemsItemsProps = {
  type: 'object',
  setter: {
    componentName: 'ObjectSetter',
    props: {
      config: {
        items: [
          // {
          //   name: '_type',
          //   title: { label: '配置项类型', tip: '_type | 配置项类型' },
          //   setter: {
          //     componentName: 'RadioGroupSetter',
          //     props: {
          //       options: [
          //         {
          //           title: '简单字符串',
          //           value: 'string',
          //         },
          //         {
          //           title: '复杂对象',
          //           value: 'object',
          //         },
          //       ],
          //     },
          //   },
          // },
          {
            name: '_children',
            condition: false,
            title: { label: '子表单项配置', tip: 'children | 子表单项配置' },
            setter: {
              componentName: 'ArraySetter',
              props: {
                itemSetter: {
                  componentName: 'ObjectSetter',
                  props: {
                    descriptor: 'primaryKey',
                    config: {
                      items: [
                        primaryKeyConfig,
                        labelConfig,
                        nameConfig,
                        typeConfig,
                        disabledProps,
                        previewProps,
                        requiredProps,
                        defaultValueProps,
                        decoratorProps,
                        propsProps,
                        {
                          name: 'component',
                          title: { label: '表单项组件', tip: 'component | 表单项组件' },
                          defaultValue: 'Input',
                          // important: true,
                          supportVariable: false,
                          setter: {
                            componentName: 'SelectSetter',
                            props: {
                              options: [
                                ...baseComponent,
                                {
                                  label: '删除',
                                  value: 'RCArrayItems.Remove',
                                },
                                {
                                  label: '上移',
                                  value: 'RCArrayItems.MoveUp',
                                },
                                {
                                  label: '下移',
                                  value: 'RCArrayItems.MoveDown',
                                },
                                {
                                  label: '自定义组件',
                                  value: '',
                                },
                              ],
                            },
                          },
                        },
                        componentPropsProps,
                      ],
                    },
                  },
                  initialValue: {
                    name: uuid(),
                    component: 'Input',
                    props: {
                      feedbackLayout: 'terse',
                    },
                  },
                },
              },
            },
          },
        ],
      },
    },
  },
  extraProps: {
    setValue: (target, value = []) => {
      // const children = value.map((v) => {
      //   const { title = '标题', ...rest } = v;
      //   console.log('rest', rest);
      //   return {
      //     type: 'void',
      //     component: 'Space',
      //     decorator: null,
      //     children: [rest],
      //   };
      // });
      target.parent.setPropValue('items', {
        type: 'void',
        component: 'Space',
        decorator: 'void',
        children: value,
      });
    },
  },
  condition: (target: any) => {
    return ['RCArrayItems'].includes(getPropValueWithPath(target, '.component'));
  },
};
export const BaseFormItemProps = [
  primaryKeyConfig,
  labelConfig,
  {
    title: '字段属性',
    type: 'group',
    display: 'accordion',
    extraProps: {
      defaultCollapsed: false,
    },
    items: [
      nameConfig,
      typeConfig,
      descriptionProps,
      visibleProps,
      disabledProps,
      requiredProps,
      defaultValueProps,
      enumConfig,
      rulesProps,
      reactionsProps,
    ],
  },
  {
    title: '组件配置',
    type: 'group',
    display: 'accordion',
    // extraProps: {
    //   defaultCollapsed: true,
    // },
    items: [
      formItemListProps,
      previewProps,
      customComponentProps,
      decoratorProps,
      arrayTableItemsProps,
      arrayItemsItemsProps,
      childrenProps,
    ],
  },
  propsProps,
  componentPropsProps,
];

export const tableFormItemProps = [
  formItemListProps,
  nameConfig,
  typeConfig,
  descriptionProps,
  defaultValueProps,
  requiredProps,
  disabledProps,
  previewProps,
  decoratorProps,
  propsProps,
  rulesProps,
  reactionsProps,
  componentPropsProps,
  enumConfig,
];

export const FormItemsProps: IPublicTypeFieldConfig = {
  name: 'items',
  title: { label: '表单项配置', tip: 'items | 表单项配置' },
  display: 'accordion',
  supportVariable: false,
  setter: {
    componentName: 'ArraySetter',
    props: {
      itemSetter: {
        componentName: 'ObjectSetter',
        props: {
          descriptor: 'primaryKey',
          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,
          };
        },
      },
    },
  },
};