封装快捷时间选择

项目需要如图：用户可以快捷选择，前端把处理好的时间给后端。比如选择今天，则是处理成：

startTime：2023-09-06 00：00：00

endTime：2023-09-06 23：59：59

代码如图！亲测有用

<template>
  <div class="content">
    <el-select v-model="universalInfo.type" placeholder="" @change="changEuniversalInfo">
      <el-option
        v-for="item in universalList"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      >
      </el-option>
    </el-select>
    <el-select v-model="universalInfo.dateDay" clearable @change="changEuniversalInfo($event, 'date')">
      <el-option
        v-for="item in dateDayList"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import {getweekdayInformation } from '@/api/administrative'
import { mapGetters } from 'vuex'

export default {
  name: 'UniversalDatetime',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    // universalInfo: {
    //   type: Object,
    //   default: () => {}
    // },
    // universalList: {
    //   type: Array,
    //   default: () => []
    // },
    // dateDayList: {
    //   type: Array,
    //   default: () => []
    // }
  },
  data() {
    return {
      universalInfo: {
        type: 1,
        dateDay: '',
        endTime: '',
        startTime: ''
      },
      universalList: [
        {label: '提交实验时间', value: 1},
        {label: '完成实验时间', value: 2}
      ],
      dateDayList: [
        {label: '今天', value: 1},
        {label: '昨天', value: -1},
        {label: '上一个工作日', value: 3},
        {label: '7天内', value: 7},
        {label: '两周内', value: 14},
        {label: '30天内', value: 30},
        {label: '本月', value: 2}
      ],
      universalListNew: [],
      dateDayListNew: [],
      universalInfoNew: {},
      weekMenu: {
        '星期一': 1,
        '星期二': 2,
        '星期三': 3,
        '星期四': 4,
        '星期五': 5,
        '星期六': 6,
        '星期日': 7
      }
    }
  },
  computed: {
    ...mapGetters([
      'hospitalId'
    ])
  },
  created() {
    this.universalListNew = this.universalList
    this.dateDayListNew = this.dateDayList
  },
  methods: {
    async changEuniversalInfo(val, datetype) {
      if (datetype === 'date' && this.universalList.length) {
        const nowTimeStamp = new Date().getTime()
        if (this.universalInfo.dateDay === 1) {
          // 今天
          this.universalInfo.endTime = this.$moment().format('yyyy-MM-DD') + ' 23:59:59'
          this.universalInfo.startTime = this.$moment().format('yyyy-MM-DD') + ' 00:00:00'
        } else if (this.universalInfo.dateDay === -1) {
          // 昨天
          this.universalInfo.endTime = this.$moment(nowTimeStamp - 24 * 60 * 60 * 1000).format('yyyy-MM-DD') + ' 23:59:59'
          this.universalInfo.startTime = this.$moment(nowTimeStamp - 24 * 60 * 60 * 1000).format('yyyy-MM-DD') + ' 00:00:00'
        } else if (this.universalInfo.dateDay === 3) {
          // 上个工作日
          const { data } = await getweekdayInformation(this.hospitalId)
          const weekDays = []
          data.forEach(item => {
            if (item.isWorkday) {
              // 工作日转为数字时间，例如周一则是1，周二则是2
              weekDays.push(this.weekMenu[item.workdayName])
            }
          })
          const today = this.$moment().isoWeekday()// 获取当天是数字几
          //   查询上个工作日在本周/上周，如果在上周：拿到上周工作日的时间lenth-1，则可以得到上周最后一天的工作日+上当天时间到本周一的时间差=当天距离上个工作日时间差距天数
          //  如果在本周，则直接拿当天-1的时间即可
          if (weekDays.length) {
            if (weekDays.indexOf(today - 1) === -1) {
            // 7 - weekDays[weekDays.length - 1] + 1 //上周工作日距离上周天的天数
            //  this.$moment().isoWeekday() - 1//当天距离本周一的天数
              const addDay = 7 - weekDays[weekDays.length - 1] + 1 + this.$moment().isoWeekday() - 1
              const lastTimeStamp = nowTimeStamp - addDay * 24 * 60 * 60 * 1000
              this.universalInfo.endTime = this.$moment(lastTimeStamp).format('yyyy-MM-DD') + ' 23:59:59'
              this.universalInfo.startTime = this.$moment(lastTimeStamp).format('yyyy-MM-DD') + ' 00:00:00'
            } else {
              const lastTimeStamp = nowTimeStamp - 1 * 24 * 60 * 60 * 1000
              this.universalInfo.endTime = this.$moment(lastTimeStamp).format('yyyy-MM-DD') + ' 23:59:59'
              this.universalInfo.startTime = this.$moment(lastTimeStamp).format('yyyy-MM-DD') + ' 00:00:00'
            }
          } else {
            this.universalInfo.endTime = ''
            this.universalInfo.startTime = ''
          }
        } else if (this.universalInfo.dateDay === 2) {
          // 本月
          this.universalInfo.endTime = this.$moment().endOf('month').format('yyyy-MM-DD') + ' 23:59:59'
          this.universalInfo.startTime = this.$moment().startOf('month').format('yyyy-MM-DD') + ' 00:00:00'
        } else if (this.universalInfo.dateDay === 7 || this.universalInfo.dateDay === 14 || this.universalInfo.dateDay === 30 || this.universalInfo.dateDay === 30) {
          // 7天
          this.universalInfo.endTime = this.$moment().format('yyyy-MM-DD') + ' 23:59:59'
          const lastTimeStamp = nowTimeStamp - (this.universalInfo.dateDay - 1) * 24 * 60 * 60 * 1000
          this.universalInfo.startTime = this.$moment(lastTimeStamp).format('yyyy-MM-DD') + ' 00:00:00'
        } else {
          this.universalInfo.endTime = ''
          this.universalInfo.startTime = ''
        }
        console.log(this.universalInfo)
      }
    }
  }
}
</script>

<style lang="scss"  scoped>
.content{
  display: flex;
      align-items: center;
    height: 36px;
}
</style>

注意点：我们的上个工作日是根据系统配置的工作日来的。所以在处理上个工作日时会调接口。系统配置的工作日如图：用户可以随意设置周一至周日的哪几天为工作日