dy-admin-manager/src/views/attendanceManager/attendanceList/components/studentWroks.vue

<template>
  <div class="studentWroks">
    <el-checkbox-group
      v-if="subjectList.length > 1"
      @change="checkSubject"
      v-model="subjectId"
      size="medium"
      style="margin-bottom: 20px"
    >
      <el-checkbox-button
        :class="subjectList.length == 1 ? 'one' : ''"
        v-for="(item, index) in subjectList"
        :key="index"
        :label="item.id"
        >{{ item.name }}</el-checkbox-button
      >
    </el-checkbox-group>
    <el-table
      max-height="300px"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      :data="list"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table
            style="width: 100%;padding-left: 48px"
            :show-header="false"
            :data="props.row.studentLessonTrainingDetail"
            :border="false"
          >
            <el-table-column
              label="名称"
              prop="musicScoreName"
            ></el-table-column>
            <el-table-column label="类型" prop="type"
              ><template slot-scope="scope">{{
                scope.row.homeworkType === "MUSIC_SCORE" ? "曲目" : "视频"
              }}</template>
            </el-table-column>
            <el-table-column label="速度" prop="trainingSpeed">
              <template slot-scope="scope">
                <span v-if="scope.row.homeworkType === 'MUSIC_SCORE'">
                  {{ scope.row.trainingSpeed }}速度
                </span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="times" label="次数/总计">
              <template slot-scope="scope"
                >{{ scope.row.trainingTimes }}/{{ scope.row.times }}次</template
              >
            </el-table-column>
          </el-table>
          <!-- <el-row
            :gutter="20"
            v-for="(item, index) in props.row.studentLessonTrainingDetail"
            :key="index"
          >
            <el-col :span="12"
              ><div class="rowFirst">{{ item.musicScoreName }}</div></el-col
            >
            <el-col :span="6"
              ><div class="rowSecond">
                <span>{{ item.trainingSpeed }}</span> 速度
              </div></el-col
            >
            <el-col :span="6"
              ><div class="rowlast">
                <span :class="item.trainingTimes >= item.times ? '' : 'red'">{{
                  item.trainingTimes
                }}</span>
                / {{ item.times }} 次
              </div></el-col
            >
          </el-row> -->
        </template>
      </el-table-column>
      <el-table-column prop="userName" align="left" label="学生姓名">
      </el-table-column>
      <el-table-column prop="phone" align="left" label="手机号">
      </el-table-column>
      <el-table-column prop="subjectName" align="left" label="声部名称">
      </el-table-column>
      <el-table-column prop="submitTime" align="left" label="完成时间">
        <template slot-scope="scope">
          <div>{{ scope.row.submitTime | dateForMinFormat }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="finishFlag" align="right" label="训练情况">
        <template slot-scope="scope">
          <div>{{ scope.row.finishFlag ? "已完成" : "未完成" }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getHomeworkStudent, getHomeworkSubjectPublic } from "../api";
export default {
  props: ["courseScheduleId"],
  data() {
    return {
      subjectId: [],
      list: [],
      subjectList: []
    };
  },
  mounted() {
    console.log(this.courseScheduleId, "mounted");
    if (this.courseScheduleId) {
      this.getStudentList(this.courseScheduleId);
      this.getPublicSubject();
    }
  },

  methods: {
    async getStudentList() {
      try {
        const res = await getHomeworkStudent({
          courseScheduleId: this.courseScheduleId,
          type: "HOMEWORK",
          subjectId: this.subjectId[0] ? this.subjectId[0] : ""
        });
        this.list = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    async getPublicSubject() {
      try {
        const res = await getHomeworkSubjectPublic({
          courseScheduleId: this.courseScheduleId,
          type: "HOMEWORK"
        });
        this.subjectList = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    checkSubject(val) {
      if (this.subjectId.length > 1) {
        this.subjectId.shift();
      }
      this.getStudentList();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep.one {
  .el-checkbox-button__inner {
    border-radius: 4px !important;
  }
}

.rowFirst {
  padding-left: 58px;
  color: #101010;
}
.rowSecond {
  text-align: right;
  span {
    color: #101010;
  }
  color: #9a9a9a;
}
.rowlast {
  text-align: right;
  padding-right: 10px;
  color: #101010;
  .red {
    color: #f44743;
  }
}
</style>