+

liuyg

2021-10-09 df26c5424389cbd7fb1aa28a610b124cbac26c54

 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">
                    (&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">
          (&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, 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 + '.' }}&nbsp;</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 + "." }}&nbsp;</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>