FE_exam/src/pages/testPaper/detail/manual.vue

<template>
  <div>
    <el-drawer :title="diaTitle" :visible.sync="selectQuesVisible" size="1200px" :close-on-click-modal="false"
      custom-class="ques-dia" @closed="closeDia">
      <div class="wrap">
        <!-- 题库 -->
        <div class="item">
          <p class="total m-b-10">题库</p>
          <ul class="filter">
            <li class="m-b-10">
              <label>题库分类</label>
              <el-cascader style="width: 240px;" placeholder="请选择题库分类" v-model="quesBankTypeVal"
                :options="quesBankTypes" :props="{ value: 'id', label: 'name', checkStrictly: true }" clearable
                @change="initQuesBank"></el-cascader>
            </li>
            <li>
              <el-input placeholder="请输入题库名称" prefix-icon="el-icon-search" v-model="quesBankKeyword" clearable />
            </li>
          </ul>

          <template v-if="quesBanks.length">
            <div class="line">
              <span class="serial">序号</span>
              <span>题库名称</span>
            </div>

            <div class="able-check lines">
              <div v-for="(item, i) in quesBanks" :key="i" :class="['line', { active: curQuesBank.id === item.id }]"
                @click="questionBankClick(item)">
                <span class="serial">{{ i + 1 }}</span>
                <p class="quesBank" :title="item.questionBankName">{{ item.questionBankName }}</p>
              </div>
            </div>
          </template>
          <div v-else class="empty">
            <img class="icon" src="@/assets/images/empty.svg" alt="">
            <p>暂无数据</p>
          </div>
        </div>
        <!-- 题目 -->
        <div class="item">
          <p class="total m-b-10">{{ questionTypeName }}（共{{ ques.length }}道题）</p>

          <ul class="filter">
            <li class="m-b-10">
              <label>知识点</label>
              <el-cascader style="width: 240px;" placeholder="请选择知识点" v-model="knowledgeVal" :options="knowledges"
                :props="{ value: 'id', label: 'name', multiple: true }" clearable @change="getQues"></el-cascader>
            </li>
            <li>
              <el-input placeholder="请输入题干" prefix-icon="el-icon-search" v-model="knowledgeKeyword" clearable />
            </li>
          </ul>

          <template v-if="ques.length">
            <div class="line">
              <el-checkbox v-model="quesAllCheck" @change="quesAllCheckChange"></el-checkbox>
              <span class="serial">序号</span>
              <span class="stem">题干</span>
              <span class="kl">知识点</span>
            </div>

            <div class="lines">
              <div v-for="(item, i) in ques" :key="i" class="line">
                <el-checkbox v-model="item.check" :disabled="item.disabled"
                  @change="val => quesChange(val, item)"></el-checkbox>
                <span class="serial">{{ i + 1 }}</span>
                <el-tooltip effect="dark" :content="item.stemText" placement="top-start">
                  <p class="stem">{{ item.stemText }}</p>
                </el-tooltip>
                <el-tooltip effect="dark" :content="item.knowledgePointName" placement="top-start">
                  <p class="kl">{{ item.knowledgePointName }}</p>
                </el-tooltip>
              </div>
            </div>
          </template>
          <div v-else class="empty">
            <img class="icon" src="@/assets/images/empty.svg" alt="">
            <p>暂无数据</p>
          </div>
        </div>
        <!-- 已选试题 -->
        <div class="item">
          <div v-if="$parent.curQues" class="m-b-20">
            <p class="total m-b-10">原试题（共1道题）</p>
            <div v-html="$parent.curQues.stemText"></div>
          </div>

          <div class="flex j-between a-center">
            <p v-if="$parent.curQues" class="total">更换试题（共{{ checked.length }}道题）</p>
            <p v-else class="total">已选试题（共{{ checkedLen }}道题）</p>
            <el-button type="text" @click="batchDelChecked">批量移除</el-button>
          </div>

          <el-input class="m-t-10 m-b-10" placeholder="请输入题干/知识点" prefix-icon="el-icon-search" v-model="checkedKeyword"
            clearable />

          <template v-if="checked.length">
            <div class="ques">
              <div class="line">
                <el-checkbox v-model="checkedAllCheck" @change="checkedAllCheckChange"></el-checkbox>
                <span class="serial">序号</span>
                <span class="stem">题干</span>
                <span class="kl">知识点</span>
              </div>

              <template v-for="(item, i) in checked">
                <div v-if="item.stemText.includes(checkedKeyword) || item.knowledgePointName.includes(checkedKeyword)"
                  :key="i" class="line j-between">
                  <div class="check-left">
                    <el-checkbox v-model="item.check"></el-checkbox>
                    <span class="serial">{{ i + 1 }}</span>
                    <el-tooltip effect="dark" :content="item.stemText" placement="top-start">
                      <p class="checked-stem">{{ item.stemText }}</p>
                    </el-tooltip>
                    <el-tooltip effect="dark" :content="item.knowledgePointName" placement="top-start">
                      <p class="kl checked-kl">{{ item.knowledgePointName }}</p>
                    </el-tooltip>
                  </div>
                  <i class="el-icon-delete action-icon" @click="delChecked(item)"></i>
                </div>
              </template>
            </div>
          </template>
          <div v-else class="empty">
            <img class="icon" src="@/assets/images/empty.svg" alt="">
            <p>暂无数据</p>
          </div>
        </div>
      </div>
      <div class="flex j-between p-l-20 p-r-20">
        <p>未找到试题，<a class="link" @click="toAddQues">去新增</a></p>
        <p>已选题数/目标题数：{{ checkedLen }}/{{ $parent.curType.questionNum }}
          <!-- &emsp;&emsp;<a class="link" @click="toEditQues">修改目标</a> -->
        </p>
      </div>

      <div class="btns">
        <el-button @click="selectQuesVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submit">确定</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import Setting from '@/setting'
import Util from '@/libs/util'
import _ from 'lodash'
import QuesConst from '@/const/ques'
export default {
  props: ['visible', 'questionType'],
  data () {
    return {
      selectQuesVisible: false,
      searchTimer: null,
      quesBankKeyword: '',
      curQuesBank: {},
      quesBankTypeVal: [],
      quesBankTypes: [],
      quesBanks: [],
      pageQuesBank: 1,
      pageSizeQuesBank: 10,
      totalQuesBank: 0,

      knowledgeKeyword: '',
      key: 1,
      knowledgeVal: [],
      knowledges: [],
      quesAllCheck: false,
      ques: [],
      checkedAllCheck: false,
      checked: [],
      curCheckQues: [],
      checkedKeyword: '',
      submiting: false,

      quesVisible: false,
      curRow: {},
      detailType: '',
    };
  },
  computed: {
    // 外面已经添加的试题+当前弹框已经勾选的试题
    checkedLen () {
      let len = this.curCheckQues.length + this.checked.length
      if (this.$parent.curQues) len -= 1
      return len
    },
    // 题型name
    questionTypeName () {
      return this.questionType ? QuesConst.questionTypes.find(e => e.id === this.questionType).name : ''
    },
    // 弹框标题
    diaTitle () {
      const { curQuesIndex, curQues } = this.$parent
      return curQues ?
        '更换试题' :
        typeof curQuesIndex === 'number' ?
          '添加试题' :
          this.questionType ? `批量添加${QuesConst.questionTypes.find(e => e.id === this.questionType).name}` : ''
    },
  },
  watch: {
    'quesBankKeyword': function (val) {
      clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(this.initQuesBank, 500)
    },
    'knowledgeKeyword': function (val) {
      clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(this.getQues, 500)
    },
    visible () {
      this.selectQuesVisible = this.visible
      this.visible && this.init()
    }
  },
  mounted () {

  },
  methods: {
    init () {
      // 清空所有状态和数据
      this.key++
      this.knowledges = []
      this.ques = []
      this.checked = []
      this.quesAllCheck = false
      this.checkedAllCheck = false
      this.quesBankKeyword = ''
      this.knowledgeKeyword = ''

      // 当前大题的小题列表
      const parent = this.$parent.curType
      this.curCheckQues = parent.examQuestions

      this.getQuesBankType()
      this.initQuesBank()
    },
    // 获取题库分类
    async getQuesBankType () {
      try {
        const { data } = await this.$post(this.api.getAllQuestionBankCategories, {
          createSource: 1,
          status: 1,
        })
        this.handleList(data)
        this.quesBankTypes = data
      } catch (e) { }
    },
    // 获取题库
    async getQuesBank () {
      try {
        const type = this.quesBankTypeVal
        const res = await this.$post(this.api.questionBankList, {
          status: 1,
          pageNum: 1,
          pageSize: 1000,
          questionCategoryId: type.length ? type[type.length - 1] : '',
          name: this.quesBankKeyword
        })
        const { records } = res.message
        this.quesBanks = records
        this.totalQuesBank = res.message.total
        records.length && this.questionBankClick(records[0])
      } catch (e) { }
    },
    initQuesBank () {
      this.curQuesBank = {}
      this.pageQuesBank = 1
      this.getQuesBank()
    },
    // 切换页码
    currentChangeQuesBank (val) {
      this.pageQuesBank = val
      this.getQuesBank()
    },
    // 题目多选回调
    questionBankClick (item) {
      this.curQuesBank = item
      this.knowledgeCheck = false
      this.getKnowledge()
      this.getQues()
      this.quesAllCheck = false
    },

    // 处理树形
    handleList (list) {
      list.map(e => {
        if (e.children && e.children.length) {
          this.handleList(e.children)
        } else {
          delete e.children
        }
      })
    },

    // 获取知识点
    async getKnowledge () {
      try {
        const { id } = this.curQuesBank
        if (id) {
          const { data } = await this.$post(this.api.TreeStructure, {
            createSource: 1,
            questionBankId: id,
            keyword: '',
          })
          this.handleList(data)
          this.knowledges = data
        }
      } catch (e) { }
    },
    // 获取试题
    async getQues () {
      const { id } = this.curQuesBank
      let k = this.knowledgeVal // 选中的知识点
      k = k.map(e => {
        return e[e.length - 1]
      })
      if (id) {
        const { list } = await this.$post(this.api.findAllByQuestionBank, {
          status: 1,
          questionBankIds: [id],
          knowledgePointIds: k,
          questionTypes: this.questionType ? [this.questionType] : [],
          keyword: this.knowledgeKeyword,
        })
        const data = list
        const { curCheckQues, checked } = this
        data.map(e => {
          const el = document.createElement('div')
          el.innerHTML = e.stem
          e.stemText = el.innerText
          const quesChecked = !!curCheckQues.find(n => n.questionVersionId === e.questionVersionId)
          e.disabled = quesChecked
          e.check = !!checked.find(n => n.questionVersionId === e.questionVersionId) || quesChecked
        })
        this.ques = data
      }
    },
    // 知识点勾选回调
    knowledgeCheck () {

    },
    // 题目全选回调
    quesAllCheckChange (val) {
      this.ques.map(e => {
        if (!e.disabled) {
          e.check = val
          this.quesChange(val, e)
        }
      })
    },
    // 题目多选回调
    quesChange (val, item) {
      const cur = this.checked.findIndex(e => e.questionVersionId === item.questionVersionId)
      // 选中
      if (val) {
        if (cur === -1) {
          const e = _.cloneDeep(item)
          e.check = false
          this.checked.push(e)
        }
      } else {
        // 取消选中
        cur >= 0 && this.checked.splice(cur, 1)
      }
    },
    // 已选试题全选回调
    checkedAllCheckChange (val) {
      this.checked.map(e => e.check = val)
    },
    // 批量移除已选试题
    async batchDelChecked (val) {
      try {
        const checked = this.checked.filter(e => e.check)
        if (checked.length) {
          await this.$confirm(`确认要移除吗？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            closeOnClickModal: false,
          })
          checked.map(e => {
            const cur = this.ques.find(n => n.questionVersionId === e.questionVersionId)
            if (cur) {
              cur.check = false
            }
          })
          this.quesAllCheck = false
          this.checkedAllCheck = false
          this.checked = this.checked.filter(e => !e.check)
        } else {
          Util.warningMsg('请选择数据')
        }
      } catch (e) { }
    },
    // 已选试题单个删除
    async delChecked (item) {
      try {
        await this.$confirm(`确认要移除吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false,
        })
        const cur = this.ques.find(e => e.questionVersionId === item.questionVersionId)
        if (cur) cur.check = false
        this.checked.splice(this.checked.findIndex(e => e.questionVersionId === item.questionVersionId), 1)
      } catch (e) { }
    },
    // 新增试题
    toAddQues () {
      this.quesVisible = true
      this.detailType = 5
    },
    // 修改目标
    toEditQues () {

    },
    // 编辑试题完成后把新的试题信息带过来
    updateQues (ques, id) {
      // ques.questionAnswerVersionsList = ques.questionAnswerVersions
      // delete ques.questionAnswerVersions
      // ques.questionVersionId = id
      // this.curType.examQuestions[this.curQuesIndex] = Object.assign(this.curRow, ques)
    },
    // 提交
    async submit () {
      if (this.submiting) return false
      const checked = _.cloneDeep(this.checked)
      if (!checked.length) return Util.warningMsg('请选择试题')

      const { curType, curQuesIndex, curQues } = this.$parent
      if (this.checkedLen > +curType.questionNum) return Util.warningMsg(`目标题数为${curType.questionNum}，已选题数不得大于目标题数`)

      try {
        checked.map((e, i) => {
          this.$set(e, 'check', false)
          this.$set(e, 'sort', i + 1)
          this.$set(e, 'score', '')
          this.$parent.handleFillScore(e)
          // this.$set(e, 'questionVersionId', e.questionVersionId)
        })

        if (curQues) {
          // curQues即是小题，有则说明是更换试题，需要把该小题去掉，再添加进选中的试题
          this.curCheckQues.splice(curQuesIndex, 1, ...checked)
        } else {
          // curQuesIndex为数字，则是小题里面的添加试题打开的弹框，则把选择的试题添加到该小题后面；否则直接添加到最后面
          typeof curQuesIndex === 'number' ?
            this.curCheckQues.splice(curQuesIndex + 1, 0, ...checked) :
            this.curCheckQues.push(...checked)
        }
        // 给题目重新排序
        this.curCheckQues.map((e, i) => {
          this.$set(e, 'serialNumber', i + 1)
        })

        this.$parent.calcDifficult()
        this.selectQuesVisible = false
        this.submiting = false
      } catch (e) {
        this.submiting = false
      }
    },
    // 弹框关闭回调
    closeDia () {
      this.$emit('update:visible', false)
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.ques-dia {
  .el-drawer__header {
    margin-bottom: 20px;
  }

  .wrap {
    display: flex;
    margin-bottom: 10px;
    border: 1px solid #eee;

    .filter {
      margin-bottom: 15px;

      li {
        display: flex;
        align-items: center;
      }

      label {
        margin-right: 10px;
        font-size: 14px;
        color: #333;
        white-space: nowrap;
      }
    }

    .item {
      width: 38%;
      padding: 15px;
      border-right: 1px solid #eee;
    }

    .total {
      font-size: 16px;
      color: #333;
    }

    .lines {
      height: calc(100vh - 358px);
      overflow: auto;
    }

    .line {
      display: flex;
      padding: 5px 0;
      color: #333;
    }

    .able-check {
      .line {
        cursor: pointer;

        &:hover {
          background-color: #f5f5f5;
        }

        &.active {
          background-color: #e5e5e5;
        }
      }
    }

    .serial {
      width: 32px;
      margin: 0 12px;
      text-align: center;
      white-space: nowrap;
    }

    .quesBank {
      width: calc(100% - 71px);
      @include ellipsis;
    }

    .stem {
      width: calc(100% - 210px);
      margin-right: 20px;
      @include ellipsis;
    }

    .kl {
      width: 120px;
      @include ellipsis;

      &.checked-kl {
        width: 90px;
        margin-right: 10px;
      }
    }

    .checked-stem {
      max-width: 165px;
      margin-right: 20px;
      @include ellipsis;
    }

    .check-left {
      display: inline-flex;
      align-items: center;
    }

    .action-icon {
      font-size: 14px;
    }
  }

  .link {
    color: $main-color;
    cursor: pointer;
  }
}
</style>