front/src/views/idc/EvaluationDatabase/detailList.bak.vue

<template>
  <div class="app-container">
    <el-card class="box-card" style="margin-bottom: 30px">
      <el-row :gutter="24">
        <el-col :span="5">
          <div style="padding-right: 20px">
            {{ evaluation.name }}
          </div>
        </el-col>
        <el-col :span="5" style="text-align: right">
          <el-radio-group v-model="option" @change="onOptionChanged">
            <el-radio-button
              v-for="i in options"
              :key="i.value"
              :label="i.value"
              style="border-radius: 18px"
              >{{ i.name }}</el-radio-button
            >
          </el-radio-group>
        </el-col>
        <el-col :span="12" style="text-align: left">
          <el-radio-group
            style="margin-left: 30px"
            v-model="subOption"
            v-if="subOptions.length"
            @change="onSubOptionChanged"
          >
            <el-radio-button
              v-for="i in subOptions"
              :key="i.value"
              :label="i.value"
              style="border-radius: 18px"
              >{{ i.name }}</el-radio-button
            >
          </el-radio-group>
          <span v-if="subOptions.length == 0" v-html="'\u00a0'"></span>
        </el-col>
        <el-col :span="2" style="text-align: right">
          <el-button size="small" @click="back()" round>返回</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-table
      :key="subjectiveRefreshKey"
      v-loading="loading"
      :data="dynamicRows"
      :span-method="spanMethod"
      style="width: 100%"
      v-if="!isOptionObjective"
    >
      <el-table-column label="序号" type="index" align="center" width="50" />
      <el-table-column label="姓名" prop="studentName" align="center">
        <template slot-scope="scope">
          <table
            border="0"
            width="100%"
            bordercolor="#fff"
            bgcolor="#fff"
            v-if="scope.$index == dynamicRows.length - 1"
          >
            <tr>
              <th rowspan="3" style="border: none">班级统计</th>
              <th style="border: none; text-align: center">优</th>
            </tr>
            <tr>
              <th style="border: none; text-align: center">良</th>
            </tr>
            <tr>
              <th style="border: none; text-align: center">中</th>
            </tr>
          </table>
          <span v-else>{{ scope.row.studentName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(header, idx) in dynamicHeaders"
        :key="idx"
        align="center"
      >
        <template #header="">
          <div v-if="header.score">
            <div>{{ header.name }}</div>
            <div>({{ header.score }}分)</div>
          </div>
          <span v-else>{{ header.name || header }}</span>
        </template>
        <template slot-scope="scope">
          <table
            border="0"
            width="100%"
            bordercolor="#fff"
            bgcolor="#fff"
            v-if="scope.$index == dynamicRows.length - 1"
          >
            <tr>
              <th style="border: none; text-align: center">
                {{ dynamicStatistics[idx][0] }}
              </th>
            </tr>
            <tr>
              <th style="border: none; text-align: center">
                {{ dynamicStatistics[idx][1] }}
              </th>
            </tr>
            <tr>
              <th style="border: none; text-align: center">
                {{ dynamicStatistics[idx][2] }}
              </th>
            </tr>
          </table>
          <span v-else>{{ dynamicRows[scope.$index].scores[idx] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="个人统计" align="center">
        <el-table-column label="优" width="80px" align="center">
          <template slot-scope="scope">
            <span>{{ dynamicRows[scope.$index].stats[0] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="良" width="80px" align="center">
          <template slot-scope="scope">
            <span>{{ dynamicRows[scope.$index].stats[1] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="中" width="80px" align="center">
          <template slot-scope="scope">
            <span>{{ dynamicRows[scope.$index].stats[2] }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.$index != dynamicRows.length - 1"
            type="text"
            icon="el-icon-view"
            @click="userDetail(scope.$index)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-table
      :key="objectiveRefreshKey"
      v-loading="loading"
      :data="dynamicRows"
      :span-method="spanMethod"
      style="width: 100%"
      v-if="isOptionObjective"
    >
      <el-table-column label="序号" type="index" align="center" width="50" />
      <el-table-column label="姓名" prop="studentName" align="center">
        <template slot-scope="scope">
          <table
            border="0"
            width="100%"
            bordercolor="#fff"
            bgcolor="#fff"
            v-if="scope.$index == dynamicRows.length - 1"
          >
            <tr>
              <th :rowspan="option == 1 ? 1 : 2" style="border: none">
                班级统计
              </th>
              <th v-if="option != 1">已掌握</th>
            </tr>
            <tr v-if="option != 1">
              <th>未掌握</th>
            </tr>
          </table>
          <span v-else>{{ scope.row.studentName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(header, idx) in dynamicHeaders"
        :key="idx"
        align="center"
      >
        <template #header>
          <div v-if="header.score">
            <div>{{ header.name }}</div>
            <div>({{ header.score }}分)</div>
          </div>
          <span v-else>{{ header.name || header }}</span>
        </template>
        <template slot-scope="scope">
          <table
            border="0"
            width="100%"
            bordercolor="#fff"
            bgcolor="#fff"
            v-if="scope.$index == dynamicRows.length - 1"
          >
            <tr>
              <th style="border: none; text-align: center" v-if="option == 1">
                {{ dynamicStatistics[idx][0] }}
              </th>
            </tr>
            <tr v-if="option != 1">
              <th style="border: none; text-align: center" v-if="dynamicStatistics[idx] && dynamicStatistics[idx].length>0">
                {{
                  dynamicStatistics[idx] && dynamicStatistics[idx][0]
                }}人
              </th>
            </tr>
            <tr v-if="option != 1">
              <th style="border: none; text-align: center" v-if="dynamicStatistics[idx] && dynamicStatistics[idx].length>1">
                {{
                  dynamicStatistics[idx] && dynamicStatistics[idx][1]
                }}人
              </th>
            </tr>
          </table>
          <span
            v-else-if="dynamicRows[scope.$index].scores[idx] == ''"
            v-html="'\u00a0'"
          ></span>
          <span v-else-if="option != 1">{{ scope.row.scores[idx] }}分</span>
          <span
            v-else-if="convertToBoolean(scope.row.scores[idx])"
            class="el-icon-circle-check"
            style="color: #67c23a; font-size: 24px"
          ></span>
          <span
            v-else
            class="el-icon-circle-close"
            style="color: #f56c6c; font-size: 24px"
          ></span>
        </template>
      </el-table-column>
      <el-table-column :label="option == 1 ? '个人统计':'掌握比'" align="center">
        <template slot-scope="scope">
          <span v-if="scope.$index != dynamicRows.length - 1">{{
            dynamicRows[scope.$index].stats[0]
          }}</span>
          <span v-else v-html="'\u00a0'"></span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.$index != dynamicRows.length - 1"
            type="text"
            icon="el-icon-view"
            @click="userDetail(scope.$index)"
            >查看详情</el-button
          >
          <span v-else v-html="'\u00a0'"></span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getEvaluationQuestionTypes, getClassStat } from "@/api/webApi/front";

export default {
  data() {
    return {
      loading: false,

      evaluation: {},
      queryParams: {
        evaluationClassId: "",
        questionType: "1",
        questionOptions: "0",
      },
      options: [],
      subOptions: [],
      option: "", // 1 客观题, 2 主观题
      subOption: "",
      isOptionObjective: true, // true：客观题, false: 主观题
      objectiveRefreshKey: "",
      subjectiveRefreshKey: "",
      dynamicHeaders: [],
      dynamicRows: [],
      dynamicStatistics: {},
      studentStatsKeyPrefix: "dynamicItem_stats_",
    };
  },
  created() {
    this.evaluation = this.$route.query;
    this.queryParams.evaluationClassId = this.evaluation.evaluationClassId;
    this.queryParams.evaluationId = this.evaluation.evaluationId;
    this.getOptions();
  },
  methods: {
    back() {
      this.$router.back();
    },
    userDetail(idx) {
      const row = this.dynamicRows[idx];
      const nextParams = {
        evaluationName: this.evaluation.name,
        examineeId: row.examineeId,
        studentName: row.studentName,
      };
      this.$router.push({
        path: "/idc/EvaluationDatabase/statistics",
        query: nextParams,
      });
    },
    onOptionChanged(op) {
      this.subOptions = this.options.find((o) => o.value == op).options || [];
      if (this.subOptions.length > 0) {
        this.subOption = this.subOptions[0].value;
        this.onSubOptionChanged(this.subOption);
      }
    },
    onSubOptionChanged(op) {
      this.getList();
    },
    getOptions() {
      // this.getDicts("question_type").then((rp) => {
      //   console.log("getDicts question_type rep =", rp);
      //   var map = {};
      //   rp.data.forEach((r) => (map[r.dictValue] = r.dictLabel));
      getEvaluationQuestionTypes(this.evaluation.evaluationClassId).then(
        (rep) => {
          console.log("getEvaluationQuestionTypes rep =", rep);
          if (rep.code == 200 || rep.code == 0) {
            // // 将options的显示替换为字典配置
            // rep.data.forEach(
            //   (item) => (item.name = map[item.name] || item.name)
            // );
            this.options = rep.data;
            this.option = this.options[0].value;
            this.onOptionChanged(this.option);
          } else {
            this.msgError(rep.msg || "getEvaluationQuestionTypes请求异常");
          }
        }
      );
      // });
    },
    getList() {
      this.loading = true;
      this.queryParams.questionType = this.option;
      this.queryParams.questionOptions = this.subOption;
      getClassStat(this.queryParams).then((rep) => {
        console.log("getClassStat rep =", rep);
        if (rep.code == 200 || rep.code == 0) {
          this.resolveDynamicData(rep.data);
        } else {
          this.msgError(rep.msg || "getClassStat请求异常");
        }
        this.loading = false;
      });
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 数据最后一行，第1、2列合并
      if (rowIndex == this.dynamicRows.length - 1) {
        if (columnIndex == 0) return [0, 0];
        else if (columnIndex == 1) return [1, 2];
      }
      return [1, 1];
    },
    resolveDynamicData(data) {
      // 先解析主客观题类型
      this.isOptionObjective = !(
        data.datas.length > 0 && data.datas[0].stats.length > 2
      );
      console.log("isOptionObjective =", this.isOptionObjective);

      const randomKey = new Date().toString();
      if (this.isOptionObjective) this.objectiveRefreshKey = randomKey;
      else this.subjectiveRefreshKey = randomKey;

      this.dynamicHeaders = data.headers; // 开头的序号与姓名为固定列
      this.dynamicRows = data.datas;
      this.dynamicStatistics = data.stats;

      // 伪造一行，用行替换成统计行
      if (this.dynamicRows.length > 0) this.dynamicRows.push({});
      console.log(
        "resolveDynamicData this.dynamicHeaders,this.dynamicRows,this.dynamicStatistics",
        this.dynamicHeaders,
        this.dynamicRows,
        this.dynamicStatistics
      );
    },
    convertToBoolean(raw) {
      if (raw == "true" || raw == "True") return true;
      if (raw == "false" || raw == "False") return false;
      return !!raw;
    },
  },
};
</script>

<style>
</style>