msyj-admin-org/src/modules/main/components/ImageActionList.vue

<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
            size="small"
            icon="md-refresh"
            @click="toRotate(image)"
            v-if="canRotate"
          ></Button>
          <Button
            size="small"
            type="primary"
            @click="toSaveRotate(image)"
            v-if="canRotate && image['deg']"
            >保存</Button
          >
          <Button
            :type="image.missing ? 'error' : 'default'"
            size="small"
            @click="toSignAbsent(image)"
            v-if="canAbsent"
            >缺考</Button
          >
        </div>
      </div>
    </div>

    <!-- image-preview -->
    <image-preview
      :class="imagePreviewCls"
      :image-list="data"
      :init-index="curImageIndex"
      :loop="loop"
      header-hide
      ref="ImagePreview"
      v-if="data.length"
    ></image-preview>
  </div>
</template>

<script>
import { rotatePaper, absentPaper } from "@/api";
import ImagePreview from "@/components/common/ImagePreview";

export default {
  name: "image-action-list",
  components: { ImagePreview },
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    actions: {
      type: Array,
      default() {
        return [];
      }
    },
    columnNumber: {
      type: Number,
      default: 5
    },
    loop: {
      type: Boolean,
      default: false
    },
    imagePreviewCls: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      curImageIndex: 0,
      imageList: []
    };
  },
  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) {
      image.deg += 90;
      if (image.deg === 360) image.deg = 0;
      image.styles = {
        transform: `rotate(${image.deg}deg)`
      };
    },
    async toSaveRotate(image) {
      if (!image.deg) return;

      await rotatePaper(image.id, image.deg);
      this.$Message.success("保存成功！");
    },
    async toSignAbsent(image) {
      await absentPaper(image.id);
      image.missing = !image.missing;
    },
    toReview(index) {
      this.curImageIndex = index;
      this.$refs.ImagePreview.open();
    }
  }
};
</script>