pbl-teacher-table/src/components/pages/test/add/setInfo/manualCreated.vue

<template>
  <div class="mc_box">
    <div class="mc_addBox">
      <div class="mc_addBox_add">
        <div class="title">请添加题目类型与数量</div>
        <div class="select">
          <el-select
            v-model="topicType"
            placeholder="题目类型"
            clearable
            class="e-select"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            v-model="number"
            placeholder="请输入题目数量"
            size="normal"
            clearable
            @change="numberPan"
            class="e-input"
          ></el-input>
          <img
            src="@/assets/icon/new/addStage.png"
            class="e-img"
            @click="addCheck"
          />
        </div>
      </div>
      <div class="mc_addBox_add">
        <div class="title">请添加试卷组件</div>
        <div class="btnBox">
          <!-- <el-button type="primary" size="mini" v-for="item in buttonOptions" :key="item.type" class="e-button"
                        @click="addQtype(item.type)">{{ item.name }}</el-button> -->
          <button
            v-for="item in buttonOptions"
            :key="item.type"
            class="pub_test_btn"
            :class="{
              pub_test_btn_group: item.type == 1,
              pub_test_btn_page: item.type == 2,
            }"
            @click="addQtype(item.type)"
          >
            {{ item.name }}
          </button>
        </div>
      </div>
      <div class="mc_addBox_add">
        <div class="title">智能创建</div>
        <div class="btnBox">
          <aiCreate2 :aiJson="manualJson" @changeJson="changeJson"></aiCreate2>
        </div>
      </div>
    </div>
    <div class="mc_checkBox">
      <checkOrder
        :checkC.sync="checkC"
        :checkJson="checkJson"
        @changeJson="changeJson"
      ></checkOrder>
      <div class="e_btn">
        <el-button type="primary" size="mini" @click="nextSteps()"
          >下一步</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import checkOrder from "../components/checkOrder.vue";
import aiCreate2 from "./aiCreate2.vue";
import minxinVue from "../minxins/minxin";

export default {
  mixins: [minxinVue],
  components: {
    checkOrder,
    aiCreate2,
  },
  props: {
    manualJson: {
      type: Array,
    },
  },
  data() {
    return {
      topicType: "",
      number: "",
      checkJson: [
        // {
        //     ttype: 1, //题目分类 1普通题目 2分组 3分页
        //     type: 1, //题型分类 1选择题,  3问答题 4添加文档
        //     array:[] //题目
        // }
      ],
      checkC: "",
    };
  },
  watch: {
    manualJson: {
      handler: function (newVal, oldVal) {
        this.checkJson = this.depthCopy(newVal);
      },
      deep: true,
    },
  },
  methods: {
    numberPan() {
      if (/[^\d]/.test(this.number)) {
        this.$message.error("请填写数字");
        this.number = "";
      }
    },
    changeJson(json) {
      this.checkJson = json;
      this.$emit("update:manualJson", json);
    },
    addCheck() {
      if (!this.topicType) {
        this.$message.error("请选择题目类型");
        return;
      }
      if (!this.number) {
        this.$message.error("请填写题目数量");
        return;
      }
      let type = 1;
      if (this.checkJson.length > 0) {
        for (var i = 0; i < this.checkJson.length; i++) {
          if (this.checkJson[i].ttype == 2) {
            type = 2;
          } else if (this.checkJson[i].ttype == 3) {
            type = 3;
          }
        }
      }
      if (this.checkC) {
        let _check = this.checkC.replace("x", "").split("-");
        let _json = this.checkJson[_check[0]];
        let json = {
          ttype: 1,
          type: this.topicType,
        };
        if (this.topicType == 1) {
          json.json = {
            title: "标题",
            type: 1,
            array: [
              { option: "选项1", img: "" },
              { option: "选项2", img: "" },
            ],
            answer: "",
          };
        } else if (this.topicType == 3) {
          json.json = {
            title: "标题",
            type: 1,
            answer: "",
          };
        } else if (this.topicType == 5) {
          json.json = {
            title: "标题",
            type: 1,
            detail: "",
          };
        } else if (this.topicType == 6) {
          json.json = {
            title: "标题",
            detail: "",
            courses:[]
          };
        } else if (this.topicType == 7) {
          json.json = {
            title: "标题",
            detail: "",
            small: 0,
            big: 10,
          };
        }
        if (_json.array) {
          if (type == 3 && _check.length == 2) {
            if (this.checkJson[_check[0]].array[_check[1]].array) {
              for (var i = 0; i < this.number; i++) {
                this.checkJson[_check[0]].array[_check[1]].array.push(json);
              }
            } else {
              for (var i = 0; i < this.number; i++) {
                this.checkJson[_check[0]].array.splice(
                  parseInt(_check[1]) + 1,
                  0,
                  json
                );
              }
            }
          } else if (type == 3 && _check.length == 3) {
            for (var i = 0; i < this.number; i++) {
              this.checkJson[_check[0]].array[_check[1]].array.splice(
                parseInt(_check[2]) + 1,
                0,
                json
              );
            }
          } else if (type == 2 && _check.length == 2) {
            for (var i = 0; i < this.number; i++) {
              this.checkJson[_check[0]].array.splice(
                parseInt(_check[1]) + 1,
                0,
                json
              );
            }
          } else if (type == 2 && _check.length == 1) {
            for (var i = 0; i < this.number; i++) {
              this.checkJson[_check[0]].array.push(json);
            }
          } else if (type == 3 && _check.length == 1) {
            if (
              this.checkJson[_check[0]].array[0] &&
              this.checkJson[_check[0]].array[0].array
            ) {
              for (var i = 0; i < this.number; i++) {
                this.checkJson[_check[0]].array[0].array.push(json);
              }
            } else {
              for (var i = 0; i < this.number; i++) {
                this.checkJson[_check[0]].array.push(json);
              }
            }
          }
        } else {
          for (var i = 0; i < this.number; i++) {
            this.checkJson.splice(parseInt(_check[0]) + 1, 0, json);
          }
        }
      } else {
        if (type == 1) {
          for (var i = 0; i < this.number; i++) {
            let json1 = {
              ttype: 1,
              type: this.topicType,
            };
            if (this.topicType == 1) {
              json1.json = {
                title: "标题",
                type: 1,
                array: [
                  { option: "选项1", img: "" },
                  { option: "选项2", img: "" },
                ],
                answer: "",
              };
            } else if (this.topicType == 3) {
              json1.json = {
                title: "标题",
                type: 1,
                answer: "",
              };
            } else if (this.topicType == 5) {
              json1.json = {
                title: "标题",
                type: 1,
                detail: "",
              };
            } else if (this.topicType == 6) {
              json1.json = {
                title: "标题",
                detail: "",
                courses:[]
              };
            } else if (this.topicType == 7) {
              json1.json = {
                title: "标题",
                detail: "",
                small: 0,
                big: 10,
              };
            }
            this.checkJson.push(json1);
          }
        } else if (type == 3 || type == 2) {
          this.$message.error("请选中分页或者分组添加题目");
          return;
        }
      }
      this.topicType = "";
      this.number = "";
      this.$emit("update:manualJson", this.checkJson);
    },
    addQtype(type) {
      if (type == 1) {
        let type = 1;
        if (this.checkJson.length > 0) {
          for (var i = 0; i < this.checkJson.length; i++) {
            if (this.checkJson[i].ttype == 1) {
              type = 2;
            } else if (this.checkJson[i].ttype == 3) {
              type = 3;
            }
          }
        }
        let json = {
          ttype: 2,
          array: [],
          isopen: true,
        };
        if (type == 1) {
          if (this.checkC) {
            let _check = this.checkC.replace("x", "").split("-");
            this.checkJson.splice(parseInt(_check[0]) + 1, 0, json);
          } else {
            this.checkJson.push(json);
          }
        } else if (type == 2) {
          this.checkJson = [
            {
              ttype: 2,
              array: this.depthCopy(this.checkJson),
              isopen: true,
            },
          ];
        } else if (type == 3) {
          if (this.checkC) {
            let _check = this.checkC.replace("x", "").split("-");

            if (
              _check.length > 1 &&
              this.checkJson[_check[0]].array[0] &&
              this.checkJson[_check[0]].array[0].array
            ) {
              this.checkJson[_check[0]].array.splice(
                parseInt(_check[1]) + 1,
                0,
                json
              );
            } else if (
              this.checkJson[_check[0]].array[0] &&
              !this.checkJson[_check[0]].array[0].array
            ) {
              this.checkJson[_check[0]].array = [
                {
                  ttype: 2,
                  array: this.depthCopy(this.checkJson[_check[0]].array),
                  isopen: true,
                },
              ];
            } else {
              this.checkJson[_check[0]].array.push(json);
            }
          } else {
            this.$message.error("请选中分页添加分组");
            return;
          }
        }
      } else if (type == 2) {
        let type = 1;
        if (this.checkJson.length > 0) {
          for (var i = 0; i < this.checkJson.length; i++) {
            if (this.checkJson[i].ttype == 1 || this.checkJson[i].ttype == 2) {
              type = 2;
            }
          }
        }
        if (type == 1) {
          let json = {
            ttype: 3,
            array: [],
            isopen: true,
          };
          if (this.checkC) {
            let _check = this.checkC.replace("x", "").split("-");

            this.checkJson.splice(parseInt(_check[0]) + 1, 0, json);
          } else {
            this.checkJson.push(json);
          }
        } else {
          this.checkJson = [
            {
              ttype: 3,
              array: this.depthCopy(this.checkJson),
              isopen: true,
            },
          ];
        }
      }
      this.$emit("update:manualJson", this.checkJson);
    },
    depthCopy(s) {
      return JSON.parse(JSON.stringify(s));
    },

    nextSteps() {
      this.$emit("nextSteps");
    },
  },
  mounted() {
    this.checkJson = this.depthCopy(this.manualJson);
    this.$forceUpdate();
  },
};
</script>

<style scoped>
.mc_box {
  width: 90%;
  margin: 10px auto;
  display: flex;
}

.mc_addBox {
  width: 400px;
  border: 1px solid #898989;
  border-radius: 8px;
  padding: 20px 20px;
  box-sizing: border-box;
  min-height: 350px;
  height: fit-content;
}

.mc_addBox_add {
}

.mc_addBox_add + .mc_addBox_add {
  margin-top: 10px;
}

.mc_addBox_add .title {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.mc_addBox_add .title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(54, 129, 252);
  margin-right: 10px;
  display: block;
}

.mc_addBox_add .select {
  display: flex;
  align-items: center;
}

.mc_addBox_add .btnBox {
  display: flex;
  flex-wrap: wrap;
}

.mc_addBox_add .select .e-select {
}

.mc_addBox_add .select .e-input {
  margin-left: 10px;
}

.mc_addBox_add .select .e-img {
  cursor: pointer;
  width: 20px;
  margin-left: 10px;
}

.mc_addBox_add .btnBox .e-button {
}

.mc_checkBox {
  width: calc(100% - 420px);
  margin-left: 20px;
  border: 1px solid #898989;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.e_btn {
  width: 100%;
  margin-top: auto;
  display: flex;
  justify-content: center;
}
</style>