211 lines
7.4 KiB
Vue
211 lines
7.4 KiB
Vue
<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-cascader
|
|
v-model="Form.questioncat"
|
|
:options="catOptions"
|
|
:show-all-levels="false"
|
|
clearable
|
|
style="width: 400px"
|
|
></el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="题干" prop="name">
|
|
<el-input v-model="Form.name" height="100" width="800px" />
|
|
<!-- <el-input v-model="Form.name" style="width:600px" type="textarea" :rows=3></el-input> -->
|
|
</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-input v-model="Form.options.C" style="width:600px"></el-input> -->
|
|
</el-form-item>
|
|
<el-form-item label="选项D" v-show="Form.type!='判断'">
|
|
<el-input v-model="Form.options.D" height="30" width="800px" />
|
|
<!-- <el-input v-model="Form.options.D" style="width:600px"></el-input> -->
|
|
</el-form-item>
|
|
<el-form-item label="选项E" v-show="Form.type!='判断'">
|
|
<el-input v-model="Form.options.E" height="30" width="800px" />
|
|
<!-- <el-input v-model="Form.options.E" style="width:600px"></el-input> -->
|
|
</el-form-item>
|
|
<el-form-item label="选项F" v-show="Form.type!='判断'">
|
|
<el-input v-model="Form.options.F" height="30" width="800px" />
|
|
<!-- <el-input v-model="Form.options.F" style="width:600px"></el-input> -->
|
|
</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>
|
|
<el-button type="primary" @click="submitForm('Form')" :loading="submitLoding">保存</el-button>
|
|
<el-button type="warning" @click="goBack()">返回</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// import el-input from '@/components/Tinymce/index2'
|
|
import { createQuestion,getQuestioncatAll, getQuestion, getQuestioncatList, updateQuestion } from "@/api/question";
|
|
import { genTree, deepClone } from "@/utils";
|
|
import { upUrl } from "@/api/file";
|
|
import { getToken } from "@/utils/auth";
|
|
export default {
|
|
components:{ },
|
|
data() {
|
|
return {
|
|
upHeaders: { Authorization: "JWT " + getToken() },
|
|
upUrl: upUrl(),
|
|
Form: {
|
|
id:0,
|
|
name: "",
|
|
img: null,
|
|
type:"",
|
|
questioncat: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() {
|
|
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()
|
|
}
|
|
// this.Form.name = this.Form.name.replace('<p>','<span>').replace('</p>','</span>')
|
|
// for(let key in this.Form.options){
|
|
// this.Form.options[key] = this.Form.options[key].replace('<p>','<span>').replace('</p>','</span>')
|
|
// }
|
|
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: "修改成功!"
|
|
});
|
|
this.goBack()
|
|
}
|
|
|
|
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
getQuestion() {
|
|
getQuestion(this.Form.id).then(response => {
|
|
this.Form = response.data ;
|
|
});
|
|
},
|
|
goBack() {
|
|
this.$router.go(-1)
|
|
},
|
|
delImg() {
|
|
this.Form.img = null
|
|
},
|
|
getQuestioncatAll() {
|
|
getQuestioncatAll().then(response => {
|
|
this.catOptions = genTree(response.data);
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script> |