msyj-admin-local/src/modules/grading/marker/MarkerImageView.vue

<template>
  <div class="marker-image-view">
    <image-view-contain
      ref="ImageViewContain"
      :image="image"
      @to-review="toReview"
    ></image-view-contain>
    <div class="image-view-footer">
      <slot>
        <div v-if="IS_LEVEL" class="image-info">
          <div v-if="image.level" class="image-level">{{ image.level }}</div>
          <div v-if="image.sample" class="image-sample">标</div>
          <div
            v-else
            :class="[
              'image-checkbox',
              {
                'image-selected': image.selected
              }
            ]"
            @click="toSelect"
          >
            <Icon v-if="image.selected" type="md-checkmark" />
          </div>
          <div class="image-title" @click="toSelect">
            {{ image.title }}
          </div>
        </div>
        <div v-else class="image-info">
          <div v-if="image.level" class="image-level">{{ image.level }}</div>
          <div v-if="image.score" class="image-level">{{ image.score }}</div>
          <div class="image-title">
            {{ image.title }}
          </div>
        </div>
        <div class="image-rotate" @click="toRotate">
          <Icon type="md-refresh-circle" />
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
import ImageViewContain from "@/components/ImageViewContain";

export default {
  name: "marker-image-view",
  components: { ImageViewContain },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    stage: {
      type: String,
      default: "LEVEL"
    },
    canSelect: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    IS_LEVEL() {
      return this.stage === "LEVEL";
    }
  },
  created() {
    this.image = this.$objAssign(this.initImage, this.data);
  },
  data() {
    return {
      initImage: {
        id: "",
        thumbSrc: "",
        title: "",
        level: "",
        score: "",
        deg: 0,
        sample: false,
        selected: false
      },
      image: {}
    };
  },
  methods: {
    toReview() {
      this.$emit("to-review", this.data);
    },
    toRotate() {
      const image = this.image;
      image.deg += 90;
      if (image.deg === 360) image.deg = 0;

      this.$refs.ImageViewContain.resizeImage(image.deg);
    },
    toSelect() {
      if (this.image.sample) return;
      this.image.selected = !this.image.selected;
      this.$emit("to-select", this.image);
    },
    changeSelect(selected) {
      if (this.image.sample) return;
      this.image.selected = selected;
      this.$emit("to-select", this.image);
    }
  }
};
</script>