zc_saas_admin/src/components/testPaperPreview/index.vue

<template>
  <div id="testPaperPreview">
    <el-dialog
      :visible.sync="diavos"
      width="1080px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">试卷预览</div>
        <div class="rightBoxs">
          <img src="@/assets/images/Close@2x.png" alt="" @click="clears" />
        </div>
      </div>
      <div>
        <table class="table_style" border>
          <tr>
            <td>当前总分</td>
            <td>及格分数</td>
            <td>答卷时长</td>
            <td>答卷次数</td>
            <td>做题类型</td>
          </tr>
          <tr>
            <td>{{ topData.getAllpocis }}</td>
            <td>{{ topData.passScore }}</td>
            <td>
              {{ topData.answerTime === 0 ? "无限时长" : topData.answerTime }}
            </td>
            <td>
              {{ topData.answerNum === 0 ? "无限次" : topData.answerNum }}
            </td>
            <td>
              {{
                topData.doType === 1
                  ? "练习"
                  : topData.doType === 2
                  ? "考试"
                  : ""
              }}
            </td>
          </tr>
        </table>
        <div class="bank_style">
          <div v-for="(item, index) in tableData" :key="index">
            <div class="header_style">
              <span>题目{{ index + 1 }}</span>
              <span>{{ getTypeName(item.type) }}</span>
              <span>分值：{{ item.score }}</span>
              <el-button
                size="mini"
                style="float: right"
                @click="changeDatas(item)"
                v-if="type === 2"
                >修改</el-button
              >
              <div style="clear: both"></div>
            </div>
            <div class="dis_flex">
              <span>题目内容：</span>
              <div>
                <div class="divPy" v-html="imgExiz(item.content)"></div>
                <div v-if="item.type === 4">
                  <div
                    style="background: #e0e0e0; padding: 10px"
                    v-for="(its, inds) in JSON.parse(item.jsonStr)"
                    :key="inds"
                  >
                    <div class="header_style">
                      <span>题目{{ inds + 1 }}</span>
                      <span>{{ getTypeName(its.type) }}</span>
                    </div>
                    <div class="dis_flex">
                      <span>题目内容：</span>
                      <div>
                        <div class="divPy" v-html="imgExiz(its.content)"></div>
                      </div>
                    </div>
                    <div
                      class="dis_flex"
                      v-if="its.type !== 4 && its.type !== 5 && its.type !== 3"
                    >
                      <span>选项内容：</span>
                      <div>
                        <ul>
                          <li
                            v-for="(itemsxs, indexsxs) in its.optionsList"
                            :key="indexsxs"
                            :style="
                              indexsxs === its.optionsList.length - 1
                                ? 'margin-bottom: 0px'
                                : 'margin-bottom: 10px'
                            "
                          >
                            {{ Gest(indexsxs + 1) }}：{{ itemsxs.content }}

                            <div style="margin: 10px 0px">
                              <el-image
                                v-if="itemsxs.imgUrl"
                                style="
                                  max-width: 100%;
                                  max-height: 100%;
                                  vertical-align: middle;
                                "
                                :src="
                                  $methodsTools.splitImgHost(itemsxs.imgUrl)
                                "
                                :preview-src-list="[
                                  $methodsTools.splitImgHost(itemsxs.imgUrl),
                                ]"
                              >
                              </el-image>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="dis_flex" v-if="its.type !== 5">
                      <span>正确答案：</span>
                      <div>
                        <span v-if="its.type === 3">
                          {{ its.answerQuestion == 1 ? "正确" : "错误" }}
                        </span>
                        <span v-else>
                          {{ getDictChanges(its.answerQuestion) }}
                        </span>
                      </div>
                    </div>
                    <div class="dis_flex">
                      <span>答案解析：</span>
                      <div>
                        <div v-html="imgExiz(its.analysisContent)"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="dis_flex"
              v-if="item.type !== 3 && item.type !== 4 && item.type !== 5"
            >
              <span>选项内容：</span>
              <div>
                <ul v-if="item.type !== 4">
                  <li
                    v-for="(items, indexs) in item.optionsList"
                    :key="indexs"
                    :style="
                      indexs === item.optionsList.length - 1
                        ? 'margin-bottom: 0px'
                        : 'margin-bottom: 10px'
                    "
                  >
                    {{ Gest(indexs + 1) }}：{{ items.content }}
                    <div style="margin: 10px 0px">
                      <el-image
                        v-if="items.imgUrl"
                        style="
                          max-width: 100%;
                          max-height: 100%;
                          vertical-align: middle;
                        "
                        :src="$methodsTools.splitImgHost(items.imgUrl)"
                        :preview-src-list="[
                          $methodsTools.splitImgHost(items.imgUrl),
                        ]"
                      >
                      </el-image>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="dis_flex" v-if="item.type !== 5 && item.type !== 4">
              <span>正确答案：</span>
              <div>
                <span v-if="item.type === 3">
                  {{ item.answerQuestion == 1 ? "正确" : "错误" }}
                </span>
                <span v-else>
                  {{ getDictChanges(item.answerQuestion) }}
                </span>
              </div>
            </div>
            <div class="dis_flex" v-if="item.type !== 4">
              <span>答案解析：</span>
              <div><div v-html="imgExiz(item.analysisContent)"></div></div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clears">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      diavos: false,
      tableData: [], //题目内容
      topData: {}, //顶部表格数据
      type: "",
    };
  },
  computed: {
    /**
     * 题目类型转换名称
     */
    getTypeName: function () {
      return function (type) {
        let typeName = "";
        switch (type) {
          case 1:
            typeName = "单选题";
            break;
          case 2:
            typeName = "多选题";
            break;
          case 3:
            typeName = "判断题";
            break;
          case 4:
            typeName = "案例题";
            break;
          case 5:
            typeName = "简答题";
            break;

          default:
            break;
        }
        return typeName;
      };
    },

    imgExiz: function () {
      return function (vms) {
        if (!vms) {
          return vms;
        } else {
          var ast1 = vms.replace(/<p/gi, '<p style="margin:0px;"');
          var ast = ast1.replace(/<img/gi, '<img style="max-width:100%;"');
          return ast;
        }
      };
    },
  },
  methods: {
    /**
     * type = 1时Id获取数据row = ID, 2时直接获取数据row = 数据
     */
    openBox(type, row) {
      const ROWS = JSON.parse(JSON.stringify(row));
      this.type = type;
      if (type === 1) {
        //搜索Id处理数据
        this.$api.obtainbankexam(row).then((res) => {
          this.topData = {
            answerTime: res.data.answerTime,
            answerNum: res.data.answerNum,
            doType: res.data.doType,
            passScore: res.data.passScore,
          };
          this.$api.inquirebankexamquestionList({ examId: row }).then((res) => {
            res.data.map((item) => {
              item.optionsList = JSON.parse(item.jsonStr);
            });
            this.tableData = res.data;
            var num = 0;
            res.data.forEach((item) => {
              num += item.score;
            });
            this.topData.getAllpocis = num;

            this.diavos = true;
          });
        });
      }
      if (type === 2) {
        this.topData = ROWS.topData;
        this.tableData = ROWS.tableData;
        this.diavos = true;
      }
    },
    changeDatas(row) {
      this.$parent.addClick(row, 0, row.index, true);
    },
    clears() {
      this.diavos = false;
    },
    changeUploadStatus(data) {
      let index = this.tableData.findIndex((item) => {
        return item.index === data.index;
      });
      this.$set(this.tableData, index, data);
      console.log(data);
    },
    /**
     * 选项转换
     */
    Gest(ints) {
      var int = parseInt(ints);
      var ast = "";
      switch (int) {
        case 1:
          ast = "A";
          break;
        case 2:
          ast = "B";
          break;
        case 3:
          ast = "C";
          break;
        case 4:
          ast = "D";
          break;
        case 5:
          ast = "E";
          break;
        case 6:
          ast = "F";
          break;
        case 7:
          ast = "G";
          break;
        case 8:
          ast = "H";
          break;
        default:
          ast = "X";
          break;
      }
      return ast;
    },
    getDictChanges(dan) {
      var arst = [];
      var arrays;
      if (dan instanceof Object) {
        arrays = dan;
      } else {
        if (dan) {
          arrays = dan.toString().split(",");
        } else {
          return "";
        }
      }
      for (let i = 0; i < arrays.length; i++) {
        arst.push(this.Gest(arrays[i]));
      }
      return arst.join(",");
    },
  },
};
</script>

<style lang="scss" scoped>
.table_style {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  margin-bottom: 14px;
  tr {
    &:first-of-type {
      background-color: rgb(255, 255, 204);
      font-weight: bold;
    }
    td {
      padding: 6px;
    }
  }
}
.bank_style {
  max-height: 600px;
  overflow: auto;
  & > div {
    padding: 10px;
    background-color: #eee;
    margin-bottom: 11px;
  }
  & .header_style {
    border-bottom: 1px dotted #999;
    padding-bottom: 6px;
    & > span {
      margin-right: 10px;
    }
  }
  & .dis_flex {
    display: flex;
    margin-bottom: 6px;
    & > span {
      width: 90px;
      flex-shrink: 0;
    }
    & > div {
      flex: 1;
      ul {
        margin: 0;
      }
    }
  }
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
</style>