examtest/test_client/src/views/question/questionupdate.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" style="width:600px" type="textarea" :rows=3></el-input>
      </el-form-item>
      <el-form-item label="选项A" prop="optionA" >
        <el-input v-model="Form.options.A" style="width:600px" :disabled="inputDisable"></el-input>
      </el-form-item>
      <el-form-item label="选项B" prop="optionB" >
        <el-input v-model="Form.options.B" style="width:600px" :disabled="inputDisable"></el-input>
      </el-form-item>
      <el-form-item label="选项C"  v-show="Form.type!='判断'">
        <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" style="width:600px"></el-input>
      </el-form-item>
      <el-form-item label="选项E" v-show="Form.type!='判断'">
        <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" 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 { createQuestion,getQuestioncatAll, getQuestion, getQuestioncatList, updateQuestion } from "@/api/question";
import { genTree, deepClone } from "@/utils";
export default {
  data() {
    return {
      Form: {
        id:0,
        name: "",
        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: {
    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()
          }
              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)
    },
    getQuestioncatAll() {
      getQuestioncatAll().then(response => {
        this.catOptions = genTree(response.data);
      });
    },
  }
};
</script>