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