shu-c-view/packages/el-form-layout/form.js

rollup 打包vue@2.7组件库框架

/**
 * @desc form 表单组件，默认 table 布局
 */
import _set from 'lodash/set';
import _isEqual from 'lodash/isEqual';
import _isEmpty from 'lodash/isEmpty';
import _isNil from 'lodash/isNil';
import _join from 'lodash/join';
import elFormLayout from './form.vue';

const BaseElForm = {
  name: 'BaseElForm',
  inheritAttrs: false,
  provide() {
    return {
      getBaseElForm: this
    };
  },
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 是否显示边框
    border: {
      type: Boolean,
      default: false
    },
    // 是否显示label后面的：符号
    colon: {
      type: Boolean,
      default: true
    },
    // 一行分几列
    column: {
      type: Number,
      default: 3
    },
    // 表单详情配置
    detail: {
      type: Array,
      default() {
        return [];
      }
    },
    // 可选添加的CSS样式类，添加到布局
    ctCls: {
      type: String
    },
    // v-model对象数据集合，需要是响应式对象
    model: {
      type: Object,
      default() {
        return {};
      }
    },
    // 表单验证规则
    rules: {
      type: Object,
      default: () => ({})
    },
    // 列表的尺寸
    size: {
      type: String,
      default: 'medium',
      validator(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['medium', 'small', 'mini'].indexOf(value) !== -1;
      }
    },
    // v-if
    isRender: {
      type: Boolean,
      default: true
    },
    // v-show
    isDisplay: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      refName: `${this._uid}-el-form-ref`
    };
  },
  methods: {
    /**
     * @desc 任一表单项被校验后触发
     * @event FastForm#_validateEvent
     * @param {String} validatePropName='' - 被校验的表单项 prop 值
     * @param {Boolean} result=false - 校验是否通过
     * @param {String} message=null - 错误消息（如果存在）
     */
    _validateEvent(validatePropName = '', result = false, message = null) {
      this.$emit('validate', validatePropName, result, message);
    },
    /**
     * @desc 对整个表单进行校验的方法
     * @method
     * @param {function} callback=function(){} - 验证成功回调函数
     * @param {function} failCallback=function(){} - 失败回调函数
     */
    validate(callback = function() {}, failCallback = function() {}) {
      this.$refs[this.refName].validate(valid => {
        if (valid) {
          // true 验证成功
          callback();
        } else {
          // false 失败
          failCallback();
          return false;
        }
      });
    },
    /**
     * @desc 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
     * @method
     */
    resetFields() {
      this.$refs[this.refName].resetFields();
    },
    /**
     * @desc 移除表单项的校验结果
     * @method
     * @param {array} validateProps=[] - 传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
     */
    clearValidate(validateProps = []) {
      this.$refs[this.refName].clearValidate(validateProps);
    },
    /**
     * @desc 对部分表单字段进行校验的方法
     * @method
     * @param {array} validateProps=[] - 传入待验证的表单项的 prop 属性或者 prop 组成的数组
     * @param {function} callback=function(){} - 回调函数
     */
    validateField(validateProps = [], callback = function() {}) {
      if (_isEmpty(validateProps)) {
        return;
      }
      this.$refs[this.refName].validateField(validateProps, callback);
    },
    /**
     * @desc 获取表单对象
     * @method
     * @return {Object} - el-form 控件表单对象
     */
    getForm() {
      return this.$refs[this.refName];
    }
  },
  render(h) {
    // v-if
    if (_isEqual(this.isRender, false)) {
      return h();
    }
    const style = {};
    // v-show
    if (_isEqual(this.isDisplay, false)) {
      _set(style, 'display', 'none');
    }
    const mClass = ['base-el-form-layout'];
    if (!_isNil(this.ctCls)) {
      mClass.push(this.ctCls);
    }
    if (this.rowErrorMessage) {
      mClass.push('base-row_error_message');
    }
    return h(
      'el-form',
      {
        ref: this.refName,
        style,
        attrs: {
          id: this.$attrs.id
        },
        class: _join(mClass, ' '),
        // props: this.$attrs,
        props: {
          model: this.model,
          rules: this.rules,
          size: this.size
        },
        on: {
          validate: this._validateEvent
        }
      },
      [
        h(
          elFormLayout,
          {
            props: {
              title: this.title,
              colon: this.colon,
              column: this.column,
              border: this.border,
              detail: this.detail,
              model: this.model,
              rules: this.rules,
              size: this.size
            },
            on: {
              updateModel: (val, colName) => {
                this.model[colName] = val;
              }
            }
          },
          []
        )
      ]
    );
  }
};
export default BaseElForm;