209 lines
7.0 KiB
Python
209 lines
7.0 KiB
Python
<template>
|
|
<div class="app-container">
|
|
<el-form :model="Form" :rules="rules" ref="Form" label-width="100px" status-icon>
|
|
<el-form-item label="题型" prop="type">
|
|
<el-select v-model="Form.type" style="width: 400px" :disabled="true">
|
|
<el-option
|
|
v-for="item in typeOptions"
|
|
:key="item.key"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="分类" prop="type">
|
|
<el-select v-model="Form.questioncat" placeholder="分类" clearable style="width: 200px" class="filter-item">
|
|
<el-option v-for="item in catOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="题干" prop="name">
|
|
<el-input v-model="Form.name" height="100" width="800px" />
|
|
</el-form-item>
|
|
<el-form-item label="题干图片" prop="img" >
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
:headers="upHeaders"
|
|
:action="upUrl"
|
|
accept="image/jpeg, image/gif, image/png, image/bmp"
|
|
:show-file-list="false"
|
|
:on-success="handleImgSuccess"
|
|
:before-upload="beforeImgUpload"
|
|
>
|
|
<img v-if="Form.img" :src="Form.img" style="width: 200px;height: 100px;display: block;"/>
|
|
<el-button size="small" type="primary" v-else>点击上传</el-button>
|
|
</el-upload>
|
|
<el-button type="text" @click="delImg()" v-if="Form.img">删除</el-button>
|
|
</el-form-item>
|
|
<el-form-item label="选项A" prop="optionA">
|
|
<el-input v-model="Form.options.A" height="30" width="800px" :disabled="inputDisable" />
|
|
</el-form-item>
|
|
<el-form-item label="选项B" prop="optionB">
|
|
<el-input v-model="Form.options.B" height="30" width="800px" :disabled="inputDisable" />
|
|
</el-form-item>
|
|
<el-form-item label="选项C" v-show="Form.type!='判断'">
|
|
<el-input v-model="Form.options.C" height="30" width="800px" />
|
|
</el-form-item>
|
|
<el-form-item label="选项D" v-show="Form.type!='判断'">
|
|
<el-input v-model="Form.options.D" height="30" width="800px" />
|
|
</el-form-item>
|
|
<el-form-item label="选项E" v-show="Form.type!='判断'">
|
|
<el-input v-model="Form.options.E" height="30" width="800px" />
|
|
</el-form-item>
|
|
<el-form-item label="选项F" v-show="Form.type!='判断'">
|
|
<el-input v-model="Form.options.F" height="30" width="800px" />
|
|
</el-form-item>
|
|
<el-form-item label="正确答案" v-if="Form.type =='多选'">
|
|
<el-checkbox-group v-model="Form.right">
|
|
<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 label="E"></el-checkbox>
|
|
<el-checkbox label="F"></el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<el-form-item label="正确答案" v-else-if="Form.type =='单选'">
|
|
<el-radio-group v-model="Form.right">
|
|
<el-radio label="A"></el-radio>
|
|
<el-radio label="B"></el-radio>
|
|
<el-radio label="C"></el-radio>
|
|
<el-radio label="D"></el-radio>
|
|
<el-radio label="E"></el-radio>
|
|
<el-radio label="F"></el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="正确答案" v-else>
|
|
<el-radio-group v-model="Form.right">
|
|
<el-radio label="A"></el-radio>
|
|
<el-radio label="B"></el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="解析">
|
|
<el-input v-model="Form.resolution" style="width:600px" type="textarea" :rows="3"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="真题年份" prop="year">
|
|
<el-input v-model="Form.year"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitForm('Form')" :loading="submitLoding">保存</el-button>
|
|
<el-button type="warning" @click="goBack()" v-if="qid==null">返回</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getQuestionDetail,updateQuestion,getQuestioncatList } from "@/api/exam";
|
|
import { upUrl } from "@/api/file";
|
|
import { getToken } from "@/utils/auth";
|
|
export default {
|
|
components:{ },
|
|
props:["qid"],
|
|
data() {
|
|
return {
|
|
upHeaders: { Authorization: "JWT " + getToken() },
|
|
upUrl: upUrl(),
|
|
Form: {
|
|
id:null,
|
|
name: "",
|
|
img: null,
|
|
type:"",
|
|
questioncat:null,
|
|
year:null,
|
|
right:'',
|
|
options:{
|
|
A:'',
|
|
B:''
|
|
}
|
|
},
|
|
catOptions:[],
|
|
inputDisable: false,
|
|
submitLoding:false,
|
|
rules: {
|
|
type: [
|
|
{ required: true, message: "请选择", trigger: "blur" }
|
|
],
|
|
name: [
|
|
{ required: true, message: "请输入", trigger: "blur" }
|
|
],
|
|
},
|
|
typeOptions: [
|
|
{ key: 1, label: "单选", value: "单选" },
|
|
{ key: 2, label: "多选", value: "多选"},
|
|
{ key: 3, label: "判断", value: "判断" }
|
|
],
|
|
};
|
|
},
|
|
watch:{
|
|
},
|
|
created() {
|
|
if(this.qid) {
|
|
this.Form.id = this.qid
|
|
}else{
|
|
this.Form.id = this.$route.query.id //接收参数
|
|
}
|
|
|
|
this.getQuestion();
|
|
this.getQuestioncatAll()
|
|
},
|
|
methods: {
|
|
handleImgSuccess(res, file) {
|
|
this.Form.img = res.data.path
|
|
},
|
|
beforeImgUpload(file) {
|
|
const isLt2M = file.size / 1024 / 1024 < 0.6;
|
|
if (!isLt2M) {
|
|
this.$message.error("上传图片大小不能超过 600KB!");
|
|
}
|
|
return isLt2M;
|
|
},
|
|
submitForm(formName) {
|
|
this.$refs[formName].validate(valid => {
|
|
if (valid) {
|
|
this.submitLoding = true
|
|
if(this.Form.questioncat instanceof Array){
|
|
this.Form.questioncat = this.Form.questioncat.pop()
|
|
}
|
|
for(let key in this.Form.options){
|
|
if(!this.Form.options[key]){
|
|
delete this.Form.options[key]
|
|
}
|
|
}
|
|
updateQuestion(this.Form.id, this.Form).then(response => {
|
|
this.submitLoding = false
|
|
if(response.code >= 200){
|
|
this.$message({
|
|
type: "success",
|
|
message: "修改成功!"
|
|
});
|
|
if (this.qid){
|
|
this.$emit("updateQuestion", this.Form)
|
|
}else{
|
|
this.goBack()
|
|
}
|
|
|
|
}
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
getQuestion() {
|
|
getQuestionDetail(this.Form.id).then(response => {
|
|
this.Form = response.data ;
|
|
});
|
|
},
|
|
goBack() {
|
|
this.$router.go(-1)
|
|
},
|
|
delImg() {
|
|
this.Form.img = null
|
|
},
|
|
getQuestioncatAll() {
|
|
getQuestioncatList().then(response => {
|
|
this.catOptions = response.data.results;
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script> |