first commit
This commit is contained in:
@jyuhsin
@@ -0,0 +1,195 @@
|
||||
<style>
|
||||
.field .van-field__error-message {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<van-form @submit="onSubmit" ref="form">
|
||||
|
||||
<template v-for="column in dynamicData">
|
||||
<!-- 文本、数值、时间 -->
|
||||
<template v-if="['CHAR', 'VARCHAR', 'TEXT', 'INT', 'DATE', 'DATETIME'].includes(column.columnType)">
|
||||
<van-field
|
||||
class="field"
|
||||
v-model="column.columnValue"
|
||||
:clickable="['SELECT'].includes(column.columnFormType)"
|
||||
:label="column.columnName"
|
||||
:name="column.columnCode"
|
||||
:type="['INT'].includes(column.columnType) ? 'digit' : ''"
|
||||
:placeholder="(['SELECT'].includes(column.columnFormType) ? '请选择' : '请填写') + column.columnName"
|
||||
:readonly="['SELECT'].includes(column.columnFormType)"
|
||||
:rules="[{ required: column.isRequired, message: (['SELECT'].includes(column.columnFormType) ? '请选择' : '请填写') + column.columnName }]"
|
||||
:required="column.isRequired"
|
||||
@click="selectFieldClick(column)"
|
||||
>
|
||||
<template v-if="['STEPPER'].includes(column.columnFormType)" #input>
|
||||
<van-stepper v-model="column.columnValue" :max="3" :min="1"/>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-popup
|
||||
v-if="['SELECT'].includes(column.columnFormType)"
|
||||
v-model="pickerStates[column.columnCode + 'Picker']"
|
||||
position="bottom"
|
||||
>
|
||||
<template v-if="['DATETIME', 'DATE'].includes(column.columnType)">
|
||||
<van-datetime-picker
|
||||
:title="column.columnName"
|
||||
:type="column.columnType.toLocaleLowerCase()"
|
||||
show-toolbar
|
||||
@cancel="
|
||||
pickerStates[column.columnCode + 'Picker'] = false
|
||||
column.columnValue = ''
|
||||
"
|
||||
@confirm="
|
||||
(time) => {
|
||||
dateTimePickerConfirm(time, column)
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<van-picker
|
||||
:columns="column.selectValues"
|
||||
:title="column.columnName"
|
||||
show-toolbar
|
||||
@cancel="
|
||||
pickerStates[column.columnCode + 'Picker'] = false
|
||||
column.columnValue = ''
|
||||
"
|
||||
@confirm="
|
||||
(value) => {
|
||||
ordinaryPickerConfirm(value, column)
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</van-popup>
|
||||
</template>
|
||||
<!-- 单选框 -->
|
||||
<template v-else-if="['BOOLEAN'].includes(column.columnType)"></template>
|
||||
<!-- 文件 -->
|
||||
<template v-else-if="['JSON'].includes(column.columnType)">
|
||||
<van-field
|
||||
:required="column.isRequired"
|
||||
:label="column.columnName"
|
||||
:rules="[{ required: column.isRequired, message: '请上传' + column.columnName }]"
|
||||
>
|
||||
<template #input>
|
||||
<!-- <van-uploader v-model="fileList" :after-read="(file)=>{fileAfterRead(file,column)}"
|
||||
:max-count="column.fileNumber"/>-->
|
||||
<h5-file-upload
|
||||
slot="input"
|
||||
:value.sync="column.columnValue"
|
||||
:upload_number="column.fileNumber"
|
||||
upload_mode="file"
|
||||
upload_result_category="array"
|
||||
upload_result_type="url"
|
||||
complete_result
|
||||
></h5-file-upload>
|
||||
</template>
|
||||
</van-field>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</van-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 请在van-form中引用 -->
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "TrainDynamicForm",
|
||||
components: {},
|
||||
props: {
|
||||
dynamicData: []
|
||||
},
|
||||
model: {
|
||||
prop: "dynamicData",
|
||||
event: "updateDynamicData"
|
||||
},
|
||||
watch: {
|
||||
dynamicData: {
|
||||
handler: function (newValue, oldValue) {
|
||||
this.$emit("updateDynamicData", newValue)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//所有的picker状态
|
||||
pickerStates: {},
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async validForm() {
|
||||
try {
|
||||
this.$refs.form.validate().then(() => {
|
||||
return true
|
||||
}).catch(() => {
|
||||
return false
|
||||
})
|
||||
} catch (e) {
|
||||
return false
|
||||
}
|
||||
},
|
||||
async onSubmit() {
|
||||
|
||||
},
|
||||
selectFieldClick(column) {
|
||||
this.$set(this.pickerStates, column.columnCode + "Picker", true)
|
||||
if (!["DATE", "DATETIME"].includes(column.columnType)) {
|
||||
//说明是普通的下拉框
|
||||
// column.selectValues = ['1', '2', '3']
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 时间picker确认
|
||||
* @param time
|
||||
* @param column
|
||||
*/
|
||||
dateTimePickerConfirm(time, column) {
|
||||
if (column.columnType === "DATE") {
|
||||
column.columnValue = this.$moment(time).format("YYYY-MM-DD")
|
||||
} else if (column.columnType === "DATETIME") {
|
||||
column.columnValue = this.$moment(time).format("YYYY-MM-DD HH:mm:ss")
|
||||
} else {
|
||||
//预留别的类型
|
||||
column.columnValue = this.$moment(time).format("YYYY-MM-DD HH:mm:ss")
|
||||
}
|
||||
this.pickerStates[column.columnCode + "Picker"] = false
|
||||
},
|
||||
/**
|
||||
* 普通picker确认
|
||||
* @param value
|
||||
* @param column
|
||||
*/
|
||||
ordinaryPickerConfirm(value, column) {
|
||||
column.columnValue = value
|
||||
this.pickerStates[column.columnCode + "Picker"] = false
|
||||
},
|
||||
/**
|
||||
* 文件读取
|
||||
*/
|
||||
fileAfterRead(file, column) {
|
||||
console.log(file)
|
||||
console.log(column)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// console.log(this.dynamicData)
|
||||
// this.dynamicData.forEach(v => {
|
||||
// if (v.columnFormType === 'SELECT') {
|
||||
// v.columnPickerName = v.columnCode+'Picker'
|
||||
// }
|
||||
// })
|
||||
// console.log(this.dynamicData)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user