welfare-admin/src/views/course/question/QuestionAdd.vue

<template>
  <a-card :bordered="false" :title="pageName">
    <template slot="extra">
      <a-button size="small" @click="close">返回</a-button>
      <a-button size="small" type="primary" @click="queding">确定</a-button>
    </template>
    <a-tabs :animated="false" :default-active-key="tabKey" @change="callback" :headStyle="{ paddingTop: '0px' }">
      <!-- 单选题 -->
      <a-tab-pane key="1" tab="单选" :disabled="radio.disabled">
        <a-radio-group v-model="radio.rightAnswers" style="width: 100%">
          <a-card title="题目（题干内容）" :bordered="false">
            <a-textarea placeholder="" :rows="6" v-model="radio.questionName" style="width: 100%" />
          </a-card>
          <a-card :bordered="false">
            <template slot="title">
              选项（从选项中选择一个作为答案）<br />A &nbsp;&nbsp;
              <a-radio value="A">答案</a-radio>
            </template>
            <a-textarea placeholder="" :rows="6" v-model="radio.answerA" style="width: 100%" />
          </a-card>
          <a-card :bordered="false">
            <template slot="title">
              B &nbsp;&nbsp;
              <a-radio value="B">答案</a-radio>
            </template>
            <a-textarea placeholder="" :rows="6" v-model="radio.answerB" style="width: 100%" />
          </a-card>
          <a-card :bordered="false">
            <template slot="title">
              C &nbsp;&nbsp;
              <a-radio value="C">答案</a-radio>
            </template>
            <a-textarea placeholder="" :rows="6" v-model="radio.answerC" style="width: 100%" />
          </a-card>
          <a-card :bordered="false">
            <template slot="title">
              D &nbsp;&nbsp;
              <a-radio value="D">答案</a-radio>
            </template>
            <a-textarea placeholder="" :rows="6" v-model="radio.answerD" style="width: 100%" />
          </a-card>
          <a-card title="答案解析" :bordered="false">
            <a-textarea placeholder="" :rows="6" v-model="radio.answerParse" style="width: 100%" />
          </a-card>
        </a-radio-group>
      </a-tab-pane>

      <!-- 多选题 -->
      <a-tab-pane key="2" tab="多选" :disabled="multiselect.disabled">
        <a-card title="题目（题干内容）" :bordered="false">
          <a-textarea placeholder="" :rows="6" v-model="multiselect.questionName" style="width: 100%" />
        </a-card>
        <a-checkbox-group @change="onChange" :value="checkedValues" style="width: 100%">
          <a-card :bordered="false">
            <template slot="title">
              选项（从选项中选择一个作为答案）<br />A &nbsp;&nbsp;
              <a-checkbox value="A">答案</a-checkbox>
            </template>
            <a-textarea placeholder="" :rows="6" v-model="multiselect.answerA" style="width: 100%" />
          </a-card>
          <a-card :bordered="false">
            <template slot="title">
              B &nbsp;&nbsp;
              <a-checkbox value="B">答案</a-checkbox>
            </template>
            <a-textarea placeholder="" :rows="6" v-model="multiselect.answerB" style="width: 100%" />
          </a-card>
          <a-card :bordered="false">
            <template slot="title">
              C &nbsp;&nbsp;
              <a-checkbox value="C">答案</a-checkbox>
            </template>
            <a-textarea placeholder="" :rows="6" v-model="multiselect.answerC" style="width: 100%" />
          </a-card>
          <a-card :bordered="false">
            <template slot="title">
              D &nbsp;&nbsp;
              <a-checkbox value="D">答案</a-checkbox>
            </template>
            <a-textarea placeholder="" :rows="6" v-model="multiselect.answerD" style="width: 100%" />
          </a-card>
          <a-card :bordered="false">
            <template slot="title">
              E &nbsp;&nbsp;
              <a-checkbox value="E">答案</a-checkbox>
            </template>
            <a-textarea placeholder="" :rows="6" v-model="multiselect.answerE" style="width: 100%" />
          </a-card>
          <a-card :bordered="false">
            <template slot="title">
              F &nbsp;&nbsp;
              <a-checkbox value="F">答案</a-checkbox>
            </template>
            <a-textarea placeholder="" :rows="6" v-model="multiselect.answerF" style="width: 100%" />
          </a-card>
        </a-checkbox-group>
        <a-card title="答案解析" :bordered="false">
          <a-textarea placeholder="" :rows="6" v-model="multiselect.answerParse" style="width: 100%" />
        </a-card>
      </a-tab-pane>

      <!-- 判断题 -->
      <a-tab-pane key="3" tab="判断" :disabled="estimate.disabled">
        <a-radio-group v-model="estimate.rightAnswers" style="width: 100%">
          <a-card title="题目（题干内容）" :bordered="false">
            <a-textarea placeholder="" :rows="6" v-model="estimate.questionName" style="width: 100%" />
          </a-card>
          <a-card :bordered="false">
            <template slot="title">
              选项（从选项中选择一个作为答案）<br />
              <a-radio value="1"> 正确 </a-radio>
              <a-radio value="2"> 错误 </a-radio>
            </template>
          </a-card>
          <a-card title="答案解析" :bordered="false">
            <a-textarea placeholder="" :rows="6" v-model="estimate.answerParse" style="width: 100%" />
          </a-card>
        </a-radio-group>
      </a-tab-pane>

      <!-- 简答题 -->
      <a-tab-pane key="4" tab="简答" :disabled="shortAnswer.disabled">
        <a-card title="题目（题干内容）" :bordered="false">
          <a-textarea placeholder="" :rows="6" v-model="shortAnswer.questionName" style="width: 100%" />
        </a-card>
        <a-card :bordered="false">
          <template slot="title"> 答案 </template>
          <a-textarea placeholder="" :rows="6" v-model="shortAnswer.rightAnswers" style="width: 100%" />
        </a-card>
        <a-card title="答案解析" :bordered="false">
          <a-textarea placeholder="" :rows="6" v-model="shortAnswer.answerParse" style="width: 100%" />
        </a-card>
      </a-tab-pane>

      <!-- 填空题 -->
      <a-tab-pane key="5" tab="填空" :disabled="Completion.disabled">
        <a-card title="题目（题干内容）" :bordered="false">
          <a-textarea placeholder="" :rows="6" v-model="Completion.questionName" style="width: 100%" />
        </a-card>
        <a-card title="答案" :bordered="false">
          <div style="text-align: center; margin-bottom: 10px">
            <a-button type="primary" style="width: 40%" @click="addAnswerSize">添加一个新填空</a-button>
            <a-button style="width: 40%" @click="delAnswerSize">刪除一个新填空</a-button>
          </div>
          <div v-for="(answer, index) in Completion.answerList" :key="index" style="margin-bottom: 10px">
            <a-input v-model="Completion.answerList[index]">
              <template slot="addonBefore">
                <b>填空{{ index+1 }}:</b>
              </template>
            </a-input>
          </div>
        </a-card>
        <a-card title="答案解析" :bordered="false">
          <a-textarea placeholder="" :rows="6" v-model="Completion.answerParse" style="width: 100%" />
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>



<script>
import { questionAdd, getQuestionDeatil } from '@/api/course/question/question'
import { getQuestionListByCourseId } from '@/api/course/course'
export default {
  components: {},
  data() {
    return {
      pageName : this.$route.query.id ? "习题编辑" : "题目新增",
      isactive:this.$route.query.isactive,
      quesitonList: [],
      checkedValues: [],
      radio: {},
      multiselect: {},
      estimate: {},
      shortAnswer: {},
      Completion: { answerList: [''] },
      tabKey: this.$route.query.questionType ? this.$route.query.questionType : '1',
    }
  },

  created() {
    //判断是否是编辑
    if (this.$route.query.id && !this.$route.query.opt) {
      this.radio.disabled = true
      this.multiselect.disabled = true
      this.estimate.disabled = true
      this.shortAnswer.disabled = true
      this.Completion.disabled = true

      getQuestionDeatil({ id: this.$route.query.id }).then((res) => {
        if (this.tabKey == '1') {
          this.radio = res.data
          this.radio.disabled = false
        } else if (this.tabKey == '2') {
          this.multiselect = res.data
          if (this.multiselect.rightAnswers) this.checkedValues = this.multiselect.rightAnswers.split('')
          this.multiselect.disabled = false
        } else if (this.tabKey == '3') {
          this.estimate = res.data
          this.estimate.disabled = false
        } else if (this.tabKey == '4') {
          this.shortAnswer = res.data
          this.shortAnswer.disabled = false
        } else if (this.tabKey == '5') {
          this.Completion = res.data
          this.Completion.disabled = false
        }
      })
    }
  },

  methods: {

    //返回
    close() {
      this.$router.push({
        path: '/course/question/QuestionList',
        query: {
          id: this.$route.query.courseId,
          questionId: this.$route.query.id,
          isactive: this.isactive,
          opt: this.$route.query.opt,
          type: this.$route.query.types
        },
      })
    },

    callback(key) {
      this.radio = {}
      this.multiselect = {}
      this.estimate = {}
      this.shortAnswer = {}
      this.Completion = { answerList: [''] }
      this.tabKey = key
    },

    // 添加填空
    addAnswerSize() {
      if (this.Completion.answerList.length == 5) {
        this.$message.error('填空数量最多不能超过5个')
        return
      }
      this.Completion.answerList.push('')
    },
    // 刪除填空
    delAnswerSize() {
      if (this.Completion.answerList.length == 1) {
        this.$message.error('填空数量最少不能少于1个')
        return
      }
      this.Completion.answerList.splice(this.Completion.answerList.length - 1, 1)
    },

    // 确定
    queding() {
      let from
      if (this.tabKey === '1') {
        from = this.radioV()
        if (typeof from == 'boolean' && !from) return
      } else if (this.tabKey === '2') {
        from = this.multiselectV()
        if (typeof from == 'boolean' && !from) return
      } else if (this.tabKey === '3') {
        from = this.estimateV()
        if (typeof from == 'boolean' && !from) return
      } else if (this.tabKey === '4') {
        from = this.shortAnswerV()
        if (typeof from == 'boolean' && !from) return
      } else if (this.tabKey === '5') {
        from = this.CompletionV()
        if (typeof from == 'boolean' && !from) return
      }

      from.courseId = this.$route.query.courseId

      questionAdd(from).then((res) => {
        if (res.code == 200) {
          this.$message.success('新增题目成功!')
          // this.getQuestion()
          this.close()
        } else {
          this.$message.error('新增题目成功!')
        }
      })
    },

    //设置返回下标
    // getQuestion() {
    //   getQuestionListByCourseId({ id: this.$route.query.courseId }).then((res) => {
    //     if (!this.$route.query.id) {
    //       this.isactive = res.data.length - 1
    //     }
    //   })
    // },

    //验证是否为空单选题
    radioV() {
      //验证题目是否为空
      if (!this.radio.questionName || this.radio.questionName === '') {
        this.$message.error('题目（题干内容）不能为空!')
        return false
      }

      // 验证答案是否为空
      if (!this.radio.answerA || this.radio.answerA === '') {
        this.$message.error('答案A不能为空!')
        return false
      } else if (!this.radio.answerB || this.radio.answerB === '') {
        this.$message.error('答案B不能为空!')
        return false
      } else if (!this.radio.answerC || this.radio.answerC === '') {
        this.$message.error('答案C不能为空!')
        return false
      } else if (!this.radio.answerD || this.radio.answerD === '') {
        this.$message.error('答案D不能为空!')
        return false
      }

      // 验证是否勾选正确答案
      if (!this.radio.rightAnswers || this.radio.rightAnswers === '') {
        this.$message.error('请选择正确答案!')
        return false
      }

      let from = {}
      from = this.radio
      from.questionType = 1

      return from
    },

    //多选题选中
    onChange(checkedValues) {
      console.log('checked = ', checkedValues)
      this.checkedValues = checkedValues
    },

    // 验证多选题
    multiselectV() {
      // 题目名称是否为空
      if (!this.multiselect.questionName || this.multiselect.questionName === '') {
        this.$message.error('题目（题干内容）不能为空!')
        return false
      }

      // 题目答案是否为空！
      if (!this.multiselect.answerA || this.multiselect.answerA === '') {
        this.$message.error('答案A不能为空！')
        return false
      } else if (!this.multiselect.answerB || this.multiselect.answerB === '') {
        this.$message.error('答案B不能为空！')
        return false
      } else if (!this.multiselect.answerC || this.multiselect.answerC === '') {
        this.$message.error('答案C不能为空！')
        return false
      } else if (!this.multiselect.answerD || this.multiselect.answerD === '') {
        this.$message.error('答案D不能为空！')
        return false
      } else if (!this.multiselect.answerE || this.multiselect.answerD === '') {
        this.$message.error('答案E不能为空！')
        return false
      } else if (!this.multiselect.answerF || this.multiselect.answerD === '') {
        this.$message.error('答案F不能为空！')
        return false
      }

      let from = {}
      from = this.multiselect
      from.questionType = 2
      from.rightAnswers = ''

      console.log('this.checkedValues', this.checkedValues)

      if (this.checkedValues.length < 1 || this.checkedValues.length == 0) {
        this.$message.error('请选择正确答案！')
        return false
      }

      for (let i = 0; i < this.checkedValues.length; i++) from.rightAnswers = from.rightAnswers + this.checkedValues[i]

      console.log('rightAnswers', from.rightAnswers)

      return from
    },

    // 验证判断题
    estimateV() {
      // 判断题目名称是否为空
      if (!this.estimate.questionName || this.estimate.questionName === '') {
        this.$message.error('题干不能为空！')
        return
      }

      // 验证正确答案
      if (!this.estimate.rightAnswers || this.estimate === '') {
        this.$message.error('请选择题目的正确答案!')
        return
      }

      let from = this.estimate
      from.questionType = 3
      return from
    },

    // 简答题验证
    shortAnswerV() {
      // 题干是否为空
      if (!this.shortAnswer.questionName || this.shortAnswer.questionName === '') {
        this.$message.error('题干不能为空！')
        return false
      }

      if (!this.shortAnswer.rightAnswers || this.shortAnswer.rightAnswers === '') {
        this.$message.error('正确答案不能为空！')
        return false
      }

      let from = this.shortAnswer
      from.questionType = 4
      return from
    },

    // 填空题
    CompletionV() {
      if (!this.Completion.questionName || this.Completion.questionName === '') {
        this.$message.error('题干不能为空！')
        return false
      }
      let from = this.Completion
      from.questionType = 5
      return from
    },
  },
}
</script>