UNION_NSI/target/classes/static/components/mobile/common/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="['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)"
          ></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"/>-->

              <vant_file_upload :files.sync="column.columnValue" :max="column.fileNumber"
                                :type="column.fileType"></vant_file_upload>
            </template>
          </van-field>
        </template>

      </template>
    </van-form>
  </div>
</template>

<!-- 请在van-form中引用 -->

<script>
module.exports = {
  name: "TrainDynamicForm",
  components: {
    'vant_file_upload': httpVueLoader('/components/plugins/VantFileUpload.vue')
  },
  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: {
    validForm() {
      try {
        this.$refs.form.validate().then(() => {
          return true
        }).catch(() => {
          return false
        })
      } catch (e) {
        return false
      }

      /*return new Promise(resolve => {
        this.$refs.form.validate().then(() => {
          resolve(true)
        }).catch(() => {
          resolve(false)
        })
      })*/

    },
    onSubmit() {

    },
    selectFieldClick(column) {
      console.log(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 = moment(time).format('YYYY-MM-DD')
      } else if (column.columnType === 'DATETIME') {
        column.columnValue = moment(time).format('YYYY-MM-DD HH:mm:ss')
      } else {
        //预留别的类型
        column.columnValue = 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>