From e6a3acf38930a8caffa3b1b19e9dc08526a70c71 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期三, 27 十一月 2024 14:43:35 +0800 Subject: [PATCH] 答题器重做优化 --- src/components/examinations/index.vue | 84 +++++++++++++++++++++++++++++++++-------- 1 files changed, 67 insertions(+), 17 deletions(-) diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue index d65b922..653a3a7 100644 --- a/src/components/examinations/index.vue +++ b/src/components/examinations/index.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 v-html="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 v-html="item.catalogName"></span> + </span> + <img + :src="item.isCollect ? isHeart : heart" + alt="" + class="collect-png" + @click="setCollect(nindex, index)" + v-if="!hideCollect && item.type == 'material'" + /> </p> <el-image v-if="item.catalogImage" @@ -79,14 +88,22 @@ v-html="itemText" class="input-txt" ></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 + class="mathField" + :menuItems="[]" + @input="onChangeInput($event, nindex, index, itemText.num)" + > + {{ value.userAnswer[itemText.num] }} + </math-field> </span> </p> <!-- 瀵屾枃鏈� --> @@ -127,7 +144,7 @@ alt="" class="collect-png" @click="setCollect(nindex, index)" - v-if="!(hideCollect && value.questionType == 'shortAnswer')" + v-if="!hideCollect && item.type != 'material'" /> <!-- 鏀惰棌 --> </div> @@ -515,6 +532,7 @@ </template> <script> +import { MathfieldElement } from "mathlive"; import { Message } from "element-ui"; import TEditorVue from "../teditor/index.vue"; export default { @@ -600,12 +618,12 @@ getPublicImage(md5, width, height) { if (!md5) return; if (md5.includes("http")) { - if(width) { - return md5 + `?width=${width}` + if (width) { + return md5 + `?width=${width}`; } else { - return md5 + return md5; } - }; + } let src = null; if (md5) { src = process.env.VUE_APP_API_URL + `/file/GetPreViewImage?md5=${md5}`; @@ -650,7 +668,18 @@ const item = this.cardData[index]; for (let cindex = 0; cindex < item.infoList.length; cindex++) { const citem = item.infoList[cindex]; - citem.userAnswer = ""; + if (typeof citem.userAnswer == "string") { + citem.userAnswer = ""; + } else { + if (citem.questionType == "multipleChoice") { + citem.userAnswer = []; + } else { + // 濉┖棰� + for (let dindex = 0; dindex < citem.userAnswer.length; dindex++) { + citem.userAnswer[dindex] = ''; + } + } + } citem.isComplete = false; } } @@ -808,8 +837,14 @@ }, // 棰樼洰鏀惰棌鎸夐挳,鏀惰棌鍜屽彇娑堝悓涓�鎺ュ彛锛屽彇娑堟暟缁勫噺鍘昏椤筰d setCollect(num, number) { - const item = this.cardData[num].infoList[number]; + let item = null; + if (number) { + item = this.cardData[num].infoList[number]; + } else { + item = this.cardData[num]; + } item.isCollect = !item.isCollect; + console.log(111, item); if (this.cardData.length == 0) { this.collectList.push(item.id); } else { @@ -827,7 +862,7 @@ const item = this.allCollect[index]; if (item.type == this.sourceType) item.collectList = this.collectList; } - // console.log(this.allCollect, this.collectList, list); + console.log("鐐瑰嚮鏀惰棌鎸夐挳", this.allCollect); this.MG.identity .setUserKey({ setKeyRequests: [ @@ -854,6 +889,7 @@ .then((res) => { try { const collect = JSON.parse(res[0].value); + console.log("鍏ㄩ儴鏀惰棌id", collect); if (collect.length) { this.collectList = collect.find( (citem) => citem.type == this.sourceType @@ -897,9 +933,11 @@ ).errorList; } } catch (error) {} - console.log("閿欓鍒楄〃", this.allError); }) .catch(() => {}); + }, + onChangeInput(e, index, cindex, num) { + this.cardData[index].infoList[cindex].userAnswer[num] = e.target.value; }, }, }; @@ -913,8 +951,13 @@ <style lang="less" scoped> .catalogName { + display: flex; text-indent: 1em !important; font-size: 16px; + .catalogName-box { + display: inline-block; + width: 94%; + } } .catalogImage { width: 50%; @@ -1060,6 +1103,9 @@ flex-wrap: wrap; } .titleText { + display: flex; + flex-wrap: wrap; + align-items: center; text-align: left; min-width: 90%; font-size: 16px; @@ -1115,6 +1161,10 @@ width: 21px; height: 21px; } + .mathField { + min-width: 200px; + max-width: 518px; + } } /** 閫夐」 */ -- Gitblit v1.9.1