syber-lowcode-business-materials/lowcode/custom-upload/meta.ts

syber-lowcode-business-materials

import snippets from './snippets';

export default {
  snippets,
  priority: 11,
  componentName: 'CustomUpload',
  title: '上传',
  category: '表单',
  props: [
    {
      title: '数据源',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'fileListControlled',
          title: {
            label: '当前上传文件',
            tip: 'fileList | 当前上传的文件列表（受控）',
          },
          propType: { type: 'arrayOf', value: 'object' },
          supportVariable: true,
          setter: {
            componentName: 'ArraySetter',
            props: {
              itemSetter: {
                componentName: 'ObjectSetter',
                props: {
                  config: {
                    items: [
                      {
                        name: 'name',
                        title: '文件名',
                        setter: 'StringSetter',
                      },
                      {
                        name: 'status',
                        title: '状态',
                        setter: {
                          componentName: 'SelectSetter',
                          props: {
                            options: [
                              'error',
                              'success',
                              'done',
                              'uploading',
                              'removed',
                            ].map((v) => ({ label: v, value: v })),
                          },
                        },
                      },
                      {
                        name: 'url',
                        title: '文件地址',
                        setter: 'StringSetter',
                      },
                      {
                        name: 'response',
                        title: '错误信息',
                        setter: 'StringSetter',
                      },
                    ],
                  },
                },
              },
            },
          },
        },
      ],
    },
    {
      title: '基本',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'uniq',
          title: {
            label: '去重上传',
            tip: 'uniq | 开启后，上传同样的文件会直接成功并拿到文件地址',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'multiple',
          title: {
            label: '支持多选文件',
            tip: 'multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件',
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'size',
          title: {
            label: '上传数量限制',
          },
          propType: 'number',
          setter: 'NumberSetter',
        },
        {
          name: 'accept',
          title: {
            label: '上传文件类型',
            tip: 'accept | 接受上传的文件类型, 例如 image/*,video/*',
          },
          propType: 'string',
          defaultValue: 'image/*',
          setter: 'StringSetter',
        },
        {
          name: 'directory',
          title: {
            label: '文件夹上传',
            tip: 'directory | 支持上传文件夹',
          },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
        {
          name: 'disabled',
          title: { label: '是否禁用', tip: 'disabled | 是否为禁用状态' },
          propType: 'bool',
          defaultValue: false,
          setter: 'BoolSetter',
        },
      ],
    },
    {
      title: '高级',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'openFileDialogOnClick',
          title: {
            label: '打开文件对话框',
            tip: 'openFileDialogOnClick | 点击打开文件对话框',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'showUploadList',
          title: {
            label: '显示上传列表',
            tip: 'showUploadList | 是否显示上传的文件列表,',
          },
          propType: 'bool',
          defaultValue: true,
          setter: 'BoolSetter',
        },
        {
          name: 'listType',
          title: {
            label: '上传列表样式',
            tip:
              'listType | 上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card`',
          },
          propType: {
            type: 'oneOf',
            value: ['text', 'picture', 'picture-card'],
          },
          defaultValue: 'text',
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '文本',
                    value: 'text',
                  },
                  {
                    title: '图片',
                    value: 'picture',
                  },
                  {
                    title: '图片卡片',
                    value: 'picture-card',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
        },
        {
          name: 'iconRender',
          title: { label: '自定义图标', tip: 'iconRender | 自定义显示 icon' },
          propType: 'func',
          setter: {
            componentName: 'SlotSetter',
            title: '自定义图标插槽',
            initialValue: {
              type: 'JSSlot',
              params: ['file', 'listType'],
              value: [],
            },
          },
        },
        {
          name: 'itemRender',
          title: {
            label: '自定义列表项',
            tip: 'itemRender | 自定义上传列表项',
          },
          propType: 'func',
          setter: {
            componentName: 'SlotSetter',
            title: '自定义列表项插槽',
            initialValue: {
              type: 'JSSlot',
              params: ['originNode', 'file', 'fileList', 'actions'],
              value: [],
            },
          },
        },
        {
          name: 'progress',
          title: { label: '自定义进度条', tip: 'progress | 自定义进度条样式' },
          propType: 'object',
          setter: 'JsonSetter',
        },
      ],
    },
    {
      title: '扩展函数',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'isImageUrl',
          title: {
            label: '是否为图片',
            tip: 'isImageUrl | 自定义缩略图是否使用 <img /> 标签进行显示',
          },
          propType: 'func',
          setter: {
            componentName: 'FunctionSetter',
            props: {
              template: 'isImageUrl(file,${extParams}){\n// 判断是否为图片\nreturn true;\n}',
            },
          },
        },
        {
          name: 'previewFile',
          title: {
            label: '自定义文件预览',
            tip: 'previewFile | 自定义文件预览逻辑',
          },
          propType: 'func',
          setter: 'FunctionSetter',
        },
      ],
    },
  ],
  configure: {
    component: { isContainer: true },
    supports: {
      style: true,
      events: [
        {
          name: 'onFileListChange',
          template:
            "\nonFileListChange(fileList,${extParams}){\n// 任何改动都会触发的回调\nconsole.log('onFileListChange',fileList);}",
        },
        {
          name: 'onFileUploadSuccess',
          template:
            "\nonFileUploadSuccess(file,${extParams}){\n// 文件上传成功时的回调\nconsole.log('onFileUploadSuccess',file);}",
        },
        {
          name: 'onFileUploadError',
          template:
            "\nonFileUploadError(message,${extParams}){\n// 文件上传失败时的回调\nconsole.log('onFileUploadError',message);}",
        },
        {
          name: 'onFileUploadProgress',
          template:
            "\nonFileUploadProgress(total,${extParams}){\n// 文件上传中的回调\nconsole.log('onFileUploadProgress',total);}",
        }
      ],
    },
  },
};