szhd-safety-web-new/src/views/task/list/components/addQuestion.vue

<template class="choose_wrap">
  <div>
    <!-- <div class="choose" @click="qsShow = true">试 题 录 入</div> -->
    <el-drawer
      title="添加题目"
      :visible.sync="qsShow"
      :modal="true"
      :show-close='false'
      size="99%"
    >
      <template v-slot:title>
        <div style='font-size: 20px;margin-bottom: 10px;display: flex;justify-content: space-between;'>
          <span>添加题目</span>
          <span><i @click="closeQs" class="el-icon-close"></i></span>
        </div>
        <div style="border-bottom: 1px #ccc solid; margin-bottom: 20px;text-align: left;">
          <el-button
            type="primary"
            class="from_btn"
            @click="addTopic('select')"
            >新增选择题</el-button
          >
          <el-button
            type="primary"
            class="from_btn"
            @click="addTopic('short')"
            >新增简答题</el-button
          >
        </div>
      </template>

      <div class="dialog_height" :style="{'height':dialog_height+'px'}">
        <div class="from_box" v-for="(item, index) in topicList" :key="index">
          <el-form
            :model="item.qsForm"
            ref="qsForm"
            label-width="100px"
            class="demo-dynamic"
          >
            <el-form-item
              prop="title"
              label="题目"
              :rules="[
                {
                  required: true,
                  message: '请输入题目',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                type="textarea"
                v-model="item.qsForm.title"
                style="width: 320px"
              ></el-input>
            </el-form-item>
            <template v-if="item.qsForm.type=='select'">
              <el-form-item
                v-for="(domain, index) in item.qsForm.domains"
                :label="sortList[index]"
                :key="domain.key"
                :prop="'domains.' + index + '.value'"
                :rules="{
                  required: true,
                  message: '选项不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input
                  v-model="domain.value"
                  style="width: 320px; margin-right: 10px"
                ></el-input
                ><el-button
                  @click.prevent="removeDomain1(domain, item)"
                  icon="el-icon-delete"
                ></el-button>
              </el-form-item>
              <el-form-item
                prop="answer"
                label="正确答案"
                :rules="[
                  {
                    required: true,
                    message: '请输入正确答案',
                    trigger: 'change',
                  },
                ]"
              >
                <el-select
                  v-model="item.qsForm.answer"
                  placeholder="请选择"
                  clearable
                  multiple

                  style="width: 320px"
                >
                  <el-option
                    v-for="i in item.qsForm.sortListfor"
                    :key="i"
                    :label="i"
                    :value="i"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              </template>
              <el-form-item>
                <el-button
                  v-if="item.qsForm.type=='select'"
                  type="primary"
                  @click="addDomain1(item)"
                  >新增选项</el-button>
                <el-button
                  type="danger"
                  @click="remove_dom(item)"
                  >删除题目</el-button
                >
              </el-form-item>

          </el-form>
        </div>
      </div>
      <div class="dialog-footer">
        <el-button @click="closeQs">取 消</el-button>
        <el-button type="primary" @click="submitForm('qsForm')"
          >提 交</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  //dialogType：区分考试和模拟
  props: ["dialogType"],
  data() {
    return {
      qsShow: false,
      dialog_height:0,
      //录入的题目等信息
      topicList: [
        {
          //唯一识别码，当前时间戳
          key: Date.now(),
          //题目信息
          qsForm: {
            //选项
            domains: [
              {
                id: "A",
                value: "",
              },
              {
                id: "B",
                value: "",
              },
              {
                id: "C",
                value: "",
              },
            ],
            //题目
            title: "",
            //正确答案
            answer: [],
            //默认下拉框选项
            sortListfor: ["A", "B", "C"],
            //类型
            type: 'select',
            type_name:''
          },
        },
      ],
      //每个选项的id
      uid: "",
      //每个选项的排序号
      sortList: ["A", "B", "C", "D", "E", "F", "G", "H"],
    };
  },
  created() {
    this.initHeight()
  },
  methods: {
    initHeight(){
      let clientHeight = document.documentElement.clientHeight;
      let titleHeight = 136
      let footerHeight = 60
      this.dialog_height =clientHeight-titleHeight - footerHeight - 30;
      console.log(clientHeight,this.dialog_height)
    },
    closeQs(){
      this.qsShow=false
      this.topicList=[
        {
          //唯一识别码，当前时间戳
          key: Date.now(),
          //题目信息
          qsForm: {
            //选项
            domains: [
              {
                id: "A",
                value: "",
              },
              {
                id: "B",
                value: "",
              },
              {
                id: "C",
                value: "",
              },
            ],
            //题目
            title: "",
            //正确答案
            answer: [],
            //默认下拉框选项
            sortListfor: ["A", "B", "C"],
            //类型
            type: 'select',
            type_name:''
          },
        },
      ]
    },
    //弹框内新增选项
    addDomain1(item) {
      //item：题目
      //先拿到题目的角标
      let index = this.topicList.indexOf(item);
      //保存一下题目选项的长度，用来下面判断用
      let listLength =
        this.topicList[index].qsForm.domains.length + 1;
      //判断：题目选项的长度超过6个了就不能继续添加了，并提示上限
      if (listLength > 6) {
        this.$message({
          message: "答题选项最多设置6条",
          type: "warning",
        });
        return;
      } else {
        //需要拿到对应的id添加到新创建的选项中，所以直接对题目选项筛选
        this.topicList[index].qsForm.domains.filter(
          (item, index) => {
            //判断：当前已有的每一项选项的id和我们提前设置的排序号数组按顺序对比是否一致，一致的不管，当按顺序比到最后一个的时候，我们用角标+1的方式，拿到后面的一个字母，用来当id
            if (item.id == this.sortList[index]) {
              this.uid = this.sortList[index + 1];
            }
          }
        );
        //添加选项时，同时往下拉框内添加选项，添加的是序列号数组的角标对应位置数据。
        this.topicList[index].qsForm.sortListfor.push(
          this.sortList[listLength - 1]
        );
        //按照id和value的格式把新的一个选项添加进选项数组内
        this.topicList[index].qsForm.domains.push({
          id: this.uid,
          value: "",
        });
      }
    },
    //两个参数，arr：题目数组，index：角标。传入两个参数用来在删除选项的时候把每个选项的id从新排列，避免混乱
    delOne(arr, index) {
      arr.splice(index, 1),
        arr.forEach((ele, key) => {
          ele.id = this.sortList[key];
        });
      return arr;
    },
    //弹框删除选项
    removeDomain1(i, item) {
      //i：选项数据
      //item：题目
      //先拿到传来的题目在数组中的角标
      let index = this.topicList.indexOf(item);
      let listLength =
        this.topicList[index].qsForm.domains.length - 1;
      if (listLength < 2) {
        this.$message({
          message: "答题选项最少需要设置2条",
          type: "warning",
        });
        return;
      } else {
        //然后利用角标在数组中对应的题目中找到这一条选项的角标
        let indexs =
          this.topicList[index].qsForm.domains.indexOf(i);
        //判断选项角标是否存在
        if (indexs !== -1) {
          //存在，就删除对应题目的对应一条选项数据
          let L = this.topicList[index].qsForm.domains;
          let v = this.delOne(L, indexs);
          console.log("新数组:", v);
          //并把下拉框选中的清空
          this.topicList[index].qsForm.answer = [];
          //并删除下拉框选项数据的最后一位
          this.topicList[index].qsForm.sortListfor.pop();
        }
      }
    },
    //弹框删除题目
    remove_dom(item) {
      //查找点击删除的这一项的角标,保存
      let index = this.topicList.indexOf(item);
      //判断有没有在题目数组内找到，-1代表没找到
      if (index !== -1) {
        //找到了就删除这一条题目
        this.topicList.splice(index, 1);
      }
    },
    //弹框增加题目
    addTopic(types) {
      //点击增加，按照格式新增一个对象
      if(types=='select'){
        this.topicList.push({
          key: Date.now(),
          qsForm: {
            domains: [
              {
                id: "A",
                value: "",
              },
              {
                id: "B",
                value: "",
              },
              {
                id: "C",
                value: "",
              },
            ],
            title: "",
            answer: [],
            sortListfor: ["A", "B", "C"],
            type:'select',
            type_name:''
          },
        });
      }else if(types=='short'){
        this.topicList.push({
          key: Date.now(),
          qsForm: {
            domains: [],
            title: "",
            answer: [],
            sortListfor: [],
            type:'short',
            type_name:''
          },
        });
      }

    },
    //提交按钮
    submitForm(formName) {
      //用来记录验证通过的题目数量
      let n = 0;
      //提交时，循环题目数组
      this.topicList.forEach((item, index) => {
        //formName：ref绑定的表单dom传参进去
        //循环表单内的每一项题目是否通过验证，验证规格写在了html标签上的rules就是
        this.$refs[formName][index].validate((valid) => {
          if (valid) {
            //通过验证的n+1,这里计数用来判断是不是所有题都通过验证了
            n++;
            //判断这个题目数组的长度和n一致，那么验证成功数和数组长度一致，也就是全部验证成功。
            if (n == this.topicList.length) {
              //全部验证通过执行方法：
              //把所有的题目遍历判断一下，当选择的答案大于一个的时候就把type改成多选题，反之单选
              this.topicList.forEach(i=>{
                if(i.qsForm.type=='select'){
                  i.qsForm.type_name=i.qsForm.answer.length>1?"多选题":"单选题"
                }else if(i.qsForm.type=='short'){
                  i.qsForm.type_name = '简答题'
                }
              })
              this.$emit('submitQs',this.topicList)
              this.qsShow = false
              console.log(this.topicList);
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });
    },
  },
};
</script>

<style scoped lang='scss'>
  ::v-deep .el-drawer__wrapper{
    padding:20px 0;
    padding-right:10px;
  }
  ::v-deep .el-drawer__header{
    display: block!important;
    margin-bottom:0
  }
.choose {
  width: 300px;
  height: 200px;
  margin: auto;
  margin-top: 180px;
  text-align: center;
  line-height: 200px;
  font-size: 38px;
  color: #fff;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  background-image: linear-gradient(#32cbc6, #2d94a7);
  margin-bottom: 25px;
  box-shadow: 0px 0px 15px 5px #97d9e1;
}
.choose:hover {
  background-image: linear-gradient(#0093e9, #2d94a7);
  box-shadow: 0px 0px 15px 5px #0093e9;
}
.from_box {
  border-bottom: 1px #ccc solid;
  margin-bottom: 20px;
}
.el-form-item{
  margin-bottom:10px;
}
.from_btn {
  margin-left: 10px;
  margin-bottom: 10px;
}
.dialog_height {
  /* height: 430px; */
  overflow: auto;
}
.dialog-footer{
      position: fixed;
      bottom: 35px;
      right: 20px;
}
</style>
<style >
.choose_wrap .el-dialog {
  border-radius: 20px;
}
</style>