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_box_score">总分：{{ score }}</div>
    <div class="c_body" v-if="isloading">
      <div v-if="type == 3">
        <div v-for="(item, index) in checkArray[page].array" :key="index" class="check_box">
          <div class="title" v-if="item.ttype != 1 || (!item.json && item.ttype == 1)" :style="{fontSize:item.ttype == 1 && '16px'}">{{ selectType(item, index) }}</div>
          <div v-if="item.ttype == 1" class="answerBox">
            <choiceV :tindex="index" :cJson.sync="item.json" v-if="item.type == 1"></choiceV>
            <gapV :tindex="index" :cJson.sync="item.json" v-if="item.type == 3"></gapV>
            <fileV :tindex="index" :cJson.sync="item.json" v-if="item.type == 5"></fileV>
            <courseV :tindex="index" :cJson.sync="item.json" v-if="item.type == 6"></courseV>
            <evaV :tindex="index" :cJson.sync="item.json" v-if="item.type == 7"></evaV>
            <timeV :tindex="index" :cJson.sync="item.json" v-if="item.type == 8"></timeV>
            <courseV2 :tindex="index" :cJson.sync="item.json" v-if="item.type == 11"></courseV2>
						<sweep :tindex="index" :cJson.sync="item.json" v-if="item.type == 12"/>
            <!-- <span v-else>暂未设置题目</span> -->
          </div>
          <div v-for="(item2, index2) in item.array" :key="`${index}-${index2}`" class="check_box_xia">
            <div class="title" v-if="item2.ttype != 1 || (!item2.json && item2.ttype == 1)" :style="{fontSize:item2.ttype == 1 && '16px'}">{{ selectType(item2, index2) }}</div>
            <div v-if="item2.ttype == 1" class="answerBox">
              <choiceV :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 1"></choiceV>
              <gapV :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 3"></gapV>
              <fileV :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 5"></fileV>
              <courseV :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 6"></courseV>
              <evaV :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 7"></evaV>
              <timeV :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 8"></timeV>
              <courseV2 :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 11"></courseV2>
							<sweep :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 12"></sweep>
              <!-- <span v-else>暂未设置题目</span> -->
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div v-for="(item, index) in checkArray" :key="index" class="check_box">
          <div class="title" v-if="item.ttype != 1 || (!item.json && item.ttype == 1)" :style="{fontSize:item.ttype == 1 && '16px'}">{{ selectType(item, index) }}</div>
          <div v-if="item.ttype == 1" class="answerBox">
            <choiceV :tindex="index" :cJson.sync="item.json" v-if="item.type == 1"></choiceV>
            <gapV :tindex="index" :cJson.sync="item.json" v-if="item.type == 3"></gapV>
            <fileV :tindex="index" :cJson.sync="item.json" v-if="item.type == 5"></fileV>
            <courseV :tindex="index" :cJson.sync="item.json" v-if="item.type == 6"></courseV>
            <evaV :tindex="index" :cJson.sync="item.json" v-if="item.type == 7"></evaV>
            <timeV :tindex="index" :cJson.sync="item.json" v-if="item.type == 8"></timeV>
            <courseV2 :tindex="index" :cJson.sync="item.json" v-if="item.type == 11"></courseV2>
						<sweep :tindex="index" :cJson.sync="item.json" v-if="item.type == 12"></sweep>
            <!-- <span v-else>暂未设置题目</span> -->
          </div>
          <div v-for="(item2, index2) in item.array" :key="`${index}-${index2}`" class="check_box_xia">
            <div class="title" v-if="item2.ttype != 1 || (!item2.json && item2.ttype == 1)" :style="{fontSize:item2.ttype == 1 && '16px'}">{{ selectType(item2, index2) }}</div>
            <div v-if="item2.ttype == 1" class="answerBox">
              <choiceV :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 1"></choiceV>
              <gapV :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 3"></gapV>
              <fileV :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 5"></fileV>
              <courseV :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 6"></courseV>
              <evaV :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 7"></evaV>
              <timeV :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 8"></timeV>
              <courseV2 :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 11"></courseV2>
							<sweep :tindex="index2" :cJson.sync="item2.json" v-if="item2.type == 12"></sweep>
              <!-- <span v-else>暂未设置题目</span> -->
            </div>
          </div>
        </div>
      </div>

      <div v-if="checkArray.length > 1 && type == 3" class="page">
        <el-button type="primary" size="mini" :disabled="page == 0" @click="setPage('-1')">上一页</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="setPage('1')">下一页</el-button>

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

<script>
import choiceV from './choice.vue';
import gapV from './gap.vue';
import fileV from './file.vue';
import courseV from './course.vue';
import evaV from './eva.vue';
import timeV from './time.vue';
import courseV2 from './course2.vue';
import sweep from './sweep.vue'
export default {
  props: {
    cJson: {
      type: Array,
    },
    title: {
      type: String,
    }
  },
  components: {
    choiceV,
    gapV,
    fileV,
    courseV,
    evaV,
    timeV,
    courseV2,
		sweep
  },
  data() {
    return {
      checkArray: [],
      type: 1,
      page: 0,
      options2: {
        1: "选择题",
        // 2: "问答题",
        3: "问答题",
        4: "添加文档",
        5: "附件",
        6: "课程",
        7: "评分",
      },
      isloading:true,
    }
  },
  computed: {
    selectType() {
      return function (item, index) {
        if (item.ttype == 1) {
          return index + 1 + "、" + this.options2[item.type];
        } else if (item.ttype == 2) {
          return `${item.name ? item.name : `第${index + 1}组`}（共${item.array.length}题）`;
        } else if (item.ttype == 3) {
          return `分页${index + 1}`;
        }
      };
    },
    score() {
      let score = 0
      this.cJson.forEach(el => {
        if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
          el.array.forEach(item => {
            if (item.ttype == 2 && item.array.length > 0) {
              item.array.forEach(item2 => {
                if (item2.ttype == 1 && item2.json) {
                  score += item2.json.score ? parseFloat(item2.json.score) : 0
                }
              })
            } else if (item.ttype == 1 && item.json) {
              score += item.json.score ? parseFloat(item.json.score) : 0
            }
          })
        } else if (el.ttype == 1 && el.json) {
          score += el.json.score ? parseFloat(el.json.score) : 0
        }
      })
      return score > 0 ? score + '分' : '未设置分数'
    }
  },
  watch: {
    cJson: {
      handler(newVal, oldVal) {
        console.log(newVal);
        console.log(oldVal);
        this.checkArray = this.setJson(this.depthCopy(newVal))
      },
      deep: true
    },
    
  },
  methods: {
    setPage(index){
      this.isloading = false
      if(index == '1'){
        this.page++
      }else if(index == '-1'){
        this.page--
      }
      setTimeout(()=>{
        this.isloading = true
      }, 50)
      this.$forceUpdate()
    },
    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.type != 6 && item.type != 7 && item.type != 8 && item.type != 12) {
                item2.json.answer2 = [];
              } else if (item2.ttype == 1 && item2.json && !item2.json.answer2 && item2.type == 6) {
                item2.json.answer2 = item2.json.courses[0];
              } else if (item2.ttype == 1 && item2.json && !item2.json.answer2 && item2.type == 7) {
                item2.json.answer2 = '';
              } else if (item2.ttype == 1 && item2.json && !item2.json.answer2 && item2.type == 8) {
                item2.json.answer2 = '';
              }else if (item2.ttype == 1 && item2.json && !item2.json.answer2 && item2.type == 12) {
                item2.json.answer2 = '';
              }
              if (item2.array) {
                item2.array = item2.array.filter((item3) => {
                  if (item3.ttype == 1 && item3.json && !item3.json.answer2 && item3.type != 6 && item3.type != 7 && item3.type != 8 && item3.type != 12) {
                    item3.json.answer2 = [];
                  } else if (item3.ttype == 1 && item3.json && !item3.json.answer2 && item3.type == 6) {
                    item3.json.answer2 = item3.json.courses[0];
                  } else if (item3.ttype == 1 && item3.json && !item3.json.answer2 && item3.type == 7) {
                    item3.json.answer2 = '';
                  } else if (item3.ttype == 1 && item3.json && !item3.json.answer2 && item3.type == 8) {
                    item3.json.answer2 = '';
                  }else if (item3.ttype == 1 && item3.json && !item3.json.answer2 && item3.type == 12) {
                    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.type != 6 && item.type != 7 && item.type != 8 && item.type != 12) {
            item.json.answer2 = [];
          } else if (item.ttype == 1 && item.json && !item.json.answer2 && item.type == 6) {
            item.json.answer2 = item.json.courses[0];
          } else if (item.ttype == 1 && item.json && !item.json.answer2 && item.type == 7) {
            item.json.answer2 = '';
          } else if (item.ttype == 1 && item.json && !item.json.answer2 && item.type == 8) {
            item.json.answer2 = '';
          }else if (item.ttype == 1 && item.json && !item.json.answer2 && item.type == 12) {
            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;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto 0;
  background: #fff;
  height: calc(100% - 0px);
  overflow: auto;
}

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

.c_box_score {
  width: 90%;
  text-align: center;
  word-break: break-all;
  margin: 0 auto 20px;
  font-size: 16px;
  color: #373737;
}

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

.check_box {

}

.check_box+.check_box {
  margin-top: 10px;
  padding-top: 10px;
  /* border-top: 1px solid #eee; */
}

.check_box>.title {
  font-size: 24px;
  word-break: break-all;
  font-weight: bold;
	margin-left: 45px;
}

.check_box>.answerBox {
  margin-top: 10px;

}

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

.check_box_xia {
  padding: 15px 0;
}

.check_box_xia + .check_box_xia {
  /* border-top: 1px solid #eee; */
}

.check_box_xia>.title {
  font-size: 22px;
  font-weight: bold;
	margin-left: 45px;
}

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

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

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

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