teachcloud-print-web/src/modules/course/components/SetBlueDialog.vue

<template>
  <div>
    <el-dialog
      :visible.sync="modalIsShow"
      title="设置试卷蓝图"
      top="10px"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      @open="visibleChange"
    >
      <el-table :data="dataList">
        <el-table-column
          prop="mainNumber"
          label="大题号"
          width="80px"
        ></el-table-column>
        <el-table-column
          prop="subNumber"
          label="小题号"
          width="80px"
        ></el-table-column>
        <el-table-column prop="dimensionList" label="知识点">
          <template slot-scope="scope">
            <template v-for="target in scope.row.targetList">
              <p
                v-for="item in target.dimensionList"
                :key="`${target.targetId}_${item.dimensionId}`"
              >
                {{ item.dimensionName }}
              </p>
            </template>
          </template>
        </el-table-column>
        <el-table-column class-name="action-column" label="操作" width="110px">
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="toLink(scope.row)"
              >关联知识点</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer">
        <el-button type="primary" :disabled="isSubmit" @click="submit"
          >确认</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>

    <!-- 设置知识点 -->
    <select-blue-dimension-dialog
      ref="SelectBlueDimensionDialog"
      :course="course"
      :selected-data="selectedData"
      @confirm="dimensionSelected"
    ></select-blue-dimension-dialog>
  </div>
</template>

<script>
import { endScorePaperPositiveDetail, endScorePaperPositiveSave } from "../api";
import SelectBlueDimensionDialog from "./SelectBlueDimensionDialog.vue";

export default {
  name: "SetBlueDialog",
  components: { SelectBlueDimensionDialog },
  props: {
    course: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      isSubmit: false,
      dataList: [],
      curRow: {},
      selectedData: [],
    };
  },
  methods: {
    async getBlueDetail() {
      const res = await endScorePaperPositiveDetail({
        examId: this.course.examId,
        courseCode: this.course.courseCode,
        paperNumber: this.course.paperNumber,
      });
      this.dataList = res || [];
    },
    visibleChange() {
      this.getBlueDetail();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    checkData() {
      return !this.dataList.some(
        (item) => !item.targetList || !item.targetList.length
      );
    },
    toLink(row) {
      this.curRow = row;
      this.selectedData = [];
      row.targetList.forEach((target) => {
        target.dimensionList.forEach((dimension) => {
          this.selectedData.push(dimension.dimensionId);
        });
      });
      this.$refs.SelectBlueDimensionDialog.open();
    },
    dimensionSelected(targetList) {
      this.curRow.targetList = targetList;
    },
    async submit() {
      if (!this.checkData()) {
        this.$message.error("还有小题未设置知识点，请完成设置！");
        return;
      }
      if (this.isSubmit) return;
      this.isSubmit = true;
      const datas = {
        examId: this.course.examId,
        courseCode: this.course.courseCode,
        paperNumber: this.course.paperNumber,
        paperStruct: this.dataList,
      };
      const data = await endScorePaperPositiveSave(datas).catch(() => {});
      this.isSubmit = false;

      if (!data) return;

      this.$message.success("修改成功！");
      this.$emit("modified");
      this.cancel();
    },
  },
};
</script>