图片方向变换调整

src/assets/styles/manage.less

@@ -164,6 +164,29 @@
   }
 }
 
+// .image-flex-contain
+.image-flex-contain {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+
+  .image-flex-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 8;
+
+    > img {
+      display: block;
+      width: 100%;
+      cursor: pointer;
+    }
+  }
+}
+
 // paper-export
 .paper-export {
   .ivu-form-item {

src/assets/styles/pages.less

@@ -358,6 +358,7 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
+    z-index: 99;
     &:first-child {
       left: 15px;
     }

src/components/ImageFlexContain.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="image-flex-contain">
+    <div class="image-flex-image" :style="styles">
+      <img
+        :src="image.url"
+        :alt="image.title"
+        @load="resizeImage(initRotate)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "image-flex-contain",
+  props: {
+    image: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    initRotate: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      styles: { width: "", height: "", top: "", left: "", transform: "" },
+      deg: this.initRotate
+    };
+  },
+  mounted() {
+    this.registWinResize();
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      this.resizeImage(this.deg);
+    });
+  },
+  methods: {
+    registWinResize() {
+      window.addEventListener("resize", () => {
+        this.resizeImage(this.deg);
+      });
+    },
+    resizeImage(deg = 0) {
+      this.deg = deg;
+      const box = this.$el;
+      const imgDom = box.firstChild.firstChild;
+      const { naturalWidth, naturalHeight } = imgDom;
+      const imageSize = this.getImageSizePos({
+        win: {
+          width: box.clientWidth,
+          height: box.clientHeight
+        },
+        img: {
+          width: naturalWidth,
+          height: naturalHeight
+        },
+        rotate: deg
+      });
+      this.styles = Object.assign(this.styles, {
+        width: imageSize.width + "px",
+        height: imageSize.height + "px",
+        top: imageSize.top + "px",
+        left: imageSize.left + "px",
+        transform: `rotate(${deg}deg)`
+      });
+    },
+    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;
+    }
+  }
+};
+</script>

src/modules/client/components/steps/ImageOrientation.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="image-orientation">
     <div class="image-orient-cont">
-      <img
-        class="img-contain"
-        :src="imageUrl"
-        :style="contStyle"
-        ref="editImage"
-      />
+      <image-flex-contain
+        v-if="image.url"
+        ref="ImageFlexContain"
+        :image="image"
+        :init-rotate="picRotate"
+      ></image-flex-contain>
     </div>
     <div class="image-orient-btns">
       <div
@@ -24,8 +24,11 @@
 </template>
 
 <script>
+import ImageFlexContain from "../../../../components/ImageFlexContain";
+
 export default {
   name: "image-orientation",
+  components: { ImageFlexContain },
   props: {
     imageUrl: {
       type: String,
@@ -40,17 +43,19 @@ export default {
   },
   data() {
     return {
-      contStyle: {},
+      image: {},
       picRotate: 0
     };
   },
   mounted() {
     const defImageRotate =
       (this.curSetting && this.curSetting.imageRotate) || 0;
-    this.picRotate = defImageRotate;
-    this.contStyle = {
-      transform: `rotate(${this.picRotate}deg)`
+    this.image = {
+      url: this.imageUrl,
+      title: "试卷图片"
     };
+    this.picRotate = defImageRotate;
+
     this.$emit("on-ready");
   },
   methods: {
@@ -63,10 +68,7 @@ export default {
         this.picRotate -= 90;
       }
 
-      this.contStyle = {
-        transform: `rotate(${this.picRotate}deg)`
-      };
-      // this.coverBoxStyle.transform = this.contStyle.transform;
+      this.$refs.ImageFlexContain.resizeImage(this.picRotate);
     },
     checkValid() {
       this.$emit("on-next", { imageRotate: this.picRotate });

src/modules/cropper-task/CropperTaskDetailDialog.vue

@@ -225,6 +225,7 @@ export default {
       if (this.loading) return;
       this.loading = true;
 
+      this.curTaskImagesPath = null;
       this.curCollectConfig = setting;
       let res = await saveCropperImage(this.curTask, setting).catch(() => {
         this.loading = false;