| | |
| | | <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> |
| | | <div style="display: flex;flex-direction: column;width: 100%"> |
| | | <el-button 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 type="textarea" v-model="state.optionItem.items[index].content" placeholder="请输入选项内容" style="width: 100%;margin-left: 20px;margin-bottom: 10px"></el-input> |
| | | <Delete 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-input type="textarea" v-model="state.optionItem.analyze" placeholder="请输入题目解析" style="width: 100%;margin-bottom: 10px"></el-input> |
| | | </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-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | |
| | | <script setup> |
| | | import {reactive, ref, toRefs} from 'vue' |
| | | import {ElMessage} from "element-plus"; |
| | | import {Delete} from "@element-plus/icons-vue"; |
| | | |
| | | import { |
| | | getClassification |
| | |
| | | form: { |
| | | id: '', |
| | | title: '', |
| | | questionType: 1, |
| | | questionType: null, |
| | | bankName: '', |
| | | bankId: null, |
| | | answer: '' |
| | |
| | | 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: [], |
| | |
| | | }) |
| | | } |
| | | |
| | | const addOption = () => { |
| | | |
| | | const obj = { |
| | | prefix:"", |
| | | content: '' |
| | | } |
| | | state.optionItem.items.push(obj) |
| | | |
| | | } |
| | | const delOption = (val) => { |
| | | state.optionItem.items.splice(val,1) |
| | | console.log(" state.optionItem.items.", state.optionItem.items) |
| | | } |
| | | const openDialog = async (type, value) => { |
| | | await loadMoreBankData(); |
| | | const userInfo = JSON.parse(Cookies.get('userInfo')) |
| | |
| | | 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{ |
| | |
| | | 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.content = data.questionType === 1 ? JSON.stringify(state.singleQuestion) : data.questionType === 2 ? JSON.stringify(state.multiQuestion) : JSON.stringify(state.judgeQuestion) |
| | | 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 |
| | | } |
| | | ) |
| | | console.log('state.form',data) |
| | | const res = await addQuestion(data) |
| | | if(res.code === 200){ |
| | |
| | | }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.content = data.questionType === 1 ? JSON.stringify(state.singleQuestion) : data.questionType === 2 ? JSON.stringify(state.multiQuestion) : JSON.stringify(state.judgeQuestion) |
| | | 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 |
| | | } |
| | | ) |
| | | const res = await editQuestion(data) |
| | | if(res.code === 200){ |
| | | ElMessage({ |
| | |
| | | state.form = { |
| | | id: '', |
| | | title: '', |
| | | questionType: 1, |
| | | questionType: null, |
| | | bankName: '', |
| | | bankId: null, |
| | | answer: '' |
| | | } |
| | | state.singleQuestion= { |
| | | state.optionItem = { |
| | | analyze: '', |
| | | items: [ |
| | | { |
| | | prefix:"A", |
| | | content: '' |
| | | }, |
| | | { |
| | | prefix:"B", |
| | | content: '' |
| | | }, |
| | | { |
| | | prefix:"C", |
| | | content: '' |
| | | }, |
| | | { |
| | | prefix:"D", |
| | | content: '' |
| | | }, |
| | | ] |
| | | items: [] |
| | | } |
| | | state.judgeQuestion= { |
| | | analyze: '', |
| | | items: [ |
| | | { |
| | | prefix:"A", |
| | | content: '是' |
| | | }, |
| | | { |
| | | prefix:"B", |
| | | content: '否' |
| | | }, |
| | | ] |
| | | } |
| | | state. multiQuestion= { |
| | | analyze: '', |
| | | items: [ |
| | | { |
| | | prefix:"A", |
| | | content: '' |
| | | }, |
| | | { |
| | | prefix:"B", |
| | | content: '' |
| | | }, |
| | | { |
| | | prefix:"C", |
| | | content: '' |
| | | }, |
| | | { |
| | | prefix:"D", |
| | | content: '' |
| | | }, |
| | | ] |
| | | }, |
| | | state.bankPageNum = 1; |
| | | state.bankPageSize = 10; |
| | | state.bankList = [] |