sz-kjsxy-wx-new/components/calendar-grid/calendar-grid.vue

<template>
  <view class="calendar-grid">
    <view class="calendar-header">
      <view class="nav-btn" @tap="prevMonth">‹</view>
      <text class="month-text">{{ displayYear }}年{{ displayMonthText }}月</text>
      <view class="nav-btn" @tap="nextMonth">›</view>
      <!-- <text class="back-today" @tap="backToday">今天</text> -->
    </view>

    <view class="weekdays">
      <text v-for="(d, wi) in weekNames" :key="wi" class="weekday">{{ d }}</text>
    </view>
    <!-- :style="'height:' + gridHeightPx + 'rpx'" -->
    <view ref="grid" class="grid">
      <!-- 日期格子 -->
      <view class="row" v-for="(row, rIdx) in weeks" :key="rIdx">
        <view class="cell" v-for="cell in row" :key="cell.fullDate" :style="'height:'+cellHeight+'rpx'" @tap="onDayClick(cell.fullDate)">
          <text class="date-num" :class="{ dim: !cell.inMonth }">{{ cell.date }}</text>
          <view class="cell-events" :style="'padding-top:'+getCellPadding(cell.fullDate)+'rpx'">
            <view v-for="ev in eventsForDate(cell.fullDate)" :key="ev.id" class="event-chip" :class="['event-type-' + (ev.type || 'default'), { 'single-line-open': isSingleEvent(cell.fullDate), 'conflict': hasSpanConflict(cell.fullDate), 'has-multi-day': hasSpanConflict(cell.fullDate) }]" :style="'background:' + ((ev && ev.color) ? ev.color : '#ddba99') + ';' + (hasSpanConflict(cell.fullDate) ? 'transform: translateY(10px) !important; padding-top: 10px !important;' : '')" @tap="onEventClick(ev)">
              {{ formatTitle(ev.title) }}
            </view>
          </view>
        </view>
      </view>

      <!-- 跨天覆盖层 -->
      <view class="overlay">
        <view v-for="(seg, si) in continuousSegments" :key="si" class="continuous-bar" :style="'left:'+seg._style.left+';width:'+seg._style.width+';top:'+seg._style.top+';height:'+seg._style.height+';'+(seg._isOnlyOne ? '' : ('line-height:'+seg._style.height+';'))+(seg.color?('background:'+seg.color+';'):'background:#ddba99;')" :class="['event-type-' + (seg.type || 'default'), { 'nobreak': seg._isOnlyOne } ]" @tap="onSegmentClick(seg)">
          {{ formatTitle(seg.title) }}
        </view>
      </view>
    </view>
  </view>
  
</template>

<script>
export default {
  name: 'CalendarGrid',
  props: {
    month: { // YYYY-MM
      type: String,
      required: true
    },

    events: { // [{ id, title, type, start_time, end_time }]
      type: Array,
      default: () => []
    },
    // 每行高度,单位 rpx
    rowHeightRpx: {
      type: Number,
      default: 140
    },
    headerHeightRpx: {
      type: Number,
      default: 80
    },
    weekHeaderHeightRpx: {
      type: Number,
      default: 56
    },
    dateNumberHeightRpx: {
      type: Number,
      default: 48
    },
    barHeightRpx: {
      type: Number,
      default: 28
    },
    barSpacingRpx: {
      type: Number,
      default: 6
    }
  },
  data() {
    return {
      FIRST_DOW: 0, // 0=Sunday
      // rpx 单位（仅存数值,使用时拼接 rpx）
      cellHeight: this.rowHeightRpx,
      headerHeight: this.headerHeightRpx,
      weekHeaderHeight: this.weekHeaderHeightRpx,
      dateNumberHeight: this.dateNumberHeightRpx,
      barHeight: this.barHeightRpx,
      barSpacing: this.barSpacingRpx
    }
  },
  watch: {
    rowHeightRpx(val) {
      this.cellHeight = Number(val) || this.cellHeight
    },
    headerHeightRpx(val) {
      this.headerHeight = Number(val) || this.headerHeight
    },
    weekHeaderHeightRpx(val) {
      this.weekHeaderHeight = Number(val) || this.weekHeaderHeight
    },
    dateNumberHeightRpx(val) {
      this.dateNumberHeight = Number(val) || this.dateNumberHeight
    },
    barHeightRpx(val) {
      this.barHeight = Number(val) || this.barHeight
    },
    barSpacingRpx(val) {
      this.barSpacing = Number(val) || this.barSpacing
    }
  },
  computed: {
    displayMonthText() {
      const m = this.displayMonth
      return (m < 10 ? ('0' + m) : '' + m)
    },
    displayYear() {
      const [y] = this.month.split('-').map(Number)
      return y
    },
    displayMonth() {
      const [, m] = this.month.split('-').map(Number)
      return m
    },
    baseDate() {
      // 兼容 month 传入为空或异常
      if (!this.month || typeof this.month !== 'string') {
        const t = new Date()
        return new Date(t.getFullYear(), t.getMonth(), 1)
      }
      const [yStr, mStr] = this.month.split('-')
      const y = parseInt(yStr, 10)
      const m = parseInt(mStr, 10)
      if (!y || !m) {
        const t = new Date()
        return new Date(t.getFullYear(), t.getMonth(), 1)
      }
      return new Date(y, m - 1, 1)
    },
    weekNames() {
      return ['日','一','二','三','四','五','六']
    },
    weeks() {
      // 动态计算需要的行数
      const firstDay = new Date(this.baseDate)
      if (!(firstDay instanceof Date) || isNaN(firstDay.getTime())) return []
      const startDow = firstDay.getDay()
      const offset = (startDow - this.FIRST_DOW + 7) % 7
      const gridStart = new Date(firstDay)
      gridStart.setDate(1 - offset)

      // 计算当月最后一天
      const lastDay = new Date(this.baseDate.getFullYear(), this.baseDate.getMonth() + 1, 0)
      const lastDayOfMonth = lastDay.getDate()
      
      // 计算需要的行数
      const totalDays = offset + lastDayOfMonth
      const neededWeeks = Math.ceil(totalDays / 7)

      const weeks = []
      for (let w = 0; w < neededWeeks; w += 1) {
        const row = []
        for (let d = 0; d < 7; d += 1) {
          const cur = new Date(gridStart)
          cur.setDate(gridStart.getDate() + (w * 7 + d))
          row.push({
            date: cur.getDate(),
            month: cur.getMonth() + 1,
            year: cur.getFullYear(),
            inMonth: cur.getMonth() === this.baseDate.getMonth(),
            fullDate: `${cur.getFullYear()}-${this.pad2(cur.getMonth()+1)}-${this.pad2(cur.getDate())}`
          })
        }
        weeks.push(row)
      }
      return weeks
    },
    gridHeightPx() {
      // 返回 rpx 数值，根据实际行数计算
      const actualWeeks = this.weeks.length
      return this.headerHeight + this.weekHeaderHeight + this.cellHeight * actualWeeks
    },
    continuousSegments() {
      // 拆分跨天事件为每周分段
      const events = (this.events || []).filter(ev => ev && ev.start_time)
      const y = this.displayYear
      const m = this.displayMonth - 1
      const monthStart = new Date(y, m, 1)
      const monthEnd = new Date(y, m + 1, 0)

      const multiDay = events.filter(ev => {
        if (!ev.end_time) return false
        const s = this.parseDateTime(ev.start_time)
        const e = this.parseDateTime(ev.end_time)
        return s.toDateString() !== e.toDateString()
      })

      const segs = []

      const getWeekStart = (date) => {
        const d = new Date(date)
        const jsDow = d.getDay()
        const off = (jsDow - this.FIRST_DOW + 7) % 7
        d.setDate(d.getDate() - off)
        d.setHours(0,0,0,0)
        return d
      }

      multiDay.forEach(ev => {
        const s = this.parseDateTime(ev.start_time)
        const e = this.parseDateTime(ev.end_time)
        if (e < monthStart || s > monthEnd) return
        const clampedStart = s < monthStart ? monthStart : s
        const clampedEnd = e > monthEnd ? monthEnd : e
        let cursor = getWeekStart(clampedStart)
        while (cursor <= clampedEnd) {
          const weekStart = new Date(cursor)
          const weekEnd = new Date(cursor)
          weekEnd.setDate(weekEnd.getDate() + 6)

          const segStart = clampedStart > weekStart ? clampedStart : weekStart
          const segEnd = clampedEnd < weekEnd ? clampedEnd : weekEnd
          if (segStart <= segEnd) {
            const startCol = (segStart.getDay() - this.FIRST_DOW + 7) % 7
            const endCol = (segEnd.getDay() - this.FIRST_DOW + 7) % 7
            const spanCols = endCol - startCol + 1
            segs.push({
              ...ev,
              weekStartISO: weekStart.toISOString(),
              // 保留本地毫秒时间,避免 ISO/时区转换带来的日期偏移
              segStartMs: segStart.getTime(),
              segEndMs: segEnd.getTime(),
              startCol,
              endCol,
              spanCols
            })
          }
          cursor.setDate(cursor.getDate() + 7)
        }
      })

      // 统计跨天分段对每日的覆盖数量
      const segCountByDate = {}
      const addDateKey = (ms) => {
        const d = new Date(ms)
        d.setHours(0,0,0,0)
        const key = `${d.getFullYear()}-${this.pad2(d.getMonth()+1)}-${this.pad2(d.getDate())}`
        segCountByDate[key] = (segCountByDate[key] || 0) + 1
      }
      segs.forEach(seg => {
        for (let t = seg.segStartMs; t <= seg.segEndMs; t += 86400000) {
          addDateKey(t)
        }
      })

      // 为每周的分段分配 lane,避免重叠
      const byWeek = {}
      const laneCountByDate = {}
      segs.forEach(s => {
        const key = s.weekStartISO
        if (!byWeek[key]) byWeek[key] = []
        byWeek[key].push(s)
      })

      Object.values(byWeek).forEach(arr => {
        arr.sort((a,b) => (a.startCol - b.startCol) || (b.spanCols - a.spanCols))
        const laneEnd = []
        arr.forEach(seg => {
          let placed = false
          for (let i=0;i<laneEnd.length;i+=1) {
            if (laneEnd[i] < seg.startCol) {
              seg.laneIndex = i
              laneEnd[i] = seg.endCol
              placed = true
              break
            }
          }
          if (!placed) {
            seg.laneIndex = laneEnd.length
            laneEnd.push(seg.endCol)
          }
          // 记录该分段覆盖到的每日所需预留层数
          for (let t = seg.segStartMs; t <= seg.segEndMs; t += 86400000) {
            const d = new Date(t)
            const key = `${d.getFullYear()}-${this.pad2(d.getMonth()+1)}-${this.pad2(d.getDate())}`
            laneCountByDate[key] = Math.max(laneCountByDate[key] || 0, seg.laneIndex + 1)
          }
        })
      })

      // 计算样式以网格起点为基准
      const y2 = this.displayYear
      const m2 = this.displayMonth - 1
      const firstDay = new Date(y2, m2, 1)
      const startDow = firstDay.getDay()
      const offset = (startDow - this.FIRST_DOW + 7) % 7
      const gridStart = new Date(firstDay)
      gridStart.setDate(1 - offset)
      gridStart.setHours(0,0,0,0)
      const msPerDay = 86400000
      const cellWidthPct = 100 / 7
      const heightRpx = this.barHeight

      segs.forEach(seg => {
        const segStart = new Date(seg.segStartMs)

        // 基于 weeks 网格直接定位行列,避免周起始偏差
        const startStr = `${segStart.getFullYear()}-${this.pad2(segStart.getMonth()+1)}-${this.pad2(segStart.getDate())}`
        let row = 0
        let col = seg.startCol
        outer: for (let r = 0; r < this.weeks.length; r += 1) {
          const rowArr = this.weeks[r]
          for (let c = 0; c < rowArr.length; c += 1) {
            if (rowArr[c].fullDate === startStr) {
              row = r
              col = c
              break outer
            }
          }
        }

        const leftPct = col * cellWidthPct
        const widthPct = seg.spanCols * cellWidthPct
        const vOffset = (seg.laneIndex || 0) * (this.barHeight + this.barSpacing)
        const innerTopPadding = 8 // 额外内边距,避免贴近格子顶部
        const topRpx = (row * this.cellHeight) + this.dateNumberHeight + innerTopPadding + vOffset - 3

        // 确保事件不会超出日历边界
        const maxLeftPct = 100 - widthPct
        const finalLeftPct = Math.min(leftPct, maxLeftPct)

        seg._style = {
          left: finalLeftPct + '%',
          width: widthPct + '%',
          top: topRpx + 'rpx',
          height: heightRpx + 'rpx'
        }

        // 判断该跨天分段在其覆盖的日期是否独占（无单天事件、无其它跨天分段）
        let onlyOne = true
        for (let t = seg.segStartMs; t <= seg.segEndMs; t += 86400000) {
          const d = new Date(t)
          const key = `${d.getFullYear()}-${this.pad2(d.getMonth()+1)}-${this.pad2(d.getDate())}`
          const segCnt = segCountByDate[key] || 0
          const singleCnt = (this.eventsForDate(key) || []).length // 单天事件数量
          if (!(segCnt === 1 && singleCnt === 0)) { onlyOne = false; break }
        }
        seg._isOnlyOne = onlyOne
      })

      // 暴露给实例：为单日事件预留空间 & 判定与跨天冲突
      this.laneCountByDate = laneCountByDate
      this.segCountByDate = segCountByDate
      
      return segs
    }
  },
  methods: {
      getCellPadding(fullDate) {
      // 根据覆盖该日期的跨天事件层数，为单日事件预留顶部空间，避免与跨天条重叠
      const lanes = this.laneCountByDate && this.laneCountByDate[fullDate] ? this.laneCountByDate[fullDate] : 0
      if (!lanes) return 0
      
      // 如果有冲突（既有跨天事件又有单天事件），增加额外的空间
      const hasConflict = this.hasSpanConflict(fullDate)
      const basePadding = lanes * (this.barHeight + this.barSpacing)
      const extraPadding = hasConflict ? 40 : 0 // 额外增加40rpx的空间
      
      return basePadding + extraPadding
    },
    isSingleEvent(fullDate) {
      try {
        const list = this.eventsForDate(fullDate) || []
        return list.length === 1
      } catch (_) {
        return false
      }
    },
    hasSpanConflict(fullDate) {
      // 有跨天覆盖且该日也有单日事件
      const hasMulti = !!(this.segCountByDate && this.segCountByDate[fullDate] > 0)
      const hasSingle = (this.eventsForDate(fullDate) || []).length > 0
      const result = hasMulti && hasSingle
      
      return result
    },
    onEventClick(ev) {
      this.$emit('eventClick', ev)
    },
    onSegmentClick(seg) {
      this.$emit('eventClick', seg)
      this.$emit('edit', seg.id)
    },
    formatTitle(title) {
      const raw = (title == null ? '' : String(title)).trim()
      if (!raw) return ''
      // 存在管道分隔（｜或|）：取最后一段,再去掉右侧附加（- 第二模块）
      if (raw.includes('｜') || raw.includes('|')) {
        const pipeParts = raw.split(/[|｜]/).map(s => s.trim()).filter(Boolean)
        const afterPipe = pipeParts.length ? pipeParts[pipeParts.length - 1] : raw
        const core = afterPipe.split(/\s*[-—–－]\s*/)[0]
        return core.trim()
      }
      // 没有管道,仅有破折号分隔：
      const dashParts = raw.split(/\s*[-—–－]\s*/).map(s => s.trim()).filter(Boolean)
      if (dashParts.length >= 3) {
        // 典型：前缀 - 主体 - 尾巴 → 取中间段
        return dashParts[Math.floor(dashParts.length / 2)]
      }
      if (dashParts.length === 2) {
        // 只有两段：取更长的一段作为主体
        return dashParts[0].length >= dashParts[1].length ? dashParts[0] : dashParts[1]
      }
      return raw
    },
    getEventChipStyle(ev) {
      if (!ev) return {}
      const custom = ev.color || ev.bg_color || ev.background
      if (custom) return { background: custom, backgroundColor: custom }
      return {}
    },
    getSegmentStyle(seg) {
      if (!seg || !seg._style) return {}
      const base = {
        left: seg._style.left,
        width: seg._style.width,
        top: seg._style.top,
        height: seg._style.height
      }
      const custom = seg.color || seg.bg_color || seg.background
      if (custom) {
        base.background = custom
        base.backgroundColor = custom
      }
      return base
    },
    prevMonth() {
      const d = new Date(this.baseDate)
      d.setMonth(d.getMonth() - 1)
      this.$emit('monthChange', { year: d.getFullYear(), month: d.getMonth() + 1 })
    },
    nextMonth() {
      const d = new Date(this.baseDate)
      d.setMonth(d.getMonth() + 1)
      this.$emit('monthChange', { year: d.getFullYear(), month: d.getMonth() + 1 })
    },
    backToday() {
      const t = new Date()
      const isSameMonth = t.getFullYear() === this.displayYear && (t.getMonth()+1) === this.displayMonth
      if (!isSameMonth) {
        this.$emit('monthChange', { year: t.getFullYear(), month: t.getMonth() + 1 })
      }
      // 同时触发当天点击
      const full = `${t.getFullYear()}-${String(t.getMonth()+1).padStart(2,'0')}-${String(t.getDate()).padStart(2,'0')}`
      this.onDayClick(full)
    },
    onDayClick(fullDate) {
      this.$emit('dayClick', { fulldate: fullDate })
    },
    onEdit(id) {
      // 向外抛出用于编辑的事件（如有需要）
      this.$emit('edit', id)
    },
    eventsForDate(fullDate) {
      const d0 = new Date(fullDate)
      d0.setHours(0,0,0,0)
      const result = (this.events || []).filter(ev => {
        if (!ev || !ev.start_time) return false
        const s = this.parseDateTime(ev.start_time)
        const e = ev.end_time ? this.parseDateTime(ev.end_time) : this.parseDateTime(ev.start_time)
        s.setHours(0,0,0,0); e.setHours(0,0,0,0)
        // 单天事件才在格子里显示,跨天事件走覆盖层
        const isMulti = ev.end_time && (s.getTime() !== e.getTime())
        if (isMulti) return false
        return d0.getTime() === s.getTime()
      })
      
      // 调试信息
      if (result.length > 0) {
        console.log(`日期 ${fullDate} 的单天事件:`, result)
      }
      
      return result
    },
    pad2(n) {
      n = Number(n) || 0
      return n < 10 ? ('0' + n) : String(n)
    },
    parseDateTime(dateTimeStr) {
      if (!dateTimeStr) return null
      const [datePart, timePart = '00:00:00'] = String(dateTimeStr).trim().split(/[T\s]+/)
      const [y, m, d] = datePart.split('-').map(n => parseInt(n, 10))
      const [hh = 0, mm = 0, ss = 0] = timePart.split(':').map(n => parseInt(n, 10))
      // 以本地时间构建,避免不同时区解析成前一天/后一天
      return new Date(y, (m || 1) - 1, d || 1, hh || 0, mm || 0, ss || 0)
    }
  }
}
</script>

<style scoped>
.calendar-grid {
  background: #fff;
  /* border-radius: 18rpx; */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-radius: 0 0 20rpx 20rpx;
  /* margin: 20rpx;
  padding: 10rpx 0 20rpx 0; */
}
.calendar-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  background:#eaf3fb;
  color:#0d0398;
  font-size:34rpx;
}
.nav-btn {
  width: 40px;
  text-align: center;
  font-size: 50rpx;
  color: #333;
}
.month-text {
  width: 140px;
  text-align: center;
  font-size: 34rpx;
  color:#0d0398;
}
.back-today {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: #333;
  background: #f1f1f1;
}
.weekdays {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
    height: 40px;
  box-sizing: border-box;
    color: #0d0398;
    font-size: 28rpx;
}
.weekday {
  width: 14.2857%;
  text-align: center;
  font-size: 28rpx;
  line-height: 40px;
  color: #0d0398;
  border-right: 1px solid #f2eae2;
}
.weekday:last-child {
  border-right:none
}
.grid {
  position: relative;
}
.row {
  display: flex;
  flex-direction: row;
}
.cell {
  width: 14.2857%;
  height: 120rpx;
  border-top: 1px solid #f2eae2;
  border-right: 1px solid #f2eae2;
  position: relative;
  padding: 2px 2px 2px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.row .cell:last-child {
  border-right:none
}
.date-num {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  margin-bottom: 4px;
}
.date-num.dim {
  color: #bfbfbf;
}
.cell-events {
  position: relative;
  z-index: 2; /* 让跨天条位于其上方 */
  width: 100%;
  overflow: hidden;
}
.event-chip {
  font-size: 11px;
  line-height: 14px;
  padding: 2rpx 10rpx;
  margin: 1px 0;
  color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  box-sizing: border-box;
}
.event-chip.event-type-1 { background: #67C23A; }
.event-chip.event-type-2 { background: #409EFF; }
.event-chip.event-type-3 { background: #E6A23C; }
.event-chip.event-type-4 { background: #F56C6C; }
.event-chip.event-type-5 { background: #909399; }
.event-chip.event-type-default { background: #ddba99; }
/* 当天只有一条单天事件时，允许换行不省略 */
.event-chip.single-line-open {
  white-space: normal;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 最多三行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 与跨天冲突时，单日事件强制一行省略 */
.event-chip.conflict {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 当有跨天事件时，单天事件需要更多上边距 */
.event-chip.has-multi-day {
  padding-top: 10px !important;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 4; /* 置于单日事件之上，避免被遮挡 */
}
.continuous-bar {
  position: absolute;
  pointer-events: auto;
  z-index: 2;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  padding: 0rpx 10rpx;
  border-radius: 16rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  background: #ddba99;
  text-align: center;
}
.continuous-bar.event-type-1 { background: linear-gradient(90deg, #67C23A 0%, #5CB85C 100%); }
.continuous-bar.event-type-2 { background: linear-gradient(90deg, #409EFF 0%, #337ecc 100%); }
.continuous-bar.event-type-3 { background: linear-gradient(90deg, #E6A23C 0%, #D4952B 100%); }
.continuous-bar.event-type-4 { background: linear-gradient(90deg, #F56C6C 0%, #E85555 100%); }
.continuous-bar.event-type-5 { background: linear-gradient(90deg, #909399 0%, #73767A 100%); }
.continuous-bar.event-type-default { background: #ddba99; }
/* 跨天事件在整段期间独占时不省略，允许换行 */
.continuous-bar.nobreak {
  white-space: normal;
  word-break: break-all;
  text-overflow: ellipsis;
  height: auto !important; /* 允许多行内容自适应高度 */
  line-height: 1.4;
  padding-top: 6rpx;
  padding-bottom: 6rpx;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 最多三行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>