You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
3.4 KiB
140 lines
3.4 KiB
<script>
|
|
import formBuilder from '@/utils/formBuilder'
|
|
import moment from "moment/moment";
|
|
export default {
|
|
props: {
|
|
device: {
|
|
type: String,
|
|
default: 'desktop',
|
|
required: true
|
|
},
|
|
info: {
|
|
type: Array,
|
|
default: () => [],
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
form: {},
|
|
file: {
|
|
ggg: []
|
|
},
|
|
showControl: {},
|
|
vanCalendarOption: {
|
|
isShow: false,
|
|
forFormName: ""
|
|
},
|
|
vanTimePickerOption: {
|
|
isShow: false,
|
|
forFormName: ""
|
|
},
|
|
vanPopupOption: {
|
|
isShow: false,
|
|
forFormName: "",
|
|
columns: []
|
|
}
|
|
}
|
|
},
|
|
methods: {},
|
|
computed: {},
|
|
watch: {
|
|
info(newVal) {
|
|
let keys = newVal.map(i => i.name)
|
|
keys.forEach(key => {
|
|
this.form[key] = ''
|
|
})
|
|
}
|
|
},
|
|
render(h) {
|
|
return h('div',[
|
|
h('van-form',{
|
|
props: {
|
|
'scroll-to-error': true
|
|
}
|
|
},this.info.map(field => formBuilder.bind(this)(this.device, field, h))),
|
|
//calendar
|
|
this.info.findIndex(i => i.type === 'date') !== -1 ?
|
|
h('van-calendar',{
|
|
ref: `vanCalendar`,
|
|
props: {
|
|
value: this.vanCalendarOption.isShow,
|
|
'min-date': this.$moment().subtract('years',10).toDate(),
|
|
'max-date': this.$moment().add('years',10).toDate(),
|
|
},
|
|
on: {
|
|
input: e => {
|
|
this.$set(this.vanCalendarOption,'isShow',e)
|
|
},
|
|
confirm: date => {
|
|
this.$set(this.form,this.vanCalendarOption.forFormName,moment(date).format('YYYY-MM-DD'))
|
|
this.$set(this.vanCalendarOption,'isShow',false)
|
|
}
|
|
}
|
|
}) : '',
|
|
//datetimepicker
|
|
this.info.findIndex(i => i.type === 'datetime') !== -1 ?
|
|
h('van-popup',{
|
|
props: {
|
|
value: this.vanTimePickerOption.isShow,
|
|
position: 'bottom',
|
|
},
|
|
on: {
|
|
input: e => {
|
|
this.$set(this.vanTimePickerOption,'isShow',e)
|
|
},
|
|
}
|
|
},[
|
|
h('van-datetime-picker',{
|
|
props: {
|
|
type: 'datetime'
|
|
},
|
|
on: {
|
|
confirm: time => {
|
|
this.$set(this.form,this.vanTimePickerOption.forFormName,moment(time).format('YYYY-MM-DD HH:mm:ss'))
|
|
|
|
},
|
|
cancel: _ => {
|
|
this.$set(this.vanTimePickerOption,'isShow',false)
|
|
}
|
|
}
|
|
})
|
|
]) : '',
|
|
//popup
|
|
this.info.findIndex(i => i.type === 'datetime') !== -1 ?
|
|
h('van-popup',{
|
|
props: {
|
|
value: this.vanPopupOption.isShow,
|
|
position: 'bottom',
|
|
},
|
|
on: {
|
|
input: e => {
|
|
this.$set(this.vanPopupOption,'isShow',e)
|
|
},
|
|
}
|
|
},[
|
|
h('van-picker',{
|
|
props: {
|
|
'show-toolbar': true,
|
|
columns: this.vanPopupOption.columns,
|
|
},
|
|
on: {
|
|
confirm: value => {
|
|
console.log(value)
|
|
this.$set(this.form,this.vanPopupOption.forFormName,value)
|
|
|
|
},
|
|
cancel: _ => {
|
|
this.$set(this.vanPopupOption,'isShow',false)
|
|
}
|
|
}
|
|
})
|
|
]) : '',
|
|
])
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
</style>
|