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 {
let selectColor = this.colors.filter(c => c.selected);
this.$emit('on-change', selectColor, color);
if (color.selected) {
this.$emit('on-add', color);
} else {
this.$emit('on-remove', color);
}
}
},
watch: {
... ...
... ... @@ -9,6 +9,7 @@
<script>
import _ from 'lodash';
import api from 'product-create/api';
export default {
name: 'CheckboxSize',
props: {
... ... @@ -49,16 +50,43 @@ export default {
if (selectColor) {
size.disabled = selectColor.disabled;
size.selected = true;
} else {
size.disabled = false;
size.selected = false;
}
return size;
});
},
selectSize(values) {
let selectSize = this.sizes.filter(size => _.some(values, val => val === size.id));
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', selectSize);
this.$emit('on-change', newSize);
// this.$emit('on-add', addSize);
// this.$emit('on-remove', removeSize);
}
},
watch: {
... ...
... ... @@ -104,45 +104,14 @@
</Col>
</Row>
<Row>
<div class="ivu-form-item ivu-form-item-required">
<label class="ivu-form-item-label" style="width: 70px;"> 颜色</label>
<div :class="{'product-table-error' : table.showValidateColor}" style="margin-left: 70px;">
<span class='squre'
v-for="color in colors"
@click="clickColor(color)"
:class="{
'squre-selected': color.selected,
'squre-disabled': color.disabled
}">
<span class="squre-color"
:style="{ 'background-color': '#' + color.colorCode}">
</span>
<span class="squre-name">{{color.colorName}}</span>
</span>
</div>
<div class="product-table-tip" v-if="table.showValidateColor">颜色必须选择</div>
</div>
</Row>
<Row>
<div class="ivu-form-item ivu-form-item-required">
<label class="ivu-form-item-label" style="width: 70px;">尺寸</label>
<div :class="{
'ivu-form-item-content': true,
'product-table-error': table.showValidateSize
}"
style="margin-left: 70px;"
>
<Checkbox-group v-model='table.selectedSizes'>
<Checkbox v-for="size in sizes" :key="size" :label="size.id" >
<span>{{size.sizeName}}</span>
</Checkbox>
</Checkbox-group>
</div>
<div class="product-table-tip" v-if="table.showValidateSize">尺码必须选择</div>
</div>
</Row>
<Form-item label="颜色">
<CheckboxColor @on-add="addColor" @on-remove="removeColor"></CheckboxColor>
</Form-item>
<Form-item label="尺寸">
<CheckboxSize :sort-id="product.smallSortId"></CheckboxSize>
</Form-item>
<Row>
<Form-item >
... ... @@ -190,7 +159,7 @@
import _ from 'lodash';
import api from 'product-create/api';
import service from 'product-create/service';
import {CheckboxAge} from 'components/checkbox';
import {CheckboxAge, CheckboxColor, CheckboxSize} from 'components/checkbox';
import {RadioSeason, RadioGender} from 'components/radio';
import {SelectSeason} from 'components/select';
... ... @@ -206,8 +175,6 @@ const makeColor = () => {
};
};
export default {
props: ['step', 'product'],
data() {
... ... @@ -411,8 +378,6 @@ export default {
};
},
mounted: function() {
this.getColorAsync();
this.getSizeAsync();
},
methods: {
beforeSubmit: function() {
... ... @@ -489,23 +454,6 @@ export default {
this.step.value = 0;
this.$router.push({name: 'product.create.step1'});
},
getColorAsync: function() {
return api.getColor().then((result) => {
if (result.code === 200) {
this.colors = result.data;
}
});
},
getSizeAsync: function() {
return api.getSize(this.product.smallSortId).then((result) => {
if (result.code === 200) {
this.sizes = result.data;
}
});
},
clickColor: function(color) {
this.addColor(color);
},
clickDefault: function(index) {
this.refreshTable();
let color = this.table.data[index];
... ... @@ -570,6 +518,11 @@ export default {
},
addColor: function(color) {
this.refreshTable();
this.addColorData(color);
this.table.selectedColors.push(color);
this.initDefault();
},
removeColor(color) {
let findColorIndex = this.table.selectedColors.findIndex((c) => {
return c.id === color.id;
});
... ... @@ -577,14 +530,7 @@ export default {
if (findColorIndex !== -1) {
this.removeColorData(color);
this.table.selectedColors.splice(findColorIndex, 1);
color.selected = false;
} else {
this.addColorData(color);
this.table.selectedColors.push(color);
color.selected = true;
}
this.initDefault();
},
addColorData: function(color) {
let newColor = {
... ... @@ -830,6 +776,8 @@ export default {
RadioSeason,
RadioGender,
SelectSeason,
CheckboxColor,
CheckboxSize
}
};
</script>
... ...
... ... @@ -12,7 +12,7 @@ export default () => {
maxSortName: '',
middleSortId: '',
middleSortName: '',
smallSortId: '',
smallSortId: 115,
smallSortName: '',
sortName: '',
productName: '',
... ...