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

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="fill-form-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="form-wrapper">
      <div class="form" :style="{ width: `${data.property.form_width}px` }">
        <div v-if="isEnable(data.property.is_enable_table_header)" class="form-header">
          <div
            v-for="({ text, mark, width }, i) in data.option_header_list"
            :key="mark"
            :style="{
              borderLeft: isEnable(data.property.is_enable_number_column) || i > 0 ? '1px solid #e0e0e0' : 'none',
              width:
                isEnable(data.property.is_enable_number_column) && i === 0 ? `calc(${width}% - 39.5px)` : `${width}%`,
              marginLeft: isEnable(data.property.is_enable_number_column) && i === 0 ? '39.5px' : '0',
            }"
            class="header-item"
          >
            <span>{{ text }}</span>
          </div>
        </div>
        <div v-for="(item, i) in optionList" :key="i" class="form-content">
          <div
            v-for="(li, j) in item"
            :key="li.mark"
            :style="{ width: `${data.option_header_list[j].width}%` }"
            class="form-item"
          >
            <span v-if="j === 0 && isEnable(data.property.is_enable_number_column)" class="serial-number">
              {{ i + 1 }}
            </span>
            <div class="item-content" :style="{ paddingBottom: li.type === 'input' ? '0' : '8px' }">
              <span v-if="li.type === 'text'">{{ li.text }}</span>
              <template v-else-if="li.type === 'input'">
                <el-input
                  v-model="li.text"
                  :disabled="disabled"
                  type="textarea"
                  class="fill"
                  resize="none"
                  placeholder="请输入"
                  :style="[{ cursor: disabled ? 'not-allowed' : 'pointer' }]"
                  @blur="handleTone(li.text, i, j)"
                />
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="isEnable(data.property.is_enable_reference_answer) && isShowRightAnswer" class="reference-box">
      <h5 class="reference-title">参考答案</h5>
      <div class="form-wrapper">
        <div class="form" :style="{ width: `${data.property.form_width}px`, backgroundColor: '#fff' }">
          <div v-if="isEnable(data.property.is_enable_table_header)" class="form-header">
            <div
              v-for="({ text, mark, width }, i) in data.reference_answer_option_header_list"
              :key="mark"
              :style="{
                borderLeft: isEnable(data.property.is_enable_number_column) || i > 0 ? '1px solid #e0e0e0' : 'none',
                width:
                  isEnable(data.property.is_enable_number_column) && i === 0 ? `calc(${width}% - 39.5px)` : `${width}%`,
                marginLeft: isEnable(data.property.is_enable_number_column) && i === 0 ? '39.5px' : '0',
              }"
              class="header-item"
            >
              <span>{{ text }}</span>
            </div>
          </div>
          <div v-for="(item, i) in data.reference_answer_option_list" :key="i" class="form-content">
            <div
              v-for="(li, j) in item"
              :key="li.mark"
              :style="{ width: `${data.reference_answer_option_header_list[j].width}%` }"
              class="form-item"
            >
              <span v-if="j === 0 && isEnable(data.property.is_enable_number_column)" class="serial-number">
                {{ i + 1 }}
              </span>
              <div class="item-content">
                <span>{{ li.text }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="isEnable(data.property.is_enable_analysis) && isShowRightAnswer" class="analysis">
      <span class="analysis-title">解析</span>
      <div class="analysis-content" v-html="sanitizeHTML(data.analysis)"></div>
    </div>
  </div>
</template>

<script>
import PreviewMixin from './components/PreviewMixin';

import { addTone, handleToneValue } from '@/views/exercise_questions/data/common';

export default {
  name: 'TableFillPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      optionList: [],
    };
  },
  watch: {
    'data.option_list': {
      handler(val) {
        if (!val) return;
        this.optionList = JSON.parse(JSON.stringify(val));
      },
      immediate: true,
      deep: true,
    },
    optionList: {
      handler(val) {
        if (!val) return;
        this.optionList.forEach((item) => {
          item.forEach((li) => {
            if (['input'].includes(li.type)) {
              const findIndex = this.answer.answer_list.findIndex(({ mark }) => mark === li.mark);
              if (findIndex === -1 && li.text.length <= 0) return;
              if (findIndex !== -1 && li.text.length <= 0) {
                this.answer.answer_list.splice(findIndex, 1);
                return;
              }
              if (findIndex === -1) {
                this.answer.answer_list.push({
                  mark: li.mark,
                  value: li.text,
                });
                return;
              }
              if (findIndex !== -1) {
                this.answer.answer_list[findIndex].value = li.text;
              }
            }
          });
        });
      },
      immediate: true,
      deep: true,
    },
    isJudgingRightWrong(val) {
      if (!val) return;
      this.answer.answer_list.forEach(({ mark, value }) => {
        const parentIndex = this.optionList.findIndex((item) => item.find((li) => li.mark === mark));
        if (parentIndex === -1) return;
        const childIndex = this.optionList[parentIndex].findIndex((item) => item.mark === mark);
        this.optionList[parentIndex][childIndex].text = value;
      });
    },
  },
  methods: {
    handleTone(value, i, j) {
      this.optionList[i][j].text = value
        .trim()
        .split(/\s+/)
        .map((item) => {
          return handleToneValue(item);
        })
        .map((item) =>
          item.map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || '')),
        )
        .filter((item) => item.length > 0)
        .join(' ');
    },
  },
};
</script>

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

$table-border: 1px solid #e0e0e0;

.fill-form-preview {
  @include preview;

  .form-wrapper {
    overflow: auto;

    .form {
      border: $table-border;

      &-header {
        display: flex;
        font-weight: bold;
        color: $main-color;
        background-color: #eaeffb;

        .header-item {
          min-height: 40px;
          padding: 8px 12px;
          font-size: 16px;
          text-align: center;
        }
      }

      &-header + .form-content {
        border-top: $table-border;
      }

      &-content:not(:last-child) {
        border-bottom: $table-border;
      }

      &-content {
        display: flex;

        .form-item:not(:first-child) {
          border-left: $table-border;
        }

        .form-item {
          display: flex;
          align-items: center;
          min-height: 48px;
          overflow: auto;

          .item-content {
            flex: 1;
            padding: 8px 12px;
          }

          .el-textarea.fill {
            display: inline-flex;
            align-items: center;
            margin: 0 2px;

            :deep .el-textarea__inner {
              padding: 0;
              padding-top: 14px;
              font-size: 16px;
              color: $font-color;
              text-align: left;
              background-color: #fff;
              border-width: 0;
              border-radius: 0;
            }
          }
        }
      }

      .serial-number {
        display: flex;
        align-items: center;
        width: 40px;
        min-width: 40px;
        max-width: 40px;
        height: 100%;
        padding: 8px 12px;
        border-right: $table-border;
      }
    }
  }
}
</style>