根据业务需要，实现了一个可选择时间范围的周视图。用户可以通过鼠标拖动来选择时间段，并且可以通过快速选择组件来快速选择特定的时间范围。

功能介绍

1. 时间范围选择：用户可以通过鼠标拖动来选择时间段。
2. 快速选择：提供快速选择组件，用户可以通过点击快速选择特定的时间范围，如上午、下午、工作日、周末等。
3. 自定义样式：可以通过selectionColor 属性自定义选中区域的颜色。
4. 数据绑定：通过 modelValue属性与父组件进行数据绑定，实时更新选择的时间范围。

属性说明

modelValue：绑定的时间范围数据，类型为数组。
selectionColor：选中区域的颜色，类型为字符串，默认为 ‘rgba(5, 146, 245, 0.6)’。
showQuickSelect：是否显示快速选择组件，类型为布尔值，默认为 true。

事件说明

update:modelValue：当选择的时间范围发生变化时触发，返回更新后的时间范围数据。

实现代码

index.vue

<template>
  <div class="zt-weektime">
    <div :class="{ 'zt-schedule-notransi': mode }" :style="[styleValue, { backgroundColor: selectionColor }]" class="zt-schedule"></div>
    <table class="zt-weektime-table">
      <thead class="zt-weektime-head">
        <tr>
          <td class="week-td" rowspan="8"></td>
          <td v-for="t in theadArr" :key="t" :colspan="2">{
  { t }}:00</td>
        </tr>
        <!--        <tr>-->
        <!--          <td v-for="t in 48" :key="t" class="half-hour">-->
        <!--            {
  { t % 2 === 0 ? "00" : "30" }}-->
        <!--          </td>-->
        <!--        </tr>-->
      </thead>
      <tbody class="zt-weektime-body">
        <tr v-for="t in weekData" :key="t.row">
          <td>{
  { t.value }}</td>
          <td
            v-for="n in t.child"
            :key="`${n.row}-${n.col}`"
            :class="['weektime-atom-item', { selected: isSelected(n) }]"
            :data-time="n.col"
            :data-week="n.row"
            :style="{ '--selection-color': selectionColor }"
            @mousedown="cellDown(n)"
            @mouseenter="cellEnter(n)"
            @mouseup="cellUp(n)"
          ></td>
        </tr>
        <tr>
          <td class="zt-weektime-preview" colspan="49">
            <QuickSelect v-if="showQuickSelect" style="padding: 10px 0" @select="handleQuickSelect" />
            <!--            <div class="g-clearfix zt-weektime-con">-->
            <!--              <span class="g-pull-left">{
  { hasSelection ? "已选择时间段" : "可拖动鼠标选择时间段" }}</span>-->
            <!--            </div>-->
            <!--            <div v-if="hasSelection" class="zt-weektime-time">-->
            <!--              <div v-for="(ranges, week) in formattedSelections" :key="week">-->
            <!--                <p v-if="ranges.length">-->
            <!--                  <span class="g-tip-text">{
  { week }}：</span>-->
            <!--                  <spa