oak-general-business/lib/miniprogram_npm/lin-ui/form/index.js

import eventBus from '../core/utils/event-bus.js';
import eventUtil from '../core/utils/event-util';
Component({
  /**
     * 组件的属性列表
     */
  externalClasses: ['l-form-container-class', 'l-form-submit-class', 'l-form-reset-class', 'l-form-btn-class'],
  options: {
    multipleSlots: true,
  },
  relations: {
    '../form-item/index': {
      type: 'child',
      linked: function (target) {
        this._initItem(target);
      },
      linkChanged: function () {
      },
      unlinked: function () {
      }
    }
  },

  properties: {
    name: {
      type: String,
      value: ''
    },
    isSubmitValidate: {
      type: Boolean,
      value: true
    }
  },

  attached() {
    this._init();
  },
  detached() {
    for (let key in this._keys) {
      if (Object.prototype.hasOwnProperty.call(this._keys, key)) {
        eventBus.off(`lin-form-blur-${key}`);
        eventBus.off(`lin-form-change-${key}`);
      }
    }
  },

  /**
     * 组件的初始数据
     */
  data: {
    _this: null
  },

  /**
     * 组件的方法列表
     */
  methods: {
    _init() {
      wx.lin = wx.lin || {};
      wx.lin.forms = wx.lin.forms || {};
      wx.lin.forms[this.properties.name] = this;
      wx.lin.initValidateForm = (_this) => {
        wx.lin._instantiation = _this;
      };
      wx.lin.submitForm = function (name) {
        wx.lin.forms[name].submit();
      };
      wx.lin.resetForm = function (name) {
        wx.lin.forms[name].reset();
      };

    },

    _initItem(target) {
      this._keys = this._keys || {};
      this._errors = this._errors || {};
      const key = target.properties.name;
      eventBus.on(`lin-form-blur-${key}`, (id) => {
        this._validateItem(id, 'blur');
        // clearTimeout(this.blur_time)
        // this.blur_time = setTimeout(()=>{
        //   this._validateItem(id, 'blur');
        // }, 200)
      });
      eventBus.on(`lin-form-change-${key}`, (id) => {
        clearTimeout(this.change_time);
        this.change_time = setTimeout(() => {
          this._validateItem(id, 'change');
        }, 200);
      });
      if (this._keys[key]) {
        throw new Error(`表单项存在重复的name：${key}`);
      }
      this._keys[key] = '';
      this._errors[key] = [];
    },

    _validateItem(id, type) {
      let _this = wx.lin._instantiation;

      let params = this._getValues();

      const items = this.getRelationNodes('../form-item/index');
      const currentTarget = items.find(item => item.properties.name === id);
      const formItem = _this.selectComponent(`#${id}`);
      if (formItem) {
        currentTarget.validatorData(params, type);
      } else {
        throw new Error(`表单项不存在name：${id}`);
      }
      this._errors[id] = currentTarget.data.errors;
      return currentTarget.data.errors;
    },

    _forEachNodes(func, isReverse) {
      let items = this.getRelationNodes('../form-item/index');
      if (isReverse) {
        items.reverse();
      }
      items.forEach((item, index) => {
        func(item, index);
      });
    },

    _validateForm() {
      let _this = wx.lin._instantiation;
      // 校验name的rule
      let formErrors = [];
      let params = this._getValues();
      this._forEachNodes(item => {
        const id = item.properties.name;
        const formItem = _this.selectComponent(`#${id}`);
        if (formItem) {
          item.validatorData(params);
        } else {
          throw new Error(`表单项不存在name：${id}`);
        }
        this._errors[id] = item.data.errors;
        formErrors = formErrors.concat(item.data.errors);
      }, true);
      return formErrors;
    },

    _getValues() {
      let params = {};
      let _this = wx.lin._instantiation;

      this._forEachNodes(item => {
        const _id = item.properties.name;
        const formItem = _this.selectComponent(`#${_id}`);
        if (formItem) {
          params[_id] = formItem.getValues();
        }
      });
      return params;
    },

    submit() {
      let errors = this.data.isSubmitValidate ? this._validateForm() : [];
      this.triggerEvent('linsubmit', {
        values: this._getValues(),
        errors: this.data.isSubmitValidate ? this._errors : {},
        isValidate: errors.length === 0
      });
    },
    reset() {
      let _this = wx.lin._instantiation;
      this._forEachNodes((item) => {
        item.setData({
          errorText: ''
        });
        const _id = item.properties.name;
        const formItem = _this.selectComponent(`#${_id}`);
        if (formItem) {
          formItem.reset();
        }
      });
      eventUtil.emit(this, 'linreset');
    }
  }
});