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="分类" class="el-form-item-custom">
              <el-cascader class="testpaper-input" v-model="TestPaper.QuestionClassId"
                style="width:400px;margin-bottom: 20px;" :props="{emitPath:false}" :clearable=true
                :options="QuestionClass">
              </el-cascader>
            </el-form-item>
            <el-form-item label="有效时间" required>
              <el-form-item prop="date1">
                <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
          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";
export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      randomSubjectList: [
        {
          QuestionClassId: "",
          Count: "",
        },
        {
          QuestionClassId: "",
          Count: "",
        },
      ],
      randomQuestionTypeList: [],
      dynamicValidateForm: {
        domains: [
          {
            value: "",
          },
        ],
        email: "",
      },
      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: "不能为空",
          },
        ],
        MembershipPrice: [
          {
            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();
  },
  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() {
      let list = 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.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("试题没有题目！", "消息");
      }
    },
    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 || [];
          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>