表单设计器+bi报表

参考：
vue-表单设计器：http://tools.xiaoyaoji.cn/guide/installation.html 从右上角进入设计器进入。

分析：
表单设计器：
生成的json：

  json = {
    "list": [
      {
        "type": "grid",
        "name": "栅格布局",
        "icon": "icon-grid-",
        "columns": [
          {
            "span": 12,
            "list": [
              {
                "type": "rate",
                "name": "评分",
                "icon": "icon-icon-test",
                "options": {
                  "defaultValue": 2,
                  "max": 7,
                  "disabled": false,
                  "allowHalf": true,
                  "required": true,
                  "customClass": "",
                  "labelWidth": 100,
                  "isLabelWidth": false,
                  "hidden": false,
                  "dataBind": true,
                  "remoteFunc": "func_1567822255678",
                  "remoteOptions": []
                },
                "novalid": {},
                "key": "1567822255678",
                "model": "rate_1567822255678",
                "rules": [
                  {
                    "required": true,
                    "message": "评分必须填写"
                  }
                ]
              }
            ]
          },
          {
            "span": 12,
            "list": [
              {
                "type": "text",
                "name": "文字",
                "icon": "icon-wenzishezhi-",
                "options": {
                  "defaultValue": "",
                  "customClass": "",
                  "labelWidth": 100,
                  "isLabelWidth": false,
                  "hidden": false,
                  "dataBind": true,
                  "remoteFunc": "func_1567822299878",
                  "remoteOptions": []
                },
                "novalid": {},
                "key": "1567822299878",
                "model": "text_1567822299878",
                "rules": []
              }
            ]
          }
        ],
        "options": {
          "gutter": 0,
          "justify": "start",
          "align": "top",
          "customClass": "",
          "remoteFunc": "func_1567822244782"
        },
        "key": "1567822244782",
        "model": "grid_1567822244782",
        "rules": []
      },
      {
        "type": "grid",
        "name": "栅格布局",
        "icon": "icon-grid-",
        "columns": [
          {
            "span": 12,
            "list": [
              {
                "type": "select",
                "name": "下拉选择框",
                "icon": "icon-select",
                "options": {
                  "defaultValue": "",
                  "multiple": false,
                  "disabled": false,
                  "clearable": false,
                  "placeholder": "",
                  "required": false,
                  "showLabel": false,
                  "width": "",
                  "options": [
                    {
                      "value": "下拉框1"
                    },
                    {
                      "value": "下拉框2"
                    },
                    {
                      "value": "下拉框3"
                    }
                  ],
                  "remote": false,
                  "filterable": false,
                  "remoteOptions": [],
                  "props": {
                    "value": "value",
                    "label": "label"
                  },
                  "remoteFunc": "func_1567822253581",
                  "customClass": "",
                  "labelWidth": 100,
                  "isLabelWidth": false,
                  "hidden": false,
                  "dataBind": true
                },
                "novalid": {},
                "key": "1567822253581",
                "model": "select_1567822253581",
                "rules": []
              }
            ]
          },
          {
            "span": 12,
            "list": [
              {
                "type": "input",
                "name": "单行文本",
                "icon": "icon-input",
                "options": {
                  "width": "100%",
                  "defaultValue": "",
                  "required": false,
                  "dataType": "string",
                  "pattern": "",
                  "placeholder": "",
                  "customClass": "",
                  "disabled": false,
                  "labelWidth": 100,
                  "isLabelWidth": false,
                  "hidden": false,
                  "dataBind": true,
                  "remoteFunc": "func_1567822296742",
                  "remoteOptions": []
                },
                "novalid": {},
                "key": "1567822296742",
                "model": "input_1567822296742",
                "rules": [
                  {
                    "type": "string",
                    "message": "单行文本格式不正确"
                  }
                ]
              }
            ]
          }
        ],
        "options": {
          "gutter": 0,
          "justify": "start",
          "align": "top",
          "customClass": "",
          "remoteFunc": "func_1567822247667"
        },
        "key": "1567822247667",
        "model": "grid_1567822247667",
        "rules": []
      },
      {
        "type": "grid",
        "name": "栅格布局",
        "icon": "icon-grid-",
        "columns": [
          {
            "span": 12,
            "list": [
              {
                "type": "color",
                "name": "颜色选择器",
                "icon": "icon-color",
                "options": {
                  "defaultValue": "",
                  "disabled": false,
                  "showAlpha": false,
                  "required": false,
                  "customClass": "",
                  "labelWidth": 100,
                  "isLabelWidth": false,
                  "hidden": false,
                  "dataBind": true,
                  "remoteFunc": "func_1567822264686",
                  "remoteOptions": []
                },
                "novalid": {},
                "key": "1567822264686",
                "model": "color_1567822264686",
                "rules": []
              }
            ]
          },
          {
            "span": 12,
            "list": [
              {
                "type": "number",
                "name": "计数器",
                "icon": "icon-number",
                "options": {
                  "width": "",
                  "required": false,
                  "defaultValue": 0,
                  "min": 0,
                  "max": 0,
                  "step": 1,
                  "disabled": false,
                  "controlsPosition": "",
                  "customClass": "",
                  "labelWidth": 100,
                  "isLabelWidth": false,
                  "hidden": false,
                  "dataBind": true,
                  "remoteFunc": "func_1567822294174",
                  "remoteOptions": []
                },
                "novalid": {},
                "key": "1567822294174",
                "model": "number_1567822294174",
                "rules": []
              }
            ]
          }
        ],
        "options": {
          "gutter": 0,
          "justify": "start",
          "align": "top",
          "customClass": "",
          "remoteFunc": "func_1567822261240"
        },
        "key": "1567822261240",
        "model": "grid_1567822261240",
        "rules": []
      },
      {
        "type": "grid",
        "name": "栅格布局",
        "icon": "icon-grid-",
        "columns": [
          {
            "span": 12,
            "list": [
              {
                "type": "time",
                "name": "时间选择器",
                "icon": "icon-time",
                "options": {
                  "defaultValue": "",
                  "readonly": false,
                  "disabled": false,
                  "editable": true,
                  "clearable": true,
                  "placeholder": "",
                  "startPlaceholder": "",
                  "endPlaceholder": "",
                  "isRange": false,
                  "arrowControl": true,
                  "format": "HH:mm:ss",
                  "required": false,
                  "width": "",
                  "customClass": "",
                  "labelWidth": 100,
                  "isLabelWidth": false,
                  "hidden": false,
                  "dataBind": true,
                  "remoteFunc": "func_1567822285429",
                  "remoteOptions": []
                },
                "novalid": {},
                "key": "1567822285429",
                "model": "time_1567822285429",
                "rules": []
              }
            ]
          },
          {
            "span": 12,
            "list": [
              {
                "type": "switch",
                "name": "开关",
                "icon": "icon-switch",
                "options": {
                  "defaultValue": false,
                  "required": false,
                  "disabled": false,
                  "customClass": "",
                  "labelWidth": 100,
                  "isLabelWidth": false,
                  "hidden": false,
                  "dataBind": true,
                  "remoteFunc": "func_1567822291542",
                  "remoteOptions": []
                },
                "novalid": {},
                "key": "1567822291542",
                "model": "switch_1567822291542",
                "rules": []
              }
            ]
          }
        ],
        "options": {
          "gutter": 0,
          "justify": "start",
          "align": "top",
          "customClass": "",
          "remoteFunc": "func_1567822281123"
        },
        "key": "1567822281123",
        "model": "grid_1567822281123",
        "rules": []
      },
      {
        "type": "grid",
        "name": "栅格布局",
        "icon": "icon-grid-",
        "columns": [
          {
            "span": 12,
            "list": [
              {
                "type": "radio",
                "name": "单选框组",
                "icon": "icon-radio-active",
                "options": {
                  "inline": false,
                  "defaultValue": "",
                  "showLabel": false,
                  "options": [
                    {
                      "value": "选项1",
                      "label": "选项1"
                    },
                    {
                      "value": "选项2",
                      "label": "选项2"
                    },
                    {
                      "value": "选项3",
                      "label": "选项3"
                    }
                  ],
                  "required": false,
                  "width": "",
                  "remote": false,
                  "remoteOptions": [],
                  "props": {
                    "value": "value",
                    "label": "label"
                  },
                  "remoteFunc": "func_1567822363647",
                  "customClass": "",
                  "labelWidth": 100,
                  "isLabelWidth": false,
                  "hidden": false,
                  "dataBind": true,
                  "disabled": false
                },
                "novalid": {},
                "key": "1567822363647",
                "model": "radio_1567822363647",
                "rules": []
              },
              {
                "type": "radio",
                "name": "单选框组",
                "icon": "icon-radio-active",
                "options": {
                  "inline": false,
                  "defaultValue": "",
                  "showLabel": false,
                  "options": [
                    {
                      "value": "选项1",
                      "label": "选项1"
                    },
                    {
                      "value": "选项2",
                      "label": "选项2"
                    },
                    {
                      "value": "选项3",
                      "label": "选项3"
                    }
                  ],
                  "required": false,
                  "width": "",
                  "remote": false,
                  "remoteOptions": [],
                  "props": {
                    "value": "value",
                    "label": "label"
                  },
                  "remoteFunc": "func_1567822363647",
                  "customClass": "",
                  "labelWidth": 100,
                  "isLabelWidth": false,
                  "hidden": false,
                  "dataBind": true,
                  "disabled": false
                },
                "novalid": {},
                "key": "1567822377930",
                "model": "radio1567822377930",
                "rules": []
              },
              {
                "type": "radio",
                "name": "单选框组",
                "icon": "icon-radio-active",
                "options": {
                  "inline": false,
                  "defaultValue": "",
                  "showLabel": false,
                  "options": [
                    {
                      "value": "选项1",
                      "label": "选项1"
                    },
                    {
                      "value": "选项2",
                      "label": "选项2"
                    },
                    {
                      "value": "选项3",
                      "label": "选项3"
                    }
                  ],
                  "required": false,
                  "width": "",
                  "remote": false,
                  "remoteOptions": [],
                  "props": {
                    "value": "value",
                    "label": "label"
                  },
                  "remoteFunc": "func_1567822363647",
                  "customClass": "",
                  "labelWidth": 100,
                  "isLabelWidth": false,
                  "hidden": false,
                  "dataBind": true,
                  "disabled": false
                },
                "novalid": {},
                "key": "1567822395474",
                "model": "radio1567822395474",
                "rules": []
              }
            ]
          },
          {
            "span": 12,
            "list": [
              {
                "type": "slider",
                "name": "滑块",
                "icon": "icon-slider",
                "options": {
                  "defaultValue": 0,
                  "disabled": false,
                  "required": false,
                  "min": 0,
                  "max": 100,
                  "step": 1,
                  "showInput": false,
                  "range": false,
                  "width": "",
                  "customClass": "",
                  "labelWidth": 100,
                  "isLabelWidth": false,
                  "hidden": false,
                  "dataBind": true,
                  "remoteFunc": "func_1567822670815",
                  "remoteOptions": []
                },
                "novalid": {},
                "key": "1567822670815",
                "model": "slider_1567822670815",
                "rules": []
              },
              {
                "type": "grid",
                "name": "栅格布局",
                "icon": "icon-grid-",
                "columns": [
                  {
                    "span": 12,
                    "list": [
                      {
                        "type": "rate",
                        "name": "评分",
                        "icon": "icon-icon-test",
                        "options": {
                          "defaultValue": null,
                          "max": 5,
                          "disabled": false,
                          "allowHalf": false,
                          "required": false,
                          "customClass": "",
                          "labelWidth": 100,
                          "isLabelWidth": false,
                          "hidden": false,
                          "dataBind": true,
                          "remoteOptions": []
                        }
                      },
                      {
                        "type": "slider",
                        "name": "滑块",
                        "icon": "icon-slider",
                        "options": {
                          "defaultValue": 25,
                          "disabled": false,
                          "required": false,
                          "min": 0,
                          "max": 100,
                          "step": 1,
                          "showInput": false,
                          "range": false,
                          "width": "",
                          "customClass": "",
                          "labelWidth": 100,
                          "isLabelWidth": false,
                          "hidden": false,
                          "dataBind": true,
                          "remoteFunc": "func_1567822721630"
                        },
                        "novalid": {},
                        "key": "1567822721630",
                        "model": "slider_1567822721630",
                        "rules": []
                      }
                    ]
                  },
                  {
                    "span": 12,
                    "list": [
                      {
                        "type": "switch",
                        "name": "开关",
                        "icon": "icon-switch",
                        "options": {
                          "defaultValue": false,
                          "required": false,
                          "disabled": false,
                          "customClass": "",
                          "labelWidth": 100,
                          "isLabelWidth": false,
                          "hidden": false,
                          "dataBind": true,
                          "remoteOptions": [],
                          "remoteFunc": "func_1567822718176"
                        },
                        "rules": [],
                        "novalid": {},
                        "key": "1567822718176",
                        "model": "switch_1567822718176"
                      }
                    ]
                  }
                ],
                "options": {
                  "gutter": 0,
                  "justify": "start",
                  "align": "top",
                  "customClass": "",
                  "remoteFunc": "func_1567822709218"
                },
                "novalid": {},
                "key": "1567822709218",
                "model": "grid_1567822709218",
                "rules": []
              },
              {
                "type": "grid",
                "name": "栅格布局",
                "icon": "icon-grid-",
                "columns": [
                  {
                    "span": 12,
                    "list": []
                  },
                  {
                    "span": 12,
                    "list": []
                  }
                ],
                "options": {
                  "gutter": 0,
                  "justify": "start",
                  "align": "top",
                  "customClass": ""
                }
              }
            ]
          }
        ],
        "options": {
          "gutter": 0,
          "justify": "start",
          "align": "top",
          "customClass": "",
          "remoteFunc": "func_1567822357013"
        },
        "key": "1567822357013",
        "model": "grid_1567822357013",
        "rules": []
      },
      {
        "type": "grid",
        "name": "栅格布局",
        "icon": "icon-grid-",
        "columns": [
          {
            "span": 12,
            "list": []
          },
          {
            "span": 12,
            "list": []
          }
        ],
        "options": {
          "gutter": 0,
          "justify": "start",
          "align": "top",
          "customClass": "",
          "remoteFunc": "func_1567822682586"
        },
        "key": "1567822682586",
        "model": "grid_1567822682586",
        "rules": []
      }
    ],
    "config": {
      "labelWidth": 100,
      "labelPosition": "right",
      "size": "small",
      "customClass": "ks-form"
    }
  }

基本格式为：

json2={
  list:[
    {type:'grid',icon:'icon-grid-',columns:[
        {
          span:12,list:[
            {type:'rate',icon:'icon-icon-test',options:{defaultValue:2,max:7,/*...*/},model:"rate_1567822255678",rules:[{required:true,message:'评分必须填写'}]}
          ]
        },
        {
          span:12,list:[
            {type:'text',icon:'icon-wenzishezhi-',options:{defaultValue:'',},model:'text_1567822299878',rules:[]}
          ]
        }
      ]},
    {type:'grid',icon:'icon-grid-',columns:[]},
    {type:'grid',icon:'icon-grid-',columns:[]},
  ],
  config:{
    labelWidth:100,
    labelPosition:'right',
    size:'small',
    customClass:'ks-form'
  }
};

获取数据为：

data = {
  "rate_1567822255678": 3,
  "text_1567822299878": "",
  "select_1567822253581": "下拉框2",
  "input_1567822296742": "是是是",
  "color_1567822264686": "#5E3131",
  "number_1567822294174": 2,
  "time_1567822285429": "",
  "switch_1567822291542": true,
  "radio_1567822363647": "选项2",
  "radio1567822377930": "选项3",
  "radio1567822395474": "选项1",
  "slider_1567822670815": 7,
  "undefined": 5
}

还可以生成代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
</head>
<body>
  <div id="app">
    <fm-generate-form 
      :data="jsonData" 
      :remote="remoteFuncs" 
      :value="editData" 
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        jsonData: {"list":[{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[{"type":"rate","name":"评分","icon":"icon-icon-test","options":{"defaultValue":2,"max":7,"disabled":false,"allowHalf":true,"required":true,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822255678","remoteOptions":[]},"novalid":{},"key":"1567822255678","model":"rate_1567822255678","rules":[{"required":true,"message":"评分必须填写"}]}]},{"span":12,"list":[{"type":"text","name":"文字","icon":"icon-wenzishezhi-","options":{"defaultValue":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822299878","remoteOptions":[]},"novalid":{},"key":"1567822299878","model":"text_1567822299878","rules":[]}]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822244782"},"key":"1567822244782","model":"grid_1567822244782","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[{"type":"select","name":"下拉选择框","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"showLabel":false,"width":"","options":[{"value":"下拉框1"},{"value":"下拉框2"},{"value":"下拉框3"}],"remote":false,"filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1567822253581","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true},"novalid":{},"key":"1567822253581","model":"select_1567822253581","rules":[]}]},{"span":12,"list":[{"type":"input","name":"单行文本","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822296742","remoteOptions":[]},"novalid":{},"key":"1567822296742","model":"input_1567822296742","rules":[{"type":"string","message":"单行文本格式不正确"}]}]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822247667"},"key":"1567822247667","model":"grid_1567822247667","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[{"type":"color","name":"颜色选择器","icon":"icon-color","options":{"defaultValue":"","disabled":false,"showAlpha":false,"required":false,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822264686","remoteOptions":[]},"novalid":{},"key":"1567822264686","model":"color_1567822264686","rules":[]}]},{"span":12,"list":[{"type":"number","name":"计数器","icon":"icon-number","options":{"width":"","required":false,"defaultValue":0,"min":0,"max":0,"step":1,"disabled":false,"controlsPosition":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822294174","remoteOptions":[]},"novalid":{},"key":"1567822294174","model":"number_1567822294174","rules":[]}]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822261240"},"key":"1567822261240","model":"grid_1567822261240","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[{"type":"time","name":"时间选择器","icon":"icon-time","options":{"defaultValue":"","readonly":false,"disabled":false,"editable":true,"clearable":true,"placeholder":"","startPlaceholder":"","endPlaceholder":"","isRange":false,"arrowControl":true,"format":"HH:mm:ss","required":false,"width":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822285429","remoteOptions":[]},"novalid":{},"key":"1567822285429","model":"time_1567822285429","rules":[]}]},{"span":12,"list":[{"type":"switch","name":"开关","icon":"icon-switch","options":{"defaultValue":false,"required":false,"disabled":false,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822291542","remoteOptions":[]},"novalid":{},"key":"1567822291542","model":"switch_1567822291542","rules":[]}]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822281123"},"key":"1567822281123","model":"grid_1567822281123","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[{"type":"radio","name":"单选框组","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"选项1","label":"选项1"},{"value":"选项2","label":"选项2"},{"value":"选项3","label":"选项3"}],"required":false,"width":"","remote":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1567822363647","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"novalid":{},"key":"1567822363647","model":"radio_1567822363647","rules":[]},{"type":"radio","name":"单选框组","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"选项1","label":"选项1"},{"value":"选项2","label":"选项2"},{"value":"选项3","label":"选项3"}],"required":false,"width":"","remote":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1567822363647","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"novalid":{},"key":"1567822377930","model":"radio1567822377930","rules":[]},{"type":"radio","name":"单选框组","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"选项1","label":"选项1"},{"value":"选项2","label":"选项2"},{"value":"选项3","label":"选项3"}],"required":false,"width":"","remote":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1567822363647","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"novalid":{},"key":"1567822395474","model":"radio1567822395474","rules":[]}]},{"span":12,"list":[{"type":"slider","name":"滑块","icon":"icon-slider","options":{"defaultValue":0,"disabled":false,"required":false,"min":0,"max":100,"step":1,"showInput":false,"range":false,"width":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822670815","remoteOptions":[]},"novalid":{},"key":"1567822670815","model":"slider_1567822670815","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[{"type":"rate","name":"评分","icon":"icon-icon-test","options":{"defaultValue":null,"max":5,"disabled":false,"allowHalf":false,"required":false,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteOptions":[]}},{"type":"slider","name":"滑块","icon":"icon-slider","options":{"defaultValue":25,"disabled":false,"required":false,"min":0,"max":100,"step":1,"showInput":false,"range":false,"width":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822721630"},"novalid":{},"key":"1567822721630","model":"slider_1567822721630","rules":[]}]},{"span":12,"list":[{"type":"switch","name":"开关","icon":"icon-switch","options":{"defaultValue":false,"required":false,"disabled":false,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteOptions":[],"remoteFunc":"func_1567822718176"},"rules":[],"novalid":{},"key":"1567822718176","model":"switch_1567822718176"}]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822709218"},"novalid":{},"key":"1567822709218","model":"grid_1567822709218","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[]},{"span":12,"list":[]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":""}}]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822357013"},"key":"1567822357013","model":"grid_1567822357013","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[]},{"span":12,"list":[]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822682586"},"key":"1567822682586","model":"grid_1567822682586","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":"ks-form"}},
        editData: {},
        remoteFuncs: {
          
        }
      },
      methods: {
        handleSubmit () {
          this.$refs.generateForm.getData().then(data => {
            // 数据校验成功
            // data 为获取的表单数据
            alert(JSON.stringify(data))
          }).catch(e => {
            // 数据校验失败
          })
        }
      }
    })
  </script>
</body>
</html>




//  组件：
<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      :remote="remoteFuncs" 
      :value="editData" 
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[{"type":"rate","name":"评分","icon":"icon-icon-test","options":{"defaultValue":2,"max":7,"disabled":false,"allowHalf":true,"required":true,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822255678","remoteOptions":[]},"novalid":{},"key":"1567822255678","model":"rate_1567822255678","rules":[{"required":true,"message":"评分必须填写"}]}]},{"span":12,"list":[{"type":"text","name":"文字","icon":"icon-wenzishezhi-","options":{"defaultValue":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822299878","remoteOptions":[]},"novalid":{},"key":"1567822299878","model":"text_1567822299878","rules":[]}]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822244782"},"key":"1567822244782","model":"grid_1567822244782","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[{"type":"select","name":"下拉选择框","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"showLabel":false,"width":"","options":[{"value":"下拉框1"},{"value":"下拉框2"},{"value":"下拉框3"}],"remote":false,"filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1567822253581","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true},"novalid":{},"key":"1567822253581","model":"select_1567822253581","rules":[]}]},{"span":12,"list":[{"type":"input","name":"单行文本","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"dataType":"string","pattern":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822296742","remoteOptions":[]},"novalid":{},"key":"1567822296742","model":"input_1567822296742","rules":[{"type":"string","message":"单行文本格式不正确"}]}]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822247667"},"key":"1567822247667","model":"grid_1567822247667","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[{"type":"color","name":"颜色选择器","icon":"icon-color","options":{"defaultValue":"","disabled":false,"showAlpha":false,"required":false,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822264686","remoteOptions":[]},"novalid":{},"key":"1567822264686","model":"color_1567822264686","rules":[]}]},{"span":12,"list":[{"type":"number","name":"计数器","icon":"icon-number","options":{"width":"","required":false,"defaultValue":0,"min":0,"max":0,"step":1,"disabled":false,"controlsPosition":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822294174","remoteOptions":[]},"novalid":{},"key":"1567822294174","model":"number_1567822294174","rules":[]}]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822261240"},"key":"1567822261240","model":"grid_1567822261240","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[{"type":"time","name":"时间选择器","icon":"icon-time","options":{"defaultValue":"","readonly":false,"disabled":false,"editable":true,"clearable":true,"placeholder":"","startPlaceholder":"","endPlaceholder":"","isRange":false,"arrowControl":true,"format":"HH:mm:ss","required":false,"width":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822285429","remoteOptions":[]},"novalid":{},"key":"1567822285429","model":"time_1567822285429","rules":[]}]},{"span":12,"list":[{"type":"switch","name":"开关","icon":"icon-switch","options":{"defaultValue":false,"required":false,"disabled":false,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822291542","remoteOptions":[]},"novalid":{},"key":"1567822291542","model":"switch_1567822291542","rules":[]}]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822281123"},"key":"1567822281123","model":"grid_1567822281123","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[{"type":"radio","name":"单选框组","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"选项1","label":"选项1"},{"value":"选项2","label":"选项2"},{"value":"选项3","label":"选项3"}],"required":false,"width":"","remote":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1567822363647","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"novalid":{},"key":"1567822363647","model":"radio_1567822363647","rules":[]},{"type":"radio","name":"单选框组","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"选项1","label":"选项1"},{"value":"选项2","label":"选项2"},{"value":"选项3","label":"选项3"}],"required":false,"width":"","remote":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1567822363647","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"novalid":{},"key":"1567822377930","model":"radio1567822377930","rules":[]},{"type":"radio","name":"单选框组","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"选项1","label":"选项1"},{"value":"选项2","label":"选项2"},{"value":"选项3","label":"选项3"}],"required":false,"width":"","remote":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1567822363647","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"novalid":{},"key":"1567822395474","model":"radio1567822395474","rules":[]}]},{"span":12,"list":[{"type":"slider","name":"滑块","icon":"icon-slider","options":{"defaultValue":0,"disabled":false,"required":false,"min":0,"max":100,"step":1,"showInput":false,"range":false,"width":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822670815","remoteOptions":[]},"novalid":{},"key":"1567822670815","model":"slider_1567822670815","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[{"type":"rate","name":"评分","icon":"icon-icon-test","options":{"defaultValue":null,"max":5,"disabled":false,"allowHalf":false,"required":false,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteOptions":[]}},{"type":"slider","name":"滑块","icon":"icon-slider","options":{"defaultValue":25,"disabled":false,"required":false,"min":0,"max":100,"step":1,"showInput":false,"range":false,"width":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1567822721630"},"novalid":{},"key":"1567822721630","model":"slider_1567822721630","rules":[]}]},{"span":12,"list":[{"type":"switch","name":"开关","icon":"icon-switch","options":{"defaultValue":false,"required":false,"disabled":false,"customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteOptions":[],"remoteFunc":"func_1567822718176"},"rules":[],"novalid":{},"key":"1567822718176","model":"switch_1567822718176"}]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822709218"},"novalid":{},"key":"1567822709218","model":"grid_1567822709218","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[]},{"span":12,"list":[]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":""}}]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822357013"},"key":"1567822357013","model":"grid_1567822357013","rules":[]},{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[]},{"span":12,"list":[]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","remoteFunc":"func_1567822682586"},"key":"1567822682586","model":"grid_1567822682586","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":"ks-form"}},
      editData: {},
      remoteFuncs: {
        
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
        alert(JSON.stringify(data))
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>