E_WeChat/Eservice/components/form/form.js

// components/form/form.js
import api from '../../api/api'
import util from '../../../utils/util'

const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true // 复数插槽: 是
  },
  properties: {
    formLayoutData:{
      value:{},
      type:Object
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    pickerVisible:false,
    dateVisible:false,
    cascaderVisible:false,
    disabledStatus:false,
    pickerIndex:0,
    timePickerValue:'',
    actPicker:{},
    options:[]
  },
  
  /**
   * 组件的方法列表
   */
  lifetimes:{
    created(){
    },
    attached () {
      this.getarealist()
      getApp().globalData.formData = this
    }
  },
  methods: {
    
    onBlur (detail) {

      let data = detail.currentTarget.dataset.item

      let index = detail.currentTarget.dataset.index

      this.data.formLayoutData.formInfo[index].inputValue = detail.detail.value

      if (data.role.formatter) {

        let regStatus = data.role.formatter(detail.detail.value)

        this.setErrorMsg(regStatus,index)
      }
    },
    onClear (detail) {
      let index = detail.currentTarget.dataset.index

      this.data.formLayoutData.formInfo[index].inputValue = detail.detail.value

      this.setData({

        formLayoutData:this.data.formLayoutData

      })
    },
    onPicker (detail) {
      let data = detail.currentTarget.dataset.item
      this.setData({
        pickerIndex:detail.currentTarget.dataset.index,
        pickerVisible:true,
        actPicker:{
          label:data.label,
          data:data.data
        }
      })
      console.log(this.data.formLayoutData.formInfo)
    },
    onPickerConfirm (detail) {
      this.data.formLayoutData.formInfo[this.data.pickerIndex].inputValue = detail.detail.value[0]
      this.data.actPicker.data.forEach(e=>{
        if (e.value === detail.detail.value[0]) {
          this.data.formLayoutData.formInfo.filter(v=>{
            if (v.id === e.hide) {
              v.force = false
              v.errorMsg = null,
              v.inputValue = 0
            }
          })
        }
      })
      this.setData({
        formLayoutData:this.data.formLayoutData
      })
    },
    showDatePicker (detail) {
      let data = detail.currentTarget.dataset.item
      this.setData({
        pickerIndex:detail.currentTarget.dataset.index,
        dateVisible:true,
        timePickerValue:data.inputValue
      })
    },
    onTimePickerConfirm (detail) {
      this.data.formLayoutData.formInfo[this.data.pickerIndex].inputValue = detail.detail.value
      this.setData({
        formLayoutData:this.data.formLayoutData
      })
    },
    showCascader (detail) {
      let data = detail.currentTarget.dataset.item
      this.setData({
        pickerIndex:detail.currentTarget.dataset.index,
        cascaderVisible:true,
      })
    },

    // onChange (detail) {
    //   let data = detail.currentTarget.dataset.item

    //   let index = detail.currentTarget.dataset.index

    //   this.data.formLayoutData.formInfo[index].inputValue = detail.detail.value

    //   if (data.role.formatter) {

    //     let regStatus = data.role.formatter(detail.detail.value)
    //     this.setErrorMsg(regStatus,index)
    //   }
    // },
    onChange (detail) {
      this.data.formLayoutData.formInfo[this.data.pickerIndex].inputValue = detail.detail.selectedOptions.map(e=>{
        return e.value
      }).join(',')
      this.setData({
        formLayoutData:this.data.formLayoutData
      })
    },
    validate (fn) {
      let arr = this.data.formLayoutData.formInfo.map((e,index)=>{
        // console.log(e)
        if (!e.force) return e
        console.log(e)
      if (e.label === '关联订单') {
        console.log(e.force && e.inputValue !== '')
      }
        if (e.force && e.inputValue !== '') {
         
          if (e.role.formatter) {

            let regStatus = e.role.formatter(e.inputValue)
    
            this.setErrorMsg(regStatus,index)
            
          } else {

            this.setErrorMsg('',index)

          }

        } else {
          console.log(e.label)
          this.setErrorMsg(e.label + '不能为空',index)
        }
        return e
      })

      let isValidate = !arr.some(item=>item.errorMsg && item.errorMsg !== '')

      fn(isValidate)
      
    },
    setErrorMsg (msg,index) {

      this.data.formLayoutData.formInfo[index].errorMsg = msg

      this.setData({
        formLayoutData:this.data.formLayoutData
      })
    },
    async getarealist () {
      const res = await api.arealist()
      
      this.setData({
        options:util.createMenu(res.data)
      })
    },
    
    setObjectData (data) {
      let that = this, obj = {}
      that.setData({
        disabledStatus:false
      })
      

      that.compData = that.selectComponent("#upload")

      that.compData.toSetFileData().then(e=>{
        that.setData({
          disabledStatus:false
        })
        data.forEach(e=>{
          if (e.type === 'upload') {
            e.inputValue = that.compData.data.attachmentids
          }
  
          obj[e.id] = e.inputValue
          
        })
  
        if (obj.provinceArr) {
          let arr = obj.provinceArr.split(",")
          obj.province = arr[0]
          obj.city = arr[1]
          obj.county = arr[2]
        }
        that.triggerEvent("click", obj);
      })

    },
    formSubmit () {
      var that = this
      console.log(this.data.formLayoutData.formInfo)

      that.validate((valid) => {
        console.log(valid)
        if (valid) {
          that.setObjectData(that.data.formLayoutData.formInfo)
        } else {
          return false;
        }
      });
    }
  }
})