saas_entrepot_admin/src/components/bankMsg/index.vue

<template>
  <div id="bankMsg">
    <div class="dis_flex">
      <span class="span_sty">题目内容：</span>
      <div>
        <div class="divPy" v-html="imgExiz(bankMsg.content)"></div>
        <div v-if="bankMsg.type === 4">
          <div
            style="
              background: #eee;
              padding: 10px;
              border-bottom: 1px solid #a4a4a4;
            "
            v-for="(its, inds) in JSON.parse(bankMsg.jsonStr)"
            :key="inds"
          >
            <div class="dis_flex">
              <span class="span_sty">题目类型：</span>
              <div>
                <span>{{ getTypeName(its.type) }}</span>
              </div>
            </div>
            <div class="dis_flex">
              <span class="span_sty">题目内容：</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 class="span_sty">选项内容：</span>
              <div>
                <ul>
                  <li
                    v-for="(itemsxs, indexsxs) in its.optionsList"
                    :key="indexsxs"
                    style="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 class="span_sty">正确答案：</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 class="span_sty">答案解析：</span>
              <div>
                <div v-html="imgExiz(its.analysisContent)"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="dis_flex"
      v-if="bankMsg.type !== 4 && bankMsg.type !== 5 && bankMsg.type !== 3"
    >
      <span class="span_sty">选项内容：</span>
      <div>
        <ul>
          <li
            v-for="(items, indexs) in JSON.parse(bankMsg.jsonStr)"
            :key="indexs"
            style="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="bankMsg.type !== 5 && bankMsg.type !== 4">
      <span class="span_sty">正确答案：</span>
      <div>
        <span v-if="bankMsg.type === 3">
          {{ bankMsg.answerQuestion == 1 ? "正确" : "错误" }}
        </span>
        <span v-else>
          {{ getDictChanges(bankMsg.answerQuestion) }}
        </span>
      </div>
    </div>
    <div class="dis_flex" v-if="bankMsg.type !== 4">
      <span class="span_sty">答案解析：</span>
      <div><div v-html="imgExiz(bankMsg.analysisContent)"></div></div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["bankMsg"],
  data() {
    return {};
  },
  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: {
    /**
     * 选项转换
     */
    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="less" scoped>
#bankMsg {
  width: 100%;
}
.dis_flex {
  display: flex;
  margin-bottom: 6px;
  & > span {
    width: 90px;
    flex-shrink: 0;
  }
  & > div {
    flex: 1;
    white-space: initial;
    ul {
      margin: 0;
    }
  }
}
.span_sty {
  font-weight: bold;
}
</style>