|
|
@ -1,261 +1,253 @@
|
|
|
<template>
|
|
|
<div class="custom-form">
|
|
|
<van-form @submit="onSubmit">
|
|
|
<van-cell-group v-for="(g, k) in groups" :key="k">
|
|
|
<div v-if="groups.length>1" class="ptb13 pl15 c-999 fs-14 bgc-f2f3f4">
|
|
|
{{g.groupTitle}}
|
|
|
</div>
|
|
|
<template v-for="(item, i) in g.children">
|
|
|
<template v-if="item.isHide!==true">
|
|
|
<slot v-if="$slots[item.id]" :name="item.id" :config="item" />
|
|
|
<van-field
|
|
|
:class="{'has-tips': $slots[item.id+'-tips']}"
|
|
|
v-else-if="item.type=='text'||item.type=='textarea'"
|
|
|
:type="item.type"
|
|
|
:key="i"
|
|
|
v-model="form[item.id]"
|
|
|
error-message-align="right"
|
|
|
input-align="right"
|
|
|
:rules="rules[item.id]"
|
|
|
v-bind="item.vanCfg||''"
|
|
|
v-on="item.vanEvts||''"
|
|
|
@click="item.onClick? item.onClick(item) : ''"
|
|
|
/>
|
|
|
<div class="custom-form">
|
|
|
<van-form @submit="onSubmit">
|
|
|
<van-cell-group v-for="(g, k) in groups" :key="k">
|
|
|
<div v-if="groups.length > 1" class="ptb13 pl15 c-999 fs-14 bgc-f2f3f4">
|
|
|
{{ g.groupTitle }}
|
|
|
</div>
|
|
|
<template v-for="(item, i) in g.children">
|
|
|
<template v-if="item.isHide !== true">
|
|
|
<slot v-if="$slots[item.id]" :name="item.id" :config="item" />
|
|
|
<van-field
|
|
|
:class="{ 'has-tips': $slots[item.id + '-tips'] }"
|
|
|
v-else-if="item.type == 'text' || item.type == 'textarea'"
|
|
|
:type="item.type"
|
|
|
:key="i"
|
|
|
v-model="form[item.id]"
|
|
|
error-message-align="right"
|
|
|
input-align="right"
|
|
|
:rules="rules[item.id]"
|
|
|
v-bind="item.vanCfg || ''"
|
|
|
v-on="item.vanEvts || ''"
|
|
|
@click="item.onClick ? item.onClick(item) : ''" />
|
|
|
|
|
|
<van-field
|
|
|
v-else-if="item.type=='select'||item.type=='date'||item.type=='datetime'"
|
|
|
:class="{'has-tips': $slots[item.id+'-tips']}"
|
|
|
:key="i"
|
|
|
v-model="form[item.id].name"
|
|
|
error-message-align="right"
|
|
|
input-align="right"
|
|
|
:rules="rules[item.id]"
|
|
|
v-bind="item.vanCfg||''"
|
|
|
v-on="item.vanEvts||''"
|
|
|
readonly
|
|
|
is-link
|
|
|
@click="item.onClick? item.onClick(item) : onSelectShow(item)"
|
|
|
/>
|
|
|
<van-field
|
|
|
v-else-if="item.type == 'select' || item.type == 'date' || item.type == 'datetime'"
|
|
|
:class="{ 'has-tips': $slots[item.id + '-tips'] }"
|
|
|
:key="i"
|
|
|
v-model="form[item.id].name"
|
|
|
error-message-align="right"
|
|
|
input-align="right"
|
|
|
:rules="rules[item.id]"
|
|
|
v-bind="item.vanCfg || ''"
|
|
|
v-on="item.vanEvts || ''"
|
|
|
readonly
|
|
|
is-link
|
|
|
@click="item.onClick ? item.onClick(item) : onSelectShow(item)" />
|
|
|
|
|
|
<van-field
|
|
|
v-else-if="item.type=='photo'"
|
|
|
:class="{'has-tips': $slots[item.id+'-tips']}"
|
|
|
:key="i"
|
|
|
v-model="form[item.id].name"
|
|
|
error-message-align="right"
|
|
|
input-align="right"
|
|
|
:rules="rules[item.id]"
|
|
|
v-bind="item.vanCfg||''"
|
|
|
v-on="item.vanEvts||''" >
|
|
|
<template slot="input">
|
|
|
<CustomUpload :data.sync="form[item.id]"></CustomUpload>
|
|
|
</template>
|
|
|
</van-field>
|
|
|
<van-field
|
|
|
v-else-if="item.type == 'photo'"
|
|
|
:class="{ 'has-tips': $slots[item.id + '-tips'] }"
|
|
|
:key="i"
|
|
|
v-model="form[item.id].name"
|
|
|
error-message-align="right"
|
|
|
input-align="right"
|
|
|
:rules="rules[item.id]"
|
|
|
v-bind="item.vanCfg || ''"
|
|
|
v-on="item.vanEvts || ''">
|
|
|
<template slot="input">
|
|
|
<CustomUpload :data.sync="form[item.id]"></CustomUpload>
|
|
|
</template>
|
|
|
</van-field>
|
|
|
|
|
|
<div :key="i" class="custom-form-tips" v-if="$slots[item.id+'-tips']">
|
|
|
<slot :name="item.id+ '-tips'" :config="item" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</template>
|
|
|
</van-cell-group>
|
|
|
<slot name="tips"></slot>
|
|
|
<div class="plr30 ptb30">
|
|
|
<van-button native-type="submit" type="primary" round :color="comfirmBtnColor" block>{{comfirmBtnText}}</van-button>
|
|
|
<div :key="i" class="custom-form-tips" v-if="$slots[item.id + '-tips']">
|
|
|
<slot :name="item.id + '-tips'" :config="item" />
|
|
|
</div>
|
|
|
</van-form>
|
|
|
</template>
|
|
|
</template>
|
|
|
</van-cell-group>
|
|
|
<slot name="tips"></slot>
|
|
|
<div class="plr30 ptb30">
|
|
|
<van-button native-type="submit" type="primary" round :color="comfirmBtnColor" block>
|
|
|
{{ comfirmBtnText }}
|
|
|
</van-button>
|
|
|
</div>
|
|
|
</van-form>
|
|
|
|
|
|
<van-popup v-model="showPick" position="bottom">
|
|
|
<van-datetime-picker
|
|
|
:type="curPick.type"
|
|
|
v-if="curPick.type=='date'||curPick.type=='datetime'"
|
|
|
v-model="currentDate"
|
|
|
:min-date="curPick.minDate"
|
|
|
:max-date="curPick.maxDate"
|
|
|
@confirm="onConfirm"
|
|
|
@cancel="onCancel"
|
|
|
/>
|
|
|
<van-picker
|
|
|
v-else
|
|
|
title=""
|
|
|
show-toolbar
|
|
|
:columns="columns"
|
|
|
@confirm="onConfirm"
|
|
|
@cancel="onCancel"
|
|
|
/>
|
|
|
</van-popup>
|
|
|
</div>
|
|
|
<van-popup v-model="showPick" position="bottom">
|
|
|
<van-datetime-picker
|
|
|
:type="curPick.type"
|
|
|
v-if="curPick.type == 'date' || curPick.type == 'datetime'"
|
|
|
v-model="currentDate"
|
|
|
:min-date="curPick.minDate"
|
|
|
:max-date="curPick.maxDate"
|
|
|
@confirm="onConfirm"
|
|
|
@cancel="onCancel" />
|
|
|
<van-picker v-else title="" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
|
|
|
</van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Tools from '../../utils/tool'
|
|
|
import validateForm from '../../utils/validateForm'
|
|
|
var messageObj = {
|
|
|
'mobile': '请输入正确的号码',
|
|
|
'idCard': '请输入正确的身份证号码',
|
|
|
'digit': '请输入整型数字',
|
|
|
'oneDecimal': '允许一位小数'
|
|
|
'mobile': '请输入正确的号码',
|
|
|
'idCard': '请输入正确的身份证号码',
|
|
|
'digit': '请输入整型数字',
|
|
|
'oneDecimal': '允许一位小数'
|
|
|
}
|
|
|
export default {
|
|
|
name: "CustomForm",
|
|
|
props: {
|
|
|
configs: Object,
|
|
|
comfirmBtnText: {
|
|
|
type: String,
|
|
|
default: "保存"
|
|
|
},
|
|
|
comfirmBtnColor: {
|
|
|
type: String,
|
|
|
default: "#17b3ec"
|
|
|
}
|
|
|
name: 'CustomForm',
|
|
|
props: {
|
|
|
configs: Object,
|
|
|
comfirmBtnText: {
|
|
|
type: String,
|
|
|
default: '保存'
|
|
|
},
|
|
|
components: {
|
|
|
|
|
|
comfirmBtnColor: {
|
|
|
type: String,
|
|
|
default: '#17b3ec'
|
|
|
}
|
|
|
},
|
|
|
components: {},
|
|
|
watch: {
|
|
|
'form': {
|
|
|
handler(n, o) {
|
|
|
this.$emit('input', this.form)
|
|
|
},
|
|
|
deep: true,
|
|
|
immediate: true
|
|
|
}
|
|
|
// 'configs': {
|
|
|
// handler(n, o){
|
|
|
// if(n.fields[0].groupTitle){
|
|
|
// this.groups = n.fields
|
|
|
// } else {
|
|
|
// this.groups = {
|
|
|
// groupTitle: "信息",
|
|
|
// children: n.fields
|
|
|
// }
|
|
|
// }
|
|
|
// console.log(this.groups)
|
|
|
// },
|
|
|
// deep: true,
|
|
|
// immediate: true
|
|
|
// }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
form: '',
|
|
|
rules: '',
|
|
|
showPick: false,
|
|
|
columns: [],
|
|
|
curPick: '',
|
|
|
groups: [],
|
|
|
currentDate: new Date()
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.formatGroup()
|
|
|
var form = {}
|
|
|
var rules = {}
|
|
|
this.configs.fields.forEach((v, i) => {
|
|
|
if (v.children) {
|
|
|
v.children.forEach((m, n) => {
|
|
|
form[m.id] = this.formatValue(m)
|
|
|
rules[m.id] = this.setRule(m)
|
|
|
})
|
|
|
} else {
|
|
|
form[v.id] = this.formatValue(v)
|
|
|
rules[v.id] = this.setRule(v)
|
|
|
}
|
|
|
})
|
|
|
this.form = form
|
|
|
this.rules = rules
|
|
|
},
|
|
|
mounted() {},
|
|
|
computed: {},
|
|
|
methods: {
|
|
|
resetRule(item) {
|
|
|
this.rules[item.id] = this.setRule(item)
|
|
|
},
|
|
|
watch:{
|
|
|
'form': {
|
|
|
handler(n, o){
|
|
|
this.$emit('input', this.form)
|
|
|
},
|
|
|
deep: true,
|
|
|
immediate: true
|
|
|
}
|
|
|
// 'configs': {
|
|
|
// handler(n, o){
|
|
|
// if(n.fields[0].groupTitle){
|
|
|
// this.groups = n.fields
|
|
|
// } else {
|
|
|
// this.groups = {
|
|
|
// groupTitle: "信息",
|
|
|
// children: n.fields
|
|
|
// }
|
|
|
// }
|
|
|
// console.log(this.groups)
|
|
|
// },
|
|
|
// deep: true,
|
|
|
// immediate: true
|
|
|
// }
|
|
|
formatValue(v) {
|
|
|
return v.value || v.value === 0 || v.value === false
|
|
|
? v.value
|
|
|
: v.type == 'select' || v.type == 'date' || v.type == 'datetime'
|
|
|
? { name: '', id: '' }
|
|
|
: ''
|
|
|
},
|
|
|
data(){
|
|
|
return {
|
|
|
form: "",
|
|
|
rules: "",
|
|
|
showPick: false,
|
|
|
columns: [],
|
|
|
curPick: "",
|
|
|
groups: [],
|
|
|
currentDate:new Date(),
|
|
|
}
|
|
|
formatGroup() {
|
|
|
if (this.configs.fields.length && this.configs.fields[0].groupTitle) {
|
|
|
this.groups = this.configs.fields
|
|
|
} else {
|
|
|
this.groups = [
|
|
|
{
|
|
|
groupTitle: '信息',
|
|
|
children: this.configs.fields
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
this.groups.forEach(m => {
|
|
|
m.children.forEach(v => {
|
|
|
this.loadDict(v)
|
|
|
})
|
|
|
})
|
|
|
console.log('this.groups', this.groups)
|
|
|
},
|
|
|
created(){
|
|
|
this.formatGroup()
|
|
|
var form = {}
|
|
|
var rules = {}
|
|
|
this.configs.fields.forEach((v, i) => {
|
|
|
if(v.children){
|
|
|
v.children.forEach((m, n)=>{
|
|
|
form[m.id] = this.formatValue(m)
|
|
|
rules[m.id] = this.setRule(m)
|
|
|
})
|
|
|
} else {
|
|
|
form[v.id] = this.formatValue(v)
|
|
|
rules[v.id] = this.setRule(v)
|
|
|
}
|
|
|
});
|
|
|
this.form = form
|
|
|
this.rules = rules
|
|
|
loadDict(item) {
|
|
|
if (!item.optionListLoadConfig) {
|
|
|
return
|
|
|
}
|
|
|
if (!Tools.dictLoad) {
|
|
|
console.error('请先设置字典加载器')
|
|
|
return
|
|
|
}
|
|
|
Tools.dictLoad(item.optionListLoadConfig).then(res => {
|
|
|
item.optionList = res
|
|
|
})
|
|
|
},
|
|
|
mounted() {
|
|
|
|
|
|
setValue(key, value) {
|
|
|
this.form[key] = value
|
|
|
},
|
|
|
computed:{
|
|
|
|
|
|
setValues(model) {
|
|
|
for (var k in this.form) {
|
|
|
this.setValue(k, model[k])
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
resetRule(item){
|
|
|
this.rules[item.id] = this.setRule(item)
|
|
|
},
|
|
|
formatValue(v){
|
|
|
return v.value||v.value===0||v.value===false? v.value : v.type=='select'||v.type=='date'||v.type=='datetime'? {name: "", id: ""} : ""
|
|
|
},
|
|
|
formatGroup(){
|
|
|
if(this.configs.fields[0].groupTitle){
|
|
|
this.groups = this.configs.fields
|
|
|
} else {
|
|
|
this.groups = [{
|
|
|
groupTitle: "信息",
|
|
|
children: this.configs.fields
|
|
|
}]
|
|
|
}
|
|
|
this.groups.forEach(m=>{
|
|
|
m.children.forEach(v=>{
|
|
|
this.loadDict(v)
|
|
|
})
|
|
|
})
|
|
|
console.log('this.groups', this.groups)
|
|
|
},
|
|
|
loadDict(item){
|
|
|
if(!item.optionListLoadConfig){
|
|
|
return
|
|
|
}
|
|
|
if(!Tools.dictLoad){
|
|
|
console.error('请先设置字典加载器')
|
|
|
return
|
|
|
}
|
|
|
Tools.dictLoad(item.optionListLoadConfig).then(res=>{
|
|
|
item.optionList = res
|
|
|
})
|
|
|
},
|
|
|
setValue(key, value){
|
|
|
this.form[key] = value
|
|
|
},
|
|
|
setValues(model){
|
|
|
for(var k in this.form){
|
|
|
this.setValue(k, model[k])
|
|
|
}
|
|
|
},
|
|
|
onSubmit(){
|
|
|
this.$emit("onSubmit", this.form)
|
|
|
},
|
|
|
setRule(item){
|
|
|
var rules = item.rules || []
|
|
|
var vanCfg = item.vanCfg
|
|
|
if(vanCfg.required){
|
|
|
rules = [{ required: true, message: item.type=='photo'? (item.requiredErrMsg || '请上传') : '' }].concat(rules)
|
|
|
}
|
|
|
onSubmit() {
|
|
|
this.$emit('onSubmit', this.form)
|
|
|
},
|
|
|
setRule(item) {
|
|
|
var rules = item.rules || []
|
|
|
var vanCfg = item.vanCfg
|
|
|
if (vanCfg.required) {
|
|
|
rules = [{ required: true, message: item.type == 'photo' ? item.requiredErrMsg || '请上传' : '' }].concat(rules)
|
|
|
}
|
|
|
|
|
|
if(item.regularType && validateForm[item.regularType]){
|
|
|
rules.push({
|
|
|
validator: validateForm[item.regularType],
|
|
|
trigger: 'blur',
|
|
|
message: messageObj[item.regularType]
|
|
|
})
|
|
|
}
|
|
|
console.log(rules)
|
|
|
return rules
|
|
|
},
|
|
|
onSelectShow(item){
|
|
|
this.columns = item.optionList || []
|
|
|
this.curPick = item
|
|
|
this.showPick = true
|
|
|
},
|
|
|
onConfirm(value, index) {
|
|
|
if(this.curPick.type == 'datetime'){
|
|
|
this.form[this.curPick.id].name = this.$moment(value).format('YYYY-MM-DD HH:mm')
|
|
|
this.form[this.curPick.id].id = value
|
|
|
} else if(this.curPick.type == 'date'){
|
|
|
this.form[this.curPick.id].name = this.$moment(value).format('YYYY-MM-DD')
|
|
|
this.form[this.curPick.id].id = value
|
|
|
} else {
|
|
|
this.form[this.curPick.id].name = value.text
|
|
|
this.form[this.curPick.id].id = value.model.id
|
|
|
}
|
|
|
this.showPick = false
|
|
|
},
|
|
|
onCancel(){
|
|
|
this.showPick = false
|
|
|
},
|
|
|
if (item.regularType && validateForm[item.regularType]) {
|
|
|
rules.push({
|
|
|
validator: validateForm[item.regularType],
|
|
|
trigger: 'blur',
|
|
|
message: messageObj[item.regularType]
|
|
|
})
|
|
|
}
|
|
|
console.log(rules)
|
|
|
return rules
|
|
|
},
|
|
|
onSelectShow(item) {
|
|
|
this.columns = item.optionList || []
|
|
|
this.curPick = item
|
|
|
this.showPick = true
|
|
|
},
|
|
|
};
|
|
|
onConfirm(value, index) {
|
|
|
if (this.curPick.type == 'datetime') {
|
|
|
this.form[this.curPick.id].name = this.$moment(value).format('YYYY-MM-DD HH:mm')
|
|
|
this.form[this.curPick.id].id = value
|
|
|
} else if (this.curPick.type == 'date') {
|
|
|
this.form[this.curPick.id].name = this.$moment(value).format('YYYY-MM-DD')
|
|
|
this.form[this.curPick.id].id = value
|
|
|
} else {
|
|
|
this.form[this.curPick.id].name = value.text
|
|
|
this.form[this.curPick.id].id = value.model.id
|
|
|
}
|
|
|
this.showPick = false
|
|
|
},
|
|
|
onCancel() {
|
|
|
this.showPick = false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@import './css/index.scss';
|
