check-image.vue
1.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<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>