Business needs:
① button is disabled when the total score exceeds the expected value
② Disabled when the test questions are generated successfully
③ Disable when the test questions already exist when opening the dialog
problems
The button cannot be disabled when the total score exceeds the expected value
Problem code:
This situation can only control demand ①, ②③ cannot control
This situation can only be controlled by ②③, ① cannot be controlled
Solution:
Control the judgment conditions through the || relationship
Specific code:
<el-form-item label="考试题型:" v-model="bindQuestionList">
<div v-for="(item, index) in bindQuestionList" :key="index">
<el-checkbox v-show="item.questionTitle == '单选题'" v-model="item.choose"
@click="changeQuestionTitle('1', item)" label="单选" style="margin-right:30px" />
<el-checkbox v-show="item.questionTitle == '判断题'" v-model="item.choose"
@click="changeQuestionTitle('2', item)" label="判断" style="margin-right:30px" />
<el-checkbox v-show="item.questionTitle == '多选题'" v-model="item.choose"
@click="changeQuestionTitle('3', item)" label="多选" style="margin-right:30px" />
数量:
<el-input-number v-model="item.questionCount" :min="0" :max="100" controls-position="right"
size="small" @change="handleChange" style="margin-right:20px" />
每题分数:
<el-input-number v-model="item.score" :min="1" :max="10" controls-position="right" size="small"
@change="handleChange" style="margin-right:20px" />
小计:
<span>{
{ item.choose ? item.questionCount * item.score : 0 }}</span>
</div>
</el-form-item>
<el-form-item label="总分数:">
{
{ showScore }}
<span style="color:red;padding-left: 15px;" v-show="totalScoreOver">提示:试题总分超过预计值</span>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmitExam" :disabled="totalScoreOver || isDisabled">试题生成</el-button>
<el-button type="primary" @click="CloseWin()">退出</el-button>
<el-button type="primary" @click="openExamWin">试卷预览</el-button>
</el-form-item>
export default {
data() {
return {
bindQuestionList: [ //编辑题型数据
{
choose: false, //是否选择
questionTitle: '单选题', //题目类型
examSubjectCode: '', //编码
questionCount: 0, //题目数量
score: 0 //每题分值
},
{
choose: false,
questionTitle: '判断题',
examSubjectCode: '',
questionCount: 0,
score: 0
},
{
choose: false,
questionTitle: '多选题',
examSubjectCode: '',
questionCount: 0,
score: 0
},
],
}
},
computed: {
// 累计分数
showScore() {
let score = 0;
let items = this.bindQuestionList.filter(item => { return item.choose });
items.forEach(a => score += a.questionCount * a.score);
return score;
},
/**
* 判断试题总分是否超过试卷预设值
*/
totalScoreOver() {
let score = 0;
let items = this.bindQuestionList.filter(item => { return item.choose });
items.forEach(a => score += a.questionCount * a.score);
return score > this.addForm.totalScore;
}
},
methods: {
// 修改questionTitle flag:1-单选 2-判断 3-多选 item:当前遍历的数据
changeQuestionTitle(flag, item) {
if (flag == 1) {
item.questionTitle = '单选题'
}
if (flag == 2) {
item.questionTitle = '判断题'
}
if (flag == 3) {
item.questionTitle = '多选题'
}
},
handleChange(value) {
},
/**
* 试题生成(编辑页面)
*/
onSubmitExam() {
// 根据choose过滤出已经选中的数据作为参数传给接口
let data = this.bindQuestionList.filter(item => { return item.choose });
// 遍历bindQuestionList,把里面的examSubjectCode换成editForm里的examSubjectCode
this.bindQuestionList.forEach(item => {
item.examSubjectCode = this.addForm.examSubjectCode
})
// 如果没有选中的则提示(即data为空数组,或者data为null或者undefined时给予提示)
if (!data || data.length <= 0) {
ElMessage('请选择题型')
return
}
Req.BindExamQuestion(data).then((res) => {
if(res.message){
ElMessage({
message: '该类型没有考试题目,需要添加考题',
type: 'error',
})
}else if(res.status == 200 && res.message ==""){
this.isDisabled = true;
ElMessage({
message: '试题生成成功',
type: 'success',
})
}
})
this.GetTabData();
},
/**
* 打开生产试卷窗口
* @param {*} data
*/
OpenCreateExamPaperWin(data) {
this.addForm = data;
this.createExamPaperWinVisible = true;
this.GetTabData();
// 判断此时这个窗口的examSubjectCode下有没有试题,有的话禁止生成试题
Req.GetExamQuestionListType({ "examSubjectCode": data.examSubjectCode }).then((res) => {
if((res.data || []).length >0){
ElMessage({
message: '考题已生成,请勿重复生成!',
type: 'warning',
})
this.isDisabled = true;
}
})
},
CloseWin(formRule) {
this.isDisabled = false;
},
handleClose(done) {
done();
this.isDisabled = false;
},
}
}
ps: Set it to false after clicking to generate test questions, and then reset this value after closing the dialog box
That is, this.isDisabled = false;
The final effect: (the test question generation button is grayed out and becomes a disabled button)