store-pc/src/components/CompanyCalendarDialog.vue

<template>
  <el-dialog
    :visible.sync="visibleProxy"
    :show-close="false"
    width="90%"
    :close-on-click-modal="false"
    custom-class="company-calendar-dialog"
    append-to-body
  >
    <div class="dialog-inner">
      <div class="dialog-header">
        <div class="dialog-title">公司日历</div>
        <div class="dialog-legend">
          <span v-for="item in eventTypeList" :key="item.id" class="legend-item">
            <span class="legend-dot" :style="{ background: item.color }"></span>
            {{ item.typeName }}
          </span>
        </div>
        <span class="dialog-close" @click="visibleProxy = false"><i class="el-icon-close"></i></span>
      </div>
      <div class="dialog-content" v-loading="loading">
        <FullCalendar
          ref="fullCalendar"
          class="company-calendar"
          defaultView="dayGridMonth"
          :header="calendarHeader"
          :plugins="calendarPlugins"
          :weekends="true"
          :events="calendarEvents"
          locale="zh-cn"
          :buttonText="buttonText"
          :height="calendarHeight"
          :eventLimit="true"
          allDayText="全天"
          :editable="false"
          @datesRender="datesRender"
          @eventClick="handleEventClick"
        />
      </div>
    </div>
    <el-dialog
      :visible.sync="detailVisible"
      :show-close="false"
      width="520px"
      custom-class="company-calendar-detail-dialog"
      append-to-body
    >
      <div v-if="selectedEvent" class="detail-inner">
        <div class="header">
          <div class="title">日程详情</div>
          <span class="close" @click="detailVisible = false"><i class="el-icon-close"></i></span>
        </div>
        <div class="body">
          <div class="row"><span class="label">主题</span><span class="value">{{ selectedEvent.title || '无' }}</span></div>
          <div class="row">
            <span class="label">类型</span>
            <span class="value">
              <span class="type-dot" :style="{ background: selectedEvent.typeColor || '#3b82f6' }"></span>
              {{ selectedEvent.typeName || '无' }}
            </span>
          </div>
          <div class="row"><span class="label">日期</span><span class="value">{{ selectedEventDateStr }}</span></div>
          <div class="row"><span class="label">时间</span><span class="value">{{ selectedEventTimeRange }}</span></div>
          <div class="row" v-if="selectedEvent.desc">
            <span class="label">内容</span>
            <span class="value value--multiline">{{ selectedEvent.desc }}</span>
          </div>
          <div class="row" v-if="selectedEvent.store">
            <span class="label">门店/地点</span>
            <span class="value">{{ selectedEvent.store || '无' }}</span>
          </div>
          <div class="row row--remark">
            <span class="label">备注</span>
            <span class="value value--multiline">{{ selectedEvent.remark || '无' }}</span>
          </div>
          <div class="row row--attachments">
            <span class="label">附件</span>
            <span class="value value--block">
              <template v-if="selectedEventAttachments.length">
                <div
                  v-for="(att, idx) in selectedEventAttachments"
                  :key="idx"
                  class="attachment-item"
                  :class="'attachment-item--' + getAttachmentFileType(att)"
                >
                  <span class="attachment-icon-wrap">
                    <i :class="'el-icon-' + getAttachmentIcon(att)"></i>
                  </span>
                  <span class="attachment-name" :title="att.name || att.fileName">{{ att.name || att.fileName || '附件' }}</span>
                  <a v-if="att.url" :href="att.url" target="_blank" rel="noopener" class="attachment-link">
                    <i class="el-icon-download"></i> 下载
                  </a>
                  <span v-else class="attachment-link attachment-link--disabled">下载</span>
                </div>
              </template>
              <span v-else class="attachment-empty">无</span>
            </span>
          </div>
        </div>
        <div class="footer">
          <el-button size="small" @click="detailVisible = false">关 闭</el-button>
        </div>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import { getCalendarEventList, getEventTypeList } from '@/api/storeDashboard'
export default {
  name: 'CompanyCalendarDialog',
  components: { FullCalendar },
  props: {
    visible: { type: Boolean, default: false }
  },
  data() {
    return {
      loading: false,
      companyEvents: [],
      eventTypeList: [],
      typeColorMap: {},
      calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
      calendarEvents: [],
      calendarHeader: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      buttonText: { today: '今日', month: '月', week: '周', day: '日' },
      startTime: null,
      endTime: null,
      calendarHeight: 720,
      detailVisible: false,
      selectedEvent: null
    }
  },
  computed: {
    visibleProxy: {
      get() {
        return this.visible
      },
      set(v) {
        this.$emit('update:visible', v)
      }
    },
    selectedEventDateStr() {
      if (!this.selectedEvent || !this.selectedEvent.start) return '—'
      return this.formatDate(new Date(this.selectedEvent.start))
    },
    selectedEventTimeRange() {
      if (!this.selectedEvent || !this.selectedEvent.start) return '—'
      const start = new Date(this.selectedEvent.start)
      const end = this.selectedEvent.end ? new Date(this.selectedEvent.end) : start
      const fmt = d => `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
      return `${fmt(start)} - ${fmt(end)}`
    },
    selectedEventAttachments() {
      if (!this.selectedEvent || !this.selectedEvent.attachments) return []
      try {
        const list = typeof this.selectedEvent.attachments === 'string'
          ? JSON.parse(this.selectedEvent.attachments)
          : this.selectedEvent.attachments
        return Array.isArray(list) ? list.filter(a => a && (a.name || a.fileName)) : []
      } catch {
        return []
      }
    }
  },
  watch: {
    visible(v) {
      if (v) {
        this.$nextTick(() => {
          this.calcHeight()
          this.loadEventTypeList()
          this.initData()
        })
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.calcHeight)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calcHeight)
  },
  methods: {
    calcHeight() {
      this.$nextTick(() => {
        const el = this.$el && this.$el.querySelector('.dialog-content')
        if (el) {
          this.calendarHeight = Math.max(el.clientHeight - 20, 650)
        }
      })
    },
    datesRender(info) {
      const view = info.view
      this.startTime = view.activeStart
      this.endTime = view.activeEnd
      this.initData()
    },
    async loadEventTypeList() {
      try {
        const res = await getEventTypeList({})
        const list = res.data || res || []
        this.eventTypeList = Array.isArray(list) ? list : []
        this.typeColorMap = {}
        this.eventTypeList.forEach(item => {
          this.typeColorMap[item.Id] = item.Color
        })
      } catch (e) {
        console.error('[公司日历] 加载事件类型失败:', e)
      }
    },
    async initData() {
      this.loading = true
      try {
        const params = {}
        if (this.startTime) {
          params.startTime = this.startTime.toISOString()
        }
        if (this.endTime) {
          params.endTime = this.endTime.toISOString()
        }
        const res = await getCalendarEventList(params)
        const list = res.data || res || []
        this.companyEvents = Array.isArray(list) ? list : []
        this.calendarEvents = this.companyEvents.map(evt => {
          const color = evt.EventTypeColor || this.typeColorMap[evt.EventType] || '#3b82f6'
          return {
            id: evt.Id,
            title: evt.Title,
            start: evt.Start,
            end: evt.End,
            color,
            editable: false,
            allDay: false,
            extendedProps: {
              type: evt.EventType
            }
          }
        })
      } catch (e) {
        console.error('[公司日历] 加载失败:', e)
        this.companyEvents = []
        this.calendarEvents = []
      } finally {
        this.loading = false
      }
    },
    formatDate(d) {
      const dt = d instanceof Date ? d : new Date(d)
      const y = dt.getFullYear()
      const m = String(dt.getMonth() + 1).padStart(2, '0')
      const day = String(dt.getDate()).padStart(2, '0')
      return `${y}-${m}-${day}`
    },
    getAttachmentFileType(att) {
      const name = (att.name || att.fileName || '').toLowerCase()
      if (name.endsWith('.pdf')) return 'pdf'
      if (name.endsWith('.xlsx') || name.endsWith('.xls')) return 'xlsx'
      if (name.endsWith('.pptx') || name.endsWith('.ppt')) return 'pptx'
      if (name.endsWith('.docx') || name.endsWith('.doc')) return 'doc'
      if (name.endsWith('.png') || name.endsWith('.jpg') || name.endsWith('.jpeg')) return 'img'
      return 'default'
    },
    getAttachmentIcon(att) {
      const type = this.getAttachmentFileType(att)
      if (type === 'img') return 'picture-outline'
      return 'document'
    },
    handleEventClick(info) {
      const evt = info && info.event
      if (!evt) return
      const raw = this.companyEvents.find(e => e.Id === evt.id) || {}
      this.selectedEvent = {
        id: raw.Id || evt.id,
        title: raw.Title || evt.title,
        type: (evt.extendedProps && evt.extendedProps.type) || raw.EventType,
        typeName: raw.EventTypeName || '',
        typeColor: raw.EventTypeColor || this.typeColorMap[(evt.extendedProps && evt.extendedProps.type) || raw.EventType] || '#3b82f6',
        start: raw.Start,
        end: raw.End,
        desc: raw.Desc,
        store: raw.Store,
        remark: raw.Remark,
        attachments: raw.Attachments
      }
      this.detailVisible = true
    }
  }
}
</script>
<style lang="scss">
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
.company-calendar-dialog .company-calendar {
  .fc-toolbar.fc-header-toolbar {
    padding: 16px 20px;
    margin-bottom: 0;
    border-bottom: 2px solid #f1f5f9;
    background: linear-gradient(135deg, rgba(59,130,246,0.02) 0%, rgba(96,165,250,0.02) 100%);
  }
  .fc-toolbar-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
  }
  .fc-button-primary {
    background-color: #3b82f6;
    border-color: #3b82f6;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    height: 34px;
    line-height: 34px;
    padding: 0 14px;
    transition: all 0.2s;
    &:hover {
      background: #2563eb;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(59,130,246,0.3);
    }
  }
  .fc-button-primary:not(:disabled):active,
  .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
  }
  .fc-day-today {
    background: linear-gradient(135deg, rgba(59,130,246,0.05) 0%, rgba(96,165,250,0.05) 100%);
    .fc-daygrid-day-number {
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      color: #fff;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(59,130,246,0.3);
    }
  }
  .fc-event {
    cursor: pointer;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s;
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
  }
  .fc-day-header {
    font-size: 14px !important;
    color: #64748b !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 12px 8px !important;
  }
  .fc-unthemed th,
  .fc-unthemed td {
    border-color: #f1f5f9;
  }
}
</style>
<style lang="scss" scoped>
::v-deep .company-calendar-dialog {
  max-width: 1600px;
  margin-top: 3vh !important;
  border-radius: 20px;
  padding: 0;
  background: radial-gradient(circle at 0 0, rgba(255,255,255,0.96) 0, rgba(248,250,252,0.98) 40%, rgba(241,245,249,0.98) 100%);
  box-shadow: 0 24px 48px rgba(15,23,42,0.18), 0 0 0 1px rgba(255,255,255,0.9);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
::v-deep .el-dialog__header { display: none; }
::v-deep .el-dialog__body { padding: 0; }
.dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  height: 88vh;
}
.dialog-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 22px 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(219,234,254,0.96);
}
.dialog-title {
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
}
.dialog-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6b7280;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.dialog-close {
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #64748b;
  transition: all 0.15s;
  &:hover {
    background: rgba(0,0,0,0.06);
    color: #0f172a;
  }
}
.dialog-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 22px 14px;
}
</style>
<style lang="scss" scoped>
/* 日程详情弹窗：与 booking-consume-detail-dialog 统一的结构与样式 */
.detail-inner {
  padding: 18px 22px 14px;
}
.detail-inner .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(219, 234, 254, 0.96);
}
.detail-inner .title {
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
}
.detail-inner .close {
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #64748b;
  transition: all 0.15s;
}
.detail-inner .close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #0f172a;
}
.detail-inner .body {
  padding: 4px 0 16px;
}
.detail-inner .row {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
}
.detail-inner .label {
  width: 96px;
  color: #64748b;
  flex-shrink: 0;
}
.detail-inner .value {
  flex: 1;
  min-width: 0;
  color: #111827;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.5;
  word-break: break-all;
}
.detail-inner .value--multiline {
  white-space: pre-wrap;
  word-break: break-word;
}
.detail-inner .row--remark .value {
  white-space: pre-wrap;
  word-break: break-word;
}
.detail-inner .row--attachments .value--block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detail-inner .attachment-empty {
  color: #94a3b8;
  font-size: 13px;
}
.detail-inner .attachment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #94a3b8;
  font-size: 13px;
  transition: all 0.2s ease;
  &:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
}
.detail-inner .attachment-item--pdf  { border-left-color: #dc2626; }
.detail-inner .attachment-item--xlsx { border-left-color: #16a34a; }
.detail-inner .attachment-item--pptx { border-left-color: #ea580c; }
.detail-inner .attachment-item--doc  { border-left-color: #2563eb; }
.detail-inner .attachment-item--img  { border-left-color: #7c3aed; }
.detail-inner .attachment-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  .el-icon-document,
  .el-icon-picture-outline { font-size: 16px; color: #fff; }
}
.detail-inner .attachment-item--pdf .attachment-icon-wrap  { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.detail-inner .attachment-item--xlsx .attachment-icon-wrap { background: linear-gradient(135deg, #16a34a, #15803d); }
.detail-inner .attachment-item--pptx .attachment-icon-wrap { background: linear-gradient(135deg, #ea580c, #c2410c); }
.detail-inner .attachment-item--doc .attachment-icon-wrap  { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.detail-inner .attachment-item--img .attachment-icon-wrap  { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.detail-inner .attachment-item--default .attachment-icon-wrap { background: linear-gradient(135deg, #64748b, #475569); }
.detail-inner .attachment-name {
  flex: 1;
  min-width: 0;
  color: #334155;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-inner .attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
  transition: background 0.2s;
  .el-icon-download { font-size: 12px; }
  &:hover {
    background: rgba(37, 99, 235, 0.18);
    color: #1d4ed8;
  }
  &.attachment-link--disabled {
    cursor: default;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.15);
    pointer-events: none;
    &:hover { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
  }
}
.detail-inner .type-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
}
.detail-inner .footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}
</style>
<style lang="scss" scoped>
::v-deep .company-calendar-detail-dialog {
  max-width: 520px;
  margin-top: 10vh !important;
  border-radius: 20px;
  padding: 0;
  background: radial-gradient(circle at 0 0, rgba(255,255,255,0.96) 0, rgba(248,250,252,0.98) 40%, rgba(241,245,249,0.98) 100%);
  box-shadow: 0 24px 48px rgba(15,23,42,0.18), 0 0 0 1px rgba(255,255,255,0.9);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
::v-deep .company-calendar-detail-dialog .el-dialog__header { display: none; }
::v-deep .company-calendar-detail-dialog .el-dialog__body { padding: 0; }
::v-deep .company-calendar-detail-dialog .el-button--primary,
::v-deep .company-calendar-detail-dialog .el-button--default {
  border-radius: 999px;
  padding: 0 18px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
::v-deep .company-calendar-detail-dialog .el-button--default {
  background: rgba(239, 246, 255, 0.9);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.18);
}
::v-deep .company-calendar-detail-dialog .el-button--primary {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}
</style>