client-base-v5/src/confirm/KnowledgeTrainAnswer.vue

<template>
  <div>
    <h1 style="text-align: center;">Fixed Assets Related Guideline</h1>
    <h1 style="text-align: center;">固定资产知识培训</h1>
    <a-divider />
    <h2>
      {{ $t("lang.KnowledgeTrainAnswer.describe1") }}
    </h2>
    <a-divider />
    <div v-if="answerList != null && answerList.length > 0">
      <div v-for="item in answerList" :key="item.id" style="margin-bottom: 1rem; font-size: 1.2rem;">
        <p>{{ item.subject }}</p>
        <div style="margin-left: 2rem; ">
          <a-radio-group v-model:value="item.selectItem" name="radioGroup" style="font-size: 1.5rem;">
            <a-radio v-if="item.optionA != null" value="A">{{ item.optionA }}</a-radio>
            <a-radio v-if="item.optionB != null" value="B">{{ item.optionB }}</a-radio>
            <a-radio v-if="item.optionC != null" value="C">{{ item.optionC }}</a-radio>
            <a-radio v-if="item.optionD != null" value="D">{{ item.optionD }}</a-radio>
          </a-radio-group>
        </div>
        <div style="margin-left: 20px;">
          <a-button v-if="item.isSelectItem == false" type="link" danger>{{ $t("lang.KnowledgeTrainAnswer.notSelectAnswer") }}</a-button>
          <a-button v-if="item.isAnswerCorrect == true" type="link" success>{{ $t("lang.KnowledgeTrainAnswer.correctAnswer") }}</a-button>
          <a-button v-if="item.isAnswerCorrect == false" type="link" danger>
            {{ $t("lang.KnowledgeTrainAnswer.describe2") }} ({{ item.correctOption }})
          </a-button>
        </div>
      </div>
    </div>
    <a-divider />
    <a-button type="primary" @click="answerCheck">
      {{ $t("lang.KnowledgeTrainAnswer.submit") }}
    </a-button>
  </div>
</template>

<script>
import { SqlApi } from 'pc-component-v3';
import { Notify, Uuid } from 'pc-component-v3';
import Common from '../common/Common.js';
import AnswerResource from '../api/base/AnswerResource.js';
export default {

  emits: ['finishTask'],

  data: function () {
    return {
      answerList: [],
    };
  },

  mounted: function () {
    let _self = this;
    _self.queryAnswer();
  },

  methods: {
    queryAnswer: function () {
      let _self = this;
      let locale = this.$i18n.locale;
      let data = {
        'languageStatus': locale,
      };
      SqlApi.execute('20220803_102140', data).then(
        successData => {
          if (successData.errorCode == 0) {
            successData.dataList.forEach(item => {
              item.selectItem = null;
              item.isSelectItem = null;
              item.isAnswerCorrect = null;
            });
            _self.answerList = successData.dataList;
          } else {
            Notify.error(_self.$t('lang.KnowledgeTrainAnswer.describe4'), successData.errorMessage, true);
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },
    answerCheck: function () {
      let _self = this;
      let isSelectItemCount = 0;
      _self.answerList.forEach(answer => {
        if (answer.selectItem == null) {
          answer.isSelectItem = false;
          isSelectItemCount++;
        } else {
          answer.isSelectItem = true;
        }
      });
      if (isSelectItemCount > 0) {
        Notify.error(this.$t('lang.KnowledgeTrainAnswer.title'), this.$t('lang.KnowledgeTrainAnswer.describe3'), true);
        return;
      }
      AnswerResource.answerCheck(
        _self.answerList,
      ).then(
        baseListResponse => {
          if (baseListResponse.errorCode === 0) {
            let isAnswerCorrectCount = 0;
            baseListResponse.datas.forEach(data => {
              _self.answerList.forEach(answer => {
                if(data.id === answer.id){
                  if(data.isAnswerCorrect === false){
                    isAnswerCorrectCount ++;
                  }
                  answer.isAnswerCorrect = data.isAnswerCorrect;
                }
              });
            });
            if(isAnswerCorrectCount === 0){
              _self.$emit('finishTask');
            }
            console.log(baseListResponse);
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },
  },
};
</script>

<style>
    body {
        overflow-x: hidden;
        overflow-y: hidden;
    }
</style>