批改

zhouwx

2024-08-05 4f6cdee3d3a9967b6955aacc354bf557430c0643

 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,66 +387,15 @@
  state.form = {
    id: '',
    title: '',
    questionType: 1,
    questionType: null,
    bankName: '',
    bankId: null,
    answer: ''
  }
  state.singleQuestion= {
  state.optionItem = {
    analyze: '',
        items: [
      {
        prefix:"A",
        content: ''
      },
      {
        prefix:"B",
        content: ''
      },
      {
        prefix:"C",
        content: ''
      },
      {
        prefix:"D",
        content: ''
      },
    ]
    items: []
  }
  state.judgeQuestion= {
    analyze: '',
        items: [
      {
        prefix:"A",
        content: '是'
      },
      {
        prefix:"B",
        content: '否'
      },
    ]
  }
      state. multiQuestion= {
    analyze: '',
        items: [
      {
        prefix:"A",
        content: ''
      },
      {
        prefix:"B",
        content: ''
      },
      {
        prefix:"C",
        content: ''
      },
      {
        prefix:"D",
        content: ''
      },
    ]
  },
  state.bankPageNum = 1;
  state.bankPageSize = 10;
  state.bankList = []