src/views/TestPaper/ManualTestPaper.vue

<template>
  <div class="app-container">
    <div id="id_test_video" style="width:100%; height:auto;"></div>
    <el-row :gutter="20">
      <el-col :span="6" :style="{'height':contentHeight+'px'}">
        <div class="grid-content bg-purple">
          <el-tabs v-model="activeTab" style="padding: 0 20px" :stretch="true">
            <el-tab-pane label="专业类" name="6"></el-tab-pane>
            <el-tab-pane label="测评类" name="1"></el-tab-pane>
          </el-tabs>
          <div style="padding:0 10px">
            <el-input size="small" placeholder="输入关键字搜索" v-model="parameter.keyWord"></el-input>
          </div>
          <div style="padding:10.5px">
            <el-button type="primary" @click="randomSubject" style="width:100%">随机抽题</el-button>
          </div>
          <draggable :options="{animation:380,filter:'.unmover'}" group="itxst" v-model="arr1" @end="end1"
            @add="RemoveHere" :move="onMove" class="infinite-list" :style="{'height':contentHeight-80+'px'}"
            infinite-scroll-disabled="disabled" v-infinite-scroll="load" style="overflow:auto">
            <li v-for="i in arr1" class="infinite-list-item" :key="i.id" v-if="!classarr.some(o=>o == i.id)">{{
              i.subject }}</li>
            <p v-if="loading" style="text-align: center;color: #cdcdcd;" class="unmover">加载中...</p>
            <p v-if="noMore" style="text-align: center;color: #cdcdcd;" class="unmover">没有更多了</p>
          </draggable>
        </div>
      </el-col>
      <el-col :span="10" :style="{'height':contentHeight+'px'}">
        <div class="grid-content bg-purple">
          <div class="areahead">
            <span v-show="!edit" style="font-weight: bold;">{{ TestPaper.TestPaperTitle }}</span>
            <el-input v-show="edit" style="width: 400px;" v-model="TestPaper.TestPaperTitle"></el-input>
            <i :class="{'el-icon-edit': !edit, 'el-icon-check': edit}" @click="edit = !edit"
              style="margin-left: 5px;cursor: pointer;"></i>
          </div>
          <draggable :options="{animation:380}" group="itxst" v-model="arr2" class="infinite-list" @end="end2"
            @add="ComeHere" :style="{'height':contentHeight-60+'px'}" style="overflow:auto;padding-top: 10px;">
            <li v-for="i in arr2" class="infinite-list-item">
              <label>[{{i.subjectName}}]{{ i.subject }}</label>
              <div v-for="item in JSON.parse(i.subjectContent)">
                <p class="option-p">{{item.option}}:{{item.optionContent}}</p>
              </div>
            </li>
            </li>
          </draggable>
        </div>
      </el-col>
      <el-col :span="8" :style="{'height':contentHeight+'px'}">
        <div class="grid-content bg-purple">
          <div class="areahead">组卷基本信息</div>
          <el-form ref="form" class="testPaper-manager" :rules="rules" :model="TestPaper" label-width="100px">
            <el-form-item label="试卷名称:" class="el-form-item-custom">
              {{TestPaper.TestPaperTitle}}
            </el-form-item>
            <el-form-item label="题目数量:" class="el-form-item-custom">
              {{arr2.length}}
            </el-form-item>
            <el-form-item label="题型数量:" class="el-form-item-custom">
              <span style="margin-right: 10px;">单选题：{{TestPaper.SingleNumber}}</span>
              <span style="margin-right: 10px;">多选题：{{TestPaper.MultipleNumber}}</span>
              <span style="margin-right: 10px;">主观题：{{TestPaper.SubjectiveNumber}}</span>
            </el-form-item>
            <el-form-item label="题目总分:" class="el-form-item-custom">
              {{TestPaper.TotalScore || ''}}
            </el-form-item>
            <el-form-item label="工种" prop="UserTypeOfWork" required class="el-form-item-custom"
              style="margin-bottom: 20px !important;width:100%;">
              <el-select v-model="TestPaper.UserTypeOfWork" placeholder="请选择工种" style="width:100%">
                <el-option v-for="item in usertypelist" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分类" class="el-form-item-custom" prop="QuestionClassId"  >
              <el-cascader class="testpaper-input" v-model="TestPaper.QuestionClassId"
                style="width:100%;margin-bottom: 20px;" :props="{emitPath:false}" :clearable=true
                :options="QuestionClass">
              </el-cascader>
            </el-form-item>
            <el-form-item label="有效时间" required>
              <el-form-item prop="date">
                <el-date-picker v-model="TestPaper.date" @change="changetimestartend" type="datetimerange" 
                  format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始时间" style="width:100%"
                  end-placeholder="结束时间">
                </el-date-picker>
              </el-form-item>
            </el-form-item>
            <el-form-item label="总时长控制" prop="AnswerTime">
              <el-input class="testpaper-input" type="number" placeholder="总时长控制(分钟)" v-model="TestPaper.AnswerTime">
              </el-input>
            </el-form-item>
            <el-form-item label="试卷原价:" prop="OriginalPrice" v-show="false">
              <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')"
                v-model="TestPaper.OriginalPrice" :precision="0">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="试卷价格:" prop="PresentPrice" v-show="false">
              <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')"
                v-model="TestPaper.PresentPrice">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="会员价:" prop="MembershipPrice" v-show="false">
              <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')"
                v-model="TestPaper.MembershipPrice">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="试卷简介:">
              <el-input class="testpaper-input" :rows="10" type="textarea" v-model="TestPaper.Describe">
              </el-input>
            </el-form-item>
            <el-button type="primary" style="float: right;" @click="SubmitTestPaper">保存
            </el-button>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="随机抽题" :visible.sync="dialogTableVisible">
      <ul class="random-list">
        <li v-for="(item,index) in randomSubjectList" :key="index">
          <span>试题分类：</span>
          <el-cascader :multiple="false" style="flex:1" v-model="item.QuestionClassId" :options="randomQuestionTypeList"
            clearable></el-cascader>
          <span style="margin-left:10px;">试题数量：</span>
          <el-input-number v-model="item.Count" :min="1" :max="100" label="描述文字" style="margin-left:10px;">
          </el-input-number>
          <i class="el-icon-remove-outline" @click="changeSubjectCount(-1,index)"
            style="margin-left:10px;color:#f56c6c;"></i>
          <i class="el-icon-circle-plus" @click="changeSubjectCount(1)" style="margin-left:10px;color:#67C23A;"></i>
        </li>
      </ul>
      <div slot="footer">
        <el-button @click="randomCancel">取消</el-button>
        <el-button type="primary" @click="randomSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
  .random-list {
    display: flex;
    flex-direction: column;
    li {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      [class^="el-icon"] {
        font-size: 24px;
        cursor: pointer;
      }
    }
  }
</style>
<script>
  import draggable from "vuedraggable";
  import { PostRandomGetQuestion, getQuestionList, getQuestionClassList } from "@/api/QuestionBank";
  import { GetQuestionClassByType } from "@/api/QuestionClass";
  import { EditTestPaper, GetToplevel } from "@/api/TestPaper";
  import { formatTime } from "@/utils/util";
  import {
    GetTypeSetting
  } from '@/api/user'
  export default {
    //注册draggable组件
    components: {
      draggable,
    },
    data() {
      return {
        randomSubjectList: [
          {
            QuestionClassId: "",
            Count: "",
          },
          {
            QuestionClassId: "",
            Count: "",
          },
        ],
        randomQuestionTypeList: [],
        dynamicValidateForm: {
          domains: [
            {
              value: "",
            },
          ],
          email: "",
        },
        usertypelist: [], //工种
        dialogTableVisible: false,
        loadingType: false,
        activeTab: "6",
        parameter: {
          pageIndex: 0,
          pageSize: 20,
          sort: "id",
          sortOrder: 1,
          keyWord: "",
          QuestionClassId: 6,
          status: 1,
        },
        contentHeight: 0,
        count: 0,
        edit: false,
        arr1: [],
        arr2: [],
        classarr: [],
        moveId: -1,
        TestPaper: {
          TestPaperTitle: "未命名试卷标题",
          TestPaperClassId: 0,
          TotalScore: 0,
          Describe: "",
          SingleNumber: 0,
          MultipleNumber: 0,
          SubjectiveNumber: 0,
          OriginalPrice: "0",
          PresentPrice: "0",
          MembershipPrice: "0",
          QuestionBankIds: [],
        },
        loading: false,
        rules: {
          OriginalPrice: [
            {
              required: true,
              message: "不能为空",
            },
          ],
          PresentPrice: [
            {
              required: true,
              message: "不能为空",
            },
          ],
          UserTypeOfWork: [
            {
              required: true,
              message: "请选择工种",
            },
          ], QuestionClassId: [
            {
              required: true,
              message: "请选择分类", 
            },
          ],date: [
            {
              required: true,
              message: "请选择时间段", 
            },
          ],
        },
        QuestionClass: [],
        treeData: [
          {
            value: 0,
            label: "全部",
          },
        ],
        timeout: 0,
      };
    },
    watch: {
      activeTab() {
        console.log("activeTab watch");
        this.search();
      },
      "parameter.keyWord": {
        handler() {
          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
            this.search();
          }, 200);
        },
      },
    },
    computed: {
      noMore() {
        return this.arr1.length >= this.count;
      },
      disabled() {
        return this.loading || this.noMore;
      },
    },
    created() {
      this.getQuestionClassListHeadler();
      this.getQuestionClassListHeadler2();
      GetTypeSetting({}).then(res => {
        if (res.data) {
          this.usertypelist = res.data || [];
        }
      });
    },
    mounted() {
      //计算页面内容区域的高度
      this.contentHeight = window.innerHeight - 90;
      //this.GetList();
    },
    methods: {
      getSubTree(id, list) {
        let result = [];
        result = list.filter((t) => t.ParentId == id);
        if (result.length) {
          result = result.map((item) => {
            item.value = item.id;
            item.label = item.ClassificationName;
            item.children = this.getSubTree(item.id, list);
            if (!item.children || !item.children.length) {
              delete item.children;
            }
            return item;
          });
        }
        return result;
      },
      getQuestionClassListHeadler2() {
        let _this = this;
        getQuestionClassList().then((res) => {
          let alllist = res.data.data;
          let list = alllist.filter(t => !t.ParentId);
          list = list.map((t) => {
            t.value = t.id;
            t.label = t.ClassificationName;
            t.children = this.getSubTree(t.id, alllist);
            if (!t.children || !t.children.length) {
              delete t.children;
            }
            return t;
          });
          this.randomQuestionTypeList = list;
        });
      },
      randomCancel() {
        this.dialogTableVisible = false;
      },
      randomSubmit() {
        var list = JSON.parse(JSON.stringify(this.randomSubjectList));
        if (list.findIndex((t) => !t.QuestionClassId || !t.QuestionClassId.length || !t.Count) > -1) {
          this.$message.warning("参数不完整");
          return;
        }
        list = list.map(t => {
          t.QuestionClassId = t.QuestionClassId.pop();
          return t;
        });
        PostRandomGetQuestion(list).then((res) => {
          let list = res.data.data;
          this.arr2 = list;
          this.dialogTableVisible = false;
          if (!list.length) {
            this.$message.warning('所选分类没有试题');
          }
        });
      },
      changeSubjectCount(type, index) {
        if (type > 0) {
          this.randomSubjectList.push({
            QuestionClassId: "",
            Count: "",
          });
        } else {
          this.randomSubjectList.splice(index, 1);
        }
      },
      randomSubject() {
        this.dialogTableVisible = true;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert("submit!");
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item);
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1);
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: "",
          key: Date.now(),
        });
      },
      changetimestartend(val, aa) {
        this.TestPaper.EffectiveStartTime = formatTime(val[0]);
        this.TestPaper.EffectiveEndTime = formatTime(val[1]);
      },
      search() {
        this.parameter.pageIndex = 1;
        this.parameter.QuestionClassId = Number(this.activeTab);
        this.GetList();
      },
      SubmitTestPaper() {
        this.$refs['form'].validate((valid) => {
          if (valid) { 
            this.TestPaper.QuestionBankIds = this.arr2.map((u) => u.id);
            var d = this.TestPaper;
            if (this.arr2.length > 0) {
              EditTestPaper(this.TestPaper).then((res) => {
                if (res.data.code == 200) {
                  this.$confirm("组卷成功！", "消息");
                } else {
                  this.$confirm("组卷失败！", "消息");
                }
              });
            } else {
              this.$confirm("试题没有题目！", "消息");
            }
          } else {
            return false;
          }
        });
      },
      load() {
        this.loading = true;
        this.parameter.pageIndex++;
        this.GetList();
        this.loading = false;
      },
      GetList() {
        if (this.parameter.QuestionClassId == "1") {
          if (!this.loadingType)
            GetQuestionClassByType({ ClassType: 2 }).then((res) => {
              var classarr = res.data.data || [];
              this.arr1 = classarr.map((rs) => {
                rs.subject = rs.subjectName = rs.ClassificationName;
                rs.type = "wd";
                rs.subjectContent = "[]";
                return rs;
              });
              this.loadingType = true;
            });
        } else {
          getQuestionList(this.parameter).then((res) => {
            if (this.parameter.pageIndex == 1) {
              this.arr1 = [];
            }
            res.data.data.rows.forEach((item, i) => {
              this.arr1.push(item);
            });
            this.count = res.data.data.total;
            this.$forceUpdate();
          });
        }
      },
      end1(e) {
        var that = this;
        if (that.arr1.length < 10) {
          this.load();
        }
        var items = this.arr2.filter(function (m) {
          return m.id == that.moveId;
        });
        //如果左边
        if (items.length < 2) return;
        this.arr2.splice(e.newDraggableIndex, 1);
        //	SingleNumber:0,
        // MultipleNumber:0,
        // SubjectiveNumber:0,
      },
      //从右边移除到左边
      RemoveHere(e) {
        if (e.item._underlying_vm_.subjectType == 1) {
          this.TestPaper.SingleNumber -= 1;
        }
        if (e.item._underlying_vm_.subjectType == 2) {
          this.TestPaper.MultipleNumber -= 1;
        }
        if (e.item._underlying_vm_.subjectType == 3) {
          this.TestPaper.SubjectiveNumber -= 1;
        }
        this.TestPaper.TotalScore -= e.item._underlying_vm_.fraction;
        this.TestPaper.QuestionBankIds = this.arr2.map((u) => u.id);
      },
      //从左边添加到右边
      ComeHere(e) {
        var d = e.item._underlying_vm_;
        if (e.item._underlying_vm_.subjectType == 1) {
          this.TestPaper.SingleNumber += 1;
        }
        if (e.item._underlying_vm_.subjectType == 2) {
          this.TestPaper.MultipleNumber += 1;
        }
        if (e.item._underlying_vm_.subjectType == 3) {
          this.TestPaper.SubjectiveNumber += 1;
        }
        this.TestPaper.TotalScore += e.item._underlying_vm_.fraction;
        this.TestPaper.QuestionBankIds = this.arr2.map((u) => u.id);
        if (d.type == "wd") {
          getQuestionList({
            QuestionClassId: d.id,
            PageIndex: 1,
            PageSize: 1000,
          }).then((res) => {
            var data = res.data.data.rows || [];
            data = data.filter(o => !this.arr2.find(d => d.id == o.id));
            this.arr2 = this.arr2.filter((o) => o.type != "wd");
            // this.arr1.splice(this.arr1.findIndex(o=>o.id == d.id),1)
            this.classarr.push(d.id);
            // var  test = this.arr2;
            this.arr2.push(...data);
            data.forEach((rs) => {
              if (rs.subjectType == 1) {
                this.TestPaper.SingleNumber += 1;
              }
              if (rs.subjectType == 2) {
                this.TestPaper.MultipleNumber += 1;
              }
              if (rs.subjectType == 3) {
                this.TestPaper.SubjectiveNumber += 1;
              }
            });
          });
        }
      },
      //右边往左边拖动时的事件
      end2(e) {
        var that = this;
        var items = this.arr1.filter(function (m) {
          return m.id == that.moveId;
        });
        //如果左边
        if (items.length < 2) return;
        this.arr1.splice(e.newDraggableIndex, 1);
      },
      //move回调方法
      onMove(e, originalEvent) {
        //this.moveId = e.relatedContext.element.id;
        return true;
      },
      getQuestionClassListHeadler() {
        let _this = this;
        GetToplevel().then((res) => {
          var gettree = function (titem) {
            titem.children = [];
            let childrenList = res.data.data.filter(
              (u) => u.ParentId == titem.value
            );
            if (childrenList.length == 0) titem.children = undefined;
            res.data.data
              .filter((u) => u.ParentId == titem.value)
              .forEach((item, i) => {
                var model = {
                  value: item.id,
                  label: item.ClassTitle,
                };
                gettree(model);
                titem.children.push(model);
              });
          };
          res.data.data
            .filter((u) => u.ParentId == 0)
            .forEach((item, i) => {
              var model = {
                value: item.id,
                label: item.ClassTitle,
              };
              gettree(model);
              _this.QuestionClass.push(model);
              _this.treeData.push(model);
            });
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .el-row {
    /* margin-bottom: 20px; */
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #efefef;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    height: 100%;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .infinite-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
    &::-webkit-scrollbar {
      width: 6px;
    }
    //滚动条小方块
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: #304156;
    }
    //滚动条轨道
    &::-webkit-scrollbar-track {
      // border-radius: 10px;
      height: 100px;
      background: #cdcdcd;
    }
    .infinite-list-item {
      padding: 10px;
      min-height: 60px;
      width: 95%;
      margin: auto;
      background-color: #fff;
      margin-bottom: 10px;
      border-radius: 5px;
      box-shadow: 0 0 5px #cdcdcd;
      &:first-child {
        margin-top: 10px;
      }
    }
  }
  .option-p {
    line-height: 15px;
  }
  .areahead {
    text-align: center;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #cdcdcd;
  }
  .testPaper-manager {
    margin: 10px 20px 10px 10px;
  }
  .testPaper-manager .el-form-item {
    margin-bottom: 20px;
  }
  .el-form-item-custom {
    margin-bottom: 0px !important;
  }
  .testpaper-input {
    //max-width: 400px;
  }
</style>