checkbox-size.vue
2.63 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<template>
<Checkbox-group :value="values" @on-change="selectSize">
<Checkbox v-for="size in sizes" key="size" :label="size.id" :disabled="size.disabled">
<span>{{size.sizeName}}</span>
</Checkbox>
</Checkbox-group>
</template>
<script>
import _ from 'lodash';
import api from 'product-create/api';
export default {
name: 'CheckboxSize',
props: {
sortId: {
type: Number
},
selectSizes: {
type: Array,
default() {
return [];
}
}
},
computed: {
values() {
return _.map(this.selectSizes, size => {
return size.id;
});
}
},
created() {
this.render();
},
data() {
return {
sizes: []
};
},
methods: {
render() {
api.getSize(this.sortId).then((result) => {
this.initSizes(result.data);
});
},
initSizes(sizes) {
this.sizes = sizes.map(size => {
let selectColor = _.find(this.selectSizes, c => c.id === size.id);
if (selectColor) {
size.disabled = selectColor.disabled;
size.selected = true;
} else {
size.disabled = false;
size.selected = false;
}
return size;
});
},
selectSize(values) {
let newSize = this.sizes.filter(size => _.some(values, val => val === size.id));
//
// let oldSize = this.sizes.filter(size => size.selected);
//
// this.sizes.forEach(size => {
// size.selected = false;
// });
//
// newSize.forEach(size => {
// size.selected = true;
// });
//
// let addSize = _.differenceWith(newSize, oldSize, function(left, right) {
// return left.id === right.id;
// });
//
// let removeSize = _.differenceWith(oldSize, newSize, function(left, right) {
// return left.id === right.id;
// });
console.log(values);
// console.log( 'newsize', newSize);
// console.log( 'oldsize', oldSize);
// console.log( 'addsize', addSize);
// console.log( 'remove', removeSize);
this.$emit('on-change', newSize);
// this.$emit('on-add', addSize);
// this.$emit('on-remove', removeSize);
}
},
watch: {
selectSizes() {
this.initSizes(this.sizes);
}
}
};
</script>