dy-admin-manager/src/views/afterSchoolManager/components/studentWroks.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.studentLessonTrainingDetail"
            >
              <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>
          </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="left" label="练习情况">
          <template slot-scope="scope">
            <div>{{ scope.row.finishFlag ? "已完成" : "未完成" }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="finishFlag" align="right" label="练习内容">
        <template slot-scope="scope">
          <el-button type="text" @click="onDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="userName + '练习详情'"
      :visible.sync="classVisible"
      width="800px"
      append-to-body
      v-if="classVisible"
    >
      <homeworkDetail :list="selectItem" />
    </el-dialog>
    </div>
  </div>
</template>
<script>
import homeworkDetail from '@/views/attendanceManager/modal/homework-detail.vue'
import { getHomeworkStudent, getHomeworkSubjectPublic } from "../api";
export default {
  props: ["courseScheduleId", "type"],
  components: {homeworkDetail},
  data() {
    return {
      subjectId: [],
      list: [],
      subjectList: [],
      classVisible: false,
      username: '',
      selectItem: [],
    };
  },
  mounted() {
    if (this.courseScheduleId) {
      this.getStudentList(this.courseScheduleId);
      console.log(this.type, "type");
      this.getPublicSubject();
    }
  },

  methods: {
    onDetail(row) {
      this.userName = row.userName
      this.selectItem = row.studentLessonTrainingDetail || []
      this.classVisible = true
    },
    async getStudentList() {
      try {
        const res = await getHomeworkStudent({
          courseScheduleId: this.courseScheduleId,
          type: this.type,
          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: this.type
        });
        this.subjectList = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    checkSubject(val) {
      console.log(val, "checkSubject", this.subjectId);
      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>