流程

1.一行两列和卡片分组表单制作页

需求： 一行两列和卡片分组是布局控件，要求能够存放基础控件（指其他的单行文本框，多行文本框等），并且一行两列能够存放在卡片分组之内，而卡片分组不能放在一行两列之内，当然还有一些其他的细微的需求。 实现思路： 把一行两列和卡片分组的基本数据结构设置好，这里选择树形结构存放数据，优点是可以通过递归显示数据，也方便以后其他的布局控件需求

    {
        name:'一行两列',
        id:'',
        pid:'',
        children: [
            {
                xtype: 'div',
                id:'',
                pid:'',
                children: [
                    {
                        //这里具体放置基础控件
                        id:'',
                        pid:'',
                        name: '一行两列左侧'
                    }
                ]
            },
            {
                xtype: 'div',
                children: [
                    {
                        //这里具体放置基础控件
                        id:'',
                        pid:'',
                        name: '一行两列左侧'
                    }
                ]
            }
        ]
    }
    {
        name: '卡片分组',
        id:'',
        pid: '',
        children: [...这里具体放置基础控件]
    }
    

其中，id和pid是后来加的，id直接加上，难点在于根据子级的id添加自己pid，思路是递归溯源查找所有上层的id，把符合条件的保存下来 然后把树形结构转成扁平数组保存下来，传给后台，以上是表单制作页

2.一行两列和卡片分组表单发起页

1.获取表单结构数据和编辑

首先获取后台的扁平数组数据(就是在制作页时发给后端的数据)，然后将扁平数组生成树形结构(原理是根据id，pid的对应关系实现),树形结构还需要按卡片分组拆分成不同的card，card是独立的区域，card要么是一个卡片分组组成的，要么是被卡片分组切割开的别的控件组成的整体，此时依然保持树形结构，然后制作表单基础控件和布局空间，利用vue提供的动态组件，将用户输入的数据保存在特定的集合中pageForm(key是不同控件的vModel，值是用户输入的值)

2.发送数据给后台

把刚才的pageForm展开成{xtype:'',id:'',value:''}的对象数组发给后台

3.回显

审批人拒绝之后，再次回到render页，根据地址栏参数，获取后台扁平数组，转成树形结构，这个时候的树形结构是有值的，按照动态组件直接渲染布局控件和基础控件

3.表单制作页预览

给用户提供预览表单生成的效果，和表单发起页类似，也是使用动态组件实现，只不过没有数组传递