QuestionList.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-22 17:56:05
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-01-31 14:04:09
 * @FilePath: /danger-manage-web/src/views/lessonsProgram/components/QuestionList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div ref="myBody" class="add-question flex">
    <div class="text flex">
      <div class="left">
        目前有<span>{{ questionNum }}</span
        >道题
        <span class="warn">温馨提示：发布课程前需要进行考试设置</span>
      </div>
      <div class="right">{{ courseName }}</div>
    </div>

    <div class="detail flex">
      <div class="detail-item">
        单选题<span>{{ bottomFrom.singleChoiceScore }}</span
        >分/题,共<span>{{ danxs }}</span
        >题，计<span class="textC">{{
          danxs * bottomFrom.singleChoiceScore
        }}</span
        >分
      </div>
      <div class="detail-item">
        多选题<span>{{ bottomFrom.multipleChoiceScore }}</span
        >分/题,共<span>{{ duoxs }}</span> 题，计<span class="textC">{{
          duoxs * bottomFrom.multipleChoiceScore
        }}</span
        >分
      </div>
      <div class="detail-item">
        判断提<span>{{ bottomFrom.judgmentScore }}</span>/题,共<span>{{ pds }}</span> 题，计<span
          class="textC"
          >{{ pds * bottomFrom.judgmentScore }}</span
        >分
      </div>
      <div class="detail-item">
        一共<span>{{ danxs + duoxs + pds }}</span>道题，总共计<span class="textC">{{
          danxs * bottomFrom.singleChoiceScore +
          duoxs * bottomFrom.multipleChoiceScore +
          pds * bottomFrom.judgmentScore
        }}</span
        >分
      </div>
    </div>

    <div class="table flex" v-loading="loading">
      <div class="th flex">
        <div class="left">序号</div>
        <div class="type">题目类型</div>
        <div class="middle">题目名称</div>
        <div class="right">操作</div>
      </div>
      <div class="td-wrapper">
        <div
          v-for="(item, index) in questionList"
          :key="item.topicId"
          class="td flex"
        >
          <div class="left">{{ index + 1 }}</div>
          <div class="type">{{ topicTypeArr[item.topicType] }}</div>
          <div class="middle zzz">
            {{ item.topicTitle }}
          </div>
          <div class="right">
            <div>
              <el-button
                @click="edit(item.topicId)"
                icon="el-icon-edit"
                type="text"
                >修改</el-button
              >
              <el-button
                @click="deleteLesson(item.topicId)"
                icon="el-icon-delete"
                type="text"
                >删除</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="rightNum flex">
      <div class="left">考试设置</div>
      <!-- <div class="middle flex">
        <div class="left-text">答对题目大于</div>
        <div>
          <el-input
            v-model="rightNum"
            style="width: 60px"
            size="mini"
          ></el-input>
        </div>
        <div>为合格</div>
      </div> -->
      <div class="middle flex">
        <div class="left-text">单选一题</div>
        <div>
          <el-input
            v-model="bottomFrom.singleChoiceScore"
            style="width: 50px"
            size="mini"
          ></el-input>
        </div>
        <div>分</div>
      </div>
      <div class="middle flex">
        <div class="left-text">多选一题</div>
        <div>
          <el-input
            v-model="bottomFrom.multipleChoiceScore"
            style="width: 50px"
            size="mini"
          ></el-input>
        </div>
        <div>分</div>
      </div>

      <div class="middle flex">
        <div class="left-text">判断一题</div>
        <div>
          <el-input
            v-model="bottomFrom.judgmentScore"
            style="width: 50px"
            size="mini"
          ></el-input>
        </div>
        <div>分</div>
      </div>

      <div class="middle flex">
        <div class="left-text">总分大于</div>
        <div>
          <el-input
            v-model="bottomFrom.qualifiedNum"
            style="width: 60px"
            size="mini"
          ></el-input>
        </div>
        <div>为合格</div>
      </div>
      <div class="right">
        <el-button
          @click="saveRightNum"
          icon="el-icon-check"
          size="mini"
          type="success"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  getQuestion,
  deleteQuestion,
  changeLesson,
  getLessonById,
} from "@/api/educationPlanExam/lessonsProgram";
export default {
  name: "AnswerLesson",
  props: {
    courseId: {
      type: Number,
    },
  },
  components: {},
  data() {
    return {
      // 当前课程的第几题，调一遍接口
      questionNum: null,
      bottomFrom: {
        singleChoiceScore: 0,
        multipleChoiceScore: 0,
        judgmentScore: 0,
        qualifiedNum: 0,
      },
      // 答对几道题
      rightNum: 0,
      questionList: [],
      loading: false,
      courseName: "",
      topicTypeArr: {
        1: "单选题",
        2: "多选题",
        3: "判断题",
      },
    };
  },
  // watch: {
  //   visible(newValue) {
  //     if (newValue) {
  //       this.$nextTick(() => {
  //         this.saveBody();
  //       });
  //     }
  //   },
  // },
  computed: {
    danxs() {
      return this.questionList.filter((item) => item.topicType === 1).length;
    },
    duoxs() {
      return this.questionList.filter((item) => item.topicType === 2).length;
    },
    pds() {
      return this.questionList.filter((item) => item.topicType === 3).length;
    },
  },
  created() {
    console.log("this.courseId", this.courseId);
    if (this.courseId) {
      this.getQuestion({ courseId: this.courseId });
      // 获取只题目正确几题算过关
      this.getLessonById(this.courseId);
    }
  },
  methods: {
    save() {
      console.log("QuestionList");
    },
    saveAndNext() {
      this.$parent.$parent.componentsNumChange(3);
    },
    getQuestion(courseId) {
      return getQuestion(courseId).then((res) => {
        console.log(res);

        this.questionList = res.rows.map((item) => {
          return {
            topicType: item.topicType,
            topicId: item.topicId,
            topicTitle: item.topicTitle,
          };
        });
        this.questionNum = res.total;
        return true;
      });
    },
    getLessonById(courseId) {
      getLessonById(courseId).then((res) => {
        console.log(res);
        // this.rightNum = res.data.qualifiedNum;
        this.bottomFrom = {
          singleChoiceScore: res.data.singleChoiceScore || 0,
          multipleChoiceScore: res.data.multipleChoiceScore || 0,
          judgmentScore: res.data.judgmentScore || 0,
          qualifiedNum: res.data.qualifiedNum || 0,
        };
        this.courseName = res.data.courseName;
      });
    },
    edit(topicId) {
      this.$emit("update:topicId", topicId);
      this.$parent.$parent.componentsNumChange(3);
    },
    deleteLesson(topicId) {
      this.$confirm("请确定删除该题", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          return deleteQuestion(topicId);
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          return this.getQuestion({ courseId: this.courseId });
        })
        .finally(() => {
          this.loading = false;
          // 课程列表重置一下
          this.$parent.$parent.$parent.getList();
        });
    },
    saveRightNum() {
      // if (this.rightNum > this.questionList.length) {
      //   this.$message({
      //     message: "答对题目数应小于等于考试题目总数",
      //     type: "warning",
      //   });
      //   return;
      // }
      if (
        !(
          this.bottomFrom.singleChoiceScore >= 0 &&
          this.bottomFrom.multipleChoiceScore >= 0 &&
          this.bottomFrom.judgmentScore >= 0 &&
          this.bottomFrom.qualifiedNum >= 0
        )
      ) {
        this.$message({
          message: "请将分数填写完整",
          type: "warning",
        });
        return;
      }
      changeLesson({
        courseId: this.courseId,
        // qualifiedNum: this.rightNum,
        ...this.bottomFrom,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "答题合格数修改成功",
            type: "success",
          });
          this.$parent.$parent.$parent.getList();
        }
      });
    },
  },
};
</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 #bbbbbb00;
  position: relative;

  .text {
    margin-top: 13px;
    margin-bottom: 32px;
    justify-content: space-between;
    height: 28px;
    .left {
      line-height: 28px;
      color: #101010;
      font-size: 14px;
      .warn {
        display: inline-flex;
        font-size: 12px;
        color: red;
        margin-left: 10px;
      }
    }

    .right {
      width: 411px;
      line-height: 28px;
      background: #1d84ff;
      padding-right: 5px;
      color: #fff;
      text-align: right;
    }
  }
  .detail {
    position: absolute;
    bottom: -20px;
    left: 10px;
    .textC {
      font-weight: 800;
      font-size: 18px;
    }
    .detail-item {
      margin-right: 20px;
      color: red;
    }
  }
  .table {
    flex: 1;
    height: 0;

    flex-direction: column;
    .th {
      width: 100%;
      height: 70px;
      line-height: 70px;
      background: #f5f5f5;
      color: #606266;

      > div {
        height: 100%;
      }
      .left {
        width: 15%;
        text-align: center;
      }
      .type {
        width: 10%;
        text-align: center;
      }
      .middle {
        width: 50%;
        padding-left: 50px;
      }
      .right {
        width: 25%;
        text-align: center;
      }
    }
    .td-wrapper {
      flex: 1;
      overflow-y: auto;
      // 这样子元素才能有滚动条
      .td {
        height: 68px;
        line-height: 68px;
        box-sizing: border-box;
        border-bottom: 1px solid #bbbbbb;
        &:last-child {
          border-bottom: none;
        }
        > div {
          height: 100%;
        }
        .left {
          width: 15%;
          text-align: center;
        }
        .type {
          width: 10%;
          text-align: center;
        }
        .middle {
          width: 50%;
          padding-left: 50px;
        }
        .right {
          width: 25%;
          text-align: center;
        }
      }
    }
  }
  .rightNum {
    margin-top: 5px;
    height: 55px;
    box-sizing: border-box;
    border: 1px solid #bbbbbb;
    line-height: 55px;
    > .left {
      width: 140px;
      background: #0bab0c;
      font-size: 14px;
      color: #fff;
      text-align: center;
    }
    > .middle {
      > div {
        margin-right: 5px;
      }
      .left-text {
        margin-left: 10px;
      }
      .middle {
        margin-right: 20px;
      }
    }
    .right {
      margin-left: 20px;
    }
    // background: black;
  }
}
</style>