From df26c5424389cbd7fb1aa28a610b124cbac26c54 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Sat, 09 Oct 2021 16:23:39 +0800
Subject: [PATCH] +
---
src/components/Subjects/PracticalOperation/index.vue | 319 ++++++++++++++++++++++++++---------------------------
1 files changed, 157 insertions(+), 162 deletions(-)
diff --git a/src/components/Subjects/PracticalOperation/index.vue b/src/components/Subjects/PracticalOperation/index.vue
index 0ac7dae..424b0c2 100644
--- a/src/components/Subjects/PracticalOperation/index.vue
+++ b/src/components/Subjects/PracticalOperation/index.vue
@@ -1,189 +1,184 @@
<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">
- ( 实操题 <span v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0"> {{subjectInfo.score}}分 </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">
+ ( 实操题 <span
+ v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0"
+ > {{ subjectInfo.score }}分 </span
+ >)
+ </span>
+ </div>
- <ul class="subject-options"
- v-for="(option, index) in options"
- :key="option.id">
- <li class="subject-option pbox">
+ <ul
+ class="subject-options"
+ v-for="(option, index) in options"
+ :key="option.id"
+ >
+ <li class="subject-option pbox">
+ <span class="num" @click="selectCheckbox($event, option)">
+ {{ userAnswer[index].value }}
+ </span>
- <span class="num"
- @click="selectCheckbox($event, option)"> {{ userAnswer[index].value }} </span>
-
- <label :for="'option' + option.id">
- <span class="subject-option-prefix">{{ option.optionName + '.' }} </span>
- <span v-html="option.optionContent"
- class="subject-option-prefix" />
- </label>
-
- </li>
- </ul>
-
- </div>
+ <label :for="'option' + option.id">
+ <span class="subject-option-prefix"
+ >{{ option.optionName + "." }} </span
+ >
+ <span v-html="option.optionContent" class="subject-option-prefix" />
+ </label>
+ </li>
+ </ul>
</div>
+ </div>
</template>
<script>
export default {
- name: 'MultipleChoices',
- data () {
- return {
- subjectCount: 0,
- subjectInfo: {
- subjectName: '',
- score: 0
- },
- options: [],
- userAnswer: [],
- index: ''
- }
+ name: "MultipleChoices",
+ data() {
+ return {
+ subjectCount: 0,
+ subjectInfo: {
+ subjectName: "",
+ score: 0,
+ },
+ options: [],
+ userAnswer: [],
+ index: "",
+ };
+ },
+ watch: {},
+ methods: {
+ getAnswer() {
+ return this.userAnswer;
},
- watch: {
-
+ setAnswer(answer, option) {
+ console.log(answer);
+ if (answer != "") {
+ this.userAnswer = answer;
+ } else {
+ this.userAnswer = [];
+ option.forEach((item) => {
+ this.userAnswer.push({ key: item.optionName, value: "" });
+ });
+ }
},
- methods: {
- getAnswer () {
- return this.userAnswer
- },
- setAnswer (answer, option) {
- console.log(answer);
- if (answer != '') {
+ 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, subject.examSubjectOptions);
+ }
+ this.index = index + ".";
+ },
+ getSubjectInfo() {
+ this.subjectInfo.options = this.options;
+ return this.subjectInfo;
+ },
- this.userAnswer = answer
+ selectCheckbox($event, option) {
+ var flag = false;
- } else {
- this.userAnswer = []
- option.forEach(item => {
- this.userAnswer.push({ key: item.optionName, value: '' })
- })
- }
- },
- 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, subject.examSubjectOptions)
- }
- this.index = index + '.'
- },
- getSubjectInfo () {
- this.subjectInfo.options = this.options
- return this.subjectInfo
- },
-
- selectCheckbox ($event, option) {
-
- var flag = false;
-
- this.userAnswer.forEach(item => {
- if (item.value != "") {
- flag = true
- }
- })
-
- this.userAnswer
-
- if (flag == true) {
- // 其中最少有一个有值的
- var onlyFlag = false;
- var onlyValue = '';
- var ind = 0;
- this.userAnswer.forEach(item => {
- if (item.value != '' && item.value > ind) {
- ind = item.value
- }
- })
-
- this.userAnswer.forEach(item => {
- if (item.key == option.optionName) {
- if (item.value != '') {
- onlyValue = item.value
- onlyFlag = true
- item.value = ''
- } else {
- item.value = ind + 1
- }
- }
- })
-
- this.userAnswer.forEach(item => {
- if (onlyFlag == true) {
-
- if (item.value > onlyValue) {
- item.value -= 1
- }
-
- }
- })
-
-
- } else {
- // 全部都为空
- this.userAnswer.forEach(item => {
- if (item.key == option.optionName) {
- item.value = 1
- }
- })
- }
-
-
- console.log(this.userAnswer)
-
- },
-
- isChecked (optionName) {
- return this.userAnswer.includes(optionName)
+ this.userAnswer.forEach((item) => {
+ if (item.value != "") {
+ flag = true;
}
- }
-}
+ });
+
+ this.userAnswer;
+
+ if (flag == true) {
+ // 其中最少有一个有值的
+ var onlyFlag = false;
+ var onlyValue = "";
+ var ind = 0;
+ this.userAnswer.forEach((item) => {
+ if (item.value != "" && item.value > ind) {
+ ind = item.value;
+ }
+ });
+
+ this.userAnswer.forEach((item) => {
+ if (item.key == option.optionName) {
+ if (item.value != "") {
+ onlyValue = item.value;
+ onlyFlag = true;
+ item.value = "";
+ } else {
+ item.value = ind + 1;
+ }
+ }
+ });
+
+ this.userAnswer.forEach((item) => {
+ if (onlyFlag == true) {
+ if (item.value > onlyValue) {
+ item.value -= 1;
+ }
+ }
+ });
+ } else {
+ // 全部都为空
+ this.userAnswer.forEach((item) => {
+ if (item.key == option.optionName) {
+ item.value = 1;
+ }
+ });
+ }
+
+ console.log(this.userAnswer, 123);
+ for (var k in this.userAnswer) {
+ console.log(this.userAnswer[k]);
+ }
+ },
+
+ isChecked(optionName) {
+ return this.userAnswer.includes(optionName);
+ },
+ },
+};
</script>
<style lang="scss" scoped>
-@import '../../../assets/css/subject.scss';
+@import "../../../assets/css/subject.scss";
.pbox .num {
- // margin: 2px;
- // text-align: center;
- // vertical-align: middle;
- // display: inline-block;
- // width: 20px;
- // height: 20px;
- // border: 1px solid #999;
- width: 26px;
- height: 26px;
- position: absolute;
- top: 0;
- bottom: 0;
- margin: auto 0;
- // opacity: 0;
- text-align: center;
- font-size: 18px;
- font-weight: bold;
- border: 1px solid #cfcfcf;
- background-color: #ff9;
- cursor: pointer;
+ // margin: 2px;
+ // text-align: center;
+ // vertical-align: middle;
+ // display: inline-block;
+ // width: 20px;
+ // height: 20px;
+ // border: 1px solid #999;
+ width: 26px;
+ height: 26px;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ // opacity: 0;
+ text-align: center;
+ font-size: 18px;
+ font-weight: bold;
+ border: 1px solid #cfcfcf;
+ background-color: #ff9;
+ cursor: pointer;
}
.subject-options > li label {
- line-height: 36px !important;
+ line-height: 36px !important;
}
.pbox.checked {
- border: 1px solid #99f;
- background-color: #ccf;
+ border: 1px solid #99f;
+ background-color: #ccf;
}
.pbox.checked .num {
- border: 1px solid #ff0;
- background-color: #ff9;
+ border: 1px solid #ff0;
+ background-color: #ff9;
}
</style>
--
Gitblit v1.9.3