fe / yoho-shop-manage · Commits

Go to a project

Authored by htoooth
Commit afdead8c684c910759d23333d520eba31ec9494a 1 parent 3da73f7e

fix

Inline Side-by-side
Showing 4 changed files with 52 additions and 70 deletions
@@ -63,6 +63,12 @@ export default { @@ -63,6 +63,12 @@ export default {
63 let selectColor = this.colors.filter(c => c.selected); 63 let selectColor = this.colors.filter(c => c.selected);
64 64
65 this.$emit('on-change', selectColor, color); 65 this.$emit('on-change', selectColor, color);
  66 +
  67 + if (color.selected) {
  68 + this.$emit('on-add', color);
  69 + } else {
  70 + this.$emit('on-remove', color);
  71 + }
66 } 72 }
67 }, 73 },
68 watch: { 74 watch: {
@@ -9,6 +9,7 @@ @@ -9,6 +9,7 @@
9 <script> 9 <script>
10 import _ from 'lodash'; 10 import _ from 'lodash';
11 import api from 'product-create/api'; 11 import api from 'product-create/api';
  12 +
12 export default { 13 export default {
13 name: 'CheckboxSize', 14 name: 'CheckboxSize',
14 props: { 15 props: {
@@ -49,16 +50,43 @@ export default { @@ -49,16 +50,43 @@ export default {
49 50
50 if (selectColor) { 51 if (selectColor) {
51 size.disabled = selectColor.disabled; 52 size.disabled = selectColor.disabled;
  53 + size.selected = true;
52 } else { 54 } else {
53 size.disabled = false; 55 size.disabled = false;
  56 + size.selected = false;
54 } 57 }
55 return size; 58 return size;
56 }); 59 });
57 }, 60 },
58 selectSize(values) { 61 selectSize(values) {
59 - let selectSize = this.sizes.filter(size => _.some(values, val => val === size.id)); 62 + let newSize = this.sizes.filter(size => _.some(values, val => val === size.id));
  63 +//
  64 +// let oldSize = this.sizes.filter(size => size.selected);
  65 +//
  66 +// this.sizes.forEach(size => {
  67 +// size.selected = false;
  68 +// });
  69 +//
  70 +// newSize.forEach(size => {
  71 +// size.selected = true;
  72 +// });
  73 +//
  74 +// let addSize = _.differenceWith(newSize, oldSize, function(left, right) {
  75 +// return left.id === right.id;
  76 +// });
  77 +//
  78 +// let removeSize = _.differenceWith(oldSize, newSize, function(left, right) {
  79 +// return left.id === right.id;
  80 +// });
  81 + console.log(values);
  82 +// console.log( 'newsize', newSize);
  83 +// console.log( 'oldsize', oldSize);
  84 +// console.log( 'addsize', addSize);
  85 +// console.log( 'remove', removeSize);
60 86
61 - this.$emit('on-change', selectSize); 87 + this.$emit('on-change', newSize);
  88 +// this.$emit('on-add', addSize);
  89 +// this.$emit('on-remove', removeSize);
62 } 90 }
63 }, 91 },
64 watch: { 92 watch: {
@@ -104,45 +104,14 @@ @@ -104,45 +104,14 @@
104 </Col> 104 </Col>
105 </Row> 105 </Row>
106 106
107 - <Row>  
108 - <div class="ivu-form-item ivu-form-item-required">  
109 - <label class="ivu-form-item-label" style="width: 70px;"> 颜色</label>  
110 - <div :class="{'product-table-error' : table.showValidateColor}" style="margin-left: 70px;">  
111 - <span class='squre'  
112 - v-for="color in colors"  
113 - @click="clickColor(color)"  
114 - :class="{  
115 - 'squre-selected': color.selected,  
116 - 'squre-disabled': color.disabled  
117 - }">  
118 - <span class="squre-color"  
119 - :style="{ 'background-color': '#' + color.colorCode}">  
120 - </span>  
121 - <span class="squre-name">{{color.colorName}}</span>  
122 - </span>  
123 - </div>  
124 - <div class="product-table-tip" v-if="table.showValidateColor">颜色必须选择</div>  
125 - </div>  
126 - </Row>  
127 107
128 - <Row>  
129 - <div class="ivu-form-item ivu-form-item-required">  
130 - <label class="ivu-form-item-label" style="width: 70px;">尺寸</label>  
131 - <div :class="{  
132 - 'ivu-form-item-content': true,  
133 - 'product-table-error': table.showValidateSize  
134 - }"  
135 - style="margin-left: 70px;"  
136 - >  
137 - <Checkbox-group v-model='table.selectedSizes'>  
138 - <Checkbox v-for="size in sizes" :key="size" :label="size.id" >  
139 - <span>{{size.sizeName}}</span>  
140 - </Checkbox>  
141 - </Checkbox-group>  
142 - </div>  
143 - <div class="product-table-tip" v-if="table.showValidateSize">尺码必须选择</div>  
144 - </div>  
145 - </Row> 108 + <Form-item label="颜色">
  109 + <CheckboxColor @on-add="addColor" @on-remove="removeColor"></CheckboxColor>
  110 + </Form-item>
  111 +
  112 + <Form-item label="尺寸">
  113 + <CheckboxSize :sort-id="product.smallSortId"></CheckboxSize>
  114 + </Form-item>
146 115
147 <Row> 116 <Row>
148 <Form-item > 117 <Form-item >
@@ -190,7 +159,7 @@ @@ -190,7 +159,7 @@
190 import _ from 'lodash'; 159 import _ from 'lodash';
191 import api from 'product-create/api'; 160 import api from 'product-create/api';
192 import service from 'product-create/service'; 161 import service from 'product-create/service';
193 -import {CheckboxAge} from 'components/checkbox'; 162 +import {CheckboxAge, CheckboxColor, CheckboxSize} from 'components/checkbox';
194 import {RadioSeason, RadioGender} from 'components/radio'; 163 import {RadioSeason, RadioGender} from 'components/radio';
195 import {SelectSeason} from 'components/select'; 164 import {SelectSeason} from 'components/select';
196 165
@@ -206,8 +175,6 @@ const makeColor = () => { @@ -206,8 +175,6 @@ const makeColor = () => {
206 }; 175 };
207 }; 176 };
208 177
209 -  
210 -  
211 export default { 178 export default {
212 props: ['step', 'product'], 179 props: ['step', 'product'],
213 data() { 180 data() {
@@ -411,8 +378,6 @@ export default { @@ -411,8 +378,6 @@ export default {
411 }; 378 };
412 }, 379 },
413 mounted: function() { 380 mounted: function() {
414 - this.getColorAsync();  
415 - this.getSizeAsync();  
416 }, 381 },
417 methods: { 382 methods: {
418 beforeSubmit: function() { 383 beforeSubmit: function() {
@@ -489,23 +454,6 @@ export default { @@ -489,23 +454,6 @@ export default {
489 this.step.value = 0; 454 this.step.value = 0;
490 this.$router.push({name: 'product.create.step1'}); 455 this.$router.push({name: 'product.create.step1'});
491 }, 456 },
492 - getColorAsync: function() {  
493 - return api.getColor().then((result) => {  
494 - if (result.code === 200) {  
495 - this.colors = result.data;  
496 - }  
497 - });  
498 - },  
499 - getSizeAsync: function() {  
500 - return api.getSize(this.product.smallSortId).then((result) => {  
501 - if (result.code === 200) {  
502 - this.sizes = result.data;  
503 - }  
504 - });  
505 - },  
506 - clickColor: function(color) {  
507 - this.addColor(color);  
508 - },  
509 clickDefault: function(index) { 457 clickDefault: function(index) {
510 this.refreshTable(); 458 this.refreshTable();
511 let color = this.table.data[index]; 459 let color = this.table.data[index];
@@ -570,6 +518,11 @@ export default { @@ -570,6 +518,11 @@ export default {
570 }, 518 },
571 addColor: function(color) { 519 addColor: function(color) {
572 this.refreshTable(); 520 this.refreshTable();
  521 + this.addColorData(color);
  522 + this.table.selectedColors.push(color);
  523 + this.initDefault();
  524 + },
  525 + removeColor(color) {
573 let findColorIndex = this.table.selectedColors.findIndex((c) => { 526 let findColorIndex = this.table.selectedColors.findIndex((c) => {
574 return c.id === color.id; 527 return c.id === color.id;
575 }); 528 });
@@ -577,14 +530,7 @@ export default { @@ -577,14 +530,7 @@ export default {
577 if (findColorIndex !== -1) { 530 if (findColorIndex !== -1) {
578 this.removeColorData(color); 531 this.removeColorData(color);
579 this.table.selectedColors.splice(findColorIndex, 1); 532 this.table.selectedColors.splice(findColorIndex, 1);
580 - color.selected = false;  
581 - } else {  
582 - this.addColorData(color);  
583 - this.table.selectedColors.push(color);  
584 - color.selected = true;  
585 } 533 }
586 -  
587 - this.initDefault();  
588 }, 534 },
589 addColorData: function(color) { 535 addColorData: function(color) {
590 let newColor = { 536 let newColor = {
@@ -830,6 +776,8 @@ export default { @@ -830,6 +776,8 @@ export default {
830 RadioSeason, 776 RadioSeason,
831 RadioGender, 777 RadioGender,
832 SelectSeason, 778 SelectSeason,
  779 + CheckboxColor,
  780 + CheckboxSize
833 } 781 }
834 }; 782 };
835 </script> 783 </script>
@@ -12,7 +12,7 @@ export default () => { @@ -12,7 +12,7 @@ export default () => {
12 maxSortName: '', 12 maxSortName: '',
13 middleSortId: '', 13 middleSortId: '',
14 middleSortName: '', 14 middleSortName: '',
15 - smallSortId: '', 15 + smallSortId: 115,
16 smallSortName: '', 16 smallSortName: '',
17 sortName: '', 17 sortName: '',
18 productName: '', 18 productName: '',