图片旋转修改以及预览调整

src/components/SimpleImagePreview.vue

@@ -32,7 +32,7 @@
           { [`${prefixCls}-imgs-nosition`]: nosition }
         ]"
         :style="styles"
-        v-move-ele.prevent.stop="{ mouseMove, mouseWheel }"
+        v-move-ele.prevent.stop="{ mouseMove, click: cancel }"
         v-if="modalIsShow"
       >
         <img

src/components/move-ele.js

@@ -5,8 +5,10 @@ export default {
     let [oleft, otop] = [0, 0];
     // 元素移动后的left,top
     let [left, top] = [0, 0];
+    let isDrag = false;
 
     let moveHandle = function(e) {
+      isDrag = true;
       if (modifiers.prevent) {
         e.preventDefault();
       }
@@ -29,9 +31,12 @@ export default {
       otop = top;
 
       if (value && value.mouseUp) value.mouseUp({ oleft, otop });
+      if (value && value.click && !isDrag) value.click();
 
       document.removeEventListener("mousemove", moveHandle);
       document.removeEventListener("mouseup", upHandle);
+
+      isDrag = false;
     };
 
     el.addEventListener("mousedown", function(e) {

src/modules/manage/components/ImageActionList.vue

@@ -1,148 +0,0 @@
-<template>
-  <div :class="classes">
-    <div class="image-view" v-for="(image, index) in data" :key="image.id">
-      <div class="image-view-container">
-        <h5 class="image-view-title">{{ image.title }}</h5>
-        <div class="image-view-contain" :style="image.styles">
-          <img
-            :src="image.thumbSrc"
-            :alt="image.title"
-            @click="toReview(index)"
-          />
-        </div>
-        <div class="image-view-actions" v-if="actions.length">
-          <Button
-            class="view-action-save"
-            size="small"
-            type="primary"
-            @click="toSaveRotate(image)"
-            :disabled="saving"
-            v-if="canRotate && image['stepDeg']"
-            >保存</Button
-          >
-          <Button
-            class="view-action-rotate"
-            size="small"
-            icon="md-refresh"
-            @click="toRotate(image)"
-            v-if="canRotate"
-          ></Button>
-          <Button
-            class="view-action-absent"
-            :type="image.missing ? 'error' : 'default'"
-            size="small"
-            @click="toSignAbsent(image)"
-            v-if="canAbsent"
-            >缺考</Button
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { absentPaper, absentLocalPaper } from "../api";
-import { toUploadImg } from "@/plugins/imageUpload";
-import { rotateImage } from "@/plugins/imageOcr";
-
-export default {
-  name: "image-action-list",
-  props: {
-    data: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    actions: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    columnNumber: {
-      type: Number,
-      default: 5
-    }
-  },
-  data() {
-    return {
-      curImageIndex: 0,
-      stepDeg: 0,
-      saving: false
-    };
-  },
-  computed: {
-    classes() {
-      return [
-        "image-action-list",
-        "image-view-list",
-        `image-view-list-${this.columnNumber}`
-      ];
-    },
-    canRotate() {
-      return this.actions.includes("rotate");
-    },
-    canAbsent() {
-      return this.actions.includes("absent");
-    }
-  },
-  methods: {
-    toRotate(image) {
-      if (!image["stepDeg"]) this.$set(image, "stepDeg", 0);
-      image.deg += 90;
-      if (image.deg === 360) image.deg = 0;
-      image.stepDeg += 90;
-      if (image.stepDeg === 360) image.stepDeg = 0;
-      image.styles = {
-        transform: `rotate(${image.deg}deg)`
-      };
-    },
-    async toSaveRotate(image) {
-      if (this.saving) return;
-      if (!image.stepDeg) return;
-      this.saving = true;
-
-      let result = await this.rotatePaper(image).catch(() => {
-        result = false;
-      });
-      this.saving = false;
-      if (!result) return;
-      image.stepDeg = 0;
-      this.$Message.success("保存成功！");
-    },
-    async toSignAbsent(image) {
-      if (!image.paperId) {
-        this.$Message.error("图片数据有误或没有上传，无法标记缺考！");
-        return;
-      }
-      await absentPaper(image.paperId);
-      await absentLocalPaper(image.id, image.missing ? 0 : 1);
-      image.missing = !image.missing;
-    },
-    toReview(index) {
-      this.$emit("on-review", index);
-    },
-    async rotatePaper(image) {
-      console.log(image);
-      const imagePath = await rotateImage(
-        image.sliceImgPath,
-        image.stepDeg
-      ).catch(() => {
-        this.$Message.error("图片旋转失败，请重新尝试！");
-      });
-
-      if (!imagePath) return;
-
-      let uploadSliceRes = true;
-      await toUploadImg(image, "slice").catch(() => {
-        uploadSliceRes = false;
-        this.$Message.error("保存图片失败！");
-      });
-
-      return uploadSliceRes;
-    }
-  }
-};
-</script>

src/modules/manage/components/SimpleImagePreview.vue

@@ -1,237 +0,0 @@
-<template>
-  <Modal
-    :class="prefixCls"
-    v-model="modalIsShow"
-    title="图片预览"
-    fullscreen
-    footer-hide
-    @on-visible-change="visibleChange"
-  >
-    <div slot="header"></div>
-    <div :class="[`${prefixCls}-close`]" @click="cancel">
-      <i class="el-icon-circle-close"></i>
-      <Icon type="ios-close" />
-    </div>
-
-    <div :class="[`${prefixCls}-body`]" ref="ReviewBody" @click="cancel">
-      <div
-        :class="[`${prefixCls}-guide`, `${prefixCls}-guide-prev`]"
-        @click.stop="showPrev"
-      >
-        <Icon type="ios-arrow-back" />
-      </div>
-      <div
-        :class="[`${prefixCls}-guide`, `${prefixCls}-guide-next`]"
-        @click.stop="showNext"
-      >
-        <Icon type="ios-arrow-forward" />
-      </div>
-      <div
-        :class="[
-          `${prefixCls}-imgs`,
-          { [`${prefixCls}-imgs-nosition`]: nosition }
-        ]"
-        :style="styles"
-        v-show="!loading && curImage.imgSrc"
-        v-if="modalIsShow"
-      >
-        <img
-          :src="curImage.imgSrc"
-          :alt="curImage.name"
-          ref="PreviewImgDetail"
-        />
-      </div>
-      <div :class="[`${prefixCls}-none`]" v-if="!curImage.imgSrc">
-        <Icon type="md-image" />
-        <p>暂无数据</p>
-      </div>
-    </div>
-
-    <div :class="[`${prefixCls}-footer`]">
-      <ul>
-        <li title="旋转" @click.stop="toRotate">
-          <Icon type="ios-refresh-circle" />
-        </li>
-      </ul>
-    </div>
-
-    <div :class="[`${prefixCls}-loading`]" v-show="loading">
-      <Icon class="ivu-load-loop" type="ios-loading" />
-    </div>
-  </Modal>
-</template>
-
-<script>
-const prefixCls = "cc-image-preview";
-
-export default {
-  name: "simple-image-preview",
-  props: {
-    curImage: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
-  },
-  data() {
-    return {
-      prefixCls,
-      modalIsShow: false,
-      styles: { width: "", height: "", top: "", left: "", transform: "" },
-      initWidth: 500,
-      transform: {
-        scale: 1,
-        rotate: 0
-      },
-      loading: false,
-      loadingSetT: null,
-      nosition: false
-    };
-  },
-  // watch: {
-  //   "curImage.imgSrc": {
-  //     handler(val) {
-  //       if (val) this.loading = true;
-  //     }
-  //   }
-  // },
-  methods: {
-    visibleChange(visible) {
-      if (!visible) return;
-      // this.loading = true;
-      this.$nextTick(() => {
-        this.registfileLoad();
-      });
-    },
-    registfileLoad() {
-      const imgDom = this.$refs.PreviewImgDetail;
-      imgDom.onload = () => {
-        this.rezizeImage(imgDom);
-      };
-    },
-    rezizeImage(imgDom) {
-      const { naturalWidth, naturalHeight } = imgDom;
-      const imageSize = this.getImageSizePos({
-        win: {
-          width: this.$refs.ReviewBody.clientWidth,
-          height: this.$refs.ReviewBody.clientHeight
-        },
-        img: {
-          width: naturalWidth,
-          height: naturalHeight
-        },
-        rotate: 0
-      });
-
-      this.styles = Object.assign(this.styles, {
-        width: imageSize.width + "px",
-        height: imageSize.height + "px",
-        top: imageSize.top + "px",
-        left: imageSize.left + "px",
-        transform: ""
-      });
-      this.transform = {
-        scale: 1,
-        rotate: 0
-      };
-      // this.loading = false;
-      console.log(11);
-      setTimeout(() => {
-        this.nosition = false;
-      }, 100);
-    },
-    getImageSizePos({ win, img, rotate }) {
-      const imageSize = {
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0
-      };
-      const isHorizontal = !!(rotate % 180);
-
-      const rateWin = isHorizontal
-        ? win.height / win.width
-        : win.width / win.height;
-      const hwin = isHorizontal
-        ? {
-            width: win.height,
-            height: win.width
-          }
-        : win;
-
-      const rateImg = img.width / img.height;
-
-      if (rateImg <= rateWin) {
-        imageSize.height = Math.min(hwin.height, img.height);
-        imageSize.width = Math.floor(
-          (imageSize.height * img.width) / img.height
-        );
-      } else {
-        imageSize.width = Math.min(hwin.width, img.width);
-        imageSize.height = Math.floor(
-          (imageSize.width * img.height) / img.width
-        );
-      }
-      imageSize.left = (win.width - imageSize.width) / 2;
-      imageSize.top = (win.height - imageSize.height) / 2;
-      return imageSize;
-    },
-    cancel() {
-      this.modalIsShow = false;
-      this.$emit("on-close");
-    },
-    open() {
-      this.modalIsShow = true;
-    },
-    showPrev() {
-      this.$emit("on-prev");
-      // this.initData();
-    },
-    showNext() {
-      this.$emit("on-next");
-      // this.initData();
-    },
-    // dome-move
-    setStyleTransform() {
-      const { scale, rotate } = this.transform;
-      this.styles.transform = `scale(${scale}, ${scale}) rotate(${rotate}deg)`;
-    },
-    toRotate() {
-      this.transform.rotate = this.transform.rotate + 90;
-      this.setStyleTransform();
-      // 调整图片尺寸
-      const { naturalWidth, naturalHeight } = this.$refs.PreviewImgDetail;
-      const imageSize = this.getImageSizePos({
-        win: {
-          width: this.$refs.ReviewBody.clientWidth,
-          height: this.$refs.ReviewBody.clientHeight
-        },
-        img: {
-          width: naturalWidth,
-          height: naturalHeight
-        },
-        rotate: this.transform.rotate
-      });
-
-      this.styles = Object.assign(this.styles, {
-        width: imageSize.width + "px",
-        height: imageSize.height + "px",
-        top: imageSize.top + "px",
-        left: imageSize.left + "px"
-      });
-      // 360度无缝切换到0度
-      if (this.transform.rotate >= 360) {
-        setTimeout(() => {
-          this.nosition = true;
-          this.transform.rotate = 0;
-          this.setStyleTransform();
-          setTimeout(() => {
-            this.nosition = false;
-          }, 100);
-        }, 200);
-      }
-    }
-  }
-};
-</script>

src/modules/manage/views/PaperManage.vue

@@ -115,8 +115,9 @@
 import { paperPageList, areaList } from "../api";
 import { SORT_RULE_TYPE, CAFA_EXCEPTION_TYPE } from "@/constants/enumerate";
 import ImageView from "../components/ImageView";
-import SimpleImagePreview from "../components/SimpleImagePreview";
+import SimpleImagePreview from "@/components/SimpleImagePreview";
 import rotateHistoryMixin from "./rotateHistoryMixin";
+import { mapState } from "vuex";
 
 export default {
   name: "paper-manage",
@@ -146,6 +147,9 @@ export default {
       curPaperIndex: 0
     };
   },
+  computed: {
+    ...mapState("client", ["clientConfig"])
+  },
   mounted() {
     this.CAFA_EXCEPTION_TYPE = { ...CAFA_EXCEPTION_TYPE, 2: "全部" };
     this.initData();
@@ -169,17 +173,17 @@ export default {
         pageNumber: this.current,
         pageSize: this.size
       };
-      console.log(datas);
       const data = await paperPageList(datas);
-      console.log(data);
       this.papers = data.datas.map(paper => {
         const time = Date.now();
         return {
           ...paper,
           title: paper.examNumber,
           key: `${paper.id}-${time}`,
-          imgSrc: paper.sliceImgPath + "?t=" + time,
+          url: paper.sliceImgPath + "?t=" + time,
+          // imgSrc: paper.sliceImgPath + "?t=" + time,
           thumbSrc: paper.sliceImgPath + "?t=" + time,
+          imageEncrypt: this.clientConfig.imageEncrypt,
           styles: {},
           deg: 0
         };

src/plugins/db.js

@@ -280,19 +280,19 @@ function getPaperList({
   const condition = `${optionStr} GROUP BY examNumber ORDER BY ${orderBy}`;
   const countSql = `SELECT count(id) count FROM ( SELECT max(id) id FROM scan ${condition})`;
 
-  console.log(countSql);
+  // console.log(countSql);
 
   return new Promise((resolve, reject) => {
     db.all(countSql, (err, rows) => {
       if (err) reject("count list fail!");
 
-      console.log(rows);
+      // console.log(rows);
 
       const total = rows[0].count;
       const offset = (pageNumber - 1) * pageSize;
       const sql = `SELECT max(id) pid, * FROM scan ${condition} LIMIT ${pageSize} OFFSET ${offset}`;
 
-      console.log(sql);
+      // console.log(sql);
 
       db.all(sql, (err, rows) => {
         if (err) reject("get list fail!");