n20-common-lib 1.3.13 → 1.3.16

package/nstc-g6/components/NstcForm/InputCustom/index.vue

@@ -1,314 +1,313 @@
-<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 '../../../../src/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>
+<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'
+      }"
+      :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 '../../../../src/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>