frame/components/calendar.vue

<template>
  <div class="demo-app">
    <FullCalendar
      ref="fullCalendar"
      locale="zh-cn"
      firstDay="1"
      :defaultDate="defaultDate"
      weekNumberCalculation="ISO"
      :header="{
        left: 'prev',
        center: 'title',
        right: 'today ,next',
      }"
      :button-text="{
        today: '今天',
      }"
      :valid-range="{
        start: rangeStart,
        end: rangeEnd,
      }"
      :slot-event-overlap="false"
      defaultView="dayGridMonth"
      :plugins="calendarPlugins"
      :selectable="true"
      :events="events"
      @select="drawSelect"
      :eventOrder="`start`"
      @eventClick="clickEvent"
    />
    <el-dialog :visible.sync="dialog" :title="addTitle" center @close="toClose">
      <el-form :model="form" label-width="80px" size="mini">
        <el-form-item label="时间"> {{ form.start }} 至 {{ form.end }} </el-form-item>
        <el-form-item label="期数">
          <el-input v-model="form.qishu"></el-input>
        </el-form-item>
        <el-form-item label="批次">
          <el-input v-model="form.pici"></el-input>
        </el-form-item>
        <el-form-item label="是否全天">
          <el-checkbox v-model="form.isAllDay"></el-checkbox>
        </el-form-item>
        <el-form-item label="上/下午" v-if="!form.isAllDay">
          <el-radio-group v-model="form.isMorning">
            <el-radio label="0">上午</el-radio>
            <el-radio label="1">下午</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="toSave">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import _ from 'lodash';
export default {
  props: {
    year: { type: String, default: `${new Date().getFullYear()}` }, //当前日历的年份
    events: { type: Array, default: () => [] },
  },
  components: {
    FullCalendar, // make the <FullCalendar> tag available
  },
  data: function() {
    return {
      form: { isAllDay: true },
      dialog: false,
      calendarPlugins: [
        // plugins must be defined in the JS
        dayGridPlugin,
        // timeGridPlugin,
        interactionPlugin, // needed for dateClick
      ],
      // calendarEvents: [],
      planList: [],
      addTitle: '',
    };
  },
  methods: {
    handleDateClick(arg) {
      console.log(arg);
      this.dialog = true;
      // let calendarApi = this.$refs.fullCalendar.getApi();
    },
    drawSelect(arg) {
      // this.dialog = true;
      // let { startStr, endStr } = arg;
      // this.form.start = startStr;
      // this.form.end = endStr;
      // this.addTitle = '新增计划安排';
      this.$emit('draft', arg);
    },
    toSave() {
      //处理数据
      let data = {
        title: `第${JSON.parse(JSON.stringify(this.form.qishu))}期第${JSON.parse(JSON.stringify(this.form.pici))}批次`,
        start: JSON.parse(JSON.stringify(this.form.start)),
        end: JSON.parse(JSON.stringify(this.form.end)),
        qishu: parseInt(JSON.parse(JSON.stringify(this.form.qishu))),
        pici: parseInt(JSON.parse(JSON.stringify(this.form.pici))),
        isAllDay: JSON.parse(JSON.stringify(this.form.isAllDay)),
      };
      if (this.form.isMorning) {
        data.isMorning = JSON.parse(JSON.stringify(this.form.isMorning));
        JSON.parse(JSON.stringify(this.form.isMorning)) === '0' ? (data.title = `上午 ${data.title}`) : (data.title = `下午 ${data.title}`);
      }
      //添加/修改
      if (!this.form.id) {
        data.id = new Date().getTime();
        this.calendarEvents.push(data);
      } else {
        data.id = JSON.parse(JSON.stringify(this.form.id));
        this.$set(
          this.calendarEvents,
          _.findIndex(this.calendarEvents, item => item.id == data.id),
          data
        );
      }
      //先排批次,再排期数=>期数优先级最高,其次是批次
      //优先级高的后排,低的先排
      let mid = _.sortBy(this.calendarEvents, item => item.pici);
      mid = _.sortBy(this.calendarEvents, item => item.qishu);
      this.$set(this, `calendarEvents`, mid);
      this.toClose();
    },
    toClose() {
      this.form = { isAllDay: true };
      this.dialog = false;
    },
    clickEvent(arg) {
      // let event = arg.event;
      // let arr = this.calendarEvents.filter(fil => fil.id == event.id);
      // if (arr.length > 0) this.form = arr[0];
      // else {
      //   console.warn(`无对应id事件`);
      //   return;
      // }
      // this.dialog = true;
      // this.addTitle = `修改计划安排`;
      this.$emit('eventClick', arg);
    },
  },
  computed: {
    defaultDate() {
      return `${this.year}-01-01`;
    },
    rangeStart() {
      return `${this.year}-01-01`;
    },
    rangeEnd() {
      return `${this.year}-12-31`;
    },
  },
};
</script>
<style lang="less">
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
</style>