题库功能优化

闫增涛

2024-07-01 d0940596d5f35ef96a5818ee315f86454c3d0ab1

 src/views/readerPages/webHome.vue

@@ -117,6 +117,11 @@
              <div>教师资源</div>
              <div :class="resourceType == 'teacher' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" />
            <div class="tabItem hover" @click="selectResourceType('collect')">
              <div>收藏资源</div>
              <div :class="resourceType == 'collect' ? 'text' : 'line'"></div>
            </div>
          </div>
          <div v-if="activeMenu == '题库'" class="resourceTab">
            <div
@@ -127,21 +132,33 @@
              <div>习题</div>
              <div :class="exercisesType == 'exercises' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1"/>
            <div class="tabItem hover" @click="selectExercisesType('additional')" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1">
            <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1" />
            <div
              class="tabItem hover"
              @click="selectExercisesType('additional')"
              v-if="bookConfig.textbookComponents.indexOf('A4821F71') > -1"
            >
              <div>附加题</div>
              <div :class="exercisesType == 'additional' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1"/>
            <div class="tabItem hover" @click="selectExercisesType('wrong')" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1">
            <!-- <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1" />
            <div
              class="tabItem hover"
              @click="selectExercisesType('wrong')"
              v-if="bookConfig.textbookComponents.indexOf('AFC1A288') > -1"
            >
              <div>错题本</div>
              <div :class="exercisesType == 'wrong' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1"/>
            <div class="tabItem hover" @click="selectExercisesType('collection')" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1">
            </div> -->
            <!-- <hr class="hr" v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1" />
            <div
              class="tabItem hover"
              @click="selectExercisesType('collection')"
              v-if="bookConfig.textbookComponents.indexOf('A434F2C0') > -1"
            >
              <div>收藏夹</div>
              <div :class="exercisesType == 'collection' ? 'text' : 'line'"></div>
            </div>
            </div> -->
          </div>
        </div>
        <!-- 目录 -->
@@ -405,6 +422,12 @@
                            "
                            ><Download
                          /></el-icon>
                          <!-- 收藏按钮 -->
                           <img 
                            :src="collectResourceList.findIndex(citem => citem.id == item.id) > -1 ? isHeart : heart  " 
                            class="icon hover" 
                            style="width: 15px;" 
                            @click="handleCollectResource(item.id,item.md5 ? item.md5 : '',item.resourcePath ? item.resourcePath : '',item.resourceType,item.resourceType == '视频' || '音频' ? 'bits' : 'json',item.resourceName)" />
                        </div>
                      </div>
                    </div>
@@ -470,7 +493,10 @@
          </div>
        </div>
        <div class="questionList" v-if="activeMenu == '题库'" v-loading="listLoading">
          <div class="resourceSearchBox" v-if="exercisesType !== 'collection' && exercisesType !=='wrong'">
          <div
            class="resourceSearchBox"
            v-if="exercisesType !== 'collection' && exercisesType !== 'wrong'"
          >
            <div class="inputBox">
              <el-input
                class="custom-input"
@@ -491,18 +517,29 @@
              <div v-for="(item, index) in questionList" :key="index" class="reMarkItem">
                <div
                  class="questionCon hover"
                  @click="clickQuestion(exercisesType,item)"
                  @click="clickQuestion(exercisesType, item)"
                  :title="item.resourceName"
                >
                  {{ item.resourceName }}
                </div>
              </div>
            </div>
            <div v-if="questionList.length == 0 && (exercisesType !== 'collection' && exercisesType !=='wrong')">
            <div
              v-if="
                questionList.length == 0 &&
                exercisesType !== 'collection' &&
                exercisesType !== 'wrong'
              "
            >
              <el-empty :image-size="60" description="暂无数据" />
            </div>
          </div>
        </div>
        <!-- 题库底部收藏夹和错题集 -->
        <ul class="question-bottom" v-if="activeMenu == '题库'">
            <li @click="selectExercisesType('collection')">收藏夹</li>
            <li @click="selectExercisesType('wrong')">错题本</li>
          </ul>
        <!-- 菜单内容收起 -->
        <div class="menuStateBox" v-if="menuState.open">
          <svg
@@ -1198,10 +1235,18 @@
    </div>
  </el-dialog>
  <!-- 答题器 -->
  <examination ref="examinationRef"  :activeBook="bookConfig" :info="examinationData.info" :type="examinationData.type" :infoType="examinationData.infoType" />
  <examination
    ref="examinationRef"
    :activeBook="bookConfig"
    :info="examinationData.info"
    :type="examinationData.type"
    :infoType="examinationData.infoType"
  />
</template>

<script setup lang="ts">
import heart from '@/assets/images/examination/collectIcon.png'
import isHeart from '@/assets/images/examination/collectClickIcon.png'
import { ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useClipboard from 'vue-clipboard3'
@@ -1562,7 +1607,11 @@
    {
      name: '题库',
      icon: question,
      isShow: bookConfig.value.textbookComponents.indexOf('3D3B4F55') > -1 || bookConfig.value.textbookComponents.indexOf('AFC1A288') > -1 || bookConfig.value.textbookComponents.indexOf('A434F2C0') > -1 || bookConfig.value.textbookComponents.indexOf('A4821F71') > -1
      isShow:
        bookConfig.value.textbookComponents.indexOf('3D3B4F55') > -1 ||
        bookConfig.value.textbookComponents.indexOf('AFC1A288') > -1 ||
        bookConfig.value.textbookComponents.indexOf('A434F2C0') > -1 ||
        bookConfig.value.textbookComponents.indexOf('A4821F71') > -1
    }
  ]
  teachToolsMenuData = [
@@ -1778,6 +1827,7 @@
const showHandle = ref(null)
const playIndex = ref(null) //音频播放
const audioPlayer = ref(null)
const collectResourceList = ref([])
const getResourceData = () => {
  if (token) {
    imgPreviewList.value = []
@@ -1962,6 +2012,8 @@
      })
      .catch(function (error) {
        console.log(error)
        resourceDataList.value = []
        classifySelectList.value = []
        listLoading.value = false
      })
  } else {
@@ -2040,14 +2092,23 @@
const selectResourceType = (type) => {
  resourceType.value = type
  searchText.value = ''
  getResourceData()
  if (type == 'collect') {
    getCollectResource()
  } else {
    getResourceData()
  }
}
//资源类型图片/视频/音频/习题/其他
const classifyClick = (item) => {
  activeClassify.value = item.key
  resourceDataList.value = []
  searchText.value = ''
  getResourceData()
  if(resourceType.value == 'collect') {
    getCollectResource()
  } else {
    getResourceData()
  }
  
}
const searchBtn = () => {
  if (searchShow.value) {
@@ -2057,14 +2118,150 @@
  }
}

// 获取收藏的资源
const getCollectResource = () => {
  if(token) {
    MG.identity
    .getUserKey({
      domain: 'collectResource',
      keys: [bookConfig.value.bookId]
    })
    .then((res) => {
      if (res.length) {
        collectResourceList.value = JSON.parse(res[0].value)
        console.log('收藏资源列表', collectResourceList.value)
        if(collectResourceList.value.length > 0) {
            let imgCount = 0
            let audioCount = 0
            let videoCount = 0
            let exercisesCount = 0
            let otherCount = 0
            resourceDataList.value = []
            collectResourceList.value.forEach((resItem) => {
              if (resItem.resourceType == '图片') {
                if (resItem.resourcePath) {
                  resItem.resourcePath = bookConfig.value.resourceUrl + '/' + resItem.resourcePath
                } else {
                  resItem.resourcePath =
                    bookConfig.value.requestCtx + '/file/GetPreViewImage?md5=' + resItem.md5
                }

                imgPreviewList.value.push(resItem.resourcePath)
                if (activeClassify.value == 'image') {
                  resourceDataList.value.push(resItem)
                }
                imgCount++
              } else if (resItem.resourceType == '音频') {
                if (activeClassify.value == 'audio') {
                  resourceDataList.value.push(resItem)
                }
                audioCount++
              } else if (resItem.resourceType == '视频') {
                if (activeClassify.value == 'video') {
                  resourceDataList.value.push(resItem)
                }
                videoCount++
              } else {
                if (activeClassify.value == 'other') {
                  resourceDataList.value.push(resItem)
                }
                otherCount++
              }
            })
            classifySelectList.value = []
            if (imgCount > 0) {
              classifySelectList.value.push({
                title: '图片',
                count: imgCount,
                key: 'image'
              })
            }
            if (audioCount > 0) {
              classifySelectList.value.push({
                title: '音频',
                count: audioCount,
                key: 'audio'
              })
            }
            if (videoCount > 0) {
              classifySelectList.value.push({
                title: '视频',
                count: videoCount,
                key: 'video'
              })
            }
            if (otherCount > 0) {
              classifySelectList.value.push({
                title: '其他',
                count: otherCount,
                key: 'other'
              })
            }
            if (!activeClassify.value) {
              activeClassify.value = classifySelectList.value[0].key
              collectResourceList.value.forEach((resItem1) => {
                if (resItem1.resourceType == classifySelectList.value[0].title) {
                  resourceDataList.value.push(resItem1)
                }
              })
            }
        }
      } else {
        resourceDataList.value = []
      }
    })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        if (sessionStorage.getItem('loginCtx')) {
          window.open(sessionStorage.getItem('loginCtx'))
        } else {
          router.replace({
            path: '/login'
          })
        }
      })
      .catch(() => {})
  }
}
// 收藏按钮
const handleCollectResource = (id,md5,resourcePath,resourceType,source,resourceName) => {
    if(collectResourceList.value.findIndex(item => item.id == id) > -1) {
      collectResourceList.value = collectResourceList.value.filter(item => item.id != id)
    } else {
      collectResourceList.value.push({
        id,
        md5,
        resourcePath:resourcePath.replace(bookConfig.value.resourceUrl + '/',''),
        resourceType,
        source,
        resourceName
      })
    }
    MG.identity.setUserKey({
    setKeyRequests: [
      {
        domain: "collectResource",
        key:bookConfig.value.bookId,
        value: JSON.stringify(collectResourceList.value),
      },
    ],
  })
}

//习题
const exercisesType = ref('exercises') //习题类型
const questionList = ref([])
const examinationRef = ref() // 答题器实例
const examinationData = reactive({
  type:"",  // 答题类型  option 测试
  infoType:"",  // 数据来源  bits 比特后台  json  假数据
  info:{}, // 这套题的信息
  type: '', // 答题类型  option 测试
  infoType: '', // 数据来源  bits 比特后台  json  假数据
  info: {} // 这套题的信息
})
// 获取习题
const getExercisesList = () => {
@@ -2150,40 +2347,40 @@
//错题本
const wrongQuestionVisble = ref(false)
const selectExercisesType = (type) => {
  exercisesType.value = type
  searchText.value = ''

  if (type == 'exercises') {
    getExercisesList()
  } else if(type == 'additional') {
      exercisesType.value = type
      searchText.value = ''
  } else if (type == 'additional') {
    getAdditionalList()
  } else if(type == 'wrong'){
    openExaminationDialog(true,{},'errorQuestion')
    questionList.value = []
  }else{
    openExaminationDialog(true,{},'collectQuestion')
    questionList.value = []
      exercisesType.value = type
      searchText.value = ''
  } else if (type == 'wrong') {
    openExaminationDialog(true, {}, 'errorQuestion')
  } else {
    openExaminationDialog(true, {}, 'collectQuestion')
  }
}
// 题列表点击
const clickQuestion = (type:string,data:any) => {
const clickQuestion = (type: string, data: any) => {
  switch (type) {
    case 'exercises':
      JumpPosition(data)
      break;
      break
    case 'additional':
      openExaminationDialog(true,data,'option')
      break;
      openExaminationDialog(true, data, 'option')
      break
    default:
      break;
      break
  }
}
const openExaminationDialog = (isSHow:boolean,data:any,type:string) => {
  if(examinationRef.value) {
const openExaminationDialog = (isSHow: boolean, data: any, type: string) => {
  if (examinationRef.value) {
    examinationRef.value.handleExaminationDialog(isSHow)
    examinationData.type = type
    examinationData.info = data
  }
  
}

// 选中菜单
@@ -3923,6 +4120,7 @@
      }
    }
    .menuContent {
      // position: relative;
      width: 300px;
      flex-shrink: 0;
      height: calc(100vh - 48px);
@@ -4343,6 +4541,29 @@
        height: calc(100% - 60px);
        overflow-y: auto;
      }
      .questionList {
        height:83%
      }
      .question-bottom {
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: space-evenly;
        width:300px;
        padding:20px 0;
        background-color:#fff;
        li {
          cursor: pointer;
          width: 65px;
          height:65px;
          border:1px solid #cfcfcf;
          border-radius:10px;
          background-color:#f9f9f9;
          display:flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .menuStateBox {
      width: 25px;