spfm-market-front/src/pages/main/fullcalendar/calendar.vue

<template>
  <div>
    <!-- <basic-block title=""> -->
      <!--
            <div class="tag-tip">
              <el-tag size="small" color="#f08f00">审核中</el-tag>
              <el-tag size="small" color="#6bb377">已审核</el-tag>
              <el-tag size="small" color="#999">已结算</el-tag>
            </div>
            -->
      <el-row type="flex" justify="space-between">
        <!--
                <el-col :span="4">
                  <div class="room-content">
                    <div class="room-title">会议室列表</div>
                    <div class="room-list" :class="{'active-list': index === activeNum}"
                         v-for="(item, index) in meetingRoomList" :key="index" @click="chooseRoom(index)">
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </el-col>
                -->
        <el-col :span="24">
          <div class="calendar-box">
            <!-- 日历菜单栏 -->
            <full-calendar
              ref="fullCalendar"
              style="height: 100%"
              :options="calendarOptions"
              id="calendar"
              alt=""
            >
            </full-calendar>
          </div>
        </el-col>
      </el-row>
      <el-dialog
        title="删除"
        :visible.sync="delStatus"
        width="30%"
        center
        :modal-append-to-body="false"
      >
        <span>是否确定删除</span>

        <span slot="footer" class="dialog-footer">
          <el-button @click="delStatus = false">取消</el-button>
          <el-button type="primary" @click="savedel()">确定</el-button>
        </span>
      </el-dialog>
      <!-- 悬停窗体 -->
      <div
        class="over"
        ref="ove"
        @mouseenter="showEwm(1)"
        @mouseleave="showEwm(0)"
      >
        <img src="../../../assets/close.png" class="fr" @click="closexuan" />
        <img src="../../../assets/del.png" class="fr" @click="delxuan" />
        <img src="../../../assets/xiugai.png" class="fr" @click="xiuxuan" />
        <div>
          <img src="../../../assets/POINT.png" /><span id="aaaa"></span>
        </div>
        <div><img src="../../../assets/time.png" /><span id="bbbb"></span></div>
        <div>
          <img src="../../../assets/steam.png" /><span id="cccc"></span>
        </div>
        <div>
          <img src="../../../assets/neirong.png" /><span id="dddd"></span>
        </div>
      </div>
      <!--日程新增弹窗start-->
      <el-dialog
        :title="titleNew"
        :visible.sync="dialogVisible"
        :before-close="close"
        :modal="false"
        width="45%"
      >
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="120px"
          size="small"
          class="demo-ruleForm"
          :disabled="auth ? false : 'disabled'"
        >
          <el-form-item label="会议名称" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="参会角色" prop="orgId">
            <el-select
              v-model="form.orgId"
              style="width: 70%; overflow: hidden"
              clearable
              filterable
              placeholder="参会角色"
              multiple
            >
              <el-option
                v-for="item in roleNameList"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否是党会" prop="isParty">
            <el-select
              v-model="form.isParty"
              clearable
              style="width: 70%"
              filterable
              placeholder="是否是党会"
            >
              <el-option
                v-for="item in isParrty"
                :key="item.is_party"
                :label="item.name"
                :value="item.is_party"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发起科室" prop="leaderName">
            <el-input v-model="form.leaderName"></el-input>
          </el-form-item>
          <el-form-item label="会议开始时间" required>
            <el-col :span="11">
              <el-form-item prop="begindate" style="margin-bottom: 0">
                <el-date-picker
                  type="date"
                  disabled
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  v-model="form.begindate"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="startTime" style="margin-bottom: 0">
                <el-select
                  v-model="form.startTime"
                  placeholder="选择时间"
                  clearable
                >
                  <el-option
                    v-for="item in timeOptions"
                    :key="item.time"
                    :disabled="item.disabled"
                    :label="item.time"
                    :value="item.time"
                  />
                </el-select>
                <!--                                <el-time-select placeholder="选择时间"-->
                <!--                                                v-model="form.startTime"-->

                <!--                                                :picker-options="{-->
                <!--                                    start: '09:00',-->
                <!--                                    step: '00:30',-->
                <!--                                    end: '20:00 ',-->
                <!--                                  }"-->
                <!--                                                @change="onStartTime"-->
                <!--                                                style="width: 100%;">-->
                <!--                                </el-time-select>-->
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="会议结束时间" required>
            <el-col :span="11">
              <el-form-item prop="enddate" style="margin-bottom: 0">
                <el-date-picker
                  type="date"
                  disabled
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  v-model="form.enddate"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="endTime" style="margin-bottom: 0">
                <!--                                <el-time-select placeholder="选择时间"-->

                <!--                                                v-model="form.endTime"-->
                <!--                                                :picker-options="{-->
                <!--                                    start: '00:00',-->
                <!--                                    step: '00:30',-->
                <!--                                    end: '23:30 ',-->
                <!--                                    minTime: form.startTime-->
                <!--                                  }"-->
                <!--                                                style="width: 100%;">-->
                <!--                                </el-time-select>-->
                <el-select
                  v-model="form.endTime"
                  placeholder="选择时间"
                  clearable
                >
                  <el-option
                    v-for="item in timeOptions"
                    :key="item.time"
                    :disabled="item.disabled"
                    :label="item.time"
                    :value="item.time"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="会议备注" prop="remark">
            <el-input type="textarea" v-model="form.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('form')">取消</el-button>
            <el-button type="primary" @click="submitForm('form')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--日程新增弹窗end-->
    <!-- </basic-block> -->
  </div>
</template>

<script>
import _ from "lodash"; //导入loadsh插件
// 引入日历组件
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
// 引入js数据
// import array from '@/utils/home'

export default {
  name: "Home",
  components: {
    FullCalendar, // make the <FullCalendar> tag available
  },
  data() {
    return {
      activeNum: 0,
      dialogVisible: false,
      // meetingRoomList: [],
      subList: [],
      array: [],
      auth: false,
      roleNameList: [
        {
          userId: 1,
          name: "分管公司领导/部门负责人",
        },
        {
          userId: 2,
          name: "部门负责人",
        },
        {
          userId: 3,
          name: "部门分管线条领导/科室主任",
        },
      ],
      isParrty: [
        {
          is_party: "1",
          name: "是",
        },
        {
          is_party: "0",
          name: "否",
        },
      ],
      idx: "",
      xtop: "",
      xleft: "",
      calEventt: {},
      form: {
        title: "",
        userId: "",
        begindate: "",
        startTime: "",
        enddate: "",
        endTime: "",
        remark: "",
        leaderName: "",
        roleId: "",
        roleColor: "",
        id: "",
        isParty: "否",
        // roleName: '分管公司领导/部门负责人'
        // roleName: [],
        orgId: [2, 3],
        // orgIds: "[2,3]",
      },
      rules: {
        title: [{ required: true, message: "请输入会议主题", trigger: "blur" }],
        userid: [
          { required: true, message: "请选择会议室使用人", trigger: "change" },
        ],
        begindate: [
          { required: true, message: "请选择开始日期", trigger: "change" },
        ],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        enddate: [
          { required: true, message: "请选择结束日期", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        remark: [
          { required: true, message: "请填写会议备注", trigger: "blur" },
        ],
        leaderName: [{ required: true, message: "发起科室", trigger: "blur" }],
        isParty: [{ required: true, message: "是否是党会", trigger: "change" }],
        // roleName:[{required: true, message: '参会角色', trigger: 'change'}],
        orgId: [{ required: true, message: "参会角色", trigger: "change" }],
        // orgIds: [{required: true, message: '参会角色', trigger: 'change'}]
      },
      calendarOptions: {
        //   timeGridPlugin  可显示每日时间段
        height: 700,
        plugins: [dayGridPlugin, interactionPlugin],
        headerToolbar: {
          left: "title",
          center: "",
          right: "today prev dayGridMonth,dayGridWeek,dayGrid next",
          // right: 'agendaWeek,dayGridWeek,dayGrid'
        },
        buttonText: {
          // 设置按钮
          today: "今天",
          month: "月",
          week: "周",
          dayGrid: "天",
        },
        // allDaySlot: false,
        editable: false,
        selectable: true,
        navLinks: true,
        // displayEventEnd: true,//所有视图显示结束时间
        initialView: "dayGridMonth", // 设置默认显示月，可选周、日
        dateClick: this.handleDateClick, //点击日历
        eventClick: this.handleEventClick, //日历日程点击
        eventsSet: this.handleEvents,

        select: this.handleDateSelect,
        eventMouseEnter: this.eventmouseover, //鼠标滑过
        eventMouseLeave: this.eventmouseout, //鼠标离开
        // timezone
        // 设置日程
        events: [
          // {
          // 	id: 1,
          // 	title: '09:30~11:30 小破孩',
          // 	start: '2020-12-11',
          // 	end: '2020-12-13',
          // 	color: '#f08f00',
          // },
          // {
          // 	id: 2,
          // 	title: '9:30~14:30 项目会议',
          // 	start: '2020-12-14',
          // 	end: '2020-12-14',
          // 	color: '#6bb377',
          // },
        ],
        eventColor: "", // 修改日程背景色
        locale: "zh-cn", // 设置语言
        weekNumberCalculation: "ISO", // 周数
        customButtons: {
          prev: {
            // this overrides the prev button
            text: "PREV",
            click: () => {
              this.prev();
            },
          },
          next: {
            // this overrides the next button
            text: "PREV",
            click: () => {
              this.next();
            },
          },
          today: {
            text: "今天",
            click: () => {
              this.today();
            },
          },
        },
      },
      // 时间选项
      timeOptions: [
        { time: "08:00" },
        { time: "08:30" },
        { time: "09:00" },
        { time: "09:30" },
        { time: "10:00" },
        { time: "10:30" },
        { time: "11:00" },
        { time: "11:30" },
        { time: "12:00" },
        { time: "12:30" },
        { time: "13:00" },
        { time: "13:30" },
        { time: "14:00" },
        { time: "14:30" },
        { time: "15:00" },
        { time: "15:30" },
        { time: "16:00" },
        { time: "16:30" },
        { time: "17:00" },
        { time: "17:30" },
        { time: "18:00" },
      ],
      // 备份
      backupTimeOptions: [
        { time: "08:00" },
        { time: "08:30" },
        { time: "09:00" },
        { time: "09:30" },
        { time: "10:00" },
        { time: "10:30" },
        { time: "11:00" },
        { time: "11:30" },
        { time: "12:00" },
        { time: "12:30" },
        { time: "13:00" },
        { time: "13:30" },
        { time: "14:00" },
        { time: "14:30" },
        { time: "15:00" },
        { time: "15:30" },
        { time: "16:00" },
        { time: "16:30" },
        { time: "17:00" },
        { time: "17:30" },
        { time: "18:00" },
      ],
      newfrom: [], //新获得过滤数字
      titleNew: "",
      delStatus: false,
      showEvmStatus: false,
    };
  },
  mounted() {
    // 获取用户信息
    this.calendarApi = this.$refs.fullCalendar.getApi();
    // this.meetingRoomList = this.array.meetingRoomList;
    // console.log('this.array', this.array)
    // this.getReservationList(this.array.scheduleList0);
    this.queryRole();
    this.getList();
  },
  methods: {
    // 获取会议信息
    getList() {
      this.$http({
        url: "/market/calendar/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { isFile: "0" },
      }).then((res) => {
        // console.log("res", res);
        if (res.data && res.data.length > 0) {
          this.array = res.data;
          // this.getReservationList(this.array.scheduleList0);
          this.getReservationList(this.array);
        }
      });
    },
    // 获取会议信息
    queryRole() {
      this.$http({
        url: "/market/calendar/queryRole",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { isFile: "0" },
      }).then((res) => {
        // console.log(res);
        // console.log('res====', typeof res.data)
        // console.log(res.data)
        this.auth = res.data;
        // console.log("res.data", res.data)
      });
    },
    getReservationList(arrayData) {
      // console.log(arrayData);
      let newArr = [];
      this.subList = arrayData;
      // let year = new Date(new Date()).getFullYear();
      // let month =
      //   new Date(new Date()).getMonth() + 1 < 10
      //     ? "0" + (new Date(new Date()).getMonth() + 1)
      //     : new Date(new Date()).getMonth() + 1;
      // let date =
      //   new Date(new Date()).getDate() < 10
      //     ? "0" + new Date(new Date()).getDate()
      //     : new Date(new Date()).getDate();
      // let hh =
      //   new Date(new Date()).getHours() < 10
      //     ? "0" + new Date(new Date()).getHours()
      //     : new Date(new Date()).getHours();
      // let mm =
      //   new Date(new Date()).getMinutes() < 10
      //     ? "0" + new Date(new Date()).getMinutes()
      //     : new Date(new Date()).getMinutes();
      // let nowday = year + "-" + month + "-" + date;
      // let nowtime = hh + ":" + mm;
      // let a = arrayData.filter((items) => {
      //   return items.begindate.indexOf(nowday) > -1;
      // });
      // let b = arrayData.filter((items) => {
      //   return items.begindate.indexOf(nowday) == -1;
      // });
      // console.log(a.length);
      // if (a.length == 1) {
      //   a.map((item) => {
      //     newArr.push({
      //       newBeginTime: item.begindate.split(" ")[1].substr(0, 5),
      //       newEndTime: item.enddate.split(" ")[1].substr(0, 5),
      //       start: this.dealWithTime(item.begindate),
      //       end: this.addDate(this.dealWithTime(item.enddate), 1),
      //       textColor: item.roleColor,
      //       id: item.id,
      //       title: `${this.getTitle(
      //         item.begindate,
      //         item.enddate,
      //         item.isParty
      //       )}   ${ item.title}    ${"召集人:" + item.leaderName}`,
      //     });
      //   });
      // } else {
      //   a.map((item) => {
      //     if (
      //       parseInt(nowtime) >=
      //         parseInt(item.begindate.split(" ")[1].substr(0, 5)) - 1 &&
      //       parseInt(nowtime) <
      //         parseInt(item.enddate.split(" ")[1].substr(0, 5))
      //     ) {
      //       newArr.push({
      //         newBeginTime: item.begindate.split(" ")[1].substr(0, 5),
      //         newEndTime: item.enddate.split(" ")[1].substr(0, 5),
      //         start: this.dealWithTime(item.begindate),
      //         end: this.addDate(this.dealWithTime(item.enddate), 1),
      //         textColor: item.roleColor,
      //         id: item.id,
      //         title: `${this.getTitle(
      //           item.begindate,
      //           item.enddate,
      //           item.isParty
      //         )}   ${item.title}    ${
      //           "召集人:" + item.leaderName
      //         }`,
      //       });
      //     }
      //   });
      // }

      // b.map((item) => {
      //   newArr.push({
      //     newBeginTime: item.begindate.split(" ")[1].substr(0, 5),
      //     newEndTime: item.enddate.split(" ")[1].substr(0, 5),
      //     start: this.dealWithTime(item.begindate),
      //     end: this.addDate(this.dealWithTime(item.enddate), 1),
      //     textColor: item.roleColor,
      //     id: item.id,
      //     title: `${this.getTitle(
      //       item.begindate,
      //       item.enddate,
      //       item.isParty
      //     )}   ${ item.title}    ${"召集人:" + item.leaderName}`,
      //   });
      // });
      arrayData.forEach((item) => {
        // console.log("item", item);
        newArr.push({
          newBeginTime: item.begindate.split(" ")[1].substr(0, 5),
          newEndTime: item.enddate.split(" ")[1].substr(0, 5),
          start: this.dealWithTime(item.begindate),
          end: this.addDate(this.dealWithTime(item.enddate), 1),
          textColor: item.roleColor,
          id: item.id,
          title: `${this.getTitle(
            item.begindate,
            item.enddate,
            item.isParty
          )}   ${item.title}    ${"召集人:" + item.leaderName}`,
        });
      });
      this.calendarOptions.events = newArr;
      // console.log(this.calendarOptions.events);

      // debugger
    },
    // 切换教室
    chooseRoom(index) {
      this.activeNum = index;
      // 查询该会议室下面的会议事件
      if (index === 0) {
        this.getReservationList(this.array.scheduleList0);
      } else if (index === 1) {
        this.getReservationList(this.array.scheduleList1);
      }
    },
    // 日期加1天
    addDate(date, days) {
      var d = new Date(date);
      d.setDate(d.getDate() + days);
      var mon =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
      let endD = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
      return `${d.getFullYear()}-${mon}-${endD}`;
    },
    // 获取会议事件title
    // getTitle(date1, date2) {
    //     let start = date1.substring(11, 16);
    //     let end = date2.substring(11, 16);
    //     return `${start}~${end}`;
    // },
    // 获取会议事件title
    getTitle(date1, date2, isParty) {
      let start =
        isParty == "1"
          ? "★" + date1.substring(11, 16)
          : date1.substring(11, 16);
      let end = date2.substring(11, 16);
      return `${start}~${end}`;
    },
    getShowTime(beginDate, endDate) {
      this.form.begindate = this.dealWithTime(beginDate);
      this.form.startTime = this.getHoursMin(beginDate);
      this.form.enddate = this.dealWithTime(endDate);
      this.form.endTime = this.getHoursMin(endDate);
      // console.log(this.form);
      // this.$forceUpdate()
      this.form = { ...this.form };
    },
    // 获取时分时间
    getHoursMin(value) {
      return value.substring(11, 16);
    },
    // 处理会议时间格式
    dealWithTime(date) {
      let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(date)[0];
      return newDate;
    },
    showEwm(a) {
      if (a == 0) {
        this.showEvmStatus = false;
        this.closexuan();
      } else {
        //驶入
        this.showEvmStatus = true;
      }
    },
    //渲染窗体
    xuanchuang(calEvent, event) {
      // console.log(this.array, '鼠标经过arr');
      // console.log(calEvent, '鼠标经过cal');
      this.idx = calEvent.event.id;
      this.$refs.ove.style.opacity = 0.8;
      this.$refs.ove.style.display = "block";
      event = event || window.event;
      this.xtop = event.clientY + "px";
      this.xleft = event.clientX + "px";
      this.$refs.ove.style.left = event.clientX + "px";
      this.$refs.ove.style.top = event.clientY + "px";
      var j = 0;
      for (var i = 0; i < this.array.length; i++) {
        if (this.array[i].id == calEvent.event.id) {
          j = i;
        }
      }
      document.querySelector("#aaaa").innerHTML = this.array[j].title;
      document.querySelector("#bbbb").innerHTML =
        calEvent.event.startStr.substring(5, 7) +
        "月" +
        calEvent.event.startStr.substring(8) +
        "日" +
        calEvent.event._def.extendedProps.newBeginTime +
        "-" +
        calEvent.event._def.extendedProps.newEndTime;
      document.querySelector("#cccc").innerHTML = this.array[j].leaderName;
      document.querySelector("#dddd").innerHTML = this.array[j].remark;
    },
    //鼠标滑过事件
    eventmouseover(calEvent, event) {
      // console.log(123);
      this.xuanchuang(calEvent, event);
    },
    eventmouseout() {
      // setInterval(() =>{
      //   if(this.showEvmStatus == false){
      //     this.closexuan()
      //   }
      // },3000)
    },
    //关闭悬停窗口
    closexuan() {
      this.$refs.ove.style.display = "none";
    },
    //悬停窗体修改按钮
    xiuxuan(events) {
      var j = 0;
      for (var i = 0; i < this.array.length; i++) {
        if (this.array[i].id == this.idx) {
          j = i;
        }
      }
      this.calEventt.event = this.array[j];
      var aa = this.calEventt;
      this.handleEventClick(aa);
    },
    //悬停窗体删除按钮
    delxuan() {
      if (!this.auth) {
        return;
      }
      this.delStatus = true;
    },
    // 点击日历
    handleDateClick: function (arg) {
      this.form.orgId = [];
      this.form.isParty = "";
      this.titleNew = "会议新增";
      if (!this.auth) {
        return;
      }
      //   this.$forceUpdate();
      //开始时间
      this.form.begindate = arg.dateStr;
      //结束时间
      this.form.enddate = arg.dateStr;
      // this.$http({
      //   url: "/market/calendar/queryNow",
      //   method: "post",
      //   headers: {
      //     "Content-Type": "application/json",
      //   },
      //   data: { now: arg.dateStr },
      // }).then((res) => {
      //   if (res.data) {
      //     let result = [];
      //     result = res.data;
      //     result.map((item) => {
      //       item.begindate = item.begindate.substring(10).substring(1, 6);
      //       item.enddate = item.enddate.substring(10).substring(1, 6);
      //       return result;
      //     });
      //     this.newfrom = result;
      //   }
      // });
      this.dialogVisible = true;
    },
    // 日历日程点击事件
    handleEventClick(calEvent) {
      this.titleNew = "会议修改";
      this.dialogVisible = true;
      let id = calEvent.event.id;
      let info = this.subList.filter((item) => {
        return item.id == id;
      });
      this.$nextTick(() => {
        this.form = _.cloneDeep(info[0]);
        // 处理时间回显
        this.getShowTime(this.form.begindate, this.form.enddate);
        // this.gitPeople(this.form.roleName);
        this.orgId = this.form.roleName;
        // this.orgIds=this.form.roleName
        // this.roleNameList.userId=info[0].roleName
      });
    },
    // gitPeople(orgIds){
    //     this.form.orgId = this.getPeoplee(orgIds);
    // },
    // getPeoplee(orgIds){
    //     for(var i=0;i<this.roleNameList.length;i++){
    //         if(orgIds==this.roleNameList[i].userId){
    //             return this.roleNameList.name
    //         }
    //     }
    // },
    handleEvents(events) {
      // console.log(events, "事件3");
    },
    handleDateSelect(selectInfo) {
      // console.log(selectInfo, "限制");
    },
    // 切换上一个按钮
    prev() {
      this.calendarApi.prev();
    },
    // 切换下一个按钮事件
    next() {
      this.calendarApi.next();
    },
    // 点击今天按钮
    today() {
      this.calendarApi.today();
    },
    //提交删除后的数据
    savedel() {
      this.$http({
        url: "/market/calendar/del",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          id: this.idx,
        },
      }).then((res) => {
        // console.log(res);
        location.reload();
      });
    },
    // 提交数据
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.begindate = `${this.form.begindate} ${this.form.startTime}`;
          this.form.enddate = `${this.form.enddate} ${this.form.endTime}`;
          // console.log(this.form, "数据");
          this.dialogVisible = false;
          if (this.form.id === "") {
            this.form === "";
          }
          if (new Date(this.form.enddate) < new Date(this.form.begindate)) {
            this.$message({
              message: "会议时间填写错误",
              type: "error",
            });
          } else {
            this.$http({
              url:
                this.form.id === ""
                  ? "/market/calendar/add"
                  : "/market/calendar/update",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: this.form,
            }).then((res) => {
              // console.log(res);
              this.loadinged = false;
              if (res.data.result === 1) {
                this.$message({
                  message: res.data.desc,
                  type: "error",
                });
              } else {
                this.$message({
                  message: "成功",
                  type: "success",
                });
                location.reload();
              }
            });
          }
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.dialogVisible = false;
      this.$refs[formName].resetFields();
    },
    //关闭弹窗，重置表单
    close() {
      this.dialogVisible = false;
      this.$refs["form"].resetFields();
    },
    onStartTime(val) {
      // console.log("val", val);
      this.form.startTime = val;
    },
    //开始时间 option显示/隐藏
    handleBeginTimeOptionShow(_value) {
      if (_value) {
        let disabledOnOff = false;
        // 第一次过滤，过滤掉结束时间
        this.timeOptions = this.backupTimeOptions.map((_item) => {
          const result = { time: _item.time, disabled: _item.disabled };
          if (_item.time === this.form.endTime) {
            disabledOnOff = true;
          }
          if (disabledOnOff) {
            result.disabled = true;
          }
          return result;
        });
        // 第二次过滤，过滤掉后端返回的数据
        // console.log(this.newfrom);
        this.newfrom.map((_item) => {
          this.timeOptions = this.timeOptions.map((_timeOptionItem) => {
            // debugger
            // 开始
            if (_item.begindate === _timeOptionItem.time) {
              disabledOnOff = true;
            }
            // 结束
            if (_item.enddate === _timeOptionItem.time) {
              disabledOnOff = false;
            }
            if (disabledOnOff) {
              _timeOptionItem.disabled = true;
            }
            return _timeOptionItem;
          });
        });
      } else {
        this.timeOptions = this.backupTimeOptions;
      }
    },

    //结束时间 option显示/隐藏
    handleEndTimeOptionShow(_value) {
      // 下拉显示
      if (_value) {
        let disabledOnOff = true;
        if (this.form.startTime !== "") {
          // 第一次过滤，过滤掉开始时间
          this.timeOptions = this.backupTimeOptions.map((_item) => {
            const result = { time: _item.time, disabled: _item.disabled };
            if (disabledOnOff) {
              result.disabled = true;
            }
            if (_item.time === this.form.startTime) {
              disabledOnOff = false;
            }
            return result;
          });
        }
        // 第二次过滤，过滤掉后端返回的数据
        disabledOnOff = false;
        this.newfrom.map((_item) => {
          this.timeOptions = this.timeOptions.map((_timeOptionItem) => {
            // debugger
            if (disabledOnOff) {
              _timeOptionItem.disabled = true;
            }
            // 开始
            if (_item.begindate === _timeOptionItem.time) {
              disabledOnOff = true;
            }

            // 结束
            if (_item.enddate === _timeOptionItem.time) {
              disabledOnOff = false;
            }

            return _timeOptionItem;
          });
        });
      } else {
        this.timeOptions = this.backupTimeOptions;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "src/assets/calendar";
.el-row--flex.is-justify-space-between {
  justify-content: center;
}
.over {
  position: absolute;
  width: 200px;
  height: 190px;
  background: #eee;
  border: 1px solid black;
  z-index: 100;
  padding: 10px;
  border-radius: 5px;
  top: 0;
  left: 0;
  opacity: 0;
}
.over img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.over div {
  margin: 20px 0px;
  height: 17px;
}
.over div img {
  height: 17px;
}
.over div span {
  margin-left: 5px;
  height: 17px;
  padding-top: -62px;
  font-size: 12px;
  position: relative;
  top: -4.5px;
}
.fr {
  float: right;
}
::v-deep .fc-sticky {
  background-color: #fff !important;
  border: 1px solid #fff !important;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
::v-deep .fc-h-event {
  border: none !important;
  background-color: #fff !important;
}
::v-deep .el-select__tags {
  flex-flow: inherit;
  overflow: hidden;
  flex-wrap: inherit;
}
.calendar-box {
  margin: 10px;
}
::v-deep .fc-col-header-cell-cushion {
  font-size: 18px;
  line-height: 50px;
}
::v-deep .fc .fc-daygrid-day-top {
  justify-content: center;
  margin-top: 5px;
}
</style>