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

<template>
  <div>
    <!-- <el-alert
    type="info"
    :closable="false"
    :description="content">
  </el-alert> -->
    <div class="workTitle" v-if="title || content">
      {{ title }}:<span>{{ content }}</span>
    </div>
    <div v-else class="workTitle">暂未布置作业</div>

    <el-form :inline="true" class="workForm" style="padding: 0 25px">
      <el-form-item label="应交学生数">
        <!-- <el-input disabled
        :value="homeworkStudentNum"></el-input>-->
        <div class="inputStyle">{{ homeworkStudentNum }}</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="submitTime"
          width="150"
          label="提交训练时间"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.submitTime | dateForMinFormat }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="isView" label="是否提交">
          <template slot-scope="scope">
            <div>{{ scope.row.submitTime ? "是" : "否" }}</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.submitTime"
                @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"
      v-if="workVisible"
    >
      <!-- activeUrl -->
      <div class="sliderWrap">
        <div class="swiperWrap">
          <swiper
            ref="mySwiper"
            :options="swiperOptions"
            :auto-update="true"
            :auto-destroy="false"
            :delete-instance-on-destroy="false"
            :cleanup-styles-on-destroy="false"
          >

            <swiper-slide
              class="swiper-no-swiping"
              v-for="(item, index) in activeRow.urlList"
              :key="index"
            >
              <div class="videoWrap" v-if="activeIndex == index">
                <video
                  style="width: 480px"
                  :src="item"
                  ref="dialogVideo"
                  controls="controls"
                >
                  您的浏览器不支持视频播放
                </video>
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div
            v-if="activeRow.urlList.length>1"
              class="swiper-button-prev swiper-button-white"
              @click="prev"
              slot="button-prev"
            ></div>
            <div
              v-if="activeRow.urlList.length>1"
              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'"
              v-if="activeCommit.length > 0"
            >
              <messageBox
                v-for="(msg, index) in activeCommit"
                :key="index"
                :item="msg"
              />
              <!-- <div
                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 "swiper/swiper-bundle.css";
import pagination from "@/components/Pagination/index";
import {
  findStudentCourseHomeworks,
  sumStudentAttendance,
  getCourseScheduleHomework,
} from "@/api/buildTeam";
import { findStudentHomeworkComments } from "@/api/operateManager";
import messageBox from "./message-box";
export default {
  props: ["courseScheduleId"],
  components: {
    pagination,
    Swiper,
    SwiperSlide,
    messageBox,
  },
  directives: {
    swiper: directive,
  },
  data() {
    return {
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
      },
      workVisible: false,
      repliedVisible: false,
      studentNum: null,
      homeworkStudentNum: null,
      homeworkNum: null,
      repliedNum: null,
      activeUrl: null,
      content: null,
      title: null,
      activeRow: null,
      activeIndex: 0,
      swiperOptions: {
        noSwiping: true,
        // autoHeight: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        speed: 300,
        loop: true,
        pagination: ".swiper-pagination",
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
          slideChange: (val) => {
            // console.log("掉用slideChange");
            this.activeIndex = val.realIndex;
          },
        },

        // 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.homeworkStudentNum = res.data.homeworkStudentNum;
            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.title = res.data.title;
          }

          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 = [];
            if (item.url) {
              item.url.split(",").forEach((url) => {
                if (url) {
                  item.urlList.push(url);
                }
              });
            }
            return item;
          });
        }
      });
    },
    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 = "";
      // this.activeIndex= -1;
    },
    prev(val) {
      this.$nextTick(() => {
        // this.swiper.slidePrev();
          this.$refs.mySwiper.$swiper.slidePrev();
      });
    },
    next(val) {
      this.$nextTick(() => {
        // console.log(this.swiper.slideNext, this.swiper.slideNext());
        this.$refs.mySwiper.$swiper.slideNext();

        // 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%;
}
.videoWrap {
  min-height: 640px;

  background-color: #efefef;
  align-items: center;
  display: flex;
  flex-direction: row;
}

.swiper-wrapper {
}
.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;
    background-color: #efefef;
    min-height: 300px;
    height: calc(100% - 40px);
    overflow-y: auto;
    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: var(--color-primary);
  font-weight: bold;
  background-color: #f4f4f5;
  line-height: 40px;
  span {
    color: #303133;
    font-weight: normal;
  }
}
.workContainer {
  margin-bottom: 20px;
}
</style>