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 curTopicId = 0;
      this.topics.forEach((topic) => {
        if (!topic.parent) return;

        if (curTopicId !== topic.parent.id) {
          curTopicId = topic.parent.id;
          let questionsCount = 0;
          if (topic.type === "COMPOSITION") {
            questionsCount = 1;
          } else {
            questionsCount = topic.parent.questionsCount;
          }
          let data = {
            topicNo: topic.parent.topicNo,
            topicName: topic.parent.topicName,
            questionsCount,
          };
          structData.push(data);
        }
      });

      this.structData = structData;
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
  },
};
</script>