|
@@ -0,0 +1,433 @@
|
|
|
+<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"
|
|
|
+ >
|
|
|
+ 上课地点 : {{ item.schoolName }}
|
|
|
+ </p>
|
|
|
+ <p class="studentTitle" style="word-break: break-all">
|
|
|
+ 上课学生 : {{ 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 { 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() {
|
|
|
+ const teacherId = sessionStorage.getItem("userId");
|
|
|
+ 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: teacherId || "",
|
|
|
+ // startTime: "",
|
|
|
+ // endTime: "",
|
|
|
+ page: 1,
|
|
|
+ rows: 20,
|
|
|
+ },
|
|
|
+ dataShow: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ 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),
|
|
|
+ }).then((res) => {
|
|
|
+ let result = res.data;
|
|
|
+ if (result.code == 200) {
|
|
|
+ this.$toast("调整成功");
|
|
|
+ setTimeout(() => {
|
|
|
+ this.params.page = 1;
|
|
|
+ this.getList();
|
|
|
+ }, 500);
|
|
|
+ } else {
|
|
|
+ this.$toast(result.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|