teachcloud-print-web/card/components/PageStructDialog.vue

<template>
  <el-dialog
    class="page-struct-dialog"
    :visible.sync="modalIsShow"
    title="题卡结构"
    top="10vh"
    width="600px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @open="visibleChange"
  >
    <el-table :data="structData">
      <el-table-column
        prop="topicNo"
        label="大题号"
        width="80"
      ></el-table-column>
      <el-table-column prop="topicName" label="大题名称"></el-table-column>
      <el-table-column prop="questionsCount" label="小题数" width="80">
        <span slot-scope="scope">{{ scope.row.questionsCount || "--" }}</span>
      </el-table-column>
    </el-table>

    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "PageStructDialog",
  data() {
    return {
      modalIsShow: false,
      structData: []
    };
  },
  computed: {
    ...mapState("card", ["topics"])
  },
  methods: {
    visibleChange() {
      let structData = {};
      let curTopicNo = "";
      this.topics.forEach(topic => {
        if (!topic.parent) return;
        curTopicNo = topic.parent.topicNo;
        if (structData[curTopicNo]) {
          if (topic.type !== "COMPOSITION" && topic.type !== "EXPLAIN") {
            structData[curTopicNo].questionsCount += topic.questionsCount;
          }
        } else {
          let sd = {
            topicNo: curTopicNo,
            topicName: topic.parent.topicName,
            questionsCount: topic.questionsCount
          };
          if (topic.type === "EXPLAIN")
            sd.questionsCount = topic.parent.questionsCount;

          structData[curTopicNo] = sd;
        }
      });

      structData = Object.values(structData);
      structData.sort((a, b) => a.topicNo - b.topicNo);
      this.structData = structData;
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    }
  }
};
</script>