Skip to content

M
member
Commit cd697593 by member
Options

商品选择器

parent d69960af
Showing with 119 additions and 48 deletions
src/test/goods/goods-brand.vue
......@@ -5,7 +5,7 @@
</div>
<el-checkbox-group v-model="checkedBrandes" @change="handleCheckedBrandChange" class="brand-group">
<el-checkbox v-for="brand in brandes" :key="brand.brandId" :label="brand" class="brand-list">{{ brand.brandName }}</el-checkbox>
<el-checkbox v-for="brand in brandes" :key="brand.brandId" :label="brand.brandId" class="brand-list">{{ brand.brandName }}</el-checkbox>
</el-checkbox-group>
<slot></slot>
</div>
......
src/test/goods/goods-properties.vue
......@@ -7,14 +7,14 @@
</load-select>
<!-- 多选有 包含其一 和 包含所有-->
<el-select v-model="exclude" placeholder="请选择" style="width: 120px" v-if="propType === 'TYP_CHECK'">
<!-- <el-select v-model="exclude" placeholder="请选择" style="width: 120px" v-if="propType === 'TYP_CHECK'">
<el-option
v-for="item in excludeOption"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-select> -->
</div>
......@@ -24,7 +24,7 @@
<el-checkbox :indeterminate="isIndeterminate" v-model="propList.checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div class="box-group">
<el-checkbox-group v-model="checkedSpes" @change="handleCheckedSpesChange">
<el-checkbox v-for="spe in spes" :label="spe" :key="spe.propertyId">
<el-checkbox v-for="spe in spes" :label="spe.propertyId" :key="spe.propertyId">
{{ spe.valueName }}
</el-checkbox>
</el-checkbox-group>
......@@ -95,11 +95,11 @@ export default {
data() {
return {
exclude: '',
excludeOption: [
{ value: 'all', label: '包含所有' },
{ value: 'one' , label: '包含其一' }
],
// exclude: '',
// excludeOption: [
// { value: 'all', label: '包含所有' },
// { value: 'one' , label: '包含其一' }
// ],
propOptions: [],
propVal: [],
checkedSpes: [],
......@@ -129,7 +129,8 @@ export default {
condition: this.exclude
}
});
}
},
},
methods: {
......
src/test/goods/goods-specifications.vue
......@@ -8,14 +8,16 @@
<!-- 规格类型筛选 -->
<div class="spe-type">
<el-radio v-model="speRadio" v-if="spesGroup" label="1">通过规格值组筛选</el-radio>
<el-radio v-model="speRadio" v-if="spesVal" label="2">通过规格值筛选</el-radio>
<el-radio v-model="speRadio" label="2">通过规格值筛选</el-radio>
<el-radio v-model="speRadio" label="1">通过规格值组筛选</el-radio>
</div>
</div>
<div class="spe-con">
<spes v-if="spesGroup && speRadio == '1'" :list-spes="spesList" :goods-index="goodsIndex"></spes>
<spe-group v-if="spesVal && speRadio == '2'" :list-group="groupList" :goods-index="goodsIndex"></spe-group>
<spes v-if="spesGroup" :list-spes="spesList" :goods-index="goodsIndex"></spes>
<spe-group v-if="spesVal" :list-group="groupList" :goods-index="goodsIndex"></spe-group>
<!-- <spes v-if="spesGroup && speRadio == '1'" :list-spes="spesList" :goods-index="goodsIndex"></spes>
<spe-group v-if="spesVal && speRadio == '2'" :list-group="groupList" :goods-index="goodsIndex"></spe-group> -->
</div>
<slot></slot>
</div>
......@@ -46,7 +48,7 @@ export default {
spesGroup: false,
spesVal: false,
speOptions: [], // 规格
speRadio: '1',
speRadio: '2',
currentPage: 1,
load: false,
specvalue: '',
......@@ -97,6 +99,7 @@ export default {
},
resiver(val) {
// 选中的值
console.log(val);
this.specvalue = val;
this.specList = this.speOptions.find(val => val.standardName == this.specvalue);
if (this.specList && this.specList.standardId) {
......@@ -112,12 +115,12 @@ export default {
if (data.result) {
this.spesGroup = false;
this.spesVal = true;
this.speRadio = '2';
// this.speRadio = '2';
this.getSpeData();
} else {
this.spesVal = false;
this.spesGroup = true;
this.speRadio = '1';
// this.speRadio = '1';
this.getSpeGroupData();
}
}
......
src/test/goods/index.vue
......@@ -5,7 +5,7 @@
<!-- 商品条件 -->
<el-collapse-transition>
<div class="goods-condition" v-show="condition.expendStatus == '收起'">
<goods-item class="goods-box" :type="list.type" v-for="(list, i) in condition.goodsList" :key="i + 1" :tags="list.tags" :goods-brands="list.brands" :goods-index="[index, i]">
<goods-item class="goods-box" :type="list.type" v-for="(list, i) in condition.goodsList" :key="i + 100000" :tags="list.tags" :goods-brands="list.brands" :goods-index="[index, i]">
<goods-collection :disabled="condition.goodsList.length == i + 1" v-if="condition.goodsList.length > i +1" :length="condition.goodsList.length" :condition="list.condition" :good-index="[index, i]"> </goods-collection>
</goods-item>
</div>
......@@ -112,12 +112,20 @@ export default {
// 删除筛选条件
deleteGooditem(arr) {
this.conditions[arr[0]].goodsList.splice(arr[1], 1);
if (this.conditions.length > 1) {
if (!this.conditions[arr[0]].goodsList.length) {
this.conditions.splice(arr[0], 1);
}
}
console.log(arr);
console.log(this.conditions[arr[0]].goodsList);
/**
* 这里商品属性有个问题就是如果有多个（最少两个）商品属性 删除的时候
* 由于商品属性没有从父组件传进来的值 所以自组件无法知道怎么去渲染
*/
// this.conditions[arr[0]].goodsList.splice(arr[1], 1);
// 如果是最后一行 就删除整个大行
// if (this.conditions.length > 1) {
// if (!this.conditions[arr[0]].goodsList.length) {
// this.conditions.splice(arr[0], 1);
// }
// }
},
// 展开
expendList(i) {
......
src/test/goods/spe-group.vue
......@@ -2,11 +2,11 @@
<div class="spe-group">
<div class="spe-transfer-left spe-transfer">
<div class="check-all check-all-left">
<el-checkbox v-model="checkLeft" @change="handleChange">全选</el-checkbox>
<el-checkbox v-model="checkLeft" :indeterminate="isIndeterminate" @change="handleChange">全选</el-checkbox>
<span></span>
</div>
<div class="transfer-tree">
<el-input prefix-icon="el-icon-search" style="width: 200px; margin: 10px 0px;" v-model="treeLeftval" placeholder="请输入规格值名称筛选"></el-input>
<el-input prefix-icon="el-icon-search" style="width: 200px; margin: 10px 0px;" v-model="treeLeftval" placeholder="请输入规格值名称筛选" @keyup.native.enter="leftSearch($event)"></el-input>
<div class="tree-content">
<el-tree ref="leftTree" :data="rightData" show-checkbox node-key="valueId" :default-expand-all="true" :default-checked-keys="defaultLeftKeys" :props="defaultProps" @check="handleLeftCheck"> </el-tree>
</div>
......@@ -24,12 +24,12 @@
<div class="spe-transfer-right spe-transfer">
<div class="check-all check-all-right">
<el-checkbox v-model="checkRight">全选</el-checkbox>
<el-checkbox :indeterminate="isRightIndeterminate" v-model="checkRight" @change="handleRightChangeAll">全选</el-checkbox>
<span></span>
</div>
<div class="transfer-tree">
<el-input prefix-icon="el-icon-search" style="width: 200px; margin: 10px 0px;" v-model="treeRightval" placeholder="请输入规格值名称筛选"> </el-input>
<el-input prefix-icon="el-icon-search" style="width: 200px; margin: 10px 0px;" v-model="treeRightval" placeholder="请输入规格值名称筛选" @keyup.native.enter="rightSearch($event)"> </el-input>
<div class="tree-content">
<el-tree ref="rightTree" :data="leftData" show-checkbox node-key="valueId" :default-expand-all="true" :default-checked-keys="defaultRightKeys" :props="defaultProps" @check="handleRightCheck"> </el-tree>
</div>
......@@ -53,6 +53,8 @@ export default {
data() {
return {
isIndeterminate: false,
isRightIndeterminate: false,
leftData: [],
rightData: [],
leftChecked: [],
......@@ -66,7 +68,9 @@ export default {
checkLeft: false,
checkRight: false,
defaultLeftKeys: [], // 左边默认选中
defaultRightKeys: [] //
defaultRightKeys: [], //
leftMiddleData: [],
rightMiddleData: []
};
},
......@@ -75,37 +79,56 @@ export default {
immediate: true,
handler(val) {
this.rightData = val;
this.leftMiddleData = val;
this.leftData = [];
}
},
leftData(newval) {
console.log(newval);
},
rightData(newval) {
console.log(newval);
}
},
methods: {
// 左边过滤
leftSearch(eve) {
let val = eve.target.value;
this.rightData = this.leftMiddleData.filter(el => el.valueName.indexOf(val) > -1);
},
rightSearch(eve) {
let val = eve.target.value;
this.leftData = this.rightMiddleData.filter(el => el.valueName.indexOf(val) > -1);
},
addToRight() {
// const checkNodes = this.$refs.rightTree.getCheckedNodes();
const checkIds = this.$refs.rightTree.getCheckedKeys();
for (let i = 0; i < checkIds.length; i++) {
for (let k = 0; k < this.leftData.length; k++) {
if (checkIds[i] === this.leftData[k].valueId) {
let length = this.leftData[k].standardGroupIds.length;
checkIds.splice(i, 1 + length);
this.leftData.splice(k, 1);
} else {
if (this.leftData[k].standardGroup && this.leftData[k].standardGroup.length) {
for (let j = 0; j < this.leftData[k].standardGroup.length; j++) {
if (this.leftData[k].standardGroup[j].valueId === checkIds[i]) {
this.leftData[k].standardGroup.splice(j, 1);
}
}
}
}
let index = this.leftData.findIndex(el => el.valueId === checkIds[i]);
if (index > -1) {
checkIds.splice(i, 1);
i--;
this.leftData.splice(index, 1);
}
// for (let k = 0; k < this.leftData.length; k++) {
// if (checkIds[i] === this.leftData[k].valueId) {
// let length = this.leftData[k].standardGroupIds.length;
// checkIds.splice(i, 1 + length);
// this.leftData.splice(k, 1);
// } else {
// if (this.leftData[k].standardGroup && this.leftData[k].standardGroup.length) {
// for (let j = 0; j < this.leftData[k].standardGroup.length; j++) {
// if (this.leftData[k].standardGroup[j].valueId === checkIds[i]) {
// this.leftData[k].standardGroup.splice(j, 1);
// }
// }
// }
// }
// }
}
this.rightChecked = [];
this.$refs.rightTree.setCheckedKeys([]);
// this.rightChecked = [];
// this.$refs.rightTree.setCheckedKeys([]);
},
addToLeft() {
......@@ -149,37 +172,73 @@ export default {
this.leftData[i].standardGroup = this.leftData[i].standardCacheGroup;
}
}
this.rightMiddleData = JSON.parse(JSON.stringify(this.leftData));
// 清空一下
this.leftChecked = [];
// this.leftChecked = [];
// this.$refs.leftTree.setCheckedKeys([]);
// this.checkLeft = false;
},
handleLeftCheck(data, current) {
// 左边选择的节点
this.leftChecked = current.checkedKeys;
if (this.leftChecked.length > 0 && this.leftChecked.length < this.rightData.length) {
this.isIndeterminate = true;
} else if (this.leftChecked.length == this.rightData.length) {
this.isIndeterminate = false;
this.checkLeft = true;
} else {
this.isIndeterminate = false;
this.checkLeft = false;
}
},
handleRightCheck(data, current) {
// 右边选择的节点
this.rightChecked = current.checkedKeys;
if (this.rightChecked.length > 0 && this.rightChecked.length < this.leftData.length) {
this.isRightIndeterminate = true;
} else if (this.rightChecked.length == this.leftData.length) {
this.isRightIndeterminate = false;
this.checkRight = true;
} else {
this.isRightIndeterminate = false;
this.checkRight = false;
}
},
handleChange(val) {
if (this.rightData && this.rightData.length) {
if (val) {
this.defaultLeftKeys = this.rightData.map(el => el.valueId);
this.leftChecked = this.rightData;
this.isIndeterminate = false;
} else {
this.$refs.leftTree.setCheckedKeys([]);
this.leftChecked = [];
this.isIndeterminate = false;
}
}
},
handleRightChange(val) {
handleRightChangeAll(val) {
if (this.leftData && this.leftData.length) {
if (val) {
this.defaultRightKeys = this.leftData.map(el => el.valueId);
this.rightChecked = this.leftData;
this.isRightIndeterminate = false;
} else {
this.$refs.rightTree.setCheckedKeys([]);
this.rightChecked = [];
this.isRightIndeterminate = false;
}
}
},
handleRightChange(val) {
if (this.leftData && this.leftData.length) {
if (val) {
this.defaultRightKeys = this.leftData.map(el => el.valueId);
this.rightChecked = this.leftData;
} else {
this.$refs.leftTree.setCheckedKeys([]);
this.rightChecked = [];
}
}
}
......@@ -198,7 +257,7 @@ export default {
.spe-transfer {
display: inline-block;
vertical-align: middle;
width: 247px;
width: 258px;
height: 285px;
box-sizing: border-box;
.check-all {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment