91 lines
1.9 KiB
Vue
91 lines
1.9 KiB
Vue
<template>
|
|
<view class="">
|
|
<uni-forms ref="form" :model="form">
|
|
<uni-forms-item v-for="item in fields" :label="item.label" :name="item.name">
|
|
<uni-easyinput v-if="item.tag == 'el-input'" v-model="form[item.name]" />
|
|
<uni-datetime-picker v-else-if="item.tag == 'el-date-picker'" v-model="form[item.name]"></uni-datetime-picker>
|
|
<uni-data-select
|
|
v-else-if="item.tag == 'el-select'"
|
|
v-model="form[item.name]"
|
|
:localdata="item.slot.localData"
|
|
>
|
|
</uni-data-select>
|
|
<view v-else-if="item.tag == 'el-upload'">
|
|
手机端暂不支持文件上传
|
|
</view>
|
|
<view v-else>未知表单</view>
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
|
|
<view class="submitter">
|
|
<button @click="submitForm">提交</button>
|
|
<button @click="reset">重置</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
formConf: {
|
|
required: true,
|
|
type: Object,
|
|
},
|
|
submitter: {
|
|
default: true,
|
|
type: Boolean
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
fields: [],
|
|
form: {}
|
|
}
|
|
},
|
|
watch: {
|
|
formConf: {
|
|
immediate: true,
|
|
deep: true,
|
|
handler(newVal) {
|
|
this.SchemaToJsonForm(newVal)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
async SchemaToJsonForm(schema) {
|
|
console.log(schema, 'watch 打印')
|
|
const fields = []
|
|
for (const row of schema.fields) {
|
|
const o = {
|
|
label: row.__config__.label,
|
|
tag: row.__config__.tag,
|
|
name: row.__vModel__,
|
|
_row: row
|
|
}
|
|
if (row.__slot__ && row.__slot__.options) {
|
|
o['slot'] = {
|
|
localData: row.__slot__.options.map(item => {
|
|
return {
|
|
value: item.value,
|
|
text: item.label
|
|
}
|
|
})
|
|
}
|
|
}
|
|
this.$set(this.form, o.name, '')
|
|
fields.push(o)
|
|
}
|
|
this.fields = fields;
|
|
},
|
|
submitForm() {
|
|
this.$emit('finish', this.form)
|
|
},
|
|
reset() {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style> |