基于jeecgboot的OA日程安排开发（一）

<template>
  <div style="background:#FFF;">
    <a-button @click="handleAdd" style="margin-bottom: 20px" type="primary">新建日程</a-button>
    <FullCalendar
      class="fullCalendar"
      @eventDrop="handleDrop"
      ref="fullCalendar"
      :options="calendarOptions"
    />
    <oa-schedule-modal ref="modalForm" @ok="modalFormOk"></oa-schedule-modal>
  </div>
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import listPlugin from '@fullcalendar/list';
import timeGridPlugin from "@fullcalendar/timegrid";
import momentPlugin from "@fullcalendar/moment";
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
import scrollgridPlugin from "@fullcalendar/scrollgrid";
var moment = require("moment");
// import calenderFormate from "../utils/calendar";
import calendar from "solarday2lunarday";
import { JeecgListMixin } from '@/mixins/JeecgListMixin';
import OaScheduleModal from './modules/OaScheduleModal';
import { GetList } from '@/api/oa/schedule';
import estar from '../util/estar';
export default {
  mixins:[JeecgListMixin],
  components: {
    FullCalendar, // 像使用自定义组件一样使用
    OaScheduleModal,
  },
  data() {
    return {
      form: {
        title: "",
        start: "",
        end: "",
      },
      isDay: false,
      isWeek: false,
      isMonth: true,
      custom: null,
      day: null,
      week: null,
      month: null,
      findRoom: false,
      calendarApi: null,
      calendarOptions: {
        plugins: [
          dayGridPlugin,
          interactionPlugin,
          listPlugin,
          momentPlugin,
          timeGridPlugin,
          resourceTimelinePlugin,
          scrollgridPlugin,
        ], // 需要用哪个插件引入后放到这个数组里
        // initialDate: new Date(), // 日历第一次加载时显示的初始日期。可以解析为Date的任何职包括ISO8601日期字符串，例如"2014-02-01"。
        initialView: "dayGridMonth", // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
        locale: "zh-cn", // 设置日历的语言，中文为 “zh-cn”
        firstDay: "1", // 设置每周的第一天，默认值取决于当前语言环境，该值为代表星期几的数字，且值必须为整数，星期日=0
        // weekNumberCalculation: 'ISO', // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
        buttonText: {
          // 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
          today: "今天",
          month: "月",
          week: "周",
          day: "日",
          list: '周列表'
        },
        editable: true,
        eventDrop: this.DropEvent,
        dayMaxEvents: true, // 在dayGrid视图中如果每个单元格事件超出单元格会出现'+more'
        moreLinkContent: "查看更多",
        // 点击+more触发该回调
        moreLinkClick: this.eventLimitClickFun,
        // unselectAuto: true,
        selectable: true, // 允许用户点击或拖拽选中
        // dayHeaderContent: this.columnHeaderHtmlFun,
        headerToolbar: {
          // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
          // right: "today prev next title",
          start: "today prev next",
          end: "dayGridMonth,timeGridWeek,timeGridDay listWeek,custom",
          center: "title",
        },
        //  header :{
        // //   left: "today prev next title",
        //   left: 'today prev next title ',
        //   center: '',
        //   right: "agendaDay,agendaWeek,month,custom",
        //   //   right: 'custom, month,agendaWeek,agendaDay'
        // },
        views: {
          dayGridMonth: {
            displayEventTime: false,
            dayCellContent(item) {
              //console.log("data", item);
              let _date = moment(item.date).format("YYYY-MM-DD");
              let startDate = "";
              _date = _date.split("-");
              startDate = _date[2];
              let _dateF = calendar.solar2lunar(_date[0], _date[1], _date[2]);
              let _dateS = "";
              //console.log("_dateF", _dateF);
              if (startDate[0] == "0") {
                startDate = startDate[1];
              } else {
                startDate = startDate;
              }
              if (_dateF.Term !== "") {
                _dateS = _dateF.Term;
              } else {
                _dateS = _dateF.IDayCn;
              }
              return {
                html: `<p style="letter-spacing: 1px;margin-top: 7.5px;"><label>${startDate}</label><span style="margin-left:2px">${_dateS}</span></p>`,
              };
            },
          },
        },
        // displayEventTime:false,
        eventTimeFormat: {
          // 在每个事件上显示的时间的格式
          hour: "numeric",
          minute: "2-digit",
          hour12: false,
        },
        events: [],
        //eventColor: "#f08f00", // 修改日程背景色
      
        // events: [ // 将在日历上显示的事件对象， events 可以是数组、json、函数。具体可以查看官方文档
        //     title: '标题',
        //     start: '事件开始事件',
        //     end: '事件结束事件', // 这里要注意，end为可选参数，无end参数时该事件仅在当天展示
        //     backgroundColor: '#FDEBC9', // 该事件的背景颜色
        //     borderColor: '#FDEBC9', // 该事件的边框颜色
        //     textColor: '#F9AE26' // 该事件的文字颜色
        // ],
        customButtons: {
          // 定义可在headerToolbar / footerToolbar中使用的自定义按钮
          today: {
            text: "今天", // 按钮的展示文本
            click: this.todayClick, // 点击按钮触发的事件，这里要注意的是当按钮绑定了事件之后该按钮原本自带的事件将会失效
          },
          next: {
            click: this.nextClick,
          },
          prev: {
            click: this.prevClick,
          },
          timeGridDay: {
            text: "日",
            click: this.dayView,
          },
          timeGridWeek: {
            text: "周",
            click: this.weekView,
          },
          dayGridMonth: {
            text: "月",
            click: this.monthView,
          },
        },
        datesSet: this.datesSet,
        eventClick: this.handleEventClick, // 点击事件时，触发该回调
        // eventDrop:this.handleDrop,
        eventMouseEnter: this.handleMouseEnter, // 鼠标悬停在事件上时，触发该回调
        eventMouseLeave: this.handleMouseLeave, // 鼠标移除时，触发该回调
        dateClick: this.handleDateClick, // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
      },
      startTime: '',
      endTime: '',
    };
  },