src/views/examinationPaper/edit.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>修改答案</span>
      </template>
    </back-box>
    <div class="content">
      <p class="tips">
        <i class="fa fa-bell-o"></i> 2022-11-24 14:30张老师修改了答案。
      </p>
      <div class="answer-title">
        <p class="name">{{ form.title }}</p>
        <p class="totals">卷面总分：{{ allScore }}分</p>
      </div>
      <div v-for="(question, index) in form.questionList" :key="index">
        <p class="question-title">
          <span>{{ setBigNum(index) }}、</span>
          <el-input
            class="ipt"
            v-model.trim="question.questionTitle"
            maxlength="30"
            placeholder="填写大题名称"
          ></el-input>
          <span>共 {{ setScore(question) }} 分</span>
        </p>
        <ul class="questions-ul">
          <li class="sub-questions">
            <div class="qs-num">题号</div>
            <div class="qs-type">题型</div>
            <div class="qs-score">分数</div>
            <div class="qs-options qs-options2">选项设置</div>
          </li>
          <li
            class="sub-questions"
            v-for="(subQuestions, indexs) in question.subQuestions"
            :key="indexs"
          >
            <div class="qs-num">{{ subQuestions.questionIndex }}</div>
            <div class="qs-type">
              {{ setSubPro(subQuestions.questionType) }}
            </div>
            <div class="qs-score">
              <el-input-number
                class="number-ipt"
                size="medium"
                :min="1"
                :max="200"
                :precision="2"
                v-model="subQuestions.score"
                label="单题分值"
              ></el-input-number>
            </div>
            <div class="qs-options qs-options2">
              <p v-if="subQuestions.questionType == 5">--</p>
              <p v-if="subQuestions.questionType == 4" class="answer-box">
                <span
                  class="answer-s"
                  :class="subQuestions.correctAnswer == 1 ? 'active' : ''"
                  @click="subQuestions.correctAnswer = 1"
                  >✓</span
                >
                <span
                  class="answer-s"
                  :class="subQuestions.correctAnswer == 2 ? 'active' : ''"
                  @click="subQuestions.correctAnswer = 2"
                  >✗</span
                >
              </p>
              <p v-if="subQuestions.questionType == 3" class="answer-box">
                <span
                  class="answer-s"
                  v-for="option in subQuestions.answerOptions.split(',')"
                  :class="
                    subQuestions.correctAnswer.includes(option) ? 'active' : ''
                  "
                  :key="option"
                  @click="changAnswer(subQuestions, option)"
                  >{{ option }}</span
                >
              </p>
              <p v-if="subQuestions.questionType == 2" class="answer-box">
                <span
                  class="answer-s"
                  v-for="option in subQuestions.answerOptions.split(',')"
                  :class="subQuestions.correctAnswer == option ? 'active' : ''"
                  :key="option"
                  @click="subQuestions.correctAnswer = option"
                  >{{ option }}</span
                >
              </p>
            </div>
          </li>
        </ul>
      </div>
      <div class="btn-box">
        <el-button type="danger" plain round @click="linkBack">取消</el-button>
        <el-button type="primary" round @click="save">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { deepClone } from "utils";
export default {
  data() {
    return {
      questionList: [],
      form: {
        //答题卡详情
        title: "",
        tag: "",
        subjectId: "",
        examsDuration: 90,
        gradeName: "",
        share: 1,
        questionList: [],
      },
    };
  },
  computed: {
    allScore: function () {
      let score = 0;
      this.form.questionList.map((item) => {
        score += item.subQuestions.reduce((a, b) => {
          return a + Number(b.score);
        }, 0);
      }, 0);
      return Number(score).toFixed(2);
    },
  },
  created() {
    this._QueryDetail();
  },
  methods: {
    linkBack() {
      this.$router.push({
        path: "/examinationPaper",
      });
    },
    setSubPro(type) {
      let tit;
      switch (type) {
        case 2:
          tit = "单选题";
          break;
        case 3:
          tit = "多选题";
          break;
        case 4:
          tit = "判断题";
          break;
        case 5:
          tit = "主观题";
          break;
      }
      return tit;
    },
    setBigNum(num) {
      let txt = "";
      let bigNum = [
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
        "十",
        "十一",
        "十二",
        "十三",
        "十四",
        "十五",
        "十六",
        "十七",
        "十八",
        "十九",
        "二十",
      ];
      txt = bigNum[num];
      return txt;
    },
    setScore(question) {
      let score = question.subQuestions.reduce((a, b) => {
        return a + b.score;
      }, 0);
      return score;
    },
    changAnswer(sub, option) {
      //设置多选答案
      let str = new RegExp(option, "g");
      if (sub.correctAnswer?.includes(option)) {
        sub.correctAnswer = sub.correctAnswer.replace(str, "");
      } else {
        let arrs = (sub.correctAnswer && sub.correctAnswer.split("")) || [];
        arrs.push(option);
        sub.correctAnswer = arrs.sort().join("");
      }
    },
    async save() {
      let questionList = this.form.questionList.map((item) => {
        item.score = null;
        // item.questionId = "";
        // item.questionIndex = "";
        return item;
      });
      //更新答题卡
      const { data, status, info } = await this.$request.modifyPaper({
        paperId: this.form.id,
        questionList: questionList,
      });
      if (status == 0) {
        this.$router.push({
          path: "/examinationPaper",
        });
      } else {
        this.$message.error(info);
      }
    },
    async _QueryDetail() {
      //查询年级列表
      const { data, status, info } = await this.$request.fetchPaperDetail({
        paperId: this.$route.query.paperId,
      });
      if (status == 0) {
        this.form = deepClone(data);
        this.form.questionList.map((item) => {
          item.score = "";
        });
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  box-sizing: border-box;
  padding: 0 50px;
  .ml-20 {
    margin-left: 20px;
  }
  .btn-box {
    text-align: right;
    margin-left: 140px;
  }
  .tips {
    height: 48px;
    line-height: 48px;
    padding: 0 16px;
    border: 1px solid #fac7cc;
    background-color: #ffebec;
    font-size: 14px;
    color: #fd9795;
    margin: 10px 0 20px 0;
    .fa-bell-o {
      font-size: 18px;
      margin-right: 5px;
    }
  }
}
.answer-title {
  text-align: center;
  font-size: 20px;
  color: #333;
  font-weight: 700;
  padding-bottom: 20px;
  .totals {
    font-size: 16px;
    color: #888;
    font-weight: normal;
  }
}
.question-title {
  line-height: 40px;
  .ipt {
    width: 300px;
    margin: 0 16px 0 10px;
    :deep(.el-input__inner) {
      border-radius: 20px;
      border-color: #667ffd;
      background: rgba($color: #667ffd, $alpha: 0.05);
    }
  }
  .delete {
    margin-right: 8px;
  }
  .title-txt {
    margin-right: 20px;
    font-size: 16px;
    font-weight: 700;
  }
}
.el-input-number {
  width: 140px;
}
.questions-ul {
  border-left: 1px solid #e2e2e2;
  border-top: 1px solid #e2e2e2;
  margin: 12px 0;
}
.sub-questions {
  width: 100%;
  display: flex;
  border-bottom: 1px solid #e2e2e2;
  & > div {
    min-height: 40px;
    padding: 5px;
    flex-shrink: 0;
    border-right: 1px solid #e2e2e2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .qs-num {
    width: 80px;
  }
  .qs-type {
    width: 160px;
  }
  .qs-score,
  .qs-partScore {
    width: 160px;
  }
  .qs-options {
    flex: 1;
  }
  .qs-set {
    width: 80px;
  }
  .qs-options2 {
    text-align: left;
    justify-content: flex-start;
    padding-left: 20px;
    .answer-s {
      cursor: pointer;
    }
  }
  :deep(.el-select) {
    .el-input__inner {
      border-radius: 20px;
      border-color: #667ffd;
      width: 150px;
      height: 32px;
      line-height: 32px;
      background: rgba($color: #667ffd, $alpha: 0.05);
    }
    .el-input__icon {
      line-height: 32px;
    }
  }
}
</style>