pbl-teacher-table/src/components/pages/testStudent/view/component/topic.vue

<template>
  <div class="c_box">
    <div class="c_box_title">{{ title }}</div>
    <div class="c_box_brief" v-if="brief">{{ brief }}</div>
    <div class="c_box_score">
      <span>总分：{{ score }}</span>
      <span v-if="name" style="margin-left: 10px;">答题人：{{ name }}</span>
      <span style="margin-left: 10px;">总得分：{{ score2 }}</span>
    </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" :checktype="checktype" v-if="item.type == 1" :see="see"
              :isTeacher="isTeacher"></choiceV>
            <gapV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 3" :see="see"
              :isTeacher="isTeacher"></gapV>
            <fileV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 5" :see="see"
              :isTeacher="isTeacher"></fileV>
            <courseV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 6"
              :see="see" :isTeacher="isTeacher"></courseV>
            <evaV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 7" :see="see"
              :isTeacher="isTeacher"></evaV>
            <!-- <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" :checktype="checktype" v-if="item2.type == 1"
                :see="see" :isTeacher="isTeacher"></choiceV>
              <gapV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 3"
                :see="see" :isTeacher="isTeacher"></gapV>
              <fileV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 5"
                :see="see" :isTeacher="isTeacher"></fileV>
              <courseV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 6"
                :see="see" :isTeacher="isTeacher"></courseV>
              <evav :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 7"
                :see="see" :isTeacher="isTeacher"></evav>
              <!-- <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" :checktype="checktype" v-if="item.type == 1" :see="see"
              :isTeacher="isTeacher"></choiceV>
            <gapV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 3" :see="see"
              :isTeacher="isTeacher"></gapV>
            <fileV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 5" :see="see"
              :isTeacher="isTeacher"></fileV>
            <courseV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 6"
              :see="see" :isTeacher="isTeacher"></courseV>
            <evaV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 7" :see="see"
              :isTeacher="isTeacher"></evaV>
            <!-- <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" :checktype="checktype" v-if="item2.type == 1"
                :see="see" :isTeacher="isTeacher"></choiceV>
              <gapV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 3"
                :see="see" :isTeacher="isTeacher"></gapV>
              <fileV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 5"
                :see="see" :isTeacher="isTeacher"></fileV>
              <coursev :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 6"
                :see="see" :isTeacher="isTeacher"></coursev>
              <evaV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 7"
                :see="see" :isTeacher="isTeacher"></evaV>
              <!-- <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';
export default {
  props: {
    cJson: {
      type: Array,
    },
    title: {
      type: String,
    },
    brief: {
      type: String
    },
    checktype: {
      type: Number,
      default: 1,
    },
    see: {
      type: Boolean,
      default: false
    },
    isTeacher: {
      type: Number,
      default: 2
    },
    name: {
      type: String,
      default: ''
    }
  },
  components: {
    choiceV,
    gapV,
    fileV,
    courseV,
    evaV
  },
  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.checkArray.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 + '分' : '未设置分数'
    },
    score2() {
      let score = 0
      // let type = 1
      this.checkArray.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.score2 ? parseFloat(item2.json.score2) : 0
                }
              })
            } else if (item.ttype == 1 && item.json) {
              score += item.json.score2 ? parseFloat(item.json.score2) : 0
            }
          })
        } else if (el.ttype == 1 && el.json) {
          score += el.json.score2 ? parseFloat(el.json.score2) : 0
        }
      })
      return 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) {
                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 = '';
              }
              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.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 = '';
                  }
                  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.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 = '';
          }
          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 {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  height: calc(100% - 55px);
  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_brief {
  width: 90%;
  text-align: left;
  font-size: 14px;
  word-break: break-all;
  margin: 10px auto;
  color: #373737;
}

.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: 20px;
  word-break: break-all;
  font-weight: bold;
}

.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: 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;
  justify-content: center;
}

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