JVxeInputCell.vue 2.33 KB
<template>
  <a-input
    ref="input"
    :value="innerValue"
    v-bind="cellProps"
    @blur="handleBlur"
    @change="handleChange"
  />
</template>

<script>
  import { JVXETypes } from '@/components/jeecg/JVxeTable'
  import JVxeCellMixins from '@/components/jeecg/JVxeTable/mixins/JVxeCellMixins'

  const NumberRegExp = /^-?\d+\.?\d*$/
  export default {
    name: 'JVxeInputCell',
    mixins: [JVxeCellMixins],
    methods: {

      /** 处理change事件 */
      handleChange(event) {
        let {$type} = this
        let {target} = event
        let {value, selectionStart} = target
        let change = true
        if ($type === JVXETypes.inputNumber) {
          // 判断输入的值是否匹配数字正则表达式,不匹配就还原
          if (!NumberRegExp.test(value) && (value !== '' && value !== '-')) {
            change = false
            value = this.innerValue
            target.value = value || ''
            if (typeof selectionStart === 'number') {
              target.selectionStart = selectionStart - 1
              target.selectionEnd = selectionStart - 1
            }
          }
        }
        // 触发事件,存储输入的值
        if (change) {
          this.handleChangeCommon(value)
        }

        if ($type === JVXETypes.inputNumber) {
          // this.recalcOneStatisticsColumn(col.key)
        }
      },

      /** 处理blur失去焦点事件 */
      handleBlur(event) {
        let {$type} = this
        let {target} = event
        // 判断输入的值是否匹配数字正则表达式,不匹配就置空
        if ($type === JVXETypes.inputNumber) {
          if (!NumberRegExp.test(target.value)) {
            target.value = ''
          } else {
            target.value = Number.parseFloat(target.value)
          }
          this.handleChangeCommon(target.value)
        }

        this.handleBlurCommon(target.value)
      },

    },
    // 【组件增强】注释详见:JVxeCellMixins.js
    enhanced: {
      installOptions: {
        // 自动聚焦的 class 类名
        autofocus: '.ant-input',
      },
      getValue(value) {
        if (this.$type === JVXETypes.inputNumber && typeof value === 'string') {
          if (NumberRegExp.test(value)) {
            return Number.parseFloat(value)
          }
        }
        return value
      },
    }
  }
</script>

<style scoped>

</style>