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

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="essayquestion-preview">
    <div class="stem">
      <span class="question-number">{{ data.property.question_number }}.</span>
      <span v-html="sanitizeHTML(data.stem)"></span>
    </div>
    <div v-if="isEnable(data.property.is_enable_description)" class="description">{{ data.description }}</div>

    <el-input
      v-model="answer.answer_list.value"
      rows="12"
      resize="none"
      type="textarea"
      placeholder="请输入"
      :maxlength="1000"
      show-word-limit
      @input="handleInput"
    />
    <SoundRecordPreview :wav-blob.sync="answer.answer_list.audio_file_id" />
    <UploadFiles
      :fille-number="999"
      file-type-name="文件"
      :upload-type="'*'"
      :file-id-list="answer.answer_list.accessory_file_id"
      upload-title="上传附件："
      @upload="handleUpload"
      @deleteFile="handleDelete"
    />
    <div v-if="isEnable(data.property.is_enable_reference_answer) && isShowRightAnswer" class="reference-box">
      <h5 class="reference-title">参考答案</h5>
      <span class="reference-answer" v-html="sanitizeHTML(data.reference_answer)"></span>
    </div>
  </div>
</template>

<script>
import PreviewMixin from './components/PreviewMixin';
import SoundRecordPreview from './components/common/SoundRecordPreview.vue';
import UploadFiles from './components/common/UploadFiles.vue';

export default {
  name: 'EssayQuestionPreview',
  components: {
    SoundRecordPreview,
    UploadFiles,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      answer: {
        answer_list: {
          audio_file_id: '',
          value: '',
          accessory_file_id: [],
        },
      },
    };
  },
  created() {},
  methods: {
    // 文件上传成功
    handleUpload(fileId) {
      this.answer.answer_list.accessory_file_id.push(fileId);
    },
    // 删除文件
    handleDelete(fileId) {
      this.answer.answer_list.accessory_file_id.splice(this.answer.answer_list.accessory_file_id.indexOf(fileId), 1);
    },
    handleInput(value) {
      if (value.length >= 1000) {
        this.$message.warning(`字数达到1000字！`);
      }
    },
  },
};
</script>

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

.essayquestion-preview {
  @include preview;

  :deep .sound-record-wrapper {
    justify-content: center;
  }

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

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