@ywfe/materials-design/lowcode/yw-table-dialog/meta.ts

YwDesign for lowcode

import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import { TableBaseProps, BaseFormItemProps } from '../_base';
import { uuid } from '../_utils';

const YwTableDialogMeta: IPublicTypeComponentMetadata = {
  componentName: 'YwTableDialog',
  title: '表格弹窗',
  docUrl: '',
  screenshot: '',
  group: '基础组件',
  category: '弹窗类',
  devMode: 'proCode',
  npm: {
    package: '@ywfe/materials-design',
    version: '0.0.1-beta.6',
    exportName: 'YwTableDialog',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: '弹窗配置项',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'ref',
            title: {
              label: '组件标识',
              tip: "ref | 通过 this.$('xxx') 获取到组件实例",
            },
            defaultValue: () => {
              return `table__dialog__${uuid()}`;
            },
            setter: 'StringSetter',
          },
          {
            name: 'title',
            title: { label: '弹窗标题', tip: 'title | 标题' },
            setter: 'StringSetter',
          },
          {
            title: {
              label: '按钮文字',
              tip: 'btnText | 按钮文字',
            },
            name: 'btnText',
            description: '按钮文字',
            supportVariable: false,
            setter: {
              componentName: 'StringSetter',
              initialValue: '按钮',
            },
          },
          {
            title: {
              label: '按钮类型',
              tip: 'btnType | 按钮类型',
            },
            supportVariable: false,
            name: 'btnType',
            description: '按钮类型',
            defaultValue: 'default',
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    label: '主按钮',
                    value: 'primary',
                  },
                  {
                    label: '次按钮',
                    value: 'default',
                  },
                  {
                    label: '链接按钮',
                    value: 'link',
                  },
                ],
              },
              initialValue: 'primary',
            },
          },
          {
            name: 'onOk',
            title: {
              label: '确认事件',
              tip: 'onOk | 确认按钮点击事件',
            },
            setter: {
              componentName: 'SchemaFunctionSetter',
              props: {
                title: 'onClick',
                async: true,
                properties: {
                  input: {
                    type: 'object',
                    properties: {
                      keys: {
                        type: 'array',
                      },
                      data: {
                        type: 'array',
                      },
                    },
                    required: ['keys', 'data'],
                  },
                  body: {
                    type: 'array',
                    items: [
                      {
                        type: 'Function',
                        properties: {
                          template: 'RequestFunction',
                          variable: 'requestRes',
                          extraProps: {},
                        },
                      },
                    ],
                  },
                  required: ['input', 'body'],
                },
              },
            },
          },
        ],
      },
      {
        title: '筛选区配置项',
        display: 'block',
        type: 'group',
        items: [
          {
            name: 'hasFilter',
            title: { label: '开启筛选', tip: '是否开启表格筛选' },
            setter: 'BoolSetter',
            supportVariable: false,
            defaultValue: false,
            extraProps: {
              setValue(target, value) {
                target.parent.setPropValue('filterItems', value ? [] : null);
              },
            },
          },
          {
            title: { label: '筛选项', tip: '筛选项' },
            name: 'filterItems',
            supportVariable: false,
            condition: (target) => {
              return target.parent.getPropValue('hasFilter');
            },
            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,
                    };
                  },
                },
              },
            },
          },
        ],
      },
      {
        title: '表格区配置项',
        display: 'block',
        type: 'group',
        items: TableBaseProps,
      },
    ],
    supports: {
      events: [
        {
          name: 'onCancel',
          description: '取消回调',
        },
        {
          name: 'onOpen',
          description: '弹窗打开回调',
        },
        {
          name: 'afterClose',
        },
      ],
      style: true,
      className: true,
      loop: false,
    },
    component: {
      isContainer: false,
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '表格弹窗',
    screenshot: 'https://yw-fed-static.oss-cn-hangzhou.aliyuncs.com/lowcode/tableDialog',
    schema: {
      componentName: 'YwTableDialog',
      props: {
        btnText: '打开弹窗',
        btnType: 'link',
        title: '弹窗标题',
        visible: undefined,
        onTableInit: {
          type: 'JSExpression',
          value: '(ref)=>{console.log(ref)}',
        },
        initialValues: {
          type: 'JSExpression',
          value: 'this.record',
        },
        reload: {
          type: 'JSExpression',
          value: 'this.reload',
        },
      },
    },
  },
];

export default {
  ...YwTableDialogMeta,
  snippets,
};