mteacher/src/views/abnormalCourse/index.vue

<template>
  <div class="abnormalCourse">
    <van-list
      v-model="loading"
      v-if="dataShow"
      :finished="finished"
      finished-text="- 没有更多了 -"
      :immediate-check="false"
      @load="getList"
    >
      <div class="cellList">
        <van-cell-group v-for="(item, index) in list" :key="index">
          <van-cell
            class="titleCell"
            title-style="display: flex;align-item: center"
          >
            <template slot="default">
              <div class="signImgBox">
                <img
                  class="signImg"
                  :src="getSignInIcon(item.isSignIn)"
                  alt=""
                />
              </div>
            </template>
            <template slot="title">
              <div class="classTitleWrap" style="word-break: break-all">
                <span class="teachMode"
                  >{{ item.teachMode == "ONLINE" ? "线上" : null
                  }}{{ item.teachMode == "OFFLINE" ? "线下" : null }}</span
                >
                <span :class="['courseType', item.type]">{{
                  item.type | coursesType
                }}</span>
                <span
                  style="
                    line-height: 1.2;
                    vertical-align: bottom;
                    max-width: 140px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                  >{{ item.name }}</span
                >
                <!-- <img
                  class="teacherModelImg"
                  :src="getTeacherImg(item.teachMode)"
                  alt=""
                />
                <span :class="['courseType', item.type]">{{
                  item.type | coursesType
                }}</span>
                {{ item.name }} -->
              </div>
            </template>
          </van-cell>
          <van-cell>
            <template slot="title">
              <p
                class="studentTitle"
                style="word-break: break-all"
                v-if="item.schoolName"
              >
                上课地点 : &nbsp;{{ item.schoolName }}
              </p>
              <p class="studentTitle" style="word-break: break-all">
                上课学生 : &nbsp;{{ item.studentNames }}
              </p>
              <p
                class="studentTitle"
                style="
                  word-break: break-all;
                  display: flex;
                  align-items: center;
                "
              >
                <img
                  class="clockIcon"
                  style="margin-right: 6px"
                  :src="squrtList.squrt8"
                  alt=""
                />{{
                  item.startClassTime | formatDateExtend("YYYY-MM-DD HH:mm")
                }}-{{
                  item.endClassTime | formatDateExtend("YYYY-MM-DD HH:mm")
                }}
              </p>
            </template>
          </van-cell>
          <van-cell
            style="padding: 0"
            title-class="title-content"
            value-class="value-content"
            :center="true"
          >
            <template slot="title">
              <van-button
                block
                style="border: 0"
                :disabled="
                  item.type == 'VIP' || item.type == 'PRACTICE' ? false : true
                "
                @click="
                  () => {
                    selectDate = item;
                    dataForm.status = true;
                  }
                "
                >课时调整</van-button
              >
              <!-- <div class="chioseWrap"> -->
              <!-- <img class="clockIcon" :src="squrtList.squrt8" alt="" />
                <p class="timer">
                  {{
                    item.startClassTime | formatDateExtend("YYYY-MM-DD HH:mm")
                  }}-{{
                    item.endClassTime | formatDateExtend("YYYY-MM-DD HH:mm")
                  }}
                </p> -->
              <!-- </div> -->
            </template>
            <!-- <template slot="default">
              <van-button type="info" round size="small">课时调整</van-button>
            </template> -->
          </van-cell>
        </van-cell-group>
      </div>
    </van-list>
    <m-empty v-else key="data" />

    <van-popup v-model="dataForm.status" position="bottom" round>
      <van-datetime-picker
        v-model="dataForm.currentDate"
        type="datetime"
        :min-date="dataForm.minDate"
        :max-date="dataForm.maxDate"
        :formatter="formatter"
        @cancel="dataForm.status = false"
        @confirm="onCurrentConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { queryTeacherInfo } from "@/api/app";
import { superFindCourseSchedules, classStartDateAdjust } from "./api";
import dayjs from "dayjs";
import MEmpty from "@/components/MEmpty";
import { browser } from "@/common/common";
export default {
  name: "abnormalCourse",
  components: { MEmpty },
  data() {
    return {
      dataForm: {
        // 时间下拉框
        status: false,
        minDate: new Date(),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
      },
      selectDate: {},
      squrtList: {
        squrt2: require("@/assets/images/squrt2.png"),
        squrt3: require("@/assets/images/squrt3.png"),
        squrt4: require("@/assets/images/squrt4.png"),
        squrt5: require("@/assets/images/squrt5.png"),
        squrt6: require("@/assets/images/squrt6.png"),
        squrt7: require("@/assets/images/squrt7.png"),
        squrt8: require("@/assets/images/squrt8.png"),
      },
      list: [],
      loading: false,
      finished: false,
      params: {
        searchType: "COURSE_TIME_ERROR",
        teacherIdList: "",
        // startTime: "",
        // endTime: "",
        page: 1,
        rows: 20,
      },
      dataShow: true,
    };
  },
  async mounted() {
    document.title = "异常课程";
    await queryTeacherInfo().then((res) => {
      const result = res.data || null;
      this.params.teacherIdList = result.data.id || 0;
    });
    this.getList();
  },
  methods: {
    async getList() {
      try {
        let params = this.params;
        try {
          const res = await superFindCourseSchedules({
            ...params,
          });
          let result = res.data;
          this.loading = false;
          if (params.page > result.pageNo) {
            return;
          }
          params.page = result.pageNo;
          const rows = result.rows;
          this.list = this.list.concat(rows);
          if (params.page >= result.totalPage) {
            this.finished = true;
          }
          this.params.page++;
          // 判断是否有数据
          if (this.list.length <= 0) {
            this.dataShow = false;
          }
        } catch {
          this.finished = true;
          this.dataShow = false;
        }
      } catch {}
      //
    },
    async onCurrentConfirm(value) {
      // 课时调整
      try {
        let selectDate = this.selectDate;
        let startStr =
            "2019/12/18 " + this.getDateInfo(selectDate.startClassTime),
          endStr = "2019/12/18 " + this.getDateInfo(selectDate.endClassTime);
        let startDate = new Date(startStr),
          endDate = new Date(endStr);
        let m = parseInt(
          Math.abs(endDate.getTime() - startDate.getTime()) / 1000 / 60
        );
        let currentStartDate = new Date(value),
          currentEndDate = new Date(value);

        currentEndDate.setMinutes(currentStartDate.getMinutes() + m);
        if (currentStartDate.toDateString() !== currentEndDate.toDateString()) {
          this.$toast("课时调整不允许跨天调整");
          return;
        }
        await classStartDateAdjust({
          actualTeacherId: selectDate.actualTeacherId,
          id: selectDate.id,
          classDate: this.getFormartDate(currentStartDate),
          startClassTimeStr: this.getDateInfo(currentStartDate),
          endClassTimeStr: this.getDateInfo(currentEndDate),
        });
        this.$toast("调整成功");
        setTimeout(() => {
          this.list = [];
          this.params.page = 1;
          this.getList();
          this.dataForm.status = false;
        }, 1000);
      } catch {
        //
      }
    },
    getFormartDate(date) {
      let checkDate = new Date(date);
      let checkDay =
        checkDate.getFullYear() +
        "-" +
        (checkDate.getMonth() + 1) +
        "-" +
        checkDate.getDate();
      return checkDay;
    },
    getDateInfo(value) {
      let tempValue = value;
      if (typeof value !== "object") {
        tempValue = value.replace(/-/gi, "/");
      }
      let d = new Date(tempValue);
      let hour = d.getHours() >= 10 ? d.getHours() : "0" + d.getHours();
      let minute = d.getMinutes() >= 10 ? d.getMinutes() : "0" + d.getMinutes();
      return hour + ":" + minute + ":00";
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      } else if (type === "day") {
        return `${value}日`;
      } else if (type === "hour") {
        return `${value}时`;
      } else if (type === "minute") {
        return `${value}分`;
      }
      return value;
    },
    getSignInIcon(status) {
      if (status == 1) {
        return this.squrtList.squrt3;
      } else if (status == 0) {
        return this.squrtList.squrt5;
      } else {
        return this.squrtList.squrt4;
      }
    },
    getTeacherImg(mode) {
      if (mode == "ONLINE") {
        return this.squrtList.squrt6;
      } else {
        return this.squrtList.squrt7;
      }
    },
  },
};
</script>

<style lang="less">
@import url("../../assets/commonLess/variable.less");
.abnormalCourse {
  min-height: 100vh;
  position: relative;
  background-color: #f3f4f8;
  .van-cell__title {
    // width: 2.58rem;
    -webkit-box-flex: auto;
    -webkit-flex: auto;
    flex: auto;
    font-size: 0.18rem;
    color: #333;
    font-weight: 500;
  }

  .van-icon-underway-o {
    font-size: 0.18rem;
  }
  .van-cell {
    line-height: inherit;
  }
  .van-cell__title {
    font-size: 0.16rem;
    color: @mFontColor;
  }
  .van-cell-group {
    margin-top: 0.05rem;
    border-radius: 0.1rem;
    margin: 0.1rem 0.12rem 0;
    overflow: hidden;
  }
  .title-content {
    flex: 1 auto;
    font-weight: bold;
    .van-cell__label {
      font-weight: 400;
      margin-top: 0.06rem;
      display: flex;
      align-items: center;
    }
    .van-icon-location {
      margin-right: 0.05rem;
    }
  }
  .value-content {
    width: 50px;
  }

  .van-button__text {
    color: #01c1b5;
  }
  .input-cell {
    padding: 0.12rem 0.16rem 0.2rem;
    .van-radio {
      justify-content: flex-end;
    }
  }
  .signImgBox {
    .signImg {
      margin-top: 0.04rem;
      width: 0.48rem;
      height: 0.22rem;
    }
  }
  .teacherModelImg {
    width: 0.35rem;
    height: 0.2rem;
    margin-right: 0.05rem;
    position: absolute;
    left: 0;
    top: 0.04rem;
  }
  .courseImg {
    width: 0.42rem;
    height: 0.18rem;
    position: absolute;
    left: 0.4rem;
    top: 0.05rem;
  }
  .classTitleWrap {
    font-size: 0.16rem;
    line-height: 1.5;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .titleCell {
    padding-bottom: 0 !important;
    &:after {
      border-bottom: none;
    }
  }
  .studentTitle {
    font-size: 0.13rem;
    color: #666;
    line-height: 0.19rem;
    margin-bottom: 5px;
  }
  .clockIcon {
    width: 0.16rem;
    height: 0.16rem;
  }
  .chioseWrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    img {
      position: relative;
      top: -0.02rem;
      margin-right: 0.08rem;
    }
  }
}
</style>