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;
        let questionsCount = 0;
        if (topic.type === "EXPLAIN") {
          questionsCount = topic.parent.questionsCount;
        } else if (topic.type === "COMPOSITION") {
          questionsCount = 1;
        } else {
          questionsCount = topic.questionsCount;
        }

        if (structData[curTopicNo]) {
          if (topic.type !== "EXPLAIN") {
            structData[curTopicNo].questionsCount += questionsCount;
          }
        } else {
          let sd = {
            topicNo: curTopicNo,
            topicName: topic.parent.topicName,
            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>