试题库

project/qujing/app/AppQuestionBank/components/Add.vue

@@ -8,13 +8,37 @@
         <template #content>
           <el-form class="ai-form" :model="form" label-width="120px" ref="form">
             <el-form-item label="题目描述" style="width: 100%;" prop="title" :rules="[{required: true, message: '请输入标题', trigger: 'blur'}]">
-              <el-input size="small" v-model="form.title" clearable placeholder="请输入..." :maxlength="50" :show-word-limit="true"></el-input>
+              <el-input size="small" type="textarea" :rows="4" v-model="form.title" clearable placeholder="请输入..." :maxlength="500" :show-word-limit="true"></el-input>
             </el-form-item>
             <el-form-item prop="type" label="题目类型" :rules="[{required: true, message: '请选择题目类型', trigger: 'change'}]">
-              <el-radio-group v-model="form.type">
+              <el-radio-group v-model="form.type" @change="onTypeChange">
-                <el-radio :label="3">单选题</el-radio>
+                <el-radio label="1">单选题</el-radio>
-                <el-radio :label="6">多选题</el-radio>
+                <el-radio label="2">多选题</el-radio>
-                <el-radio :label="9">判断题</el-radio>
+                <el-radio label="3">判断题</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item prop="options" v-if="form.type !== '3'" style="width: 100%;" label="题目选项" :rules="[{required: true, message: '请输入题目选项', trigger: 'change'}]">
+              <div class="options" v-for="(item, index) in form.options" :key="index">
+                <span>选项{{ index + 1 }}</span>
+                <el-input placeholder="请输入选项名" size="small" :maxlength="100" show-word-limit v-model="item.label"></el-input>
+                <i class="iconfont iconDelete" @click="removeOptions(index)"></i>
+              </div>
+              <el-button type="text" class="add-select" @click="addOptions">添加选项</el-button>
+            </el-form-item>
+            <el-form-item style="width: 100%;" v-if="form.options.length && form.type !== '3'" prop="answer" label="题目答案" :rules="[{required: true, message: '请选择题目答案', trigger: 'change'}]">
+              <el-select :multiple="form.type === '2'" v-model="form.answer" size="small" placeholder="请选择题目答案">
+                <el-option
+                  v-for="(item, index) in form.options"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.label">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item v-if="form.type === '3'" style="width: 100%;" prop="answer" label="题目答案" :rules="[{required: true, message: '请选择题目答案', trigger: 'change'}]">
+              <el-radio-group v-model="form.answer">
+                <el-radio label="1">正确</el-radio>
+                <el-radio label="0">错误</el-radio>
               </el-radio-group>
             </el-form-item>
             <el-form-item label="答案解析" prop="content" style="width: 100%;" :rules="[{required: true, message: '请输入内容', trigger: 'change'}]">
@@ -48,7 +72,9 @@
         form: {
           title: '',
           content: '',
-          type: ''
+          type: '1',
+          answer: '',
+          options: []
         },
         isLoading: false,
         id: ''
@@ -75,6 +101,24 @@
         })
       },
 
+      onTypeChange (e) {
+        if (e === '2') {
+          this.form.answer = []
+        } else {
+          this.form.answer = ''
+        }
+      },
+
+      addOptions () {
+        this.form.options.push({
+          label: ''
+        })
+      },
+
+      removeOptions (index) {
+        this.form.options.splice(index, 1)
+      },
+
       confirm () {
         this.$refs.form.validate((valid) => {
           if (valid) {
@@ -109,5 +153,23 @@
 
 <style scoped lang="scss">
   .AppQuestionBank-add {
+    .options {
+      display: flex;
+      align-items: center;
+
+      .el-input {
+        width: 420px;
+        margin: 0 14px;
+      }
+
+      span {
+        color: #666;
+      }
+
+      i:hover {
+        cursor: pointer;
+        opacity: 0.7;
+      }
+    }
   }
 </style>