oms/src/benyun/components/byInput/byInput.vue

<template>
  <el-input v-if="attrs.type == 'textarea'" :type="attrs.type" v-model="value" @input="onChange" :rows="attrs.rows" :show-word-limit="attrs.showWordLimit" :show-password="attrs.showPassword" :placeholder="placeholder"
  :maxlength="attrs.maxlength" :minlength="attrs.minlength" :clearable="attrs.clearable" :disabled="disabledValue" :prefix-icon="attrs.prefixIcon"
  :suffix-icon="attrs.suffixIcon" :readonly="attrs.readonly" :autosize="attrs.autosize"></el-input>
  <vxe-input 
    v-else
    ref="input"
    v-model="value"
    :placeholder="placeholder"
    :maxlength="attrs.maxlength"
    :minlength="attrs.minlength"
    :clearable="attrs.clearable"
    :disabled="disabledValue"
    :size="attrs.size?attrs.size:'medium'"
    :type="attrs.type"
    :min="attrs.min"
    :max="attrs.max"
    :step="attrs.step"
    :align="attrs.align"
    :prefix-icon="attrs.prefixIcon"
    :suffix-icon="attrs.suffixIcon"
    :readonly="attrs.readonly"
    @input="onChange"
    @clear="onChange"
    ></vxe-input>
</template>

<script lang="ts">
/*
config:{
  attr:{
    type:'text, number(数字), integer（整数）,textarea,float（小数）,password(密码),positiveNumber(正数),positiveInteger（正整数）',
    align:'left, center, right'
    min:0 //最小值
    max:''  //最大值
    step:'' //间隔
    onceEdit: true/false  //保存后不能修改
    prefixIcon:''  //头部图标
    suffixIcon:''  //尾部图标
  }
}
*/
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'
@Component
export default class ByInput extends VueViews {
  value:any=null;
  typeArr:Array<any>=['number','integer','float','positiveNumber','positiveInteger']
  @Watch('propValue')
  propValueChange(v:any){
    this.setValue(v);
  }

  created(){
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
    if(this.propValue){
      this.setValue(this.propValue)
    }
    if((this.attrs.defaultValue || this.attrs.defaultValue === 0) && !this.value){
      this.setValue(this.attrs.defaultValue);
      this.onChange();
    }
  }

  get disabledValue(){
    let n = false;
    if(this.attrs.disabled){
      n = true
    }
    if(this.attrs.onceEdit && this.parentValue && this.parentValue.id){
      return n = true
    }
    return n;
  }

  get placeholder(){
    if(this.disabledValue){
      return ''
    }
    if(this.attrs.placeholder){
      return this.attrs.placeholder
    }
    return ''
  }
  mounted(){
  }

  setValue(data:any){
    if(data || data === 0){
      this.value = (this as any).$lodash.cloneDeep(data);
      if(this.attrs.type == 'number'){
        if(data !== '-') {
          this.value = Number(data);
        }
        
      }
    }else{
      this.value = null;
    }
  }

  getValue(){
    return (this as any).$lodash.cloneDeep(this.value);
  }

  // 清空数据
  clearValue(){
    this.value = '';
    if((this.attrs.defaultValue || this.attrs.defaultValue === 0) && !this.value){
      this.setValue(this.attrs.defaultValue);
      this.onChange();
    }
  }

  onChange(){
    if(this.typeArr.indexOf(this.attrs.type) >= 0 && this.value){
      this.value = Number(this.value)
    }
    this.$emit('onChange',this.value);
    
  }
}
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">
.el-input--small{
  font-size: 14px !important;
}
.vxe-input--inner[disabled]{
  background-color: #F5F7FA;
  border-color: #dfe4ed;
  color: #C0C4CC;
  cursor: not-allowed;
}
</style>