|
|
@@ -53,89 +53,133 @@
|
|
|
<h1 class="tiplog">{{this.month}}月排班情况</h1>
|
|
|
<div class="canlender" id="canlender">
|
|
|
<div class="tablebox1">
|
|
|
- <table class="bgtable">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <!--汉字表头-->
|
|
|
- <th class="headTip" v-for="(item,index) in daynamearr" :key="index">
|
|
|
- <span :class="{'grayRed': item == '周六' || item == '周日'}">{{item}}</span>
|
|
|
- </th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr v-for="(week,index1) in theweek()" :key="index1">
|
|
|
- <!-- {{week}} -->
|
|
|
- <td
|
|
|
- @click="showdetailModel(item)"
|
|
|
- v-for="(item,index2) in week"
|
|
|
- :key="index2"
|
|
|
- :class="{'gray': item.prevmonth || item.nextmonth}"
|
|
|
- >
|
|
|
- {{item.day}}
|
|
|
- <!-- :class="{'gray': item.prevmonth || item.nextmonth}" -->
|
|
|
- <!-- <div class="number"> <span>13</span> <span>21</span> <span>12</span></div> -->
|
|
|
- <div class="number">
|
|
|
- <div class="numberItem">
|
|
|
- <span>14</span>
|
|
|
- <span>23</span>
|
|
|
- <span>33</span>
|
|
|
- </div>
|
|
|
- <div class="numberItem">
|
|
|
- <span>最少</span>
|
|
|
- <span>饱和</span>
|
|
|
- <span>已选</span>
|
|
|
+ <div class="date">
|
|
|
+ <div class="calendar-week">
|
|
|
+ <div class="week-item" v-for="item of weekList" :key="item">{{ item }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="calendar-inner">
|
|
|
+ <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="[scope.$index == 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="[scope.$index == 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="[scope.$index == 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="[scope.$index == 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="[scope.$index == 0?'date-btn-active':'Buttonhole']"
|
|
|
+ @click="isShow(1,scope.row.id)"
|
|
|
+ >排班</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div
|
|
|
+ slot="reference"
|
|
|
+ @click="classSet(index,item.date,item.month,item.dateList.intervalList)"
|
|
|
+ :class="[item.status ? 'checked' : '']"
|
|
|
+ class="day-setting"
|
|
|
+ >
|
|
|
+ <!-- {{FindCalendarList}} -->
|
|
|
+ <div class="date-day">{{ item.date }}</div>
|
|
|
+ <div class="people">
|
|
|
+ <div class="people-items">
|
|
|
+ <div class="people-items-num">{{item.dateList.miniNum}}</div>
|
|
|
+ <div class="people-items-text">最少</div>
|
|
|
+ </div>
|
|
|
+ <div class="people-items">
|
|
|
+ <div class="people-items-num">{{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>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
- <!-- 排班设置弹框 -->
|
|
|
- <div class="showModel" @click="allShowModel(2)" v-if="isPigai"></div>
|
|
|
- <div class="model" style="width:30%; top:30%;" v-if="isPigai">
|
|
|
- <div class="model-text">
|
|
|
- <div class="model-text-head">
|
|
|
- <div>{{this.month}}月{{this.NewDay}}日</div>
|
|
|
- <div>
|
|
|
- <img src="../assets/img/del@2x.png" alt @click="allShowModel(2)" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="tr-set table-heads1">
|
|
|
- <div class="tr-secon">最少</div>
|
|
|
- <div class="tr-secon">饱和</div>
|
|
|
- <div class="tr-secon">已选</div>
|
|
|
- </div>
|
|
|
- <div class="tr-set">
|
|
|
- <div class="tr-secon width140">10:10-12:00</div>
|
|
|
- <div class="tr-secon width140">10</div>
|
|
|
- <div class="tr-secon tr-sw80">13</div>
|
|
|
- <div class="tr-secon tr-sw80" style="color:#7297FF">554</div>
|
|
|
- <div class="Buttonhole" @click="isShow()">排班</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<!-- 添加移除老师弹框 -->
|
|
|
<div class="showModel" @click="allShowModel(3)" v-if="isApporTeacher"></div>
|
|
|
<div class="model" style="width:30%; top:10%;" v-if="isApporTeacher">
|
|
|
<div class="model-text">
|
|
|
<div class="model-text-head">
|
|
|
- <div>{{this.month}}月{{this.NewDay}}日</div>
|
|
|
<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="inputValue"
|
|
|
+ v-model="HaveTeacherList.teacherName"
|
|
|
class="Dayinput-with-Allot"
|
|
|
/>
|
|
|
- <span class="DaySeachIcon el-icon-search"></span>
|
|
|
+ <span @click="SearchFindHaveTeacher()" style="right:10%;" class="DaySeachIcon el-icon-search"></span>
|
|
|
+ </div>
|
|
|
+ <div style="font-size:12px;text-align:left;font-weight:700;margin-bottom:10px;">
|
|
|
+ <span class="tr-slogn">最少:{{FindHaveTeacherList.arrangeDetail.miniNum}}</span>
|
|
|
+ <span class="tr-slogn">最多:{{FindHaveTeacherList.arrangeDetail.haveNum}}</span>
|
|
|
+ <span class="tr-slogn">饱和:{{FindHaveTeacherList.arrangeDetail.miniNum}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
@@ -154,23 +198,23 @@
|
|
|
<span class="addLogicon">+</span> 添加老师
|
|
|
</div>
|
|
|
<div class="scrollBox">
|
|
|
- <div class="tr-set">
|
|
|
- <div>
|
|
|
- <!-- <img :src="BASE_URL + v.imgUrl" alt class="table-img" @click="isShow(v,3)" /> -->
|
|
|
- <img src="../assets/img/attt.png" alt class="table-img" />
|
|
|
+ <div class="tr-set" 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 width140">程歌</div>
|
|
|
- <div class="tr-secon width140">数学</div>
|
|
|
- <div class="tr-secon width140">100%</div>
|
|
|
- <div class="tr-secon tr-sw80">13%</div>
|
|
|
- <div class="tr-secon tr-sw80" style="color:#7297FF">55</div>
|
|
|
- <div class="Buttonhole" @click="detailTeacherTeam()">移除</div>
|
|
|
+ <div class="tr-secon">{{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="Buttonhole" @click="detailTeacherTeam(item)">移除</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="btsnius">
|
|
|
+ <!-- <div class="btsnius">
|
|
|
<div class="yesBtn">确定</div>
|
|
|
<div class="closeBtn">取消</div>
|
|
|
- </div>
|
|
|
+ </div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -190,7 +234,7 @@
|
|
|
<div>是否确定将{{name}}老师移除？</div>
|
|
|
</div>
|
|
|
<div class="model-btn">
|
|
|
- <div class="model-btn-items main-gay" @click="ApplyOperate()">是</div>
|
|
|
+ <div class="model-btn-items main-gay" @click="DetetaiApplyOperate()">是</div>
|
|
|
<div class="model-btn-items model-grdeen" @click="allShowModel(1)">否</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -200,24 +244,30 @@
|
|
|
<div class="model" style="width:30%; top:10%;" v-if="AddTeacherModel">
|
|
|
<div class="model-text">
|
|
|
<div class="model-text-head">
|
|
|
- <div>选择老师</div>
|
|
|
+ <div class="selectTeacher">选择老师</div>
|
|
|
<div class="teach-block">
|
|
|
- <div class="Dayteach-Allot">
|
|
|
+ <div class="Dayteach-Allot1">
|
|
|
<input
|
|
|
type="text"
|
|
|
placeholder="请输入老师名字"
|
|
|
- v-model="inputValue"
|
|
|
+ v-model="NoHaveTeacherList.teacherName"
|
|
|
class="Dayinput-with-Allot"
|
|
|
/>
|
|
|
- <span class="DaySeachIcon el-icon-search"></span>
|
|
|
+ <span @click="SearchNoHaveTeacher()" style="right:40%;" class="DaySeachIcon el-icon-search"></span>
|
|
|
</div>
|
|
|
+ <span
|
|
|
+ style="font-size:12px;text-align:left;font-weight:700"
|
|
|
+ class="tr-slogn"
|
|
|
+ >最少:{{FindNoHaveTeacherList.arrangeDetail.miniNum}}</span>
|
|
|
+ <span class="tr-slogn">饱和:{{FindNoHaveTeacherList.arrangeDetail.maxNum}}</span>
|
|
|
+ <span class="tr-slogn">已选:{{FindNoHaveTeacherList.arrangeDetail.haveNum}}</span>
|
|
|
</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-set table-heads3">
|
|
|
<div class="tr-secon1">老师</div>
|
|
|
<div class="tr-secon1">科目</div>
|
|
|
<div class="tr-secon1">出勤率</div>
|
|
|
@@ -225,24 +275,26 @@
|
|
|
<div class="tr-secon1">当月已选时段</div>
|
|
|
</div>
|
|
|
<div class="scrollBox">
|
|
|
- <div class="tr-set">
|
|
|
- <div>
|
|
|
- <!-- <img :src="BASE_URL + v.imgUrl" alt class="table-img" @click="isShow(v,3)" /> -->
|
|
|
- <img src="../assets/img/attt.png" alt class="table-img" />
|
|
|
+ <div class="tr-set" 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 width140">程歌</div>
|
|
|
- <div class="tr-secon width140">数学</div>
|
|
|
- <div class="tr-secon width140">100%</div>
|
|
|
- <div class="tr-secon tr-sw80">13%</div>
|
|
|
- <div class="tr-secon tr-sw80" style="color:#7297FF">55</div>
|
|
|
- <div class="Selectradius" @click="AddeacherTeam()">
|
|
|
+ <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
|
|
|
- v-if="this.isSelected ==false"
|
|
|
+ @click="DetetaiOrAddeacherTeam(item,2)"
|
|
|
+ v-if="teacherIds.indexOf(item.teacherId) == -1"
|
|
|
class="Littleicon"
|
|
|
src="../assets/img/normal.png"
|
|
|
/>
|
|
|
<img
|
|
|
- v-if="this.isSelected ==true"
|
|
|
+ @click="DetetaiOrAddeacherTeam(item,1)"
|
|
|
+ v-if="teacherIds.indexOf(item.teacherId) != -1"
|
|
|
class="Littleicon"
|
|
|
src="../assets/img/correct -hint.png"
|
|
|
/>
|
|
|
@@ -250,8 +302,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="btsnius">
|
|
|
- <div class="yesBtn">确定</div>
|
|
|
- <div class="closeBtn">取消</div>
|
|
|
+ <div @click="GetAddArrangeByTeacherStatus()" class="yesBtn">确定</div>
|
|
|
+ <div @click="allShowModel(4)" class="closeBtn">取消</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -261,44 +313,61 @@
|
|
|
<script>
|
|
|
import { mapGetters, mapActions } from "vuex";
|
|
|
import { Message } from "element-ui";
|
|
|
+import { IMG_BASE_URL } from "@/ImgConfig";
|
|
|
export default {
|
|
|
name: "model",
|
|
|
components: {},
|
|
|
props: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- daynamearr: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
|
|
+ weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
|
|
//本月的本期构成
|
|
|
+ BASE_URL: IMG_BASE_URL,
|
|
|
dayarr: [],
|
|
|
year: new Date().getFullYear(),
|
|
|
D: new Date().getDate() + " ",
|
|
|
- month: new Date().getMonth() + 1,
|
|
|
+ // month: new Date().getMonth() + 1,
|
|
|
NewDay: "",
|
|
|
gardeListDownage: false,
|
|
|
gardeListDown: false,
|
|
|
selecttitlepag: "选年级",
|
|
|
selecttitleage: "选科目",
|
|
|
+ teacherIds: [],
|
|
|
inputValue: "",
|
|
|
isSelected: false,
|
|
|
isPigai: false,
|
|
|
+ detetaiTeacherid: [],
|
|
|
isApporTeacher: false, //移除添加老师
|
|
|
hiddenModel: false, //移除弹框
|
|
|
AddTeacherModel: false, //添加老师弹框
|
|
|
+ current: {}, // 当前时间
|
|
|
+ calendarList: [], // 排班列表
|
|
|
+ setCalendarList: [], // 排班设置列表
|
|
|
+ shareDate: new Date(), // 享元模式，用来做优化的
|
|
|
+ month: "",
|
|
|
+ today: "",
|
|
|
filters: {
|
|
|
- OptionsValue: "",
|
|
|
- gradesValue: "",
|
|
|
+ OptionsValue: 8,
|
|
|
+ gradesValue: "语文",
|
|
|
inputValue: ""
|
|
|
},
|
|
|
+ HaveTeacherList: {
|
|
|
+ Teacherid: "",
|
|
|
+ teacherName: ""
|
|
|
+ },
|
|
|
+ NoHaveTeacherList: {
|
|
|
+ teacherName: ""
|
|
|
+ },
|
|
|
options: [
|
|
|
{
|
|
|
value: "0",
|
|
|
label: "匹配知识点",
|
|
|
- str: "匹配知识点"
|
|
|
+ str: "13"
|
|
|
},
|
|
|
{
|
|
|
value: "1",
|
|
|
label: "批改老师",
|
|
|
- str: "批改老师"
|
|
|
+ str: "8"
|
|
|
},
|
|
|
{
|
|
|
value: "2",
|
|
|
@@ -332,7 +401,13 @@ export default {
|
|
|
},
|
|
|
watch: {},
|
|
|
computed: {
|
|
|
- ...mapGetters(["UnallotHomeworkInfo","DeleteArrangeByTeacher"])
|
|
|
+ ...mapGetters([
|
|
|
+ "UnallotHomeworkInfo",
|
|
|
+ "DeleteArrangeByTeacher",
|
|
|
+ "FindCalendarList",
|
|
|
+ "FindHaveTeacherList",
|
|
|
+ "FindNoHaveTeacherList"
|
|
|
+ ])
|
|
|
},
|
|
|
methods: {
|
|
|
//关闭弹框
|
|
|
@@ -364,17 +439,13 @@ export default {
|
|
|
Message.error("当前月份未开启，禁止操作！");
|
|
|
}
|
|
|
},
|
|
|
- showAddTeacherModel() {
|
|
|
- this.isApporTeacher = false;
|
|
|
- this.AddTeacherModel = true;
|
|
|
- this.AddTeacherInfoList()
|
|
|
- },
|
|
|
- isShow() {
|
|
|
- this.isApporTeacher = true;
|
|
|
- },
|
|
|
- detailTeacherTeam() {
|
|
|
- this.isApporTeacher = false;
|
|
|
- this.hiddenModel = true;
|
|
|
+ isShow(str, id) {
|
|
|
+ let _this = this;
|
|
|
+ if (str == 1) {
|
|
|
+ _this.isApporTeacher = true;
|
|
|
+ this.HaveTeacherList.Teacherid = id;
|
|
|
+ this.GetFindHaveTeacherListInfo();
|
|
|
+ }
|
|
|
},
|
|
|
AddeacherTeam() {
|
|
|
this.isSelected = true;
|
|
|
@@ -406,80 +477,233 @@ export default {
|
|
|
choiceclass() {
|
|
|
this.gardeListDown = true;
|
|
|
},
|
|
|
- // 移除老师
|
|
|
- async ApplyOperate() {
|
|
|
- this.$store.dispatch("GetDeleteArrangeByTeacher", {
|
|
|
- id: "",
|
|
|
- teacherId:""
|
|
|
- });
|
|
|
- },
|
|
|
- AddTeacherInfoList(){
|
|
|
- this.$store.dispatch("GetDeleteArrangeByTeacher", {
|
|
|
- id: "",
|
|
|
- teacherId:""
|
|
|
- });
|
|
|
+ // 添加老师勾选数组
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ // item.dateList.isOpen = 0
|
|
|
+ // this.$set(this.setCalendarList.dateList, Setindex, item);
|
|
|
+ }
|
|
|
},
|
|
|
- // 获取校区管理员监控数据
|
|
|
+ // 获取校区管理员排班表
|
|
|
async GetFindCalendarListInfo() {
|
|
|
this.$store.dispatch("GetFindCalendarList", {
|
|
|
type: this.filters.OptionsValue,
|
|
|
subject: this.filters.gradesValue
|
|
|
});
|
|
|
},
|
|
|
- theweek: function() {
|
|
|
- var _arr = [];
|
|
|
- for (var i = 0; i < 6; i++) {
|
|
|
- var _week = [];
|
|
|
- for (var j = 0; j < 7; j++) {
|
|
|
- _week.push(this.dayarr[i * 7 + j]);
|
|
|
- }
|
|
|
- _arr.push(_week);
|
|
|
- }
|
|
|
- return _arr;
|
|
|
+ // 选中时段老师列表
|
|
|
+ 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() {
|
|
|
+ this.$store.dispatch("GetAddArrangeByTeacher", {
|
|
|
+ id: this.HaveTeacherList.Teacherid,
|
|
|
+ teacherIds: this.teacherIds
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 时段移除老师
|
|
|
+ detailTeacherTeam(item) {
|
|
|
+ this.isApporTeacher = false;
|
|
|
+ this.hiddenModel = true;
|
|
|
+ this.detetaiTeacherid = item.teacherId;
|
|
|
},
|
|
|
+ // 移除老师
|
|
|
+ DetetaiApplyOperate() {
|
|
|
+ this.$store.dispatch("GetDeleteArrangeByTeacher", {
|
|
|
+ id: this.HaveTeacherList.Teacherid,
|
|
|
+ teacherId: this.detetaiTeacherid
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showAddTeacherModel() {
|
|
|
+ this.isApporTeacher = false;
|
|
|
+ this.AddTeacherModel = true;
|
|
|
+ this.GetFindNoHaveTeacherListInfo();
|
|
|
+ },
|
|
|
+ // 日期处理
|
|
|
Datainit() {
|
|
|
- //需要知道这个月的第一天是星期几
|
|
|
- var themonth1stday = new Date(this.year, this.month - 1, 1).getDay();
|
|
|
- console.log(themonth1stday);
|
|
|
- // alert(themonth1stday)
|
|
|
- //本月有多少天，这个月的最后一天就是下个月的最后一天减去一毫秒
|
|
|
- var y = this.month == 12 ? this.year + 1 : this.year;
|
|
|
- var m = this.month == 12 ? 1 : this.month;
|
|
|
- var themonthdaysamount = new Date(new Date(y, m, 1) - 1).getDate();
|
|
|
- console.log(themonthdaysamount);
|
|
|
- //上个月有多少天
|
|
|
- var prevmonthlastday = new Date(
|
|
|
- new Date(this.year, this.month - 1, 1) - 1
|
|
|
- ).getDate();
|
|
|
- console.log(prevmonthlastday);
|
|
|
- // alert(prevmonthlastday)
|
|
|
- while (themonth1stday-- > 1) {
|
|
|
- this.dayarr.unshift({
|
|
|
- day: prevmonthlastday--,
|
|
|
- prevmonth: true
|
|
|
- });
|
|
|
+ // 初始化当前时间
|
|
|
+ this.setCurrent();
|
|
|
+ this.calendarCreator();
|
|
|
+ },
|
|
|
+ // 判断当前月有多少天
|
|
|
+ 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.month = m + 1;
|
|
|
+ this.today = d;
|
|
|
+ for (var i in this.calendarList) {
|
|
|
+ this.calendarList[i].status = false;
|
|
|
}
|
|
|
- //本月的日期
|
|
|
- var count = 0;
|
|
|
- while (themonthdaysamount--) {
|
|
|
- this.dayarr.push({
|
|
|
- day: ++count
|
|
|
+ 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,
|
|
|
+ value: this.stringify(year, curMonth, date)
|
|
|
});
|
|
|
- }
|
|
|
- var c = 42 - this.dayarr.length;
|
|
|
- var count2 = 1;
|
|
|
- while (c-- > 0) {
|
|
|
- this.dayarr.push({
|
|
|
- day: count2++,
|
|
|
- nextmonth: true
|
|
|
+ // 排班设置
|
|
|
+ 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 + " 00:00:00";
|
|
|
+ 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 = {};
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // for (let i = 0; i < setList.length; i++) {
|
|
|
+ // if (!setList[i].disable) {
|
|
|
+ // const dateValue = setList[i].value;
|
|
|
+ // for (let t = 0; t < that.DutyTemplateListInfo.dayList.length; t++) {
|
|
|
+ // if (dateValue == that.DutyTemplateListInfo.dayList[t].day) {
|
|
|
+ // setList[i].dateList = that.DutyTemplateListInfo.dayList[t];
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // setList[i].dateList = {};
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ this.calendarList = list;
|
|
|
+ this.setCalendarList = setList;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
- this.Datainit();
|
|
|
this.GetFindCalendarListInfo();
|
|
|
+ this.Datainit();
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
@@ -504,6 +728,17 @@ th {
|
|
|
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;
|
|
|
+}
|
|
|
.Ageclass {
|
|
|
display: inline-block;
|
|
|
height: 40px;
|
|
|
@@ -586,6 +821,7 @@ th {
|
|
|
table {
|
|
|
border-collapse: collapse;
|
|
|
width: 100%;
|
|
|
+ border: 1px solid #e5e5e5;
|
|
|
}
|
|
|
|
|
|
table.bgtable thead tr th {
|
|
|
@@ -606,6 +842,7 @@ table.bgtable tbody tr td {
|
|
|
}
|
|
|
table.bgtable tbody tr td.gray {
|
|
|
color: rgb(175, 166, 166);
|
|
|
+ /* visibility:hidden; */
|
|
|
background: #ffff;
|
|
|
}
|
|
|
.number {
|
|
|
@@ -648,7 +885,16 @@ table.bgtable tbody tr td.gray {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
.grayRed {
|
|
|
- color: red;
|
|
|
+ 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);
|
|
|
@@ -743,10 +989,31 @@ table.bgtable tbody tr td.gray {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
.Dayteach-Allot {
|
|
|
- width: 400px;
|
|
|
+ width: 260px;
|
|
|
position: relative;
|
|
|
height: 40px;
|
|
|
top: 15px;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+/* .Dayteach-Allot1 {
|
|
|
+ display: inline-block;
|
|
|
+ width: 200px;
|
|
|
+ position: relative;
|
|
|
+ height: 30px;
|
|
|
+ top: 5px;
|
|
|
+} */
|
|
|
+.tr-slogn {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 30px;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: left;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.Daylog {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #7297ff;
|
|
|
+ height: 40px;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
.DaySeachIcon {
|
|
|
position: absolute;
|
|
|
@@ -760,7 +1027,7 @@ table.bgtable tbody tr td.gray {
|
|
|
border: #b6b6b6;
|
|
|
border-radius: 20px;
|
|
|
height: 40px;
|
|
|
- width: 300px;
|
|
|
+ width: 260px;
|
|
|
font-size: 8px;
|
|
|
color: #b6b6b6;
|
|
|
text-align: left;
|
|
|
@@ -882,4 +1149,66 @@ table.bgtable tbody tr td.gray {
|
|
|
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 {
|
|
|
+ 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: #ffff;
|
|
|
+}
|
|
|
+.checked {
|
|
|
+ background: #f6f7fb;
|
|
|
+}
|
|
|
+.date-day {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 60px;
|
|
|
+ color: #aaa;
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
</style>
|
TheLittlePrince