n20-common-lib 1.2.46 → 1.3.2

package/src/components/NstcG6Components/NstcForm/InputCustom/index.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="input-custom">
+    <!--    v-nstc-max-length="strMaxLength" -->
+    <el-input
+      ref="inputCustom"
+      v-model="_value"
+      v-nstc-number="numberRule"
+      v-bind="$attrs"
+      :style="{ width: parseFloat(width) + 'px' }"
+      :placeholder="placeholder || '请输入'"
+      :type="_type"
+      :maxlength="maxlength"
+      :class="{
+        'nstc-amount-num': isMoney,
+        'nstc-common-form-textarea': type === 'textarea',
+        'input-w': true
+      }"
+      :clearable="clearable"
+      v-on="$listeners"
+    >
+      <template v-for="(_, slotName) in $slots" v-slot:[slotName]>
+        <slot :name="slotName"></slot>
+      </template>
+      <template v-if="!$slots.append && (unit || handleClick)" v-slot:append>
+        <span v-if="unit">{{ unit }}</span>
+        <span v-else @click="inputClick">{{ handleClick }}</span>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script>
+import axios from '@/utils/axios'
+export default {
+  name: 'InputCustom',
+
+  inheritAttrs: false,
+
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+
+    width: {
+      type: [String, Number],
+      default: ''
+    },
+
+    unit: {
+      type: String,
+      default: ''
+    },
+
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+
+    type: {
+      type: String,
+      default: 'text'
+    },
+
+    numberRule: {
+      type: Object,
+      default: () => ({
+        isMoney: false,
+        precision: 2
+      })
+      // 配置项
+      // min：最小值，类型为number；
+      // max：最大值，类型为number；
+      // precision：保留几位小数，类型为number ；
+      // isMoney：是否为金额，类型为Boolean，true时内容加粗居右
+      // maxLength: 最大长度，类型为number
+    },
+    // strMaxLength: {
+    //   type: Object,
+    //   default: () => ({})
+    //   // 一个中文占三个字节， 其他一个
+    // },
+    maxlength: {
+      type: Number,
+      default: 50
+    },
+
+    isNotZh: {
+      type: Boolean,
+      default: false
+    },
+
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    handleClick: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    params: {
+      type: [String, Object, Array],
+      default() {
+        return ''
+      }
+    },
+    httpMethod: {
+      type: String,
+      default: ''
+    },
+    getValue: {
+      type: [String, Number],
+      default() {
+        return ''
+      }
+    }
+  },
+
+  data() {
+    return {}
+  },
+
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+
+    isMoney() {
+      return this.numberRule ? this.numberRule.isMoney : false
+    },
+
+    isNumber() {
+      return Object.keys(this.numberRule).length
+    },
+
+    _type() {
+      return this.type === 'text'
+        ? this.isNumber
+          ? 'number'
+          : this.type
+        : this.type
+    }
+  },
+
+  watch: {
+    _value(val) {
+      // 当为金额时有两位小数
+      let l = 0
+      if (this.numberRule && this.numberRule.isMoney) {
+        l = 15
+      } else {
+        l = 13
+      }
+      this.numberRule.maxLength && (l = this.numberRule.maxLength)
+      if (this.isNumber && val && val.toString().length > l) {
+        this._value = val.toString().slice(0, l)
+      }
+      console.log('__log', this.isNotZh)
+      if (this.isNotZh) {
+        this._value = val.replace(/[\u4e00-\u9fa5]/gi, '')
+      }
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      if (this.type === 'textarea') {
+        this.resizeInputWidth()
+        window.onresize = this.resizeInputWidth
+      }
+    })
+  },
+  methods: {
+    resizeInputWidth() {
+      const wArr = document.getElementsByClassName('form-group-item')
+      let w = null
+      if (wArr.length) {
+        w = wArr[0].clientWidth
+      }
+      console.log('_wwww', w)
+      const inputArr = document.getElementsByClassName(
+        `nstc-common-form-textarea`
+      )
+
+      for (let i = 0; i < inputArr.length; i++) {
+        // 3 为了多留一点空间， 前面是计算出来的准确值
+        inputArr[i].style.width = w * 0.3625 + 380 + 3 + 'px'
+      }
+    },
+    inputClick() {
+      const that = this
+      console.log(this.httpMethod)
+      if (this.httpMethod === 'noRequest') {
+        this._value = this.getValue
+      } else if (this.httpMethod === 'get') {
+        axios({
+          url: this.url,
+          method: this.httpMethod,
+          params: this.params
+        })
+          .then((res) => {
+            that._value = res
+            that.$nextTick(() => {
+              that.$forceUpdate()
+            })
+          })
+          .catch(() => {})
+      } else {
+        let data = this.params
+        axios({
+          url: this.url,
+          method: this.httpMethod,
+          data
+        })
+          .then((res) => {
+            that._value = res
+            that.$nextTick(() => {
+              that.$forceUpdate()
+            })
+          })
+          .catch(() => {})
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.nstc-amount-num-temp {
+  .input-after-amount-num {
+    display: inline-block !important;
+    text-align: right;
+  }
+}
+.nstc-amount-num {
+  .el-input__inner {
+    text-align: right;
+    &::placeholder {
+      text-align: right;
+    }
+
+    &::-webkit-input-placeholder {
+      /* WebKit browsers 适配谷歌 */
+      text-align: right;
+    }
+
+    &:-moz-placeholder {
+      /* Mozilla Firefox 4 to 18 适配火狐 */
+      text-align: right;
+    }
+
+    &::-moz-placeholder {
+      /* Mozilla Firefox 19+ 适配火狐 */
+      text-align: right;
+    }
+
+    &:-ms-input-placeholder {
+      /* Internet Explorer 10+  适配ie*/
+      text-align: right;
+    }
+  }
+  position: relative;
+
+  .input-after-amount-num {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    background-color: #fff;
+    width: calc(100% - 20px);
+    text-align: right;
+    font-weight: bold;
+    display: none;
+    letter-spacing: 1px;
+    margin-top: 1px;
+    height: calc(100% - 2px);
+    line-height: 31px;
+  }
+}
+//  当为空值时，透明
+.nstc-amount-temp-transparent {
+  .input-after-amount-num {
+    background-color: rgba(0, 0, 0, 0) !important;
+  }
+}
+// 当input框的为不可点击时
+.nstc-amount-input-disabled {
+  .input-after-amount-num {
+    background-color: #f5f7fa !important;
+    border-color: #dfe4ed !important;
+    color: #c0c4cc !important;
+    cursor: not-allowed !important;
+    pointer-events: none;
+  }
+}
+.nstc-common-form-textarea {
+  textarea {
+    border: 1px solid #c0c4cc;
+    font-family: auto;
+    font-size: 13px;
+  }
+}
+.el-input-group__append {
+  cursor: pointer;
+}
+</style>

package/src/components/NstcG6Components/NstcForm/IntervalInputCustom/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="interval-input-custom">
+    <InputCustom
+        v-model="_value[0]"
+        :clearable="clearable"
+        :type="type"
+        @blur="changeNum"
+        :number-rule="numberRule"
+    />
+    <span>-</span>
+    <InputCustom
+        v-model="_value[1]"
+        @blur="changeNum"
+        :clearable="clearable"
+        :type="type"
+        :number-rule="numberRule"
+    />
+
+  </div>
+</template>
+
+<script>
+import InputCustom from '../InputCustom'
+
+export default {
+  name: 'IntervalInputCustom', // 区间输入框
+
+  components: {
+    InputCustom
+  },
+
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+
+    type: {
+      type: String,
+      default: 'text'
+    },
+
+    numberRule: {
+      type: [String, Object, Array],
+      default: () => ({})
+    },
+    defaultProps: {
+      type: [String, Object, Array],
+      default() {
+        return {}
+      }
+    },
+  },
+
+  computed: {
+    _value: {
+      get() {
+
+        return this.value
+      },
+      set(val) {
+
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    changeNum() {
+      let newVal = this.value
+      console.log(this.value, 'this.value');
+      let value1 = this._value[0]
+      let value2 = this._value[1]
+      if (value1 && value2) {
+
+        value1 = isNaN(parseFloat(this._value[0])) ? 0 : parseFloat(this._value[0])
+        value2 = isNaN(parseFloat(this._value[1])) ? 0 : parseFloat(this._value[1])
+        if (value1 > value2) {
+          this.$message.warning('起始值不能大于结束值')
+          newVal = ["", ""]
+        }
+
+
+      }
+      this._value = newVal;
+    }
+
+  }
+}
+</script>
+
+
+<style lang="scss">
+
+.interval-input-custom {
+  width: 224px;
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  flex: none;
+& > span {
+    padding: 0 5px;
+  }
+.input-custom {
+  width: calc((100% - 15px) / 2)!important;
+.el-input {
+  width: 100%;
+}
+}
+}
+</style>
+