union-question-web/src/modules/paper/components/BuildPaperSimple.vue

<template>
  <div class="build-paper-simple">
    <div class="build-step-title">
      <h3><span>确定构成</span></h3>
    </div>
    <el-table :data="baseDataList" :span-method="spanMethod">
      <el-table-column label="题型" align="center">
        <el-table-column
          label="题型大类"
          prop="questionMainTypeName"
          align="center"
          min-width="120"
        ></el-table-column>
        <el-table-column
          label="题型小类"
          prop="questionTypeName"
          align="center"
          min-width="120"
        ></el-table-column>
      </el-table-column>
      <el-table-column
        label="试题数量"
        prop="questionCount"
        align="center"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="抽取试题数量"
        prop="questionSelectCount"
        min-width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.questionSelectCount"
            placeholder="请输入抽取试题数量"
            :step="1"
            :min="1"
            :max="999"
            :controls="false"
            :precision="0"
            step-strictly
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        label="试题分值"
        prop="questionScore"
        min-width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.questionScore"
            placeholder="请输入抽取试题分值"
            :step="0.1"
            :min="0.1"
            :max="999"
            :controls="false"
            :precision="1"
            step-strictly
          ></el-input-number>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

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

export default {
  name: "BuildPaperSimple",
  data() {
    return {
      baseDataList: [],
    };
  },
  mounted() {
    this.getBaseData();
  },
  methods: {
    spanMethod({ row, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: row.rowspan || 0,
          colspan: 1,
        };
      }
    },
    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,
            questionCount: quesItem.questionCount,
            questionSelectCount: undefined,
            questionScore: undefined,
          };
          if (index === 0) nitem.rowspan = rowspan;
          baseDataList.push(nitem);
        });
      });
      this.baseDataList = baseDataList;
    },
    getData() {
      return this.baseDataList;
    },
  },
};
</script>