formgenerate

formgenerate

表单生成器依赖于antd-vue

###主要props

• formConfigList： <Array>表单配置
• apiUrl: <String> submit时Post提交的ulr

####formConfigList由一个个表单元素数据组成，每种元素数据数据额结构如下

• 文本

{
    type: 'text',   // 类型
    label: '第一题', // 表单label
    key: 'text',    // <String>数据key, 提交表单时，就是以此key的值作为表单数据的key
    placeholder: '请输入', // <String>
    maxLength: 30,  // <Number>允许输入的最大长度 
    help: '提示',   // 子弹气泡提示
    required: 1,   // 是否必填 1|0
    initValue: '张三',  // <String>初始化值 
}

• 多行文本

{
    type: 'textarea',   
    label: '描述', 
    key: 'textarea',   
    placeholder: '请输入',
    maxLength: 30,  
    help: '提示',   
    required: 1,   
    initValue: '张三'  
}

• Url

{
    type: 'url',   
    label: '网址', 
    key: 'url',    
    placeholder: '请输入',
    help: '提示',   
    required: 1,  
    initValue: 'https://www.baidu.com'
}

• email

{
    type: 'email',   
    label: '邮箱', 
    key: 'email',    
    placeholder: '请输入',
    help: '提示',   
    required: 1,  
    initValue: '[e-mail]'
}

• 整数

{
    type: 'int',   
    label: '整数', 
    key: 'int',    
    placeholder: '请输入',
    maxValue: 10,  // <Number>最大值
    minValue: 2,   // <Number>最小值
    help: '提示',   
    required: 1,  
    initValue: 10 // <Number>
}

• 颜色选择器

{
    type: 'color',   
    label: '颜色', 
    key: 'color',    
    help: '提示',   
    initValue: 10 // <String> #hex
}

• 时间

{
    type: 'datetime',   
    label: '时间', 
    key: 'datetime',    
    help: '提示',  
    placeholder: '请选择', 
    initValue: '2020-10-01 20:10:10' // <String> YYYY-MM-DD HH:mm:ss
}

• 开关

{
    type: 'boolean',   
    label: '开关', 
    key: 'boolean',    
    help: '提示',  
    initValue: 0 // <Number> 0|1
}

• 单选

{
    type: 'radio',
    label: '选项',
    key: 'radio',
    optionList: [
        {
            value: 1,  // <String|Number>
            label: '选项A' // <String>
        },
        {
            value: 2,
            label: '选项B'
        },
        {
            value: 3,
            label: '选项C'
        },
        {
            value: 4,   
            label: '选项D'
        }
    ],
    help: '提示',
    initValue: 1 // <String|Number> optionList对应的value
}

• 复选

{
    type: 'checkbox',
    label: '选项',
    key: 'checkbox',
    optionList: [
        {
            value: 1,  // <String|Number>
            label: '选项A' // <String>
        },
        {
            value: 2,
            label: '选项B'
        },
        {
            value: 3,
            label: '选项C'
        },
        {
            value: 4,   
            label: '选项D'
        }
    ],
    help: '提示',
    initValue: [1,3] // <String|Number>Array optionList对应的value
}

• 图片

{
    type: 'image',
    label: '背景',
    key: 'image',
    maxFileSize: 50,     // <Number>文件尺寸限制Mb
    maxFileNum: 1,    // <Number>文件个数限制
    help: '图片',
    initValue: [
        {
            fileName: '伟东云.png',    // <String>文件名
            ossEtag: '98C03CB5BF6BD55495E94BCCA7068C35', // <String>OssEtag
            url: 'http://cdn-apaas.wdcloudnet.com/test/module/img/伟东云.png' // <String> 资源访问地址
        }
    ]
}