From efaccf60778159aa09681754eecd0e84b50b5f17 Mon Sep 17 00:00:00 2001
From: 84702473 <84702473@qq.com>
Date: 星期四, 09 三月 2023 22:52:18 +0800
Subject: [PATCH] 修改最后一环节的操作方式，实现拖拽效果
---
src/lang/zh.js | 4
src/assets/exam-paper/good.png | 0
src/assets/exam-paper/no.png | 0
src/assets/exam-paper/nogood.png | 0
src/lang/en.js | 4
src/assets/exam-paper/question.png | 0
src/views/exam/paper/values.vue | 816 +++++++++++++++++++++++++++------------------------------
package.json | 1
src/assets/exam-paper/none.png | 0
src/assets/exam-paper/yes.png | 0
src/layout/indexold.vue | 2
src/assets/exam-paper/scale.png | 0
12 files changed, 391 insertions(+), 436 deletions(-)
diff --git a/package.json b/package.json
index 3955f9c..a2d92dd 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"vue-i18n": "^8.15.3",
"vue-router": "^3.0.3",
"vue-template-compiler": "^2.6.10",
+ "vuedraggable": "^2.24.3",
"vuex": "3.1.0"
},
"devDependencies": {
diff --git a/src/assets/exam-paper/good.png b/src/assets/exam-paper/good.png
new file mode 100644
index 0000000..72c637e
--- /dev/null
+++ b/src/assets/exam-paper/good.png
Binary files differ
diff --git a/src/assets/exam-paper/no.png b/src/assets/exam-paper/no.png
new file mode 100644
index 0000000..cc485ea
--- /dev/null
+++ b/src/assets/exam-paper/no.png
Binary files differ
diff --git a/src/assets/exam-paper/nogood.png b/src/assets/exam-paper/nogood.png
new file mode 100644
index 0000000..dec8245
--- /dev/null
+++ b/src/assets/exam-paper/nogood.png
Binary files differ
diff --git a/src/assets/exam-paper/none.png b/src/assets/exam-paper/none.png
new file mode 100644
index 0000000..9d8765f
--- /dev/null
+++ b/src/assets/exam-paper/none.png
Binary files differ
diff --git a/src/assets/exam-paper/question.png b/src/assets/exam-paper/question.png
new file mode 100644
index 0000000..8e7d80a
--- /dev/null
+++ b/src/assets/exam-paper/question.png
Binary files differ
diff --git a/src/assets/exam-paper/scale.png b/src/assets/exam-paper/scale.png
new file mode 100644
index 0000000..58df9bc
--- /dev/null
+++ b/src/assets/exam-paper/scale.png
Binary files differ
diff --git a/src/assets/exam-paper/yes.png b/src/assets/exam-paper/yes.png
new file mode 100644
index 0000000..b6261e5
--- /dev/null
+++ b/src/assets/exam-paper/yes.png
Binary files differ
diff --git a/src/lang/en.js b/src/lang/en.js
index 68e2d7b..9b44c47 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -57,6 +57,7 @@
values_finishValuesInfo:'The test is over! All your option data have been uploaded to the server and saved. You can close the browser and exit the answer interface.',
values_nextStepTips_del_unnecessary:'Please delete redundant selections',
values_nextStepTips_add_enough:'Please add enough choices',
+ values_nextStepTips_choices_all:'Please make all choices',
values_title:'Pre-Sort Your Responses',
values_title_description:'For each statement,click the pictures that aligns most with your view.',
next:'Next Step',
@@ -71,5 +72,6 @@
values_select_exchange:'exchange',
values_mostLikeMe:'Most like me ',
values_mostUnLikeMe:'Most unlike me',
- values_no_select:'No picture optional'
+ values_no_select:'No picture optional',
+ values_pic_tmpArea:'Picture Staging Area'
}
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 39b5efe..ac2d32c 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -57,6 +57,7 @@
values_finishValuesInfo: '娴嬭瘯缁撴潫锛佹偍鐨勬墍鏈夐�夐」鏁版嵁宸茬粡涓婁紶鑷虫湇鍔″櫒锛屽苟宸蹭繚瀛樺ソ銆傛偍鍙互鍏抽棴娴忚鍣紝閫�鍑虹瓟棰樼晫闈€��',
values_nextStepTips_del_unnecessary:'璇峰垹闄ゅ浣欑殑閫夋嫨',
values_nextStepTips_add_enough:'璇锋坊鍔犺冻澶熺殑閫夋嫨',
+ values_nextStepTips_choices_all:'璇峰仛鍑烘墍鏈夌殑閫夋嫨',
values_title:'棰勫厛鎺掑簭鎮ㄧ殑鍥炵瓟',
values_title_description:'瀵逛簬姣忎釜璇彞锛屽崟鍑讳笌瑙嗗浘鏈�瀵归綈鐨勫浘鏍囥��',
next:'涓嬩竴姝�',
@@ -71,6 +72,7 @@
values_select_exchange:'瀵硅皟',
values_mostLikeMe:'鏈�鍍忔垜',
values_mostUnLikeMe:'鏈�涓嶅儚鎴�',
- values_no_select:'鏃犲浘鍙��'
+ values_no_select:'鏃犲浘鍙��',
+ values_pic_tmpArea:'鍥剧墖鏆傚瓨鍖�'
}
diff --git a/src/layout/indexold.vue b/src/layout/indexold.vue
index 709c3b1..817d128 100644
--- a/src/layout/indexold.vue
+++ b/src/layout/indexold.vue
@@ -4,7 +4,7 @@
<div class="head-user">
<el-dropdown trigger="click" placement="bottom">
<el-badge :is-dot="messageCount!==0" >
- <el-avatar class="el-dropdown-avatar" size="medium" :s0rc="userInfo.imagePath === null ? require('@/assets/avatar.png') : userInfo.imagePath"></el-avatar>
+ <el-avatar class="el-dropdown-avatar" size="medium" :src="userInfo.imagePath === null ? require('@/assets/avatar.png') : userInfo.imagePath"></el-avatar>
</el-badge>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="$router.push({path:'/user/index'})">涓汉涓績</el-dropdown-item>
diff --git a/src/views/exam/paper/values.vue b/src/views/exam/paper/values.vue
index 38d8fbf..40de040 100644
--- a/src/views/exam/paper/values.vue
+++ b/src/views/exam/paper/values.vue
@@ -9,17 +9,28 @@
{{$t('values_title_description')}}
</div>
<div style="display: flex;justify-content: flex-start;padding: 10px 0;">
- <el-button @click="step1_start" type="primary" v-if="!step1Start">{{$t('start')}}</el-button>
- <el-button style="margin-top: 12px;" @click="step1_next" v-if="(step1Start && itemSize>0)">
- {{$t('next')}}</el-button>
+ <el-button @click="step1_start" type="primary" round v-if="!step1Start">{{$t('start')}}</el-button>
+ <el-button style="margin-top: 12px;" type="primary" round @click="step1_next"
+ v-if="(step1Start && itemSize>0)">
+ {{$t('next')}}
+ </el-button>
</div>
<div class="mullinediv" v-if="step1Start">
- <div v-for="question in questionItems" class="mullinediv-item" v-if="isNull(question.analyze)">
- <el-image :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]"></el-image>
- <div style="display: flex; justify-content: space-between;padding: 5px 10px;margin-top: -5px;">
- <i class="el-icon-success" @click="likeMe(question.id)"></i>
- <i class="el-icon-question" @click="iAmNotSure(question.id)"></i>
- <i class="el-icon-error" @click="unLikeMe(question.id)"></i>
+ <div v-for="(question,index1) in questionItems" class="mullinediv-item"
+ v-if="isNull(question.content)">
+ <div style="display: flex; justify-content: flex-end;margin-right: -20px;">
+ <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
+ @click="previewImg('qImg'+question.id,question.id)"></el-image>
+ </div>
+ <el-image :ref="'qImg'+question.id" :src="question.imgUrl" lazy
+ :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/nogood.png')"
+ @click="unLikeMe(question.id)"></el-image>
+ <el-image class="tools-button" :src="require('@/assets/exam-paper/question.png')"
+ @click="iAmNotSure(question.id)"></el-image>
+ <el-image class="tools-button" :src="require('@/assets/exam-paper/good.png')"
+ @click="likeMe(question.id)"></el-image>
</div>
</div>
</div>
@@ -30,7 +41,7 @@
<div>
<div class="tag-group">
<span class="tag-group__title"
- style="padding-right: 20px;">{{$t('values_cur_step')}}锛坽{step2SubStep}} /
+ style="padding-right: 20px;font-size: 26px;">{{$t('values_cur_step')}}锛坽{step2SubStep}} /
{{step2ScoreRanges.length}})</span>
<el-tag v-for="item in step2ScoreRanges" :key="item.itemOrder"
:type="getStep2StepTagType(item.step)" style="margin: 0 2px;font-size: 26px;" size="large"
@@ -40,7 +51,8 @@
</div>
<div style="display: flex;justify-content: space-between;">
<div style="line-height: 50px;text-indent: 2em;">
- <span v-if="(step2SubStep == step2ScoreRanges.length) && (step2ScoreRanges.length % 2 == 1)">
+ <span
+ v-if="(step2SubStep == step2ScoreRanges.length) && (step2ScoreRanges.length % 2 == 1)">
{{$t('values_step_tips_for_3').replace('%N',getStep2StepItem(step2SubStep).quantity)}}
</span>
<span v-else>
@@ -48,8 +60,9 @@
</span>
</div>
<div style="display: flex;justify-content: flex-end;">
- <el-button style="" @click="step2_pre" v-if="step2SubStep>1">{{$t('pre')}}</el-button>
- <el-button style="" @click="step2_next">{{$t('next')}}</el-button>
+ <el-button type="primary" round @click="step2_pre" v-if="step2SubStep>1">{{$t('pre')}}
+ </el-button>
+ <el-button type="primary" round @click="step2_next">{{$t('next')}}</el-button>
</div>
</div>
</div>
@@ -59,44 +72,65 @@
/ {{getStep2StepItem(step2SubStep).quantity}}</span> </el-divider>
<div style="">
<div class="inlinediv">
- <div v-for="question in questionItems" class="mullinediv-item"
+ <div v-for="(question,index2) in questionItems" class="mullinediv-item"
v-if="getStep2StepItem(step2SubStep).itemOrder == question.subjectId">
- <el-image :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]"></el-image>
- <div style="display: flex;justify-content: center;padding: 5px 10px;">
- <!--/*background-color: #c8c3c3;*/-->
- <i class="el-icon-delete"
- @click="step2Delete(question.id,getStep2StepItem(step2SubStep).itemOrder)"></i>
- <!-- <i class="el-icon-zoom-in"></i> -->
+ <el-image :ref="'q2SelectImg'+question.id" :src="question.imgUrl" lazy
+ :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)">
+ </el-image>
+ <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
+ @click="previewImg('q2SelectImg'+question.id)"></el-image>
</div>
</div>
</div>
</div>
- <el-divider content-position="left">{{$t('values_select_tips')}}</el-divider>
- <div style="height: auto;overflow: auto;">
- <div class="mullinediv" style="" v-if="questionItems && questionItems.length>0">
- <div v-for="question in questionItems" class="mullinediv-item"
- v-if="isNull(question.subjectId)">
- <el-image :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]"></el-image>
- <div style="display: flex; justify-content: center;padding: 5px 10px;margin-top: -5px;">
- <el-checkbox
- @change="checked=>step2Add(checked,question.id,getStep2StepItem(step2SubStep).itemOrder)">
- {{$t('values_select')}}</el-checkbox>
- <!-- <i class="el-icon-check"></i> -->
- <!-- <i class="el-icon-zoom-in"></i> -->
- </div>
+ <el-divider content-position="left">{{$t('values_select_tips')}}</el-divider>
+ <div style="height: auto;overflow: auto;">
+ <div class="mullinediv" style="" v-if="questionItems && questionItems.length>0">
+ <div v-for="(question,index3) in questionItems" class="mullinediv-item"
+ v-if="isNull(question.subjectId)">
+ <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy
+ :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/yes.png')"
+ @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)">
+ </el-image>
+ <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
+ @click="previewImg('q2Img'+question.id)"></el-image>
</div>
</div>
- <div class="mullinediv" style="" v-if="sumUnSelectedNum()<=0">
- {{$t('values_no_select')}}
- </div>
+ </div>
+ <div class="mullinediv" style="" v-if="sumStep2UnSelectedNum()<=0">
+ {{$t('values_no_select')}}
</div>
</div>
+ </div>
</el-main>
</el-container>
<el-container class="app-item-contain step3" v-if="step === 'step3'">
<el-main class="">
- <div style="display:flex;">
- <div style="display: inline-block;min-width: 110px;text-align: right;">
+ <div style="position: fixed;z-index: 999; width:90%; top: 56px;">
+ <div style="display: flex;justify-content: flex-end;">
+ <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">
+ <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>
+ </div>
+ </draggable>
+ <el-button type="primary" round style="height: fit-content;margin: 0 10px;"
+ @click="step3_commit" :disabled="submitDisable">
+ {{$t('commit')}}
+ </el-button>
+ </div>
+ </div>
+ <div style="display:flex;margin-top: 160px;">
+ <div style="display: inline-block;min-width: 150px;text-align: right;">
<div class="mul-inlinediv-row mul-inlinediv-lineheight"
v-for="(item,index) in step2ScoreRanges">
{{(index == 0)?$t('values_mostLikeMe'):''}}{{(index == (step2ScoreRanges.length-1))?$t('values_mostUnLikeMe'):''}}
@@ -104,28 +138,28 @@
</div>
</div>
<div class="mul-inlinediv-box">
+
<div class="mul-inlinediv" v-for="item in step2ScoreRanges">
<div class="mul-inlinediv-row">
- <div v-for="question in questionItems" class="mullinediv-item"
- v-if="question.subjectId == item.itemOrder">
- <el-image :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]">
- </el-image>
- <div style="display: flex;justify-content: center;padding: 5px 10px;">
- <!--/*background-color: #c8c3c3;*/-->
- <el-checkbox v-model="question['checked']"
- @change="checked=>step3Change(checked,question)"
- :disabled="(step3ChangeSrc.subjectId != question.subjectId || step3ChangeSrc.id == question.id)?false:true">
- {{(step3ChangeSrc.id==null)?$t('values_select'):(question.id==step3ChangeSrc.id)?$t('values_select'):$t('values_select_exchange')}}
- </el-checkbox>
+ <draggable animation="300" :class="item.itemOrder"
+ :list="step3EWEIArea[item.itemOrder]"
+ :options="{group:{name:'article'}}" filter=".undraggable"
+ @end="step3MoveToTmpAreaEnd" :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">
+ </el-image>
</div>
- </div>
+ <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>
+ </draggable>
</div>
</div>
+
</div>
- </div>
- <div style="display: flex;justify-content: center;">
- <el-button style="margin-top: 12px;" @click="step3_commit" :disabled="submitDisable">
- {{$t('commit')}}</el-button>
</div>
</el-main>
</el-container>
@@ -150,9 +184,13 @@
import examPaperApi from '@/api/examPaper'
import examPaperAnswerApi from '@/api/examPaperAnswer'
import demographyApi from '@/api/demography'
+ import draggable from 'vuedraggable'
export default {
name: 'values',
+ components: {
+ draggable
+ },
data() {
return {
step: 'step1',
@@ -181,6 +219,7 @@
"id": null,
"subjectId": null,
},
+ step3EWEIArea: [1],
form: {
"id": 92,
"level": 1,
@@ -421,7 +460,6 @@
}
},
created: function() {
- console.log("created......", this.$route.query.formDo)
//console.log(".....................Test. config start......................")
//if(this.memberToken == '' || this.memberToken == undefined) this.setMemberTocken("4bdcf437-185c-4f4e-9528-382c99509ea6")
//console.log(".....................Test. config ednd.......................")
@@ -430,6 +468,7 @@
_this.setLangFlag(false)
_this.form = this.$route.query.formDo
if (_this.form !== {} && _this.form !== undefined && typeof(_this.form) !== "string") {
+ console.log("created......get from query", _this.form)
_this.formLoading = true
_this.remainTime = _this.form.suggestTime * 60
_this.titleItemsLength = _this.form.titleItems.length
@@ -455,6 +494,7 @@
}
// 鍔犺浇棰樼洰
examPaperApi.select(_this.memberToken, _this.langType).then(re => {
+ console.log("created......get from db", re.response)
_this.form = re.response
_this.remainTime = re.response.suggestTime * 60
_this.titleItemsLength = _this.form.titleItems.length
@@ -528,6 +568,10 @@
},
mounted() {
//console.log("mounted......")
+ document.body.ondrop = function(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
},
beforeDestroy() {
window.clearInterval(this.timer)
@@ -539,9 +583,23 @@
this.questionItems.sort(function(i2, i1) {
return (i2.id - i1.id)
})
- //console.log('step1_start...',this.questionItems)
+ //test
+ //this.initTestData()
+ //鍥炴樉锛屾病鏈夊彲閫夌殑鏃跺�欙紝杩涘叆涓嬩竴姝�
+ let c = this.sumStep1UnSelectedNum()
+ if (c <= 0 && this.itemSize > 0) {
+ this.step = "step2"
+ this.sortQuestions()
+ this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
+ }
},
step1_next() {
+ let _this = this
+ let c = this.sumStep1UnSelectedNum()
+ if (c > 0) {
+ this.$message.error(_this.$t('values_nextStepTips_choices_all'))
+ return
+ }
this.step = "step2"
this.sortQuestions()
this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
@@ -554,16 +612,18 @@
step2_next() {
let _this = this
let stepItem = this.getStep2StepItem(this.step2SubStep)
- if (stepItem.selected == stepItem.quantity || this.sumUnSelectedNum() == 0) {
+ if (stepItem.selected == stepItem.quantity || this.sumStep2UnSelectedNum() == 0) {
_this.answer.verifyStatus = 2
_this.submitSubAnswer()
this.step2SubStep = this.step2SubStep + 1
- if(this.step2SubStep == this.step2ScoreRanges.length){//杩涘叆鏈�鍚庝竴姝ラ
- this.resetAllQuestionItemsValueByKeyWhenNull("subjectId",this.getStep2StepItem(this.step2SubStep).itemOrder)
+ if (this.step2SubStep == this.step2ScoreRanges.length) { //杩涘叆鏈�鍚庝竴姝ラ
+ this.resetAllQuestionItemsValueByKeyWhenNull("subjectId", this.getStep2StepItem(this.step2SubStep)
+ .itemOrder)
}
- if (this.step2SubStep > this.step2ScoreRanges.length) {//瀹屾垚鏈�鍚庝竴姝ラ
+ if (this.step2SubStep > this.step2ScoreRanges.length) { //瀹屾垚鏈�鍚庝竴姝ラ
this.step = "step3"
+ this.buildStep3EWEIArea()
}
this.sortQuestions()
@@ -578,12 +638,12 @@
}
},
step2Delete(qid, sid) {
- this.resetQuestionItemsValueById(qid, "subjectId", null) //鍊熺敤subjectId锛屽瓨鍌�
+ this.resetQuestionItemsSubjectIdById(qid, null) //鍊熺敤subjectId锛屽瓨鍌�
this.caculateScoreRangeSelectedById(sid, -1)
},
- step2Add(value, qid, sid) {
+ step2Add(qid, sid) {
//console.log("step2Add....",value,qid,sid)
- this.resetQuestionItemsValueById(qid, "subjectId", sid) //鍊熺敤subjectId锛屽瓨鍌�
+ this.resetQuestionItemsSubjectIdById(qid, sid) //鍊熺敤subjectId锛屽瓨鍌�
this.caculateScoreRangeSelectedById(sid, 1)
},
step3Change(value, question) {
@@ -599,9 +659,9 @@
//瀵硅皟鑷繁
} else {
//瀵硅皟
- this.resetQuestionItemsValueById(this.step3ChangeSrc.id, "subjectId", question
+ this.resetQuestionItemsSubjectIdById(this.step3ChangeSrc.id, question
.subjectId) //鍊熺敤subjectId锛屽瓨鍌�
- this.resetQuestionItemsValueById(question.id, "subjectId", this.step3ChangeSrc
+ this.resetQuestionItemsSubjectIdById(question.id, this.step3ChangeSrc
.subjectId) //鍊熺敤subjectId锛屽瓨鍌�
}
//娓呯悊
@@ -612,7 +672,50 @@
}
}
},
- sumUnSelectedNum() {
+ /**
+ * 鏍规嵁QuestionItems锛屾瀯寤轰簩缁村浘琛ㄦ暟鎹�
+ */
+ buildStep3EWEIArea() {
+ this.step3EWEIArea = [this.step2ScoreRanges.length + 1]
+ this.step3EWEIArea[0] = []
+ this.$set(this.step3EWEIArea, 0, this.step3EWEIArea[0])
+ for (let item of this.step2ScoreRanges) {
+ this.step3EWEIArea[item.itemOrder] = []
+ for (let q = 1; q <= item.quantity; q++) {
+ let t = this.getQuestionItemsByKey("subjectId", item.itemOrder, q)
+ if (t.id) {
+ this.step3EWEIArea[item.itemOrder].push(t)
+ }
+ }
+ this.$set(this.step3EWEIArea, item.itemOrder, this.step3EWEIArea[item
+ .itemOrder])
+ }
+ console.log('buildStep3EWEIArea', this.step3EWEIArea)
+ },
+
+ step3TmpAreaStart(ev) {
+ //console.log('step3TmpAreaStart', ev)
+ },
+ 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
+ },
+
+ step3MoveToTmpAreaEnd(ev) {
+ //console.log('step3MoveToTmpAreaEnd')
+ //let qId = ev.item.attributes.qId.value
+ //console.log('step3MoveToTmpAreaEnd end', this.step3EWEIArea)
+ },
+
+ sumStep2UnSelectedNum() {
let count = 0
for (let item of this.questionItems) {
if (this.isNull(item['subjectId'])) {
@@ -621,8 +724,24 @@
}
return count
},
+ sumStep1UnSelectedNum() {
+ let count = 0
+ for (let item of this.questionItems) {
+ if (this.isNull(item['content'])) {
+ count = count + 1
+ }
+ }
+ return count
+ },
step3_commit() {
let _this = this
+
+ if (_this.step3EWEIArea[0].length > 0) {
+ this.$message.error(_this.$t('values_nextStepTips_choices_all'))
+ return
+ }
+ _this.resetAllQuestionItemsValueByEWEIArea()
+
window.clearInterval(_this.timer)
_this.submitDisable = true
_this.formLoading = true
@@ -631,6 +750,7 @@
_this.submitAnswer(_this.$t('values_finishValuesInfo'))
},
getLikeTypeByScoreRangeItemOrder(itemOrder) {
+ if (this.isNull(itemOrder)) return null;
let step = 0
for (let item of this.step2ScoreRanges) {
if (item.itemOrder === itemOrder) {
@@ -669,45 +789,64 @@
switch (type) {
case 0: //0:鏈�鍍忔垜
this.questionItems.sort(function(i2, i1) {
- return (i2.analyze == 'Like') ? -1 : 1
+ return (i2.content == 0) ? -1 : 1
})
break
case 1: //1:鏈夌枒闂�
this.questionItems.sort(function(i2, i1) {
- return (i2.analyze == 'NotSure') ? -1 : 1
+ return (i2.content == 1) ? -1 : 1
})
break
case 2: //2:鏈�涓嶅儚鎴�
this.questionItems.sort(function(i2, i1) {
- return (i2.analyze == 'UnLike') ? -1 : 1
+ return (i2.content == 2) ? -1 : 1
})
break
}
},
likeMe(id) {
+ let _this = this
this.step1SelectedNum = this.step1SelectedNum + 1
- this.resetQuestionItemsValueById(id, "analyze", "Like") //鍊熺敤analyze锛屽瓨鍌�
+ this.resetQuestionItemsContentById(id, 0) //鍊熺敤analyze锛屽瓨鍌�"Like"
+
+ _this.answer.verifyStatus = 2
+ _this.submitSubAnswer()
},
iAmNotSure(id) {
+ let _this = this
this.step1SelectedNum = this.step1SelectedNum + 1
- this.resetQuestionItemsValueById(id, "analyze", "NotSure")
+ this.resetQuestionItemsContentById(id, 1) //"NotSure"
+
+ _this.answer.verifyStatus = 2
+ _this.submitSubAnswer()
},
unLikeMe(id) {
+ let _this = this
this.step1SelectedNum = this.step1SelectedNum + 1
- this.resetQuestionItemsValueById(id, "analyze", "UnLike")
+ this.resetQuestionItemsContentById(id, 2) //"UnLike"
+
+ _this.answer.verifyStatus = 2
+ _this.submitSubAnswer()
},
- resetQuestionItemsValueById(id, key, value) {
+ resetQuestionItemsContentById(id, value) {
for (let item of this.questionItems) {
- if (item.id === id) {
- item[key] = value
- if ("subjectId" == key) {
- item['content'] = this.getLikeTypeByScoreRangeItemOrder(value)
- }
+ if (item.id == id) {
+ item["content"] = value
}
}
- //console.log('resetQuestionItems...',id,key,value,this.questionItems)
+ //console.log('resetQuestionItems...', id, value, this.questionItems)
},
+ resetQuestionItemsSubjectIdById(id, value) {
+ for (let item of this.questionItems) {
+ if (item.id == id) {
+ item["subjectId"] = value
+ item['content'] = this.getLikeTypeByScoreRangeItemOrder(value)
+ }
+ }
+ //console.log('resetQuestionItems...', id, value, this.questionItems)
+ },
+ //璁剧疆鎵�鏈夋湭鏈夊綊灞炴楠わ紙subjectId锛夌殑QuestionItems涓烘柊鐨勫綊灞炴楠わ紙subjectId锛�
resetAllQuestionItemsValueByKeyWhenNull(key, value) {
for (let item of this.questionItems) {
if (this.isNull(item[key])) {
@@ -719,6 +858,39 @@
}
//console.log('resetQuestionItems...',id,key,value,this.questionItems)
},
+ //鏍规嵁浜岀淮鍥捐〃鏁版嵁閲嶈QuestionItems鐨勫綊灞炴楠わ紙subjectId锛�
+ resetAllQuestionItemsValueByEWEIArea() {
+ for (let i = 1; i < this.step3EWEIArea.length; i++) {
+ for (let q of this.step3EWEIArea[i]) {
+ this.resetQuestionItemsSubjectIdById(q.id, i)
+ }
+ }
+ console.log('resetQuestionItems...by EWEIArea', this.questionItems)
+ },
+ getQuestionItemsByKey(key, stepOrder, index) {
+ let arr = []
+ for (let item of this.questionItems) {
+ if (!this.isNull(item[key])) {
+ if (item[key] == stepOrder) {
+ arr.push(item)
+ }
+ }
+ }
+ //console.log('getQuestionItemsByKey',key,stepOrder,index,arr,this.questionItems)
+ if (index <= arr.length) {
+ return arr[index - 1]
+ }
+ return {
+ id: null,
+ imgUrl: null,
+ subjectId: null
+ }
+ },
+ /**
+ * 璁＄畻姝ラid鐨勫凡閫夋嫨鏁伴噺
+ * @param {Object} id
+ * @param {Object} value
+ */
caculateScoreRangeSelectedById(id, value) {
let sum = 0
for (let item of this.questionItems) {
@@ -727,339 +899,33 @@
}
}
for (let item of this.step2ScoreRanges) {
- if (item.itemOrder === id) {
+ if (item.itemOrder == id) {
item['selected'] = sum
}
}
},
initTestData() {
- let _this = this
- //for test
- _this.step2ScoreRanges = [].concat([{
- "itemOrder": 1,
- "quantity": 1,
- "score": 5,
- "completed": false,
- "questionReports": null
- },
- {
- "itemOrder": 2,
- "quantity": 2,
- "score": 5,
- "completed": false,
- "questionReports": null
- },
- {
- "itemOrder": 3,
- "quantity": 10,
- "score": 5,
- "completed": false,
- "questionReports": null
- },
- {
- "itemOrder": 4,
- "quantity": 2,
- "score": 5,
- "completed": false,
- "questionReports": null
- },
- {
- "itemOrder": 5,
- "quantity": 1,
- "score": 5,
- "completed": false,
- "questionReports": null
- },
- // {
- // "itemOrder": 6,
- // "quantity": 2,
- // "score": 5,
- // "completed": false,
- // "questionReports": null
- // },
- // {
- // "itemOrder": 7,
- // "quantity": 2,
- // "score": 5,
- // "completed": false,
- // "questionReports": null
- // },
- // {
- // "itemOrder": 8,
- // "quantity": 2,
- // "score": 5,
- // "completed": false,
- // "questionReports": null
- // },
- ])
-
- _this.questionItems = _this.questionItems.concat([{
- "id": 100,
- "questionType": 1,
- "subjectId": 3,
- "title": "楹诲皢妗�",
- "gradeLevel": null,
- "items": [{
- "prefix": "1",
- "content": "0",
- "score": "0"
- }],
- "analyze": "Like",
- "correctArray": null,
- "correct": null,
- "score": "0",
- "difficult": null,
- "itemOrder": 1,
- "questionOrder": 0,
- "permanentId": "VAQ00001",
- "questionReport": null,
- "startTime": null,
- "endTime": null,
- "partOrder": 1,
- "parentQuestionId": null,
- "template": null,
- "questionNumber": null,
- "content": null,
- "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
- },
- {
- "id": 101,
- "questionType": 1,
- "subjectId": 3,
- "title": "楹诲皢妗�",
- "gradeLevel": null,
- "items": [{
- "prefix": "1",
- "content": "0",
- "score": "0"
- }],
- "analyze": "UnLike",
- "correctArray": null,
- "correct": null,
- "score": "0",
- "difficult": null,
- "itemOrder": 1,
- "questionOrder": 0,
- "permanentId": "VAQ00001",
- "questionReport": null,
- "startTime": null,
- "endTime": null,
- "partOrder": 1,
- "parentQuestionId": null,
- "template": null,
- "questionNumber": null,
- "content": null,
- "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
- },
- {
- "id": 102,
- "questionType": 1,
- "subjectId": 3,
- "title": "楹诲皢妗�",
- "gradeLevel": null,
- "items": [{
- "prefix": "1",
- "content": "0",
- "score": "0"
- }],
- "analyze": "NotSure",
- "correctArray": null,
- "correct": null,
- "score": "0",
- "difficult": null,
- "itemOrder": 1,
- "questionOrder": 0,
- "permanentId": "VAQ00001",
- "questionReport": null,
- "startTime": null,
- "endTime": null,
- "partOrder": 1,
- "parentQuestionId": null,
- "template": null,
- "questionNumber": null,
- "content": null,
- "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
- },
- {
- "id": 103,
- "questionType": 1,
- "subjectId": 3,
- "title": "楹诲皢妗�",
- "gradeLevel": null,
- "items": [{
- "prefix": "1",
- "content": "0",
- "score": "0"
- }],
- "analyze": "Like",
- "correctArray": null,
- "correct": null,
- "score": "0",
- "difficult": null,
- "itemOrder": 1,
- "questionOrder": 0,
- "permanentId": "VAQ00001",
- "questionReport": null,
- "startTime": null,
- "endTime": null,
- "partOrder": 1,
- "parentQuestionId": null,
- "template": null,
- "questionNumber": null,
- "content": null,
- "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
- },
- {
- "id": 104,
- "questionType": 1,
- "subjectId": 3,
- "title": "楹诲皢妗�",
- "gradeLevel": null,
- "items": [{
- "prefix": "1",
- "content": "0",
- "score": "0"
- }],
- "analyze": "UnLike",
- "correctArray": null,
- "correct": null,
- "score": "0",
- "difficult": null,
- "itemOrder": 1,
- "questionOrder": 0,
- "permanentId": "VAQ00001",
- "questionReport": null,
- "startTime": null,
- "endTime": null,
- "partOrder": 1,
- "parentQuestionId": null,
- "template": null,
- "questionNumber": null,
- "content": null,
- "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
- },
- {
- "id": 105,
- "questionType": 1,
- "subjectId": 1,
- "title": "楹诲皢妗�",
- "gradeLevel": null,
- "items": [{
- "prefix": "1",
- "content": "0",
- "score": "0"
- }],
- "analyze": "NotSure",
- "correctArray": null,
- "correct": null,
- "score": "0",
- "difficult": null,
- "itemOrder": 1,
- "questionOrder": 0,
- "permanentId": "VAQ00001",
- "questionReport": null,
- "startTime": null,
- "endTime": null,
- "partOrder": 1,
- "parentQuestionId": null,
- "template": null,
- "questionNumber": null,
- "content": null,
- "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
- },
- {
- "id": 106,
- "questionType": 1,
- "subjectId": 1,
- "title": "楹诲皢妗�",
- "gradeLevel": null,
- "items": [{
- "prefix": "1",
- "content": "0",
- "score": "0"
- }],
- "analyze": "Like",
- "correctArray": null,
- "correct": null,
- "score": "0",
- "difficult": null,
- "itemOrder": 1,
- "questionOrder": 0,
- "permanentId": "VAQ00001",
- "questionReport": null,
- "startTime": null,
- "endTime": null,
- "partOrder": 1,
- "parentQuestionId": null,
- "template": null,
- "questionNumber": null,
- "content": null,
- "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
- },
- {
- "id": 107,
- "questionType": 1,
- "subjectId": 2,
- "title": "楹诲皢妗�",
- "gradeLevel": null,
- "items": [{
- "prefix": "1",
- "content": "0",
- "score": "0"
- }],
- "analyze": "NotSure",
- "correctArray": null,
- "correct": null,
- "score": "0",
- "difficult": null,
- "itemOrder": 1,
- "questionOrder": 0,
- "permanentId": "VAQ00001",
- "questionReport": null,
- "startTime": null,
- "endTime": null,
- "partOrder": 1,
- "parentQuestionId": null,
- "template": null,
- "questionNumber": null,
- "content": null,
- "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
- },
- {
- "id": 108,
- "questionType": 1,
- "subjectId": 2,
- "title": "楹诲皢妗�",
- "gradeLevel": null,
- "items": [{
- "prefix": "1",
- "content": "0",
- "score": "0"
- }],
- "analyze": "NotSure",
- "correctArray": null,
- "correct": null,
- "score": "0",
- "difficult": null,
- "itemOrder": 1,
- "questionOrder": 0,
- "permanentId": "VAQ00001",
- "questionReport": null,
- "startTime": null,
- "endTime": null,
- "partOrder": 1,
- "parentQuestionId": null,
- "template": null,
- "questionNumber": null,
- "content": null,
- "imgUrl": "http://47.114.179.216:8090/profile/images/2022/12/26/b698d623e7c9a55d9017ffa08477b121.jpg"
- },
- ])
+ //console.log('initTestData...s',this.questionItems)
+ for (let item of this.questionItems) {
+ item['content'] = 1
+ }
+ for (let i = 0; i < this.step2ScoreRanges.length; i++) {
+ for (let j = 1; j <= this.step2ScoreRanges[i].quantity; j++) {
+ //console.log('for',i,j,this.step2ScoreRanges,this.questionItems)
+ for (let item of this.questionItems) {
+ if (this.isNull(item["subjectId"])) {
+ item["subjectId"] = this.step2ScoreRanges[i].itemOrder
+ break
+ }
+ }
+ }
+ }
+ console.log('initTestData...e', this.questionItems)
},
initStep2ScoreRanges(arr) {
+ //console.log('initStep2ScoreRanges...s', arr)
let _this = this
_this.step2ScoreRanges = _this.step2ScoreRanges.concat(arr)
- //this.initTestData()
let s = 1
let a = 2 //-2
let max = _this.step2ScoreRanges.length
@@ -1089,17 +955,31 @@
//璁剧疆姣忛」step鍋忕鏈�鍚巗tep鐨勬璐熻窛绂诲�硷紙濂囨暟step姝ｅ亸绂伙紝鍋舵暟step璐熷亸绂伙級
if (_this.step2ScoreRanges[i]['step'] % 2 == 0) { //鍋舵暟
deviate = (max4O - _this.step2ScoreRanges[i]['step']) - (max4O - _this.step2ScoreRanges[i][
- 'step']) / 2
+ 'step'
+ ]) / 2
_this.step2ScoreRanges[i]['deviate'] = 0 - deviate
} else {
deviate = (max4J - _this.step2ScoreRanges[i]['step']) - (max4J - _this.step2ScoreRanges[i][
- 'step']) / 2
+ 'step'
+ ]) / 2
_this.step2ScoreRanges[i]['deviate'] = deviate
}
//璁剧疆姣忛」宸查�夋嫨鐨勬暟閲�
_this.step2ScoreRanges[i]['selected'] = 0
}
- //console.log('initStep2ScoreRanges...', this.step2ScoreRanges)
+ console.log('initStep2ScoreRanges...e', this.step2ScoreRanges)
+ _this.initQuestionItems()
+ },
+ initQuestionItems(){
+ let _this = this
+ for (let sr of _this.step2ScoreRanges) {
+ if(_this.isNotEmpty(sr['questionReports'])){
+ for(let q of sr.questionReports){
+ _this.resetQuestionItemsSubjectIdById(q.questionId,sr.itemOrder)
+ }
+ }
+ }
+ console.log('initQuestionItems...e', this.questionItems)
},
getStep2StepTagType(step) {
if (this.step2SubStep > step) {
@@ -1180,7 +1060,7 @@
// 鍒濆鍖栧紑濮嬫椂闂达紝璁剧疆绗竴涓椂闂�
for (let i = 0; i < this.answer.answerItems.length; i++) {
- if (this.answer.answerItems[i].startTime == null || this.answer.answerItems[i].startTime.trim() ===
+ if (this.answer.answerItems[i].startTime == null || this.answer.answerItems[i].startTime.trim() ==
'') {
this.answer.answerItems[i].startTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
break
@@ -1254,6 +1134,16 @@
isEmpty(obj) {
return !this.isNotEmpty(obj)
},
+ getContentByQuestionId(id) {
+ let cont
+ for (let item of this.questionItems) {
+ if (item.id == id) {
+ cont = item.content
+ break
+ }
+ }
+ return cont;
+ },
getSubmitAnswerValue(nowPartOrder) {
let _this = this
let answerSubmit = JSON.parse(JSON.stringify(_this.answer))
@@ -1264,7 +1154,8 @@
answerItem.startTime = ''
}
answerItem.completed = true
- //answerItem.content = this.getLikeTypeByScoreRangeItemOrder(answerItem.subjectId)
+ answerItem.content = this.getContentByQuestionId(answerItem
+ .questionId) //this.getLikeTypeByScoreRangeItemOrder(answerItem.subjectId)
answerItem.questionReport = {
questionOrder: answerItem.questionId,
questionTitle: answerItem.title,
@@ -1295,9 +1186,10 @@
item['completed'] = true
item['questionReports'] = []
for (let question of _this.questionItems) {
- if (question.subjectId === item.itemOrder) {
+ if (question.subjectId == item.itemOrder) {
item['questionReports'].push({
- questionOrder: question.questionOrder, //棰樼洰ID
+ questionId: question.id, //棰樼洰ID
+ questionOrder: question.questionOrder, //棰樼洰搴忓彿
questionTitle: question.questionTitle, //棰樼洰鏍囬
permanentId: question.permanentId, //棰樼洰姘镐箙缂栧彿
startTime: question.startTime, //绛旈寮�濮嬫椂闂�
@@ -1314,6 +1206,7 @@
},
submitSubAnswer: function() {
+ console.log('submitSubAnswer...')
let _this = this
this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
// 鎻愪氦閮ㄥ垎
@@ -1413,6 +1306,7 @@
_this.submitDisable = false
},
isForFinish(i) {
+ return false
return i === this.answer.answerItems.length - 1 && (this.answer.answerItems[i].content !== null && this
.answer.answerItems[i].content !== '')
},
@@ -1420,6 +1314,9 @@
let _this = this
return _this.form.titleItems[0].questionItems[_this.order].partOrder !== _this.form.titleItems[0]
.questionItems[_this.order - 1].partOrder
+ },
+ previewImg(refName) {
+ this.$refs[refName][0].showViewer = true
},
...mapMutations('user', ['setMemberTocken']),
...mapMutations('user', ['setLangType']),
@@ -1450,13 +1347,14 @@
.app-item-contain {
margin-top: 45px;
}
+
.footer {
position: absolute;
position: fixed;
z-index: 1000;
bottom: 0px;
}
-
+
.mul-inlinediv-box {
overflow: auto;
display: block;
@@ -1467,26 +1365,44 @@
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
- border: 1px solid gray;
- padding: 10px 0;
+ //border: 1px solid gray;
+ padding: 2px 0;
width: fit-content;
}
.mul-inlinediv div div {
display: inline-table;
vertical-align: top;
- width: 180px;
- margin: 0 2px;
+ width: 80px;
+ height: 80px;
+ min-width: 80px;
+ min-height: 80px;
+ margin: 0px;
}
.mul-inlinediv-row {
- min-height: 210px;
+ min-height: 100px;
margin: 0 10px;
}
.mul-inlinediv-lineheight {
- line-height: 210px;
- padding: 10px 0;
+ line-height: 100px;
+ margin: 3px 0 4px 0;
+ }
+
+ .mul-inlinediv-item {
+ display: flex;
+ display: inline-block;
+ border: 1px solid gray;
+ width: 100px;
+ height: 100px;
+ padding: 10px;
+
+ .tools-button {
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ }
}
.inlinediv {
@@ -1494,14 +1410,24 @@
overflow-x: auto;
white-space: nowrap;
min-height: 180px;
- display: flex;
+ padding: 10px 0px;
+ //display: flex;
}
.inlinediv div {
- display: inline-table;
- vertical-align: top;
- width: 100px;
- margin: auto 2px;
+ //display: inline-table;
+ //vertical-align: top;
+ //width: 360px;
+ // margin: auto 2px;
+ }
+
+ .pic-tmparea-div {
+ overflow-y: hidden;
+ overflow-x: auto;
+ white-space: nowrap;
+ min-height: 180px;
+ padding: 10px 0px;
+ //display: flex;
}
.mullinediv {
@@ -1510,21 +1436,39 @@
.mullinediv-item {
display: flex;
- display:
- inline-block;
- width: 180px;
+ display: inline-block;
+ width: 360px;
margin: 5px 4px;
+ padding: 10px 30px;
+ box-shadow: 1px 1px 1px grey, 0 0 5px grey, 0 0 10px grey;
+
+ .tools-button {
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ }
}
- .mullinediv-item:hover {}
+ .mullinediv-item2 {
+ display: inline-block;
+ width: 180px;
+ height: 180px;
+ // margin: 5px 4px;
+ padding: 10px;
+ box-shadow: 1px 1px 1px grey, 0 0 5px grey, 0 0 10px grey;
+
+ div {
+ height: 160px;
+ }
+ }
img:hover {
- transform: scale(2);
- -ms-transform: scale(2);
- -webkit-transform: scale(2);
- -o-transform: scale(2);
- -moz-transform: scale(2);
- transition-duration: 0.5s;
+ // transform: scale(2);
+ // -ms-transform: scale(2);
+ // -webkit-transform: scale(2);
+ // -o-transform: scale(2);
+ // -moz-transform: scale(2);
+ // transition-duration: 0.5s;
}
.container {
@@ -1534,4 +1478,10 @@
width: 600px;
}
}
+
+ .wrapper {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ }
</style>
--
Gitblit v1.9.1