paper-library-client/src/modules/client/components/OcrAreaSetDialog.vue

<template>
  <el-dialog
    class="ocr-area-dialog"
    :visible.sync="modalIsShow"
    fullscreen
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    append-to-body
    @opened="dialogOpened"
    @closed="dialogClosed"
  >
    <div class="ocr-area-head">
      <h3>条码识别区设置</h3>
      <div>
        <el-button type="primary" @click="confirm">确认</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </div>

    <div class="ocr-area-body">
      <div class="ocr-area-cont">
        <img :src="curImageUrl" ref="editImage" />
      </div>
      <div class="ocr-area-side">
        <div class="ocr-area-preview">
          <div class="ocr-area-spin">
            <div
              class="ocr-area-spin-img"
              :style="spinStyle"
              ref="OcrAreaSpinImg"
            ></div>
          </div>
          <div
            class="ocr-area-icon"
            title="顺时针旋转90度"
            @click="toRotateSpin"
          >
            <i class="icon icon-rotate-right-act"></i>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Cropper from "cropperjs";
import db from "@/plugins/db";
import {
  getPreUploadFiles,
  renamePreUploadJsonFile
} from "../../../plugins/imageOcr";
import { evokeScanner } from "../../../plugins/scanner";

export default {
  name: "ocr-area-set",
  data() {
    return {
      modalIsShow: false,
      cropper: "",
      rotate: 0,
      spinStyle: {},
      ocrArea: {},
      curImageUrl: ""
    };
  },
  methods: {
    close() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async dialogOpened() {
      await this.evokeScanExe();
      await this.initData();
      this.initCropper();
      renamePreUploadJsonFile(this.GLOBAL.input);
    },
    async evokeScanExe() {
      await evokeScanner(this.GLOBAL.input).catch(error => {
        console.error(error);
      });
    },
    async initData() {
      const ocrArea = await db.getDict("ocrArea", "").catch(() => {});
      this.ocrArea = ocrArea ? JSON.parse(ocrArea) : {};

      const res = getPreUploadFiles(this.GLOBAL.input);
      console.log(res);
      if (!res.succeed) {
        this.$message.error(res.errorMsg);
        return;
      }
      this.curImageUrl = "file:///" + res.data[0].frontFile;
    },
    initCropper() {
      const _this = this;
      let defCodeArea = { ...this.ocrArea };
      this.rotate = this.ocrArea.rotate || 0;
      delete defCodeArea.rotate;

      this.spinStyle = {
        transform: `translate(-50%, -50%) rotate(${this.rotate}deg)`
      };

      this.cropper = new Cropper(this.$refs.editImage, {
        viewMode: 1,
        checkCrossOrigin: false,
        zoomable: false,
        minCropBoxWidth: 10,
        minCropBoxHeight: 10,
        preview: _this.$refs.OcrAreaSpinImg,
        ready() {
          _this.cropper.setData(defCodeArea);
          // _this.$emit("on-ready");
        }
      });
    },
    toRotateSpin() {
      this.rotate += 90;
      if (this.rotate === 360) this.rotate = 0;

      this.spinStyle = {
        transform: `translate(-50%, -50%) rotate(${this.rotate}deg)`
      };
    },
    confirm() {
      const ocrArea = {
        ...this.cropper.getData(),
        rotate: this.rotate
      };
      db.setDict("ocrArea", JSON.stringify(ocrArea));
      this.$store.commit("client/setOcrArea", ocrArea);
      this.$emit("modified", ocrArea);
      this.close();
    },
    dialogClosed() {
      if (this.cropper) {
        this.cropper.destroy();
        this.cropper = false;
      }
    }
  },
  beforeDestroy() {
    if (this.cropper) {
      this.cropper.destroy();
      this.cropper = false;
    }
  }
};
</script>