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

YwDesign for lowcode

import { hideProp } from '../../_utils';

const buttonProps: any = [
  {
    name: 'buttons',
    display: 'accordion',
    title: '操作按钮配置',
    getValue: (target: any, value: any) => {
      return value || [];
    },
    supportVariable: false,
    setter: {
      componentName: 'ArraySetter',
      props: {
        itemSetter: {
          componentName: 'ObjectSetter',
          props: {
            config: {
              items: [
                {
                  name: 'id',
                  condition: hideProp,
                  setter: (target: any) => {
                    if (!target.getValue()) {
                      target.setValue(`${target.id}`);
                    }
                    return 'StringSetter';
                  },
                },
                {
                  name: 'htmlType',
                  display: 'inline',
                  title: {
                    label: '操作',
                    tip: 'htmlType | 操作',
                  },
                  important: true,
                  setValue: (target: any, value: any) => {
                    const actionNameMap: any = {
                      submit: '提交',
                      reset: '重置',
                      // custom: '自定义',
                    };
                    const actionName = actionNameMap[value] || '自定义';
                    target.parent.setPropValue('btnText', actionName);
                  },
                  setter: {
                    componentName: 'SelectSetter',
                    props: {
                      options: [
                        {
                          title: '提交',
                          value: 'submit',
                        },
                        {
                          title: '重置',
                          value: 'reset',
                        },
                        // {
                        //   title: '自定义',
                        //   value: 'custom',
                        // },
                      ],
                    },
                  },
                },
                {
                  title: {
                    label: '按钮内容',
                    tip: 'btnText | 按钮内容',
                  },
                  name: 'btnText',
                  setter: 'StringSetter',
                },

                {
                  name: 'type',
                  display: 'inline',
                  title: {
                    label: '样式',
                    tip: 'type | 样式',
                  },
                  important: true,
                  setter: {
                    componentName: 'SelectSetter',
                    props: {
                      options: [
                        {
                          title: '主要',
                          value: 'primary',
                        },
                        {
                          title: '次要',
                          value: 'default',
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
          initialValue: () => {
            return {
              btnText: '提交',
              htmlType: 'submit',
              type: 'primary',
            };
          },
        },
      },
    },
  },
  {
    title: '按钮布局配置',
    name: 'buttonsProps',
    display: 'accordion',
    supportVariable: false,
    setter: {
      componentName: 'ObjectSetter',
      props: {
        config: {
          items: [
            {
              title: {
                label: '固定在底部',
                tip: 'sticky | 固定在底部',
              },
              name: 'sticky',
              setter: 'BoolSetter',
            },
            {
              title: {
                label: '按钮对齐方式',
                tip: 'align | 按钮对齐方式',
              },
              name: 'align',
              setter: {
                componentName: 'RadioGroupSetter',
                props: {
                  options: [
                    {
                      title: '左边',
                      value: 'left',
                    },
                    {
                      title: '中间',
                      value: 'center',
                    },
                    {
                      title: '右边',
                      value: 'right',
                    },
                  ],
                },
              },
            },
          ],
        },
      },
    },
  },
];

export default buttonProps;