admin_web/ruoyi-ui/src/baseComponents/f-datePicker/index.vue

<!--
 * @Author: gaoshoujun gaosj@yueworld.cn
 * @Date: 2022-06-24 17:16:58
 * @LastEditors: 傅豪杰 18516149270@163.com
 * @LastEditTime: 2023-05-18 16:55:01
-->
<template>
   <el-date-picker
      v-bind="$attrs"
      v-model="currentValue"
      :disabled="isDisabled"
      :type="type"
      width='100%'
      :range-separator="$attrs.rangeSeparator||'～'"
      :start-placeholder="$attrs.startPlaceholder || '开始日期'"
      :end-placeholder="$attrs.endPlaceholder || '结束日期'"
      class="f-el-date"
      :class="{hours:$attrs.dateType==='hours'}"
      :value-format="getValueFormat"
      :format="getFormat"
      :placeholder="$attrs.placeholder || '选择日期'"
      prefix-icon="none"
      :editable="false"
      @change="handleChange"
      @blur="handleBlur"
      @focus="handleFocus"
    />
</template>

<script>
import formMixins from'../../mixins/formMixins.js'

export default {
  name: 'FDatePicker',
  mixins:[formMixins],
  inheritAttrs: false,
  props: {
      // 绑定的数据
    value: {},
    // 当前行下表
    index: {
      type: [String, Number],
      default: ''
    },
    // 类型
    type:{
      type:String,
      default:'date'
    },
    // 格式化数据
    valueFormat:{
      type:String,
      default:'yyyy-MM-dd'
    },
  },
  data() {
    return {
    };
  },
  computed:{
    // 组件内数据
    currentValue:{
      get(){
        return this.value || ''
      },
      set(val){
        this.$emit('input',val)
      }
    },
    // 数据值格式
    getValueFormat(){
      if(this.type === 'year'){
        return 'yyyy'
      }
      if(this.type === 'month'){
        return 'yyyy-MM'
      }
      return this.valueFormat
    },
    // 显示格式
    getFormat() {
      if (this.$attrs.format) {
        return this.$attrs.format
      }
      return this.getValueFormat
    }
  },
  methods: {
    clearDate() {
      this.$emit('input', '')
      this.$emit('change', '')
      this.$emit('clear', '')
    },
    handleChange(val){
      this.$emit('change',val)
    },
    handleBlur(val){
      this.$emit('blur',this.currentValue)
    },
    handleFocus(val){
      this.$emit('focus',this.currentValue)
    }
  }
};
</script>
<style lang="scss" scoped>
.el-date-editor--daterange.el-input__inner,.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 100%;
}

</style>