form

[taoeer]

<template>
  <div class="t-form-item">
    <slot :required="isRequired" :errMsg="errMsg"></slot>
  </div>
</template>

<script>
import AsyncValidator from 'async-validator'

export default {
  inject: ['tForm'],
  props: {
    rules: [Object, Array],
    prop: String
  },
  data() {
    return {
        errMsg: ''
    }
  },
  mounted() {
    this.tForm.addFields(this)
  },
  unmounted() {
    this.tForm.removeFields(this);
  },
  computed: {
    finalRules() {
      let rules = this.rules
      if (!rules) {
        Object.keys(this.tForm.rules || []).forEach((key) => {
          if (key === this.prop) {
            rules = this.tForm.rules[key]
          }
        })
      }
      return rules
    },
    isRequired() {
        return this.finalRules.some(rules => rules.required)
    }
  },v
  methods: {
    validate(callback) {
      if (!this.rules || !this.prop || !this.tForm.model) {
        return callback()
      }
      const validator = new AsyncValidator({
        [this.prop]: this.finalRules
      })
      validator.validate(
        {
          [this.prop]: this.tForm.model[this.prop]
        },
        (err, feilds) => {
            if (err) {
                this.errMsg = err[0].message
            }
          console.log('feilds: ', err, feilds)
          callback(err, feilds)
        }
      )
    }
  }
}
</script>

<template>
  <form class="t-form"><slot></slot></form>
</template>

<script>
export default {
  props: {
    rules: Object,
    model: Object
  },
  provide() {
    return {
      tForm: this
    }
  },
  data() {
    return {
      fields: []
    }
  },
  methods: {
    addFields(field) {
      this.fields.push(field)
    },
    removeFields(field) {
      const index = this.fields.findIndex(f => f === field);
      this.fields.splice(index, 1);
      console.log('removeFields: ', field, this.fields);
    },
    validate(callback) {
      if (!this.model) {
        console.warn('[Element Warn][Form]model is required for validate to work!')
        return
      }

      let promise
      // if no callback, return promise
      if (typeof callback !== 'function' && window.Promise) {
        promise = new window.Promise((resolve, reject) => {
          callback = function (valid, invalidFields) {
            valid ? resolve(valid) : reject(invalidFields)
          }
        })
      }

      let valid = true
      let count = 0
      // 如果需要验证的fields为空，调用验证时立刻返回callback
      if (this.fields.length === 0 && callback) {
        callback(true)
      }
      let invalidFields = {}
      this.fields.forEach((field) => {
        field.validate((message, field) => {
          if (message) {
            valid = false
          }
          invalidFields = {
            ...invalidFields,
            ...field
          }
          if (typeof callback === 'function' && ++count === this.fields.length) {
            callback(valid, invalidFields)
          }
        })
      })

      if (promise) {
        return promise
      }
    }
  }
}
</script>


```

```