mteacher/src/views/audition/ArrangeWork.vue

<template>
  <div class="arrangeWork">
    <m-header v-if="headerStatus" />
    <van-cell
      :title="classGroupName"
      title-style="font-size: .18rem; color: #333333;"
    >
      <template #extra>
        <van-tag type="primary" plain style="background-color: #F1FCF9"
          >课后训练</van-tag
        >
      </template>
    </van-cell>
    <van-cell
      class="endTime"
      readonly
      is-link
      title-style="font-size: .16rem; color: #333333;"
      @click="studentStatus = true"
    >
      <template #title>
        <span style="padding-right: .3rem"
          >学员共<i style="font-style: normal; color: #01C1B5">{{
            params.studentCount
          }}</i
          >人</span
        >
        <span
          >会员
          <i style="font-style: normal; color: #FF802C">{{
            params.studentMemberCount
          }}</i
          >人</span
        >
      </template>
    </van-cell>
    <div class="container">
      <div class="formGroup">
        <div class="dot"></div>
        <div class="formTitle">训练标题</div>
        <van-field
          v-model="title"
          type="text"
          maxlength="25"
          show-word-limit
          placeholder="请输入训练标题"
        />
      </div>
      <div class="formGroup">
        <div class="dot"></div>
        <div class="formTitle">训练内容</div>
        <van-field
          rows="4"
          v-model="content"
          maxlength="600"
          show-word-limit
          type="textarea"
          placeholder="请输入训练内容"
        />
      </div>
    </div>
    <van-cell
      class="endTime"
      style="padding: 0.12rem 0.21rem;"
      title="训练提交截止时间"
      @click="onEndTime"
      is-link
      readonly
      placeholder="请选择截止时间"
    >
      <template #title>
        <div class="dot"></div>
        训练提交截止时间
      </template>
      <template #default>
        {{ dateSection.showStartDate }}
      </template>
    </van-cell>

    <div class="accompanyHeader">
      云教练曲目选择<span>(若作业内容非云教练曲目则无需选择)</span>
    </div>
    <van-tabs v-model="tabActive" color="#01C1B5">
      <van-tab
        v-for="(item, i) in params.subjectList"
        :title="item.subjectName"
        :name="item.id"
        :key="i"
        class="van-hairline--bottom"
      >
        <van-cell
          class="endTime"
          v-for="(music, index) in item.musicScoreIdList"
          :key="index"
          style="margin-top: 0;padding: 0.12rem 0.21rem;"
          title="训练曲目"
          @click="onSelectAccompany(item, index)"
          readonly
          is-link
          placeholder="请选择训练曲目"
        >
          <template #title>
            <div class="dot"></div>
            训练曲目
          </template>
          <template #default>
            <template v-if="music.name">
              {{ music.name }}
            </template>
            <span v-else style="color: #808080;">请选择</span>
          </template>
          <template #right-icon>
            <span
              v-if="music.name"
              @click.stop="delAccompany(item.musicScoreIdList, index)"
              style="color: #999999; font-size: .12rem; padding-left: .12rem"
              ><van-icon size="14" name="delete-o" />删除</span
            >
          </template>
          <template #extra>
            <!-- <span><van-icon name="delete-o" />删除</span> -->
            <span
              style="height: 24px;font-size: 16px;line-height: 24px;color: #DADADA !important;"
              ><van-icon name="arrow"
            /></span>
          </template>
        </van-cell>
        <div
          class="addAccompaniment"
          v-if="item.musicScoreIdList.length < 3"
          @click="addCloud(item)"
        >
          <van-icon name="plus" size="16px" />增加云教练训练曲目
        </div>
      </van-tab>
    </van-tabs>

    <div class="button-group">
      <van-button type="primary" round size="large" @click="onSubmit"
        >确定</van-button
      >
    </div>

    <!-- 日期开始弹窗 -->
    <van-popup position="bottom" v-model="dateSection.status">
      <van-datetime-picker
        v-model="dateSection.currentDate"
        type="date"
        :min-date="dateSection.minDate"
        :max-date="dateSection.maxDate"
        :formatter="formatter"
        @confirm="confirmStartTime()"
        @cancel="dateSection.status = false"
      />
    </van-popup>

    <van-popup
      position="bottom"
      v-model="accompanimentStatus"
      :style="{ height: '100%' }"
      style=" border-radius: 0; overflow: inherit;"
    >
      <!-- <van-sticky>
        <m-header name="作业曲目" :backUrl="backUrl" />
      </van-sticky> -->
      <!-- <accompaniment-modal @onSelectMusic="onSelectMusic" ref="accompaniment" style="margin-bottom: 0.8rem;" :searchSubjectId="tabActive" /> -->
      <!-- style="margin-bottom: 0.8rem;" -->
      <workModel
        @onSelectMusic="onSelectMusic"
        @close="accompanimentStatus = false"
        ref="accompaniment"
        :searchSubjectId="tabActive"
      />
      <!-- <div class="button-group-popup">
        <span class="btn" @click="accompanimentStatus = false">关闭</span>
      </div> -->
    </van-popup>

    <van-popup
      v-model="studentStatus"
      :lock-scroll="true"
      position="bottom"
      :style="{ height: '180%' }"
    >
      <!-- <van-sticky>
        <m-header name="学员列表" :backUrl="backUrlStudent" />
      </van-sticky> -->
      <student-list-model
        :dataList="dataList"
        style="margin-bottom: 0.8rem;"
        @close="studentStatus = false"
        :dataSubjectList="dataSubjectList"
      ></student-list-model>
    </van-popup>
  </div>
</template>
<script>
import MHeader from "@/components/MHeader";
import { browser, _throttle } from "@/common/common";
import dayjs from "dayjs";
import { addHomeWork } from "@/api/audition";
import { getCourseStudents } from "@/api/teacher";
// import AccompanimentModal from './modal/accompanimentModal'
import workModel from "./modal/workModel";
import StudentListModel from "./modal/studentList";
import cleanDeep from "clean-deep";
import deepClone from "@/helpers/deep-clone";
import { postMessage, listenerMessage } from "@/helpers/native-message";
export default {
  name: "teacherList",
  components: { MHeader, workModel, StudentListModel },
  data() {
    let tempDate = new Date(); // 默认显示T+3
    tempDate.setDate(tempDate.getDate() + 3);
    let query = this.$route.query;
    return {
      headerStatus: true,
      backUrl: {
        status: true,
        callBack: () => {
          this.accompanimentStatus = false;
        },
      },
      backUrlStudent: {
        status: true,
        callBack: () => {
          this.studentStatus = false;
        },
      },
      classGroupName: query.classGroupName,
      courseId: query.courseId || query.id,
      dateSection: {
        status: false,
        minDate: new Date(),
        maxDate: new Date(2025, 10, 1),
        currentDate: tempDate,
        showStartDate: dayjs(tempDate).format("YYYY年MM月DD日"),
        musicScoreId: null,
        musicScoreName: null,
      },
      title: "",
      content: "", // 课程编号
      expiryDate: null, // 作业截止日期
      accompanimentStatus: false, // 伴奏弹窗
      tabActive: 0,
      tabOriginActive: 0,
      tabActiveList: {}, // 选中当前信息
      tabActiveIndex: 0,
      params: {
        studentCount: 0, // 学员总数
        studentMemberCount: 0, // 学员会员数
        subjectIdList: [],
        subjectList: [],
      },
      dataList: [],
      dataSubjectList: [],
      studentStatus: false,
    };
  },
  async mounted() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
    document.title = "布置训练";
    if (browser().android || browser().iPhone) {
      this.headerStatus = false;
    }
    // 获取课程学员【根据接口初始化声部列表】
    await getCourseStudents({ courseScheduleId: this.courseId }).then((res) => {
      const result = res.data;
      if (result.code != 200) {
        return;
      }
      const tempData = result.data || [];
      let params = {
        studentCount: tempData.length, // 学员总数
        studentMemberCount: 0, // 学员会员数
        subjectIdList: [],
        subjectList: [],
      };
      tempData.forEach((item) => {
        // 判断当前学员是否有会员
        if (item.memberRankSettingId) {
          params.studentMemberCount++;
        }
        if (!params.subjectIdList.includes(item.subjectIdList || -1)) {
          params.subjectIdList.push(item.subjectIdList || -1);
          params.subjectList.push({
            id: item.subjectIdList || -1,
            subjectName: item.subjectName || "无声部",
            userIdList: [item.userId],
            musicScoreIdList: [
              {
                id: null,
                name: null,
                songPart: null,
              },
            ], // 默认加一个空的，做占位
          });
        } else {
          params.subjectList.forEach((subject) => {
            if (subject.id == item.subjectIdList) {
              subject.userIdList.push(item.userId);
            }
            if (!item.subjectIdList && subject.id == -1) {
              subject.userIdList.push(item.userId);
            }
          });
        }
        if (!item.subjectIdList) {
          item.subjectIdList = -1;
        }
      });
      this.dataList = tempData;
      // 默认选中第1条数据
      this.tabActive = params.subjectIdList[0];
      this.tabOriginActive = params.subjectIdList[0];
      this.dataSubjectList = deepClone(params.subjectList);
      this.params = params;
    });

    // 获取当前课程的作业列表
    let _this = this;
    listenerMessage("getAccompany", (res) => {
      if (res && res.content) {
        _this.tabActiveList.musicScoreIdList[this.tabActiveIndex] = {
          id: res.content.songId,
          name: res.content.songName,
          songPart: res.content.songPart,
        };
        _this.$forceUpdate();
      }
    });
  },
  methods: {
    onSelectAccompany(item, index) {
      // this.accompanimentStatus = true
      // 唤起弹窗
      postMessage({
        api: "openAccompany",
        content: {
          subjectId: item.id,
        },
      });
      this.tabActiveList = item;
      this.tabActiveIndex = index;
    },
    delAccompany(music, index) {
      if (music.length == 1) {
        music[0] = {
          id: null,
          name: null,
        };
        this.$forceUpdate();
      } else {
        music.splice(index, 1);
      }
    },
    addCloud(item) {
      if (item.musicScoreIdList.length < 3) {
        item.musicScoreIdList.push("");
      }
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type == "day") {
        return `${val}日`;
      }
      return val;
    },
    onSelectMusic(value) {
      this.tabActiveList.musicScoreIdList[this.tabActiveIndex] = {
        id: value.examSongId,
        name: value.name,
      };
      this.accompanimentStatus = false;
    },
    confirmStartTime() {
      this.dateSection.showStartDate = dayjs(
        this.dateSection.currentDate
      ).format("YYYY年MM月DD日");
      this.dateSection.status = false;
    },
    onEndTime() {
      this.dateSection.status = true;
    },
    onSubmit: _throttle(function(type) {
      if (!this.title) {
        this.$toast("请输入训练标题");
        return;
      }
      if (!this.content) {
        this.$toast("请输入训练内容");
        return;
      }
      let tempSubjectList = this.params.subjectList;
      let musicScoreSubjectDto = [];
      let notAccompanySong = []; // 用于判断没有设置训练曲目的数据
      let subjectLength = this.params.subjectIdList.length;
      tempSubjectList.forEach((subject) => {
        let scoreIdList = [];
        let scoreList = [];
        subject.musicScoreIdList.forEach((music) => {
          if (music.id) {
            scoreIdList.push(music.id);
            scoreList.push({
              musicScoreId: music.id,
              partIndex: music.songPart,
            });
          }
        });
        if (scoreIdList.length <= 0) {
          notAccompanySong.push(subject.subjectName);
        }
        musicScoreSubjectDto.push({
          musicScoreIdList: scoreIdList,
          userIdList: subject.userIdList,
          musicScoreHomeworkDtoList: scoreList,
        });
      });
      if (
        notAccompanySong.length - subjectLength <= 0 &&
        notAccompanySong != 0 &&
        type[0] != 1
      ) {
        // console.log('选择曲目')
        this.$dialog
          .confirm({
            message:
              notAccompanySong.join(",") +
              "声部未选择云教练训练曲目，是否继续布置作业？",
            confirmButtonColor: "#01C1B5",
          })
          .then(() => {
            // on confirm
            this.onSubmit(1);
          })
          .catch(() => {
            // on cancel
          });
        return;
      }
      // this.$toast.loading({
      //   message: '加载中...',
      //   duration: 10000,
      //   forbidClick: true,
      //   loadingType: 'spinner',
      // })
      let params = {
        title: this.title,
        content: this.content,
        courseScheduleId: this.courseId,
        expiryDate: dayjs(this.dateSection.currentDate).format("YYYY-MM-DD"),
        musicScoreSubjectDto: musicScoreSubjectDto,
      };
      console.log(params, "params");
      addHomeWork(cleanDeep({ ...params })).then((res) => {
        let result = res.data;
        this.$toast.clear();
        if (result.code == 200) {
          this.$toast("作业布置成功");
          setTimeout(() => {
            let query = this.$route.query;
            const path =
              query.isNewJoin == 1
                ? "/afterClassEvaluateDetail"
                : "/courseEvaluation";
            this.$router.replace({
              path,
              query: {
                id: query.id,
                reviewId: query.reviewId,
                isInside: query.isInside,
                work: 1,
              },
            });
          }, 500);
        } else {
          this.$toast(result.msg);
        }
      });
    }, 500),
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.arrangeWork {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #f3f4f8;
}
/deep/.van-cell {
  font-size: 0.14rem;
  padding: 0.12rem 0.16rem;
  line-height: 0.24rem;
}

.arrowDown {
  display: inline-block;
  margin-left: 0.1rem;
  width: 0.1rem;
  height: 0.07rem;
  background: url("../../assets/images/audition/arrow_down.png") no-repeat
    center center;
  background-size: 100%;
}

.container {
  .formGroup {
    position: relative;
    margin-top: 0.1rem;
    background: #ffffff;
  }
  .formTitle {
    padding: 0.12rem 0.21rem 0;
    font-size: 0.16rem;
    color: #333333;
    font-weight: 500;
  }
}

.endTime {
  margin-top: 0.1rem;
  .van-cell__title {
    font-size: 0.16rem;
    color: #1a1a1a;
  }

  /deep/.van-cell__value {
    // width: 30%;
    justify-content: flex-end;
    text-align: right;
    font-size: 0.16rem;
    color: #1a1a1a;
    display: flex;
    align-items: center;
  }
}

.button-group {
  margin: 0.3rem 0.26rem 0.2rem;
  .van-button--primary {
    background: @mColor;
    border: 1px solid @mColor;
    font-size: 0.18rem;
  }
}

.dot {
  width: 4px;
  height: 0.17rem;
  background: #01c1b5;
  border-radius: 3px;
  position: absolute;
  z-index: 98;
  top: 0.15rem;
  left: 0.12rem;
}
/deep/.van-tab {
  font-size: 16px;
}
/deep/.van-popup--bottom {
  border-radius: 0px 0px 0px 0px !important;
  overflow: auto !important;
}
.accompanyHeader {
  font-size: 0.14rem;
  padding: 0.16rem 0.08rem 0.14rem;
  color: #333;
  font-weight: 500;
  span {
    color: #808080;
  }
}
.addAccompaniment {
  width: 80%;
  height: 0.42rem;
  line-height: 0.42rem;
  text-align: center;
  margin: 0.1rem auto 0;
  border: 1px dashed #ccc;
  background: #fbfbfb;
  font-size: 0.14rem;
  color: #666666;
}
</style>