riku
2023-11-24 dd5fbe2e6cacffa0ff67f0f68c262d14ddfce3cc
src/sfc/TimeShortCuts.vue
@@ -14,13 +14,27 @@
      },
  ***
-->
<script>
import dayjs from 'dayjs';
import time from '@/utils/time.js'
export default {
  props: {
    beginAndEndTime:{
      type:Array,
      default: ()=>{
        return []
      }
    },
    timeType: {
      type: String,
      default: 'month'
    },
    // 是否设置只读属性
    readOnly: {
      type: Boolean,
      default:false
    }
  },
  emits: ['submitTime'],
@@ -29,8 +43,19 @@
      //保存开始和结束时间
      // 随便设置初始值 ,mounted时再设正确的,目的是改变时间了触发change
      time: ['2023-06-01 12:00:00', '2023-06-20 16:00:00'],
      shortcuts: []
      shortcuts: [],
      defaultTime :[
        new Date(2000, 1, 1, 0, 0, 0),
        new Date(2000, 2, 1, 23, 59, 59),
      ]
    };
  },
  watch:{
    beginAndEndTime(){
      if(this.beginAndEndTime.lenth!=0){
        this.time = this.beginAndEndTime
      }
    }
  },
  mounted() {
    this.initShortCuts();
@@ -39,34 +64,89 @@
  },
  methods: {
    initShortCuts() {
      // this.shortcuts = [
      //   {
      //     text: '前一日',
      //     value: () => {
      //       const start = dayjs().subtract(1,'day').format('YYYY-MM-DD 00:00:00')
      //       const end = dayjs().subtract(1,'day').format('YYYY-MM-DD 23:59:59')
      //       return [start, end];
      //     }
      //   },
      //   {
      //     text: '前7天',
      //     value: () => {
      //       const start = dayjs().subtract(7,'day').format('YYYY-MM-DD 00:00:00');
      //       const end = dayjs().subtract(1,'day').format('YYYY-MM-DD 23:59:59');
      //       return [start, end];
      //     }
      //   },
      //   {
      //     text: '上一月',
      //     value: () => {
      //       const start = dayjs().subtract(1,'month').startOf('month').format('YYYY-MM-DD HH:mm:ss');
      //       const end = dayjs().subtract(1,'month').endOf('month').format('YYYY-MM-DD HH:mm:ss');
      //       return [start, end];
      //     }
      //   }
      // ];
      this.shortcuts = [
        {
          text: '前一日',
          value: () => {
            const start = dayjs().subtract(1,'day').format('YYYY-MM-DD 00:00:00')
            const end = dayjs().subtract(1,'day').format('YYYY-MM-DD 23:59:59')
            return [start, end];
            if (this.time[0]=='2023-06-01 12:00:00' && this.time[1] == '2023-06-20 16:00:00'){
              const start = dayjs().subtract(1,'day').format('YYYY-MM-DD 00:00:00')
              const end = dayjs().subtract(1,'day').format('YYYY-MM-DD 23:59:59')
              return [start, end];
            }else{
              const start = dayjs(this.time[0]).subtract(1,'day').format('YYYY-MM-DD 00:00:00')
              const end = dayjs(this.time[1]).subtract(1,'day').format('YYYY-MM-DD 23:59:59')
              return [start, end];
            }
          }
        },
        {
          text: '前7天',
          value: () => {
            const start = dayjs().subtract(7,'day').format('YYYY-MM-DD 00:00:00');
            const end = dayjs().subtract(1,'day').format('YYYY-MM-DD 23:59:59');
            if (this.time[0]=='2023-06-01 12:00:00' && this.time[1] == '2023-06-20 16:00:00'){
              const start = dayjs().subtract(7,'day').format('YYYY-MM-DD 00:00:00');
              const end = dayjs().subtract(1,'day').format('YYYY-MM-DD 23:59:59');
            return [start, end];
            }else{
              const start = dayjs(this.time[0]).subtract(7,'day').format('YYYY-MM-DD 00:00:00')
              const end = dayjs(this.time[1]).subtract(7,'day').format('YYYY-MM-DD 23:59:59')
              return [start, end];
            }
          }
        },
        {
          text: '上一月',
          value: () => {
            const start = dayjs().subtract(1,'month').startOf('month').format('YYYY-MM-DD HH:mm:ss');
            const end = dayjs().subtract(1,'month').endOf('month').format('YYYY-MM-DD HH:mm:ss');
            return [start, end];
            if (this.time[0]=='2023-06-01 12:00:00' && this.time[1] == '2023-06-20 16:00:00'){
              const start = dayjs().subtract(1,'month').startOf('month').format('YYYY-MM-DD HH:mm:ss');
              const end = dayjs().subtract(1,'month').endOf('month').format('YYYY-MM-DD HH:mm:ss');
              return [start, end];
            }else{
              const start = dayjs(this.time[0]).subtract(1,'month').format('YYYY-MM-DD HH:mm:ss')
              const end = dayjs(this.time[1]).subtract(1,'month').format('YYYY-MM-DD HH:mm:ss')
              return [start, end];
            }
          }
        }
      ];
    },
    initOneWeekAgoTime() {
      switch (this.timeType) {
        case 'day':
@@ -90,12 +170,18 @@
        case 'currentMonth':
        this.time[0] = dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
        this.time[1] = dayjs().subtract(1,'day').format('YYYY-MM-DD 23:59:59')
        break
        // 防止在每月的1号,出现time[0]>time[1]的情况
        if(this.time[0]<this.time[1]){
          break
          }
        default:
          this.time[0] = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss');
          this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
      }
    }
    },
    judgeDateValid(date) {
          return time.judgeDateValid(date)
        }
  }
};
</script>
@@ -112,9 +198,13 @@
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      value-format="YYYY-MM-DD HH:mm:ss"
      :disabled-date="judgeDateValid"
      @change="$emit('submitTime', time)"
      :default-time = "defaultTime"
      :readonly="readOnly"
    />
  </div>
  </div>
</template>
@@ -130,7 +220,5 @@
  font-size: 14px;
}
/* .pick-date {
  width: 200px;
} */
</style>