zhgh_zjvtit/target/classes/static/components/module/trainSignUp/TrainDynamicForm.vue

<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>