dy-admin-manager/src/views/afterSchoolManager/components/examinationDetail.vue

<template>
  <div>
    <div>
      <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
        style="width: 100%"
        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.detailDtos"
            >
              <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.detailDtos"
              :key="index"
            >
              <el-col :span="12"
                ><div class="rowFirst">{{ item.musicScoreName }}</div></el-col
              >
              <el-col :span="6"
                ><div class="rowSecond">
                  <span>{{ item.heardLevel | palyLevelFilter }}</span>
                </div></el-col
              >
              <el-col :span="6"
                ><div class="rowlast">
                  <span
                    :class="
                      item.trainingScore >= item.standardScore ? '' : 'red'
                    "
                    >{{ item.trainingScore }}</span
                  >
                  / {{ item.standardScore }} 分
                </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="trainingTime" align="left" label="完成时间">
          <template slot-scope="scope">
            <div>{{ scope.row.trainingTime | dateForMinFormat }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="finishFlag" align="right" label="测验分数">
          <template slot-scope="scope">
            <div>{{ scope.row.trainingScore }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import {
  getLessonExaminationStudent,
  getExaminationSubjectPublic
} from "../api";
export default {
  props: ["courseScheduleId", "type"],
  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 getLessonExaminationStudent({
          lessonExaminationId: this.courseScheduleId,
          subjectId: this.subjectId
        });
        this.list = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    async getPublicSubject() {
      try {
        const res = await getExaminationSubjectPublic({
          lessonExaminationId: this.courseScheduleId
        });
        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;
  }
}

::v-deep.el-row {
  line-height: 44px;
}
.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>