check-image.vue 1.65 KB
<template>
  <div class="check-image">
    <div v-for="i in list" class="check-image-cell">
      <div @click="onClick(i,$event)">
        <img :src="splitUrl(i.url)" width="150px" height="150px">
      </div>
      <Checkbox :value="i.isMark == 1" @on-change="onClick(i)">检查</Checkbox>
    </div>
  </div>
</template>

<style scoped>
.check-image-cell {
  display: inline-block;
  height: 150px;
  width: 150px;
  text-align: center;
  margin-right: 10px;
  margin-top: 20px;
}

.check-image-cell:hover {
  cursor: pointer;
}

.check-image {
}
</style>

<script>
import ApiService from "service/api";

export default {
  props: ["list"],
  created() {
    this.api = new ApiService();
  },
  methods: {
    onChange(i, e) {
      const obj = Object.assign({}, i);
      obj.imageId = [obj.imageId];
      if (i.isMark) {
        obj.isMark = 0;
        this.api
          .cancel(obj)
          .then(() => {
            this.$emit("on-change");
            i.isMark = 0;
            this.$Message.info("更新成功");
          })
          .catch(() => {
            this.$Message.error("更新失败");
          });
      } else {
        obj.isMark = 1;
        this.api
          .confirm(obj)
          .then(() => {
            this.$emit("on-change");
            i.isMark = 1;
            this.$Message.info("更新成功");
          })
          .catch(() => {
            this.$Message.error("更新失败");
          });
      }
    },
    splitUrl(str) {
      str = str.replace("{mode}", 0);
      str = str.replace("{width}", 150);
      str = str.replace("{height}", 150);
      return str;
    },
    onClick(i) {
      this.onChange(i);
    }
  }
};
</script>