表单设计器+bi报表
参考:vue-表单设计器:http://tools.xiaoyaoji.cn/guide/installation.html 从右上角进入设计器进入。分析:表单设计器:生成的json:json = {"list": [{"type": "grid","name": "栅格布局","icon": "icon-...
·
参考:
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>
更多推荐
已为社区贡献2条内容
所有评论(0)