eep_page/src/views/book/courseware/create/components/question/article/CheckArticle.vue

<template>
  <div class="check-article">
    <div class="main">
      <div class="main-top">
        <b>校对</b>
        <div class="btn-box">
          <el-button @click="showWordFlag = true">校对分词</el-button>
          <el-button @click="showPinyinFlag = true">校对拼音</el-button>
          <el-button @click="showStyleFlag = true">校对样式</el-button>
        </div>
      </div>
      <div v-for="(item, index) in data.detail" :key="index + 'paragraph'" class="paragraph">
        <label>段 {{ index + 1 }}</label>
        <template v-if="data.type === 'article'">
          <div class="set-para">
            <span>对齐方式：</span>
            <el-radio-group v-model="item.paraAlign">
              <el-radio label="left">左对齐</el-radio>
              <el-radio label="center">居中对齐</el-radio>
              <el-radio label="right">右对齐</el-radio>
            </el-radio-group>
          </div>
          <div class="remark-box" @click="showRemark(index)"><SvgIcon icon-class="edit-line" />添加备注</div>
          <el-upload
            action="no"
            accept="image/*,video/*"
            :file-list="item.sourceList"
            :http-request="handleImage"
            :before-upload="handleBeforeImage"
            :on-exceed="handleExceed"
            :limit="1"
            :key="index"
            @click.native="handleItem(index)"
            class="upload-resource"
          >
            <div class="remark-box"><i class="el-icon-upload"></i>上传图片/视频</div>
          </el-upload>
          <div class="set-para">
            <span>图片/视频位置：</span>
            <el-radio-group v-model="item.sourcePosition">
              <el-radio label="before">段落前</el-radio>
              <el-radio label="after">段落后</el-radio>
            </el-radio-group>
          </div>
          <div class="set-para">
            <span class="adult-book-lable">图片宽度：</span>
            <el-input
              v-model="item.widthNumber"
              class="adult-book-input"
              placeholder="请输入宽度值"
              maxlength="200"
              style="width: 150px"
              @blur="onBlur(item, 'widthNumber')"
            />
            <span class="adult-book-lable">图片高度：</span>
            <el-input
              v-model="item.heightNumber"
              class="adult-book-input"
              placeholder="请输入高度值"
              maxlength="200"
              style="width: 150px"
              @blur="onBlur(item, 'heightNumber')"
            />
          </div>
        </template>
        <div v-for="(items, indexs) in item.sentenceStr" :key="indexs + 'words'" class="sentence-box">
          <div class="sentence">
            <b>{{ indexs + 1 }}.</b>
            <div class="sentence" v-html="items"></div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-if="showWordFlag"
      :visible.sync="showWordFlag"
      :show-close="true"
      :close-on-click-modal="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :lock-scroll="true"
      width="80%"
      class="practiceBox"
    >
      <CheckWord :data="data" @saveWord="saveWord" />
    </el-dialog>
    <el-dialog
      v-if="showPinyinFlag"
      :visible.sync="showPinyinFlag"
      :show-close="true"
      :close-on-click-modal="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :lock-scroll="true"
      width="80%"
      class="practiceBox"
    >
      <CheckPinyin :data="data" @savePinyin="savePinyin" />
    </el-dialog>
    <el-dialog
      v-if="showStyleFlag"
      :visible.sync="showStyleFlag"
      :show-close="true"
      :close-on-click-modal="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :lock-scroll="true"
      width="80%"
      class="practiceBox"
    >
      <CheckStyle :data="data" @saveStyle="saveStyle" />
    </el-dialog>
    <el-dialog title="标注" :visible.sync="remarkVisible" width="50%" :close-on-click-modal="false" append-to-body>
      <div v-if="remark" class="remark">
        <div class="adult-book-input-item">
          <span class="adult-book-lable">中文：</span>
          <!-- <el-input
              v-model="remark.chs"
              class="adult-book-input"
              type="textarea"
              :autosize="{ minRows: 2 }"
              placeholder="请输入中文"
              maxlength="200"
              show-word-limit
              @blur="onBlur(remark, 'chs')"
            /> -->
          <RichText
            ref="richText"
            v-model="remark.chs"
            toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
            :wordlimit-num="200"
            :font-size="data?.unified_attrib?.font_size"
            :font-family="data?.unified_attrib?.font"
          />
        </div>
        <div class="adult-book-input-item">
          <span class="adult-book-lable">英文：</span>
          <!-- <el-input
              class="adult-book-input"
              type="textarea"
              :autosize="{ minRows: 2 }"
              placeholder="请输入英文"
              v-model="remark.en"
              @blur="onBlur(remark, 'en')"
              maxlength="200"
              show-word-limit
            ></el-input> -->
          <RichText
            ref="richText"
            v-model="remark.en"
            toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
            :wordlimit-num="200"
            :font-size="data?.unified_attrib?.font_size"
            :font-family="data?.unified_attrib?.font"
          />
        </div>
        <div v-if="remark.img_list && remark.img_list.length == 0" class="adult-book-input-item">
          <el-upload action="no" accept="image/*" :show-file-list="false" :http-request="changeImage">
            <el-button>上传图片</el-button>
          </el-upload>
        </div>
        <ul v-if="remark.img_list && remark.img_list.length > 0" class="uploadArt_list">
          <li v-for="(artItem, artIndex) in remark.img_list" :key="'articleImgList' + artIndex">
            <img :src="artItem.url" style="width: 26px; margin-right: 5px" />
            <span class="art_name">{{ artItem.name }}</span>
            <SvgIcon icon-class="delete-black" size="14" @click="delImage(artIndex)" />
          </li>
        </ul>
        <div class="adult-book-input-item">
          <span class="adult-book-lable">图片宽度：</span>
          <el-input
            v-model="remark.widthNumber"
            class="adult-book-input"
            placeholder="请输入宽度值"
            maxlength="200"
            style="width: 150px"
            @blur="onBlur(remark, 'widthNumber')"
          />
          <span class="adult-book-lable">图片高度：</span>
          <el-input
            v-model="remark.heightNumber"
            class="adult-book-input"
            placeholder="请输入高度值"
            maxlength="200"
            style="width: 150px"
            @blur="onBlur(remark, 'heightNumber')"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="remarkVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRemark">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CheckWord from './CheckWord.vue';
import CheckPinyin from './CheckPinyin.vue';
import CheckStyle from './CheckStyle.vue';
import RichText from '@/components/RichText.vue';
import { fileUpload } from '@/api/app';

export default {
  components: {
    CheckWord,
    CheckPinyin,
    CheckStyle,
    RichText,
  },
  props: ['data'],
  data() {
    return {
      // ArticelData: JSON.parse(JSON.stringify(this.data)),
      showWordFlag: false,
      showPinyinFlag: false,
      showStyleFlag: false,
      remarkVisible: false,
      remark: null,
      activeItem: null,
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getArticleData();
  },
  methods: {
    // 获取分析结果
    getArticleData() {
      this.data.detail.forEach((item) => {
        if (item.segList && item.segList.length > 0) {
          item.sentenceStr = [];
          item.segList.forEach((items, indexs) => {
            let str = '';
            items.forEach((itemss, indexss) => {
              str += itemss;

              if (indexss !== items.length - 1) str += '&nbsp;&nbsp;';
            });
            item.sentenceStr.push(str);
          });
        }
      });
    },
    // 保存分词分段
    saveWord(saveArr) {
      this.$emit('saveWord', saveArr);
    },
    savePinyin(paraIndex, sentenceIndex, wordIndex, pinyin) {
      this.$emit('savePinyin', paraIndex, sentenceIndex, wordIndex, pinyin);
    },
    saveStyle(
      paraIndex,
      sentenceIndex,
      wordIndex,
      fontFamily,
      textDecoration,
      fontWeight,
      border,
      color,
      matchWords,
      matchNotes,
      img,
      imgPosition,
    ) {
      this.$emit(
        'saveStyle',
        paraIndex,
        sentenceIndex,
        wordIndex,
        fontFamily,
        textDecoration,
        fontWeight,
        border,
        color,
        matchWords,
        matchNotes,
        img,
        imgPosition,
      );
    },
    changeImage(file) {
      fileUpload('Mid', file, { isGlobalprogress: true }).then(({ file_info_list }) => {
        if (file_info_list.length > 0) {
          const { file_id, file_url_open, file_name } = file_info_list[0];
          this.remark.img_list.push({
            name: file_name,
            url: file_url_open,
            id: file_id,
            imgNumber: 0,
          });
        }
      });
    },
    delImage(index) {
      this.remark.img_list.splice(index, 1);
    },
    showRemark(index) {
      this.remark = this.data.detail[index].remark;
      this.paraIndex = index;
      this.remarkVisible = true;
    },
    saveRemark() {
      this.data.detail[this.paraIndex].remark = JSON.parse(JSON.stringify(this.remark));
      this.remarkVisible = false;
    },
    onBlur(item, field) {
      item[field] = item[field] ? item[field].trim() : '';
    },
    // 处理超出图片个数操作
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
      );
    },
    // 记录段落
    handleItem(index) {
      this.activeItem = this.data.detail[index];
    },
    // 图片上传前处理
    handleBeforeImage(file) {
      // 判断文件是否为图片
      if (!file.type.includes('image') && !file.type.includes('video')) {
        this.$message.error('请选择图片或视频文件');
        return false;
      }
    },
    // 图片上传
    handleImage(file) {
      fileUpload('Mid', file, { isGlobalprogress: true }).then(({ file_info_list }) => {
        if (file_info_list.length > 0) {
          this.activeItem.sourceList = file_info_list;
          this.activeItem.sourceList[0].name = file_info_list[0].file_name;
          this.activeItem.sourceList[0].type = file.file.type.includes('image') > -1 ? 'image' : 'video';
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.check-article {
  min-height: 100%;
  background: #f6f6f6;

  .wheader {
    background: #fff;
  }

  .main {
    background: #fff;

    &-top {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 24px;

      b {
        position: absolute;
        top: 0;
        left: 50%;
        width: 50px;
        margin-left: -25px;
        font-size: 24px;
        font-weight: 500;
        line-height: 34px;
        color: #000;
        text-align: center;
      }

      .el-button {
        padding: 5px 16px;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: #165dff;
        border: 1px solid #165dff;
        border-radius: 2px;

        &.el-button--primary {
          color: #fff;
          background: #165dff;
        }
      }
    }

    .go-back {
      display: flex;
      align-items: center;
      width: 60px;
      padding: 5px 8px;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #333;
      cursor: pointer;
      background: #fff;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      box-shadow: 0 2px 0 0 rgba(0, 0, 0, 2%);

      .el-icon-arrow-left {
        margin-right: 8px;
        font-size: 16px;
      }
    }

    .paragraph {
      margin-bottom: 8px;
      text-align: center;

      > label {
        padding: 1px 8px;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: var(--blue-05, #175dff);
        background: #e7eeff;
        border: 1px solid #175dff;
        border-radius: 2px;
      }

      .sentence-box {
        .sentence {
          display: flex;
          margin-top: 8px;

          b {
            flex-shrink: 0;
            width: 32px;
            margin-top: 16px;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            color: #000;
          }

          .sentence {
            flex: 1;
            padding: 8px;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            color: #000;
            text-align: left;
            background: #f7f7f7;
          }
        }
      }
    }
  }

  .set-para {
    margin-top: 8px;
    text-align: left;
  }
}

.remark-box {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 24px;
  padding: 2px 12px;
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px; /* 166.667% */
  color: #165dff;
  cursor: pointer;
  border: 1px solid #165dff;
  border-radius: 2px;
}

.upload-resource {
  text-align: left;
}
</style>