mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-15 03:25:06 +08:00
初始化 form 动态表单的详情，暂未接入数据
This commit is contained in:
YunaiV
324
yudao-admin-ui/src/utils/parser/example/Index.vue
Normal file
324
yudao-admin-ui/src/utils/parser/example/Index.vue
Normal file
@ -0,0 +1,324 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user