antissoft / antissoft.dati.admin

  <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,index) in arr2" class="infinite-list-item">
                <label> {{index+1}}. [{{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">

                <el-input   v-model="TestPaper.TestPaperTitle"></el-input>

              </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>

                <span style="margin-right: 10px;">主观题：{{TestPaper.VoiceNumber}}</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,

            VoiceNumber: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('所选分类没有试题');

            }else{
              this.TestPaper.SingleNumber = list.filter(t=>t.subjectType == 1).length;
              this.TestPaper.MultipleNumber = list.filter(t=>t.subjectType == 2).length;
              this.TestPaper.SubjectiveNumber = list.filter(t=>t.subjectType == 3).length;
              this.TestPaper.VoiceNumber = list.filter(t=>t.subjectType == 4).length;

            }
          });
        },
        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("组卷成功！", "消息");

                    this.$router.push({
                      path: '/views/TestPaperList',
                      query: { 
                      }
                    })

                  } 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;
          }

          if (e.item._underlying_vm_.subjectType == 4) {
            this.TestPaper.VoiceNumber -= 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;
          }

          if (e.item._underlying_vm_.subjectType == 4) {
            this.TestPaper.VoiceNumber += 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;
                }

                if (rs.subjectType == 4) {
                  this.TestPaper.VoiceNumber += 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>