wms / wms4_global · Files

import PropTypes from 'ant-design-vue/es/_util/vue-types'
import { filterDictText } from '@/components/dict/JDictSelectUtil'
import { getEnhancedMixins, JVXERenderType, replaceProps } from '@/components/jeecg/JVxeTable/utils/cellUtils'

// noinspection JSUnusedLocalSymbols
export default {
  inject: {
    getParentContainer: {default: () => ((node) => node.parentNode)},
  },
  props: {
    value: PropTypes.any,
    row: PropTypes.object,
    column: PropTypes.object,
    // 组件参数
    params: PropTypes.object,
    // 渲染选项
    renderOptions: PropTypes.object,
    // 渲染类型
    renderType: PropTypes.string.def('default'),
  },
  data() {
    return {
      innerValue: null,
    }
  },
  computed: {
    caseId() {
      return this.renderOptions.caseId
    },
    originColumn() {
      return this.column.own
    },
    $type() {
      return this.originColumn.$type
    },
    rows() {
      return this.params.data
    },
    fullDataLength() {
      return this.params.$table.tableFullData.length
    },
    rowIndex() {
      return this.params.rowIndex
    },
    columnIndex() {
      return this.params.columnIndex
    },
    cellProps() {
      let {originColumn: col, renderOptions} = this

      let props = {}

      // 输入占位符
      props['placeholder'] = replaceProps(col, col.placeholder)

      // 解析props
      if (typeof col.props === 'object') {
        Object.keys(col.props).forEach(key => {
          props[key] = replaceProps(col, col.props[key])
        })
      }

      // 判断是否是禁用的列
      props['disabled'] = (typeof col['disabled'] === 'boolean' ? col['disabled'] : props['disabled'])

      // TODO 判断是否是禁用的行
      // if (props['disabled'] !== true) {
      //   props['disabled'] = ((this.disabledRowIds || []).indexOf(row.id) !== -1)
      // }

      // 判断是否禁用所有组件
      if (renderOptions.disabled === true) {
        props['disabled'] = true
      }

      // update-begin-author:taoyan date:20211011 for: online表单，附表用户选择器{"multiSelect":false}不生效，单表可以生效 #3036
      let jsonStr = col['fieldExtendJson']
      if(jsonStr){
        let fieldExtendJson = JSON.parse(jsonStr)
        if(fieldExtendJson && fieldExtendJson['multiSelect']==false){
          props['multi'] = false
        }
      }
      // update-end-author:taoyan date:20211011 for: online表单，附表用户选择器{"multiSelect":false}不生效，单表可以生效 #3036

      return props
    },
  },
  watch: {
    $type: {
      immediate: true,
      handler($type) {
        this.enhanced = getEnhancedMixins($type)
        this.listeners = getListeners.call(this)
      },
    },
    value: {
      immediate: true,
      handler(val) {
        let value = val

        // 验证值格式
        let originValue = this.row[this.column.property]
        let getValue = this.enhanced.getValue.call(this, originValue)
        if (originValue !== getValue) {
          // 值格式不正确，重新赋值
          value = getValue
          vModel.call(this, value)
        }

        this.innerValue = this.enhanced.setValue.call(this, value)

        // 判断是否启用翻译
        if (this.renderType === JVXERenderType.spaner && this.enhanced.translate.enabled) {
          let res = this.enhanced.translate.handler.call(this, value)
          // 异步翻译，目前仅【多级联动】使用
          if (res instanceof Promise) {
            res.then(value => this.innerValue = value)
          } else {
            this.innerValue = res
          }
        }
      },
    },
  },
  created() {
  },
  methods: {

    /** 通用处理change事件 */
    handleChangeCommon(value) {
      let handle = this.enhanced.getValue.call(this, value)
      this.trigger('change', {value: handle})
      // 触发valueChange事件
      this.parentTrigger('valueChange', {
        type: this.$type,
        value: handle,
        oldValue: this.value,
        col: this.originColumn,
        rowIndex: this.params.rowIndex,
        columnIndex: this.params.columnIndex,
      })
    },
    /** 通用处理blur事件 */
    handleBlurCommon(value) {
      this.trigger('blur', {value})
    },

    /**
     *  如果事件存在的话，就触发
     * @param name 事件名
     * @param event 事件参数
     * @param args 其他附带参数
     */
    trigger(name, event, args = []) {
      let listener = this.listeners[name]
      if (typeof listener === 'function') {
        if (typeof event === 'object') {
          event = this.packageEvent(name, event)
        }
        listener(event, ...args)
      }
    },
    parentTrigger(name, event, args = []) {
      args.unshift(this.packageEvent(name, event))
      this.trigger('trigger', name, args)
    },
    packageEvent(name, event = {}) {
      event.row = this.row
      event.column = this.column
      //online增强参数兼容
      event.column['key'] = this.column['property']
      event.cellTarget = this
      if (!event.type) {
        event.type = name
      }
      if (!event.cellType) {
        event.cellType = this.$type
      }
      // 是否校验表单，默认为true
      if (typeof event.validate !== 'boolean') {
        event.validate = true
      }
      return event
    },

  },
  model: {
    prop: 'value',
    event: 'change'
  },
  /**
   * 【自定义增强】用于实现一些增强事件
   * 【注】这里只是定义接口，具体功能需要到各个组件内实现（也有部分功能实现）
   * 【注】该属性不是Vue官方属性，是JVxeTable组件自定义的
   *      所以方法内的 this 指向并不是当前组件，而是方法自身，
   *      也就是说并不能 this 打点调实例里的任何方法
   */
  enhanced: {
    // 注册参数（详见：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/renderer/edit）
    installOptions: {
      // 自动聚焦的 class 类名
      autofocus: '',
    },
    // 事件拦截器（用于兼容）
    interceptor: {
      // 已实现：event.clearActived
      // 说明：比如点击了某个组件的弹出层面板之后，此时被激活单元格不应该被自动关闭，通过返回 false 可以阻止默认的行为。
      ['event.clearActived'](params, event, target) {
        return true
      },
      // 自定义：event.clearActived.className
      // 说明：比原生的多了一个参数：className，用于判断点击的元素的样式名（递归到顶层）
      ['event.clearActived.className'](params, event, target) {
        return true
      },
    },
    // 【功能开关】
    switches: {
      // 是否使用 editRender 模式（仅当前组件，并非全局）
      // 如果设为true，则表头上方会出现一个可编辑的图标
      editRender: true,
      // false = 组件触发后可视）；true = 组件一直可视
      visible: false,
    },
    // 【切面增强】切面事件处理，一般在某些方法执行后同步执行
    aopEvents: {
      // 单元格被激活编辑时会触发该事件
      editActived() {
      },
      // 单元格编辑状态下被关闭时会触发该事件
      editClosed() {
      },
    },
    // 【翻译增强】可以实现例如select组件保存的value，但是span模式下需要显示成text
    translate: {
      // 是否启用翻译
      enabled: false,
      /**
       * 【翻译处理方法】如果handler留空，则使用默认的翻译方法
       * (this指向当前组件)
       *
       * @param value 需要翻译的值
       * @returns{*} 返回翻译后的数据
       */
      handler(value,) {
        // 默认翻译方法
        return filterDictText(this.column.own.options, value)
      },
    },
    /**
     * 【获取值增强】组件抛出的值
     * (this指向当前组件)
     *
     * @param value 保存到数据库里的值
     * @returns{*} 返回处理后的值
     */
    getValue(value) {
      return value
    },
    /**
     * 【设置值增强】设置给组件的值
     * (this指向当前组件)
     *
     * @param value 组件触发的值
     * @returns{*} 返回处理后的值
     */
    setValue(value) {
      return value
    },
    /**
     * 【新增行增强】在用户点击新增时触发的事件，返回新行的默认值
     *
     * @param row 行数据
     * @param column 列配置，.own 是用户配置的参数
     * @param $table vxe 实例
     * @param renderOptions 渲染选项
     * @param params 可以在这里获取 $table
     *
     * @returns 返回新值
     */
    createValue({row, column, $table, renderOptions, params}) {
      return column.own.defaultValue
    },
  }
}

function getListeners() {
  let listeners = Object.assign({}, (this.renderOptions.listeners || {}))
  if (!listeners.change) {
    listeners.change = async (event) => {
      vModel.call(this, event.value)
      await this.$nextTick()
      // 处理 change 事件相关逻辑（例如校验）
      this.params.$table.updateStatus(this.params)
    }
  }
  return listeners
}

export function vModel(value, row, property) {
  if (!row) {
    row = this.row
  }
  if (!property) {
    property = this.column.property
  }
  this.$set(row, property, value)
}

/** 模拟触发事件 */
export function dispatchEvent({cell, $event}, className, handler) {
  // alwaysEdit 下不模拟触发事件，否者会导致触发两次
  if (this && this.alwaysEdit) {
    return
  }
  window.setTimeout(() => {
    let element = cell.getElementsByClassName(className)
    if (element && element.length > 0) {
      if (typeof handler === 'function') {
        handler(element[0])
      } else {
        // 模拟触发点击事件
        if($event){
          element[0].dispatchEvent($event)
        }
      }
    }
  }, 10)
}