From 4165ebe94e92af85b093abe264eb404c6a5181e7 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期五, 22 十一月 2024 10:48:08 +0800
Subject: [PATCH] 答题器收藏功能优化
---
src/assets/js/middleGround/tool.js | 1
src/views/examination/components/list.vue | 165 +++++++++++++++++++++++-----------------
src/views/examination/index.vue | 36 +++++---
3 files changed, 119 insertions(+), 83 deletions(-)
diff --git a/src/assets/js/middleGround/tool.js b/src/assets/js/middleGround/tool.js
index 600201e..b9956e5 100644
--- a/src/assets/js/middleGround/tool.js
+++ b/src/assets/js/middleGround/tool.js
@@ -417,6 +417,7 @@
// 鑾峰彇涓嶅彈淇濇姢鐨勫浘鐗�
export function getPublicImage(md5, width, height,storeInfo) {
+ if(md5 && md5.includes('http')) return md5 + `?md5=${md5}`
let src = null;
if (md5) {
src = requestCtx + `/file/GetPreViewImage?md5=${md5}`;
diff --git a/src/views/examination/components/list.vue b/src/views/examination/components/list.vue
index 818d7dc..fa5947c 100644
--- a/src/views/examination/components/list.vue
+++ b/src/views/examination/components/list.vue
@@ -7,12 +7,21 @@
v-show="item.infoList.length"
>
<p class="catalogName" :style="{ color: primaryColor }">
- <span v-if="nindex == 0">涓�銆�</span>
- <span v-if="nindex == 1">浜屻��</span>
- <span v-if="nindex == 2">涓夈��</span>
- <span v-if="nindex == 3">鍥涖��</span>
- <span v-if="nindex == 4">浜斻��</span>
- <span>{{ item.catalogName }}</span>
+ <span class="catalogName-box" >
+ <span v-if="nindex == 0">涓�銆�</span>
+ <span v-if="nindex == 1">浜屻��</span>
+ <span v-if="nindex == 2">涓夈��</span>
+ <span v-if="nindex == 3">鍥涖��</span>
+ <span v-if="nindex == 4">浜斻��</span>
+ <span>{{ item.catalogName }}</span>
+ </span>
+ <img
+ :src="item.isCollect ? isHeart : heart"
+ alt=""
+ class="collect-png"
+ @click="handleCollect(nindex)"
+ v-if="item.type == 'material'"
+ />
</p>
<ul>
<li v-for="(value, index) in item.infoList" :key="value.id" :id="'listItem-' + value.id">
@@ -46,7 +55,7 @@
></el-image>
<!-- 鏂囧瓧鍔犲浘鐗� -->
<p class="stemTxtAndImage titleText" v-else-if="value.stemStyle == 'TxtAndImage'">
- <span> {{ value.stem.stemTxt }}</span>
+ <span v-html="value.stem.stemTxt" ></span>
<el-image
:src="getPublicImage(value.stem.stemImage, 150)"
:preview-src-list="[getPublicImage(value.stem.stemImage)]"
@@ -58,14 +67,18 @@
<span v-for="(itemText, indexText) in value.stem" :key="indexText">
<span v-if="typeof itemText == 'string'" v-html="itemText"></span>
<!-- -->
- <input
+ <!-- <input
v-else
type="text"
class="input"
v-model.trim="value.userAnswer[itemText.num]"
:disabled="value.isComplete"
:style="{ backgroundColor: inputBc }"
- />
+ /> -->
+ <math-field v-else @input="onChangeInput($event,nindex,index,indexText)" class="mathField" :menuItems="[]">
+ {{ value.userAnswer[itemText.num] }}
+ </math-field
+ >
<!-- -->
</span>
</p>
@@ -77,14 +90,14 @@
v-cloak
></p>
</div>
+ <!-- 鏀惰棌 -->
<img
:src="value.isCollect ? isHeart : heart"
alt=""
class="collect-png"
@click="handleCollect(nindex, index)"
- v-if="!(hideCollect && value.questionType == 'shortAnswer')"
+ v-if="item.type != 'material'"
/>
- <!-- 鏀惰棌 -->
</div>
<div class="questionContent">
<!-- 鍗曢�� -->
@@ -98,7 +111,7 @@
v-for="content in value.option"
:key="content.value"
:label="content.value"
- @change="onChangeRadio(nindex,index)"
+ @change="onChangeRadio(nindex, index)"
border
:class="
value.optionStyle == 'Image' ||
@@ -118,7 +131,7 @@
:preview-src-list="[getPublicImage(content.img)]"
v-if="isReal"
></el-image>
- <img :src="content.img" alt="" v-if="value.isJson" class="radio-img" />
+ <img :src="content.img" alt="" v-if="value.isJson" class="radio-img" />
<el-image
v-else
:src="getPublicImage(content.img, 115)"
@@ -202,7 +215,7 @@
<el-input
:disabled="value.isComplete"
style="width: 94%; margin: 0 auto"
- v-else-if="value.questionType == 'shortAnswer'"
+ v-else-if="value.questionType == 'shortAnswer' ||value.questionType =='formula'"
type="textarea"
:rows="6"
placeholder="璇疯緭鍏ュ唴瀹�"
@@ -217,18 +230,20 @@
value.questionType == 'completion')
"
>
- <el-button @click="onChangeRadio(nindex,index)" style="margin-top: 10px">鏌ョ湅瑙ｆ瀽</el-button>
+ <el-button @click="onChangeRadio(nindex, index)" style="margin-top: 10px"
+ >鏌ョ湅瑙ｆ瀽</el-button
+ >
</div>
<!-- 鎻愪氦鍚庤В鏋� -->
<div class="analysis" v-if="value.isComplete">
<ul class="analysis-box">
- <li class="headerConent" style="width:60%">
+ <li class="headerConent" style="width: 60%">
<!-- 姝ｇ‘閿欒鏍囪瘑 -->
- <ul class="mark">
+ <ul class="mark">
<li v-if="value.isRight" class="mark-correct">姝ｇ‘</li>
<li v-if="value.isRight == false" class="mark-error">閿欒</li>
- </ul>
- <p :title="arrayToString(value.answer)">
+ </ul>
+ <p :title="arrayToString(value.answer)">
<span>銆愭纭瓟妗堛�戯細</span>
<span v-html="arrayToString(value.answer)" class="correctBox"></span>
</p>
@@ -238,23 +253,22 @@
style="margin-left: 20px"
>
<span>鎮ㄧ殑绛旀锛�</span>
- <span class="errorBox" >{{
+ <span class="errorBox">{{
arrayToString(value.userAnswer) ? arrayToString(value.userAnswer) : '-'
}}</span>
-
</p>
</li>
<li>
<div class="difficulty" v-if="value.difficulty">
- <span style="color: #333">闅惧害绛夌骇锛�</span>
- <el-rate
- v-model="value.difficulty"
- :max="3"
- size="large"
- disabled
- disabled-void-color="#949494"
- />
- </div>
+ <span style="color: #333">闅惧害绛夌骇锛�</span>
+ <el-rate
+ v-model="value.difficulty"
+ :max="3"
+ size="large"
+ disabled
+ disabled-void-color="#949494"
+ />
+ </div>
</li>
</ul>
<el-collapse
@@ -269,11 +283,11 @@
<div class="headerConent sitgBox">
<p v-if="!value.isUnfold" class="al-cn">
<span class="analysisColor">灞曞紑瑙ｆ瀽</span>
- <img :src="openIcon" alt="" class="analysis-icon">
+ <img :src="openIcon" alt="" class="analysis-icon" />
</p>
<p v-else>
<span class="analysisColor">鏀惰捣瑙ｆ瀽</span>
- <img :src="closeIcon" alt="" class="analysis-icon">
+ <img :src="closeIcon" alt="" class="analysis-icon" />
</p>
</div>
</div>
@@ -288,13 +302,13 @@
<el-collapse-item :name="value.id" class="objective">
<template #title>
<div class="headerBox">
- <p v-if="!value.isUnfold" class="al-cn">
+ <p v-if="!value.isUnfold" class="al-cn">
<span class="analysisColor">灞曞紑绛旀涓庤В鏋�</span>
- <img :src="openIcon" alt="" class="analysis-icon">
+ <img :src="openIcon" alt="" class="analysis-icon" />
</p>
- <p v-else class="al-cn">
+ <p v-else class="al-cn">
<span class="analysisColor">鏀惰捣绛旀涓庤В鏋�</span>
- <img :src="closeIcon" alt="" class="analysis-icon">
+ <img :src="closeIcon" alt="" class="analysis-icon" />
</p>
</div>
</template>
@@ -327,20 +341,20 @@
</template>
<script setup lang="ts">
-import { defineProps, onMounted, ref,reactive } from 'vue'
+import { defineProps, onMounted, ref, reactive } from 'vue'
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
import heart from '@/assets/images/examination/collectIcon.png'
import isHeart from '@/assets/images/examination/collectClickIcon.png'
import openIcon from '@/assets/images/examination/open.png'
import closeIcon from '@/assets/images/examination/close.png'
const props = defineProps({ cardList: Array, collectList: Array })
-const emits = defineEmits([ 'onChangeRadio','setCollect'])
+const emits = defineEmits(['onChangeRadio', 'setCollect','onChangeInput'])
// const presentId = ref<Number>(props.collectList[0])
onMounted(() => {
// if (props.collectList) presentId.value = props.collectList[0]
})
// 鏁扮粍杞负瀛楃涓叉柟娉�
-const arrayToString = (data:any) => {
+const arrayToString = (data: any) => {
// 妫�鏌ユ槸鍚︿负鏁扮粍
if (Array.isArray(data)) {
// 浣跨敤 join 鏂规硶灏嗘暟缁勮浆鎹负瀛楃涓诧紝榛樿浣跨敤閫楀彿鍒嗛殧
@@ -350,7 +364,7 @@
return data.replace(/<[^>]*>/g, '')
}
}
-const isHaveAnswer = (data:any) => {
+const isHaveAnswer = (data: any) => {
if (typeof data == 'string') {
data = data
.replace(/<[^>]*>/g, '')
@@ -371,18 +385,25 @@
}
}
// 鏀惰棌鎸夐挳
-const handleCollect = (num:number,number:number) => {
- emits('setCollect',num,number)
+const handleCollect = (num: number, number: number) => {
+ emits('setCollect', num, number)
}
// 鍗曢�夋杈撳叆
-const onChangeRadio = (num:number,number:number) => {
- emits('onChangeRadio', num,number)
+const onChangeRadio = (num: number, number: number) => {
+ emits('onChangeRadio', num, number)
+}
+const onChangeInput = (event: any,index:number,cindex:number,dindex:number) => {
+ emits('onChangeInput',event.target.value,index,cindex,dindex)
}
</script>
<style lang="less" scoped>
.catalogName {
+ display: flex;
margin-top: 40px;
+ .catalogName-box {
+ width: 94%;
+ }
}
.collect-png {
cursor: pointer;
@@ -454,7 +475,6 @@
display: flex;
align-items: flex-start;
span {
- height: 24px;
line-height: 24px;
text-align: center;
font-size: 16px;
@@ -542,8 +562,8 @@
width: 100%;
padding: 0 20px;
font-size: 14px;
- background-color: #E0F2FF ;
- color: #3B93FE;
+ background-color: #e0f2ff;
+ color: #3b93fe;
.checkAnalysis {
cursor: pointer;
height: 100%;
@@ -554,7 +574,7 @@
/deep/ .el-collapse-item__content {
width: 100%;
padding: 0 20px;
- background-color: #E0F2FF;
+ background-color: #e0f2ff;
font-size: 14px;
color: #333;
}
@@ -595,7 +615,8 @@
.mark {
font-size: 14px;
color: #fff;
- .mark-error,.mark-correct {
+ .mark-error,
+ .mark-correct {
white-space: nowrap;
min-height: 20px;
line-height: 18px;
@@ -606,29 +627,29 @@
background-color: #1fbc1f;
}
.mark-error {
- background-color: #FF5E5E;
+ background-color: #ff5e5e;
}
}
.headerConent {
- height: 100%;
- display: flex;
- align-items: center;
- .el-image {
- width: 9px;
- height: 9px;
- }
- .correct {
- color: #70B503;
- width: 200px;
- text-align: left;
- }
- .error {
- text-align: left;
- margin-left: 40px;
- width: 200px;
- color: #FF5E5E;
- }
- }
+ height: 100%;
+ display: flex;
+ align-items: center;
+ .el-image {
+ width: 9px;
+ height: 9px;
+ }
+ .correct {
+ color: #70b503;
+ width: 200px;
+ text-align: left;
+ }
+ .error {
+ text-align: left;
+ margin-left: 40px;
+ width: 200px;
+ color: #ff5e5e;
+ }
+}
.difficulty {
display: flex;
align-items: center;
@@ -648,6 +669,10 @@
background-color: red;
}
.primary-text-color {
- color: #3B93FE;
+ color: #3b93fe;
+}
+.mathField {
+ width: 500px;
+ margin-top: 10px;
}
</style>
diff --git a/src/views/examination/index.vue b/src/views/examination/index.vue
index 6499ea5..41dfcc6 100644
--- a/src/views/examination/index.vue
+++ b/src/views/examination/index.vue
@@ -85,6 +85,7 @@
:cardList="examination.cardList"
@setCollect="setCollect"
@onChangeRadio="onChangeRadio"
+ @onChangeInput="onChangeInput"
/>
</div>
</li>
@@ -190,7 +191,7 @@
getErrorList()
} else if (props.type == 'collectQuestion') {
examination.submitStatus = true
- await getcollectId() // 鑾峰彇鏀惰棌棰樼洰
+ await getcollectId() // 鑾峰彇鏀惰棌棰樼洰id
// 鏀惰棌澶�
} else if (props.type == 'errorQuestion') {
examination.submitStatus = true
@@ -244,7 +245,7 @@
} else if (item.questionType == 'singleChoice' || item.questionType == 'judge') {
// 鍗曢�� 鍒ゆ柇
item.isRight = item.answer == item.userAnswer
- } else if (item.questionType == 'shortAnswer') {
+ } else if (item.questionType == 'shortAnswer' || item.questionType == 'formula') {
// 绠�绛� 缈昏瘧
item.isRight = null
} else if (item.questionType == 'completion') {
@@ -275,7 +276,7 @@
citem.isUnfold = ''
examination.isCollapse = false
} else {
- citem.questionType == 'shortAnswer' ? (citem.isUnfold = true) : (citem.isUnfold = citem.id)
+ citem.questionType == 'shortAnswer' || citem.questionType == 'formula' ? (citem.isUnfold = true) : (citem.isUnfold = citem.id)
examination.isCollapse = true
}
}
@@ -289,8 +290,13 @@
examination.submitStatus = true
}
// 棰樼洰鏀惰棌鎸夐挳,鏀惰棌鍜屽彇娑堝悓涓�鎺ュ彛锛屽彇娑堟暟缁勫噺鍘昏椤筰d
-const setCollect = (num: number, number: number) => {
- const item = examination.cardList[num].infoList[number]
+const setCollect = (num: number, number?: number) => {
+ let item = null
+ if(number) {
+ item = examination.cardList[num].infoList[number]
+ } else {
+ item = examination.cardList[num]
+ }
item.isCollect = !item.isCollect
if (item.isJson) {
// json棰樼洰鏀惰棌鍙栨秷
@@ -663,6 +669,7 @@
}
// 鑾峰彇鏀惰棌澶�
const getCollectDataList = async () => {
+ console.log('鏀惰棌id',examination.allCollect)
// 寮�濮嬭姹�
let oldData = null
let oldList:any = []
@@ -752,7 +759,7 @@
isSubmit: false, // 鏌ョ湅瑙ｆ瀽
isRight: null, // 鏄惁姝ｇ‘
isComplete: false,
- isCollect: examination.collectList.indexOf(item.id) > -1 ? true : false,
+ isCollect: true,
isUnfold: ''
}
// 澶氶�夊拰濉┖绛旀鑲负鏁扮粍锛岃杞崲JSON鏍煎紡
@@ -889,7 +896,7 @@
}
}
}
-
+ console.log('鏀惰棌json',jsonCollectList);
for (let index = 0; index < jsonCollectList.length; index++) {
const item = jsonCollectList[index]
if (item.questionType == 'singleChoice') {
@@ -900,11 +907,11 @@
examination.cardList[2].infoList.push(item)
} else if (item.questionType == 'completion') {
examination.cardList[3].infoList.push(item)
- } else if (item.questionType == 'shortAnswer') {
+ } else if (item.questionType == 'shortAnswer' || item.questionType == 'formula') {
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)
@@ -1128,7 +1135,7 @@
} else if (item.Embedded_QuestionBank_QuestionType == 'completion') {
questionObj.type = '濉┖棰�'
completionArr.push(questionObj)
- } else if (item.Embedded_QuestionBank_QuestionType == 'shortAnswer') {
+ } else if (item.Embedded_QuestionBank_QuestionType == 'shortAnswer' ) {
questionObj.type = '绠�绛旈'
shortArr.push(questionObj)
}
@@ -1185,7 +1192,7 @@
examination.cardList[2].infoList.push(item)
} else if (item.questionType == 'completion') {
examination.cardList[3].infoList.push(item)
- } else if (item.questionType == 'shortAnswer') {
+ } else if (item.questionType == 'shortAnswer' || item.questionType == 'formula') {
examination.cardList[4].infoList.push(item)
} else if (item.type && item.type == 'material') {
examination.cardList[examination.cardList.length] = item
@@ -1215,7 +1222,7 @@
} else if (citem.questionType == 'singleChoice' || citem.questionType == 'judge') {
if (citem.id == '63825') console.log('i', item)
citem.isRight = citem.answer == citem.userAnswer
- } else if (citem.questionType == 'shortAnswer') {
+ } else if (citem.questionType == 'shortAnswer' || item.questionType == 'formula') {
// 绠�绛� 缈昏瘧
citem.isRight = null
} else if (citem.questionType == 'completion') {
@@ -1230,7 +1237,7 @@
}
}
}
- if (!citem.isRight && citem.questionType != 'shortAnswer') {
+ if (!citem.isRight && citem.questionType != 'shortAnswer' && citem.questionType != 'formula') {
// 瀹㈣棰樺洖绛旈敊璇� 璁板綍閿欓
if (citem.isJson) {
@@ -1419,6 +1426,9 @@
console.log('閿欓宸叉竻绌�')
})
}
+const onChangeInput = (value:any,index:number,cindex:number,dindex:number) => {
+ examination.cardList[index].infoList[cindex].userAnswer[dindex] = value
+}
defineExpose({ handleExaminationDialog })
</script>
--
Gitblit v1.9.1