From 35626c1cfb9521f0cc482daf11b2b2f67d1df3cf Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期一, 17 六月 2024 09:38:00 +0800 Subject: [PATCH] 试卷模块 --- src/views/exam/paper/edit.vue | 356 +++++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 259 insertions(+), 97 deletions(-) diff --git a/src/views/exam/paper/edit.vue b/src/views/exam/paper/edit.vue index 9185182..7ac665c 100644 --- a/src/views/exam/paper/edit.vue +++ b/src/views/exam/paper/edit.vue @@ -1,15 +1,9 @@ <template> <div class="app-container"> - <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules"> - <el-form-item label="骞寸骇锛�" prop="level" required> - <el-select v-model="form.level" placeholder="骞寸骇" @change="levelChange"> - <el-option v-for="item in levelEnum" :key="item.key" :value="item.key" :label="item.value"></el-option> - </el-select> - </el-form-item> + <el-form :model="form" ref="form" label-width="150px" v-loading="formLoading" :rules="rules"> <el-form-item label="瀛︾锛�" prop="subjectId" required> <el-select v-model="form.subjectId" placeholder="瀛︾"> - <el-option v-for="item in subjectFilter" :key="item.id" :value="item.id" - :label="item.name+' ( '+item.levelName+' )'"></el-option> + <el-option v-for="item in subjects" :key="item.id" :label="item.name" :value="item.id"/> </el-select> </el-form-item> <el-form-item label="璇曞嵎绫诲瀷锛�" prop="paperType" required> @@ -17,53 +11,99 @@ <el-option v-for="item in paperTypeEnum" :key="item.key" :value="item.key" :label="item.value"></el-option> </el-select> </el-form-item> - <el-form-item label="鏃堕棿闄愬埗锛�" required v-show="form.paperType===4"> - <el-date-picker v-model="form.limitDateTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" - range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡"> - </el-date-picker> + <el-form-item label="璇曞嵎鍚嶇О锛�" prop="name" required> + <el-input style="width: 300px" v-model="form.name"/> </el-form-item> - <el-form-item label="璇曞嵎鍚嶇О锛�" prop="name" required> - <el-input v-model="form.name"/> - </el-form-item> - <el-form-item :key="index" :label="'鏍囬'+(index+1)+'锛�'" required v-for="(titleItem,index) in form.titleItems"> - <el-input v-model="titleItem.name" style="width: 80%"/> + <el-form-item :key="index" :label="'鏍囬'+(index+1)+'锛�'" required + v-for="(titleItem,index) in form.questionTitleList" v-show="form.paperType===1"> + <el-input v-model="titleItem.title" style="width: 50%"/> + <el-select @change="addQuestionType" v-model="titleItem.questionType" style="margin-left: 20px" + placeholder="璇烽�夋嫨棰樼洰绫诲瀷"> + <el-option + v-for="item in questionTypeList" + :key="item.value" + :label="item.name" + :value="item.value" + :disabled="addedQuestionTypes.includes(item.value)"/><!-- 绂佺敤宸叉坊鍔犵殑閫夐」 --> + </el-select> + <el-input-number v-show ="titleItem.questionList.length > 0" v-model="titleItem.eachScore" @change="updateScores(titleItem)" :min="0" :precision="1" + style="margin-left: 20px" placeholder="姣忛鍒嗘暟"></el-input-number> <el-button type="text" class="link-left" style="margin-left: 20px" size="mini" @click="addQuestion(titleItem)"> 娣诲姞棰樼洰 </el-button> - <el-button type="text" class="link-left" size="mini" @click="form.titleItems.splice(index,1)">鍒犻櫎</el-button> - <el-card class="exampaper-item-box" v-if="titleItem.questionItems.length!==0"> + <el-button type="text" class="link-left" size="mini" @click="removeTitleItem(titleItem,index)">鍒犻櫎</el-button> + <el-card class="exampaper-item-box" v-if="titleItem.questionList.length!==0"> <el-form-item :key="questionIndex" :label="'棰樼洰'+(questionIndex+1)+'锛�'" - v-for="(questionItem,questionIndex) in titleItem.questionItems" style="margin-bottom: 15px"> + v-for="(questionItem,questionIndex) in titleItem.questionList" style="margin-bottom: 15px"> <el-row> - <el-col :span="23"> - <QuestionShow :qType="questionItem.questionType" :question="questionItem"/> + <el-col :span="18"> + <QuestionShow :qType="titleItem.questionType" :question="questionItem"/> </el-col> - <el-col :span="1"> - <el-button type="text" size="mini" @click="titleItem.questionItems.splice(questionIndex,1)">鍒犻櫎 + <el-col :span="3"> + <el-input-number v-model="questionItem.score" size="mini" :min="0" :precision="1" placeholder="鍒嗘暟" + :controls="false" @change="updateTotalScore"/> + </el-col> + <el-col :span="3"> + <el-button type="text" size="mini" @click="removeQuestion(titleItem,questionItem)">鍒犻櫎 </el-button> </el-col> </el-row> </el-form-item> </el-card> </el-form-item> - <el-form-item label="寤鸿鏃堕暱锛�" prop="suggestTime" required> - <el-input v-model="form.suggestTime" placeholder="鍒嗛挓"/> + <el-form-item label="澶氶�夐寰楀垎绫诲瀷锛�" prop="deductType"> + <div> + <el-select v-model="form.deductType" placeholder="璇烽�夋嫨澶氶�夐寰楀垎绫诲瀷" style="width: 200px;margin-right: 30px"> + <el-option + v-for="item in deductTypeList" + :key="item.value" + :label="item.name" + :value="item.value" + /> + </el-select> + <el-input-number v-model="form.deductTypeScore" placeholder="璇疯緭鍏ュ閫夎瘎鍒�" + v-show="form.deductType === 2 || form.deductType === 3" :min="0"/> + </div> + </el-form-item> + <el-form-item label="寤鸿鏃堕暱(鍒嗛挓)锛�" prop="suggestTime" required> + <el-input-number v-model="form.suggestTime" placeholder="鍒嗛挓" :min="0"/> + </el-form-item> + <el-form-item label="鏉冮檺锛�" prop="visibility"> + <el-radio v-model="form.visibility" :label="'1'">绉佹湁</el-radio> + <el-radio v-model="form.visibility" :label="'2'">鍏紑</el-radio> + </el-form-item> + <el-form-item v-show="form.paperType ===2 ||form.paperType ===3" :key="index" + :label="translateQuestionType(item.questionType)+'锛�'" v-for="(item,index) in form.questionSetting"> + <div style="display: flex;"> + <span style="margin-right: 10px">{{ '鏍囬' }}</span> + <el-input v-model="item.title" style="margin-right: 50px;width: 500px"/> + <span style="margin-right: 10px">{{ '鏁伴噺' }}</span> + <el-input-number v-model="item.num" :precision="0" :min="0" style="margin-right: 50px"/> + <span style="margin-right: 10px">{{ '姣忛鍒嗘暟' }}</span> + <el-input-number v-model="item.score" :min="0" :precision="1"/> + </div> + </el-form-item> + <el-form-item label="鍚堣锛�"> + <div style="display: flex;"> + <span style="margin-right: 10px">{{ '鏁伴噺锛�' }}</span> + <span v-if ="form.paperType ===2 || (form.paperType ===3 && !form.id)" style="margin-right: 50px;width: 100px">{{ totalNum }}</span> + <span v-if ="form.paperType ===1" style="margin-right: 50px;width: 100px">{{ form.num }}</span> + <span style="margin-right: 10px">{{ '鎬诲垎锛�' }}</span> + <span v-if ="form.paperType ===2 || (form.paperType ===3 && !form.id)" style="width: 100px">{{ totalScore }}</span> + <span v-if ="form.paperType ===1" style="width: 100px">{{ form.score }}</span> + </div> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">鎻愪氦</el-button> <el-button @click="resetForm">閲嶇疆</el-button> - <el-button type="success" @click="addTitle">娣诲姞鏍囬</el-button> + <el-button type="success" @click="addTitle" v-show="form.paperType ===1">娣诲姞鏍囬</el-button> </el-form-item> </el-form> - <el-dialog :visible.sync="questionPage.showDialog" width="70%"> + + <el-dialog :visible.sync="questionPage.showDialog" width="70%"> <el-form :model="questionPage.queryParam" ref="queryForm" :inline="true"> <el-form-item label="ID锛�"> - <el-input v-model="questionPage.queryParam.id" clearable></el-input> - </el-form-item> - <el-form-item label="棰樺瀷锛�"> - <el-select v-model="questionPage.queryParam.questionType" clearable> - <el-option v-for="item in questionTypeEnum" :key="item.key" :value="item.key" :label="item.value"></el-option> - </el-select> + <el-input v-model="questionPage.queryParam.id" clearable></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="queryForm">鏌ヨ</el-button> @@ -73,24 +113,29 @@ @selection-change="handleSelectionChange" border fit highlight-current-row style="width: 100%"> <el-table-column type="selection" width="35"></el-table-column> <el-table-column prop="id" label="Id" width="60px"/> - <el-table-column prop="questionType" label="棰樺瀷" :formatter="questionTypeFormatter" width="70px"/> + <el-table-column prop="questionType" label="棰樺瀷" width="70px"> + <template slot-scope="scope"> + <div> {{ translateQuestionType(scope.row.questionType) }}</div> + </template> + </el-table-column> <el-table-column prop="shortTitle" label="棰樺共" show-overflow-tooltip/> </el-table> <pagination v-show="questionPage.total>0" :total="questionPage.total" :page.sync="questionPage.queryParam.pageIndex" :limit.sync="questionPage.queryParam.pageSize" @pagination="search"/> <span slot="footer" class="dialog-footer"> - <el-button @click="questionPage.showDialog = false">鍙� 娑�</el-button> <el-button type="primary" @click="confirmQuestionSelect">纭畾</el-button> - </span> + <el-button @click="questionPage.showDialog = false">鍙� 娑�</el-button> + </span> </el-dialog> </div> </template> <script> -import { mapGetters, mapState, mapActions } from 'vuex' +import { mapState, mapActions } from 'vuex' import Pagination from '@/components/Pagination' +import subjectApi from '@/api/subject' import QuestionShow from '../question/components/Show' import examPaperApi from '@/api/examPaper' import questionApi from '@/api/question' @@ -101,15 +146,44 @@ return { form: { id: null, - level: null, subjectId: null, paperType: 1, - limitDateTime: [], name: '', - suggestTime: null, - titleItems: [] + num: 0, + score: 0, + suggestTime: 0, + deductType: 1, + deductTypeScore: 0, + visibility: '1', + questionSetting: [ + { questionType: 1, title: '鍗曢�夐', score: null, num: null }, + { questionType: 2, title: '澶氶�夐', score: null, num: null }, + { questionType: 3, title: '鍒ゆ柇棰�', score: null, num: null }, + { questionType: 4, title: '濉┖棰�', score: null, num: null }, + { questionType: 5, title: '绠�绛旈', score: null, num: null }, + { questionType: 6, title: '璇煶棰�', score: null, num: null }, + { questionType: 7, title: '璁$畻棰�', score: null, num: null }, + { questionType: 8, title: '鍒嗘瀽棰�', score: null, num: null }, + ], + questionTitleList: [] }, - subjectFilter: null, + deductTypeList: [ + { name: '绛旈敊涓嶅緱鍒�', value: 1 }, + { name: '婕忛�夊緱鍥哄畾鍒嗗��,鍖呭惈閿欒閫夐」涓嶅緱鍒�', value: 2 }, + { name: '姣忓涓�棰樺緱鐩稿簲鍒嗗��,鍖呭惈閿欒閫夐」涓嶅緱鍒�', value: 3 }, + ], + questionTypeList: [ + { name: '鍗曢�夐', value: 1 }, + { name: '澶氶�夐', value: 2 }, + { name: '鍒ゆ柇棰�', value: 3 }, + { name: '濉┖棰�', value: 4 }, + { name: '绠�绛旈', value: 5 }, + { name: '璇煶棰�', value: 6 }, + { name: '璁$畻棰�', value: 7 }, + { name: '鍒嗘瀽棰�', value: 8 }, + ], + addedQuestionTypes: [], // 宸叉坊鍔犵殑棰樼洰绫诲瀷 + subjects: [], formLoading: false, rules: { level: [ @@ -133,8 +207,8 @@ showDialog: false, queryParam: { id: null, - questionType: null, - subjectId: 1, + questionType: [], + subjectId: [], pageIndex: 1, pageSize: 5 }, @@ -148,57 +222,123 @@ created () { let id = this.$route.query.id let _this = this - this.initSubject(function () { - _this.subjectFilter = _this.subjects - }) + this.getSubjects() if (id && parseInt(id) !== 0) { _this.formLoading = true examPaperApi.select(id).then(re => { - _this.form = re.response + _this.form = re.data _this.formLoading = false }) } }, methods: { + updateTotalScore () { + this.form.score = 0 + this.form.questionTitleList.forEach(titleItem => { + titleItem.questionList.forEach(questionItem => { + if (questionItem.score) { + this.form.score += questionItem.score + } + }) + }) + }, + updateScores (titleItem) { + if (titleItem && titleItem.questionList) { + titleItem.questionList.forEach(questionItem => { + questionItem.score = titleItem.eachScore // 鏇存柊姣忎釜棰樼洰鐨勫垎鏁� + }) + } + this.updateTotalScore() + }, + // 娣诲姞棰樼洰绫诲瀷 + addQuestionType () { + if (this.form.questionTitleList.length > 0) { + this.addedQuestionTypes = [] + // 閬嶅巻棰樼洰鍒楄〃 + this.form.questionTitleList.forEach((titleItem) => { + // 妫�鏌ュ綋鍓嶉鐩殑绫诲瀷鏄惁杩樻病鏈夎娣诲姞鍒板凡娣诲姞鐨勯鐩被鍨嬫暟缁勪腑 + if (!this.addedQuestionTypes.includes(titleItem.questionType)) { + // 濡傛灉杩樻病鏈夎娣诲姞锛屽垯娣诲姞鍒版暟缁勪腑 + this.addedQuestionTypes.push(titleItem.questionType) + } + }) + } + }, + // 鑾峰彇绉戠洰 + getSubjects () { + subjectApi.list().then(re => { + this.subjects = re.data + }) + }, + translateQuestionType (questionTypeId) { + const questionType = this.questionTypeList.find(questionType => questionType.value === questionTypeId) + return questionType ? questionType.name : '鏈煡' + }, submitForm () { let _this = this this.$refs.form.validate((valid) => { if (valid) { this.formLoading = true - examPaperApi.edit(this.form).then(re => { - if (re.code === 1) { - _this.$message.success(re.message) - _this.delCurrentView(_this).then(() => { - _this.$router.push('/exam/paper/list') - }) - } else { - _this.$message.error(re.message) + if (this.form.id) { + examPaperApi.edit(this.form).then(re => { + if (re.code === 1) { + _this.$message.success(re.message) + _this.delCurrentView(_this).then(() => { + _this.$router.push('/exam/paper/list') + }) + } else { + _this.$message.error(re.message) + this.formLoading = false + } + }).catch(e => { this.formLoading = false - } - }).catch(e => { - this.formLoading = false - }) + }) + } else { + examPaperApi.addPaper(this.form).then(re => { + if (re.code === 1) { + _this.$message.success(re.message) + _this.delCurrentView(_this).then(() => { + _this.$router.push('/exam/paper/list') + }) + } else { + _this.$message.error(re.message) + this.formLoading = false + } + }).catch(e => { + this.formLoading = false + }) + } } else { return false } }) }, addTitle () { - this.form.titleItems.push({ - name: '', - questionItems: [] + this.form.questionTitleList.push({ + questionList: [] }) }, addQuestion (titleItem) { this.currentTitleItem = titleItem + this.questionPage.queryParam.questionType = [] + this.questionPage.queryParam.questionType.push(titleItem.questionType) this.questionPage.showDialog = true this.search() }, - removeTitleItem (titleItem) { - this.form.titleItems.remove(titleItem) + removeTitleItem (titleItem ,index) { + this.form.questionTitleList.splice(index, 1) + this.form.num = this.form.num - titleItem.questionList.length + this.updateTotalScore(); + if (!this.form.questionTitleList || this.form.questionTitleList.length === 0) { + this.addedQuestionTypes = [] + } else { + this.addQuestionType() + } }, - removeQuestion (titleItem, questionItem) { - titleItem.questionItems.remove(questionItem) + removeQuestion (titleItem ,questionIndex) { + titleItem.questionList.splice(questionIndex ,1) + this.updateTotalScore(); + this.form.num = this.form.num - 1 }, queryForm () { this.questionPage.queryParam.pageIndex = 1 @@ -208,20 +348,18 @@ let _this = this this.questionPage.multipleSelection.forEach(q => { questionApi.select(q.id).then(re => { - _this.currentTitleItem.questionItems.push(re.response) + _this.currentTitleItem.questionList.push(re.data) + this.form.num += 1 }) }) this.questionPage.showDialog = false }, - levelChange () { - this.form.subjectId = null - this.subjectFilter = this.subjects.filter(data => data.level === this.form.level) - }, search () { - this.questionPage.queryParam.subjectId = this.form.subjectId + this.questionPage.queryParam.subjectId = [] + this.questionPage.queryParam.subjectId.push(this.form.subjectId) this.questionPage.listLoading = true questionApi.pageList(this.questionPage.queryParam).then(data => { - const re = data.response + const re = data.data this.questionPage.tableData = re.list this.questionPage.total = re.total this.questionPage.queryParam.pageIndex = re.pageNum @@ -231,48 +369,72 @@ handleSelectionChange (val) { this.questionPage.multipleSelection = val }, - questionTypeFormatter (row, column, cellValue, index) { - return this.enumFormat(this.questionTypeEnum, cellValue) - }, - subjectFormatter (row, column, cellValue, index) { - return this.subjectEnumFormat(cellValue) - }, resetForm () { let lastId = this.form.id this.$refs['form'].resetFields() this.form = { - id: null, - level: null, subjectId: null, paperType: 1, - limitDateTime: [], name: '', - suggestTime: null, - titleItems: [] + num: 0, + score: 0, + suggestTime: 0, + deductType: 1, + deductTypeScore: 0, + visibility: '1', + questionSetting: [ + { questionType: 1, title: '鍗曢�夐', score: null, num: null }, + { questionType: 2, title: '澶氶�夐', score: null, num: null }, + { questionType: 3, title: '鍒ゆ柇棰�', score: null, num: null }, + { questionType: 4, title: '濉┖棰�', score: null, num: null }, + { questionType: 5, title: '绠�绛旈', score: null, num: null }, + { questionType: 6, title: '璁$畻棰�', score: null, num: null }, + ], + questionTitleList: [] } this.form.id = lastId }, - ...mapActions('exam', { initSubject: 'initSubject' }), ...mapActions('tagsView', { delCurrentView: 'delCurrentView' }) }, computed: { - ...mapGetters('enumItem', ['enumFormat']), ...mapState('enumItem', { - questionTypeEnum: state => state.exam.question.typeEnum, paperTypeEnum: state => state.exam.examPaper.paperTypeEnum, - levelEnum: state => state.user.levelEnum }), - ...mapState('exam', { subjects: state => state.subjects }) + totalNum () { + if (this.form.paperType === 2 || this.form.paperType === 3) { + let total = 0 + for (let item of this.form.questionSetting) { + total += parseInt(item.num || 0, 10) + } + this.form.num = total + return total + } else { + + } + }, + totalScore () { + if (this.form.paperType === 2 || this.form.paperType === 3) { + let total = 0 + for (let item of this.form.questionSetting) { + const num = parseInt(item.num || 0, 10) + const score = parseFloat(item.score || 0) + total += num * score + } + this.form.score = total.toFixed(1) + return total.toFixed(1) // 淇濈暀涓�浣嶅皬鏁� + } + } } } </script> <style lang="scss"> - .exampaper-item-box { - .q-title { - margin: 0px 5px 0px 5px; - } - .q-item-content { - } +.exampaper-item-box { + .q-title { + margin: 0px 5px 0px 5px; } + + .q-item-content { + } +} </style> -- Gitblit v1.8.0