数据处理完成

src/assets/styles/base.scss

@@ -488,38 +488,3 @@ body {
   font-size: 12px;
   padding-right: 8px;
 }
-
-// image-list-preview
-.image-preview {
-  &-list {
-    font-size: 0;
-  }
-  &-item {
-    display: inline-block;
-    vertical-align: top;
-    width: 160px;
-    height: 160px;
-    margin: 0 10px 10px 0;
-    border: 1px solid $--color-text-gray-4;
-    position: relative;
-    overflow: hidden;
-    font-size: 14px;
-
-    &.is-active {
-      border-color: $--color-primary;
-    }
-
-    img {
-      position: absolute;
-      margin: auto;
-      max-width: 100%;
-      max-height: 100%;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: auto;
-      cursor: pointer;
-    }
-  }
-}

src/assets/styles/common-comp.scss

@@ -6,212 +6,9 @@
   color: $--color-success;
 }
 
-// image-edit-upload
-.image-edit-upload {
-  position: relative;
-  height: 400px;
-  background: #fff;
-  padding-bottom: 30px;
-  box-sizing: content-box;
-}
-.cc-edit-upload {
-  &-main {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 8;
-
-    .el-upload-dragger {
-      height: auto;
-    }
-    .el-upload-input {
-      display: none;
-    }
-  }
-  &-cover {
-    height: 400px;
-    > img {
-      display: block;
-      height: 100%;
-      width: auto;
-      margin: 0 auto;
-    }
-  }
-  &-dcover {
-    padding: 109px 0;
-    > i {
-      font-size: 160px;
-      color: #999;
-    }
-  }
-  &-edit {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 9;
-  }
-
-  &-edit-box {
-    height: 350px;
-    position: relative;
-    .img-progress {
-      position: absolute;
-      height: 10px;
-      width: 100%;
-      bottom: -8px;
-      left: 0;
-      z-index: 7;
-    }
-  }
-  &-btns {
-    height: 50px;
-    padding-top: 10px;
-    text-align: center;
-    button {
-      margin: 0 10px;
-    }
-  }
-  &-tips {
-    position: absolute;
-    top: 405px;
-    left: 0;
-    font-size: 14px;
-    z-index: 9;
-  }
-}
-
-// image-list-upload
-$--cc-list-upload-pre: cc-list-upload;
-
-.cc-list-upload {
-  &-list {
-    font-size: 0;
-  }
-  &-item {
-    font-size: 14px;
-    display: inline-block;
-    vertical-align: top;
-    margin: 20px 10px;
-    border: 1px solid $--color-text-gray-6;
-    height: 150px;
-    width: 150px;
-    position: relative;
-
-    &-unvalid,
-    &-error {
-      border-color: $--color-danger;
-    }
-    &-success {
-      border-color: $--color-success;
-    }
-    &-ready .#{$--cc-list-upload-pre}-action,
-    &-uploading .#{$--cc-list-upload-pre}-action {
-      display: none !important;
-    }
-    &-ready .#{$--cc-list-upload-pre}-progress,
-    &-uploading .#{$--cc-list-upload-pre}-progress {
-      display: block;
-    }
-  }
-  &-box {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: auto;
-  }
-  &-info {
-    z-index: 7;
-    > img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-  }
-  &-input {
-    visibility: hidden;
-  }
-  &-progress {
-    display: none;
-    z-index: 10;
-    background: rgba(0, 0, 0, 0.3);
-    padding: 5px;
-    text-align: center;
-    color: #000;
-  }
-  &-action {
-    display: none;
-    z-index: 8;
-    background: rgba(0, 0, 0, 0.7);
-    padding: 60px 5px 0;
-    line-height: 30px;
-    text-align: center;
-    > i {
-      font-size: 40px;
-      color: #c0c0c0;
-      cursor: pointer;
-    }
-    > i:hover {
-      color: #fff;
-    }
-  }
-  &-item:hover .#{$--cc-list-upload-pre}-action {
-    display: block;
-  }
-
-  &-tips {
-    position: absolute;
-    width: 100%;
-    bottom: -30px;
-    text-align: center;
-    line-height: 30px;
-    &-error {
-      color: $--color-danger;
-    }
-    &-success {
-      color: $--color-success;
-    }
-  }
-
-  &-add {
-    cursor: pointer;
-    > i {
-      display: block;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      font-size: 60px;
-      transform: translate(-50%, -50%);
-      color: #999;
-    }
-  }
-}
-
 // image-preview
-.cc-image-preview {
-  &-header {
-    position: absolute;
-    width: 100%;
-    padding: 15px;
-    top: 0;
-    left: 0;
-    line-height: 20px;
-    text-align: center;
-    font-size: 16px;
-    z-index: 99;
-    color: #f0f0f0;
-    h3 {
-      position: absolute;
-      left: 15px;
-      z-index: auto;
-    }
-  }
-  &-close {
+.image-preview-dialog {
+  .image-preview-close {
     position: absolute;
     width: 30px;
     height: 30px;
@@ -229,22 +26,19 @@ $--cc-list-upload-pre: cc-list-upload;
       color: $--color-danger;
     }
   }
-  &-body {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: auto;
-    overflow: hidden;
-  }
-  &-imgs {
+}
+// image-contain
+.image-contain {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+
+  &-image {
     position: absolute;
     top: 0;
     left: 50%;
     width: 600px;
     margin-left: -300px;
-    // box-shadow: 0px 24px 36px 0px rgba(0, 0, 0, 0.3);
     transition: width, height, transform 0.2s linear;
     z-index: 8;
     &-nosition {
@@ -285,7 +79,7 @@ $--cc-list-upload-pre: cc-list-upload;
       right: 0;
     }
   }
-  &-footer {
+  &-action {
     position: absolute;
     height: 60px;
     bottom: 0;
@@ -330,16 +124,6 @@ $--cc-list-upload-pre: cc-list-upload;
     z-index: 99;
   }
 
-  &-preload {
-    position: absolute;
-    z-index: 9;
-    width: 100px;
-    height: 100px;
-    overflow: hidden;
-    top: -1000px;
-    left: -1000px;
-  }
-
   &-none {
     position: absolute;
     top: 50%;
@@ -353,6 +137,40 @@ $--cc-list-upload-pre: cc-list-upload;
     }
   }
 }
+// image-list-preview
+.image-preview {
+  &-list {
+    font-size: 0;
+  }
+  &-item {
+    display: inline-block;
+    vertical-align: top;
+    width: 160px;
+    height: 160px;
+    margin: 0 10px 10px 0;
+    border: 1px solid $--color-text-gray-4;
+    position: relative;
+    overflow: hidden;
+    font-size: 14px;
+
+    &.is-active {
+      border-color: $--color-primary;
+    }
+
+    img {
+      position: absolute;
+      margin: auto;
+      max-width: 100%;
+      max-height: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: auto;
+      cursor: pointer;
+    }
+  }
+}
 
 // import-file
 .cc-import-file {
@@ -375,52 +193,3 @@ $--cc-list-upload-pre: cc-list-upload;
     padding-top: 10px;
   }
 }
-
-// rich-editor
-.cc-editor {
-  .ql-editor {
-    max-height: 500px !important;
-    height: 300px;
-    overflow: auto;
-  }
-}
-
-// label-select
-$--cc-labels-pre: cc-labels;
-.cc-labels {
-  margin-bottom: 8px;
-
-  &-label {
-    display: block;
-    float: left;
-    height: 24px;
-    line-height: 24px;
-    font-size: 14px;
-    padding-right: 20px;
-    font-weight: 600;
-  }
-  &-options {
-    margin-left: 60px;
-    li {
-      display: inline-block;
-      vertical-align: top;
-      margin: 0 5px 5px 0;
-      height: 24px;
-      line-height: 24px;
-      padding: 0 10px;
-      border-radius: 3px;
-      cursor: pointer;
-    }
-    li:hover {
-      color: #409eff;
-    }
-    li.#{$--cc-labels-pre}-selected {
-      background: #409eff;
-      color: #fff;
-    }
-    li.#{$--cc-labels-pre}-disabled {
-      color: #909399;
-      cursor: not-allowed;
-    }
-  }
-}

src/assets/styles/pages.scss

@@ -198,6 +198,14 @@
     &-content {
       flex-grow: 2;
       margin: 0 0 0 20px;
+      position: relative;
+
+      &-page {
+        position: absolute;
+        top: 0;
+        left: 20px;
+        z-index: 99;
+      }
     }
   }
 }

src/components/SimpleImagePreview.vue → src/components/ImageContain.vue

@@ -1,93 +1,89 @@
 <template>
-  <el-dialog
-    :class="[prefixCls, 'opacity-dialog']"
-    :visible.sync="modalIsShow"
-    title="图片预览"
-    fullscreen
-    append-to-body
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-  >
-    <div slot="title"></div>
-    <div slot="footer"></div>
-    <div :class="[`${prefixCls}-close`]" @click="cancel">
-      <i class="el-icon-circle-close"></i>
+  <div class="image-contain">
+    <div
+      v-if="showGuide"
+      :class="[`${prefixCls}-guide`, `${prefixCls}-guide-prev`]"
+      @click.stop="showPrev"
+    >
+      <i class="el-icon-arrow-left"></i>
+    </div>
+    <div
+      v-if="showGuide"
+      :class="[`${prefixCls}-guide`, `${prefixCls}-guide-next`]"
+      @click.stop="showNext"
+    >
+      <i class="el-icon-arrow-right"></i>
     </div>
 
-    <div :class="[`${prefixCls}-body`]" ref="ReviewBody">
-      <div
-        v-if="!simple"
-        :class="[`${prefixCls}-guide`, `${prefixCls}-guide-prev`]"
-        @click.stop="showPrev"
-      >
-        <i class="el-icon-arrow-left"></i>
-      </div>
-      <div
-        v-if="!simple"
-        :class="[`${prefixCls}-guide`, `${prefixCls}-guide-next`]"
-        @click.stop="showNext"
-      >
-        <i class="el-icon-arrow-right"></i>
-      </div>
-      <div
-        :class="[
-          `${prefixCls}-imgs`,
-          { [`${prefixCls}-imgs-nosition`]: nosition }
-        ]"
-        :style="styles"
-        v-if="modalIsShow"
-      >
-        <img
-          :key="curImage.url"
-          :src="curImage.url"
-          :alt="curImage.filename"
-          ref="PreviewImgDetail"
-          @load="reizeImage"
-        />
-      </div>
-      <div :class="[`${prefixCls}-none`]" v-if="!curImage.url">
-        <i class="el-icon-picture"></i>
-        <p>暂无数据</p>
-      </div>
-
-      <div :class="[`${prefixCls}-loading`]" v-show="loading">
-        <i class="el-icon-loading"></i>
-      </div>
+    <!-- image -->
+    <div
+      :class="[
+        `${prefixCls}-image`,
+        { [`${prefixCls}-image-nosition`]: nosition }
+      ]"
+      :style="styles"
+      v-move-ele.prevent.stop="{ mouseMove }"
+    >
+      <img
+        :key="image.url"
+        :src="image.url"
+        :alt="imageName"
+        ref="PreviewImgDetail"
+        @load="resizeImage"
+      />
+    </div>
+    <div :class="[`${prefixCls}-none`]" v-if="!image.url">
+      <i class="el-icon-picture"></i>
+      <p>暂无数据</p>
     </div>
 
-    <div v-if="!simple" :class="[`${prefixCls}-footer`]">
+    <div :class="[`${prefixCls}-loading`]" v-show="loading">
+      <i class="el-icon-loading"></i>
+    </div>
+    <!-- action -->
+    <div v-if="showAction" :class="[`${prefixCls}-action`]">
       <ul>
+        <li title="合适大小" @click.stop="toOrigin">
+          <i class="el-icon-rank" />
+        </li>
         <li title="旋转" @click.stop="toRotate">
           <i class="el-icon-refresh-right"></i>
         </li>
       </ul>
     </div>
-  </el-dialog>
+  </div>
 </template>
 
 <script>
-const prefixCls = "cc-image-preview";
+import MoveEle from "../plugins/move-ele";
+const prefixCls = "image-contain";
 
 export default {
-  name: "simple-image-preview",
+  name: "image-contain",
   props: {
-    curImage: {
+    image: {
       type: Object,
       default() {
-        return {};
+        return { url: "", filename: "" };
       }
     },
-    simple: {
+    showAction: {
+      type: Boolean,
+      default: true
+    },
+    showGuide: {
       type: Boolean,
-      default: false
+      default: true
     }
   },
+  directives: { MoveEle },
   data() {
     return {
       prefixCls,
-      modalIsShow: false,
       styles: { width: "", height: "", top: "", left: "", transform: "" },
       initWidth: 500,
+      minScale: 0.5,
+      maxScale: 5,
       transform: {
         scale: 1,
         rotate: 0
@@ -97,34 +93,44 @@ export default {
       nosition: false
     };
   },
-  watch: {
-    "curImage.url": {
-      handler(val) {
-        if (val) {
-          this.loadingSetT = setTimeout(() => {
-            this.loading = true;
-          }, 300);
-          this.styles = {
-            width: "",
-            height: "",
-            top: "",
-            left: "",
-            transform: ""
-          };
-        }
-      }
+  // watch: {
+  //   "image.url": {
+  //     handler(val) {
+  //       if (val) {
+  //         this.loadingSetT = setTimeout(() => {
+  //           this.loading = true;
+  //         }, 300);
+  //         this.styles = {
+  //           width: "",
+  //           height: "",
+  //           top: "",
+  //           left: "",
+  //           transform: ""
+  //         };
+  //       }
+  //     }
+  //   }
+  // },
+  computed: {
+    imageName() {
+      if (this.image.filename) return this.image.filename;
+
+      const st1 = this.image.url.split("?")[0] || "";
+      const st2 = st1.split("/").slice(-1) || "";
+      return st2;
     }
   },
+  mounted() {
+    this.registWheelHandle();
+  },
   methods: {
-    reizeImage() {
-      if (this.loadingSetT) clearTimeout(this.loadingSetT);
-
+    resizeImage() {
       const imgDom = this.$refs.PreviewImgDetail;
       const { naturalWidth, naturalHeight } = imgDom;
       const imageSize = this.getImageSizePos({
         win: {
-          width: this.$refs.ReviewBody.clientWidth,
-          height: this.$refs.ReviewBody.clientHeight
+          width: this.$el.clientWidth,
+          height: this.$el.clientHeight
         },
         img: {
           width: naturalWidth,
@@ -186,26 +192,49 @@ export default {
       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
+    registWheelHandle() {
+      this.$el.addEventListener("wheel", e => {
+        e.preventDefault();
+        this.mouseWheel(e.wheelDeltaY);
+      });
+    },
+    mouseMove({ left, top }) {
+      this.styles.left = left + "px";
+      this.styles.top = top + "px";
+    },
+    mouseWheel(delta) {
+      if (delta < 0) {
+        this.toMagnify();
+      } else {
+        this.toShrink();
+      }
+    },
     setStyleTransform() {
       const { scale, rotate } = this.transform;
       this.styles.transform = `scale(${scale}, ${scale}) rotate(${rotate}deg)`;
     },
+    toOrigin() {
+      this.transform.scale = 1;
+      this.setStyleTransform();
+      this.resizeImage();
+    },
+    toMagnify() {
+      const scale = (this.transform.scale * 1.2).toFixed(2);
+      this.transform.scale = scale >= this.maxScale ? this.maxScale : scale;
+      this.setStyleTransform();
+    },
+    toShrink() {
+      const scale = (this.transform.scale * 0.75).toFixed(2);
+      this.transform.scale = scale <= this.minScale ? this.minScale : scale;
+      this.setStyleTransform();
+    },
     toRotate() {
       this.transform.rotate = this.transform.rotate + 90;
       this.setStyleTransform();
@@ -213,8 +242,8 @@ export default {
       const { naturalWidth, naturalHeight } = this.$refs.PreviewImgDetail;
       const imageSize = this.getImageSizePos({
         win: {
-          width: this.$refs.ReviewBody.clientWidth,
-          height: this.$refs.ReviewBody.clientHeight
+          width: this.$el.clientWidth,
+          height: this.$el.clientHeight
         },
         img: {
           width: naturalWidth,

src/components/ImageListPreview.vue → src/components/ImageListPreviewDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="image-list-preview">
+  <div class="image-list-preview-dialog">
     <el-dialog
       :visible.sync="modalIsShow"
       title="图片预览"
@@ -26,22 +26,22 @@
       </div>
     </el-dialog>
 
-    <!-- simple-image-preview -->
-    <simple-image-preview
-      :cur-image="curImage"
+    <!-- ImagePreviewDialog -->
+    <image-preview-dialog
+      :image="curImage"
       @on-prev="toPrevImage"
       @on-next="toNextImage"
-      ref="SimpleImagePreview"
-    ></simple-image-preview>
+      ref="ImagePreviewDialog"
+    ></image-preview-dialog>
   </div>
 </template>
 
 <script>
-import SimpleImagePreview from "@/components/SimpleImagePreview";
+import ImagePreviewDialog from "./ImagePreviewDialog.vue";
 
 export default {
   name: "image-list-preview",
-  components: { SimpleImagePreview },
+  components: { ImagePreviewDialog },
   props: {
     imageList: {
       type: Array,

src/components/ImagePreviewDialog.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-dialog
+    class="image-preview-dialog opacity-dialog"
+    :visible.sync="modalIsShow"
+    title="图片预览"
+    fullscreen
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <div slot="title"></div>
+    <div slot="footer"></div>
+    <div class="image-preview-close" @click="cancel">
+      <i class="el-icon-circle-close"></i>
+    </div>
+
+    <image-contain
+      v-if="modalIsShow"
+      ref="ImageContain"
+      :image="image"
+      @on-prev="showPrev"
+      @on-next="showNext"
+    ></image-contain>
+  </el-dialog>
+</template>
+
+<script>
+import ImageContain from "./ImageContain.vue";
+
+export default {
+  name: "image-preview-dialog",
+  components: { ImageContain },
+  props: {
+    image: {
+      type: Object,
+      default() {
+        return { url: "", filename: "" };
+      }
+    },
+    showAction: {
+      type: Boolean,
+      default: true
+    },
+    showGuide: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      modalIsShow: false
+    };
+  },
+  methods: {
+    cancel() {
+      this.modalIsShow = false;
+      this.$emit("on-close");
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    showPrev() {
+      this.$emit("on-prev");
+    },
+    showNext() {
+      this.$emit("on-next");
+    }
+  }
+};
+</script>

src/components/ImageViewContain.vue

@@ -1,110 +0,0 @@
-<template>
-  <div :class="['image-view-contain', { 'image-view-none': !image.url }]">
-    <div class="image-view-image" :style="styles">
-      <img
-        v-if="image.url"
-        :src="image.url"
-        :alt="image.title"
-        @load="resizeImage"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "image-view-contain",
-  props: {
-    image: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
-  },
-  data() {
-    return {
-      styles: { width: "", height: "", top: "", left: "", transform: "" },
-      deg: 0
-    };
-  },
-  mounted() {
-    this.registWinResize();
-  },
-  beforeDestroy() {
-    window.removeEventListener("resize", () => {
-      this.resizeImage(this.deg);
-    });
-  },
-  methods: {
-    toReview() {
-      this.$emit("to-review");
-    },
-    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/constants/enumerate.js

@@ -29,3 +29,6 @@ export const PRIVILEGE_TYPE = {
   MENU: "菜单",
   URL: "操作"
 };
+export const ORG_TYPE = {
+  PRINTING_HOUSE: "印刷室"
+};

src/modules/record/components/DataCheckDialog.vue

@@ -83,15 +83,20 @@
         <div class="data-check-content-page">
           <el-button
             :type="curPaperIndex === 0 ? 'primary' : 'default'"
-            @click="curPaperIndex = 0"
+            @click="switchCurPage(0)"
             >正面</el-button
           >
           <el-button
             :type="curPaperIndex === 1 ? 'primary' : 'default'"
-            @click="curPaperIndex = 1"
+            @click="switchCurPage(1)"
             >反面</el-button
           >
         </div>
+        <image-contain
+          ref="ImageContain"
+          :image="curPage"
+          :show-guide="false"
+        ></image-contain>
       </div>
     </div>
   </el-dialog>
@@ -100,7 +105,8 @@
 <script>
 import timeMixin from "../../../mixins/timeMixin";
 import { studentListQuery } from "../../../modules/base/api";
-import { paperBindUser } from "../api";
+import { paperBindUser, dataCheckUndoListPage } from "../api";
+import ImageContain from "../../../components/ImageContain.vue";
 
 const initModalForm = {
   semesterId: "",
@@ -110,6 +116,7 @@ const initModalForm = {
 
 export default {
   name: "data-check-dialog",
+  components: { ImageContain },
   mixins: [timeMixin],
   data() {
     return {
@@ -139,19 +146,20 @@ export default {
           }
         ]
       },
-      inputSearchDelay: 200,
+      inputSearchDelay: 300,
       studentList: [],
       courseList: [],
       loading: false,
+      donePageList: [],
+      undoPageList: [],
       curPaperIndex: 0,
-      curPages: []
+      curPages: [
+        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
+        "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"
+      ],
+      curPage: { url: "" }
     };
   },
-  computed: {
-    curPaperUrl() {
-      return this.curPages[this.curPaperIndex];
-    }
-  },
   methods: {
     visibleChange() {
       this.modalForm = { ...initModalForm };
@@ -179,7 +187,28 @@ export default {
       const data = await studentListQuery(datas);
       this.studentList = data.records;
     },
-    toNextPaper() {},
+    switchCurPage(curPaperIndex) {
+      this.curPaperIndex = curPaperIndex;
+      this.curPage = {
+        url: this.curPages[this.curPaperIndex]
+      };
+    },
+    async getUndoPageList() {
+      const datas = {
+        pageNumber: 1,
+        pageSize: 10
+      };
+      const data = await dataCheckUndoListPage(datas);
+      this.undoPageList.push(...data.records);
+    },
+    toNextPaper() {
+      if (this.undoPageList.length <= 3) this.getUndoPageList();
+
+      this.donePageList.push({ ...this.curPages });
+
+      this.curPages = this.undoPageList.shift();
+      this.switchCurPage(0);
+    },
     toBind(row) {
       this.modalForm.studentId = row.id;
       this.confirm();

src/modules/record/views/DataCheckManage.vue

@@ -133,11 +133,11 @@
       </div>
     </div>
 
-    <!-- ImageListPreview -->
-    <image-list-preview
-      ref="ImageListPreview"
+    <!-- ImageListPreviewDialog -->
+    <image-list-preview-dialog
+      ref="ImageListPreviewDialog"
       :image-list="curImageList"
-    ></image-list-preview>
+    ></image-list-preview-dialog>
     <!-- DataCheckDialog -->
     <data-check-dialog ref="DataCheckDialog"></data-check-dialog>
   </div>
@@ -145,12 +145,12 @@
 
 <script>
 import { dataCheckUndoListPage, dataCheckDoneListPage } from "../api";
-import ImageListPreview from "../../../components/ImageListPreview.vue";
+import ImageListPreviewDialog from "../../../components/ImageListPreviewDialog.vue";
 import DataCheckDialog from "../components/DataCheckDialog.vue";
 
 export default {
   name: "data-check-manage",
-  components: { ImageListPreview, DataCheckDialog },
+  components: { ImageListPreviewDialog, DataCheckDialog },
   data() {
     return {
       filter: {
@@ -190,7 +190,7 @@ export default {
       if (!row.imageList.length) return;
 
       this.curImageList = row.imageList;
-      this.$refs.ImageListPreview.open();
+      this.$refs.ImageListPreviewDialog.open();
     },
     search() {
       this.toUndoPage(1);

src/plugins/filters.js

@@ -1,5 +1,5 @@
 import Vue from "vue";
-// import {} from "../constants/enumerate";
+import { ORG_TYPE } from "../constants/enumerate";
 import { formatDate } from "../plugins/utils";
 
 const DEFAULT_FIELD = "--";
@@ -24,3 +24,6 @@ Vue.filter("timestampFilter", function(val) {
     ? formatDate("YYYY-MM-DD HH:mm:ss", new Date(val * 1))
     : DEFAULT_FIELD;
 });
+Vue.filter("orgTypeFilter", function(val) {
+  return ORG_TYPE[val] || DEFAULT_FIELD;
+});

src/plugins/move-ele.js

@@ -0,0 +1,56 @@
+export default {
+  inserted(el, { value, modifiers }, vnode) {
+    let [_x, _y] = [0, 0];
+    // 当前拖动事务开始前元素的left,top
+    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();
+      }
+      left = oleft + e.pageX - _x;
+      top = otop + e.pageY - _y;
+
+      if (value && value.mouseMove) {
+        value.mouseMove({ left, top });
+      } else {
+        el.style.left = left + "px";
+        el.style.top = top + "px";
+      }
+    };
+
+    let upHandle = function(e) {
+      if (modifiers.prevent) {
+        e.preventDefault();
+      }
+      oleft = left;
+      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) {
+      if (modifiers.prevent) {
+        e.preventDefault();
+      }
+      _x = e.pageX;
+      _y = e.pageY;
+      oleft = el.offsetLeft;
+      otop = el.offsetTop;
+      if (value && value.mouseDown) value.mouseDown({ oleft, otop });
+
+      document.addEventListener("mousemove", moveHandle);
+      document.addEventListener("mouseup", upHandle);
+    });
+  }
+};