union-question-web/src/modules/question/components/QuestionStatisticsDialog.vue

<template>
  <el-dialog
    class="question-statistics-dialog"
    :visible.sync="modalIsShow"
    title="试题统计"
    :modal="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    fullscreen
    @open="visibleChange"
  >
    <div class="margin-bottom-15">
      <el-button
        v-for="item in types"
        :key="item.code"
        :type="item.code === curType ? 'primary' : 'default'"
        @click="toSwitch(item)"
        >{{ item.name }}</el-button
      >
    </div>

    <div class="part-box">
      <el-table
        v-if="curType === 'base'"
        key="base"
        :data="baseDataList"
        :span-method="spanMethod"
      >
        <el-table-column label="题型">
          <el-table-column
            label="题型大类"
            prop="questionMainTypeName"
          ></el-table-column>
          <el-table-column
            label="题型小类"
            prop="questionTypeName"
          ></el-table-column>
        </el-table-column>
        <el-table-column
          label="试题数量"
          prop="questionDifficultInfoCont"
        ></el-table-column>
      </el-table>

      <el-form v-if="curType === 'blue'">
        <el-form-item label="可选属性">
          <el-select v-model="curProperty" @change="propertyChange">
            <el-option
              v-for="item in blueDataList"
              :key="item.name"
              :value="item.name"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table
        v-if="curType === 'blue'"
        key="blue"
        :data="curBlueDataList"
        :span-method="spanMethod"
      >
        <el-table-column label="蓝图属性" width="520" fixed="left">
          <el-table-column
            label="一级属性"
            width="260"
            prop="firstPropertyName"
          ></el-table-column>
          <el-table-column
            label="二级属性"
            width="260"
            prop="secondPropertyName"
          ></el-table-column>
        </el-table-column>
        <el-table-column label="题型">
          <el-table-column
            v-for="item in blueQtypes"
            :key="item"
            :label="item"
            :prop="item"
            min-width="220"
          ></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import {
  questionDistributionStatisticsApi,
  questionPropertyDistributionStatisticsApi,
} from "../api";

export default {
  name: "QuestionStatisticsDialog",
  props: {
    courseId: {
      type: [String, Number],
      default: null,
    },
  },
  data() {
    return {
      modalIsShow: false,
      filter: {
        courseId: "",
        coursePropertyId: "",
      },
      types: [
        {
          name: "基础构成",
          code: "base",
        },
        {
          name: "蓝图分布",
          code: "blue",
        },
      ],
      curType: "base",
      baseDataList: [],
      blueDataList: [],
      blueQtypes: [],
      curProperty: "",
      curBlueDataList: [],
    };
  },
  methods: {
    visibleChange() {
      this.filter.courseId = this.courseId;
      this.toSwitch({ code: "base" });
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    toSwitch(item) {
      this.curType = item.code;
      this.getData();
    },
    spanMethod({ row, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: row.rowspan || 0,
          colspan: 1,
        };
      }
    },
    getData() {
      if (this.curType === "base") {
        this.getBaseData();
      } else {
        this.getBlueData();
      }
    },
    getQuesDiffContent({ questionCount, questionDifficultInfo }) {
      if (!questionCount) return "--";
      const qinfo = questionDifficultInfo
        .map((item) => `${item.difficultLevel}：${item.questionCount}`)
        .join("，");
      return `${questionCount}（${qinfo}）`;
    },
    async getBaseData() {
      const res = await questionDistributionStatisticsApi(this.courseId);
      // console.log(res.data);
      // parse data
      let baseDataList = [];
      res.data.forEach((mainGroup) => {
        const rowspan = mainGroup.questionTypeStatisticList.length;
        mainGroup.questionTypeStatisticList.forEach((quesItem, index) => {
          let nitem = {
            questionMainTypeName: mainGroup.questionMainTypeName,
            questionTypeName: quesItem.questionTypeName,
            questionDifficultInfoCont: this.getQuesDiffContent(quesItem),
          };
          if (index === 0) nitem.rowspan = rowspan;
          baseDataList.push(nitem);
        });
      });
      this.baseDataList = baseDataList;
    },
    async getBlueData() {
      const res = await questionPropertyDistributionStatisticsApi(this.filter);

      this.blueDataList = res.data.map((mainGroup) => {
        let dataList = [];
        mainGroup.distributeInfo.forEach((item) => {
          if (!item.children || !item.children.length) return;
          const rowspan = item.children.length;
          item.children.forEach((elem, index) => {
            let nelem = {
              firstPropertyName: item.propertyName,
              secondPropertyName: elem.propertyName,
            };
            if (index === 0) nelem.rowspan = rowspan;

            elem.distributeByQuestionTypeList.forEach((qt) => {
              nelem[qt.questionStructTypeName] = this.getQuesDiffContent(qt);
            });
            if (!this.blueQtypes.length) {
              this.blueQtypes = elem.distributeByQuestionTypeList.map(
                (qt) => qt.questionStructTypeName
              );
            }

            dataList.push(nelem);
          });
        });
        return {
          name: mainGroup.coursePropertyName,
          dataList,
        };
      });
      if (!this.blueDataList.length) return;
      this.curProperty = this.blueDataList[0].name;
      this.curBlueDataList = this.blueDataList[0].dataList;
    },
    propertyChange() {
      const data = this.blueDataList.find(
        (item) => item.name === this.curProperty
      );
      if (!data) return;
      this.curBlueDataList = data.dataList;
    },
  },
};
</script>