开发这样一个复杂的表单你需要用多久

开发这样一个复杂的表单你需要用多久

表单在中后台开发的时，是最多也是最另人头疼的，多级联动，繁杂的验证，动态解析等可算是苦不堪言。所以出现了无数的表单解决方案，像Uform, formily, NoForm等等一大堆用来解决中后台开发表单，可想而知，解决复杂的表单开发是多么另人头大；有XML的，有json-schema格式的，无论哪一种都是想能够轻松的解决另人头脑的表单开发，提高生产力。

下面看一下商城后台添加商品常用的表单片段

当然，其中有部分不是，这只是为了做一个 DEMO, 解释一下这是个啥

• 远程搜索（demo）：通过输入文字动态去后台查询可选项
• 搜索&创建（demo）：通过输入文字动态去后台搜索，如果没有搜索到也可以创建，和上面的不同的是，上面查询不到是不可以选的
• 商品名称：名称不用说，字符串，非空验证
• 副标题: 不用说，一串字符串，简单描述一下商品
• 分类：后台加载出分类，级联选择
• 地址（demo）: 多选项联动测试，选择1触发2，选择2触发3
• 优惠方式：选择不同的优惠方式 （无优惠，促销，会员特价，满减）
• 无优惠：无特殊处理
• 促销：表单，开始时间，结束时间，促销时的价格；验证：不能为空，结束时间不能小于开始时间，价格数值
• 会员特价：黄金会员，白金会员输入不同的价格。验证：不为空，数值
• 满减：当购买金额足够多少时，减少的金额，可以添加多个分段，验证：至少一条
• 类型：选择商品的类型，联动不同的配置参数片段，此处模拟了两种：（服装，数码）用于选择；

• 服装：

  • 规格：颜色，可以手工添加；尺寸，可以从后台查询预先配置好的参数。然后选择的颜色与尺寸生成笛卡尔表单，对每个枚举添加价格，库存预警值，SKU等信息
  • 商品参数：表单，商品编号（必填），季节：单选，人群种类：多选，上市时间：日期

• 数码：

  • 规格：容量，可以从后台查询预先配置好的参数。然后选择生成笛卡尔表单，对每个枚举添加价格，库存预警值，SKU等信息
• 填充数据：同编辑，根据数据来填充表单
• 提交：验证通过，提交表单，不通过阻止提交并提示出错信息
• 重置：清空表单，（当然可以分步表单，这里把所有都重置还是挺过分的）

根据一个复杂的需求，练手一个复杂程度还行的表单也是不错的选择

下面看一下实现吧

methods: {
    calcMultiplyData(arr) {
        let res = [], cur = {}
        function search(deep = 0) {
            if (deep >= arr.length) {
                res.push(cur)
                cur = Object.assign({}, cur)
                return
            }
            for (let obj of arr[deep]) {
                cur[obj.prop] = obj.value
                search(deep + 1)
            }
        }
        search()
        return res
    },
    codeCompxPlusSubmit(data) {
        alert('提交成功，打开控制台查看提交的数据')
        console.log(data)
    },
    codeCompxPlusEvent(params) {
        if (params.prop == 'province') {
            this.codeCompxPlus.city = ''
            this.codeCompxPlus.area = ''
        } else if (params.prop == 'city') {
            this.codeCompxPlus.area = ''
        } else if (params.prop == 'type') {
            this.codeCompxPlus.propList = []
        } else if (params.prop == 'fullData') {
            this.codeCompxPlus = {
                selectRemote: '选项1',
                inputRemote: '选项2',
                name: '汪仔',
                title: '还是那个味道',
                kind: [1,12],
                province: '1',
                city: '11',
                area: '苏州AB',
                yh: 4,
                mj: [{mjEnough: 200, mjReduce: 5}, {mjEnough: 400, mjReduce: 18}],
                type: 1,
                gg: {ggColor: 'blue', ggSize: ['XL', 'L']},
                propList: [
                    {ggColor: 'blue', ggSize: 'XL', price: 280, store: 2299, val: 105, sku: 'wtf'},
                    {ggColor: 'blue', ggSize: 'L', price: 288, store: 2009, val: 100, sku: 'crete'},
                ],
                prop: {propNo: 'abc111', propSeason: '秋季', propCrowd: ['儿童','青少年'], propUpTime: new Date()}
            }
        }
    }
}

上面是实现这个表单的全部代码，使用的是基于ElementUI 的vue-elementui-freedomen 制作的vue语法表单，表单的展示在： http://115.159.65.195:8080/vefdoc 示例的最后一个

如果您有一些非常复杂的、奇葩的设计，希望您可以留言，可以让做成示例吧。

做这些的目的为了提供可供参考的解决思路，方法。来共同进步，使前端越来越好。