更新记录

0.0.3（2021-10-13）

0.0.3测试版本

0.0.2（2021-10-13）

0.0.2测试版本

0.0.1（2021-10-13）

0.0.1测试版本

平台兼容性

Bladex工作流插件表单组件 wf-ui

简介

部分组件基于uView二次封装，使用avue.js的json可快速配置出一个移动端表单。

说明

• 因移动端和目前市面上移动端组件限制，avue.js部分组件或属性无法很好的支持。
• 因uniapp框架限制，小程序无法使用动态组件。
• 多端适配的限制，目前仅有部分常用的功能，但功能会持续完善。。。

故不符合以下规则的组件将会被过滤。介意勿用！！！！！

类型

目前支持以下类型组件： ['input', 'number', 'radio', 'checkbox', 'select', 'cascader', 'tree', 'upload', 'date', 'daterange', 'datetime', 'datetimerange', 'time', 'timerange', 'rate', 'slider', 'switch']

multiple

所有含有多选选项的组件将会被过滤。

remote

所有含有远程搜索选项的组件将会被过滤。

component

所有自定义组件将会被过滤。

......

使用

本组件符合easycom规范，安装后可直接使用。

<template>
    <view>
        <wf-form v-model="form" :option="option"></wf-form>
        <view style="padding: 20rpx; word-break: break-all;">{{ JSON.stringify(form) }}</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {},
            option: {
                column: [],
                group: [
                    {
                        label: '输入分组',
                        icon: 'el-icon-warning',
                        column: [
                            {
                                label: '输入框',
                                prop: 'input',
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入输入框',
                                        trigger: 'change'
                                    }
                                ]
                            },
                            {
                                label: '数字',
                                prop: 'number',
                                type: 'number',
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入数字',
                                        trigger: 'change'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        label: '选择分组',
                        icon: 'el-icon-info',
                        arrow: false,
                        column: [
                            {
                                label: '下拉',
                                prop: 'select',
                                type: 'select',
                                dicData: [
                                    {
                                        label: '男',
                                        value: '1'
                                    },
                                    {
                                        label: '女',
                                        value: '2'
                                    }
                                ],
                                rules: [{ required: true, message: '请选择下拉', trigger: 'change' }]
                            },
                            {
                                label: '级联',
                                prop: 'cascader',
                                type: 'cascader',
                                dicData: [
                                    {
                                        label: '选项一',
                                        value: '0',
                                        children: [
                                            {
                                                label: '选项1-1',
                                                value: '11'
                                            },
                                            {
                                                label: '选项1-2',
                                                value: '12'
                                            }
                                        ]
                                    },
                                    {
                                        label: '选项二',
                                        value: '1'
                                    },
                                    {
                                        label: '选项三',
                                        value: '2'
                                    }
                                ],
                                rules: [{ required: true, message: '请选择级联', trigger: 'change' }]
                            },
                            {
                                label: '树形',
                                prop: 'tree',
                                type: 'tree',
                                dicData: [
                                    {
                                        label: '选项一',
                                        value: '0',
                                        children: [
                                            {
                                                label: '选项1-1',
                                                value: '11'
                                            },
                                            {
                                                label: '选项1-2',
                                                value: '12'
                                            }
                                        ]
                                    },
                                    {
                                        label: '选项二',
                                        value: '1'
                                    },
                                    {
                                        label: '选项三',
                                        value: '2'
                                    }
                                ],
                                rules: [{ required: true, message: '请选择级联', trigger: 'change' }]
                            },
                            {
                                label: '单选',
                                prop: 'radio',
                                type: 'radio',
                                dicData: [
                                    {
                                        label: '男',
                                        value: '1'
                                    },
                                    {
                                        label: '女',
                                        value: '2'
                                    }
                                ],
                                rules: [{ required: true, message: '请选择单选', trigger: 'change' }]
                            },
                            {
                                label: '多选',
                                prop: 'checkbox',
                                type: 'checkbox',
                                dicData: [
                                    {
                                        label: '男',
                                        value: '1'
                                    },
                                    {
                                        label: '女',
                                        value: '2'
                                    }
                                ],
                                rules: [{ required: true, message: '请选择多选', trigger: 'change' }]
                            }
                        ]
                    },
                    {
                        label: '时间分组',
                        icon: 'el-icon-calendar',
                        arrow: false,
                        column: [
                            {
                                label: '日期',
                                prop: 'date',
                                type: 'date'
                            },
                            {
                                label: '日期范围',
                                prop: 'daterange',
                                type: 'daterange',
                                labelPosition: 'top'
                            },
                            {
                                label: '日期时间',
                                prop: 'datetime',
                                type: 'datetime',
                                labelPosition: 'top'
                            },
                            {
                                label: '日期时间范围',
                                prop: 'datetimerange',
                                type: 'datetimerange',
                                labelPosition: 'top'
                            },
                            {
                                label: '时间',
                                prop: 'time',
                                type: 'time',
                            },
                            {
                                label: '时间范围',
                                prop: 'timerange',
                                type: 'timerange',
                                labelPosition: 'top'
                            }
                        ]
                    },
                    {
                        label: '上传分组',
                        icon: 'el-icon-photo',
                        arrow: false,
                        column: [
                            {
                                label: '上传',
                                prop: 'upload',
                                type: 'upload',
                                action: '/api/blade-resource/oss/endpoint/put-file',
                                propsHttp: {
                                    url: 'link',
                                    name: 'originalName',
                                    res: 'data'
                                }
                            }
                        ]
                    },
                    {
                        label: '其他分组',
                        icon: 'el-icon-question-circle',
                        arrow: false,
                        column: [
                            {
                                label: '评分',
                                prop: 'rate',
                                type: 'rate',
                                showScore: true,
                                showText: true,
                                texts: ['极差', '失望', '一般', '满意', '非常满意']
                            },
                            {
                                label: '滑块',
                                prop: 'slider',
                                type: 'slider',
                                range: true,
                                value: [11, 22]
                            },
                            {
                                label: '开关',
                                prop: 'switch',
                                type: 'switch'
                            }
                        ]
                    }
                ]
            }
        }
    },
}
</script>