teachcloud-print-web/src/modules/mark/components/ModifyPaperArea.vue

<template>
  <el-dialog
    class="modify-mark-area"
    :visible.sync="modalIsShow"
    top="0"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    fullscreen
    :show-close="false"
    @open="visibleChange"
  >
    <div class="box-justify" slot="title">
      <h2 class="el-dialog__title">设置遮盖区域</h2>
      <div>
        <el-button type="success" @click="confirm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </div>
    <div class="tips-info">
      <i class="el-icon-warning"></i>
      按住鼠标左键拖动，框选遮盖区。可以设置多个遮盖区。
    </div>
    <div v-if="modalIsShow" class="area-container">
      <area-cropper
        v-for="(paper, index) in papers"
        :id="`area-cropper-${index}`"
        :imgUrl="paper.imgUrl"
        ref="AreaCropper"
        :key="paper.imgUrl"
        :paper="paper"
        @curarea-change="cropperCurareaChange"
        @change="(areas) => areaChange(index, areas)"
        @paper-load="() => areaPaperLoaded(index)"
      ></area-cropper>
    </div>

    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import AreaCropper from "./markParam//areaCropper/AreaCropper.vue";

export default {
  name: "modify-paper-area",
  components: { AreaCropper },
  props: {
    areaConfigs: {
      type: Array,
      default() {
        return [];
      },
    },
    paperList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      papers: [],
      paperLoadedList: [],
    };
  },
  methods: {
    visibleChange() {
      this.paperLoadedList = [];
      this.papers = this.paperList.map((paper) => {
        let npaper = { ...paper };
        npaper.areas = [];
        return npaper;
      });
      this.areaConfigs.forEach((config) => {
        const index = config.i - 1;
        this.papers[index].areas.push({ ...config });
      });
    },
    areaPaperLoaded(paperIndex) {
      if (this.paperLoadedList.includes(paperIndex)) return;
      this.paperLoadedList.push(paperIndex);
      if (this.paperLoadedList.length === this.paperList.length) {
        this.scrollToFirstArea();
      }
    },
    scrollToFirstArea() {
      if (!this.areaConfigs.length) return;
      let paperIndexs = this.areaConfigs.map((item) => item.i - 1);
      paperIndexs.sort((a, b) => a - b);
      const firstPaperIndex = paperIndexs[0];

      this.$nextTick(() => {
        const areaCropperDom = document.getElementById(
          `area-cropper-${firstPaperIndex}`
        );
        let areaItems = areaCropperDom.querySelectorAll(".element-resize");
        let firstAreaItem = null;
        let topNum = 9999;
        for (let i = 0; i < areaItems.length; i++) {
          const element = areaItems[i];
          if (element.offsetTop < topNum) {
            topNum = element.offsetTop;
            firstAreaItem = element;
          }
        }
        // console.log(firstAreaItem);
        const scrollTop =
          areaCropperDom.offsetTop + firstAreaItem.offsetTop - 100;
        this.$el.querySelector(".el-dialog").scrollTop = scrollTop;
      });
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    areaChange(index, areas) {
      this.papers[index].areas = areas;
    },
    cropperCurareaChange(area) {
      this.$refs.AreaCropper.forEach((cropper) => {
        cropper.curareaChange(area);
      });
    },
    confirm() {
      let areas = [];
      this.papers.forEach((paper, pindex) => {
        if (!paper.areas.length) return;
        paper.areas.forEach((area) => {
          const narea = {
            i: pindex + 1,
            x: area.x,
            y: area.y,
            w: area.w,
            h: area.h,
          };
          areas.push(narea);
        });
      });
      this.$emit("modified", areas);
      this.cancel();
    },
  },
};
</script>