pbl-teacher-table/src/components/pages/test/add/edit/check/index.vue

<template>
  <div class="c_box">
    <div class="c_box_title">{{ title }}</div>
    <div class="c_body">
      <div v-if="type == 3">
        <div v-for="(item, index) in checkArray[page].array" :key="index" class="check_box">
          <div class="title">{{ selectType(item, index) }}</div>
          <div v-if="item.ttype == 1" class="answerBox"><choiceV :cJson.sync="item.json"></choiceV></div>
          <div v-for="(item2, index2) in item.array" :key="`${index}-${index2}`" class="check_box_xia">
            <div class="title">{{ selectType(item2, index2) }}</div>
            <div v-if="item2.ttype == 1" class="answerBox"><choiceV :cJson.sync="item2.json"></choiceV></div>
          </div>
        </div>
      </div>
      <div v-else>
        <div v-for="(item, index) in checkArray" :key="index" class="check_box">
          <div class="title">{{ selectType(item, index) }}</div>
          <div v-if="item.ttype == 1" class="answerBox"><choiceV :cJson.sync="item.json"></choiceV></div>
          <div v-for="(item2, index2) in item.array" :key="`${index}-${index2}`" class="check_box_xia">
            <div class="title">{{ selectType(item2, index2) }}</div>
            <div v-if="item2.ttype == 1" class="answerBox"><choiceV :cJson.sync="item2.json"></choiceV></div>
          </div>
        </div>
      </div>

      <div v-if="checkArray.length > 1 && type == 3" class="page">
        <el-button type="primary" size="mini" :disabled="page == 0" @click="page--">上一页</el-button>
        <div class="p_page"><span>{{ page + 1 }}</span><span>/</span><span>{{ checkArray.length }}</span></div>
        <el-button type="primary" size="mini" :disabled="page == (checkArray.length - 1)" @click="page++">下一页</el-button>

      </div>
    </div>
  </div>
</template>

<script>
import choiceV from './choice.vue';
export default {
  props: {
    cJson: {
      type: Array,
    },
    title: {
      type: String,
    }
  },
  components: {
    choiceV
  },
  data() {
    return {
      checkArray: [],
      type: 1,
      page: 0,
      options2: {
        1: "选择题",
        2: "问答题",
        3: "填空题",
        4: "添加文档"
      },
    }
  },
  computed: {
    selectType() {
      return function (item, index) {
        if (item.ttype == 1) {
          return index + 1 + "、" + this.options2[item.type];
        } else if (item.ttype == 2) {
          return `第${index + 1}组 （共${item.array.length}题）`;
        } else if (item.ttype == 3) {
          return `分页${index + 1}`;
        }
      };
    }
  },
  watch: {
    cJson: {
      handler(newVal, oldVal) {
        console.log(newVal);
        console.log(oldVal);
        this.checkArray = this.setJson(this.depthCopy(newVal))
      },
      deep: true
    }
  },
  methods: {
    depthCopy(s) {
      return JSON.parse(JSON.stringify(s));
    },
    setJson(json) {
      if (json.length > 0) {
        let _json = this.depthCopy(json)
        this.type = _json[0].ttype
        let checkArray = _json.filter(item => {
          if (item.array) {
            item.array = item.array.filter(item2 => {
              if (item2.ttype == 1 && item2.json && !item2.json.answer2) {
                item2.json.answer2 = []
              }
              if (item2.array) {
                  item2.array = item2.array.filter(item3 => {
                    if (item3.ttype == 1 && item3.json && !item3.json.answer2) {
                      item3.json.answer2 = []
                    }
                    return item3
                  })
                }
              return (item2.ttype != 1 && item2.array.length > 0) || (item2.ttype == 1)
            })
          }
          if (item.ttype == 1 && item.json && !item.json.answer2) {
            item.json.answer2 = []
          }
          console.log(item.array);
          return (item.ttype != 1 && item.array.length > 0) || (item.ttype == 1)
        })
        console.log(checkArray);
        return checkArray
      } else {
        return []
      }
    }
  },
  mounted() {
    this.checkArray = this.setJson(this.depthCopy(this.cJson))
  },
}
</script>

<style scoped>
.c_box {
  padding: 10px 0 0;
  box-sizing: border-box;
  width: 95%;
  margin: 10px auto 0;
  background: #fff;
  height: calc(100% - 10px);
  overflow: auto;
}

.c_box_title {
  width: 90%;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  word-break: break-all;
  margin: 20px;
}

.c_body {
  width: 90%;
  margin: 0 auto;
}

.check_box{

}
.check_box + .check_box{
  margin-top: 10px;
}
.check_box > .title{
  font-size:20px;
  word-break: break-all;
  font-weight: bold;
}
.check_box > .answerBox{
  margin-top: 10px;

}
.check_box > .noanswerBox{
  margin-top: 10px;
}
.check_box_xia{
  margin-top: 10px;
}

.check_box_xia > .title{
  font-size: 18px;
  font-weight: bold;
}
.check_box_xia > .answerBox{
  margin-top: 10px;
}
.check_box_xia > .noanswerBox{
  margin-top: 10px;
}

.page{
  margin: 20px;
  display: flex;
  align-items: center;
}

.p_page{
  margin: 0 10px;
}
</style>