From 4f6cdee3d3a9967b6955aacc354bf557430c0643 Mon Sep 17 00:00:00 2001 From: zhouwx <1175765986@qq.com> Date: 星期一, 05 八月 2024 17:05:16 +0800 Subject: [PATCH] 批改 --- src/views/onlineEducation/questionBankManagement/questionManage/components/questionDialog.vue | 286 +++++++++++++++++++++++++++++++++------------------------ 1 files changed, 165 insertions(+), 121 deletions(-) diff --git a/src/views/onlineEducation/questionBankManagement/questionManage/components/questionDialog.vue b/src/views/onlineEducation/questionBankManagement/questionManage/components/questionDialog.vue index c24f4c6..941c5cc 100644 --- a/src/views/onlineEducation/questionBankManagement/questionManage/components/questionDialog.vue +++ b/src/views/onlineEducation/questionBankManagement/questionManage/components/questionDialog.vue @@ -3,12 +3,14 @@ <el-dialog v-model="dialogVisible" :title="title" - width="50%" + width="750px" :before-close="handleClose" + :close-on-press-escape="false" + :close-on-click-modal="false" > <el-form :model="state.form" size="default" ref="busRef" :rules="state.formRules" label-width="150px" > <el-form-item label="题目类型:" prop="questionType"> - <el-select v-model="state.form.questionType" placeholder="请选择题型" style="width: 100%"> + <el-select v-model="state.form.questionType" placeholder="请选择题型" style="width: 100%" @change="changeType"> <el-option v-for="item in state.questionTypeList" :key="item.id" @@ -20,13 +22,16 @@ </el-form-item> <el-form-item label="归属题库:" prop="bankName"> <el-select + clearable v-model="state.form.bankName" + filterable + remote + reserve-keyword + placeholder="请输入题库名称" + remote-show-suffix + :remote-method="getBankList" style="width: 100%" - v-loadMoreNew:[reselect]="handleScroll" - :popper-class="reselect.name" @change="selectValue" - class="item-width" - placeholder="请选择题库" > <el-option v-for="item in state.bankList" @@ -35,65 +40,54 @@ :value="item.name" /> </el-select> +<!-- <el-select--> +<!-- v-model="state.form.bankName"--> +<!-- style="width: 100%"--> +<!-- v-loadMoreNew:[reselect]="handleScroll"--> +<!-- :popper-class="reselect.name"--> +<!-- @change="selectValue"--> +<!-- class="item-width"--> +<!-- placeholder="请选择题库"--> +<!-- >--> +<!-- <el-option--> +<!-- v-for="item in state.bankList"--> +<!-- :key="item.id"--> +<!-- :label="item.name"--> +<!-- :value="item.name"--> +<!-- />--> +<!-- </el-select>--> </el-form-item> <el-form-item label="题目内容:" prop="title"> <el-input v-model.trim="state.form.title" type="textarea" placeholder="请输入题目内容"></el-input> </el-form-item> - <el-form-item label="选项:" prop="content"> - <div v-if="state.form.questionType === 1" style="width: 100%"> - <div v-for="(item,index) in 4" :key="index" > - <div style="display: flex;"> - <span>{{item ===1 ? 'A':item ===2 ? 'B' : item ===3 ? 'C' : 'D'}}</span> - <el-input type="textarea" v-model="state.singleQuestion.items[index].content" placeholder="请输入选项内容" style="width: 100%;margin-left: 20px;margin-bottom: 10px"></el-input> + <el-form-item label="选项:" prop="content" v-if="state.form.questionType != 4"> + <div style="display: flex;flex-direction: column;width: 100%"> + <el-button :disabled="state.form.questionType ===3 || state.form.questionType==null " type="primary" @click="addOption" size="default" style="width: 65px;margin-bottom: 15px">添加</el-button> + <div v-for="(item,index) in state.optionItem.items" :key="index" style="width: 100%"> + <div style="display: flex;align-items: center"> + <span>{{String.fromCharCode(index + 65)}}</span> + <el-input :disabled="state.form.questionType ===3" type="textarea" v-model="state.optionItem.items[index].content" placeholder="请输入选项内容" style="width: 100%;margin-left: 20px;margin-bottom: 10px"></el-input> + <Delete v-if="state.form.questionType !==3" style="width: 15px; height: 15px; margin-left: 8px;color: #ed5565" @click="delOption(index)" /> </div> - </div> - <div style="display: flex"> - <span style="width: 50px">解析:</span> - <el-input type="textarea" v-model="state.singleQuestion.analyze" placeholder="请输入题目解析" style="width: 100%;margin-bottom: 10px"></el-input> - </div> - </div> - <div v-else-if="state.form.questionType === 2" style="width: 100%"> - <div v-for="(item,index) in 4" :key="index" > - <div style="display: flex;"> - <span>{{item ===1 ? 'A':item ===2 ? 'B' : item ===3 ? 'C' : 'D'}}</span> - <el-input type="textarea" v-model="state.multiQuestion.items[index].content" placeholder="请输入选项内容" style="width: 100%;margin-left: 20px;margin-bottom: 10px"></el-input> - </div> - </div> - <div style="display: flex"> - <span style="width: 50px">解析:</span> - <el-input type="textarea" v-model="state.multiQuestion.analyze" placeholder="请输入题目解析" style="width: 100%;margin-bottom: 10px"></el-input> - </div> - </div> - <div v-else style="width: 100%"> - <div v-for="(item,index) in 2" :key="index" > - <div style="display: flex;"> - <span>{{item ===1 ? 'A': 'B'}}</span> - <el-input v-model="state.judgeQuestion.items[index].content" style="width: 100%;margin-left: 20px;margin-bottom: 10px" disabled></el-input> - </div> - </div> - <div style="display: flex"> - <span style="width: 50px">解析:</span> - <el-input type="textarea" v-model="state.judgeQuestion.analyze" placeholder="请输入题目解析" style="width: 100%;margin-bottom: 10px"></el-input> </div> </div> </el-form-item> + <el-form-item label="正确答案:" prop="answer"> - <el-radio-group v-model="state.form.answer" v-if="state.form.questionType === 1"> - <el-radio :label="'A'">A</el-radio> - <el-radio :label="'B'">B</el-radio> - <el-radio :label="'C'">C</el-radio> - <el-radio :label="'D'">D</el-radio> + <el-radio-group v-model="state.form.answer" v-if="state.form.questionType === 1 || state.form.questionType === 3"> + <div v-for="(item,index) in state.optionItem.items"> + <el-radio :label="String.fromCharCode(index + 65)" style="margin-left: 20px">{{String.fromCharCode(index + 65)}}</el-radio> + </div> </el-radio-group> - <el-checkbox-group v-model="state.checkList" v-if="state.form.questionType === 2" @change="changeCheckBox"> - <el-checkbox label="A"></el-checkbox> - <el-checkbox label="B"></el-checkbox> - <el-checkbox label="C"></el-checkbox> - <el-checkbox label="D"></el-checkbox> + <el-checkbox-group v-model="state.checkList" v-if="state.form.questionType === 2" style="display: flex" > + <div v-for="(item,index) in state.optionItem.items"> + <el-checkbox :label="String.fromCharCode(index + 65)" style="margin-left: 20px;">{{String.fromCharCode(index + 65)}}</el-checkbox> + </div> </el-checkbox-group> - <el-radio-group v-model="state.form.answer" v-if="state.form.questionType === 3"> - <el-radio :label="'A'">A</el-radio> - <el-radio :label="'B'">B</el-radio> - </el-radio-group> + <el-input v-if="state.form.questionType === 4" v-model="state.form.answer" type="textarea" placeholder="请输入正确答案"></el-input> + </el-form-item> + <el-form-item label="解析:" > + <el-input type="textarea" v-model="state.optionItem.analyze" placeholder="请输入题目解析" style="width: 100%;margin-bottom: 10px"></el-input> </el-form-item> </el-form> <template #footer> @@ -108,6 +102,7 @@ <script setup> import {reactive, ref, toRefs} from 'vue' import {ElMessage} from "element-plus"; +import {Delete} from "@element-plus/icons-vue"; import { getClassification @@ -135,7 +130,7 @@ form: { id: '', title: '', - questionType: 1, + questionType: null, bankName: '', bankId: null, answer: '' @@ -145,7 +140,7 @@ questionType: [{required: true, trigger: "blur", message: '请选择题目类型'}], bankName: [{required: true, trigger: "blur", message: '请选择归属题库'}], title: [{required: true, trigger: "blur", message: '请输入题目内容'}], - // answer: [{required: true, trigger: "blur", message: '请选择正确答案'}], + answer: [{required: true, trigger: "blur", message: '请选择正确答案'}], }, classifyList: [], isAdmin: false, @@ -164,62 +159,15 @@ { id: 3, name: '判断题' + }, + { + id: 4, + name: '简答题' } ], - singleQuestion: { + optionItem: { analyze: '', - items: [ - { - prefix:"A", - content: '' - }, - { - prefix:"B", - content: '' - }, - { - prefix:"C", - content: '' - }, - { - prefix:"D", - content: '' - }, - ] - }, - judgeQuestion: { - analyze: '', - items: [ - { - prefix:"A", - content: '是' - }, - { - prefix:"B", - content: '否' - }, - ] - }, - multiQuestion: { - analyze: '', - items: [ - { - prefix:"A", - content: '' - }, - { - prefix:"B", - content: '' - }, - { - prefix:"C", - content: '' - }, - { - prefix:"D", - content: '' - }, - ] + items: [] }, checkList: [], bankList: [], @@ -239,8 +187,22 @@ }) } +const addOption = () => { + + const obj = { + prefix:"", + content: '' + } + state.optionItem.items.push(obj) + +} +const delOption = (val) => { + state.optionItem.items.splice(val,1) + state.form.answer = '' + console.log(" state.optionItem.items.", state.optionItem.items) +} const openDialog = async (type, value) => { - await loadMoreBankData(); + await getBankList(''); const userInfo = JSON.parse(Cookies.get('userInfo')) console.log("userInfo",userInfo) if(userInfo.userType === 0){ @@ -257,12 +219,8 @@ const res = await getQuestionById(value.id) if(res.code === 200){ state.form = res.data - if(res.data.questionType === 1){ - state.singleQuestion = JSON.parse(res.data.content) - }else if(res.data.questionType === 3) { - state.judgeQuestion = JSON.parse(res.data.content) - }else { - state.multiQuestion = JSON.parse(res.data.content) + state.optionItem = JSON.parse(res.data.content) + if(res.data.questionType === 2){ state.checkList = res.data.answer.split(',') } }else{ @@ -270,6 +228,32 @@ } } dialogVisible.value = true; +} + +const getBankList = async (val)=>{ + if(val != ""){ + const queryParams = { + name: val + } + const res = await getQuestionBank(queryParams) + if (res.code == 200) { + state.bankList = res.data.list + + } else { + ElMessage.warning(res.message) + } + }else { + const queryParams = { + pageNum: 1, + pageSize: 10 + } + const res = await getQuestionBank(queryParams) + if (res.code == 200) { + state.bankList = res.data.list + } else { + ElMessage.warning(res.message) + } + } } const handleScroll = () => { @@ -299,8 +283,26 @@ if(valid){ if(title.value === '新增'){ const {id,bankName, ...data} = JSON.parse(JSON.stringify(state.form)) - data.answer = data.questionType === 1 || data.questionType === 3 ? data.answer : state.checkList.join(',') - data.content = data.questionType === 1 ? JSON.stringify(state.singleQuestion) : data.questionType === 2 ? JSON.stringify(state.multiQuestion) : JSON.stringify(state.judgeQuestion) + data.answer = data.questionType === 1 || data.questionType === 3 || data.questionType === 4? data.answer : state.checkList.join(',') + if(data.questionType !== 4){ + const options = state.optionItem.items.map((op,index) => { + return { + prefix: String.fromCharCode(index + 65), + content: op.content, + } + }) + data.content = JSON.stringify( + { + analyze: state.optionItem.analyze, + items: options + } + ) + }else { + data.content = JSON.stringify( + { + analyze: state.optionItem.analyze, + }) + } console.log('state.form',data) const res = await addQuestion(data) if(res.code === 200){ @@ -317,8 +319,26 @@ dialogVisible.value = false; }else if(title.value === '编辑'){ const {bankName,...data} = JSON.parse(JSON.stringify(state.form)) - data.answer = data.questionType === 1 || data.questionType === 3 ? data.answer : state.checkList.join(',') - data.content = data.questionType === 1 ? JSON.stringify(state.singleQuestion) : data.questionType === 2 ? JSON.stringify(state.multiQuestion) : JSON.stringify(state.judgeQuestion) + data.answer = data.questionType === 1 || data.questionType === 3 || data.questionType === 4 ? data.answer : state.checkList.join(',') + if(data.questionType !== 4){ + const options = state.optionItem.items.map((op,index) => { + return { + prefix: String.fromCharCode(index + 65), + content: op.content, + } + }) + data.content = JSON.stringify( + { + analyze: state.optionItem.analyze, + items: options + } + ) + }else { + data.content = JSON.stringify( + { + analyze: state.optionItem.analyze, + }) + } const res = await editQuestion(data) if(res.code === 200){ ElMessage({ @@ -335,7 +355,27 @@ } } } +const changeType = () => { + state.optionItem = { + analyze: '', + items: [] + } + if(state.form.questionType === 3) { + state.optionItem.items = [ + { + prefix: 'A', + content: '是' + }, + { + prefix: 'B', + content: '否' + } + ] + } + + +} const handleClose = () => { busRef.value.clearValidate(); reset(); @@ -347,11 +387,15 @@ state.form = { id: '', title: '', - questionType: 1, + questionType: null, bankName: '', bankId: null, answer: '' } + state.optionItem = { + analyze: '', + items: [] + } state.bankPageNum = 1; state.bankPageSize = 10; state.bankList = [] -- Gitblit v1.9.2