hz_crm_web/src/components/calendar.vue

// 日历组件
<template>
  <div class="calendar-container">
    <header class="calendar-header">
      <!-- 头部左插槽 -->
      <div class="left">
        <slot name="left"></slot>
      </div>
      <div class="center">
        <el-button type="primary" @click="toogelDate('prev')"
          ><i class="el-icon-arrow-left" /> 上一周</el-button
        >
        <el-button type="primary" @click="toogelDate('today')">本周</el-button>
        <el-button type="primary" @click="toogelDate('next')"
          >下一周 <i class="el-icon-arrow-right"
        /></el-button>
      </div>
      <!-- 头部右插槽 -->
      <div class="right">
        <slot name="right"></slot>
      </div>
    </header>
    <FullCalendar
      ref="fullCalendar"
      class="calendar-body"
      :options="calendarOptions"
    >
      <template #eventContent="arg">
          <div class="popper-content">
            <template v-if="fromCode!=='meet'">
              <p>{{ arg.timeText }}</p>
              <p>{{ arg.event.title }}</p>
            </template>

            <div v-else-if="arg.event.extendedProps.titleArr.length">
              <p v-for="item in arg.event.extendedProps.titleArr" :key="item.title">{{ item.title }}</p>
            </div>
          </div>
      </template>
    </FullCalendar>
    <!-- 日历详情 旧版 -->
<!--     <el-popover
      placement="bottom-start"
      width="250"
      popper-class="calendar-eventinfo-popover"
      ref="popover"
    >
      <div class="popover-body" v-if="fromCode!=='meet'">
        <p>
          <template v-if="selectEventInfo.StartDate === selectEventInfo.EndDate">
            {{
              `${$moment(selectEventInfo.StartDate).format("MM.DD")}
              (${$moment(selectEventInfo.StartDate).format('ddd')}) 
              ${selectEventInfo.StartTime&&selectEventInfo.StartTime.substr(0,5)} - 
              ${selectEventInfo.EndTime&&selectEventInfo.EndTime.substr(0,5)}`
            }}
          </template>
          <template v-else>
            {{
              `${$moment(selectEventInfo.StartDate).format("MM.DD")}
              (${$moment(selectEventInfo.StartDate).format('ddd')}) 
              ${selectEventInfo.StartTime&&selectEventInfo.StartTime.substr(0,5)} - 
              ${$moment(selectEventInfo.EndDate).format("MM.DD")}
              (${$moment(selectEventInfo.EndDate).format('ddd')}) 
              ${selectEventInfo.EndTime&&selectEventInfo.EndTime.substr(0,5)}`
            }}
          </template>
        </p>
        <p v-if="isSeller">{{ selectEventInfo.ResearcherName }}</p>
        <p>{{ selectEventInfo.title }}</p>
        <p v-if="selectEventInfo.CompanyName" >{{ `${selectEventInfo.CompanyName}${selectEventInfo.CompanyStatus ? '('+ selectEventInfo.CompanyStatus + ')' : ''}` }}</p>
        <p v-if="selectEventInfo.Theme">{{ selectEventInfo.Theme }}</p>
        <p v-if="selectEventInfo.CooperationName">{{ selectEventInfo.CooperationName }}</p>
        <p v-if="['公开会议','内部会议','路演'].includes(selectEventInfo.ActivityType)">发起人:{{selectEventInfo.SysUserRealName}}</p>
      </div>
      <div class="popover-body" v-else>
        <div v-for="item in selectEventInfo" :key="item.RsCalendarId" class="popover-event-item">
          <p>
            <template v-if="$moment(item.minTime).format('YYYY-MM-DD') === $moment(item.maxTime).format('YYYY-MM-DD')">
              {{
                `${$moment(item.minTime).format("MM.DD")}
                (${$moment(item.minTime).format('ddd')}) 
                ${$moment(item.minTime).format('HH:mm')} - 
                ${$moment(item.maxTime).format('HH:mm')}`
              }}
            </template>
            <template v-else>
              {{
                `${$moment(item.minTime).format("MM.DD")}
                (${$moment(item.minTime).format('ddd')}) 
                ${$moment(item.minTime).format('HH:mm')} - 
                ${$moment(item.maxTime).format("MM.DD")}
                (${$moment(item.maxTime).format('ddd')}) 
                ${$moment(item.maxTime).format('HH:mm')}`
              }}
            </template>
          </p>
          <p>{{ item.total_rs_name }}</p>
          <p>{{ item.title }}</p>
          <p v-if="item.CompanyName" >{{ `${item.CompanyName}${item.CompanyStatus ? '('+ item.CompanyStatus + ')' : ''}` }}</p>
          <p v-if="item.Theme">{{ item.Theme }}</p>
          <p v-if="item.CooperationName">{{ item.CooperationName }}</p>
          <p>发起人:{{item.SysUserRealName}}</p>
        </div>
      </div>
      <i
        class="close-icon el-icon-close"
        @click="closeIconClick"
      ></i>
    </el-popover> -->
    <!-- 日历详情弹窗 新版 -->
    <el-popover
      placement="bottom-start"
      width="300"
      popper-class="calendar-eventinfo-popover"
      ref="popover"
    >
    <div class="pop-header">
        <template v-if="fromCode==='meet'">
            <p>{{selectEventInfo[0]?selectEventInfo[0].ActivityType:''}}</p>
        </template>
        <template v-else>
            <p>{{selectEventInfo.ActivityType?`${selectEventInfo.RoadshowType}${selectEventInfo.ActivityType}`:'事项'}}</p>
        </template> 
        <i
            class="close-icon el-icon-close"
            @click="closeIconClick"
        ></i>
    </div>
      <div class="popover-body">
        <template v-if="fromCode==='meet'">
            <div v-for="item in selectEventInfo" :key="item.RsCalendarId" class="popover-event-item">
          <p>
            <template v-if="$moment(item.minTime).format('YYYY-MM-DD') === $moment(item.maxTime).format('YYYY-MM-DD')">
              {{
                `${$moment(item.minTime).format("MM.DD")}
                (${$moment(item.minTime).format('ddd')}) 
                ${$moment(item.minTime).format('HH:mm')} - 
                ${$moment(item.maxTime).format('HH:mm')}`
              }}
            </template>
            <template v-else>
              {{
                `${$moment(item.minTime).format("MM.DD")}
                (${$moment(item.minTime).format('ddd')}) 
                ${$moment(item.minTime).format('HH:mm')} - 
                ${$moment(item.maxTime).format("MM.DD")}
                (${$moment(item.maxTime).format('ddd')}) 
                ${$moment(item.maxTime).format('HH:mm')}`
              }}
            </template>
          </p>
          <p>{{ item.title }}</p>
          <p>研究员：{{ item.total_rs_name }}</p>
          <p v-if="item.CompanyName" >{{ `${item.CompanyName}${item.CompanyStatus ? '('+ item.CompanyStatus + ')' : ''}` }}</p>
          <p v-if="item.Theme">会议主题：{{ item.Theme }}</p>
          <p v-if="item.CooperationName">合作方名称：{{ item.CooperationName }}</p>
          <p>发起人：{{item.SysUserRealName}}</p>
        </div>
        </template>
        <template v-else>
            <!-- 换行的内容需要对齐,所以dom结构设置成了下面这样 -->
            <div class="content-item" v-for="item in popContentArr" :key="item.key">
                <span class="label">{{item.label}}</span>
                <div class="content">
                    <p>{{item.content}}</p>
                    <p v-if="item.otherContent" class="other-text">{{item.otherContent}}</p>
                </div>
            </div>
        </template>
      </div>
      
    </el-popover>
  </div>
</template>

<script>
import { roadshowInterence } from "@/api/api.js"; 
import FullCalendar from "@fullcalendar/vue"; // 提供一个vue组件
import interactionPlugin from "@fullcalendar/interaction"; // 检测dateClick操作、 可选操作和 事件拖放和调整大小所需的
import timeGridPlugin from "@fullcalendar/timegrid"; // 提供TimeGrid视图
export default {
  name: "Calendar",
  components: {
    FullCalendar,
  },
  props: {
    eventList: {
      type: Array,
      default: [],
    },
    fromCode: {
      type: String,
      default: ''
    }
  },
  computed: {
    roleId() {
      return Number(localStorage.getItem("AdminId"));
    },
    isSeller() {
      return ['ficc_seller', 'rai_seller', 'ficc_group', 'rai_group'].includes(localStorage.getItem('Role'))
    }
  },
  data() {
    return {
      calendarOptions: {
        height: 'auto', // 组件高度
        plugins: [interactionPlugin, timeGridPlugin], // 引入插件
        headerToolbar: false, // 顶部工具栏
        allDaySlot: false, // 全天日程(不需要)
        nowIndicator: true, //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
        selectable: true,
        initialView: "timeGridWeek", // 设置默认显示周，可选月、日
        dateClick: this.handleDateClick,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents,
        select: this.handleDateSelect,
        // 日程列表
        events: [],
        eventTimeFormat: {
          // 格式化日程显示时间,如'14:30'
          hour: "2-digit",
          minute: "2-digit",
          hour12: false,
        },
        slotMinTime:'08:00:00',//每天最早8点
        slotLabelFormat: {
          //格式化左侧显示时间
          hour12: false, // 14:00  true = 2pm
          hour: "2-digit", //'06:xx'
          minute: "2-digit", // 'xx:10'
        },
        eventColor: "#ECF5FF", // 默认日程背景色
        eventTextColor: "#333", // 默认日程文本颜色
        // eventClassNames: [ 'myclassname', 'otherclassname' ],  // 自定义日程类名
        locale: "zh-cn", // 语言
        weekNumberCalculation: "ISO", // 周次的显示格式(ISO表示从周一开始)
        // slotEventOverlap: false, // 日程是否重叠
        // eventMaxStack: 1, // 堆叠最大日程数
      },
      // 用来存放组件api
      calendarApi: null,
      // 用来存放弹出框
      eventInfoPopoverApi: null,
      // 选中的日程信息
      selectEventInfo: {
        id: 0,
        title: "",
        userId: 0,
        beginDate: "",
        endDate: "",
        remark: "",
        status: "",
      },
      //弹窗展示的日程信息
      popContentArr:[
          {
              key:'',
              label:'',
              content:'',
              otherContent:''
          }
      ]
    };
  },
  methods: {
    // 获取组件api,存放到data中
    getCalendarApi() {
      this.calendarApi = this.$refs.fullCalendar.getApi();
    },
    // /* 切换日期 */
    toogelDate(type) {
      switch(type) {
        case 'prev':
          this.calendarApi.prev();
          break;
        case 'today':
          this.calendarApi.today();
          break;
        case 'next':
          this.calendarApi.next();
          break;
      }
      this.$emit('weekChange');
    },

    // 点击某一区域事件
    handleDateClick(arg) {
      this.$emit("cellClick", arg.date);
    },

    // 点击某一日程事件
    handleEventClick(calEvent) {
      let id = calEvent.event.id; // 获取当前点击日程的ID
      let info = this.eventList.find((item) => item.id == id);

      const { clientX,clientY } = calEvent.jsEvent;

      this.selectEventInfo = this.fromCode==='meet' 
      ? info.filterArr.map(item => ({ ...item,title: this.setDynamicTitle(item) }))
      : {...info,title: this.setDynamicTitle(info)};
      // console.log(this.selectEventInfo)
      //鼠标点击的位置
      const popoverBounding = {width:300,height:270}
      const {innerWidth,innerHeight} = window
      let currentPosition = {left:clientX,top:clientY}
      if(clientX+popoverBounding.width>=innerWidth){
        currentPosition.left = innerWidth - popoverBounding.width
      }
      if(clientY+popoverBounding.height>=innerHeight){
        //currentPosition.top = innerHeight - popoverBounding.height
        currentPosition.bottom = 0
      }

      //获取popover展示的内容
      this.getPopoverContent()

      //popover的宽高
      //限制popover的位置不会超出屏幕，否则点不到关闭按钮
      $('.calendar-eventinfo-popover')[0].style.left = currentPosition.left + 'px';
      //$('.calendar-eventinfo-popover')[0].style.top = currentPosition.top + 'px';
      if(currentPosition.bottom === 0){
        $('.calendar-eventinfo-popover')[0].style.bottom=40+'px';
        $('.calendar-eventinfo-popover')[0].style.top='auto';
      }else{
        $('.calendar-eventinfo-popover')[0].style.top = currentPosition.top + 'px'
        $('.calendar-eventinfo-popover')[0].style.bottom='auto';
      }
      this.$refs.popover.doShow();
      // 禁止日历选择
      this.calendarApi.setOption("selectable", false);
    },
    getPopoverContent(){
        const {StartDate,StartTime,StartWeek,EndDate,EndTime,EndWeek} = this.selectEventInfo
        //前两项默认是开始时间和结束时间
        const popContent = [{
            key:'StartDate',
            label:'开始时间：',
            content:`${StartDate} ${StartTime} （${StartWeek}）`,
        },{
            key:'EndDate',
            label:'结束时间：',
            content:`${EndDate} ${EndTime} （${EndWeek}）`,
        }]
        //根据ActivityType判断是什么类型,根据RoadshowType展示对应信息
        const {ActivityType,RoadshowType} = this.selectEventInfo
        const {Province,City} = this.selectEventInfo
        //ActivityType为路演时，需要显示的内容
        const {RoadshowPlatform,CompanyName,CompanyStatus} = this.selectEventInfo
        const RoadshowContent = [{
            key:'RoadshowPlatform',
            label:'路演平台：',
            content:`${RoadshowPlatform}`,
            RoadshowType:'线上'
        },{
            key:'RoadshowCity',
            label:'路演城市：',
            content:`${Province}${City}`,
            RoadshowType:'线下'
        },{
            key:'CompanyName',
            label:'客户名称：',
            content:`${CompanyName}${CompanyStatus ? '('+ CompanyStatus + ')' : ''}`,
            RoadshowType:RoadshowType,
        }].filter(item=>item.RoadshowType===RoadshowType)
        //ActivityType为公开会议时，需要显示的内容
        const {Theme,CooperationName} = this.selectEventInfo
        const MeetingContent = [
            {
                key:'RoadshowPlatform',
                label:'会议平台：',
                content:`${RoadshowPlatform}`,
                RoadshowType:'线上'
            },{
                key:'RoadshowCity',
                label:'会议城市：',
                content:`${Province}${City}`,
                RoadshowType:'线下'
            },{
                key:'Theme',
                label:'会议主题：',
                content:`${Theme}`,
                RoadshowType:RoadshowType
            },{
                key:'CooperationName',
                label:'合作方名称：',
                content:`${CooperationName}`,
                RoadshowType:RoadshowType
            }].filter(item=>item.RoadshowType===RoadshowType)
        ////ActivityType不为空时，需要显示的内容
        const {ResearcherName,SysUserRealName} = this.selectEventInfo
        const SuppleContent=[{
            key:'ResearcherName',
            label:'研究员：',
            content:`${ResearcherName}`,
        },{
            key:'SysUserRealName',
            label:'发起人：',
            content:`${SysUserRealName}`,
        }]
        //ActivityType为空时，需要显示的内容
        const {MatterContent,EditReason,ModifyTime} = this.selectEventInfo
        const MattersContent=[{
            key:'MatterContent',
            label:'事项内容：',
            content:`${MatterContent}`,
        },{
            key:'EditReason',
            label:'最近修改记录：',
            content:`${EditReason}`,
            otherContent:`${this.$moment(ModifyTime).format('YYYY-MM-DD HH:mm:ss')}`
        }].filter(item=>{return item.content.length})

        const contentMap = {
            '路演':RoadshowContent,
            '公开会议':MeetingContent,
        }
        if(ActivityType){
            this.popContentArr = [...popContent,...contentMap[ActivityType]||[],...SuppleContent]
        }else{
            this.popContentArr = [...popContent,...MattersContent]
        }

        //console.log('check',this.popContentArr)

    },
    // 点击日程信息弹窗关闭按钮
    closeIconClick() {
      this.calendarApi.setOption("selectable", true);
      // this.$refs["popover-" + id].doClose();
      this.$refs.popover.doClose();
    },

    // 点击日程信息弹窗修改按钮
    editIconClick(id) {
      this.closeIconClick(id);
      this.$emit('editCallback',this.selectEventInfo);
    },

    // 点击日程信息弹窗删除按钮
    delIconClick(id) {

      const { RsCalendarId,RsCalendarResearcherId,RsMattersId, ActivityType  } = this.selectEventInfo;

      !['公开会议','路演'].includes(ActivityType) && this.$confirm("删除该活动后，将从日历中移除，确定继续吗?", "删除", {
        type: "warning"
      }).then( async() => {
        //删除事项
        let { Ret } = RsMattersId ? await roadshowInterence.delMatters({ RsMattersId }) 
        //删除活动
        : await roadshowInterence.deleteRoadshow({ RsCalendarId, RsCalendarResearcherId });

        if(Ret !== 200) return;
        
        this.$message.success('删除成功');
        this.$emit('weekChange');

        })
        .catch(() => {});

        ['公开会议','路演'].includes(ActivityType) && this.$emit('delAuthHandle',this.selectEventInfo);

        this.closeIconClick(id);
      
    },

    // 处理赋值函数
    getReservationList() {
      const arr = this.eventList.map((item) => {
        let title = (this.isSeller && item.ActivityType==='路演')
        ? `${item.CompanyName}${item.CompanyStatus ? '('+ item.CompanyStatus + ')' : ''}` 
        : (this.isSeller && item.ActivityType==='公开会议')
        ? item.Theme 
        : this.setDynamicTitle(item);

        let start = item.StartDate ? `${item.StartDate}T${item.StartTime}` : item.MinTime.replace(/ /,'T');
        let end = item.EndDate ? `${item.EndDate}T${item.EndTime}` : item.MaxTime.replace(/ /,'T');

         //合并公开会议显示
        item.CalendarList && this.filterSameIdArr(item);
        let titleArr = item.filterArr ? item.filterArr.map(sub_item => ({
          title: sub_item.title
        })) : [];

        return {
          start,
          end,
          event_id: item.RsCalendarId || item.RsMattersId,
          id: item.id,
          title,
          titleArr
        };
      });
      this.calendarOptions.events = arr
      console.log(this.eventList)
    },

    /* 拆分出活动id相同的数组和不同的数组 */
    filterSameIdArr(obj){
      let public_arr = [], id_arr = [];

      obj.CalendarList && obj.CalendarList.forEach(item => {
        if(!id_arr.includes(item.RsCalendarId)) {
          public_arr.push({
            id: item.RsCalendarId,
            ActivityType: item.ActivityType,
            Theme: item.Theme,
            CompanyName: item.CompanyName,
            CompanyStatus: item.CompanyStatus,
            CooperationName: item.CooperationName,
            SysUserRealName: item.SysUserRealName,
            RoadshowType: item.RoadshowType,
            RoadshowPlatform: item.RoadshowPlatform,
            Province: item.Province,
            City: item.City,
            children: [{
              name: item.ResearcherName,
              start: `${item.StartDate} ${item.StartTime}`,
              end: `${item.EndDate} ${item.EndTime}`,
            }]
          })
          id_arr.push(item.RsCalendarId)
        }else {
          public_arr.forEach(_item => {
            if(_item.id === item.RsCalendarId) {
              _item.children.push({
              name: item.ResearcherName,
              start: `${item.StartDate} ${item.StartTime}`,
              end: `${item.EndDate} ${item.EndTime}`,
            })
            }
          })
        }
      })

      //拼接活动id标题 获取活动公用最早时间和最晚时间
      public_arr.forEach(item => {
        let str = '';
        item.children.forEach(sub_item => {
          str += sub_item.name+','
        })
        str = str.substr(0, str.length-1)
        item.title = `${item.Theme}(${str})`;
        item.total_rs_name = str;

        let startDateArr = item.children.map(sub_item => this.$moment(sub_item.start).valueOf());
        let endDateArr = item.children.map(sub_item => this.$moment(sub_item.end).valueOf());

        let minTime = this.$moment(Math.min(...startDateArr)).format('YYYY-MM-DD HH:mm:ss');
        let maxTime = this.$moment(Math.max(...endDateArr)).format('YYYY-MM-DD HH:mm:ss');
        item.minTime = minTime;
        item.maxTime = maxTime;
        
      })

      this.$set(obj,'filterArr',public_arr)
      
      // console.log(public_arr)
    
    },

    // 拼接标题 type 内部会议 公开会议 路演 报告电话会 事项
    setDynamicTitle({ActivityType,RsMattersId,MatterContent,RoadshowType,RoadshowPlatform,Province,City,ActivityCategory,Source,Title}) {

      //第三方添加的日历活动
      if(Source === 1) return Title;

      switch(ActivityType || RsMattersId) {
        case '内部会议': return ActivityType;
        case '公开会议': return `${RoadshowType}${ActivityType}(${RoadshowType==='线上' ? RoadshowPlatform : Province+City})`;
        case '路演': return `${RoadshowType}${ActivityType}(${RoadshowType==='线上' ? RoadshowPlatform : Province+City})`;
        case '报告电话会': return `${ActivityCategory}电话会`;
        case RsMattersId: return MatterContent;
      }
    },

    // 格式化日期YYYY-MM-DD
    formateDate(date){
      return this.$moment(date).format('YYYY-MM-DD')
    },

  },
  mounted() {
    this.getCalendarApi();
    // this.today()
    this.toogelDate('today');
  },
  watch: {
    eventList() {
      this.getReservationList();
    },
  },
};
</script>

<style lang="scss">
.calendar-container {
  .calendar-header {
    display: flex;
    .left,
    .right {
      flex: 1;
    }
    .right {
      display: flex;
      justify-content: end;
    }
    .center .el-button{
      width: 140px;
    }
  }
  .calendar-body {
    height: 100%;
    margin-top: 10px;
    .fc-scrollgrid {
      colgroup col {
        width: 150px !important;
      }
      .fc-timegrid-slots table {
        line-height: 40px;
        .fc-timegrid-slot-label-frame {
          text-align: center;
        }
      }
      .fc-timegrid-cols table {
        .fc-day-today {
          background-color: #fee1cc66;
        }
      }
      .fc-col-header {
        line-height: 40px;
        .fc-col-header-cell {
          background-color: #ecf5ff;
        }
        .fc-day-today {
          background-color: #fee1cc66;
        }
      }
    }
    .fc-timegrid-col-events {
      cursor: pointer;
      margin: 0;
      .fc-event-main .popper-content {
        height: 100%;
        overflow: hidden;
        position: relative;
        left:-3px;
        &::before{
            content: '';
            position: absolute;
            top:0;left:0;
            height: 100%;
            width: 4px;
            background-color: #409EFF;
        }
        p {
          overflow: hidden;
          margin: 2px 10px;
          /* text-overflow: ellipsis; */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.calendar-eventinfo-popover {
  position: relative !important;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .popover-body {
    padding: 0 14px;
    max-height: 270px;
    overflow-y: auto;
    margin-top: 25px;
/*     p {
      margin-top: 5px;
    } */
    /* .close-icon {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 20px;
    } */
    .content-item{
        display: flex;
        margin-top: 5px;
        .content{
            .other-text{
                color:#999;
            }
        }
    }
  }
  .pop-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #5882EF;
        color: #fff;
        margin:-14px 0;
        padding:12px;
        .close-icon{
            cursor: pointer;
            font-size: 16px;
        }
    }
  .handle-btn-icon {
    display: flex;
    justify-content: end;
    i {
      margin: 5px;
      font-size: 20px;
      cursor: pointer;
      color: #3385ff;
    }
  }
  .popover-event-item {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #666;
    &:last-child {
      border: none;
    }
  }
}
</style>

<style lang="scss">
.calendar-eventinfo-popover {
  position: fixed !important;
  top: 0;
  z-index: 99;
  padding: 14px 0;
}
</style>