src/views/TestPaper/ManualTestPaper.vue

<template>
  <div class="app-container">
    <div id="id_test_video" style="width:100%; height:auto;"></div>
  <div style="width: 100%;text-align: right;background: #efefef;height: 60px;vertical-align: middle;line-height: 60px;padding-right: 10px;">
 
    <el-button style="margin-top: 12px;" @click="next" v-if="active==1">下一步</el-button>
    <el-button style="margin-top: 12px;z-index:888888888" @click="next" v-if="active==2">编辑基本信息</el-button>
    <el-button type="primary" style=""  v-if="active==2" @click="SubmitTestPaper">保存
    </el-button>
  </div>
    <el-row :gutter="20">
      <el-steps :active="active" finish-status="success" simple style="margin:0px 10px">
        <el-step title="基本信息"></el-step>
        <el-step title="组卷"></el-step>
      </el-steps>
      <el-col :span="8" :style="{'height':contentHeight+'px'}" class="jinyongtop">
        <div class="jinyong" v-if="active!=1">
        </div>
        <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="试卷名称:" prop="TestPaperTitle" required 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">
            </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="级别" prop="FLevelCount" class="el-form-item-custom"
              style="margin-bottom: 20px !important;width:100%;">
              <el-select v-model="TestPaper.FLevelCount" placeholder="请选择级别" @change="changelevel" style="width:100%">
                <el-option v-for="item in levellist" :label="item.title" :value="item.f_count"></el-option>
              </el-select>
            </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-form>
        </div>
      </el-col>
      <el-col :span="6" :style="{'height':contentHeight+'px'}" class="jinyongtop">
        <div class="jinyong" v-if="active==1">
        </div>
        <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'}" class="jinyongtop">
        <div class="jinyong" v-if="active==1">
        </div>
        <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-row>
    <el-dialog title="随机抽题" :visible.sync="dialogTableVisible" style="margin-left:30%;">
      <ul class="random-list">
        <li v-for="(item,index) in randomSubjectList" :key="index">
          <span>试题分类：</span>
          <el-cascader :multiple="false" style="flex:1" @change="(a)=>{ changetype(a,item)}"
            v-model="item.QuestionClassId" :options="randomQuestionTypeList" clearable>
            <template slot-scope="{ node, data }">
              <span>{{ data.label }}</span>
              <span v-if="data.subjectCount"> ({{ data.subjectCount || '0' }}) </span>
            </template>
          </el-cascader>
          <span style="margin-left:10px;">试题数量：{{item.maxcount}}</span>
          <el-input-number v-model="item.Count" :min="1" :max="item.maxcount" 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;
      }
    }
  }
  .jinyongtop {
    position: relative;
  }
  .jinyong {
    width: 100%;
    position: absolute;
    width: 100%;
    top: 0px;
    left: opx;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 8888;
    opacity: 0.1;
    background:black;
  }
</style>
<script>
  import draggable from "vuedraggable";
  import { PostRandomGetQuestion, getQuestionList, getQuestionClassList } from "@/api/QuestionBank";
  import { GetpaperLevelList } from "@/api/paperLevel";
  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 {
        active: 1,
        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: [],
          FLevelCount: null
        },
        loading: false,
        rules: {
          OriginalPrice: [
            {
              required: true,
              message: "不能为空",
            },
          ],
          PresentPrice: [
            {
              required: true,
              message: "不能为空",
            },
          ],
          UserTypeOfWork: [
            {
              required: true,
              message: "请选择工种",
            },
          ], QuestionClassId: [
            {
              required: true,
              message: "请选择分类",
            },
          ]
          , FLevelCount: [
            {
              required: true,
              message: "请选择级别",
            },
          ]
          , date: [
            {
              required: true,
              message: "请选择时间段",
            },
          ],
          TestPaperTitle: [
            {
              required: true,
              message: "请填写试卷名称",
            }
          ],
          AnswerTime: [
            {
              required: true,
              message: "请填写试总时长控制",
            },
          ],
        },
        QuestionClass: [],
        treeData: [
          {
            value: 0,
            label: "全部",
          },
        ],
        timeout: 0,
        typelist: [],
        levellist: [] //等级
      };
    },
    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 || [];
        }
      });
      GetpaperLevelList({ pageSize: 1000, sortOrder: 'asc' }).then(res => {
        if (res.data) {
          this.levellist = res.data.data || [];
        }
      });
    },
    mounted() {
      //计算页面内容区域的高度
      this.contentHeight = window.innerHeight - 90;
      //this.GetList();
    },
    methods: {
      next() {
        var _this = this;
        console.log(this.active);
        if(this.active == 1)
        {
          _this.$refs['form'].validate((valid) => {
            if(valid){
               this.active = 2;
            }     
          });
        } 
        else{
          if (this.active++ >=2) this.active = 1;
        }
    
      },
      changetype(a, item) {
        var type = this.typelist.find(o => o.id == item.QuestionClassId[item.QuestionClassId.length - 1]);
        if (type) {
          item.maxcount = type.subjectCount || 0;
          if (item.Count > item.maxcount) item.Count = item.maxcount;
        }
      },
      changelevel(v) {
        var type = this.levellist.find(o => o.f_count == v);
        if (type) {
          this.TestPaper.FLevelTitle = type.title || '';
        }
      },
      getmaxid(item) {
        var type = this.randomQuestionTypeList.find(o => o.id == item.QuestionClassId);
        if (type) return type.subjectCount || 0;
        else return 0;
      },
      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;
          this.typelist = alllist;
          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 (!this.TestPaper.TestPaperTitle) {
            this.$notify({
              title: '试卷标题必填！',
              // message: res.data.message,
              type: 'warning'
            });
            return;
          }
          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.$notify({
                    title: '组卷成功！',
                    // message: res.data.message,
                    type: 'success'
                  });
                  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.subjectCount || 0) + ')';
                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: this.TestPaper.FLevelCount || 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>