GCLS_Page_Exercise/src/views/exercise_questions/preview/WritePictruePreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div v-if="show_preview" class="writepicture-preview">
    <div class="stem">
      <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
        {{ questionNumberEndIsBracket(data.property.question_number) }}
      </span>
      <span v-html="sanitizeHTML(data.stem)"></span>
    </div>
    <div
      v-if="isEnable(data.property.is_enable_description)"
      class="description rich-text"
      v-html="sanitizeHTML(data.description)"
    ></div>
    <div class="content">
      <div v-for="(item, index) in data.option_list" :key="index" class="content-item">
        <!-- <el-image
          v-if="pic_list[item.picture_file_id]"
          style="width: 370px; height: 238px"
          :src="pic_list[item.picture_file_id]"
          fit="contain"
        /> -->
        <div class="img-box">
          <img
            v-if="pic_list[item.picture_file_id]"
            :src="pic_list[item.picture_file_id]"
            style="max-width: 370px; max-height: 238px"
          />
        </div>
        <p class="pic-info rich-text" v-html="sanitizeHTML(item.picture_info)"></p>
      </div>
    </div>

    <div v-if="answer.answer_list[active_index]" class="content-right">
      <el-input
        v-model="answer.answer_list[active_index].text"
        class="write-input"
        rows="12"
        resize="none"
        type="textarea"
        placeholder="请输入"
        :maxlength="data.property.word_num"
        show-word-limit
        :readonly="disabled"
        :autosize="{ minRows: 5 }"
        @input="handleInput"
      />
    </div>
    <template v-if="isEnable(data.property.is_enable_upload_accessory)">
      <!-- 上传附件 -->
      <UploadFiles
        v-if="answer.answer_list[active_index]"
        :disabled="disabled"
        :fille-number="999"
        file-type-name="文件"
        :upload-type="'*'"
        :file-id-list="answer.answer_list[active_index].accessory_file_id"
        @upload="handleUpload"
        @deleteFile="handleDelete"
      />
    </template>
    <template v-if="isEnable(data.property.is_enable_sample_text) && isShowRightAnswer">
      <el-divider content-position="center"
        ><span
          :class="['sample-text', show_sample_text ? 'sample-show' : 'sample-hide']"
          @click="show_sample_text = !show_sample_text"
          >{{ show_sample_text ? '隐藏范文' : '查看范文' }}</span
        ></el-divider
      >
      <div v-if="show_sample_text" class="article-content rich-text" v-html="sanitizeHTML(data.sample_text)"></div>
    </template>
  </div>
</template>

<script>
import PreviewMixin from './components/PreviewMixin';
import { GetFileStoreInfo } from '@/api/app';

import UploadFiles from './components/common/UploadFiles.vue';

export default {
  name: 'WritePicturePreview',
  components: {
    UploadFiles,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      show_sample_text: false,
      pic_list: {},
      active_index: 0,
      show_preview: false,
    };
  },
  watch: {
    data: {
      handler(val) {
        if (!val || this.data.type !== 'write_picture') return;
        this.handleData();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 初始化数据
    handleData() {
      this.show_preview = true;
      this.pic_list = {};
      this.active_index = 0;
      this.data.file_id_list.forEach((item) => {
        GetFileStoreInfo({ file_id: item }).then(({ file_id, file_url }) => {
          this.$set(this.pic_list, file_id, file_url);
        });
      });
      if (!this.isJudgingRightWrong) {
        let obj = {
          text: '',
          accessory_file_id: [], // 上传文件列表
        };
        this.answer.answer_list.push(obj);
      }
    },
    changeImg(index) {
      this.active_index = index;
    },
    // 文件上传成功
    handleUpload(fileId) {
      this.answer.answer_list[this.active_index].accessory_file_id.push(fileId);
    },
    // 删除文件
    handleDelete(fileId) {
      this.answer.answer_list[this.active_index].accessory_file_id.splice(
        this.answer.answer_list[this.active_index].accessory_file_id.indexOf(fileId),
        1,
      );
    },
    handleInput(value) {
      if (value.length >= this.data.property.word_num) {
        this.$message.warning(`字数达到${value.length}字！`);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.writepicture-preview {
  @include preview;

  :deep p {
    margin: 0;
  }

  .content {
    display: flex;
    column-gap: 8px;
    width: 100%;
    padding-bottom: 24px;
    overflow: auto;

    .img-box {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 238px;
    }

    .pic-title {
      margin: 8px 0 4px;
      font-size: 12px;
      font-weight: 600;
      line-height: 20px;
      color: #000;
      word-break: break-word;
    }

    .pic-info {
      margin: 0;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
      word-break: break-word;
    }
  }

  .reference-box {
    padding: 12px;
    background: #f9f8f9;

    .reference-title {
      margin: 0 0 10px;
      font-size: 14px;
      font-weight: 400;
      line-height: 32px;
      color: #4e5969;
    }
  }

  .el-divider--horizontal {
    margin: 12px 0;
  }

  .sample-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    color: #000;
    cursor: pointer;

    &.sample-show {
      color: $light-main-color;
    }
  }

  .article-content,
  .description {
    :deep p {
      margin: 0;
    }
  }

  .write-input {
    font-size: 16px;
  }

  :deep .el-textarea .el-textarea__inner {
    padding-bottom: 25px;
  }

  :deep .el-textarea .el-input__count {
    bottom: 5px;
    font-size: 14px;
    background-color: #f2f3f5;
  }
}

/* 横向滚动条 */
::-webkit-scrollbar {
  height: 5px;
  background-color: #f5f5f5;
}

/* 横向滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 2px;
}

/* 鼠标悬停在滚动条上的滑块 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
</style>