<template>
<div ref="myBody" class="add-question flex">
<div class="text flex">
<div class="left">
目前录入题目是第<span>{{ questionNextNum }}</span
>道题
</div>
<div class="right">{{ courseName }}</div>
</div>
<el-form class="form flex" ref="form" :model="form" label-width="auto">
<!-- <div class="top flex"> -->
<div>
<el-form-item
label="题目内容"
prop="topicTitle"
:rules="{
required: true,
message: '必须输入题目内容',
trigger: 'blur',
}"
>
<el-input
type="textarea"
placeholder="多行输入"
resize="none"
rows="4"
v-model="form.topicTitle"
>
</el-input>
</el-form-item>
</div>
<div class="bottom">
<!-- <el-form-item label="选项1" prop="title">
<el-input v-model="form.title" placeholder="请输入"></el-input>
</el-form-item> -->
<el-form-item
v-for="(question, index) in form.questions"
:label="'选项' + (index + 1)"
:key="question.key"
:prop="'questions.' + index + '.value'"
:rules="
index === 0
? {
required: true,
message: '第一项不能为空不能为空',
trigger: 'blur',
}
: {}
"
>
<div class="add-select flex">
<el-input
type="textarea"
placeholder="多行输入"
style="flex: 1; margin-right: 10px"
rows="2"
v-model="question.value"
></el-input>
<div class="flex algin-items">
<div
@click="rightAnswerClick(index)"
class="right"
:class="{ active: answerNum === index }"
>
设为正确答案
</div>
<el-button
size="mini"
type="danger"
v-if="index > 0"
@click.prevent="removeDomain(question)"
>删除</el-button
>
</div>
</div>
</el-form-item>
<el-form-item
class="noAttr"
:label="`选项${form.questions.length + 1}`"
prop=""
>
<div class="add-select flex">
<el-input
type="textarea"
placeholder="多行输入"
resize="none"
rows="2"
v-model="addValue"
style="flex: 1; margin-right: 10px"
>
</el-input>
<div class="flex algin-items">
<div
@click="rightAnswerClick(form.questions.length)"
class="right"
:class="{ active: answerNum === form.questions.length }"
>
设为正确答案
</div>
<el-button
size="mini"
type="primary"
@click.prevent="add(addValue)"
>新增</el-button
>
</div>
</div>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
import {
addQuestion,
checkQuestion,
changeQuestion,
getQuestion,
getLessonById,
} from "@/api/educationPlanExam/lessonsProgram.js";
import { addSubject ,getSubject,listSubject,updateSubject} from "@/api/educationPlanExam/subject";
export default {
name: "AnswerLesson",
props: {
// visible: {
// type: Boolean,
// default: false,
// },
courseId: {
type: Number,
},
topicId: {
type: Number,
},
},
components: {},
data() {
return {
form: {
topicTitle: "",
questions: [{ value: "" }, { value: "" }, { value: "" }],
},
answerNum: null,
addValue: "",
// 录入的是第几道题
questionNextNum: 1,
courseName: "",
};
},
created() {
// 如果存在就是修改
if (this.topicId) {
getSubject(this.topicId).then((res) => {
console.log('?',res.data);
const data = res.data;
this.form = {
topicTitle: data.topicTitle,
questions: JSON.parse(data.topicOption),
};
this.answerNum = data.answer;
});
}
// 查询是第几道题
this.getQuestion();
// 获取课程标题
this.getLessonById(this.courseId);
},
methods: {
getQuestion() {
listSubject({ bankId: this.courseId }).then((res) => {
console.log(res)
// 如果是修改 就是原来的值，如果不是，就是总数+1
if (this.topicId) {
res.rows.forEach((item, index) => {
if (item.subjectId == this.topicId) {
this.questionNextNum = index+1;
}
});
} else {
this.questionNextNum = res.total + 1;
}
});
},
getLessonById(courseId) {
getLessonById(courseId).then((res) => {
console.log(res);
this.courseName = res.data.courseName;
});
},
addQuestion(data) {
// 如果是修改，就用修改的方法，如果是新增，就用新增的方法
if (this.topicId) {
return updateSubject({ subjectId: this.topicId, ...data });
} else {
return addSubject({ bankId: this.courseId, ...data });
}
},
rightAnswerClick(index) {
this.answerNum = index;
console.log(index);
},
// 删除选项
removeDomain(question) {
const index = this.form.questions.indexOf(question);
// 如果是正确答案,就让正确答案清空
if (this.answerNum === index) {
this.answerNum = null;
}
if (index >= 0) {
this.form.questions.splice(index, 1);
}
},
// 新增选项
add(addValue) {
this.form.questions.push({ value: addValue });
console.log();
},
save(num = 2) {
return new Promise((resove) => {
if (!this.answerNum && this.answerNum !== 0) {
this.$message({
message: "警告，请设置一个正确答案",
type: "warning",
});
return resove(false);
}
this.$refs.form.validate((valid) => {
if (valid) {
const data = {};
data.topicTitle = this.form.topicTitle;
data.topicOption = JSON.stringify(this.form.questions);
data.answer = this.answerNum;
this.addQuestion(data).then((res) => {
if (res.code == 200) {
// 把修改的这个归位，变成正常添加
this.$emit("update:topicId", null);
this.$message({
message: "添加题目成功",
type: "success",
});
this.$parent.$parent.componentsNumChange(num);
this.$parent.$parent.$parent.getList();
resove(true);
}
});
}
});
});
},
saveAndNext() {
this.save(3).then((res) => {
if (res) {
this.reset();
// this.questionNextNum++;
this.getQuestion();
}
});
},
reset() {
this.form = {
topicTitle: "",
questions: [{ value: "" }, { value: "" }, { value: "" }],
};
this.answerNum = null;
this.addValue = "";
},
},
};
</script>
<style lang="scss" scoped>
.add-question {
width: 100%;
height: 550px;
// overflow: hidden;
flex-direction: column;
padding-bottom: 7px;
margin-bottom: 20px;
border-bottom: 1px solid #bbbbbb;
.form {
flex: 1;
flex-direction: column;
height: 100%;
.bottom {
overflow-y: auto;
height: 330px;
box-sizing: border-box;
.algin-items {
align-items: center;
width: 200px;
}
.right {
display: inline-block;
width: 133px;
margin-right: 10px;
line-height: initial;
padding: 4px 0;
border: 1px solid #bbbbbb;
color: #101010;
font-size: 12px;
text-align: center;
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
&.active {
background-color: #0bab0c;
color: #ffffff;
}
&:hover {
background-color: rgba(11, 171, 12, 0.5);
color: #ffffff;
}
}
}
}
.text {
margin-top: 13px;
margin-bottom: 34px;
justify-content: space-between;
height: 28px;
.left {
line-height: 28px;
color: #101010;
font-size: 14px;
}
.right {
width: 411px;
line-height: 28px;
background: #1d84ff;
padding-right: 5px;
color: #fff;
text-align: right;
}
}
}
</style>