vue fullcalendar日历拖拽插入整理

<!--交易时间管理 -->
<template>
  <div class="container">
    <Row>
      <Col span="6">
        <div class="module-title">假期列表</div>
        <div class="date-box" id="list-group-item">
          <div
            class="flex-b box list-group-item"
            v-for="item in entrynameList"
            :key="item.name"
          >
            <div>{{ item.projectNo }}</div>
            <div class="circle" :class="item.color">
              {{ item.projectName }}
            </div>
          </div>
        </div>
      </Col>
      <Col span="18">
        <FullCalendar ref="fullCalendar" :options="calendarOptions" />
      </Col>
    </Row>
  </div>
</template>
  
  <script>
import { selectMyInfo, insertInfo, queryList } from "@/api/my-api.js";
import * as moment from "moment";
import "@fullcalendar/core/vdom"; // solves problem with Vite
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
export default {
  name: "TradingTimeManage",
  components: {
    FullCalendar,
  },
  data() {
    return {
      eventEl: null,
      calendarOptions: {
        //?拖拽日历配置
        plugins: [dayGridPlugin, interactionPlugin],
        firstDay: 1, // 把每周设置为从周一开始
        header: {
          // 日历头部
          left: "prev,next today",
          center: "title",
          right: "custom",
        },
        /* 设置按钮文字 */
        buttonText: {
          today: "今天",
        },
        initialView: "dayGridMonth",
        locale: "zh-cn", //? 配置中文
        selectable: true, //可编辑
        // dayMaxEvents: true,
        slotMinutes: 15,
        editable: false, // 日历上是否可拖拽
        droppable: true,
        dropAccept: ".list-group-item",
        drop: this.drop,
        customButtons: {
          prev: {
            // this overrides the prev button
            text: "PREV",
            click: () => {
              this.prevMethod();
            },
          },
          next: {
            // this overrides the next button
            text: "PREV",
            click: () => {
              this.nextMethod();
            },
          },
          today: {
            text: "今天",
            click: () => {
              this.todayMethod();
            },
          },
        },
        events: [],
      },
      start: null,
      end: null,
      calendarEvents: [],
      entrynameList: [],
    };
  },
  mounted() {
    let _this = this;
    var containerEl = document.getElementById("list-group-item");
    // 初始化外部事件
    new Draggable(containerEl, {
      itemSelector: ".list-group-item",
    });
    _this.holidayEvent(); // 调用获取视图活动数据方法
    _this.entryname();
  },
  methods: {
    /** 上个月  */
    prevMethod() {
      this.$refs.fullCalendar.getApi().prev(); // 更新上个月视图
      this.holidayEvent(); // 调用获取视图活动数据方法
    },
    /** 下个月  */
    nextMethod() {
      this.$refs.fullCalendar.getApi().next(); // 更新下个月视图
      this.holidayEvent(); // 调用获取视图活动数据方法
    },
    /** 今天  */
    todayMethod() {
      this.$refs.fullCalendar.getApi().today(); // 更新今天视图
      this.holidayEvent(); // 调用获取视图活动数据方法
    },
    /** 获取视图活动数据方法 */
    holidayEvent() {
      // 获取当前视图日历的范围
      let _this = this;
      let time =
        _this.$refs.fullCalendar.getApi().currentDataManager.state.dateProfile
          .renderRange;
      _this.start = Date.parse(moment(time.start).format()); // 视图开始时间
      _this.end = Date.parse(moment(time.end).format()); // 视图结束时间
      // 从接口获取数据，更新日历视图活动
      selectMyInfo({ start: _this.start, end: _this.end }).then((res) => {
        if (res.code === 200) {
          const data = res.result;
          const arr = [];
          data.forEach((item) => {
            console.log(item);
            const obj = {
              id: item.id,
              title: item.title,
              start: item.workdate,
              end: item.dayEnd,
              allDay: true,
              backgroundColor: item.name === "工作日" ? "green" : "#3788d8",
            };
            arr.push(obj);
          });
          _this.calendarOptions.events = arr;
        }
      });
    },
    drop(date, allDay) {
      let typeNumber = null;
      const firstChildName = null;
      const obj = {
        projectId: date.draggedEl.firstChild.innerHTML,
        workdate: date.dateStr, // 开始时间
        // dayEnd: Date.parse(
        //   moment(date.dateStr)
        //     .add(date.draggedEl.lastChild.innerHTML, "days")
        //     .format()
        // ), // 结束时间
        // dayNum: date.draggedEl.lastChild.innerHTML,
      };
      // 拖拽后，新增日历活动接口调用
      insertInfo([obj]).then((res) => {
        if (res.code === 200) {
          const data = res.data;
          this.holidayEvent(); // 调用获取视图活动数据方法
        }
      });
    },
    //项目列表
    entryname() {
      let _this = this;
      queryList({ id: "1" }).then((res) => {
        _this.entrynameList = res.result;
      });
    },
  },
};
</script>
  
  <style lang="less" scoped>
.circle {
  background-color: #3788d8;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
}
.blue {
  background-color: #3788d8;
}
.green {
  background-color: green;
}
.date-box {
  //border: 1px solid #ccc;
  border-radius: 5px;
}
.box {
  margin-top: 15px;
  border: 1px solid #ccc;
  padding: 10px 20px;
  border-radius: 5px;
}

.is-selected {
  color: #1989fa;
}
</style>