API-Fan产品增加练习页面

阳洁

2024-02-23 8f685b98d924cabe0026163398e1867b54b3a988

API-Fan产品增加练习页面

 dist-20240222.zip

Binary files differ

 dist.zip

Binary files differ

 src/lang/en.js

@@ -29,6 +29,7 @@
  finishSubmit: 'You have completed the work behavior questionnaire, and the data has been successfully uploaded to the server and saved. Thank you.',
  selectData: 'Date',
  startDo: 'Next',
  startDo_apifan: 'The test has officially started.',
  second: ' second ',
  min: ' minute ',
  hour: ' hour ',

 src/lang/th.js

@@ -29,6 +29,7 @@
  finishSubmit: 'You have completed the work behavior questionnaire, and the data has been successfully uploaded to the server and saved. Thank you.',
  selectData: 'Date',
  startDo: 'Start the Test',
  startDo_apifan: 'The test has officially started.',
  second: ' second ',
  min: ' minute ',
  hour: ' hour ',

 src/lang/zh.js

@@ -28,6 +28,7 @@
  finishSubmit: '您已经完成了工作行为问卷，数据已经成功地上传至服务器，并已经保存好。谢谢。',
  selectData: '选择日期',
  startDo: '开始测试',
  startDo_apifan: '正式开始测试',
  second: '秒',
  min: '分',
  hour: '小时',
@@ -41,6 +42,7 @@
  examinee: '测试者：',
  close: '关闭',
  pleaseAnswerCarefully: '*请认真作答',
  pleaseAnswerCarefully_exercise: '*当前为练习环节，练习结束后请点击“正式开始测试”按钮正式进行测试。',
  pleaseAnswerCarefullyCiaq: '*请认真作答。特别提示，本测验关注的是你对各类活动的兴趣或喜好，而非能力等其他因素！',
  submitTimeout: ':提交后台超时',
  submitExceptionInfo: '保存服务器网络异常，请关闭浏览重新点击链接答题',

 src/router.js

@@ -144,6 +144,18 @@
      ]
    },
    {
      path: '/exam',
      component: Layout,
      children: [
        {
          path: 'exercise',
          component: () => import('@/views/exam/paper/exercise'),
          name: 'ExamPaperExercise',
          meta: { title: 'exercise' }
        }
      ]
    },
    {
      path: '/report',
      component: Layout,
      children: [

 src/views/exam/paper/exercise.vue

New file
@@ -0,0 +1,208 @@
<template>
  <div>
    <el-container  class="app-item-contain">
00      <el-main style="padding-top: 3%;">
        <el-form :model="form" ref="form" label-width="100%">
          <el-row :key="index"  v-for="(titleItem,index) in titleItems">
            <div class="q-content">{{titleItem.description}}</div>
            <el-card class="exampaper-item-box" v-if="titleItem.questionItems.length!==0"  style="border:2px solid #2b90ff;">
              <div class="align-center"><span style="font-size: small; float: left">{{$t('examinee')}}{{memberName}}</span><span style="margin-top: 0px;padding-right: 11%">●{{form.name}}●</span></div>
              <hr style="border : 1px dashed #b3d8ff;" />
              <el-row style="margin-left:7px;margin-bottom:10px;">{{ questionItem.note }}</el-row>
              <el-row style="margin-left:7px;margin-bottom:10px;">{{ questionItem.guide }}</el-row>
              <el-form-item :key="itemOrder" label-width="1px">
                <QuestionEdit @callNextSubject="nextSubject" :qType="questionItem.questionType" :question="questionItem"
                              :answer="answer.answerItems[questionItem.itemOrder-1]" :qLabel="itemOrder+'/'+itemSize"/>
              </el-form-item>
              <hr style="border : 0.5px dashed #b3d8ff;" />
              <div style="color: red;font-size: smaller">{{$t('pleaseAnswerCarefully_exercise')}}</div>
              
              <el-row class="do-align-center" v-if="itemOrder > 1">
                <el-button @click="doExam" type="success" round>{{$t('startDo_apifan')}}</el-button>
                <el-button @click="preSubject" type="warning" round>{{$t('lastQuestion')}}</el-button>
              </el-row>
              <el-row class="do-align-center" v-if="itemOrder <= 1">
                <el-button @click="doExam" type="success" round>{{$t('startDo_apifan')}}</el-button>
                <el-button @click="nextSubject" type="primary" round>{{$t('nextQuestion')}}</el-button>
              </el-row>
            </el-card>
          </el-row>
        </el-form>

      </el-main>
    </el-container>
    <el-row class="do-exam-title footer">
      <el-col :span="24">
        <!--<el-popover placement="top" title="题目列表" width="200" trigger="click" ref="popovertag">-->
          <!--<el-tag type="success" slot="reference">题目</el-tag>-->
          <!--<span :key="item.itemOrder" v-for="(item) in answer.answerItems">-->
             <!--<el-tag :type="questionCompleted(item.completed)" class="do-exam-title-tag"-->
                     <!--&gt;{{item.itemOrder}}</el-tag>-->
        <!--</span>-->
        <!--</el-popover>-->
        <span class="do-exam-time">
          <!--<label>{{$t('remainingTime')}}</label>-->
          <!--<label>{{formatSecondsG(remainTime,$t('hour'),$t('min'),$t('second'))}}</label>-->
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
import { formatSeconds, formatSecondsG, formatDate } from '@/utils'
import QuestionEdit from '../components/QuestionEdit'
import examPaperApi from '@/api/examPaper'
import examPaperAnswerApi from '@/api/examPaperAnswer'
import demographyApi from '@/api/demography'

export default {
  name: 'exercise',
  components: { QuestionEdit },
  data () {
    return {
      memberName: this.$route.query.formDo.memberName,
      form: {
        name: this.$route.query.formDo.name
      },
      itemOrder: 1,
      itemSize: 2,
      description: '',
      guide: '',
      questionItem: {
        title: '我善于主动和陌生人交谈。',
        items: [
          { content: '非常不同意', prefix: '1', score: 0 },
          { content: '不同意', prefix: '2', score: 0 },
          { content: '不确定', prefix: '3', score: 0 },
          { content: '同意', prefix: '4', score: 0 },
          { content: '非常同意', prefix: '5', score: 0 }
        ],
        questionType: 1,
        note: '以下为工作行为/题目风格的例子',
        guide: '请仔细阅读下面的陈述，判断您在多大程度上同意每一陈述对您的描述，然后点击相应的选项。'
      },
      answer: {
        questionId: null,
        doTime: 0,
        answerItems: [],
        verifyStatus: 2
      },
      titleItems: [
        {
          questionItems: [
            {
              title: '我善于主动和陌生人交谈。',
              items: [
                { content: '非常不同意', prefix: '1', score: 0 },
                { content: '不同意', prefix: '2', score: 0 },
                { content: '不确定', prefix: '3', score: 0 },
                { content: '同意', prefix: '4', score: 0 },
                { content: '非常同意', prefix: '5', score: 0 }
              ],
              questionType: 1
            },
            {
              title: '使用复印机。',
              items: [
                { content: '从来没有', prefix: '1', score: 0 },
                { content: '1-2次', prefix: '2', score: 0 },
                { content: '好几次', prefix: '3', score: 0 },
                { content: '经常', prefix: '4', score: 0 }
              ],
              questionType: 1
            }
          ]
        }
      ],
      isSubmit: false
    }
  },
  created: function () {
  },
  mounted () {
  },
  beforeDestroy () {
  },
  watch: {
  },
  methods: {
    nextSubject () {
      if (this.itemOrder === 2) {
        this.isSubmit = true
        return
      }
      this.questionItem = {
        title: '使用复印机。',
        items: [
          { content: '从来没有', prefix: '1', score: 0 },
          { content: '1-2次', prefix: '2', score: 0 },
          { content: '好几次', prefix: '3', score: 0 },
          { content: '经常', prefix: '4', score: 0 }
        ],
        questionType: 1,
        note: '以下为基本技能过往经验题目的例子',
        guide: '您在过去一年中使用过这些基本技能的频度，并点击相应的选项。'

      }
      this.itemOrder = 2
    },
    preSubject () {
      this.isSubmit = false
      this.questionItem = {
        title: '我善于主动和陌生人交谈。',
        items: [
          { content: '非常不同意', prefix: '1', score: 0 },
          { content: '不同意', prefix: '2', score: 0 },
          { content: '不确定', prefix: '3', score: 0 },
          { content: '同意', prefix: '4', score: 0 },
          { content: '非常同意', prefix: '5', score: 0 }
        ],
        questionType: 1,
        note: '以下为工作行为/题目风格的例子',
        guide: '请仔细阅读下面的陈述，判断您在多大程度上同意每一陈述对您的描述，然后点击相应的选项。'
      }
      this.itemOrder = 1
    },
    doExam () {
      let _this = this
      examPaperApi.updateTestMemberStatus(_this.memberToken).then(re => {
        _this.$router.push({ path: '/exam/' + _this.doUrl, query: { formDo: _this.$route.query.formDo } })
      }).catch(re => {
        _this.$message.error(re.message + ' 更新状态失败')
      })
    }
  },
  computed: {
    ...mapState('exam', { doUrl: state => state.doUrl }),
    ...mapState('user', { memberToken: state => state.memberToken })
  }
}
</script>

<style lang="scss" scoped>
  .align-center {
    text-align: center;
  }

  .exam-question-item {
    padding: 10px;
    font-size: large;

    .el-form-item__label {
      font-size: large !important;
    }
  }

  .question-title-padding {
    padding-left: 25px;
    padding-right: 25px;
  }
  .footer {
    position: absolute;
    position: fixed;
    z-index: 1000;
    bottom: 0px;
  }
</style>

 src/views/exam/paper/guide.vue

@@ -7,8 +7,9 @@
      <el-main style="padding-top:0%">
        <div v-html="formDo.guide"></div>
        <el-row class="do-align-center">
          <el-button @click="doExam" type="primary" round>{{$t('startDo')}}</el-button>
          <el-button v-if="formDo.productType !== 'APIFan'" @click="doExam" type="primary" round>{{$t('startDo')}}</el-button>
          <el-button v-if="formDo.questionTemplateId === 'job'" @click="openExplain" type="danger" round>打开岗位说明</el-button>
          <el-button v-if="formDo.productType === 'APIFan'" @click="openExercise" type="primary" round>继续</el-button>
        </el-row>
      </el-main>
    </el-container>
@@ -27,7 +28,6 @@
  created () {
  },
  mounted () {
    console.log(this.formDo)
    // 替换APIFan指导语中的变量
    if (this.formDo.productType === 'APIFan') {
      let guide = this.formDo.guide
@@ -56,6 +56,12 @@
    openExplain: function () {
      let _this = this
      window.open(_this.formDo.jobDescriptionFile)
    },

    // 打开练习页面
    openExercise: function () {
      let _this = this
      _this.$router.push({ path: '/exam/exercise', query: { formDo: _this.$route.query.formDo } })
    }
  },
  computed: {