题库组件优化

闫增涛

2024-07-01 34f53c3ca69833ddf0649700d26da9ed91c5f1c3

 src/views/examination/index.vue

@@ -74,8 +74,9 @@
              <div class="resolving-btn" @click="showCollaspe('noshow')" v-else>【收起解析】</div>
            </div>
            <!-- <div @click="clearCollect">清空收藏</div> -->
            <!-- <div @click="clearError">清空错题</div> -->
            <div class="redo-btn" @click="restart">
              <img src="@/assets/images/examination/chongzuo.png" alt="">
              <img src="@/assets/images/examination/chongzuo.png" alt="" />
              <span>重做</span>
            </div>
          </div>
@@ -95,6 +96,7 @@

<script setup lang="ts">
import { ref, reactive, defineExpose, defineProps, inject } from 'vue'
import axios from 'axios'
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
import { requestCtx } from '@/assets/js/config.js'
import { ElMessageBox } from 'element-plus'
@@ -143,15 +145,16 @@
}
// 弹窗弹窗按钮
const closeDialog = () => {
  if(props.type =='option') {
    if(!examination.submitStatus) {
        ElMessageBox.confirm('未提交，是否退出答题', '提示', {
  if (props.type == 'option') {
    if (!examination.submitStatus) {
      ElMessageBox.confirm('未提交，是否退出答题', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        autofocus: false,
        type: 'warning'
      }).then(() => {
        examination.dialogVisible = false
        saveAnswerData()
        examination.cardList = []
      })
    } else {
@@ -160,10 +163,12 @@
    }
  } else {
    examination.dialogVisible = false
    handleQuestion()
    // handleQuestion()
    if(props.type == 'errorQuestion') {
      handleQuestion()
    }
    examination.cardList = []
  }
  
}
// 开关弹窗方法
const handleExaminationDialog = (type: boolean) => {
@@ -190,6 +195,7 @@
  } else if (props.type == 'errorQuestion') {
    examination.submitStatus = true
    await getErrorIdList()
    getCollectIdList()
  }
}
// 重做
@@ -286,21 +292,42 @@
const setCollect = (num: number, number: number) => {
  const item = examination.cardList[num].infoList[number]
  item.isCollect = !item.isCollect
  console.log(item)
  if (examination.collectList.length == 0) {
    examination.collectList.push(item.id)
  if (item.isJson) {
    // json题目收藏取消
    let jsonCollectID = examination.allCollect[1].collectList
    if (jsonCollectID.length == 0) {
      jsonCollectID.push(item.id)
    } else {
      const isShow = jsonCollectID.findIndex((citem) => citem == item.id)
      if (isShow == -1) {
        jsonCollectID.push(item.id)
      } else {
        jsonCollectID = jsonCollectID.filter((citem) => citem != item.id)
      }
    }
    for (let index = 0; index < examination.allCollect.length; index++) {
      const item = examination.allCollect[index]
      if (item.type == 'json') item.collectList = jsonCollectID
    }
  } else {
    const isShow = examination.collectList.findIndex((citem) => citem == item.id)
    if (isShow == -1) {
    // bits题目收藏/取消
    if (examination.collectList.length == 0) {
      examination.collectList.push(item.id)
    } else {
      examination.collectList = examination.collectList.filter((citem) => citem != item.id)
      const isShow = examination.collectList.findIndex((citem) => citem == item.id)
      if (isShow == -1) {
        examination.collectList.push(item.id)
      } else {
        examination.collectList = examination.collectList.filter((citem) => citem != item.id)
      }
    }
    for (let index = 0; index < examination.allCollect.length; index++) {
      const item = examination.allCollect[index]
      if (item.type == 'bits') item.collectList = examination.collectList
    }
  }
  for (let index = 0; index < examination.allCollect.length; index++) {
    const item = examination.allCollect[index]
    if (item.type == 'bits') item.collectList = examination.collectList
  }
  console.log('收藏还是取消', examination.allCollect)

  MG.identity
    .setUserKey({
      setKeyRequests: [
@@ -322,35 +349,39 @@
      domain: 'collectData',
      keys: [props.activeBook.bookId]
    })
    .then((res) => {
    .then((res:any) => {
      console.log('收藏数据', res)
      try {
        const collect = JSON.parse(res[0].value)
        if (collect.length) {
          examination.collectList = collect.find((citem) => citem.type == 'bits').collectList
          examination.collectList = collect.find((citem:any) => citem.type == 'bits').collectList
          examination.allCollect[0].collectList = collect.find(
            (citem) => citem.type == 'bits'
            (citem:any) => citem.type == 'bits'
          ).collectList
          examination.allCollect[1].collectList = collect.find(
            (citem) => citem.type == 'json'
            (citem:any) => citem.type == 'json'
          ).collectList
        }
      } catch (error) {
        console.log('暂无数据')
      }
      if (props.type == 'option') {
        getAnswerInfo(async (res) => {
        getAnswerInfo(async (res:any) => {
          if (res.length) {
            // 有记录，不能答题，状态设为已提交
            examination.submitStatus = true
            let value = JSON.parse(res[0].value)
            if (value) {
              console.log('旧数据', value)
              // 有答题记录,携带旧数据获取题目
              examination.cardList = (await getQuestionList(value)) as any
            }
          } else {
            examination.cardList = (await getQuestionList([])) as any
            const userAnswerList = await getUserAnswer()
            if(userAnswerList) {
              examination.cardList = (await getQuestionList(userAnswerList)) as any
            } else {
              examination.cardList = (await getQuestionList([])) as any
            }
          }
        })
      }
@@ -437,8 +468,6 @@
        Embedded_QuestionBank_Difficulty: []
      }
    }
    console.log('请求日·', examination.collectList)

    const res = await MG.store.getProductDetail(query)
    if (!res.datas) return false
    res.datas.cmsDatas[0].datas.forEach((item, index) => {
@@ -474,7 +503,7 @@
            : '',
        isSubmit: false, // 查看解析
        isRight: oldObj ? oldObj.isRight : null, // 是否正确
        isComplete: oldObj ? true : false,
        isComplete: examination.submitStatus,
        isCollect: examination.collectList.indexOf(item.id) > -1 ? true : false,
        isUnfold: ''
      }
@@ -608,21 +637,32 @@
          ).collectList
        }
      } catch (error) {}
      if (examination.collectList && examination.collectList.length > 0) {
      if (
        examination.allCollect[0].collectList.length ||
        examination.allCollect[1].collectList.length
      ) {
        examination.cardList = (await getCollectDataList()) as any
        await getJsonCollect()
      } else {
        examination.loading = false
        examination.noData = true
        ElMessageBox.confirm('收藏夹暂无数据!', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        })
          .then(() => {
            examination.submitStatus = true
            examination.dialogVisible = false
          })
          .catch(() => {
            examination.dialogVisible = false
          })
      }
    })
}
// 获取收藏夹
const getCollectDataList = async () => {
  if (!examination.collectList.length) {
    examination.loading = false
    examination.noData = true
    return false
  }
  // 开始请求
  let oldData = null
  let oldList = []
@@ -823,7 +863,51 @@
    }
  }
  examination.loading = false
  return cardList.filter((item) => item.infoList.length > 0)
  return cardList
}
// 我的收藏模式下，获取收藏的假题(json)
const getJsonCollect = async () => {
  if (!props.activeBook.jsonQUestion) {
    examination.cardList = examination.cardList.filter((item) => item.infoList.length > 0)
    return false
  }
  let questionArr = []
  let jsonCollectList = []
  for (let index = 0; index < props.activeBook.jsonQUestion.length; index++) {
    const item = props.activeBook.jsonQUestion[index]
    const res = await axios.get(props.activeBook.resourceUrl + '/question-' + item + '.json')
    questionArr.push(...res.data.data)
  }
  for (let index = 0; index < questionArr.length; index++) {
    const item = questionArr[index]
    for (let cindex = 0; cindex < examination.allCollect[1].collectList.length; cindex++) {
      const citem = examination.allCollect[1].collectList[cindex]
      if (item.id == citem) {
        item.isCollect = true
        item.isJson = true
        jsonCollectList.push(item)
      }
    }
  }

  for (let index = 0; index < jsonCollectList.length; index++) {
    const item = jsonCollectList[index]
  if (item.questionType == 'singleChoice') {
      examination.cardList[0].infoList.push(item)
    } else if (item.questionType == 'judge') {
      examination.cardList[1].infoList.push(item)
    } else if (item.questionType == 'multipleChoice') {
      examination.cardList[2].infoList.push(item)
    } else if (item.questionType == 'completion') {
      examination.cardList[3].infoList.push(item)
    } else if (item.questionType == 'shortAnswer') {
      examination.cardList[4].infoList.push(item)
    } else if (item.type && item.type == 'material') {
      examination.cardList[examination.cardList.length] = item
    }
  }
  examination.cardList = examination.cardList.filter((item) => item.infoList.length > 0)
  console.log('拼接题', examination.cardList)
}
// 我的错题模式下获取错题id列表
const getErrorIdList = async () => {
@@ -832,22 +916,21 @@
      domain: 'errorData',
      keys: [props.activeBook.bookId]
    })
    .then(async (res) => {
    .then(async (res:any) => {
      try {
        const error = JSON.parse(res[0].value)
        if (error.length) {
          examination.errorList = error.find((citem) => citem.type == 'bits').errorList
          examination.allCollect[0].collectList = error.find(
            (citem) => citem.type == 'bits'
          ).errorList
          examination.allCollect[1].collectList = error.find(
            (citem) => citem.type == 'json'
          ).errorList
          console.log('有吗', error)
          examination.errorList = error.find((citem:any) => citem.type == 'bits').errorList
          examination.allError[0].errorList = error.find((citem:any) => citem.type == 'bits').errorList
          examination.allError[1].errorList = error.find((citem:any) => citem.type == 'json').errorList
        }
      } catch (error) {}
      if (examination.errorList && examination.errorList.length) {
      if (examination.allError[0].errorList || examination.allError[1].errorList) {
        examination.cardList = (await getErrorDataList()) as any
        await getJsonError()
      } else {
        examination.noData = true
        examination.loading = false
        ElMessageBox.confirm('错题集暂无数据!', '提示', {
          confirmButtonText: '确定',
@@ -856,21 +939,18 @@
        })
          .then(() => {
            examination.submitStatus = true
            examination.dialogVisible = false
          })
          .catch(() => {})
          .catch(() => {
            examination.dialogVisible = false
          })
      }
    })
}
// 获取错题集
const getErrorDataList = async () => {
  if (!examination.errorList.length) {
    examination.loading = false
    examination.noData = true
    return false
  }
  // 开始请求
  let oldData = null
  let oldList = []
  let oldList:any = []
  let cardList = [
    {
      catalogName: '单选题',
@@ -893,11 +973,11 @@
      infoList: []
    }
  ]
  let singleChoiceArr = [] // 单选
  let judgeArr = [] // 判断
  let shortArr = [] // 简答
  let multipleChoiceArr = [] // 多选
  let completionArr = [] // 填空
  let singleChoiceArr:any = [] // 单选
  let judgeArr:any = [] // 判断
  let shortArr:any = [] // 简答
  let multipleChoiceArr:any = [] // 多选
  let completionArr:any = [] // 填空
  // 11
  for (let qindex = 0; qindex < examination.errorList.length; qindex++) {
    const qitem = examination.errorList[qindex]
@@ -923,10 +1003,10 @@
    }
    const res = await MG.store.getProductDetail(query)
    if (!res.datas) return false
    res.datas.cmsDatas[0].datas.forEach((item, index) => {
    res.datas.cmsDatas[0].datas.forEach((item:any, index:number) => {
      let oldObj = {}
      if (oldList) {
        oldObj = oldList.find((item) => item.id == qitem)
        oldObj = oldList.find((item:any) => item.id == qitem)
      }
      const questionObj = {
        number: index + 1, // 题号
@@ -991,7 +1071,7 @@
        questionObj.stem.stemImage = getPublicImage(questionObj.stem.stemImage, 150)
      }
      if (questionObj.optionStyle == 'Image' || questionObj.optionStyle == 'TxtAndImage') {
        questionObj.option.forEach((optionItem) => {
        questionObj.option.forEach((optionItem:any) => {
          if (optionItem.img) optionItem.img = getPublicImage(optionItem.img, 150)
        })
      }
@@ -1013,7 +1093,7 @@
          questionObj.questionType == 'judge' ||
          questionObj.questionType == 'multipleChoice')
      ) {
        questionObj.option.forEach((item) => {
        questionObj.option.forEach((item:any) => {
          if (item.txt)
            item.txt = item.txt
              .replace(/\<img/gi, '<img class="option-rich-img"')
@@ -1068,10 +1148,53 @@
    }
  }
  examination.loading = false
  return cardList.filter((item) => item.infoList.length > 0)
  return cardList
}
// 错题集模式下，获取假的错题(json)
const getJsonError = async () => {
  if (!props.activeBook.jsonQUestion) {
    examination.cardList = examination.cardList.filter((item) => item.infoList.length > 0)
    return false
  }
  let questionArr = []
  let jsonCollectList = []
  for (let index = 0; index < props.activeBook.jsonQUestion.length; index++) {
    const item = props.activeBook.jsonQUestion[index]
    const res = await axios.get(props.activeBook.resourceUrl + '/question-' + item + '.json')
    questionArr.push(...res.data.data)
  }
  for (let index = 0; index < questionArr.length; index++) {
    const item = questionArr[index]
    for (let cindex = 0; cindex < examination.allError[1].errorList.length; cindex++) {
      const citem = examination.allError[1].errorList[cindex]
      if (item.id == citem) {
        item.isCollect = examination.allCollect[1].collectList.indexOf(item.id) > -1 ? true :false
        item.isJson = true
        jsonCollectList.push(item)
      }
    }
  }

  for (let index = 0; index < jsonCollectList.length; index++) {
    const item = jsonCollectList[index]
    if (item.questionType == 'singleChoice') {
      examination.cardList[0].infoList.push(item)
    } else if (item.questionType == 'judge') {
      examination.cardList[1].infoList.push(item)
    } else if (item.questionType == 'multipleChoice') {
      examination.cardList[2].infoList.push(item)
    } else if (item.questionType == 'completion') {
      examination.cardList[3].infoList.push(item)
    } else if (item.questionType == 'shortAnswer') {
      examination.cardList[4].infoList.push(item)
    } else if (item.type && item.type == 'material') {
      examination.cardList[examination.cardList.length] = item
    }
  }
  examination.cardList = examination.cardList.filter((item) => item.infoList.length > 0)
}
// 批改题目  (练习,我的做题,我的收藏模式下)
const handleQuestion = () => {
const handleQuestion = () => {  
  for (let index = 0; index < examination.cardList.length; index++) {
    const item = examination.cardList[index]
    for (let cindex = 0; cindex < item.infoList.length; cindex++) {
@@ -1108,16 +1231,34 @@
        }
      }
      if (!citem.isRight && citem.questionType != 'shortAnswer') {
        
        // 客观题回答错误 记录错题
        if (examination.errorList.findIndex((errorItem) => errorItem == citem.id) == -1) {
          examination.errorList.push(citem.id)
        if (citem.isJson) {
          if (
            examination.allError[1].errorList.findIndex((erroritem) => erroritem == citem.id) == -1
          ) {
            examination.allError[1].errorList.push(citem.id)
          }
        } else {
          if (examination.errorList.findIndex((errorItem) => errorItem == citem.id) == -1) {
            examination.errorList.push(citem.id)
          }
        }
      } else {
        if (props.type == 'errorQuestion' || props.type == 'option') {
          // 从错题集中移除
          let index = examination.errorList.findIndex((erroritem) => erroritem == citem.id)
          if (index > -1) {
            examination.errorList.splice(index, 1)
          if (citem.isJson) {
            let index = examination.allError[1].errorList.findIndex(
              (erroritem) => erroritem == citem.id
            )
            if (index > -1) {
              examination.allError[1].errorList.splice(index, 1)
            }
          } else {
            let index = examination.errorList.findIndex((erroritem) => erroritem == citem.id)
            if (index > -1) {
              examination.errorList.splice(index, 1)
            }
          }
        }
      }
@@ -1135,12 +1276,14 @@
        }
      ]
    })
    .then((res) => {
    .then((res:any) => {
      console.log('错题已保存', examination.allError)
    })
  if (props.type == 'option') {
    recordAnswerData()
  }
  console.log('提交错题',examination.errorList,examination.allError);
  
}
// 处理答题数据
const recordAnswerData = () => {
@@ -1159,14 +1302,63 @@
  console.log('保存的数据', infoData)
  setAnswerInfo(infoData)
}
// 获取用户旧答题数据
const getAnswerInfo = (callback) => {
// 未提交保存答案方法
const saveAnswerData = () => {
  let arr = []  
  for (let index = 0; index < examination.cardList.length; index++) {
    const item = examination.cardList[index];
    for (let cindex = 0; cindex < item.infoList.length; cindex++) {
      const citem = item.infoList[cindex];
      if(citem.userAnswer && citem.userAnswer.length) {
        arr.push({
          id:citem.id,
          userAnswer:citem.userAnswer
        })
      }
    }
  }
  console.log('用户答案',arr);
  setUserAnswer(arr)
}
// 未提交退出答题，保存用户答案
const setUserAnswer = (data:any) => {
  MG.identity
    .setUserKey({
      setKeyRequests: [
        {
          domain: 'beforeAnswerData',
          key: props.info.id,
          value: JSON.stringify(data)
        }
      ]
    })
    .then((res:any) => {
      console.log('提交用户答题数据成功')
    })
}
// 获取未提交退出答题的用户答案
 const getUserAnswer = async() => {
  let data
  await MG.identity
    .getUserKey({
      domain: 'beforeAnswerData',
      keys: [props.info.id]
    })
    .then((res:any) => {
      if(res.length) {
        data = JSON.parse(res[0].value)
      }
    })
    return data
 }
// 获取用户旧答题数据(提交后)
const getAnswerInfo = (callback:any) => {
  MG.identity
    .getUserKey({
      domain: 'answerData',
      keys: [props.info.id]
    })
    .then((res) => {
    .then((res:any) => {
      if (callback) callback(res)
    })
}
@@ -1182,18 +1374,18 @@
        }
      ]
    })
    .then((res) => {
    .then((res:any) => {
      console.log('提交用户答题数据成功')
    })
}
// 删除用户答题数据
const deleteAnswerInfo = (callback) => {
const deleteAnswerInfo = (callback:any) => {
  MG.identity
    .delUserKey({
      domain: 'answerData',
      keys: [props.info.id]
    })
    .then((res) => {
    .then((res:any) => {
      if (callback) callback()
    })
}
@@ -1208,10 +1400,25 @@
        }
      ]
    })
    .then((res) => {
    .then((res:any) => {
      console.log('收藏/取消成功')
    })
}
const clearError = () => {
  MG.identity
    .setUserKey({
      setKeyRequests: [
        {
          domain: 'errorData',
          key: props.activeBook.bookId,
          value: JSON.stringify([])
        }
      ]
    })
    .then((res:any) => {
      console.log('错题已清空')
    })
}
defineExpose({ handleExaminationDialog })
</script>