325 lines
9.0 KiB
Vue
325 lines
9.0 KiB
Vue
<template>
|
||
<div class="test-form">
|
||
<parser :form-conf="formConf" @submit="sumbitForm1" />
|
||
<parser :key="key2" :form-conf="formConf" @submit="sumbitForm2" />
|
||
<el-button @click="change">
|
||
change
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Parser from '../Parser'
|
||
|
||
// 若parser是通过安装npm方式集成到项目中的，使用此行引入
|
||
// import Parser from 'form-gen-parser'
|
||
|
||
export default {
|
||
components: {
|
||
Parser
|
||
},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
key2: +new Date(),
|
||
formConf: {
|
||
fields: [
|
||
{
|
||
__config__: {
|
||
label: '单行文本',
|
||
labelWidth: null,
|
||
showLabel: true,
|
||
changeTag: true,
|
||
tag: 'el-input',
|
||
tagIcon: 'input',
|
||
required: true,
|
||
layout: 'colFormItem',
|
||
span: 24,
|
||
document: 'https://element.eleme.cn/#/zh-CN/component/input',
|
||
regList: [
|
||
{
|
||
pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
|
||
message: '手机号格式错误'
|
||
}
|
||
]
|
||
},
|
||
__slot__: {
|
||
prepend: '',
|
||
append: ''
|
||
},
|
||
__vModel__: 'mobile',
|
||
placeholder: '请输入手机号',
|
||
style: {
|
||
width: '100%'
|
||
},
|
||
clearable: true,
|
||
'prefix-icon': 'el-icon-mobile',
|
||
'suffix-icon': '',
|
||
maxlength: 11,
|
||
'show-word-limit': true,
|
||
readonly: false,
|
||
disabled: false
|
||
},
|
||
{
|
||
__config__: {
|
||
label: '日期范围',
|
||
tag: 'el-date-picker',
|
||
tagIcon: 'date-range',
|
||
defaultValue: null,
|
||
span: 24,
|
||
showLabel: true,
|
||
labelWidth: null,
|
||
required: true,
|
||
layout: 'colFormItem',
|
||
regList: [],
|
||
changeTag: true,
|
||
document:
|
||
'https://element.eleme.cn/#/zh-CN/component/date-picker',
|
||
formId: 101,
|
||
renderKey: 1585980082729
|
||
},
|
||
style: {
|
||
width: '100%'
|
||
},
|
||
type: 'daterange',
|
||
'range-separator': '至',
|
||
'start-placeholder': '开始日期',
|
||
'end-placeholder': '结束日期',
|
||
disabled: false,
|
||
clearable: true,
|
||
format: 'yyyy-MM-dd',
|
||
'value-format': 'yyyy-MM-dd',
|
||
readonly: false,
|
||
__vModel__: 'field101'
|
||
},
|
||
{
|
||
__config__: {
|
||
layout: 'rowFormItem',
|
||
tagIcon: 'row',
|
||
label: '行容器',
|
||
layoutTree: true,
|
||
children: [
|
||
{
|
||
__config__: {
|
||
label: '评分',
|
||
tag: 'el-rate',
|
||
tagIcon: 'rate',
|
||
defaultValue: 0,
|
||
span: 24,
|
||
showLabel: true,
|
||
labelWidth: null,
|
||
layout: 'colFormItem',
|
||
required: true,
|
||
regList: [],
|
||
changeTag: true,
|
||
document: 'https://element.eleme.cn/#/zh-CN/component/rate',
|
||
formId: 102,
|
||
renderKey: 1586839671259
|
||
},
|
||
style: {},
|
||
max: 5,
|
||
'allow-half': false,
|
||
'show-text': false,
|
||
'show-score': false,
|
||
disabled: false,
|
||
__vModel__: 'field102'
|
||
}
|
||
],
|
||
document: 'https://element.eleme.cn/#/zh-CN/component/layout',
|
||
formId: 101,
|
||
span: 24,
|
||
renderKey: 1586839668999,
|
||
componentName: 'row101',
|
||
gutter: 15
|
||
},
|
||
type: 'default',
|
||
justify: 'start',
|
||
align: 'top'
|
||
},
|
||
{
|
||
__config__: {
|
||
label: '按钮',
|
||
showLabel: true,
|
||
changeTag: true,
|
||
labelWidth: null,
|
||
tag: 'el-button',
|
||
tagIcon: 'button',
|
||
span: 24,
|
||
layout: 'colFormItem',
|
||
document: 'https://element.eleme.cn/#/zh-CN/component/button',
|
||
renderKey: 1594288459289
|
||
},
|
||
__slot__: {
|
||
default: '测试按钮1'
|
||
},
|
||
type: 'primary',
|
||
icon: 'el-icon-search',
|
||
round: false,
|
||
size: 'medium',
|
||
plain: false,
|
||
circle: false,
|
||
disabled: false,
|
||
on: {
|
||
click: 'clickTestButton1'
|
||
}
|
||
}
|
||
],
|
||
__methods__: {
|
||
clickTestButton1() {
|
||
console.log(
|
||
`%c【测试按钮1】点击事件里可以访问当前表单：
|
||
1) formModel='formData', 所以this.formData可以拿到当前表单的model
|
||
2) formRef='elForm', 所以this.$refs.elForm可以拿到当前表单的ref(vue组件)
|
||
`,
|
||
'color:#409EFF;font-size: 15px'
|
||
)
|
||
console.log('表单的Model：', this.formData)
|
||
console.log('表单的ref：', this.$refs.elForm)
|
||
}
|
||
},
|
||
formRef: 'elForm',
|
||
formModel: 'formData',
|
||
size: 'small',
|
||
labelPosition: 'right',
|
||
labelWidth: 100,
|
||
formRules: 'rules',
|
||
gutter: 15,
|
||
disabled: false,
|
||
span: 24,
|
||
formBtns: true,
|
||
unFocusedComponentBorder: false
|
||
},
|
||
formConf2: {
|
||
fields: [
|
||
{
|
||
__config__: {
|
||
label: '单行文本',
|
||
labelWidth: null,
|
||
showLabel: true,
|
||
changeTag: true,
|
||
tag: 'el-input',
|
||
tagIcon: 'input',
|
||
required: true,
|
||
layout: 'colFormItem',
|
||
span: 24,
|
||
document: 'https://element.eleme.cn/#/zh-CN/component/input',
|
||
regList: [
|
||
{
|
||
pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
|
||
message: '手机号格式错误'
|
||
}
|
||
]
|
||
},
|
||
__slot__: {
|
||
prepend: '',
|
||
append: ''
|
||
},
|
||
__vModel__: 'mobile',
|
||
placeholder: '请输入手机号',
|
||
style: {
|
||
width: '100%'
|
||
},
|
||
clearable: true,
|
||
'prefix-icon': 'el-icon-mobile',
|
||
'suffix-icon': '',
|
||
maxlength: 11,
|
||
'show-word-limit': true,
|
||
readonly: false,
|
||
disabled: false
|
||
},
|
||
{
|
||
__config__: {
|
||
label: '日期范围',
|
||
tag: 'el-date-picker',
|
||
tagIcon: 'date-range',
|
||
defaultValue: null,
|
||
span: 24,
|
||
showLabel: true,
|
||
labelWidth: null,
|
||
required: true,
|
||
layout: 'colFormItem',
|
||
regList: [],
|
||
changeTag: true,
|
||
document:
|
||
'https://element.eleme.cn/#/zh-CN/component/date-picker',
|
||
formId: 101,
|
||
renderKey: 1585980082729
|
||
},
|
||
style: {
|
||
width: '100%'
|
||
},
|
||
type: 'daterange',
|
||
'range-separator': '至',
|
||
'start-placeholder': '开始日期',
|
||
'end-placeholder': '结束日期',
|
||
disabled: false,
|
||
clearable: true,
|
||
format: 'yyyy-MM-dd',
|
||
'value-format': 'yyyy-MM-dd',
|
||
readonly: false,
|
||
__vModel__: 'field101'
|
||
}
|
||
],
|
||
formRef: 'elForm',
|
||
formModel: 'formData',
|
||
size: 'small',
|
||
labelPosition: 'right',
|
||
labelWidth: 100,
|
||
formRules: 'rules',
|
||
gutter: 15,
|
||
disabled: false,
|
||
span: 24,
|
||
formBtns: true,
|
||
unFocusedComponentBorder: false
|
||
}
|
||
}
|
||
},
|
||
computed: {},
|
||
watch: {},
|
||
created() {},
|
||
mounted() {
|
||
// 表单数据回填，模拟异步请求场景
|
||
setTimeout(() => {
|
||
// 请求回来的表单数据
|
||
const data = {
|
||
mobile: '18836662555'
|
||
}
|
||
// 回填数据
|
||
this.fillFormData(this.formConf, data)
|
||
// 更新表单
|
||
this.key2 = +new Date()
|
||
}, 2000)
|
||
},
|
||
methods: {
|
||
fillFormData(form, data) {
|
||
form.fields.forEach(item => {
|
||
const val = data[item.__vModel__]
|
||
if (val) {
|
||
item.__config__.defaultValue = val
|
||
}
|
||
})
|
||
},
|
||
change() {
|
||
this.key2 = +new Date()
|
||
const t = this.formConf
|
||
this.formConf = this.formConf2
|
||
this.formConf2 = t
|
||
},
|
||
sumbitForm1(data) {
|
||
console.log('sumbitForm1提交数据：', data)
|
||
},
|
||
sumbitForm2(data) {
|
||
console.log('sumbitForm2提交数据：', data)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.test-form {
|
||
margin: 15px auto;
|
||
width: 800px;
|
||
padding: 15px;
|
||
}
|
||
</style>
|