@nstc-business/imes 1.0.0

package/src/components/model-calculate/input-number.vue

@@ -0,0 +1,294 @@
+<template>
+  <div
+    class="n20-num-w"
+    @mouseenter="isHove = true"
+    @mouseleave="isHove = false"
+  >
+    <el-input
+      ref="input"
+      v-model="valueStr"
+      v-bind="$attrs"
+      class="n20-stc"
+      :disabled="disabled"
+      :placeholder="phd"
+      :clearable="isClearable"
+      :validate-event="false"
+      :maxlength="maxlength > 16 ? 16 : maxlength"
+      @focus="focusFn"
+      @input="inputFn"
+      @blur="blurFn"
+      @clear="clearFn"
+      @change="changeFn"
+      @keydown.native="stepFn"
+    >
+      <template slot="suffix">
+        <slot name="suffix"></slot>
+      </template>
+      <template slot="prefix">
+        <slot name="prefix"></slot>
+      </template>
+      <template v-if="type === 'rate'">
+        <span v-if="suffixV" slot="suffix" class="el-input__icon">
+          {{ suffix }}
+        </span>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script>
+import { N } from 'n20-common-lib'
+import XEUtils from 'xe-utils'
+
+export default {
+  name: 'InputNumber',
+  props: {
+    value: {
+      type: [Number, String],
+      default: undefined
+    },
+    type: {
+      type: String,
+      default: 'money',
+      validator(v) {
+        return ['money', 'rate'].includes(v)
+      }
+    },
+    min: {
+      type: Number,
+      default: -9999999999999.99
+    },
+    max: {
+      type: Number,
+      default: 9999999999999.99
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    stepStrictly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: undefined
+    },
+    isClearable: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: undefined
+    },
+    dNum: {
+      type: Number,
+      default: undefined
+    },
+    format: {
+      type: String,
+      default: undefined
+    },
+    suffix: {
+      type: String,
+      default: '%'
+    },
+    rangeAuto: {
+      type: Boolean,
+      default: false
+    },
+    maxlength: {
+      type: Number,
+      default: 16
+    }
+  },
+  data() {
+    this.listeners = Object.assign({}, this.$listeners, {
+      input: () => {}
+    })
+    return {
+      valueStr: '',
+      showStr: true,
+      isHove: false,
+      isFocus: false
+    }
+  },
+  computed: {
+    suffixV() {
+      if (!this.isClearable) return true
+      if (!this.valueStr) return true
+      if (!(this.isHove || this.isFocus)) return true
+      return false
+    },
+    phd() {
+      if (this.placeholder) {
+        return this.placeholder
+      } else {
+        return '请输入'
+      }
+    },
+    fNum() {
+      if (this.format) {
+        let i_f = this.format.indexOf('.')
+        return i_f === -1 ? 0 : this.format.length - i_f - 1
+      }
+      if (this.dNum || this.dNum === 0) {
+        return this.dNum
+      }
+      if (this.type === 'rate') {
+        return 4
+      }
+      if (this.type === 'money') {
+        return 2
+      }
+      return 2
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (this.rangeAuto) {
+          if (val || val === 0) {
+            let nF = N.toString(val).split('.')[1] || ''
+            if (nF.length < this.fNum) {
+              return (this.valueStr = N.addThousands(
+                this.subFixed(val, this.fNum)
+              ))
+            }
+          }
+          this.valueStr = N.addThousands(val)
+        } else {
+          this.valueStr = N.addThousands(this.subFixed(val, this.fNum))
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    focusFn() {
+      this.isFocus = true
+      if (!this.disabled && this.valueStr) {
+        this.valueStr = this.valueStr.replace(/,/g, '')
+        this.preValue = this.valueStr
+      }
+    },
+    blurFn() {
+      this.isFocus = false
+      this.changeFn(this.valueStr)
+      this.$emit('blur')
+      this.dispatch('ElFormItem', 'el.form.blur', [this.value])
+    },
+    clearFn() {
+      this.$emit('clear')
+    },
+    stepFn(ev) {
+      if (
+        (ev.code === 'ArrowUp' || ev.code === 'ArrowDown') &&
+        !this.disabled
+      ) {
+        let val = N(this.valueStr)
+        if (!isNaN(val)) {
+          ev.preventDefault()
+          val = ev.code === 'ArrowUp' ? val + this.step : val - this.step
+          if (val < this.min) {
+            val = this.min
+          } else if (val > this.max) {
+            val = this.max
+          }
+          if (this.rangeAuto) {
+            this.valueStr = N.toString(val)
+          } else {
+            this.valueStr = this.subFixed(val, this.fNum)
+          }
+        }
+      }
+    },
+    inputFn(valStr) {
+      if (valStr !== '-' && isNaN(valStr.replace(/,/g, ''))) {
+        this.valueStr = this.preValue
+      } else {
+        this.preValue = valStr
+      }
+    },
+    changeFn(valStr) {
+      if (this.changeIng) return
+      this.changeIng = true
+      setTimeout(() => {
+        this.changeIng = false
+      })
+
+      let val = N(valStr)
+      if (isNaN(val)) {
+        this.valueStr = ''
+        let oVal = this.value
+        if (oVal || oVal === 0) {
+          this.$emit('input', undefined)
+          this.$emit('change', undefined)
+          this.dispatch('ElFormItem', 'el.form.change', [undefined])
+        }
+        return
+      }
+
+      let nStr
+      if (this.rangeAuto) {
+        nStr = N.toString(val)
+        this.valueStr = N.addThousands(valStr)
+      } else {
+        if (this.stepStrictly) {
+          let N = val / this.step
+          if (val % this.step !== 0) {
+            val = Math.round(N) * this.step
+          }
+        }
+        if (val < this.min) {
+          val = this.min
+        } else if (val > this.max) {
+          val = this.max
+        }
+        nStr = this.subFixed(val, this.fNum)
+        this.valueStr = N.addThousands(nStr)
+      }
+
+      this.$nextTick(() => {
+        let nVar = Number(nStr)
+        let oVal = this.value
+        if (oVal !== nVar) {
+          this.$emit('input', nVar)
+          this.$emit('change', nVar)
+          this.dispatch('ElFormItem', 'el.form.change', [nVar])
+        }
+      })
+    },
+    dispatch(componentName, eventName, params) {
+      var parent = this.$parent || this.$root
+      var name = parent.$options.componentName
+
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent
+
+        if (parent) {
+          name = parent.$options.componentName
+        }
+      }
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params))
+      }
+    },
+    subFixed(n, decimal = 6) {
+      if (n === undefined || n === null || n === '') {
+        return ''
+      } else {
+        const value = n.toString().split('.')
+        // 整数或者小数位小于设置的小数位，用toFixed自动补零
+        if (value[1] === undefined || value[1].length < decimal) {
+          return XEUtils.toFixed(n, decimal)
+        } else {
+          // 小数位超过设置的小数位不四舍五入
+          return Number(value[0] + '.' + value[1].substring(0, decimal))
+        }
+      }
+    }
+  }
+}
+</script>