safetyEducationExamination/src/views/safetyEducationExaminationNew/examManagement/testPaperManagement/drawerItem.vue

<!-- 固定选题 Drawer 内容 -->
<template>
  <div class="drawerItem-container">
    <div class="left-max-big-box">
      <div class="left-title-p">{{titleName}}</div>
      <div class="page-form-title-box">
        <el-form :model="leftQueryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;">
          <el-form-item label="" prop="deptId">
            <el-cascader
              style="width: 180px"
              v-model="leftQueryParams.deptId"
              :options="optionListA"
              :props="{
                    emitPath:false,
                    checkStrictly: true,
                    value: 'deptId',
                    label: 'deptName',
                    children: 'child',
                  }"
              :show-all-levels="false"
              filterable
              placeholder="来源"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="" prop="questionType">
            <el-select v-model="leftQueryParams.questionType" placeholder="题型" style="width: 140px">
              <el-option
                v-for="dict in optionListB"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="difficulty">
            <el-select v-model="leftQueryParams.difficulty" placeholder="难度" style="width: 140px">
              <el-option
                v-for="dict in optionListC"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="questionContent">
            <el-input
              maxLength="30"
              v-model="leftQueryParams.questionContent"
              placeholder="搜索试题"
              style="width: 140px"
            />
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="leftHandleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="leftResetQuery">重置</p>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" border :data="leftDataList"
                  ref="leftMultipleTable" :row-key="leftGetRowKey" @selection-change="leftHandleSelectionChange">
          <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
          <el-table-column label="题干" prop="questionContent"  show-overflow-tooltip>
            <template slot-scope="scope">
              <span style="color:#0183fa;cursor: pointer;" @click="tableButton(2,scope.row)">{{ cleanRichText(scope.row.questionContent) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="题型" prop="questionType" width="140" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.questionType == 1?'单选题':(scope.row.questionType == 2?'多选题':(scope.row.questionType == 3?'判断题':'')) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="难度" prop="content" width="140" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.difficulty == 1?'简单':(scope.row.difficulty == 2?'一般':(scope.row.difficulty == 3?'较难':(scope.row.difficulty == 4?'极难':''))) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="leftTotal>0"
                    :total="leftTotal"
                    :page.sync="leftQueryParams.page"
                    :limit.sync="leftQueryParams.pageSize"
                    @pagination="leftGetList"
        />
      </div>
    </div>
    <div class="center-max-big-box">
      <p></p>
      <p class="el-icon-arrow-right" @click="addButton()"></p>
      <p class="el-icon-arrow-left" @click="delButton()"></p>
      <p></p>
    </div>
    <div class="right-max-big-box">
      <div class="right-title-box">
        <p>总题目数：{{maxNum}}</p>
        <p>总分：{{maxScore}}</p>
        <!--<p>还需设置 {{gapScore}} 分的题目</p>-->
      </div>
      <div class="page-form-title-box">
        <el-form :model="rightQueryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;">
          <el-form-item label="" prop="deptId">
            <el-cascader
              style="width: 180px"
              v-model="rightQueryParams.deptId"
              :options="optionListA"
              :props="{
                    emitPath:false,
                    checkStrictly: true,
                    value: 'deptId',
                    label: 'deptName',
                    children: 'child',
                  }"
              :show-all-levels="false"
              filterable
              placeholder="来源"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="" prop="questionType">
            <el-select v-model="rightQueryParams.questionType" placeholder="题型" style="width: 140px">
              <el-option
                v-for="dict in optionListB"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="difficulty">
            <el-select v-model="rightQueryParams.difficulty" placeholder="难度" style="width: 140px">
              <el-option
                v-for="dict in optionListC"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="questionContent">
            <el-input
              maxLength="30"
              v-model="rightQueryParams.questionContent"
              placeholder="搜索试题"
              style="width: 140px"
            />
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="rightHandleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="rightResetQuery">重置</p>
        </el-form>
      </div>
      <div class="page-content-box">
        <el-table class="table-box" border :data="rightDataList"
                  ref="rightMultipleTable" :row-key="rightGetRowKey" @selection-change="rightHandleSelectionChange">
          <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
          <el-table-column label="题干" prop="questionContent"  show-overflow-tooltip>
            <template slot-scope="scope">
              <span style="color:#0183fa;cursor: pointer;" @click="tableButton(2,scope.row)">{{ cleanRichText(scope.row.questionContent) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="题型" prop="questionType" width="140" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.questionType == 1?'单选题':(scope.row.questionType == 2?'多选题':(scope.row.questionType == 3?'判断题':'')) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="难度" prop="content" width="140" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.difficulty == 1?'简单':(scope.row.difficulty == 2?'一般':(scope.row.difficulty == 3?'较难':(scope.row.difficulty == 4?'极难':''))) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="rightTotal>0"
                    :total="rightTotal"
                    :page.sync="rightQueryParams.page"
                    :limit.sync="rightQueryParams.pageSize"
                    @pagination="rightGetList"
        />
      </div>
    </div>
    <div class="button-position-box">
      <p class="button-1" @click="outButton()">返回</p>
      <p class="button-2" @click="resetButton()">重置</p>
      <p class="button-3" @click="saveButton()">保存</p>
    </div>
  </div>
</template>

<script>
  import {
    systemDeptCurrentDept,examElQuestionBankList,
  } from "@/api/safetyEducationExaminationNew/index";
  export default {
    name: 'drawerItem',
    props: {
      drawerPropsData:{},
    },
    data() {
      return {
        titleName:'',
        knowledgePointId:'',
        maxNum:0,
        maxScore:0,
        questionScore:0,
        checkIndex:null,
        // gapScore:0,
        optionListA:[],
        optionListB:[{value:1,label:'单选'},{value:2,label:'多选'},{value:3,label:'判断'}],
        optionListC:[{value:1,label:'简单'},{value:2,label:'一般'},{value:3,label:'较难'},{value:4,label:'极难'}],
        leftQueryParams:{
          page:1,
          pageSize:20,
          questionContent:'',
          difficulty:null,
          questionType:null,
          deptId:null,
        },
        leftDataList:[],
        leftTotal:0,
        rightQueryParams:{
          page:1,
          pageSize:20,
          questionContent:'',
          difficulty:null,
          questionType:null,
          deptId:null,
        },
        rightDataList:[],
        rightTotal:0,
        //过滤/显示的题目ids
        questionIds:[],
        leftMultipleSelection:[],
        rightMultipleSelection:[],
      }
    },
    mounted() {
      this.$set(this,'titleName',this.drawerPropsData.name);
      this.$set(this,'knowledgePointId',this.drawerPropsData.knowledgePointId);
      this.$set(this,'questionScore',this.drawerPropsData.questionScore);
      this.$set(this,'checkIndex',this.drawerPropsData.index);
      this.$set(this,'questionIds',this.drawerPropsData.questionIds?this.drawerPropsData.questionIds:[]);
      this.$set(this,'maxScore',this.accMul(this.drawerPropsData.questionScore,this.drawerPropsData.questionIds.length));
      this.leftGetList()
      this.rightGetList()
      this.systemDeptCurrentDept()
    },
    methods: {
      addButton(){
        let self = this;
        if(!self.leftMultipleSelection[0]){
          this.msgError('请勾选左侧题目')
          return
        }
        if(self.leftMultipleSelection.length + this.questionIds.length > 1000){
          this.msgError('最多添加1000道题目')
          return
        }
        let list = [];
        for(let i=0;i<self.leftMultipleSelection.length;i++){
          list.push(self.leftMultipleSelection[i].id)
        }
        this.$set(this,'questionIds',JSON.parse(JSON.stringify([...this.questionIds,...list])));
        this.$set(this,'leftMultipleSelection',[]);
        this.$set(this,'rightMultipleSelection',[]);
        this.$refs.leftMultipleTable.clearSelection();
        this.$refs.rightMultipleTable.clearSelection();
        this.leftHandleQuery();
        this.rightHandleQuery();
      },
      delButton(){
        let self = this;
        if(!self.rightMultipleSelection[0]){
          this.msgError('请勾选右侧题目')
          return
        }
        let list = [];
        for(let i=0;i<self.rightMultipleSelection.length;i++){
          list.push(self.rightMultipleSelection[i].id)
        }
        this.$set(this,'questionIds',JSON.parse(JSON.stringify(this.questionIds.filter(item => !list.includes(item)))));
        this.$set(this,'leftMultipleSelection',[]);
        this.$set(this,'rightMultipleSelection',[]);
        this.$refs.leftMultipleTable.clearSelection();
        this.$refs.rightMultipleTable.clearSelection();
        this.leftHandleQuery();
        this.rightHandleQuery();
      },
      //查询按钮
      leftHandleQuery(){
        this.$set(this.leftQueryParams,'page',1);
        this.leftGetList();
      },
      //重置按钮
      leftResetQuery(){
        this.$set(this,'leftQueryParams',{
          page:1,
          pageSize:20,
          questionContent:'',
          difficulty:null,
          questionType:null,
          deptId:null,
        });
        this.leftGetList();
      },
      leftGetList(){
        let obj = JSON.parse(JSON.stringify(this.leftQueryParams))
        obj.knowledgePointId = this.knowledgePointId;
        obj.excludeQuestionIds = this.questionIds;
        examElQuestionBankList(obj).then(response => {
          this.$set(this,'leftDataList',response.data.records);
          this.$set(this,'leftTotal',response.data.total);
        });
      },
      leftGetRowKey(row) {
        return row.id;
      },
      leftHandleSelectionChange(val) {
        this.leftMultipleSelection = val;
      },
      //查询按钮
      rightHandleQuery(){
        this.$set(this.rightQueryParams,'page',1);
        this.rightGetList();
      },
      //重置按钮
      rightResetQuery(){
        this.$set(this,'rightQueryParams',{
          page:1,
          pageSize:20,
          questionContent:'',
          difficulty:null,
          questionType:null,
          deptId:null,
        });
        this.rightGetList();
      },
      rightGetList(){
        if(!this.questionIds[0]){
          this.$set(this,'rightDataList',[]);
          this.$set(this,'rightTotal',0);
          this.$set(this,'maxScore',0);
          return
        }
        let obj = JSON.parse(JSON.stringify(this.rightQueryParams))
        obj.knowledgePointId = this.knowledgePointId;
        obj.includeQuestionIds = this.questionIds;
        examElQuestionBankList(obj).then(response => {
          this.$set(this,'rightDataList',response.data.records);
          this.$set(this,'rightTotal',response.data.total);
          this.$set(this,'maxNum',response.data.total);
          console.log('this.drawerPropsData.questionScore',this.drawerPropsData.questionScore)
          console.log('response.data.total',response.data.total)
          this.$set(this,'maxScore',this.accMul(this.drawerPropsData.questionScore,response.data.total));
        });
      },
      rightGetRowKey(row) {
        return row.id;
      },
      rightHandleSelectionChange(val) {
        this.rightMultipleSelection = val;
      },
      //学院列表
      systemDeptCurrentDept(){
        systemDeptCurrentDept({}).then(response => {
          const list = response.data || [];
          this.formatTreeData(list);
          this.$set(this,'optionListA',list);
        });
      },
      //清洗富文本
      cleanRichText(htmlStr, maxLength = 50) {
        if (!htmlStr) return '';
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = htmlStr;
        let text = tempDiv.textContent || tempDiv.innerText || '';
        text = text.replace(/\s+/g, ' ').trim();
        if (maxLength && text.length > maxLength) {
          return text.substring(0, maxLength) + '...';
        }
        return text;
      },
      //返回
      outButton(){
        this.$parent.$parent.drawerReturnButton();
      },
      //重置
      resetButton(){

      },
      //保存
      saveButton(){
        if(!this.questionIds[0]){
          this.msgError('请选择题目')
          return
        }
        let obj = {
          index:this.checkIndex,
          questionIds:this.questionIds
        }
        this.$parent.$parent.drawerConfirmButton(JSON.parse(JSON.stringify(obj)))
      },
      //乘法
      accMul(arg1,arg2){
        var m=0,s1=arg1.toString(),s2=arg2.toString();
        try{m+=s1.split(".")[1].length}catch(e){}
        try{m+=s2.split(".")[1].length}catch(e){}
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
      },
    },
  }
</script>

<style scoped lang="scss">
  .drawerItem-container {
    flex:1;
    display: flex;
    overflow: hidden;
    .left-max-big-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-right:1px solid #dedede;
      .left-title-p{
        height:50px;
        border-bottom:1px solid #dedede;
        line-height:50px;
        padding: 0 20px;
        color:#0183fa;
        font-size:16px;
      }
    }
    .center-max-big-box{
      width:60px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      p:nth-child(1){
        flex: 1;
      }
      p:nth-child(2){
        width:40px;
        height:40px;
        line-height:40px;
        text-align: center;
        background-color: #0183fa;
        color:#fff;
        border-radius:50%;
        margin:0 0 0 10px;
        cursor: pointer;
      }
      p:nth-child(3){
        width:40px;
        height:40px;
        line-height:40px;
        text-align: center;
        background-color: #0183fa;
        color:#fff;
        border-radius:50%;
        margin:40px 0 0 10px;
        cursor: pointer;
      }
      p:nth-child(4){
        flex: 1;
      }
    }
    .right-max-big-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-left:1px solid #dedede;
      .right-title-box{
        display: flex;
        height:50px;
        border-bottom:1px solid #dedede;
        line-height:50px;
        padding: 0 20px;
        p{
          margin-right:40px;
          color:#0183fa;
          font-size:14px;
          font-weight:700;
        }
      }
    }
    .button-position-box{
      position: absolute;
      top:0;
      right:10px;
      display: flex;
      .button-1{
        border:1px solid #999;
        color:#999;
        font-size:14px;
        text-align: center;
        line-height:40px;
        height:40px;
        width:80px;
        border-radius:4px;
        margin:10px 10px 0 0;
        cursor: pointer;
      }
      .button-2{
        border:1px solid #999;
        background-color: #999;
        color:#fff;
        font-size:14px;
        text-align: center;
        line-height:40px;
        height:40px;
        width:80px;
        border-radius:4px;
        margin:10px 10px 0 0;
        cursor: pointer;
      }
      .button-3{
        border:1px solid #0183fa;
        background-color: #0183fa;
        color:#fff;
        font-size:14px;
        text-align: center;
        line-height:40px;
        height:40px;
        width:80px;
        border-radius:4px;
        margin:10px 0 0 0;
        cursor: pointer;
      }
    }
  }
</style>