dy-admin-manager/src/views/teamDetail/componentCourse/studentWork.vue

<template>
  <div>
  <el-alert
    title="作业内容"
    type="info"
    :closable="false"
    :description="content">
  </el-alert>
    <!-- <div class="workTitle">作业内容:  <span>{{content}}</span> </div> -->
    <el-form :inline="true"
             class="workForm"
             style="padding: 0 25px">
      <el-form-item label="应交学生数">
        <!-- <el-input disabled
        :value="studentNum"></el-input>-->
        <div class="inputStyle">{{ studentNum}}</div>
      </el-form-item>
      <el-form-item label="已交学生数">
        <!-- <el-input disabled
        :value="homeworkNum"></el-input>-->
        <div class="inputStyle">{{ homeworkNum}}</div>
      </el-form-item>
      <el-form-item label="已回复数">
        <!-- <el-input disabled
        :value="repliedNum"></el-input>-->
        <div class="inputStyle">{{ repliedNum}}</div>
      </el-form-item>

    </el-form>

    <div class="tableWrap">
      <el-table :data="tableList"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column align="center"
                         prop="studentName"
                         width="160"
                         label="学生姓名">
          <template slot-scope="scope">
            <div>
              {{scope.row.studentName}}
              <span style="color: #f56c6c">{{scope.row.studentId}}</span>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center"
                         prop="studentId"
                         label="学生编号"></el-table-column> -->
        <el-table-column align="center"
                         prop="phone"
                         label="手机号"
                         width="120"></el-table-column>
        <el-table-column align="center"
                         prop="subjectNames"
                         label="声部名称"></el-table-column>
        <el-table-column align="center"
                         prop="createTime"
                         width="150"
                         label="交作业时间">
          <template slot-scope="scope">
            <div>{{ scope.row.createTime | dateForMinFormat}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="isView"
                         label="是否提交">
          <template slot-scope="scope">
            <div>{{ scope.row.createTime? '是' : '否' }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="isView"
                         label="是否查看">
          <template slot-scope="scope">
            <div>{{ scope.row.isView ? '是' : '否' }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         prop="isReplied"
                         label="是否回复">
          <template slot-scope="scope">
            <div>{{ scope.row.isReplied ? '是' : '否' }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="查看作业"
                         width="100px">
          <template slot-scope="scope">
            <div>
              <!--   -->
              <el-button type="text"
                         v-if="scope.row.urlList&&scope.row.createTime"
                         @click="lookWork(scope.row)">查看作业</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="rules.total"
                  :page.sync="rules.page"
                  :limit.sync="rules.limit"
                  @pagination="getList" />
    </div>
    <el-dialog title="查看作业"
               @close="closeWorkVisible"
               width="940px"
               append-to-body
               :visible.sync="workVisible">
      <!-- activeUrl -->
      <div class="sliderWrap" v-if="workVisible">
        <div class="swiperWrap">
          <swiper ref="mySwiper"
                  :options="swiperOptions"
                  v-if="activeRow">
            <swiper-slide v-for="
                   (item,index)
                   in
                   activeRow.urlList"
                          :key="index">

              <video style="width:480px;"
                     :src="item"
                     ref="dialogVideo"
                     controls="controls">您的浏览器不支持视频播放</video>

            </swiper-slide>
            <div class="swiper-pagination"
                 slot="pagination"></div>
            <div class="swiper-button-prev swiper-button-white"
                 @click="prev"
                 slot="button-prev"></div>
            <div class="swiper-button-next swiper-button-white"
                 @click="next"
                 slot="button-next"></div>
          </swiper>
        </div>
        <div>
            <p class="workContainer">作业回复内容:</p>
        <div class="msgWrap">

          <div :class="activeCommit.length>0?'':'flex'">
            <div v-if="activeCommit.length>0"
                 class="msgLi"
                 v-for='(msg,index) in activeCommit'
                 :key="index">
              <div class="info">
                <p>{{msg.userName}}</p>
                <p style="color:#999"
                   v-if="msg.createTime">{{msg.createTime | dateForMinFormat}}</p>
              </div>
              <p class="contant"
                 v-if='msg.msgType=="TXT"'>{{msg.content}}</p>
              <el-image style="width: 100px; height: 100px"
                        fit='cover'
                        v-if='msg.msgType=="IMG"'
                        :src="msg.content"
                        :preview-src-list="[msg.content]">
              </el-image>

              <audio id='audio'
                     v-if='msg.msgType=="VC"'
                     controls
                     :src="msg.content"
                     ref="dialogVideo">您的浏览器不支持音频播放</audio>
            </div>
            <p class="nomore"
               v-if="activeCommit.length<=0">暂无回复内容</p>
          </div>
        </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
import pagination from "@/components/Pagination/index";
import {
  findStudentCourseHomeworks,
  sumStudentAttendance,
  getCourseScheduleHomework
} from "@/api/buildTeam";
import { findStudentHomeworkComments } from "@/api/operateManager";
export default {
  props: ["courseScheduleId"],
  components: {
    pagination, Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data () {
    return {
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0 // 总条数
      },
      workVisible: false,
      repliedVisible: false,
      studentNum: null,
      homeworkNum: null,
      repliedNum: null,
      activeUrl: null,
      content: null,
      activeRow: null,
      swiperOptions: {
        loop: true,
        pagination: '.swiper-pagination',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          slideChange: () => {
            console.log(this.activeRow)
          }
        }

        // Some Swiper option/callback...
      },
      comUrl: '',
      comVisible: false,
      activeCommit: []
    };
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    },
  },
  mounted () {
    this.init();
  },
  activated () {
    this.init();
  },
  methods: {
    init () {
      sumStudentAttendance({ courseScheduleId: this.courseScheduleId }).then(
        res => {
          if (res.code == 200) {
            this.studentNum = res.data.studentNum;
            this.homeworkNum = res.data.homeworkNum;
            this.repliedNum = res.data.repliedNum;
          }
        }
      );
      //this.courseScheduleId
      //

      getCourseScheduleHomework({
        courseScheduleId: this.courseScheduleId
      }).then(res => {
        if (res.code == 200) {
          if (res.data) {
            this.content = res.data.content;
          }
          this.content ? this.content : (this.content = "还未布置作业");
        }
      });
      this.getList();
    },
    getList () {
      findStudentCourseHomeworks({ search: this.courseScheduleId,rows:this.rules.limit,page:this.rules.page }).then(
        res => {
          if (res.code == 200) {
            this.rules.total = res.data.total;
            this.tableList = res.data.rows.map(item => {
              item.urlList = item.url ? item.url.split(",") : [];
              return item;
            });
            console.log(this.tableList)
          }
        }
      );
    },
    lookWork (row) {
      this.activeRow = row
      findStudentHomeworkComments({ studentCourseHomeworkId: row.studentCourseHomeworkId, rows: 9999 }).then(res => {
        if (res.code == 200) {
          this.activeCommit = res.data.rows;
          this.workVisible = true;
          // item.up = false
        }
      })

    },
    closeWorkVisible () {
      this.activeUrl = "";
    },
    prev (val) {
      this.swiper.slidePrev()
    },
    next (val) {
      this.swiper.slideNext()
    },
    lookReplied (row) {
      // repliedVisible
    },
    openAideo (src) {
      this.comUrl = src;
      this.comVisible = true;
    },
  }, watch: {
    courseScheduleId (val) {
      if (val) {
        this.init()
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.workForm {
  /deep/.el-form-item {
    margin-bottom: 0 !important;
  }
}
.inputStyle {
  width: 100px;
  text-align: center;
}
.work {
  line-height: 30px;
  font-size: 14px;
}
.flex {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.sliderWrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .swiperWrap {
    width: 480px;
  }
  .msgWrap {
    .nomore {
      text-align: center;
      width: 100%;
      margin-top: 120px;
      display: block;
    }
    width: 400px;
    min-height: 300px;
    height: 100%;
    border: 1px solid #e5e5e5;
    padding: 5px 20px;
    border-radius: 5px;
    overflow: auto;
    font-size: 14px;
    .msgLi {
      padding: 10px 0;
      .info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 10px;
        padding: 0 10px;
      }
      .contant {
        border-bottom: 1px solid #ededed;
        line-height: 30px;
        padding: 0 10px;
        color: #666;
      }
    }

  }

}
 .workTitle {
    padding-left: 25px;
    color: #333;
    font-weight: bold;

  }
  .workContainer {
    margin-bottom:20px ;
  }
</style>