From b51944b4ee2d0591eeaf7bae5a265236a8fcbc91 Mon Sep 17 00:00:00 2001
From: 84702473 <84702473@qq.com>
Date: 星期六, 11 三月 2023 00:04:04 +0800
Subject: [PATCH] 修复拖拽的相关BUG
---
src/views/exam/paper/values.vue | 105 ++++++++++++++++++++++++++++++++++------------------
1 files changed, 69 insertions(+), 36 deletions(-)
diff --git a/src/views/exam/paper/values.vue b/src/views/exam/paper/values.vue
index ff6e922..fcfa5c4 100644
--- a/src/views/exam/paper/values.vue
+++ b/src/views/exam/paper/values.vue
@@ -74,8 +74,7 @@
<div class="inlinediv">
<div v-for="(question,index2) in questionItems" class="mullinediv-item"
v-if="getStep2StepItem(step2SubStep).itemOrder == question.subjectId">
- <el-image :ref="'q2SelectImg'+question.id" :src="question.imgUrl" lazy
- :preview-src-list="[question.imgUrl]"></el-image>
+ <el-image :ref="'q2SelectImg'+question.id" :src="question.imgUrl" :preview-src-list="[question.imgUrl]"></el-image>
<div style="display: flex; justify-content: space-between;">
<el-image class="tools-button" :src="require('@/assets/exam-paper/no.png')"
@click="step2Delete(question.id,getStep2StepItem(step2SubStep).itemOrder)">
@@ -116,11 +115,12 @@
<div style="padding: 0 10px;">{{$t('values_pic_tmpArea')}}</div>
<draggable animation="300" class="pic-tmparea-div"
style="background-color: #f5f7fa;border: 1px solid gray;padding: 10px;width: 50%;"
- :list="step3EWEIArea[0]" group="article" @start="step3TmpAreaStart"
- @end="step3MoveFromTmpAreaEnd">
+ :list="step3EWEIArea[0]" :options="{group:{name:'EWEIArea',pull:'clone'}}"
+ @start="ev=>step3TmpAreaStart(ev,0)"
+ @end="step3TmpAreaMoveEnd">
<div v-for="q in step3EWEIArea[0]" :key="q.id" class="mullinediv-item2"
- :qId="q.id">
- <el-image :src="q.imgUrl" lazy :preview-src-list="[q.imgUrl]" fit="fill"></el-image>
+ :questionID="q.id" :questionIMGURL="q.imgUrl">
+ <el-image :src="q.imgUrl" :preview-src-list="[q.imgUrl]" fit="fill"></el-image>
</div>
</draggable>
<el-button type="primary" round style="height: fit-content;margin: 0 10px;"
@@ -141,19 +141,21 @@
<div class="mul-inlinediv" v-for="item in step2ScoreRanges">
<div class="mul-inlinediv-row">
- <draggable animation="300" :class="item.itemOrder"
+ <draggable animation="300" classa="pic-eweiarea-div" :class="'pic-eweiarea-div-'+item.itemOrder"
:list="step3EWEIArea[item.itemOrder]"
- :options="{group:{name:'article'}}" filter=".undraggable"
- @end="step3MoveToTmpAreaEnd" :scoreRangeId="item.itemOrder">
+ :options="{group:{name:'EWEIArea',pull:'clone'}}" filter=".undraggable"
+ @end="ev=>step3EWEIAreaMoveEnd(ev,item.itemOrder)" :scoreRangeId="item.itemOrder">
<div v-for="q in step3EWEIArea[item.itemOrder]" :key="q.id"
- class="mul-inlinediv-item" :qId="q.id">
- <el-image :src="q.imgUrl" lazy :preview-src-list="[q.imgUrl]" v-if="q.imgUrl">
+ class="mul-inlinediv-item" :questionID="q.id" :questionIMGURL="q.imgUrl">
+ <el-image :src="q.imgUrl" :preview-src-list="[q.imgUrl]" v-if="q.imgUrl">
</el-image>
</div>
+ <div v-if="item.quantity >= step3EWEIArea[item.itemOrder].length">
<div class="mul-inlinediv-item"
v-for="c in (item.quantity - step3EWEIArea[item.itemOrder].length)">
<el-image :src="require('@/assets/exam-paper/none.png')" class="undraggable">
</el-image>
+ </div>
</div>
</draggable>
</div>
@@ -692,27 +694,65 @@
}
console.log('buildStep3EWEIArea', this.step3EWEIArea)
},
-
- step3TmpAreaStart(ev) {
- //console.log('step3TmpAreaStart', ev)
+ addStep3EWEIArea(index,question){
+ //console.log('addStep3EWEIArea',index,question)
+ this.step3EWEIArea[index].push(question)
+ this.$set(this.step3EWEIArea, index, this.step3EWEIArea[index])
},
- step3MoveFromTmpAreaEnd(ev) {
- //console.log('step3MoveFromTmpAreaEnd s', ev, ev.to)
- // let options,qId
- // qId = ev.item.attributes.qId.value
- // for(let p of ev.to){
- // if(this.isNotEmpty(p['options'])) {
- // options = p['options']
- // break
- // }
- // }
- // let scoreRangeId = options.scoreRangeId
+ delStep3EWEIArea(index,question){
+ //console.log('delStep3EWEIArea s',index,question,this.step3EWEIArea[index])
+ for(let i=0;i<this.step3EWEIArea[index].length;i++){
+ if(question.id == this.step3EWEIArea[index][i].id){
+ this.step3EWEIArea[index].splice(i,1)
+ }
+ }
+ this.$set(this.step3EWEIArea, index, this.step3EWEIArea[index])
+ //console.log('delStep3EWEIArea e',this.step3EWEIArea[index])
+ },
+ hasStep3EWEIAreaOverflow(index,question){
+ //console.log('hasStep3EWEIAreaOverflow e',this.step3EWEIArea[index])
+ if(this.step3EWEIArea[index].length>this.step2ScoreRanges[index-1].quantity){
+ return true
+ }
+ return false
},
- step3MoveToTmpAreaEnd(ev) {
- //console.log('step3MoveToTmpAreaEnd')
- //let qId = ev.item.attributes.qId.value
- //console.log('step3MoveToTmpAreaEnd end', this.step3EWEIArea)
+ step3TmpAreaStart(ev,i) {
+ console.log('step3TmpAreaStart', ev,i)
+ },
+ step3TmpAreaMoveAdd(ev) {
+ console.log('step3TmpAreaMoveAdd', ev)
+ return false
+ },
+ step3TmpAreaMoveEnd(ev) {
+ console.log('step3TmpAreaMoveEnd s', ev)
+ console.log('step3TmpAreaMoveEnd from,to', ev.from.className,ev.to.className)
+ let to = ev.to.className.replace("pic-eweiarea-div-","")
+ let qId = ev.item.attributes.questionID.value
+ let qImg = ev.item.attributes.questionIMGURL.value
+ if("pic-tmparea-div"===ev.to.className){
+ //this.delStep3EWEIArea(to,{'id':qId,'imgUrl':qImg})
+ } else {
+ let of = this.hasStep3EWEIAreaOverflow(to,{'id':qId,'imgUrl':qImg})
+ if(of){
+ this.delStep3EWEIArea(to,{'id':qId,'imgUrl':qImg})
+ } else {
+ this.delStep3EWEIArea(0,{'id':qId,'imgUrl':qImg})
+ }
+ }
+ },
+
+ step3EWEIAreaMoveEnd(ev,fid) {
+ console.log('step3EWEIAreaMoveEnd',ev)
+ console.log('step3EWEIAreaMoveEnd from,to,id', ev.from.className,ev.to.className,fid)
+ let to = ev.to.className.replace("pic-eweiarea-div-","")
+ let qId = ev.item.attributes.questionID.value
+ let qImg = ev.item.attributes.questionIMGURL.value
+ if("pic-tmparea-div"===ev.to.className){
+ this.delStep3EWEIArea(fid,{'id':qId,'imgUrl':qImg})
+ } else {
+ if(fid != to) this.delStep3EWEIArea(to,{'id':qId,'imgUrl':qImg})
+ }
},
sumStep2UnSelectedNum() {
@@ -1196,20 +1236,13 @@
//this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
// 鎻愪氦閮ㄥ垎
let answerSubmit = _this.getSubmitAnswerValue(_this.partOrder)
- let loading = _this.$loading({
- lock: false,
- text: _this.$t('uploadInfo'),
- spinner: 'el-icon-loading'
- })
examPaperAnswerApi.answerSubmit(answerSubmit, _this.memberToken).then(re => {
- loading.close()
if (re.code === 1) {
//console.log('answerSubmit...', re)
}
_this.formLoading = false
}).catch(e => {
_this.reloadPage(e)
- loading.close()
})
},
/**
--
Gitblit v1.9.1