oms/src/benyun/components/byDatePicker/byDatePicker.vue

<template>
  <el-date-picker
    v-model="value"
    :type="attrs.type"
    :placeholder="attrs.placeholder?attrs.placeholder:'请选择'"
    :readonly="attrs.readonly"
    :disabled="attrs.disabled"
    :clearable="attrs.clearable"
    :editable="attrs.editable?false:true"
    :format="attrs.format"
    :align="attrs.align"
    @change="onChange"
  >
  </el-date-picker>
</template>

<script lang="ts">
/**
  config:{
    attr:{
      type:year/month/date //显示类型
      readonly:true/false //是否只读
      disabled:true/false //是否禁用
      editable：true/false //可输入
      clearable: true/false  //是否清空
      placeholder：''  //占位符
      format：''  格式
      align: left, center, right  //对齐方式

    }
  }

 */
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import Format from '@/benyun/utils/dateFormat'
import VueViews from '@/benyun/compVue/VueViews'

@Component
export default class ByDatePicker extends VueViews {
  @Watch('propValue')
  propValueChange(v:any){
    this.setValue(v);
  }
  created(){
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
    if(this.propValue){
      this.setValue(this.propValue)
    }
  }
  mounted(){
    this.defaultHandle()
  }

  setValue(data:any){
    if(data){
      this.value = (this as any).$lodash.cloneDeep(data);
    }else{
      this.value = '';
    }
  }

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

  // 清空数据
  clearValue(){
    this.value = '';
  }

  defaultHandle(){
    if(this.attrs.defaultNow){
      this.value = this.setFormat(new Date());
      this.onChange();
    }
  }

  setFormat(v:any){
    if(!v){
      return v;
    }
    let val:any = '';
    let type = 'yyyy-MM-dd';
    if(this.attrs.type == 'date'){
      type = 'yyyy-MM-dd'
    }else if(this.attrs.type == 'datetime'){
      type = 'yyyy-MM-dd HH:mm:ss'
    }else if(this.attrs.type == 'year'){
      type = 'yyyy'
    }else if(this.attrs.type == 'month'){
      type = 'yyyy-MM'
    }else if(this.attrs.type == 'dates'){
      type = 'yyyy-MM-dd'
    }else if(this.attrs.type == 'week'){
      type = 'yyyy 第 WW 周'
    }else if(this.attrs.type == 'datetimerange'){
      type = 'yyyy-MM-dd HH:mm:ss'
    }else if(this.attrs.type == 'daterange'){
      type = 'yyyy-MM-dd'
    }else if(this.attrs.type == 'monthrange'){
      type = 'yyyy-MM'
    }

    if(this.attrs.type == 'dates' 
    || this.attrs.type == 'datetimerange' 
    || this.attrs.type == 'daterange' 
    || this.attrs.type == 'monthrange'){
      if(v && v.constructor == Array){
        val = []
        for(const item of v){
          val.push(Format(item,type))
        }
      }else{
        val = Format(v,type);
      }
      
    }else{
      val = Format(v,type)
    }
    
    return val;
  }

  onChange(){
    this.value = this.setFormat(this.value);
    this.$emit('onChange',this.value);
  }
}
</script>

<style lang="scss" scoped>

</style>