eep_page/src/views/book/courseware/create/components/question/write/Write.vue

<template>
  <ModuleBase :type="data.type">
    <template #content>
      <!-- eslint-disable max-len -->
      <div class="write-wrapper">
        <template v-if="data.property.content_type === 'con'">
          <el-input v-model="data.content" placeholder="输入" type="textarea" @change="handleChangeContent"></el-input>
          <span class="tips">输入字或词请一字一行</span>
        </template>
        <template v-else>
          <UploadFile
            :courseware-id="courseware_id"
            :component-id="id"
            :type="'picture'"
            :single-size="data.single_size"
            :total-size="data.total_size"
            :file-list="data.file_list"
            :file-id-list="data.file_id_list"
            :file-info-list="data.file_info_list"
            :label-text="labelText"
            :accept-file-type="acceptFileType"
            :upload-tip="uploadTip"
            :icon-class="iconClass"
            @updateFileList="updateFileList"
          />
        </template>
        <template v-if="data.content_list.length > 0">
          <el-divider content-position="left">拼音效果</el-divider>
          <div class="content-list">
            <div
              v-for="(item, index) in data.content_list"
              :key="index"
              title="点击校对拼音"
              @click="correctPinyin1(item.con, index)"
            >
              <span>{{ item.pinyin }}</span>
              <b>{{ item.con }}</b>
            </div>
          </div>
        </template>
        <CorrectPinyin :visible.sync="visible" :select-content="selectContent" @fillTonePinyin="fillTonePinyin" />
      </div>
    </template>
  </ModuleBase>
</template>

<script>
import ModuleMixin from '../../common/ModuleMixin';
import SoundRecord from '@/views/book/courseware/create/components/question/fill/components/SoundRecord.vue';
import UploadAudio from '@/views/book/courseware/create/components/question/fill/components/UploadAudio.vue';
import UploadFile from '@/views/book/courseware/create/components/base/common/UploadFile.vue';

import { getWriteData } from '@/views/book/courseware/data/write';
import { GetStaticResources } from '@/api/app';
import cnchar from 'cnchar';
import { getRandomNumber } from '@/utils';
import CorrectPinyin from '@/views/book/courseware/create/components/base/common/CorrectPinyin.vue';

export default {
  name: 'WritePage',
  components: {
    SoundRecord,
    UploadAudio,
    UploadFile,
    CorrectPinyin,
  },
  mixins: [ModuleMixin],
  data() {
    return {
      data: getWriteData(),
      labelText: '图片',
      acceptFileType: '.png,.jpg',
      uploadTip:
        'The size of the uploaded image should not exceed 2MB, the size of the uploaded audio file, pdf file, and excel file should not exceed 20MB, and the size of the uploaded audio file should not exceed 20MB',
      iconClass: 'picture',
      visible: false,
      selectContent: '',
      paragraph_index: 0,
    };
  },
  methods: {
    // 解析输入内容
    handleChangeContent() {
      if (this.data.content.trim()) {
        let contentArr = this.data.content.split('\n');
        let contentList = [];
        contentArr.forEach((item, index) => {
          if (item.trim()) {
            let content_arr = item.trim().split('');
            let content_arrs = [];
            let content_arr_strokes = [];
            content_arr.forEach((itemc) => {
              if (itemc.trim()) {
                content_arrs.push(itemc.trim());
              }
            });
            content_arrs.forEach((itemc, indexc) => {
              content_arr_strokes.push(null);
              let MethodName = 'hz_resource_manager-GetHZStrokesContent';
              let data = {
                hz: itemc,
              };
              GetStaticResources(MethodName, data).then((res) => {
                let obj = {
                  hz: itemc.trim(),
                  strokes: res,
                };
                content_arr_strokes[indexc] = obj;
              });
            });
            contentList.push({
              con: item.trim(),
              pinyin: cnchar.spell(item.trim(), 'array', 'low', 'tone').join(' '),
              audio_file_id: '',
              hz_strokes_list: content_arr_strokes,
              mark: getRandomNumber(),
            });
            this.handleMatic(item.trim(), contentList.length - 1);
          }
        });
        this.data.content_list = contentList;
      } else {
        this.data.content_list = [];
      }
    },
    // 自动生成音频
    handleMatic(con, index) {
      GetStaticResources('tool-TextToVoiceFile', {
        text: con.replace(/<[^>]+>/g, ''),
      })
        .then(({ status, file_id }) => {
          if (status === 1) {
            this.data.content_list[index].audio_file_id = file_id;
          }
        })
        .catch(() => {});
    },
    updateFileList({ file_list, file_id_list, file_info_list }) {
      file_list.forEach((item) => {
        item.mark = getRandomNumber();
      });
      this.data.file_list = file_list;
      this.data.file_id_list = file_id_list;
      this.data.file_info_list = file_info_list;
    },
    // 校对拼音
    correctPinyin1(text, i) {
      if (text) {
        this.visible = true;
        this.selectContent = text;
        this.paragraph_index = i;
      }
    },
    // 回填校对后的拼音
    fillTonePinyin(tonePinyin) {
      this.data.content_list[this.paragraph_index].pinyin = tonePinyin;
      let MethodName = 'tool-PinyinToVoiceFile';
      let data = {
        pinyin: tonePinyin.split(' ').join(','),
      };
      GetStaticResources(MethodName, data)
        .then((res) => {
          if (res.status === 1) {
            this.data.content_list[this.paragraph_index].audio_file_id = res.file_id;
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.write-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  align-items: flex-start;

  :deep .rich-wrapper {
    width: 100%;
  }

  .tips {
    font-size: 12px;
    color: #999;
  }

  .content-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 8px;

    div {
      text-align: center;
      cursor: pointer;

      span {
        font-family: 'League';
      }

      b {
        display: block;
        font-family: '楷体';
        font-weight: normal;
      }
    }
  }

  .auto-matic,
  .upload-audio-play {
    :deep .upload-wrapper {
      margin-top: 0;
    }

    .audio-wrapper {
      :deep .audio-play {
        width: 16px;
        height: 16px;
        color: #000;
        background-color: initial;
      }

      :deep .audio-play.not-url {
        color: #a1a1a1;
      }

      :deep .voice-play {
        width: 16px;
        height: 16px;
      }
    }
  }

  .auto-matic {
    display: flex;
    flex-shrink: 0;
    column-gap: 12px;
    align-items: center;
    width: 200px;
    padding: 5px 12px;
    background-color: $fill-color;
    border-radius: 2px;

    .auto-btn {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      color: #1d2129;
      cursor: pointer;
    }
  }

  .correct-answer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .el-input {
      width: 180px;

      :deep &__prefix {
        display: flex;
        align-items: center;
        color: $text-color;
      }
    }
  }
}
</style>