From 8a968bcc9d96c6ac88c6ec85b27be63ae40aef36 Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期二, 09 七月 2024 17:37:31 +0800 Subject: [PATCH] 密码强制修改实现 --- src/views/exam/exam/MarkPaperDetail.vue | 166 +++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 131 insertions(+), 35 deletions(-) diff --git a/src/views/exam/exam/MarkPaperDetail.vue b/src/views/exam/exam/MarkPaperDetail.vue index 8b8710f..ef466f7 100644 --- a/src/views/exam/exam/MarkPaperDetail.vue +++ b/src/views/exam/exam/MarkPaperDetail.vue @@ -1,64 +1,160 @@ <template> - <div> - <el-row style="text-align: center">xxx鑰冭瘯</el-row> - <el-row> - <div>xxx濮撳悕</div> - <div>xxx浜ゅ嵎鏃堕棿</div> - <div>xxx绛旈鏃堕棿</div> - </el-row> - <el-row class="paper-warp"> - <div v-for="(paper,index) in examInfo.paperQuestionList" :key="index" class="paperTitleWarp"> - <div class="paperTitle">{{ paper.title }}</div> - <div class="question-warp"> - <div v-for="(doQuestion, index) in paper.questionList" :key="index"> - <DoQuestion :question="doQuestion" :qType="paper.questionType" :qLoading="questionLoading"></DoQuestion> - </div> + <div class="paper-container"> + <div class="paper-card" v-loading="formLoading"> + <el-card style="height: 100vh"> + <el-row style="text-align: left; margin-bottom : 20px; font-size: 20px">璇枃鑰冭瘯</el-row> + <el-row> + <el-col class="info"> + <span class="exam-info">瀛﹀憳濮撳悕锛�</span> + <span class="exam-info">{{ form.userName }}</span> + </el-col> + </el-row> + <el-row> + <el-col class="info"> + <span class="exam-info">浜ゅ嵎鏃堕棿锛�</span> + <span class="exam-info">{{ form.submitTime }}</span> + </el-col> + </el-row> + <el-row> + <el-col class="info"> + <span class="exam-info">瀹屾垚鑰楁椂锛�</span> + <span class="exam-info">{{ formattedDoTime }}</span> + </el-col> + </el-row> + <el-row> + <el-col class="info"> + <span class="exam-info">寰楀垎锛�</span> + <span class="exam-info">{{ form.score + ' / ' + form.totalScore }}</span> + </el-col> + </el-row> + <el-divider></el-divider> + <el-row class="do-exam-title"> + <el-col :span="24"> + <span :key="item.itemOrder" v-for="item in form.navbar"> + <el-tag :type="questionDoRightTag(item.right)" class="do-exam-title-tag" + @click="goAnchor('#question-' + item.itemOrder)">{{ item.itemOrder }}</el-tag> + </span> + </el-col> + </el-row> + <el-divider></el-divider> + <div style="text-align: center"> + <el-button type="primary" style="width: 120px;height: 35px" @click="open">鎻愪氦鎵规敼</el-button> </div> - </div> - </el-row> + </el-card> + </div> + <div class="paper-form"> + <el-form :model="form" ref="form" v-loading="formLoading" label-width="100px"> + <el-row :key="index" v-for="(titleItem, index) in form.titleItems"> + <h3>{{ titleItem.title }}</h3> + <el-card class="exampaper-item-box" v-if="titleItem.questionList.length !== 0"> + <el-form-item :key="questionItem.itemOrder" :label="questionItem.itemOrder + '.'" + v-for="questionItem in titleItem.questionList" class="exam-question-item" + label-width="50px" :id="'question-' + questionItem.itemOrder"> + <MarkPaperShow :qType="questionItem.questionType" :question="questionItem" :answer="form.navbar"/> + </el-form-item> + </el-card> + </el-row> + </el-form> + </div> </div> </template> <script> -import DoQuestion from '@/components/question/DoQuestion' -import { getStudentExam } from '@/api/exam' +import { getStudentExam, submitMark } from '@/api/exam' +import MarkPaperShow from '@/views/exam/exam/components/MarkPaperShow' +import { mapGetters, mapState } from 'vuex' export default { name: 'MarkPaperDetail', - components: { DoQuestion }, + components: { MarkPaperShow }, mounted () { - this.examInfo.examId = this.$route.query.examId - this.examInfo.examName = this.$route.query.examName - this.userId = this.$route.query.userId - if (this.examInfo.examId && this.userId) { - this.getStudentPaper() - } + getStudentExam(this.$route.query.examId, this.$route.query.userId).then(re => { + this.formLoading = true + this.form = re.data.data + this.formLoading = false + }) }, data () { return { + paperQuestionList: [], + form: {}, + formLoading: false, userId: null, - questionLoading: false, - examInfo: { - examId: null, - examName: '', - doTime: 0, - paperQuestionList: [] - } + userName: '寮犱笁', + questionLoading: false } }, methods: { + open () { + this.$confirm('纭鏄惁鎻愪氦鎴愮哗鎵规敼?', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + submitMark(this.form).then(re => { + if (re.data.code === 1) { + console.log('1111111') + this.$message.success('鎻愪氦鎴愬姛') + this.$router.back() + } else { + this.$message.error(re.message) + } + }) + }) + }, + goAnchor (selector) { + this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' }) + }, + questionDoRightTag (status) { + return this.enumFormat(this.doRightTag, status) + }, getStudentPaper () { - this.getStudentExam(this.examInfo.examId, this.userId).then(res => { + getStudentExam(this.examInfo.examId, this.userId).then(res => { this.examInfo = res.data.data }) } + }, + computed: { + formattedDoTime () { + const totalSeconds = this.form.doTime + const minutes = Math.floor(totalSeconds / 60) + const seconds = totalSeconds % 60 + return `${minutes}鍒�${seconds < 10 ? '0' + seconds : seconds}绉抈 + }, + ...mapGetters('enumItem', ['enumFormat']), + ...mapState('enumItem', { + doRightTag: state => state.exam.question.answer.doRightTag + }) } } </script> <style scoped> -.question-warp { - margin-top: 50px; +.paper-container { + display: flex; + flex-direction: row; + height: 100%; + padding: 20px; + min-height: 100%; } + +.paper-card { + position: fixed; + width: 270px; +} + +.paper-form { + flex: 1; /* 鍗犳嵁鍓╀綑绌洪棿 */ + margin-left: 300px; +} + +.info { + display: flex; + flex-direction: row; + justify-content: left; + font-size: 14px; + margin-top: 10px; +} + </style> -- Gitblit v1.8.0