kmt/src/components/TeamWorkLists.vue

<template>
  <div>
    <el-col :span="18" class="main" v-if="NextOrNewMonthStatus.NextOrNewMonthStatus == false">
      <el-row :gutter="20" class="main-header">
        <el-col :span="24">
          <el-col :span="10">
            <div class="selectBox">
              <div
                class="Ageclass"
                @click="choiceclass()"
                @mouseover="selectStyle()"
                @mouseout="outStyle()"
              >
                <span class="age-tip">{{selecttitlepag}}</span>
                <span :class="[gardeListDown ?'el-icon-caret-top':'el-icon-caret-bottom']"></span>
              </div>
              <div
                class="class-download"
                v-show="gardeListDown"
                @mouseover="selectStyle()"
                @mouseout="outStyle()"
              >
                <ul v-for="(item, k) in options" :key="k">
                  <li @click="selectTip(item)">{{item.label}}</li>
                </ul>
              </div>
            </div>
            <div class="selectBox">
              <div
                class="Ageclass"
                @click="choiceclass()"
                @mouseover="selectStyle1()"
                @mouseout="outStyle1()"
              >
                <span class="age-tip">{{selecttitleage}}</span>
                <span :class="[gardeListDownage ?'el-icon-caret-top':'el-icon-caret-bottom']"></span>
              </div>
              <div
                class="class-download"
                v-show="gardeListDownage"
                @mouseover="selectStyle1()"
                @mouseout="outStyle1()"
              >
                <ul v-for="(item, k) in grades" :key="k">
                  <li @click="selectTipage(item)">{{item.label}}</li>
                </ul>
              </div>
            </div>
          </el-col>
          <el-col :span="4" :offset="0">
            <h1 class="tiplog">{{this.Nowmonth}}月排班情况</h1>
          </el-col>
          <el-col :span="10" class="month" :offset="0">
            <div
              v-if="FindCalendarList.isNextMonth ==1"
              @click="shoeNextOrlastMOntlist(1)"
              class="NextMonthList"
            >
              查看下月排班情况
              <span class="el-icon-arrow-right"></span>
            </div>
            <div v-if="FindCalendarList.isNextMonth ==0" class="NextMonthListMax">25号至月底前一天可查看老师下月排班</div>
          </el-col>
        </el-col>
        <el-col :span="24">
          <div class="canlender" id="canlender">
            <div class="tablebox1">
              <div class="date">
                <div class="calendar-week">
                  <div class="week-item" v-for="item of weekList" :key="item">
                    <span :class="[item == '六' || item == '日'?'grayRed':'']">{{item}}</span>
                  </div>
                </div>
                <div
                  class="calendar-inner"
                  v-if="FindCalendarList.list && FindCalendarList.list.length>0"
                >
                  <div
                    class="calendar-item"
                    v-for="(item, index) of calendarList"
                    :key="index"
                    :class="[item.disable ? 'disabled' : '']"
                  >
                    <el-popover placement="bottom" width="500" trigger="click">
                      <div class="month-day">{{month}}月{{today}}日</div>
                      <el-table
                        :data="gridData"
                        :header-cell-style="{
                             'color': '#393939',
                                 'font-size': '14px'
                                            }"
                      >
                        <el-table-column
                          width="150"
                          label="日期"
                          header-align="center"
                          align="center"
                        >
                          <template slot-scope="scope">
                            <span
                              :class="[DaytimeFn(scope.row.arrangeDate) >0 ||timeFn(Nowyear+'-'+Nowmonth+'-' + D +scope.row.startInterval+':' + '00') >= -4 && DaytimeFn(scope.row.arrangeDate)>=0?'date-time-active':'']"
                            >{{scope.row.startInterval}}-{{scope.row.endInterval}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column width="60" label="最少" header-align="center" align="center">
                          <template slot-scope="scope">
                            <span
                              :class="[DaytimeFn(scope.row.arrangeDate) >0 ||timeFn(Nowyear+'-'+Nowmonth+'-' + D +scope.row.startInterval+':' + '00') >= -4 && DaytimeFn(scope.row.arrangeDate)>=0?'date-time-active':'']"
                            >{{scope.row.miniNum}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column width="60" label="饱和" header-align="center" align="center">
                          <template slot-scope="scope">
                            <span
                              :class="[DaytimeFn(scope.row.arrangeDate) >0 ||timeFn(Nowyear+'-'+Nowmonth+'-' + D +scope.row.startInterval+':' + '00') >= -4 && DaytimeFn(scope.row.arrangeDate)>=0?'date-time-active':'']"
                            >{{scope.row.maxNum}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column width="60" label="已选" header-align="center" align="center">
                          <template slot-scope="scope">
                            <span
                              :class="[DaytimeFn(scope.row.arrangeDate) >0 ||timeFn(Nowyear+'-'+Nowmonth+'-' + D +scope.row.startInterval+':' + '00') >= -4 && DaytimeFn(scope.row.arrangeDate)>=0?'date-time-active':'']"
                            >{{scope.row.haveNum}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          width="130"
                          property
                          label
                          header-align="center"
                          align="center"
                        >
                          <template slot-scope="scope">
                            <div
                              :class="[DaytimeFn(scope.row.arrangeDate) >0 ||timeFn(Nowyear+'-'+Nowmonth+'-' + D +scope.row.startInterval+':' + '00') >= -4 && DaytimeFn(scope.row.arrangeDate)>=0?'date-btn-active':'Buttonhole']"
                              @click="isShow(1,scope.row.id,timeFn(Nowyear+'-'+Nowmonth+'-' + D +scope.row.startInterval+':' + '00'),DaytimeFn(scope.row.arrangeDate))"
                            >排班</div>
                          </template>
                        </el-table-column>
                      </el-table>
                      <!-- v-if='item.dateList && item.dateList.intervalList' -->
                      <div
                        slot="reference"
                        @click="classSet(index,item.date,item.month,item.dateList.intervalList)"
                        :class="[item.pastDay ? 'psatchecked' : '']"
                        class="day-setting"
                      >
                        <!-- {{FindCalendarList}} -->
                        <div class="date-day">{{ item.date }}</div>
                        <div class="people" v-if="item.dateList.isOpen ==0">
                          <div class="people-items">
                            <div style="color:#999999" class="people-items-text">不开放</div>
                          </div>
                        </div>
                        <div class="people" v-if="item.dateList.isOpen ==1">
                          <div class="people-items">
                            <div
                              class="people-items-num"
                              v-if="item.dateList && item.dateList.miniNum"
                            >{{item.dateList.miniNum}}</div>
                            <div class="people-items-text">最少</div>
                          </div>
                          <div class="people-items">
                            <div
                              class="people-items-num"
                              v-if="item.dateList && item.dateList.maxNum"
                            >{{item.dateList.maxNum}}</div>
                            <div class="people-items-text">饱和</div>
                          </div>
                          <div class="people-items">
                            <div
                              class="people-items-num"
                              :class="[item.dateList.haveNum < item.dateList.miniNum?'num-red':'']"
                            >{{item.dateList.haveNum}}</div>
                            <div class="people-items-text">已选</div>
                          </div>
                        </div>
                      </div>
                    </el-popover>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <!-- 下个月排班实施动态 -->
    <NextMonthList v-if="NextOrNewMonthStatus.NextOrNewMonthStatus == true"></NextMonthList>
    <!-- 添加移除老师弹框 -->
    <div class="showModel" @click="allShowModel(3)" v-if="isApporTeacher"></div>
    <div class="model" style="width:40%; top:10%;" v-if="isApporTeacher">
      <div class="model-text">
        <div class="model-text-head">
          <div class="teach-block">
            <div class="Daylog">
              <span>{{month}}月{{today}}日</span>
              <!-- {{FindHaveTeacherList}} -->
              <span>{{FindHaveTeacherList.arrangeDetail.startInterval}}-{{FindHaveTeacherList.arrangeDetail.endInterval}}</span>
            </div>
            <div class="Dayteach-Allot">
              <input
                type="text"
                placeholder="请输入老师名字"
                v-model="HaveTeacherList.teacherName"
                class="Dayinput-with-Allot"
              />
              <span
                @click="SearchFindHaveTeacher()"
                style="right:10%;"
                class="DaySeachIcon el-icon-search"
              ></span>
            </div>
            <div class>
              <span class="tr-slogn">最少:{{FindHaveTeacherList.arrangeDetail.miniNum}}</span>
              <span class="tr-slogn">已选:{{FindHaveTeacherList.arrangeDetail.haveNum}}</span>
              <span class="tr-slogn">饱和:{{FindHaveTeacherList.arrangeDetail.maxNum}}</span>
            </div>
          </div>
          <div>
            <img src="../assets/img/del@2x.png" alt @click="allShowModel(3)" />
          </div>
        </div>
        <div>
          <div class="tr-set table-heads2">
            <div class="tr-secon1">老师</div>
            <div class="tr-secon1">科目</div>
            <div class="tr-secon1">出勤率</div>
            <div class="tr-secon1">在岗率</div>
            <div class="tr-secon1" style="width:25%">当月已选时段</div>
          </div>
          <div class="abbTeachers" @click="showAddTeacherModel">
            <span class="addLogicon">+</span> 添加老师
          </div>
          <div
            class="scrollBox"
            v-if="FindHaveTeacherList.list && FindHaveTeacherList.list.length >0"
          >
            <div
              class="tr-set"
              :class="{BgcColor:index%2 !== 1}"
              v-for="(item, index) of FindHaveTeacherList.list"
              :key="index"
            >
              <div class="tr-secon">
                <img :src="BASE_URL + item.photo" alt class="table-img" v-if="item.photo" />
                <img src="../assets/img/attt.png" alt v-if="item.photo ==''" class="table-img" />
              </div>
              <div class="tr-secon tr-sw200">{{item.teacherName}}</div>
              <div class="tr-secon tr-sw100">{{item.subject}}</div>
              <div class="tr-secon tr-sw100">{{item.attendanceRatio}}%</div>
              <div class="tr-secon tr-sw100">{{item.dutyRatio}}%</div>
              <div class="tr-secon tr-sw100" style="color:#7297FF">{{item.haveCount }}</div>
              <div v-if="item.isEdit==1" class="Buttonhole" @click="detailTeacherTeam(item)">移除</div>
              <div v-if="item.isEdit==0" class="NoButtonhole"></div>
            </div>
          </div>
          <div
            class="scrollBox"
            v-if="FindHaveTeacherList.list && FindHaveTeacherList.list.length <=0"
          >
            <div class="tr-set">暂无可移除老师！</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 移除弹框 -->
    <div class="showModel" @click="allShowModel(1)" v-if="hiddenModel"></div>
    <div class="model" style="width:30%; top:30%;" v-if="hiddenModel">
      <div class="model-text">
        <div class="model-text-items">
          <div>
            <img
              src="../assets/img/del@2x.png"
              alt
              @click="allShowModel(1)"
              class="model-text-items-close"
            />
          </div>
          <div>是否确定将{{this.DetailteacherName}}老师移除？</div>
        </div>
        <div class="model-btn">
          <div class="model-btn-items main-gay" @click="DetetaiApplyOperate()">是</div>
          <div class="model-btn-items model-grdeen" @click="allShowModel(1)">否</div>
        </div>
      </div>
    </div>
    <!-- 添加老师弹框 -->
    <div class="showModel" @click="allShowModel(4)" v-if="AddTeacherModel"></div>
    <div class="model" style="width:40%; top:10%;" v-if="AddTeacherModel">
      <div class="model-text">
        <div class="model-text-head">
          <div class="selectTeacher">选择老师</div>
          <div class="teach-block1">
            <div class="Dayteach-Allot1">
              <input
                type="text"
                placeholder="请输入老师名字"
                v-model="NoHaveTeacherList.teacherName"
                class="Dayinput-with-Allot1"
              />
              <span
                @click="SearchNoHaveTeacher()"
                style="right:5%; margin-top:15%;"
                class="DaySeachIcon el-icon-search"
              ></span>
            </div>
            <div class="tiplogslogn">
              <span class="tr-slogn1">最少:{{FindNoHaveTeacherList.arrangeDetail.miniNum}}</span>
              <span class="tr-slogn1">饱和:{{FindNoHaveTeacherList.arrangeDetail.maxNum}}</span>
              <span class="tr-slogn1">已选:{{FindNoHaveTeacherList.arrangeDetail.haveNum}}</span>
            </div>
          </div>
          <div>
            <img src="../assets/img/del@2x.png" alt @click="allShowModel(4)" />
          </div>
        </div>
        <div>
          <div class="tr-set table-heads2">
            <div class="tr-secon1">老师</div>
            <div class="tr-secon1">科目</div>
            <div class="tr-secon1">出勤率</div>
            <div class="tr-secon1">在岗率</div>
            <div class="tr-secon1" style="width:25%">当月已选时段</div>
          </div>
          <div
            class="scrollBox"
            v-if="FindNoHaveTeacherList.list && FindNoHaveTeacherList.list.length >0"
          >
            <div
              class="tr-set"
              :class="{BgcColor:index%2 !== 1}"
              v-for="(item, index) of FindNoHaveTeacherList.list"
              :key="index"
            >
              <div class="tr-secon">
                <img :src="BASE_URL + item.photo" alt class="table-img" v-if="item.photo" />
                <img src="../assets/img/attt.png" alt v-if="item.photo ==''" class="table-img" />
              </div>
              <div class="tr-secon tr-sw100">{{item.teacherName}}</div>
              <div class="tr-secon tr-sw100">{{item.subject}}</div>
              <div class="tr-secon tr-sw100">{{item.attendanceRatio}}%</div>
              <div class="tr-secon tr-sw100">{{item.dutyRatio}}%</div>
              <div class="tr-secon tr-sw100" style="color:#7297FF">{{item.haveCount}}</div>
              <div class="Selectradius">
                <img
                  @click="DetetaiOrAddeacherTeam(item,2)"
                  v-if="teacherIds.indexOf(item.teacherId) == -1"
                  class="Littleicon"
                  src="../assets/img/normal.png"
                />
                <img
                  @click="DetetaiOrAddeacherTeam(item,1)"
                  v-if="teacherIds.indexOf(item.teacherId) != -1"
                  class="Littleicon"
                  src="../assets/img/correct -hint.png"
                />
              </div>
            </div>
          </div>
          <div
            class="scrollBox"
            v-if="FindNoHaveTeacherList.list && FindNoHaveTeacherList.list.length <=0"
          >
            <span>暂无可添加老师！</span>
          </div>
          <div class="btsnius">
            <div @click="GetAddArrangeByTeacherStatus()" class="yesBtn">确定</div>
            <div @click="allShowModel(4)" class="closeBtn">取消</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { Message } from "element-ui";
import { IMG_BASE_URL } from "@/config";
import NextMonthList from "./NextMonthList.vue";
export default {
  name: "model",
  components: { NextMonthList },
  props: {},
  data() {
    return {
      weekList: ["一", "二", "三", "四", "五", "六", "日"],
      //本月的本期构成
      BASE_URL: IMG_BASE_URL,
      dayarr: [],
      // year: new Date().getFullYear(),
      D: new Date().getDate() + " ",
      Nowyear: new Date().getFullYear(),
      Nowmonth: new Date().getMonth() + 1,
      NowHours: new Date().getHours(),
      NewDay: "",
      gardeListDownage: false,
      gardeListDown: false,
      selecttitlepag: "批改老师",
      selecttitleage: "语文",
      teacherIds: [],
      gridData: [],
      DetailteacherName: "",
      inputValue: "",
      isSelected: false,
      isPigai: false,
      detetaiTeacherid: [],
      isApporTeacher: false, //移除添加老师
      hiddenModel: false, //移除弹框
      AddTeacherModel: false, //添加老师弹框
      current: {}, // 当前时间
      calendarList: [], // 排班列表
      setCalendarList: [], // 排班设置列表
      shareDate: new Date(), // 享元模式，用来做优化的
      month: "",
      today: "",
      filters: {
        OptionsValue: 8,
        gradesValue: "语文",
        inputValue: ""
      },
      HaveTeacherList: {
        Teacherid: "",
        teacherName: ""
      },
      NoHaveTeacherList: {
        teacherName: ""
      },
      options: [
        {
          value: "0",
          label: "匹配知识点",
          str: "13"
        },
        {
          value: "1",
          label: "批改老师",
          str: "8"
        }
      ],
      grades: [
        {
          value: "0",
          label: "语文",
          str: "语文"
        },
        {
          value: "1",
          label: "数学",
          str: "数学"
        },
        {
          value: "2",
          label: "英语",
          str: "英语"
        }
      ]
    };
  },
  watch: {
    DutyTemplateListSTUS(val, oldVal) {
      // debugger
      this.Datainit();
    },
    DeleteArrangeByTeacher(val, oldVal) {
      // debugger

      this.GetFindCalendarListInfo();
    },
    AddArrangeByTeacherStatus(val, oldVal) {
      // debugger

      this.GetFindCalendarListInfo();
    },
    NextOrNewMonthStatus(val, oldVal) {
      // debugger

      this.GetFindCalendarListInfo();
    }
  },
  computed: {
    ...mapGetters([
      "UnallotHomeworkInfo",
      "DeleteArrangeByTeacher",
      "FindCalendarList",
      "FindHaveTeacherList",
      "FindNoHaveTeacherList",
      "DutyTemplateListSTUS",
      "AddArrangeByTeacherStatus",
      "NextOrNewMonthStatus"
    ])
  },
  methods: {
    //关闭弹框
    allShowModel(str) {
      let _this = this;
      if (str == 1) {
        _this.hiddenModel = false;
        _this.isApporTeacher = true;
      } else if (str == 2) {
        _this.isPigai = false;
      } else if (str == 3) {
        _this.isApporTeacher = false;
      } else if (str == 4) {
        this.teacherIds = [];
        _this.AddTeacherModel = false;
        _this.isApporTeacher = true;
      } else if (str == 5) {
        _this.NoAllotManagerModel = false;
      }
    },
    timeFn(d1) {
      //di作为一个变量传进来
      //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
      var dateBegin = new Date(d1.replace(/-/g, "/")); //将-转化为/，使用new Date
      var dateEnd = new Date(); //获取当前时间
      var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
      //计算相差秒数
      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000);
      return hours;
    },
    DaytimeFn(d1) {
      //di作为一个变量传进来
      //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
      var dateBegin = new Date(d1.replace(/-/g, "/")); //将-转化为/，使用new Date
      var dateEnd = new Date(); //获取当前时间
      var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
      //计算相差秒数
      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000);
      // return hours
      return dayDiff;
    },
    showdetailModel(item) {
      if (!item.prevmonth && !item.nextmonth) {
        this.NewDay = item.day;
        this.isPigai = true;
      }
      if (item.prevmonth) {
        Message.error("当前月份已关闭，禁止操作！");
      }
      if (item.nextmonth) {
        Message.error("当前月份未开启，禁止操作！");
      }
    },
    //弹框
    isShow(str, id, timeFnd, DaytimeFn) {
      let _this = this;
      if (str == 1) {
        if ((timeFnd < -4 && DaytimeFn <= 0) || DaytimeFn < 0) {
          _this.isApporTeacher = true;
          this.HaveTeacherList.teacherName = "";
          this.HaveTeacherList.Teacherid = id;
          this.GetFindHaveTeacherListInfo();
        } else {
          Message.error("请提前4小时开始排班,当前时间已关闭不可操作!");
        }
      }
    },
    AddeacherTeam() {
      this.isSelected = true;
    },
    selectTip(item) {
      this.filters.OptionsValue = item.str;
      this.selecttitlepag = item.label;
      this.gardeListDown = false;
      this.GetFindCalendarListInfo();
    },
    selectTipage(item) {
      this.filters.gradesValue = item.str;
      this.selecttitleage = item.label;
      this.gardeListDownage = false;
      this.GetFindCalendarListInfo();
    },
    selectStyle1() {
      this.gardeListDownage = true;
    },
    outStyle1() {
      this.gardeListDownage = false;
    },
    selectStyle() {
      this.gardeListDown = true;
    },
    outStyle() {
      this.gardeListDown = false;
    },
    choiceclass() {
      this.gardeListDown = true;
    },
    SearchNoHaveTeacher() {
      this.GetFindNoHaveTeacherListInfo();
    },
    // 添加老师勾选数组
    async DetetaiOrAddeacherTeam(item, type) {
      if (type == 1) {
        const index = this.teacherIds.indexOf(item.teacherId);
        if (index > -1) {
          this.teacherIds.splice(index, 1);
        }
        //   item.dateList.isOpen = 1
        // this.$set(this.setCalendarList.dateList, Setindex, item);
      }
      if (type == 2) {
        const index = this.teacherIds.indexOf(item.teacherId);
        if (index == -1) {
          this.teacherIds.push(item.teacherId);
        }
        console.log(this.teacherIds);
        //   item.dateList.isOpen = 0
        // this.$set(this.setCalendarList.dateList, Setindex, item);
      }
    },
    // 获取校区管理员排班表
    async GetFindCalendarListInfo() {
      // this.gridData = []
      this.$store.dispatch("GetFindCalendarList", {
        type: this.filters.OptionsValue,
        subject: this.filters.gradesValue,
        month: ""
      });
    },
    // 选中时段老师列表
    async GetFindHaveTeacherListInfo() {
      this.$store.dispatch("GetFindHaveTeacherList", {
        id: this.HaveTeacherList.Teacherid,
        teacherName: this.HaveTeacherList.teacherName
      });
    },
    // 未选时段老师列表(添加老师)
    async GetFindNoHaveTeacherListInfo() {
      this.$store.dispatch("GetFindNoHaveTeacherList", {
        id: this.HaveTeacherList.Teacherid,
        teacherName: this.NoHaveTeacherList.teacherName
      });
    },
    // 时段添加老师
    async GetAddArrangeByTeacherStatus() {
      // debugger
      this.AddTeacherModel = false;
      this.$store.dispatch("GetAddArrangeByTeacher", {
        id: this.HaveTeacherList.Teacherid,
        teacherIds: this.teacherIds
      });
    },
    // 时段移除老师
    detailTeacherTeam(item) {
      this.DetailteacherName = item.teacherName;
      this.isApporTeacher = false;
      this.hiddenModel = true;
      this.detetaiTeacherid = item.teacherId;
    },
    // 移除老师
    DetetaiApplyOperate() {
      this.hiddenModel = false;
      this.$store.dispatch("GetDeleteArrangeByTeacher", {
        id: this.HaveTeacherList.Teacherid,
        teacherId: this.detetaiTeacherid
      });
    },
    showAddTeacherModel() {
      this.isApporTeacher = false;
      this.AddTeacherModel = true;
      this.teacherIds = [];
      this.NoHaveTeacherList.teacherName = "";
      this.GetFindNoHaveTeacherListInfo();
    },
    SearchFindHaveTeacher() {
      this.GetFindHaveTeacherListInfo();
    },
    // 日期处理
    Datainit() {
      // 初始化当前时间
      this.setCurrent();
      this.calendarCreator();
    },
    // 切换下月当月排班表
    shoeNextOrlastMOntlist(str) {
      if (str == 1) {
        this.$store.dispatch("NextOrNewMonthAction", {
          NextOrNewMonthStatus: true
        });
      }
    },
    // 判断当前月有多少天
    getDaysByMonth(year, month) {
      return new Date(year, month + 1, 0).getDate();
    },
    getFirstDayByMonths(year, month) {
      return new Date(year, month, 1).getDay();
    },
    getLastDayByMonth(year, month) {
      return new Date(year, month + 1, 0).getDay();
    },
    // 对小于 10 的数字，前面补 0
    pad(str) {
      return str < 10 ? `0${str}` : str;
    },
    // 点击上一月
    prevMonth() {
      this.current.month--;
      // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
      this.correctCurrent();
      // 生成新日期
      this.calendarCreator();
    },
    // 点击下一月
    nextMonth() {
      this.current.month++;
      // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
      this.correctCurrent();
      // 生成新日期
      this.calendarCreator();
    },
    // 格式化时间，与主逻辑无关
    stringify(year, month, date) {
      let str = [year, this.pad(month + 1), this.pad(date)].join("-");
      return str;
    },
    // 排班点击
    classSet(k, d, m, intervalList) {
      // console.log(k,d,m)
      //  this.gridData = [];
      this.month = m + 1;
      this.today = d;
      for (var i in this.calendarList) {
        this.calendarList[i].status = false;
      }
      this.calendarList[k].status = !this.calendarList[k].status;
      this.gridData = intervalList;
    },
    // 设置或初始化 current
    setCurrent(d = new Date()) {
      let year = d.getFullYear();
      let month = d.getMonth();
      let date = d.getDate();
      this.current = {
        year,
        month,
        date
      };
    },
    // 修正 current
    correctCurrent() {
      let { year, month, date } = this.current;

      let maxDate = this.getDaysByMonth(year, month);
      // 预防其他月跳转到2月，2月最多只有29天，没有30-31
      date = Math.min(maxDate, date);

      let instance = new Date(year, month, date);
      this.setCurrent(instance);
    },
    // 生成日期
    calendarCreator() {
      // 一天有多少毫秒
      const oneDayMS = 24 * 60 * 60 * 1000;

      let list = [];
      let setList = [];
      let { year, month } = this.current;

      // 当前月份第一天是星期几, 0-6
      let firstDay = this.getFirstDayByMonths(year, month);
      // 填充多少天
      let prefixDaysLen = firstDay === 0 ? 6 : firstDay - 1;
      // 毫秒数
      let begin = new Date(year, month, 1).getTime() - oneDayMS * prefixDaysLen;

      // 当前月份最后一天是星期几, 0-6
      let lastDay = this.getLastDayByMonth(year, month);
      // 填充多少天， 和星期的排放顺序有关
      let suffixDaysLen = lastDay === 0 ? 0 : 7 - lastDay;
      // 毫秒数
      let end =
        new Date(year, month + 1, 0).getTime() + oneDayMS * suffixDaysLen;
      // 计算今天几号
      let today = new Date().getDate();
      // 饱和度
      // console.log(today)
      while (begin <= end) {
        // 享元模式，避免重复 new Date
        this.shareDate.setTime(begin);
        let year = this.shareDate.getFullYear();
        let curMonth = this.shareDate.getMonth();
        let date = this.shareDate.getDate();
        // console.log(FindCalendarList)
        //  ||  date < today
        // 排班
        list.push({
          year: year,
          month: curMonth,
          date: date,
          disable: curMonth !== month,
          status: false,
          pastDay: date < today && curMonth == month,
          value: this.stringify(year, curMonth, date)
        });
        // 排班设置
        setList.push({
          year: year,
          month: curMonth,
          date: date,
          status: false,
          disable: curMonth !== month,
          value: this.stringify(year, curMonth, date)
        });
        begin += oneDayMS;
      }
      var that = this;
      for (let i = 0; i < list.length; i++) {
        if (!list[i].disable) {
          const dateValue = list[i].value;
          for (let t = 0; t < that.FindCalendarList.list.length; t++) {
            if (dateValue == that.FindCalendarList.list[t].arrangeDate) {
              list[i].dateList = that.FindCalendarList.list[t];
            }
          }
        } else {
          list[i].dateList = {};
        }
      }
      this.calendarList = list;
      this.setCalendarList = setList;
    }
  },
  created() {
    this.GetFindCalendarListInfo();
  },
  mounted() {
    this.$store.dispatch("NextOrNewMonthAction", {
      NextOrNewMonthStatus: false
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
caption,
th {
  text-align: center !important;
}
.is-selected {
  color: #1989fa;
}
.main {
  background-color: #fff;
  margin: 16px;
  padding: 0 !important;
  min-height: 1480px;
}
.selectBox {
  position: relative;
  float: left;
  display: inline-block;
}
.date-btn-active {
  background: rgba(114, 151, 255, 0.3);
  border: none;
  cursor: pointer;
  margin-top: 10px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  color: #fff;
}
.date-time-active {
  color: #e5e5e5;
}
/* .date-btn-active {
  background: rgba(114, 151, 255, 0.3);
  border: none;  
  cursor: pointer;
} */
.Ageclass {
  display: inline-block;
  height: 40px;
  width: 160px;
  background-color: #f1f2f4;
  line-height: 40px;
  font-size: 16px;
  cursor: pointer;
}
.class-download {
  background-color: #fff;
  width: 160px;
  z-index: 999999;
  position: absolute;
  border: 1px solid #e0dddd;
  border-radius: 5px;
  top: 58px;
}
.class-download ul li {
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  color: #b6b6b6;
}
.class-download ul li:hover {
  background-color: #52cc60;
  color: #ffff;
}
.teach-block {
  display: inline-block;
}
.teach-block1 {
  display: inline-block;
  width: 100%;
}
.miniorteach-Allot {
  float: left;
  width: 280px;
  position: relative;
  height: 40px;
  top: 15px;
}
.miinorSeachIcon {
  position: absolute;
  font-size: 20px;
  color: #b6b6b6;
  right: 5%;
  margin-top: 10px;
  cursor: pointer;
}
.miniorinput-with-Allot {
  border: #b6b6b6;
  border-radius: 5px;
  height: 40px;
  width: 280px;
  font-size: 8px;
  color: #b6b6b6;
  text-align: left;
  line-height: 40px;
  background: #f1f2f4;
  padding: 0 10px;
  float: left;
  outline: none !important;
  box-shadow: none;
}
.age-tip {
  width: 80%;
  height: 40px;
  color: #747070;
  font-size: 12px;
}
* {
  margin: 0;
  padding: 0;
}

.canlender {
  width: 1500px;
  height: 400px;
  margin: 0 auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #e5e5e5;
}

table.bgtable thead tr th {
  height: 20px;
  text-align: center;
  background-color: #f9f9f9;
  border: 1px solid #e5e5e5;
  cursor: pointer;
}

table.bgtable tbody tr td {
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  text-align: center;
  vertical-align: top;
  font-weight: 700;
  cursor: pointer;
}
table.bgtable tbody tr td.gray {
  color: rgb(175, 166, 166);
  /* visibility:hidden; */
  background: #ffff;
}
.number {
  width: 100%;
  height: 100px;
}
.number .numberItem {
  width: 100%;
  height: 30px;
}
.number .numberItem span {
  display: inline-block;
  width: 40px;
  height: 30px;
  /* background-color: #FF6465; */
  border-radius: 10px;
}
.showModel {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 3000;
  color: #fff;
}
.model {
  z-index: 10000;
  height: auto;
  position: fixed;
  left: 30%;
  margin: auto;
  background: #fff;
  border-radius: 10px;
  text-align: center;
  min-width: 450px !important;
  padding: 20px;
}
.grayRed {
  color: #ff6465;
}
.grayRedBoder {
  color: #fff;
  background-color: #ff6465;
  height: 30px;
  width: 40px;
  display: inline-block;
  border-radius: 15px;
  line-height: 30px;
}
.model-text {
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
}
.model-text-head {
  padding: 0 !important;
  display: flex;
  color: #393939;
  font-size: 24px;
  justify-content: space-between;
}
.table-heads1 {
  margin-left: 150px !important;
  width: 80%;
  font-weight: 700;
  color: #393939 !important;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.table-heads2 {
  background-color: #fff;
  margin-left: 110px;
  width: 80%;
  font-weight: 700;
  color: #393939 !important;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.table-heads1 > div {
  width: 30%;
}
.BgcColor {
  background-color: #f7fbfc;
}
.tr-secon1 {
  font-size: 12px;
  text-align: center;
  word-wrap: break-word;
  width: 20%;
  line-height: 50px;
}
.tr-secon {
  font-size: 12px;
  text-align: center;
  word-wrap: break-word;
  width: 60px;
  line-height: 50px;
}
.tr-sw100 {
  width: 13%;
  text-align: center;
}
.tr-sw200 {
  width: 13%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px;
  line-height: 25px;
}
.width120 {
  width: 200px;
}
.tr-sw80 {
  width: 120px;
  text-align: center;
}
.width140 {
  width: 140px !important;
}
.width400 {
  width: 350px;
  padding: 10px;
  text-align: right !important;
}
.tiplog {
  height: 100px;
  width: 200px;
  padding: 15px;
  margin: 30px;
  font-size: 25px;
  font-weight: 700;
  margin: 0 auto;
}
.Buttonhole {
  cursor: pointer;
  margin-top: 10px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  background-color: #7297ff;
  color: #fff;
}
.NoButtonhole {
  cursor: pointer;
  margin-top: 10px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  color: #fff;
}
.table-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  /* margin-left: 14px; */
  cursor: pointer;
}
.teach-block1 {
  display: inline-block;
  width: 100%;
}
.Dayteach-Allot {
  width: 260px;
  position: relative;
  height: 40px;
  top: 15px;
  display: inline-block;
}
.Dayteach-Allot1 {
  display: inline-block;
  width: 30%;
  float: left;
  position: relative;
  height: 30px;
  top: 5px;
}
.selectTeacher {
  font-size: 12px;
  text-align: left;
  font-weight: 700;
  width: 160px;
  color: #7297ff;
  /* margin-top: 10px; */
}
.tiplogslogn {
  display: inline-block;
  float: right;
  margin-top: 0px;
  height: 30px;
  margin-right: 20px;
}
.tr-slogn {
  display: inline-block;
  margin-right: 30px;
  font-size: 12px;
  text-align: left;
  float: left;
  font-weight: 700;
}
.tr-slogn1 {
  display: inline-block;
  margin-right: 10px;
  font-size: 12px;
  text-align: left;
  float: left;
  font-weight: 700;
}
.Daylog {
  font-size: 16px;
  color: #7297ff;
  height: 40px;
  display: inline-block;
}
.DaySeachIcon {
  position: absolute;
  font-size: 20px;
  color: #b6b6b6;
  right: 15%;
  margin-top: 10px;
  cursor: pointer;
}
.Dayinput-with-Allot {
  border: #b6b6b6;
  border-radius: 20px;
  height: 40px;
  width: 260px;
  font-size: 8px;
  color: #b6b6b6;
  text-align: left;
  line-height: 40px;
  background: #f1f2f4;
  padding: 0 10px;
  float: left;
  outline: none !important;
  box-shadow: none;
}
.Dayinput-with-Allot1 {
  margin-top: 20px;
  border: #b6b6b6;
  border-radius: 20px;
  height: 30px;
  width: 200px;
  font-size: 8px;
  color: #b6b6b6;
  text-align: left;
  line-height: 30px;
  background: #f1f2f4;
  padding: 0 10px;
  float: left;
  outline: none !important;
  box-shadow: none;
}
.abbTeachers {
  width: 100%;
  height: 40px;
  background-color: #f6f7fb;
  border-radius: 20px;
  text-align: left;
  line-height: 30px;
  font-size: 14px;
  padding: 0 20px;
  margin: 10px 0px;
  cursor: pointer;
}
.addLogicon {
  font-size: 30px;
  color: #1989fa;
  margin: 0px 20px;
}
.scrollBox {
  height: 400px;
  overflow: auto;
  padding: 0 15px;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px; /*滚动条宽度*/
  height: 15px; /*滚动条高度*/
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  background-color: #fff; /*滚动条的背景颜色*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px; /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
  background-color: #bcbaba; /*滚动条的背景颜色*/
}
.btsnius {
  width: 100%;
  height: 60px;
}
.yesBtn {
  margin-right: 30px;
  height: 40px;
  width: 100px;
  background-color: #52cc60;
  border-radius: 10px;
  color: #fff;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}
.closeBtn {
  height: 40px;
  width: 100px;
  background-color: #fff;
  border-radius: 10px;
  color: #52cc60;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  border: 1px solid #52cc60;
  cursor: pointer;
}
.model-grdeen {
  background-color: #52cc60;
  color: #fff;
}
.model-text-items-close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: -5px;
}
.model-text-items {
  position: relative;
  color: #000000;
  font-size: 24px;
  text-align: center;
  padding: 40px 0 50px 0;
  margin: 0 33px;
}
.model-btn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 44px;
  cursor: pointer;
}
.model-btn-items {
  width: 154px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  border-radius: 4px;
}
.main-gay {
  background: rgba(246, 247, 251, 1);
  color: #7e7e7e;
}
.Littleicon {
  height: 20px;
  width: 20px;
  position: relative;
  top: 0;
}
.date {
  margin-top: 68px;
}
.calendar-week {
  border: 1px solid #e5e5e5;
  text-align: center;
  border-right: none;
  display: flex;
}
.week-item {
  display: inline-block;
  background: #f9f9f9;
  width: 14.28%;
  border-right: 1px solid #e5e5e5;
}
.calendar-inner {
  border-left: 1px solid #e5e5e5;
}
.calendar-item {
  cursor: pointer;
  float: left;
  width: 14.28%;
  height: 130px;
  line-height: 130px;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}
.day-setting {
  height: 130px;
  line-height: 130px;
}
.calendar-item.disabled {
  /* color: rgba(0, 0, 0, 0.3); */
  color: #ffff;
}
.psatchecked {
  color: rgba(0, 0, 0, 0.3);
  opacity: 0.5;
}
.checked {
  background: #f6f7fb;
}
.date-day {
  font-size: 16px;
  line-height: 60px;
  color: #aaa;
}
.num-red {
  background: rgba(255, 100, 101, 1);
  border-radius: 9px;
  color: #fff;
}
.people {
  display: flex;
  justify-content: space-around;
  font-size: 14px;
}
.people-items {
  display: inline-block;
  line-height: 70px;
  margin-top: 10px;
}
.people-items-num {
  line-height: 15px;
  padding: 3px 8px;
}
.people-items-text {
  line-height: 30px;
  font-size: 14px;
  font-weight: normal;
}
.NextMonthList {
  float: right;
  cursor: pointer;
  margin-top: 20px;
  width: 250px;
  height: 40px;
  border-radius: 20px;
  line-height: 40px;
  background-color: #e7f3ff;
  color: #7297ff;
  font-size: 12px;
}
.NextMonthListMax {
  float: right;
  cursor: pointer;
  margin-top: 20px;
  width: 300px;
  height: 40px;
  border-radius: 20px;
  line-height: 40px;
  background-color: #e7f3ff;
  color: #7297ff;
  font-size: 12px;
}
</style>