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

<template>
  <div class="check-article">
    <div class="main">
      <div v-for="(item, index) in data.detail" :key="index + 'paragraph'" class="paragraph">
        <label>段 {{ index + 1 }}</label>
        <template v-if="data.type === 'article'">
          <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.wordsList" :key="indexs + 'words'" class="sentence-box">
          <div class="sentence">
            <b>{{ indexs + 1 }}.</b>
            <div class="sentence">
              <span v-for="(itemss, indexss) in items" :key="indexss" class="sentence-item" @click="showPic(itemss)">
                {{ itemss.chs }}
                <img
                  v-if="itemss.img && itemss.img.length > 0"
                  style="height: 16px"
                  :src="itemss.img[0].file_url_open"
                />
                <div :contenteditable="true" class="sentence-pic"></div>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="上传图片" :visible.sync="remarkVisible" width="50%" :close-on-click-modal="false" append-to-body>
      <template v-if="itemActive">
        <el-upload
          action="no"
          accept="image/*,video/*"
          :file-list="itemActive.img"
          :http-request="handleImages"
          :before-upload="handleBeforeImages"
          :on-exceed="handleExceeds"
          :limit="1"
          class="upload-resource"
        >
          <div class="remark-box"><i class="el-icon-upload"></i>上传图片</div>
        </el-upload>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="remarkVisible = false">取 消</el-button>
        <el-button type="primary" @click="remarkVisible = false">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fileUpload } from '@/api/app';

export default {
  components: {},
  props: ['data'],
  data() {
    return {
      // ArticelData: JSON.parse(JSON.stringify(this.data)),
      showWordFlag: false,
      showPinyinFlag: false,
      showStyleFlag: false,
      remarkVisible: false,
      remark: null,
      activeItem: null,
      itemActive: 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);
          });
        }
      });
    },

    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);
    },
    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';
        }
      });
    },
    // 处理超出图片个数操作
    handleExceeds(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
      );
    },
    // 图片上传前处理
    handleBeforeImages(file) {
      // 判断文件是否为图片
      if (!file.type.includes('image')) {
        this.$message.error('请选择图片文件');
        return false;
      }
    },
    // 图片上传
    handleImages(file) {
      fileUpload('Mid', file, { isGlobalprogress: true }).then(({ file_info_list }) => {
        if (file_info_list.length > 0) {
          this.itemActive.img = file_info_list;
          this.itemActive.img[0].name = file_info_list[0].file_name;
        }
      });
    },
    showPic(item) {
      this.itemActive = item;
      this.remarkVisible = true;
    },
  },
};
</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;
}

.sentence-item {
  display: flex;
  flex-flow: wrap;
  align-items: center;
}

.sentence-pic {
  width: 10px;
  text-align: center;
}
</style>