vue-ele-form-yd/lib/mixins/componentMixin.js

基于 element-ui 的数据驱动表单组件

import ExtendSlot from '../ExtendSlot'
import attrsMixin from './attrsMixin'
import localMixin from './locale'
import { is, isDef } from '../tools/utils'

// https://cn.vuejs.org/v2/guide/mixins.html
// Vue 混入 (mixin)  教程
/***********
 * 组件对象定义
 */
export default {
  components: { ExtendSlot },
  mixins: [attrsMixin, localMixin],
  model: {
    prop: 'dataModel',
    event: 'input'
  },
  props: {
    // 组件描述
    defDesc: {
      type: Object,
      required: true,
      default() {
        return {}
      }
    },
    // 组件数据对象
    dataModel: {
      type: [Date, String, Number, Array, Object, Boolean]
    },
    // 共享数据对象，用于容器间数据共享传递
    shareDataModel: {
      type: Object
    },
    // 是否是设计模式：true 设计模式，false用户模式
    designModel: {
      type: Boolean,
      default: false
    },
    parentField: String,
    inForm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 新值, 因为Vue不能修改props传递过来的值, 所以借助新的值进行传递
      displayModel: this.displayFormatter(this.dataModel),
      // 默认事件
      defaultOn: {
        input: this.handleChange
      }
    }
  },
  computed: {
    slots() {
      return this.defDesc.slots || {}
    },
    scopedSlots() {
      return this.defDesc.scopedSlots || {}
    },
    onEvents() {
      return Object.assign({}, this.defDesc.on, this.defaultOn)
    }
  },
  watch: {
    dataModel: {
      handler(dataModel) {
        this.displayModel = this.displayFormatter(dataModel)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // displayModel===>dataModel
    setValue(source, datafield, val) {
    //   console.log(this.defDesc)
    //   console.log('>>>>>' + ':' + source + ':' + datafield + ':' + val)
      if (source === this.defDesc.field) {
        this.$set(this.dataModel, datafield, val)
      } else {
        this.handleChange(val)
      }
    },
    handleChange(val) {
      // 子类可以重载该方法，进行定制化逻辑实现
      // console.log('componentMixin:handleChange(val)')
      this.$emit('input', this.valueFormatter(val))
    },
    // 检查类型
    checkType(val, isDefault = false) {
      if (this.type && isDef(val)) {
        const isOk = is(val, this.type)
        if (!isOk) {
          // eslint-disable-next-line
          console.error(
              `[云端页面设计器警告]: ${this.defDesc.label} 的${
              // eslint-disable-next-line indent
              isDefault ? '默认' : ''
              }值类型错误, 期望 [${this.type}] 类型, 但`,
              val,
              `是${typeof val}类型, 请检查`
          )
        }
        return isOk
      } else {
        return true
      }
    },
    // dataModel=>displayModel
    // 显示数据格式化方法
    displayFormatter(value) {
      // 调用用户提供的显示数据格式化方法，将存储数据转换成组件能够处理的数据类型
      if (this.defDesc.displayFormatter) {
        value = this.defDesc.displayFormatter(value)
      }
      if (this.checkType(value)) {
        // 子组件有自定义的显示数据格式化方法，
        // 则调用子组件的显示数据格式化方法
        if (this.custormDisplayFormatter) {
          value = this.custormDisplayFormatter(value)
        }
      }
      return value
    },
    // displayModel===>dataModel
    // 存储数据格式化方法
    valueFormatter(value) {
      // 调用子组件自定义的存储数据格式化方法
      // console.log(this.handleChange)
      // console.log(this.custormValueFormatter)
      if (this.custormValueFormatter) {
        value = this.custormValueFormatter(value)
      }
      // 调用用户提供的存储数据格式化方法
      if (this.defDesc.valueFormatter) {
        value = this.defDesc.valueFormatter(value)
      }
      return value
    }
  }
}