From 4f6cdee3d3a9967b6955aacc354bf557430c0643 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期一, 05 八月 2024 17:05:16 +0800
Subject: [PATCH] 批改

---
 src/views/onlineEducation/questionBankManagement/questionManage/components/questionDialog.vue |  286 +++++++++++++++++++++++++++++++++------------------------
 1 files changed, 165 insertions(+), 121 deletions(-)

diff --git a/src/views/onlineEducation/questionBankManagement/questionManage/components/questionDialog.vue b/src/views/onlineEducation/questionBankManagement/questionManage/components/questionDialog.vue
index c24f4c6..941c5cc 100644
--- a/src/views/onlineEducation/questionBankManagement/questionManage/components/questionDialog.vue
+++ b/src/views/onlineEducation/questionBankManagement/questionManage/components/questionDialog.vue
@@ -3,12 +3,14 @@
     <el-dialog
         v-model="dialogVisible"
         :title="title"
-        width="50%"
+        width="750px"
         :before-close="handleClose"
+        :close-on-press-escape="false"
+        :close-on-click-modal="false"
     >
       <el-form :model="state.form" size="default" ref="busRef" :rules="state.formRules" label-width="150px" >
         <el-form-item label="题目类型:" prop="questionType">
-          <el-select v-model="state.form.questionType" placeholder="请选择题型" style="width: 100%">
+          <el-select v-model="state.form.questionType" placeholder="请选择题型" style="width: 100%"  @change="changeType">
             <el-option
                 v-for="item in state.questionTypeList"
                 :key="item.id"
@@ -20,13 +22,16 @@
         </el-form-item>
         <el-form-item label="归属题库:" prop="bankName">
           <el-select
+              clearable
               v-model="state.form.bankName"
+              filterable
+              remote
+              reserve-keyword
+              placeholder="请输入题库名称"
+              remote-show-suffix
+              :remote-method="getBankList"
               style="width: 100%"
-              v-loadMoreNew:[reselect]="handleScroll"
-              :popper-class="reselect.name"
               @change="selectValue"
-              class="item-width"
-              placeholder="请选择题库"
           >
             <el-option
                 v-for="item in state.bankList"
@@ -35,65 +40,54 @@
                 :value="item.name"
             />
           </el-select>
+<!--          <el-select-->
+<!--              v-model="state.form.bankName"-->
+<!--              style="width: 100%"-->
+<!--              v-loadMoreNew:[reselect]="handleScroll"-->
+<!--              :popper-class="reselect.name"-->
+<!--              @change="selectValue"-->
+<!--              class="item-width"-->
+<!--              placeholder="请选择题库"-->
+<!--          >-->
+<!--            <el-option-->
+<!--                v-for="item in state.bankList"-->
+<!--                :key="item.id"-->
+<!--                :label="item.name"-->
+<!--                :value="item.name"-->
+<!--            />-->
+<!--          </el-select>-->
         </el-form-item>
         <el-form-item label="题目内容:" prop="title">
           <el-input v-model.trim="state.form.title" type="textarea" placeholder="请输入题目内容"></el-input>
         </el-form-item>
-        <el-form-item label="选项:" prop="content">
-          <div v-if="state.form.questionType === 1" style="width: 100%">
-            <div v-for="(item,index) in 4" :key="index" >
-              <div style="display: flex;">
-                <span>{{item ===1 ? 'A':item ===2 ? 'B' : item ===3 ? 'C' : 'D'}}</span>
-                <el-input type="textarea" v-model="state.singleQuestion.items[index].content" placeholder="请输入选项内容" style="width: 100%;margin-left: 20px;margin-bottom: 10px"></el-input>
+        <el-form-item label="选项:" prop="content" v-if="state.form.questionType != 4">
+          <div style="display: flex;flex-direction: column;width: 100%">
+            <el-button :disabled="state.form.questionType ===3 || state.form.questionType==null " type="primary"  @click="addOption" size="default" style="width: 65px;margin-bottom: 15px">添加</el-button>
+            <div v-for="(item,index) in state.optionItem.items" :key="index" style="width: 100%">
+              <div style="display: flex;align-items: center">
+                <span>{{String.fromCharCode(index + 65)}}</span>
+                <el-input  :disabled="state.form.questionType ===3" type="textarea" v-model="state.optionItem.items[index].content" placeholder="请输入选项内容" style="width: 100%;margin-left: 20px;margin-bottom: 10px"></el-input>
+                <Delete v-if="state.form.questionType !==3" style="width: 15px; height: 15px; margin-left: 8px;color: #ed5565" @click="delOption(index)" />
               </div>
-            </div>
-            <div style="display: flex">
-              <span style="width: 50px">解析:</span>
-              <el-input type="textarea" v-model="state.singleQuestion.analyze" placeholder="请输入题目解析" style="width: 100%;margin-bottom: 10px"></el-input>
-            </div>
-          </div>
-          <div v-else-if="state.form.questionType === 2" style="width: 100%">
-            <div v-for="(item,index) in 4" :key="index" >
-              <div style="display: flex;">
-                <span>{{item ===1 ? 'A':item ===2 ? 'B' : item ===3 ? 'C' : 'D'}}</span>
-                <el-input type="textarea" v-model="state.multiQuestion.items[index].content" placeholder="请输入选项内容" style="width: 100%;margin-left: 20px;margin-bottom: 10px"></el-input>
-              </div>
-            </div>
-            <div style="display: flex">
-              <span style="width: 50px">解析:</span>
-              <el-input type="textarea" v-model="state.multiQuestion.analyze" placeholder="请输入题目解析" style="width: 100%;margin-bottom: 10px"></el-input>
-            </div>
-          </div>
-          <div v-else style="width: 100%">
-            <div v-for="(item,index) in 2" :key="index" >
-              <div style="display: flex;">
-                <span>{{item ===1 ? 'A': 'B'}}</span>
-                <el-input v-model="state.judgeQuestion.items[index].content"  style="width: 100%;margin-left: 20px;margin-bottom: 10px" disabled></el-input>
-              </div>
-            </div>
-            <div style="display: flex">
-              <span style="width: 50px">解析:</span>
-              <el-input type="textarea" v-model="state.judgeQuestion.analyze" placeholder="请输入题目解析" style="width: 100%;margin-bottom: 10px"></el-input>
             </div>
           </div>
         </el-form-item>
+
         <el-form-item label="正确答案:" prop="answer">
-          <el-radio-group v-model="state.form.answer" v-if="state.form.questionType === 1">
-            <el-radio :label="'A'">A</el-radio>
-            <el-radio :label="'B'">B</el-radio>
-            <el-radio :label="'C'">C</el-radio>
-            <el-radio :label="'D'">D</el-radio>
+          <el-radio-group v-model="state.form.answer" v-if="state.form.questionType === 1 || state.form.questionType === 3">
+            <div v-for="(item,index) in state.optionItem.items">
+              <el-radio :label="String.fromCharCode(index + 65)" style="margin-left: 20px">{{String.fromCharCode(index + 65)}}</el-radio>
+            </div>
           </el-radio-group>
-          <el-checkbox-group v-model="state.checkList" v-if="state.form.questionType === 2" @change="changeCheckBox">
-            <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-group v-model="state.checkList" v-if="state.form.questionType === 2" style="display: flex" >
+            <div v-for="(item,index) in state.optionItem.items">
+              <el-checkbox :label="String.fromCharCode(index + 65)" style="margin-left: 20px;">{{String.fromCharCode(index + 65)}}</el-checkbox>
+            </div>
           </el-checkbox-group>
-          <el-radio-group v-model="state.form.answer" v-if="state.form.questionType === 3">
-            <el-radio :label="'A'">A</el-radio>
-            <el-radio :label="'B'">B</el-radio>
-          </el-radio-group>
+          <el-input v-if="state.form.questionType === 4" v-model="state.form.answer" type="textarea" placeholder="请输入正确答案"></el-input>
+        </el-form-item>
+        <el-form-item label="解析:" >
+          <el-input type="textarea" v-model="state.optionItem.analyze" placeholder="请输入题目解析" style="width: 100%;margin-bottom: 10px"></el-input>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -108,6 +102,7 @@
 <script setup>
 import {reactive, ref, toRefs} from 'vue'
 import {ElMessage} from "element-plus";
+import {Delete} from "@element-plus/icons-vue";
 
 import {
   getClassification
@@ -135,7 +130,7 @@
   form: {
     id: '',
     title: '',
-    questionType: 1,
+    questionType: null,
     bankName: '',
     bankId: null,
     answer: ''
@@ -145,7 +140,7 @@
     questionType: [{required: true, trigger: "blur", message: '请选择题目类型'}],
     bankName: [{required: true, trigger: "blur", message: '请选择归属题库'}],
     title: [{required: true, trigger: "blur", message: '请输入题目内容'}],
-    // answer: [{required: true, trigger: "blur", message: '请选择正确答案'}],
+    answer: [{required: true, trigger: "blur", message: '请选择正确答案'}],
   },
   classifyList: [],
   isAdmin: false,
@@ -164,62 +159,15 @@
     {
       id: 3,
       name: '判断题'
+    },
+    {
+      id: 4,
+      name: '简答题'
     }
   ],
-  singleQuestion: {
+  optionItem: {
     analyze: '',
-    items: [
-      {
-        prefix:"A",
-        content: ''
-      },
-      {
-        prefix:"B",
-        content: ''
-      },
-      {
-        prefix:"C",
-        content: ''
-      },
-      {
-        prefix:"D",
-        content: ''
-      },
-    ]
-  },
-  judgeQuestion: {
-    analyze: '',
-    items: [
-      {
-        prefix:"A",
-        content: '是'
-      },
-      {
-        prefix:"B",
-        content: '否'
-      },
-    ]
-  },
-  multiQuestion: {
-    analyze: '',
-    items: [
-      {
-        prefix:"A",
-        content: ''
-      },
-      {
-        prefix:"B",
-        content: ''
-      },
-      {
-        prefix:"C",
-        content: ''
-      },
-      {
-        prefix:"D",
-        content: ''
-      },
-    ]
+    items: []
   },
   checkList: [],
   bankList: [],
@@ -239,8 +187,22 @@
   })
 }
 
+const addOption = () => {
+
+  const obj = {
+    prefix:"",
+    content: ''
+  }
+  state.optionItem.items.push(obj)
+
+}
+const delOption = (val) => {
+  state.optionItem.items.splice(val,1)
+  state.form.answer = ''
+  console.log(" state.optionItem.items.", state.optionItem.items)
+}
 const openDialog = async (type, value) => {
-  await loadMoreBankData();
+  await getBankList('');
   const userInfo = JSON.parse(Cookies.get('userInfo'))
   console.log("userInfo",userInfo)
   if(userInfo.userType === 0){
@@ -257,12 +219,8 @@
     const res = await getQuestionById(value.id)
     if(res.code === 200){
       state.form = res.data
-      if(res.data.questionType === 1){
-        state.singleQuestion = JSON.parse(res.data.content)
-      }else if(res.data.questionType === 3) {
-        state.judgeQuestion = JSON.parse(res.data.content)
-      }else {
-        state.multiQuestion = JSON.parse(res.data.content)
+      state.optionItem = JSON.parse(res.data.content)
+      if(res.data.questionType === 2){
         state.checkList = res.data.answer.split(',')
       }
     }else{
@@ -270,6 +228,32 @@
     }
   }
   dialogVisible.value = true;
+}
+
+const getBankList = async (val)=>{
+  if(val != ""){
+    const queryParams = {
+      name: val
+    }
+    const res = await getQuestionBank(queryParams)
+    if (res.code == 200) {
+      state.bankList = res.data.list
+
+    } else {
+      ElMessage.warning(res.message)
+    }
+  }else {
+    const queryParams = {
+      pageNum: 1,
+      pageSize: 10
+    }
+    const res = await getQuestionBank(queryParams)
+    if (res.code == 200) {
+      state.bankList = res.data.list
+    } else {
+      ElMessage.warning(res.message)
+    }
+  }
 }
 
 const handleScroll = () => {
@@ -299,8 +283,26 @@
   if(valid){
     if(title.value === '新增'){
       const {id,bankName, ...data} = JSON.parse(JSON.stringify(state.form))
-      data.answer = data.questionType === 1 || data.questionType === 3 ? data.answer : state.checkList.join(',')
-      data.content = data.questionType === 1 ? JSON.stringify(state.singleQuestion) : data.questionType === 2 ? JSON.stringify(state.multiQuestion) : JSON.stringify(state.judgeQuestion)
+      data.answer = data.questionType === 1 || data.questionType === 3 || data.questionType === 4? data.answer : state.checkList.join(',')
+      if(data.questionType !== 4){
+        const options = state.optionItem.items.map((op,index) => {
+          return {
+            prefix: String.fromCharCode(index + 65),
+            content: op.content,
+          }
+        })
+        data.content = JSON.stringify(
+            {
+              analyze: state.optionItem.analyze,
+              items: options
+            }
+        )
+      }else {
+        data.content = JSON.stringify(
+            {
+              analyze: state.optionItem.analyze,
+            })
+      }
       console.log('state.form',data)
       const res = await addQuestion(data)
       if(res.code === 200){
@@ -317,8 +319,26 @@
       dialogVisible.value = false;
     }else if(title.value === '编辑'){
       const {bankName,...data} = JSON.parse(JSON.stringify(state.form))
-      data.answer = data.questionType === 1 || data.questionType === 3 ? data.answer : state.checkList.join(',')
-      data.content = data.questionType === 1 ? JSON.stringify(state.singleQuestion) : data.questionType === 2 ? JSON.stringify(state.multiQuestion) : JSON.stringify(state.judgeQuestion)
+      data.answer = data.questionType === 1 || data.questionType === 3 || data.questionType === 4 ? data.answer : state.checkList.join(',')
+      if(data.questionType !== 4){
+        const options = state.optionItem.items.map((op,index) => {
+          return {
+            prefix: String.fromCharCode(index + 65),
+            content: op.content,
+          }
+        })
+        data.content = JSON.stringify(
+            {
+              analyze: state.optionItem.analyze,
+              items: options
+            }
+        )
+      }else {
+        data.content = JSON.stringify(
+            {
+              analyze: state.optionItem.analyze,
+            })
+      }
       const res = await editQuestion(data)
       if(res.code === 200){
         ElMessage({
@@ -335,7 +355,27 @@
     }
   }
 }
+const changeType = () => {
+  state.optionItem = {
+    analyze: '',
+    items: []
+  }
+  if(state.form.questionType === 3) {
+    state.optionItem.items = [
+      {
+        prefix: 'A',
+        content: '是'
 
+      },
+      {
+        prefix: 'B',
+        content: '否'
+      }
+    ]
+  }
+
+
+}
 const handleClose = () => {
   busRef.value.clearValidate();
   reset();
@@ -347,11 +387,15 @@
   state.form = {
     id: '',
     title: '',
-    questionType: 1,
+    questionType: null,
     bankName: '',
     bankId: null,
     answer: ''
   }
+  state.optionItem = {
+    analyze: '',
+    items: []
+  }
   state.bankPageNum = 1;
   state.bankPageSize = 10;
   state.bankList = []

--
Gitblit v1.9.2