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

<template>
  <el-dialog
    title="蓝图分布"
    width="100%"
    :visible.sync="modalIsShow"
    :modal="false"
    append-to-body
    custom-class="side-dialog"
    @open="visibleChange"
  >
    <el-form>
      <el-form-item label="可选属性">
        <property-select
          v-model="coursePropertyId"
          :course-id="courseId"
          @change="getPaperData"
        >
        </property-select>
      </el-form-item>
    </el-form>
    <el-table
      :data="paperData.data"
      style="width: 100%"
      border
      :span-method="objectSpanMethod"
    >
      <el-table-column label="蓝图属性" align="center">
        <el-table-column
          v-for="(colval, colIndex) in headFirst"
          :key="colIndex"
        >
          <template slot="header">
            <span style="margin-left: 10px">{{ colval }}</span>
          </template>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row[colIndex] }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="大题" align="center">
        <el-table-column
          v-for="(colval, colIndex) in headSecond"
          :key="colIndex"
        >
          <template slot="header">
            <span style="margin-left: 10px">{{ colval }}</span>
          </template>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row[colIndex + 2] }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

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

export default {
  name: "PaperBlueInfo",
  props: {
    paperId: {
      type: [String, Number],
      default: "",
    },
    courseId: {
      type: [String, Number],
      default: null,
    },
  },
  data() {
    return {
      modalIsShow: false,
      coursePropertyId: "",
      paperData: { head: [] },
      headFirst: [],
      headSecond: [],
    };
  },
  methods: {
    visibleChange() {
      this.getPaperData();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getPaperData() {
      if (!this.coursePropertyId) return;
      const res = await paperBlueInfoApi({
        paperId: this.paperId,
        courseId: this.courseId,
        coursePropertyId: this.coursePropertyId,
      });
      this.paperData = res.data;
      this.headFirst = this.paperData.head.slice(0, 2);
      this.headSecond = this.paperData.head.slice(2);
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        for (let span of this.paperData.rowspan) {
          if (span[0] == rowIndex) {
            return {
              rowspan: span[1] - span[0] + 1,
              colspan: 1,
            };
          } else if (span[0] < rowIndex && span[1] >= rowIndex) {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
      }
    },
  },
};
</script>