Update ArrangeWork.vue

src/views/audition/ArrangeWork.vue

@@ -1,30 +1,73 @@
 <template>
   <div class="arrangeWork">
     <m-header v-if="headerStatus" />
-    <van-cell :title="classGroupName" title-style="font-size: .18rem; color: #333333;">
+    <van-cell
+      :title="classGroupName"
+      title-style="font-size: .18rem; color: #333333;"
+    >
       <template #extra>
-        <van-tag type="primary" plain style="background-color: #F1FCF9">课后训练</van-tag>
+        <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">
+    <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>
+        <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="请输入训练标题" />
+        <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="请输入训练内容" />
+        <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="请选择截止时间" >
+    <van-cell
+      class="endTime"
+      style="padding: 0.12rem 0.21rem;"
+      title="训练提交截止时间"
+      @click="onEndTime"
+      is-link
+      readonly
+      placeholder="请选择截止时间"
+    >
       <template #title>
         <div class="dot"></div>
         训练提交截止时间
@@ -38,10 +81,27 @@
       团练宝曲目选择<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="请选择训练曲目" >
+      <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>训练曲目
+            <div class="dot"></div>
+            训练曲目
           </template>
           <template #default>
             <template v-if="music.name">
@@ -50,21 +110,35 @@
             <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>
+            <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>
+            <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)">
+        <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>
+      <van-button type="primary" round size="large" @click="onSubmit"
+        >确定</van-button
+      >
     </div>
 
     <!-- 日期开始弹窗 -->
@@ -80,13 +154,23 @@
       />
     </van-popup>
 
-    <van-popup position="bottom" v-model="accompanimentStatus"  :style="{ height: '100%' }" style=" border-radius: 0; overflow: inherit;">
+    <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" />
+      <!-- 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> -->
@@ -101,42 +185,47 @@
       <!-- <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>
+      <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 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 { 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'
+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
+    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
-        }
+          this.accompanimentStatus = false;
+        },
       },
       backUrlStudent: {
         status: true,
         callBack: () => {
-          this.studentStatus = false
-        }
+          this.studentStatus = false;
+        },
       },
       classGroupName: query.classGroupName,
       courseId: query.courseId || query.id,
@@ -149,8 +238,8 @@ export default {
         musicScoreId: null,
         musicScoreName: null,
       },
-      title: '',
-      content: '', // 课程编号
+      title: "",
+      content: "", // 课程编号
       expiryDate: null, // 作业截止日期
       accompanimentStatus: false, // 伴奏弹窗
       tabActive: 0,
@@ -161,7 +250,7 @@ export default {
         studentCount: 0, // 学员总数
         studentMemberCount: 0, // 学员会员数
         subjectIdList: [],
-        subjectList: []
+        subjectList: [],
       },
       dataList: [],
       dataSubjectList: [],
@@ -174,170 +263,186 @@ export default {
       localStorage.setItem("Authorization", decodeURI(params.Authorization));
       localStorage.setItem("userInfo", decodeURI(params.Authorization));
     }
-    document.title = '布置训练'
-    if(browser().android || browser().iPhone) {
-      this.headerStatus = false
+    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 || []
+    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 => {
+        subjectList: [],
+      };
+      tempData.forEach((item) => {
         // 判断当前学员是否有会员
-        if(item.memberRankSettingId) {
-          params.studentMemberCount++
+        if (item.memberRankSettingId) {
+          params.studentMemberCount++;
         }
-        if(!params.subjectIdList.includes(item.subjectIdList || -1)) {
-          params.subjectIdList.push(item.subjectIdList || -1)
+        if (!params.subjectIdList.includes(item.subjectIdList || -1)) {
+          params.subjectIdList.push(item.subjectIdList || -1);
           params.subjectList.push({
             id: item.subjectIdList || -1,
-            subjectName: item.subjectName || '无声部',
+            subjectName: item.subjectName || "无声部",
             userIdList: [item.userId],
-            musicScoreIdList: [{
-              id: null,
-              name: null,
-              songPart: null,
-            }], // 默认加一个空的，做占位
-          })
+            musicScoreIdList: [
+              {
+                id: null,
+                name: null,
+                songPart: null,
+              },
+            ], // 默认加一个空的，做占位
+          });
         } else {
-          params.subjectList.forEach(subject => {
-            if(subject.id == item.subjectIdList) {
-              subject.userIdList.push(item.userId)
+          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 && subject.id == -1) {
+              subject.userIdList.push(item.userId);
             }
-          })
+          });
         }
-        if(!item.subjectIdList) {
-          item.subjectIdList = -1
+        if (!item.subjectIdList) {
+          item.subjectIdList = -1;
         }
       });
-      this.dataList = tempData
+      this.dataList = tempData;
       // 默认选中第1条数据
-      this.tabActive = (params.subjectIdList[0])
-      this.tabOriginActive = (params.subjectIdList[0])
-      this.dataSubjectList = deepClone(params.subjectList)
-      this.params = params
-    })
+      this.tabActive = params.subjectIdList[0];
+      this.tabOriginActive = params.subjectIdList[0];
+      this.dataSubjectList = deepClone(params.subjectList);
+      this.params = params;
+    });
 
     // 获取当前课程的作业列表
-    listenerMessage('getAccompany', (res) => {
-      console.log(res, 'getAccompany')
-      if(res) {
+    listenerMessage("getAccompany", (res) => {
+      console.log(res, "getAccompany");
+      if (res && res.content) {
         this.tabActiveList.musicScoreIdList[this.tabActiveIndex] = {
-          id: res.songId,
-          name: res.songName,
-          songPart: res.songPart,
-        }
+          id: res.content.songId,
+          name: res.content.songName,
+          songPart: res.content.songPart,
+        };
       }
-    })
+    });
   },
   methods: {
     onSelectAccompany(item, index) {
       // this.accompanimentStatus = true
       // 唤起弹窗
-      postMessage({ api: 'openAccompany', content: {
-        subjectId: item.id
-      }})
-      this.tabActiveList = item
-      this.tabActiveIndex = index
+      postMessage({
+        api: "openAccompany",
+        content: {
+          subjectId: item.id,
+        },
+      });
+      this.tabActiveList = item;
+      this.tabActiveIndex = index;
     },
     delAccompany(music, index) {
-      if(music.length == 1) {
+      if (music.length == 1) {
         music[0] = {
           id: null,
           name: null,
-        }
-        this.$forceUpdate()
+        };
+        this.$forceUpdate();
       } else {
-        music.splice(index, 1)
+        music.splice(index, 1);
       }
     },
     addCloud(item) {
-      if(item.musicScoreIdList.length < 3) {
-        item.musicScoreIdList.push('')
+      if (item.musicScoreIdList.length < 3) {
+        item.musicScoreIdList.push("");
       }
     },
     formatter(type, val) {
       if (type === "year") {
-        return `${val}年`
+        return `${val}年`;
       } else if (type === "month") {
-        return `${val}月`
+        return `${val}月`;
       } else if (type == "day") {
-        return `${val}日`
+        return `${val}日`;
       }
-      return val
+      return val;
     },
     onSelectMusic(value) {
-      console.log(value)
       this.tabActiveList.musicScoreIdList[this.tabActiveIndex] = {
         id: value.examSongId,
-        name: value.name
-      }
-      this.accompanimentStatus = false
+        name: value.name,
+      };
+      this.accompanimentStatus = false;
     },
     confirmStartTime() {
-      this.dateSection.showStartDate = dayjs(this.dateSection.currentDate).format("YYYY年MM月DD日")
-      this.dateSection.status = false
+      this.dateSection.showStartDate = dayjs(
+        this.dateSection.currentDate
+      ).format("YYYY年MM月DD日");
+      this.dateSection.status = false;
     },
     onEndTime() {
-      this.dateSection.status = true
+      this.dateSection.status = true;
     },
     onSubmit: _throttle(function(type) {
-      if(!this.title) {
-        this.$toast('请输入训练标题')
-        return
+      if (!this.title) {
+        this.$toast("请输入训练标题");
+        return;
       }
-      if(!this.content) {
-        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)
+      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)
+        });
+        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
+      });
+      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: '加载中...',
@@ -349,33 +454,37 @@ export default {
         title: this.title,
         content: this.content,
         courseScheduleId: this.courseId,
-        expiryDate: dayjs(this.dateSection.currentDate).format('YYYY-MM-DD'),
-        musicScoreSubjectDto: musicScoreSubjectDto
-      }
-      addHomeWork(cleanDeep({...params})).then(res => {
-        let result = res.data
-        this.$toast.clear()
-        if(result.code == 200) {
-          this.$toast('作业布置成功')
+        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'
+            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
-              }
-            })
+                work: 1,
+              },
+            });
           }, 500);
         } else {
-          this.$toast(result.msg)
+          this.$toast(result.msg);
         }
-      })
-    }, 500)
-  }
+      });
+    }, 500),
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -384,58 +493,56 @@ export default {
   min-height: 100vh;
   overflow-y: auto;
   overflow-x: hidden;
-  background-color: #F3F4F8;
+  background-color: #f3f4f8;
 }
 /deep/.van-cell {
-  font-size: .14rem;
-  padding: .12rem .16rem;
-  line-height: .24rem;
+  font-size: 0.14rem;
+  padding: 0.12rem 0.16rem;
+  line-height: 0.24rem;
 }
 
 .arrowDown {
   display: inline-block;
-  margin-left: .1rem;
+  margin-left: 0.1rem;
   width: 0.1rem;
   height: 0.07rem;
-  background: url('../../assets/images/audition/arrow_down.png') no-repeat center center;
+  background: url("../../assets/images/audition/arrow_down.png") no-repeat
+    center center;
   background-size: 100%;
 }
 
-
 .container {
   .formGroup {
     position: relative;
-    margin-top: .1rem;
+    margin-top: 0.1rem;
     background: #ffffff;
   }
   .formTitle {
-    padding: .12rem .21rem 0;
-    font-size: .16rem;
+    padding: 0.12rem 0.21rem 0;
+    font-size: 0.16rem;
     color: #333333;
     font-weight: 500;
   }
 }
 
 .endTime {
-  margin-top: .1rem;
+  margin-top: 0.1rem;
   .van-cell__title {
-    font-size: .16rem;
-    color: #1A1A1A;
+    font-size: 0.16rem;
+    color: #1a1a1a;
   }
 
   /deep/.van-cell__value {
     // width: 30%;
     justify-content: flex-end;
     text-align: right;
-    font-size: .16rem;
-    color: #1A1A1A;
+    font-size: 0.16rem;
+    color: #1a1a1a;
     display: flex;
     align-items: center;
   }
 }
 
-
-
 .button-group {
   margin: 0.3rem 0.26rem 0.2rem;
   .van-button--primary {
@@ -452,19 +559,19 @@ export default {
   border-radius: 3px;
   position: absolute;
   z-index: 98;
-  top: .15rem;
+  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;
+  border-radius: 0px 0px 0px 0px !important;
+  overflow: auto !important;
 }
 .accompanyHeader {
-  font-size: .14rem;
-  padding: .16rem .08rem .14rem;
+  font-size: 0.14rem;
+  padding: 0.16rem 0.08rem 0.14rem;
   color: #333;
   font-weight: 500;
   span {
@@ -473,14 +580,13 @@ export default {
 }
 .addAccompaniment {
   width: 80%;
-  height: .42rem;
-  line-height: .42rem;
+  height: 0.42rem;
+  line-height: 0.42rem;
   text-align: center;
-  margin: .1rem auto 0;
-  border: 1px dashed #CCC;
-  background: #FBFBFB;
-  font-size: .14rem;
+  margin: 0.1rem auto 0;
+  border: 1px dashed #ccc;
+  background: #fbfbfb;
+  font-size: 0.14rem;
   color: #666666;
 }
-
 </style>