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.
186 lines
4.4 KiB
186 lines
4.4 KiB
<script>
|
|
import formBuilder from '@/utils/formBuilder'
|
|
import moment from "moment/moment";
|
|
import {deepCopy} from "@/utils";
|
|
export default {
|
|
props: {
|
|
readable: {
|
|
type: Array,
|
|
default: () => [],
|
|
required: true
|
|
},
|
|
writeable: {
|
|
type: Array,
|
|
default: () => [],
|
|
required: true
|
|
},
|
|
originalForm: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
required: true
|
|
},
|
|
subForm: {
|
|
type: Map,
|
|
default: () => new Map()
|
|
},
|
|
device: {
|
|
type: String,
|
|
default: 'desktop',
|
|
required: true
|
|
},
|
|
fields: {
|
|
type: Array,
|
|
default: () => [],
|
|
required: true
|
|
},
|
|
fileList: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
required: true
|
|
},
|
|
scriptContent: String
|
|
|
|
},
|
|
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] = ''
|
|
})
|
|
},
|
|
originalForm(newVal) {
|
|
this.form = deepCopy(newVal)
|
|
},
|
|
fileList(newVal) {
|
|
this.file = deepCopy(newVal)
|
|
},
|
|
scriptContent(newVal) {
|
|
if(newVal) {
|
|
try {
|
|
new Function(newVal).bind(this)()
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
render(h) {
|
|
const authFields = this.fields.map(field => ({
|
|
...field,
|
|
_readable: this.readable.indexOf(field.id) !== -1,
|
|
_writeable: this.writeable.indexOf(field.id) !== -1
|
|
}))
|
|
return h('div',[
|
|
h('van-form',{
|
|
props: {
|
|
'scroll-to-error': true
|
|
}
|
|
},authFields.map(field => formBuilder.bind(this)(this.device, field, h))),
|
|
//calendar
|
|
authFields.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
|
|
authFields.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
|
|
authFields.findIndex(i => i.type === 'select') !== -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 => {
|
|
this.$set(this.form,this.vanPopupOption.forFormName,value)
|
|
this.$set(this.vanPopupOption,'isShow',false)
|
|
},
|
|
cancel: _ => {
|
|
this.$set(this.vanPopupOption,'isShow',false)
|
|
}
|
|
}
|
|
})
|
|
]) : '',
|
|
])
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
</style>
|