From ce70bc450a2401997bb850f89f3c4dc0a23e0a72 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期五, 05 九月 2025 18:38:13 +0800
Subject: [PATCH] 31 数字化口腔修复技术 整本
---
src/components/dialogExaminations/index.vue | 266 ++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 203 insertions(+), 63 deletions(-)
diff --git a/src/components/dialogExaminations/index.vue b/src/components/dialogExaminations/index.vue
index b001916..5685dbf 100644
--- a/src/components/dialogExaminations/index.vue
+++ b/src/components/dialogExaminations/index.vue
@@ -30,7 +30,7 @@
<!-- 鏍囬 -->
<div class="questionTitle">
<div class="titleContent">
- <span class="questionNum" :style="{
+ <span class="questionNum" v-if="item.catalogName != '鏉愭枡棰�'" :style="{
marginTop:
value.questionType == 'completion' ||
value.questionType == 'mathField'
@@ -38,6 +38,18 @@
: '0',
}">{{ index + 1 }}.
</span>
+ <span class="questionNum" v-if="
+ item.catalogName == '鏉愭枡棰�' &&
+ value.questionType != 'material'
+ " :style="{
+ marginTop:
+ value.questionType == 'completion' ||
+ value.questionType == 'mathField'
+ ? '12px'
+ : '0',
+ }">{{ index }}.
+ </span>
+
<!-- 鍚姏杩涘害鏉� -->
<!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '鍚姏棰�'" /> -->
<!-- 浠呮枃瀛� -->
@@ -74,8 +86,8 @@
typeof itemText != 'string' &&
value.questionType == 'mathField'
" class="mathField" :menuItems="[]" @input="
- onChangeInput($event, nindex, index, itemText.num)
- ">
+ onChangeInput($event, nindex, index, itemText.num)
+ ">
{{ value.userAnswer[itemText.num] }}
</math-field>
</span>
@@ -95,9 +107,10 @@
</p>
</div>
<img :src="value.isCollect ? isHeart : heart" alt="" class="collect-png"
- @click="setCollect(nindex, index)" v-if="!hideCollect && item.type != 'material'" />
+ @click="setCollect(nindex, index)" v-if="!hideCollect && value.questionType != 'material'" />
<!-- 鏀惰棌 -->
</div>
+ <!-- 閫夐」 -->
<div class="questionContent">
<!-- 鍗曢�� -->
<el-radio-group :disabled="value.isComplete" class="option" v-if="
@@ -106,10 +119,10 @@
" v-model="value.userAnswer">
<el-radio v-for="(content, contentIndex) in value.option" :key="contentIndex + 'contentIndex'"
:label="content.value" :class="value.optionStyle == 'Image' ||
- value.optionStyle == 'TxtAndImage' ||
- value.optionStyle == 'RichText'
- ? 'optionImg'
- : 'optionTxt'
+ value.optionStyle == 'TxtAndImage' ||
+ value.optionStyle == 'RichText'
+ ? 'optionImg'
+ : 'optionTxt'
">
<p class="optionContent" v-if="value.optionStyle == 'Txt'">
{{ content.value }}銆亄{ content.txt }}
@@ -133,10 +146,10 @@
v-else-if="value.questionType == 'multipleChoice'">
<el-checkbox v-for="(content, contentCindex) in value.option" :key="contentCindex + 'contentCindex'"
:label="content.value" :name="content.text" :class="value.optionStyle == 'Image' ||
- value.optionStyle == 'TxtAndImage' ||
- value.optionStyle == 'RichText'
- ? 'optionImg'
- : 'optionTxt'
+ value.optionStyle == 'TxtAndImage' ||
+ value.optionStyle == 'RichText'
+ ? 'optionImg'
+ : 'optionTxt'
">
<p class="optionContent" v-if="value.optionStyle == 'Txt'">
{{ content.value }}銆亄{ content.txt }}
@@ -175,7 +188,7 @@
<el-button @click="checkPares(value)" style="margin-top: 10px">鏌ョ湅瑙ｆ瀽</el-button>
</div>
<!-- 鎻愪氦鍚庤В鏋� -->
- <div class="analysis" v-if="value.isComplete">
+ <div class="analysis" v-if="value.isComplete && value.questionType != 'material'">
<el-collapse v-model="value.isUnfold" accordion v-if="
value.questionType != 'shortAnswer' &&
value.questionType != 'formula'
@@ -189,8 +202,8 @@
<span v-html="arrayToString(value.answer)" class="correctBox"></span>
</p>
<p :class="value.isRight
- ? 'correct textOverFlow'
- : 'error textOverFlow'
+ ? 'correct textOverFlow'
+ : 'error textOverFlow'
" :title="arrayToString(value.userAnswer)" style="margin-left: 20px">
<span>鎮ㄧ殑绛旀锛�</span>
<span class="errorBox" v-if="isHaveAnswer(value.userAnswer)">{{
@@ -219,13 +232,12 @@
fill="#d81e06" p-id="25746"></path>
</svg>
</span>
-
<div class="headerConent sitgBox">
<p v-if="!value.isUnfold">
- <span class="analysisColor">灞曞紑瑙ｆ瀽</span><el-image />
+ <span class="analysisColor">灞曞紑瑙ｆ瀽</span>
</p>
<p v-else>
- <span class="analysisColor">鏀惰捣瑙ｆ瀽</span><el-image />
+ <span class="analysisColor">鏀惰捣瑙ｆ瀽</span>
</p>
</div>
</div>
@@ -259,10 +271,10 @@
<div class="referBox" v-if="value.analysisCon">
<span>瑙ｆ瀽锛�</span>
<p v-html="value.analysisCon" :class="[
- 'subjectiveBox',
- 'ti-2',
- value.isUnfold ? 'yincang' : '',
- ].join(' ')
+ 'subjectiveBox',
+ 'ti-2',
+ value.isUnfold ? 'yincang' : '',
+ ].join(' ')
"></p>
</div>
</el-collapse-item>
@@ -273,18 +285,18 @@
</ul>
</div>
<div class="bottom-btn" v-if="!loading">
- <el-button class="examinations-btn-box" @click="saveAnswer">淇濆瓨</el-button>
+ <el-button class="examinations-btn-box" @click="saveAnswer(page)">淇濆瓨</el-button>
<el-button @click="
- (page) => {
+ () => {
handleQuestion();
- saveAnswer(page);
+ saveAnswer(this.page);
}
" class="examinations-btn-box" :style="{ borderColor: primaryColor }">鎻愪氦</el-button>
<el-button @click="redo" class="examinations-btn-box">閲嶅仛</el-button>
<el-button @click="
- (page) => {
+ () => {
openAnswers();
- saveAnswer(page);
+ saveAnswer(this.page);
}
" class="examinations-btn-box" :style="{ borderColor: primaryColor }">鏌ョ湅绛旀</el-button>
</div>
@@ -298,20 +310,16 @@
import { MathfieldElement } from "mathlive";
import { Message } from "element-ui";
import TEditorVue from "../teditor/index.vue";
+import config from "@/assets/js/config";
+import getQuestionList from "@/assets/methods/examination";
export default {
name: "examination-option",
components: { TEditorVue },
props: {
- isClear: {
- type: Boolean,
- default: false,
- },
cardList: {
type: Array,
- },
- primaryColor: {
- type: String,
- default: "#00aeef",
+ required: true,
+ default: () => [],
},
chapter: {
type: Number,
@@ -334,12 +342,18 @@
questionTitle: {
type: String,
},
+ questionIDList: {
+ type: Array,
+ required: true,
+ default: () => [],
+ },
},
data() {
return {
type: "option",
cardData: [],
loading: true,
+ primaryColor: config.activeBook.bookThemeColor,
heart: require("@/assets/images/heart.png"),
isHeart: require("@/assets/images/heart-check.png"),
collectList: [],
@@ -369,10 +383,9 @@
},
watch: {
cardList: {
- handler(newVal) {
- this.cardData = this.cardList;
- if (newVal && newVal.length) {
- this.loading = false;
+ handler(newVal, ol) {
+ if (newVal && newVal.length && this.loading) {
+ this.handleCardle();
}
},
immediate: true,
@@ -384,6 +397,68 @@
this.getErrorList();
},
methods: {
+ async openDialogQuestion() {
+ this.localDialogVisible = true;
+ await this.handleCardle();
+ },
+
+ // 澶勭悊閫昏緫闂
+ async handleCardle() {
+ this.loading = true;
+ this.cardData = await getQuestionList(
+ this.page,
+ this.questionIDList,
+ this.config.activeBook,
+ this.cardList
+ );
+ if (this.cardData && this.cardData.length) {
+ // 閫掑綊澶勭悊鎵�鏈夐鐩紝灞曞紑 childList
+ this.cardData = this.flattenCardData(this.cardData);
+ this.loading = false;
+ }
+ },
+
+ /**
+ * 閫掑綊澶勭悊 cardData锛屽皢 material 绫诲瀷棰樼洰鐨� childList 灞曞紑
+ * 骞朵负姣忎釜瀛愰娣诲姞 parentIndex锛屾柟渚垮悗缁畾浣�
+ */
+ flattenCardData(cardData) {
+ const processedData = [];
+ cardData.forEach((section, sectionIndex) => {
+ // 涓烘瘡涓ぇ绫伙紙濡傚崟閫夐銆佹潗鏂欓锛夊垱寤轰竴涓柊鐨勫璞�
+ const processedSection = {
+ ...section,
+ infoList: [], // 閲嶇疆 infoList 鐢ㄤ簬瀛樻斁澶勭悊鍚庣殑棰樼洰
+ };
+
+ section.infoList.forEach((item, itemIndex) => {
+ if (
+ item.questionType == "material" &&
+ item.childList &&
+ item.childList.length > 0
+ ) {
+ // 濡傛灉鏄潗鏂欓涓旀湁瀛愰
+ // 1. 淇濈暀鏉愭枡棰樻湰韬紙濡傛灉闇�瑕佹樉绀洪骞诧級
+ processedSection.infoList.push(item);
+ item.childList.forEach((child, childIndex) => {
+ // 灏嗗瓙棰樻坊鍔犲埌娓叉煋鍒楄〃
+ processedSection.infoList.push(child);
+ });
+ } else {
+ // 濡傛灉涓嶆槸鏉愭枡棰橈紝鎴栬�呮病鏈夊瓙棰橈紝鐩存帴娣诲姞
+ processedSection.infoList.push(item);
+ }
+ });
+
+ // 灏嗗鐞嗗ソ鐨� section 娣诲姞鍒版渶缁堢粨鏋滀腑
+ // 鍙湁褰撳鐞嗗悗鐨� infoList 鏈夊唴瀹规椂鎵嶆坊鍔犺 section
+ if (processedSection.infoList.length > 0) {
+ processedData.push(processedSection);
+ }
+ });
+
+ return processedData;
+ },
hadleOpenDialog() { },
// 鑾峰彇涓嶅彈淇濇姢鐨勫浘鐗�
getPublicImage(md5, width, height) {
@@ -471,15 +546,12 @@
},
// 鎵规敼棰樼洰 (缁冧範,鎴戠殑鍋氶,鎴戠殑鏀惰棌妯″紡涓�)
handleQuestion() {
- debugger
let errorId = [];
const list = this.cardData;
-
for (let index = 0; index < list.length; index++) {
const item = list[index];
for (let cindex = 0; cindex < item.infoList.length; cindex++) {
const citem = item.infoList[cindex];
- citem.isComplete = true;
// 淇敼棰樼洰鐘舵�佷负瀹屾垚
citem.isComplete = true;
// 鎵规敼棰樼洰
@@ -562,9 +634,9 @@
}
},
// 淇濆瓨鎸夐挳
- saveAnswer(e) {
- if (e) {
- const pageNum = e
+ saveAnswer(page) {
+ if (page) {
+ const pageNum = page;
const oldAnswerData = localStorage.getItem(
this.config.activeBook.name + "oldAnswerData"
);
@@ -577,6 +649,8 @@
asnwerList.push({
id: citem.id,
userAnswer: citem.userAnswer,
+ isComplete: citem.isComplete,
+ isRight: citem.isRight,
});
}
}
@@ -595,14 +669,6 @@
);
Message.success("淇濆瓨鎴愬姛");
}
-
- // if(oldData[this.chapter]) {
- // oldData[this.chapter][this.page] = asnwerList
- // } else {
- // oldData[this.chapter] = {}
- // oldData[this.chapter][this.page] = asnwerList
- // }
- // console.log(oldData);
},
handleCollect(infoNum, num) {
this.cardData[infoNum].infoList[num].isCollect =
@@ -617,7 +683,6 @@
item = this.cardData[num];
}
item.isCollect = !item.isCollect;
- console.log(111, item);
if (this.cardData.length == 0) {
this.collectList.push(item.id);
} else {
@@ -635,7 +700,6 @@
const item = this.allCollect[index];
if (item.type == this.sourceType) item.collectList = this.collectList;
}
- console.log("鐐瑰嚮鏀惰棌鎸夐挳", this.allCollect);
this.MG.identity
.setUserKey({
setKeyRequests: [
@@ -652,8 +716,7 @@
},
// 鑾峰彇鏀惰棌id鍒楄〃
getCollectIdList() {
- console.log(this.cardList, "cardList")
- const token = localStorage.getItem("token");
+ const token = localStorage.getItem(this.config.tokenKey);
if (!token) return false;
this.MG.identity
.getUserKey({
@@ -663,7 +726,6 @@
.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
@@ -685,7 +747,7 @@
},
// 鑾峰彇閿欓id鍒楄〃
getErrorList() {
- const token = localStorage.getItem("token");
+ const token = localStorage.getItem(this.config.tokenKey);
if (!token) return false;
this.MG.identity
.getUserKey({
@@ -715,9 +777,6 @@
},
closeDialog() {
this.localDialogVisible = false;
- },
- openDialogQuestion() {
- this.localDialogVisible = true;
},
},
};
@@ -1106,7 +1165,6 @@
}
/deep/ .el-collapse-item__content {
- width: 93%;
padding: 0 20px;
background-color: #f4f4f4;
font-size: 16px;
@@ -1392,4 +1450,86 @@
align-items: center;
flex-wrap: wrap;
}
+
+.pdfModal {
+ width: 100%;
+ height: 90vh;
+
+ .pdfBox-component {
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ position: relative;
+
+ .preview {
+ width: 100%;
+ height: 100%;
+
+ .imageBox {
+ height: calc(100% - 30px);
+ overflow-x: hidden;
+ overflow-y: auto;
+ background: #ccc;
+ box-sizing: border-box;
+ }
+
+ .imageBox:hover {
+ cursor: zoom-in !important;
+ }
+
+ ::v-deep .el-dialog__header {
+ background-color: rgba(0, 0, 0, 0.8);
+
+ .header_title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: #fff;
+ font-weight: 900;
+ font-size: 16px;
+ font-family: "FZLTXIHJW";
+
+ span:nth-child(2):hover {
+ cursor: pointer;
+ }
+ }
+
+ ::v-deep .el-dialog__title,
+ ::v-deep .el-dialog__headerbtn .el-dialog__close {
+ color: #fff;
+ font-weight: 900;
+ font-size: 16px;
+ font-family: "FZLTXIHJW";
+ }
+ }
+
+ .bottom_tool {
+ height: 30px;
+ background-color: rgba(0, 0, 0, 0.8);
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+
+ svg {
+ margin-right: 15px;
+ fill: #d1d1d1;
+ }
+
+ svg:hover {
+ fill: #fff;
+ cursor: pointer;
+ }
+ }
+ }
+
+ .notBox {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: calc(100% - 30px);
+ min-height: 300px;
+ }
+ }
+}
</style>
--
Gitblit v1.9.1