n20-common-lib 1.2.41 → 1.3.0

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

@@ -0,0 +1,307 @@
+<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" />
+      </template>
+      <template v-if="!$slots.append && (unit || handleClick)" v-slot:append>
+        <span v-if="unit">{{ unit }}</span>
+        <span @click="inputClick" v-else>{{ handleClick }}</span>
+      </template>
+    </el-input>
+  </div>
+</template>
+
+<script>
+import request from '@/utils/request'
+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 {}
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      if(this.type === 'textarea') {
+        this.resizeInputWidth()
+        window.onresize = this.resizeInputWidth
+      }
+    })
+  },
+
+  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]/ig, '')
+      }
+    }
+  },
+  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') {
+        request({
+          url: this.url,
+          method: this.httpMethod,
+          params: this.params
+        }).then(res => {
+          that._value = res
+          that.$nextTick(() => {
+            that.$forceUpdate()
+          })
+        }).catch(() => {})
+      } else {
+        let data = this.params
+        request({
+          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/Form/IntervalinputCustom/demo/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <IntervalInputCustom v-model="model" />
+</template>
+
+<script>
+import IntervalInputCustom from '../'
+
+export default {
+  name: 'Demo',
+
+  components: {
+    IntervalInputCustom
+  },
+
+  data() {
+    return {
+      model: []
+    }
+  },
+
+  watch: {
+    model(val) {
+      console.log(val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/NstcG6Components/Form/IntervalinputCustom/index.vue

@@ -0,0 +1,118 @@
+<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">
+@import "~@/theme/theme1/styles/variables.scss";
+
+.interval-input-custom {
+  width: $formItemDefaultWidth;
+  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>