drip-ui/es/form/index.js

Lightweight Mobile UI Components built on Vue

import _extends from "@babel/runtime/helpers/esm/extends";

/*

第一次校验全部是否为空，为空的input着重显示为红色，显示第一个为空对象信息

第二次校验已经有的第一次其它规则

*/
import create from '../utils/create';
import verifyRules from './rules';
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "form"
    }, [_vm.title ? _c('div', {
      staticClass: "form-title",
      style: _vm.titleStyle
    }, [_vm._v("\n    " + _vm._s(_vm.title))]) : _vm._e(), _vm.isSlot ? _c('div', [_vm._t("default")], 2) : _c('div', [_vm._l(_vm.list, function (item, index) {
      return _c('div', {
        key: index
      }, [_c('formItem', {
        attrs: {
          "size": _vm.size,
          "data": item,
          "label": _vm.label
        },
        on: {
          "lowMin": function lowMin($event) {
            _vm.lowMin(arguments, item);
          },
          "highMax": function highMax($event) {
            _vm.highMax(arguments, item);
          },
          "getNumValue": function getNumValue($event) {
            _vm.getNumValue(arguments, item);
          },
          "riskDescChange": _vm.riskDescChange,
          "getRaValue": function getRaValue($event) {
            _vm.getRaValue(arguments, item);
          },
          "selectRight": function selectRight($event) {
            _vm.select(item, index);
          },
          "blur": function blur($event) {
            _vm.blur(item, index);
          },
          "focus": function focus($event) {
            _vm.focus(item, index);
          },
          "update": function update($event) {
            _vm.update(item, index);
          }
        }
      })], 1);
    }), _vm._t("default")], 2)]);
  },
  name: 'form',
  props: {
    title: {
      type: String
    },
    titleStyle: {
      type: Object
    },
    list: {
      type: Array
    },
    size: {
      type: String,
      "default": 'default'
    },
    isSlot: {
      type: Boolean
    },
    parentIndex: {
      type: Number
    },
    label: {
      type: String
    }
  },
  data: function data() {
    return {
      rules: {},
      errArray: [],
      optionsMap: []
    };
  },
  components: {
    formItem: function formItem() {
      return import('./form-item'
      /* webpackChunkName: "form formItem" */
      );
    }
  },
  methods: {
    riskDescChange: function riskDescChange(options) {
      // 如果visible是真的话就说明弹框该隐藏了
      if (options.visible) {
        options.visible = false;
        return;
      } // 如果点击是 其他的?号icon 先隐藏所有的弹框


      this.optionsMap.forEach(function (item) {
        item.visible = false;
      }); // 给当前visible绑定上visible相应

      this.$set(options, 'visible', true); // 记录显示的元素

      this.optionsMap = [options];
    },
    // 是否是iPhone手机
    isIos: function isIos() {
      var ua = window.navigator.userAgent.toLowerCase();
      return ua.includes('iphone os');
    },
    // 校验
    validate: function validate(callback) {
      var _this = this;

      if (this.isSlot) throw Error('当前处于slot状态，请自行校验');
      this.errArray = [];
      var array = this.list;
      array.forEach(function (item, index) {
        _this.rules[index] = item.rules; // 有校验规则并且不是隐藏的数据，再去校验是否正确

        if (item.rules && item.rules.length && !item.hide) {
          _this.verifyRequired(item, index + 1);
        }
      });
      callback && callback(this.vs());
    },
    // verify status
    vs: function vs() {
      if (this.errArray.length) {
        // this.$notify({
        //   content: this.errArray[0].errmsg
        // })
        return this.listKeyObject(false, this.errArray[0].errmsg);
      } else {
        return this.listKeyObject(true);
      }
    },
    verifyRequired: function verifyRequired(item, index) {
      var _this2 = this;

      var value = item.value,
          rules = item.rules;
      rules.every(function (rule) {
        // 校验姓名是否合法
        if (value && rule.cname && !verifyRules.verifyName.test(value)) {
          _this2.verifyCorrectness(item, rule, index);

          return false;
        } // 校验是否为正数


        if (value && rule.positiveNumber && !verifyRules.verifyPositiveNumber.test(value)) {
          _this2.verifyCorrectness(item, rule, index);

          return false;
        } // 校验身份证是否合法


        if (value && rule.idCard && !verifyRules.verifyIdcard.test(value)) {
          _this2.verifyCorrectness(item, rule, index);

          return false;
        } // 校验电话号码是否合法


        if (value && rule.phone) {
          var newValue = value.replace(/[^\d]/g, '');

          if (!verifyRules.verifyPhone.test(newValue)) {
            _this2.verifyCorrectness(item, rule, index);

            return false;
          }
        } // 校验邮箱是否合法


        if (value && rule.email && !verifyRules.verifyEmail.test(value)) {
          _this2.verifyCorrectness(item, rule, index);

          return false;
        } // 校验地址是否合法


        if (value && rule.address && !verifyRules.verifyAddress.test(value)) {
          _this2.verifyCorrectness(item, rule, index);

          return false;
        } // 校验银行卡号是否合法


        if (value && rule.cardNo && !verifyRules.verifyCreditCardNo.test(value)) {
          _this2.verifyCorrectness(item, rule, index);

          return false;
        } // 自定义校验规则校验


        if (value && rule.custom && !rule.custom.test(value)) {
          _this2.verifyCorrectness(item, rule, index);

          return false;
        } // 校验是否为空


        if ((value === '' || value === null || typeof value === 'undefined') && rule.required) {
          _this2.pushError(item, rule, index);

          return false;
        }

        return true;
      });
    },
    verifyCorrectness: function verifyCorrectness(item, rule, index) {
      var rul = _extends({}, rule);

      rul.errmsg = (this.label || '') + rule.errmsg;
      this.pushError(item, rul, index);
    },
    getNameValue: function getNameValue(name) {
      if (!this.list.length) return '';
      var item = this.list.find(function (item) {
        return item.name === name;
      });
      if (!item) return '';
      return item.value || item.raValue && item.raValue[0];
    },
    getValues: function getValues() {
      var object = {};
      this.list.forEach(function (item) {
        // 如果是手机号，获取的时候清除一下字符
        if (item.rules && item.rules[1] && item.rules[1].phone) {
          item.value = item.value && item.value.replace(/[^\d]/g, '');
        }

        if (item.value || item.raValue && item.raValue[0]) {
          object[item.name] = item.value || item.raValue && item.raValue[0];
        }
      });
      return object;
    },
    pushError: function pushError(item, rule, index) {
      this.errArray.push(rule);
      this.$set(item, 'error', true);
    },
    // 根据list的name值转为对象形式回调回去
    listKeyObject: function listKeyObject(status, errmsg) {
      return {
        status: status,
        data: this.getValues(),
        errmsg: errmsg
      };
    },
    callback: function callback(item, index) {
      return {
        item: item,
        index: index,
        parentIndex: this.parentIndex
      };
    },
    getRaValue: function getRaValue(arg, item) {
      this.$emit('getRaValue', {
        item: item,
        val: arg
      });
    },
    getNumValue: function getNumValue(arg, item) {
      this.$emit('getNumValue', {
        item: item,
        value: arg && arg[0] && arg[0].value,
        type: arg && arg[0] && arg[0].type
      });
    },
    lowMin: function lowMin(arg, item) {
      this.$emit('lowMin', {
        item: item,
        val: arg
      });
    },
    highMax: function highMax(arg, item) {
      this.$emit('highMax', {
        item: item,
        val: arg
      });
    },
    select: function select(item, index) {
      this.$emit('select', this.callback(item, index));
    },
    update: function update(item, index) {
      this.$emit('input', this.callback(item, index));
      this.$emit('change', this.callback(item, index));
    },
    // 最后一次blur 恢复位置
    // 如何知道最后一次呢，就看blur 触发的时候，focus 为 true or false
    blur: function blur(item, index) {
      var _this3 = this;

      if (this.isIos()) {
        this.blurStatus = true;
        this.focusSatus = false; // 因为离开一个输入框去另一个输入框，是先触发

        setTimeout(function () {
          if (_this3.focusSatus) return;
          window.scroll(0, _this3.currentTop);
          _this3.blurStatus = false;
        });
      }

      this.$emit('blur', this.callback(item, index));
    },
    // 第一次focus 记录 页面高度
    // blurStatu为true 说明不是第一次
    focus: function focus(item, index) {
      if (this.isIos()) {
        this.focusSatus = true;
        if (this.blurStatus) return;
        this.currentTop = document.documentElement.scrollTop || document.body.scrollTop;
      }

      this.$emit('focus', this.callback(item, index));
    }
  }
});