智慧保安考试系统
shuishen
2023-11-07 ab67ac318199d53b7c0aa25765bbb1801b8b1e86
考试逻辑的更改
4 files modified
537 ■■■■ changed files
src/components/Subjects/Choices/index.vue 155 ●●●● patch | view | raw | blame | history
src/components/Subjects/Judgement/index.vue 132 ●●●● patch | view | raw | blame | history
src/components/Subjects/MultipleChoices/index.vue 170 ●●●● patch | view | raw | blame | history
src/views/startexam/index.vue 80 ●●●●● patch | view | raw | blame | history
src/components/Subjects/Choices/index.vue
@@ -1,100 +1,87 @@
<template>
  <div>
    <div class="subject-content">
      <div class="subject-title">
        {{ index }}
        <span class="subject-title-content" v-html="subjectInfo.subjectName" />
        <span class="subject-title-content titlesss">
          (&nbsp;单选题&nbsp;<span
            v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0"
            >&nbsp;{{ subjectInfo.score }}分&nbsp;</span
          >)
        </span>
      </div>
    <div>
        <div class="subject-content">
            <div class="subject-title">
                {{ index }}
                <span class="subject-title-content" v-html="subjectInfo.subjectName" />
                <span class="subject-title-content titlesss">
                    (&nbsp;单选题&nbsp;<span v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0">&nbsp;{{
                        subjectInfo.score }}分&nbsp;</span>)
                </span>
            </div>
      <ul
        class="subject-options"
        id="subjectOptions"
        v-for="option in options"
        :key="option.id"
      >
        <li class="subject-option">
          <input
            class="toggle"
            type="checkbox"
            :checked="userAnswer === option.optionName"
            :id="'option' + option.id"
            @change="toggleOption(option)"
          />
          <label :for="'option' + option.id">
            <span class="subject-option-prefix"
              >{{ option.optionName + "." }}&nbsp;</span
            >
            <span v-html="option.optionContent" class="subject-option-prefix" />
          </label>
        </li>
      </ul>
            <ul class="subject-options" id="subjectOptions" v-for="option in options" :key="option.id">
                <li class="subject-option">
                    <input class="toggle" type="checkbox" :checked="userAnswer === option.optionName"
                        :id="'option' + option.id" @change="toggleOption(option)" />
                    <label :for="'option' + option.id">
                        <span class="subject-option-prefix">{{ option.optionName + "." }}&nbsp;</span>
                        <span v-html="option.optionContent" class="subject-option-prefix" />
                    </label>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Choices",
  data() {
    return {
      subjectCount: 0,
      subjectInfo: {
        subjectName: "",
        score: 0,
      },
      options: [],
      userAnswer: "",
      index: "",
      currentAnswer: false,
    };
  },
  methods: {
    getAnswer() {
      return this.userAnswer;
    },
    setAnswer(answer) {
      this.userAnswer = answer;
    },
    setSubjectInfo(subject, subjectCount, index) {
      this.currentAnswer = false;
      this.subjectCount = subjectCount;
      this.subjectInfo = subject;
      if (subject.hasOwnProperty("examSubjectOptions")) {
        this.options = subject.examSubjectOptions;
        // console.log(this.options)
      }
      if (subject.hasOwnProperty("answer")) {
        if (subject.answer) {
          this.currentAnswer = true;
    name: "Choices",
    data () {
        return {
            subjectCount: 0,
            subjectInfo: {
                subjectName: "",
                score: 0,
            },
            options: [],
            userAnswer: "",
            index: "",
            currentAnswer: false,
        }
        this.setAnswer(subject.answer);
      }
      this.index = index + ".";
    },
    methods: {
        getAnswer () {
            return this.userAnswer
        },
        setAnswer (answer) {
            this.userAnswer = ''
        },
        setSubjectInfo (subject, subjectCount, index) {
            this.currentAnswer = false
            this.subjectCount = subjectCount
            this.subjectInfo = subject
            if (subject.hasOwnProperty("examSubjectOptions")) {
                this.options = subject.examSubjectOptions
      // console.log(subject, subjectCount, index, this.options, 5656565656)
                // console.log(this.options)
            }
            if (subject.hasOwnProperty("answer")) {
                if (subject.answer) {
                    this.currentAnswer = true
                }
                this.setAnswer(subject.answer)
            }
            this.index = index + "."
            // console.log(subject, subjectCount, index, this.options, 5656565656)
        },
        getSubjectInfo () {
            this.subjectInfo.options = this.options
            return this.subjectInfo
        },
        // 选中选项
        toggleOption (option) {
            this.userAnswer = option.optionName
        },
    },
    getSubjectInfo() {
      this.subjectInfo.options = this.options;
      return this.subjectInfo;
    },
    // 选中选项
    toggleOption(option) {
      this.userAnswer = option.optionName;
    },
  },
};
}
</script>
<style lang="scss" scoped>
@import "../../../assets/css/subject.scss";
.subject-options > li label {
  line-height: 36px !important;
.subject-options>li label {
    line-height: 36px !important;
}
</style>
src/components/Subjects/Judgement/index.vue
@@ -1,84 +1,76 @@
<template>
  <div>
    <div class="subject-content">
      <div class="subject-title">
        {{ index }}
        <span class="subject-title-content" v-html="subjectInfo.subjectName" />
        <span class="subject-title-content titlesss">
          (&nbsp;判断题&nbsp;<span
            v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0"
            >&nbsp;{{ subjectInfo.score }}分&nbsp;</span
          >)
        </span>
      </div>
      <ul class="subject-options" v-for="option in options" :key="option.id">
        <li class="subject-option">
          <input
            class="toggle"
            type="checkbox"
            :checked="userAnswer === option.optionName"
            :id="'option' + option.id"
            @change="toggleOption(option)"
          />
          <label :for="'option' + option.id">
            <span class="subject-option-prefix"
              >{{ option.optionName }}&nbsp;</span
            >
          </label>
        </li>
      </ul>
    <div>
        <div class="subject-content">
            <div class="subject-title">
                {{ index }}
                <span class="subject-title-content" v-html="subjectInfo.subjectName" />
                <span class="subject-title-content titlesss">
                    (&nbsp;判断题&nbsp;<span v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0">&nbsp;{{
                        subjectInfo.score }}分&nbsp;</span>)
                </span>
            </div>
            <ul class="subject-options" v-for="option in options" :key="option.id">
                <li class="subject-option">
                    <input class="toggle" type="checkbox" :checked="userAnswer === option.optionName"
                        :id="'option' + option.id" @change="toggleOption(option)" />
                    <label :for="'option' + option.id">
                        <span class="subject-option-prefix">{{ option.optionName }}&nbsp;</span>
                    </label>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Judgement",
  data() {
    return {
      subjectCount: 0,
      subjectInfo: {
        subjectName: "",
        score: 0,
      },
      options: [
        { id: 1, optionName: "正确" },
        { id: 2, optionName: "错误" },
      ],
      userAnswer: "",
      index: "",
    };
  },
  methods: {
    getAnswer() {
      return this.userAnswer;
    name: "Judgement",
    data () {
        return {
            subjectCount: 0,
            subjectInfo: {
                subjectName: "",
                score: 0,
            },
            options: [
                { id: 1, optionName: "正确" },
                { id: 2, optionName: "错误" },
            ],
            userAnswer: "",
            index: "",
        }
    },
    setAnswer(answer) {
      this.userAnswer = answer;
    methods: {
        getAnswer () {
            return this.userAnswer
        },
        setAnswer (answer) {
            this.userAnswer = ''
        },
        setSubjectInfo (subject, subjectCount, index) {
            this.subjectCount = subjectCount
            this.subjectInfo = subject
            if (subject.hasOwnProperty("answer")) {
                this.setAnswer(subject.answer)
            }
            this.index = index + "."
        },
        getSubjectInfo () {
            this.subjectInfo.options = this.options
            return this.subjectInfo
        },
        // 选中选项
        toggleOption (option) {
            this.userAnswer = option.optionName
        },
    },
    setSubjectInfo(subject, subjectCount, index) {
      this.subjectCount = subjectCount;
      this.subjectInfo = subject;
      if (subject.hasOwnProperty("answer")) {
        this.setAnswer(subject.answer);
      }
      this.index = index + ".";
    },
    getSubjectInfo() {
      this.subjectInfo.options = this.options;
      return this.subjectInfo;
    },
    // 选中选项
    toggleOption(option) {
      this.userAnswer = option.optionName;
    },
  },
};
}
</script>
<style lang="scss" scoped>
@import "../../../assets/css/subject.scss";
.subject-options > li label {
  line-height: 36px !important;
.subject-options>li label {
    line-height: 36px !important;
}
</style>
src/components/Subjects/MultipleChoices/index.vue
@@ -1,101 +1,101 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-11-06 10:15:36
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-11-07 14:43:28
 * @FilePath: \zhba_exam\src\components\Subjects\MultipleChoices\index.vue
 * @Description:
 *
 * Copyright (c) 2023 by shuishen, All Rights Reserved.
-->
<template>
  <div>
    <div class="subject-content">
      <div class="subject-title">
        {{ index }}
        <span class="subject-title-content" v-html="subjectInfo.subjectName" />
        <span class="subject-title-content titlesss">
          (&nbsp;多选题&nbsp;<span
            v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0"
            >&nbsp;{{ subjectInfo.score }}分&nbsp;</span
          >)
        </span>
      </div>
    <div>
        <div class="subject-content">
            <div class="subject-title">
                {{ index }}
                <span class="subject-title-content" v-html="subjectInfo.subjectName" />
                <span class="subject-title-content titlesss">
                    (&nbsp;多选题&nbsp;<span v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0">&nbsp;{{
                        subjectInfo.score }}分&nbsp;</span>)
                </span>
            </div>
      <ul class="subject-options" v-for="option in options" :key="option.id">
        <li class="subject-option">
          <input
            class="toggle"
            type="checkbox"
            :checked="isChecked(option.optionName)"
            :id="'option' + option.id"
            @change="toggleOption($event, option)"
          />
          <label :for="'option' + option.id">
            <span class="subject-option-prefix"
              >{{ option.optionName + "." }}&nbsp;</span
            >
            <span v-html="option.optionContent" class="subject-option-prefix" />
          </label>
        </li>
      </ul>
            <ul class="subject-options" v-for="option in options" :key="option.id">
                <li class="subject-option">
                    <input class="toggle" type="checkbox" :checked="isChecked(option.optionName)" :id="'option' + option.id"
                        @change="toggleOption($event, option)" />
                    <label :for="'option' + option.id">
                        <span class="subject-option-prefix">{{ option.optionName + "." }}&nbsp;</span>
                        <span v-html="option.optionContent" class="subject-option-prefix" />
                    </label>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MultipleChoices",
  data() {
    return {
      subjectCount: 0,
      subjectInfo: {
        subjectName: "",
        score: 0,
      },
      options: [],
      userAnswer: [],
      index: "",
    };
  },
  watch: {},
  methods: {
    getAnswer() {
      return this.userAnswer.join(",");
    },
    setAnswer(answer) {
      // if (isNotEmpty(answer)) {
      this.userAnswer = answer.split(",");
      // }
    },
    setSubjectInfo(subject, subjectCount, index) {
      this.subjectCount = subjectCount;
      this.subjectInfo = subject;
      if (subject.hasOwnProperty("examSubjectOptions")) {
        this.options = subject.examSubjectOptions;
      }
      if (subject.hasOwnProperty("answer")) {
        this.setAnswer(subject.answer);
      }
      this.index = index + ".";
    },
    getSubjectInfo() {
      this.subjectInfo.options = this.options;
      return this.subjectInfo;
    },
    // 选中选项
    toggleOption($event, option) {
      if ($event.target.checked) {
        if (!this.userAnswer.includes(option.optionName)) {
          this.userAnswer.push(option.optionName);
    name: "MultipleChoices",
    data () {
        return {
            subjectCount: 0,
            subjectInfo: {
                subjectName: "",
                score: 0,
            },
            options: [],
            userAnswer: [],
            index: "",
        }
      } else {
        this.userAnswer.splice(
          this.userAnswer.findIndex((item) => item === option.optionName),
          1
        );
      }
    },
    isChecked(optionName) {
      return this.userAnswer.includes(optionName);
    watch: {},
    methods: {
        getAnswer () {
            return this.userAnswer.join(",")
        },
        setAnswer (answer) {
            this.userAnswer = []
        },
        setSubjectInfo (subject, subjectCount, index) {
            this.subjectCount = subjectCount
            this.subjectInfo = subject
            if (subject.hasOwnProperty("examSubjectOptions")) {
                this.options = subject.examSubjectOptions
            }
            if (subject.hasOwnProperty("answer")) {
                this.setAnswer(subject.answer)
            }
            this.index = index + "."
        },
        getSubjectInfo () {
            this.subjectInfo.options = this.options
            return this.subjectInfo
        },
        // 选中选项
        toggleOption ($event, option) {
            if ($event.target.checked) {
                if (!this.userAnswer.includes(option.optionName)) {
                    this.userAnswer.push(option.optionName)
                }
            } else {
                this.userAnswer.splice(
                    this.userAnswer.findIndex((item) => item === option.optionName),
                    1
                )
            }
        },
        isChecked (optionName) {
            return this.userAnswer.includes(optionName)
        },
    },
  },
};
}
</script>
<style lang="scss" scoped>
@import "../../../assets/css/subject.scss";
.subject-options > li label {
  line-height: 36px !important;
.subject-options>li label {
    line-height: 36px !important;
}
</style>
src/views/startexam/index.vue
@@ -88,10 +88,10 @@
                            </div>
                            <div class="answer-card-split"></div>
                            <el-row class="answer-card-content">
                                <el-button :class="{ answered: subjectIds[index].answered }" circle
                                    v-for="(value, index) in subjectIds" :style="{ background: value.color }" :key="index"
                                    @click="toSubject(value.everyID, value.type, index)">&nbsp;{{ index + 1
                                    }}&nbsp;</el-button>
                                <el-button circle v-for="(value, index) in subjectIds" :style="completeColor(value)"
                                    :key="index" @click="toSubject(value.everyID, value.type, index)">
                                    <span style="color: #fff;">{{ index + 1 }}</span>
                                </el-button>
                                <!-- @click="toSubject(value.everyID, value.type, index)" -->
@@ -208,6 +208,20 @@
        completeTest () {
            return this.subjectIds.find(item => item.answer == "")
        },
        completeColor () {
            return (item) => {
                if (item.answer == '') {
                    return {
                        background: "#666",
                    }
                } else {
                    return {
                        background: "#097FFE",
                    }
                }
            }
        }
        // time() {
        //   var d = [+this.times[0], +this.times[1]];
@@ -534,7 +548,7 @@
        last () {
            for (let i = 0; i < this.subjectIds.length; i++) {
                if (this.subjectIds[i].everyID == this.query.subjectId) {
                    this.subjectIds[i].answer = this.getAnswer()
                    this.subjectIds[i].answer = this.judgeAnswerIfNull(this.subjectIds[i].answer)
                    this.markAnswered(this.subjectIds[i].answer, i)
@@ -561,32 +575,8 @@
        next () {
            for (let i = 0; i < this.subjectIds.length; i++) {
                if (this.subjectIds[i].everyID == this.query.subjectId) {
                    //  if (this.getAnswer() == "") {
                    //   this.$message({
                    //     message: "请选择答案",
                    //     type: "warning",
                    //   });
                    //   return;
                    // }
                    // console.log(this.getAnswer(), this.query.type);
                    if (this.query.type == 3) {
                        let goShiCao = true
                        const answer = this.getAnswer()
                        for (let k in answer) {
                            if (answer[k].value == "") {
                                goShiCao = false
                            }
                        }
                        if (!goShiCao) {
                            this.$message({
                                message: "实操题目请选择完整顺序!",
                                type: "warning"
                            })
                            return
                        }
                    }
                    this.subjectIds[i].answer = this.getAnswer()
                    this.subjectIds[i].answer = this.judgeAnswerIfNull(this.subjectIds[i].answer)
                    this.markAnswered(this.subjectIds[i].answer, i)
@@ -611,10 +601,7 @@
        },
        // 保存当前题目,同时根据序号加载下一题
        saveCurrentSubjectAndGetNextSubject (nextType, nextSubjectId, subjectIds) {
            // console.log(nextType, nextSubjectId, subjectIds, '2222222')
            this.startLoading(nextType)
            var answerData = this.getAnswer()
            var answerData = this.judgeAnswerIfNull(subjectIds.answer)
            var str = ""
@@ -644,15 +631,6 @@
                        this.result = response.data.data.result
                        // console.log(response.data.data.result, subjectIds, '----1----1----')
                        if (this.result == 1) {
                            subjectIds.color = "#67C23A"
                            subjectIds.fontColor = "#fff"
                        }
                        if (this.result == 2) {
                            subjectIds.color = "red"
                            subjectIds.fontColor = "#fff"
                        }
                        const { id, choicesType } = subject
@@ -759,7 +737,7 @@
                ind = this.subjectIndex - 1
            }
            this.subjectIds[ind].answer = this.getAnswer()
            this.subjectIds[ind].answer = this.judgeAnswerIfNull(this.subjectIds[ind].answer)
            this.markAnswered(this.subjectIds[ind].answer, ind)
@@ -789,7 +767,7 @@
                ind = this.subjectIndex - 1
            }
            this.subjectIds[ind].answer = this.getAnswer()
            this.subjectIds[ind].answer = this.judgeAnswerIfNull(this.subjectIds[ind].answer)
            this.markAnswered(this.subjectIds[ind].answer, ind)
@@ -896,6 +874,16 @@
        toggleOption (answer) {
            this.answer = answer
        },
        // 根据答案是否为空决定使用哪个答案
        judgeAnswerIfNull (val) {
            if (this.getAnswer() == '') {
                return val
            } else {
                return this.getAnswer()
            }
        },
        // 根据题目类型返回填写的答案
        getAnswer () {
            const ref = this.getSubjectRef()
@@ -1113,7 +1101,7 @@
}
.answered {
    background-color: greenyellow;
    background-color: #097FFE;
}
#avue-view>.morpheus-box {