AddQuestion.vue

<template>
  <div ref="myBody" class="add-question flex">
    <div class="text flex">
      <div class="left">
        目前录入题目是第<span>{{ questionNextNum }}</span
        >道题
      </div>
      <div class="right">{{ courseName }}</div>
    </div>

    <el-form class="form flex" ref="form" :model="form" label-width="auto">
      <!-- <div class="top flex"> -->
      <div>
        <el-form-item
          label="题目内容"
          prop="topicTitle"
          :rules="{
            required: true,
            message: '必须输入题目内容',
            trigger: 'blur',
          }"
        >
          <el-input
            type="textarea"
            placeholder="多行输入"
            resize="none"
            rows="4"
            v-model="form.topicTitle"
          >
          </el-input>
        </el-form-item>
      </div>

      <div class="bottom">
        <!-- <el-form-item label="选项1" prop="title">
          <el-input v-model="form.title" placeholder="请输入"></el-input>
        </el-form-item> -->
        <el-form-item
          v-for="(question, index) in form.questions"
          :label="'选项' + (index + 1)"
          :key="question.key"
          :prop="'questions.' + index + '.value'"
          :rules="
            index === 0
              ? {
                  required: true,
                  message: '第一项不能为空不能为空',
                  trigger: 'blur',
                }
              : {}
          "
        >
          <div class="add-select flex">
            <el-input
              type="textarea"
              placeholder="多行输入"
              style="flex: 1; margin-right: 10px"
              rows="2"
              v-model="question.value"
            ></el-input>
            <div class="flex algin-items">
              <div
                @click="rightAnswerClick(index)"
                class="right"
                :class="{ active: answerNum === index }"
              >
                设为正确答案
              </div>
              <el-button
                size="mini"
                type="danger"
                v-if="index > 0"
                @click.prevent="removeDomain(question)"
                >删除</el-button
              >
            </div>
          </div>
        </el-form-item>

        <el-form-item
          class="noAttr"
          :label="`选项${form.questions.length + 1}`"
          prop=""
        >
          <div class="add-select flex">
            <el-input
              type="textarea"
              placeholder="多行输入"
              resize="none"
              rows="2"
              v-model="addValue"
              style="flex: 1; margin-right: 10px"
            >
            </el-input>
            <div class="flex algin-items">
              <div
                @click="rightAnswerClick(form.questions.length)"
                class="right"
                :class="{ active: answerNum === form.questions.length }"
              >
                设为正确答案
              </div>

              <el-button
                size="mini"
                type="primary"
                @click.prevent="add(addValue)"
                >新增</el-button
              >
            </div>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
// import {
//   addQuestion,
//   checkQuestion,
//   changeQuestion,
//   getQuestion,
//   getLessonById,
// } from "@/api/educationPlanExam/lessonsProgram.js";
import { addSubject ,getSubject,listSubject,updateSubject} from "@/api/educationPlanExam/subject";

export default {
  name: "AnswerLesson",
  props: {
    // visible: {
    //   type: Boolean,
    //   default: false,
    // },
    bankId: {
      type: Number,
    },
    subjectId: {
      type: Number,
    },
  },
  components: {},
  data() {
    return {
      form: {
        topicTitle: "",
        questions: [{ value: "" }, { value: "" }, { value: "" }],
      },
      answerNum: null,
      addValue: "",
      // 录入的是第几道题
      questionNextNum: 1,
      courseName: "",
    };
  },

  created() {
    // 如果存在就是修改
    if (this.subjectId) {
      getSubject(this.subjectId).then((res) => {
        console.log('?',res.data);
        const data = res.data;
        this.form = {
          topicTitle: data.topicTitle,
          questions: JSON.parse(data.topicOption),
        };
        this.answerNum = data.answer;
      });
    }

    // 查询是第几道题
    this.getQuestion();
    // 获取课程标题
    // this.getLessonById(this.bankId);
  },
  methods: {
    getQuestion() {
      listSubject({ bankId: this.bankId }).then((res) => {
        console.log(res)
         // 如果是修改 就是原来的值，如果不是，就是总数+1
        if (this.subjectId) {
          res.rows.forEach((item, index) => {
            if (item.subjectId == this.subjectId) {
              this.questionNextNum = index+1;
            }
          });
        } else {
          this.questionNextNum = res.total + 1;
        }
      });
    },
    // getLessonById(bankId) {
    //   getLessonById(bankId).then((res) => {
    //     console.log(res);
    //     this.courseName = res.data.courseName;
    //   });
    // },
    addQuestion(data) {
      // 如果是修改，就用修改的方法，如果是新增，就用新增的方法
      if (this.subjectId) {
        return updateSubject({ subjectId: this.subjectId, ...data });
      } else {
        return addSubject({ bankId: this.bankId, ...data });
      }
    },
    rightAnswerClick(index) {
      this.answerNum = index;
      console.log(index);
    },
    // 删除选项
    removeDomain(question) {
      const index = this.form.questions.indexOf(question);
      // 如果是正确答案,就让正确答案清空
      if (this.answerNum === index) {
        this.answerNum = null;
      }
      if (index >= 0) {
        this.form.questions.splice(index, 1);
      }
    },
    // 新增选项
    add(addValue) {
      this.form.questions.push({ value: addValue });
      console.log();
    },
    save(num = 2) {
      return new Promise((resove) => {
        if (!this.answerNum && this.answerNum !== 0) {
          this.$message({
            message: "警告，请设置一个正确答案",
            type: "warning",
          });
          return resove(false);
        }
        this.$refs.form.validate((valid) => {
          if (valid) {
            const data = {};
            data.topicTitle = this.form.topicTitle;
            data.topicOption = JSON.stringify(this.form.questions);
            data.answer = this.answerNum;
            this.addQuestion(data).then((res) => {
              if (res.code == 200) {
                // 把修改的这个归位，变成正常添加
                this.$emit("update:subjectId", null);
                this.$message({
                  message: "添加题目成功",
                  type: "success",
                });
                this.$parent.$parent.componentsNumChange(num);
                this.$parent.$parent.$parent.getList();
                resove(true);
              }
            });
          }
        });
      });
    },

    saveAndNext() {
      this.save(3).then((res) => {
        if (res) {
          this.reset();
          // this.questionNextNum++;
          this.getQuestion();
        }
      });
    },
    reset() {
      this.form = {
        topicTitle: "",
        questions: [{ value: "" }, { value: "" }, { value: "" }],
      };
      this.answerNum = null;
      this.addValue = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.add-question {
  width: 100%;
  height: 550px;
  // overflow: hidden;
  flex-direction: column;
  padding-bottom: 7px;
  margin-bottom: 20px;
  border-bottom: 1px solid #bbbbbb;
  .form {
    flex: 1;
    flex-direction: column;
    height: 100%;
    .bottom {
      overflow-y: auto;
      height: 330px;
      box-sizing: border-box;

      .algin-items {
        align-items: center;
        width: 200px;
      }
      .right {
        display: inline-block;
        width: 133px;
        margin-right: 10px;
        line-height: initial;
        padding: 4px 0;
        border: 1px solid #bbbbbb;
        color: #101010;
        font-size: 12px;
        text-align: center;
        border-radius: 4px;
        box-sizing: border-box;
        cursor: pointer;
        &.active {
          background-color: #0bab0c;
          color: #ffffff;
        }
        &:hover {
          background-color: rgba(11, 171, 12, 0.5);
          color: #ffffff;
        }
      }
    }
  }
  .text {
    margin-top: 13px;
    margin-bottom: 34px;
    justify-content: space-between;
    height: 28px;
    .left {
      line-height: 28px;
      color: #101010;
      font-size: 14px;
    }
    .right {
      width: 411px;
      line-height: 28px;
      background: #1d84ff;
      padding-right: 5px;
      color: #fff;
      text-align: right;
    }
  }
}
</style>