Collapse 折叠面板+Tabs 标签页+Checkbox
2018-11-24 本文已影响0人
小蝴蝶_037a
需求如图
154304444.jpg
点击下方蓝色按钮，删除相应选项 并移到下部分，如图：
1543042419278.jpg
这部分需求是点击删除按钮相应选项回到上面。
刚接到需求的时候没有多少波澜 ，觉得可能会麻烦一点，开始做才开始慢慢崩溃，想逻辑想的思维一片混乱
难受.jpg
总之，这是一个逐渐自闭的过程，代码很乱 ，逻辑也很乱 ，艰难重重，所幸功能出来了：
<el-collapse v-model="form.shop_names" @change="handleChange" v-for="(editDiscountedArea,editDiscountedAreaIndex) in form.editDiscountedAreas" v-if="editDiscountedArea.id" :key="editDiscountedArea.id">
<el-collapse-item :name="editDiscountedAreaIndex">
<template slot="title">
<el-checkbox :label="editDiscountedArea.id" :key="editDiscountedArea.id" :indeterminate="editDiscountedArea.isIndeterminate" v-model="editDiscountedArea.checkAll" @change="(value) => handleCheckAllChange1(value, editDiscountedAreaIndex)">@{{editDiscountedArea.name}}（@{{editDiscountedArea.totalNum}}）</el-checkbox>
</template>
<el-checkbox-group v-model="editDiscountedArea.checkedShop" @change="(value) =>handleCheckedCitiesChange1(value, editDiscountedAreaIndex)">
<el-tabs v-model="editDiscountedArea.activeName">
<el-tab-pane label="用户管理" v-for="(entry,index) in editDiscountedArea.sons" v-if="entry.id" :key="entry.name" :name="entry.name">
<span slot="label">
<!-- <input type="checkbox" :id="'checkbox_'+editDiscountedAreaIndex+'_'+index" :class="" @click="handleCheckAllChange2(editDiscountedAreaIndex,index)">@{{entry.name}}（@{{entry.totalNum}}） -->
<el-checkbox class="clickIsFalse" :label="entry.name" :key="entry.name" :indeterminate="entry.isIndeterminate" v-model="entry.checkAll" :checked="entry.checkAll" @change="(value) => handleCheckAllChange2(value, editDiscountedAreaIndex, index)">@{{entry.name}}（@{{entry.totalNum}}）<span class="maskClick" @click.prevent.self="nothing()"></span></el-checkbox>
</span>
<el-checkbox-group v-model="entry.checkedShop" @change="(value) =>handleCheckedCitiesChange2(value, editDiscountedAreaIndex, index)">
<el-checkbox v-for="(shop1,index) in entry.child" v-if="shop1.id" :label="shop1.name" :key="shop1.name">@{{shop1.name}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
</el-tabs>
</el-checkbox-group>
</el-collapse-item>
</el-collapse>
这是页面部分
<div v-if="form.discountAreaShow">
<div class="discountSection-title"></div>
<div class="discountSection">
<!-- <el-form-item class="commit-btn">
<el-button type="primary" @click="recovery">恢复上一次区域设置</el-button>
</el-form-item> -->
<el-form-item class="commit-btn">
<el-tabs v-model="form.activeName">
<el-tab-pane v-for="(discount,index) in form.discounts" v-if="discount" :key="discount.id" :label='discount.name + "折区域" +"("+discount.totalNum+")"' :name="discount.name">
<el-tabs v-model="discount.activeName1">
<el-tab-pane v-for="(discountModel,discountModelIndex) in discount.sons" v-if="discountModel.id" :key="discountModel.name" :label='discountModel.name' :name="discountModel.name">
<span slot="label">
<el-checkbox :indeterminate="discountModel.isIndeterminate" v-model="discountModel.checkAll" @change="(value) => handleCheckAllChange3(value, discountModelIndex, index)">@{{discountModel.name}}（@{{discountModel.totalNum}}）<span class="maskClick" @click.prevent.self="nothing()"></span></el-checkbox>
</span>
<el-checkbox-group v-model="discountModel.checkedShop" @change="(value) =>handleCheckedCitiesChange3(value, discountModelIndex, index)">
<el-checkbox v-for="(discountItem,discountItemIndex) in discountModel.child" v-if="discountItem.id" :label="discountItem.name" :key="discountItem.name">@{{discountItem.name}}</el-checkbox>
</el-checkbox-group>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
</el-tabs>
</el-form-item>
<el-form-item class="commit-btn">
<el-button type="primary" @click="removeDiscount()">删除</el-button>
</el-form-item>
<div class="block"></div>
<el-form-item class="commit-btn" v-if="form.type">
<el-button type="primary" @click="submitForm()">保存活动</el-button>
</el-form-item>
</div>
</div>
这是下部分页面
handleCheckAllChange1(val,editDiscountedAreaIndex) { //未设置折扣区外部全选复选框
let chooseAll = [];
for(let value of this.form.editDiscountedAreas[editDiscountedAreaIndex].sons){
if(value.id){
chooseAll.push(value.name)
let chooseAll1 = [];
for(let value1 of value.child){
chooseAll1.push(value1.name)
value.checkedShop = val ? chooseAll1 : [];
value.isIndeterminate = false;
}
}
}
this.form.editDiscountedAreas[editDiscountedAreaIndex].checkAll = val ? true : false;
this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop = val ? chooseAll : [];
this.form.editDiscountedAreas[editDiscountedAreaIndex].isIndeterminate = false;
},
handleCheckAllChange2(val,editDiscountedAreaIndex,index){ //未设置折扣区内部全选复选框
let chooseAll = []
for(let value of this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].child.filter(n=>n.id)){
chooseAll.push(value.name)
}
this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].checkAll = val ? true : false;
this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].checkedShop = val ? chooseAll : [];
this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].isIndeterminate = false;
},
handleCheckAllChange3(val,discountModelIndex,index) { //删除折扣区域
let chooseAll = []
for(let value of this.form.discounts[index].sons[discountModelIndex].child.filter(n=>n.id)){
chooseAll.push(value.name)
}
this.form.discounts[index].sons[discountModelIndex].checkAll = val ? true : false;
this.form.discounts[index].sons[discountModelIndex].checkedShop = val ? chooseAll : [];
this.form.discounts[index].sons[discountModelIndex].isIndeterminate = false;
},
handleCheckedCitiesChange1(value,editDiscountedAreaIndex) { //未设置折扣区外部复选框
let checkedCount = value.filter(n=>n).length;
this.form.editDiscountedAreas[editDiscountedAreaIndex].checkAll = checkedCount === this.form.editDiscountedAreas[editDiscountedAreaIndex].sons.filter(n=>n.id).length;
this.form.editDiscountedAreas[editDiscountedAreaIndex].isIndeterminate = checkedCount > 0 && checkedCount < this.form.editDiscountedAreas[editDiscountedAreaIndex].sons.filter(n=>n.id).length;
},
handleCheckedCitiesChange2(value,editDiscountedAreaIndex,index) { //未设置折扣区内部复选框
let checkedCount = value.filter(n=>n).length;
if(this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop.indexOf(this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].name) == -1){
this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop.push(this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].name);
}
let isIndeterminate = checkedCount > 0 && checkedCount < this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].child.filter(n=>n.id).length;
console.log(checkedCount,this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].child.filter(n=>n.id).length,'2222222222')
let checkAll = checkedCount === this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].child.filter(n=>n.id).length;
this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].isIndeterminate = isIndeterminate
this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].checkAll = checkAll;
if(!isIndeterminate && !checkAll){
this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop = this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop.filter(n => n != this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].name);
this.form.editDiscountedAreas[editDiscountedAreaIndex].checkAll = false
}else if(isIndeterminate){
this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop = this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop.filter(n => n != this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].name);
this.form.editDiscountedAreas[editDiscountedAreaIndex].sons[index].checkedShop = value.filter(n=>n);
this.form.editDiscountedAreas[editDiscountedAreaIndex].checkAll = false;
} else{
if(this.form.editDiscountedAreas[editDiscountedAreaIndex].checkedShop.length == this.form.editDiscountedAreas[editDiscountedAreaIndex].sons.filter(n=>n.id).length){
this.form.editDiscountedAreas[editDiscountedAreaIndex].checkAll = true;
}
}
},
handleCheckedCitiesChange3(value,discountModelIndex,index) { //删除折扣区域
let checkedCount = value.length;
this.form.discounts[index].sons[discountModelIndex].checkAll = checkedCount === this.form.discounts[index].sons[discountModelIndex].child.length;
this.form.discounts[index].sons[discountModelIndex].isIndeterminate = checkedCount > 0 && checkedCount < this.form.discounts[index].sons[discountModelIndex].child.length;
},
这是复选框部分
changeDiscount(discountItem){ //修改折扣
this.form.discountAreaShow = true;
this.form.activeName = discountItem;
let i = 0;
let nameValArry = [];
// if(this.form.discountArr.indexOf(discountItem) != -1){
// nameValArry = this.form.discountArr;
// }
this.form.discounts.forEach((val,index) =>{
nameValArry.push(Number(val.name))
})
let editDiscountedAreas1 = [];
this.form.editDiscountedAreas.forEach((valueDiscounted,indexDiscounted)=>{
if(valueDiscounted.id && valueDiscounted.sons.length != 0){
valueDiscounted.sons.forEach((valueSons,indexSons)=>{
if(valueSons.id && valueSons.checkedShop.length != 0){
editDiscountedAreas1.push(valueSons);
}
})
}
})
if(this.form.editDiscountedAreas.filter(n=>n.id&&n.sons.filter(s=>s.id&&s.checkedShop.length != 0).length !=0).length == 0){
if(this.form.discounts.filter(n=>n.name&&n.totalNum!=0).length != 0){
this.form.activeName = this.form.discounts[0].name;
}else{
this.form.discountAreaShow = false
}
this.$notify.error({
title: '错误',
message: '请选择要设置折扣的选项'
});
}else{
if(nameValArry.indexOf(discountItem) == -1){ //设置的折扣是之前不存在的
let discount;
discount = {"name":discountItem,"activeName1":'',"totalNum":'',"sons":[]};
let totalNum = 0;
let typeArry = [];
editDiscountedAreas1.forEach((value1,index1)=>{
if(value1.id && value1.checkedShop.length != 0){
if(typeArry.indexOf(value1.name) == -1){
let discount1 = {"name":value1.name,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"totalNum":value1.checkedShop.length,"child":[],"id":value1.id};
value1.checkedShop.forEach((val1,index2)=>{
discount1.child.push({"name":val1,"id":value1.id,});
})
totalNum = totalNum + value1.checkedShop.length;
discount.sons.push(discount1);
discount.activeName1 = value1.name;
typeArry.push(value1.name);
}else{
value1.checkedShop.forEach((val1,index2)=>{
discount.sons[typeArry.indexOf(value1.name)].child.push({"name":val1,"id":value1.id,});
discount.sons[typeArry.indexOf(value1.name)].totalNum += 1;
})
totalNum = totalNum + value1.checkedShop.length;
discount.activeName1 = value1.name;
}
}
})
discount.totalNum = totalNum;
this.form.discounts.push(discount)//添加已设置折扣区新的折扣
}else{ //设置的折扣是之前存在
let nameValArryIndex = nameValArry.indexOf(discountItem); //存在的折扣的index
editDiscountedAreas1.forEach((value1,index1)=>{
if(value1.id && value1.checkedShop.length != 0){
let discount1 = {"name":value1.name,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"totalNum":value1.checkedShop.length,"child":[],"id":value1.id};
let nameValArry1 = [];
this.form.discounts[nameValArryIndex].sons.forEach((son,sonsIndex)=>{ nameValArry1.push(son.name)})
if(nameValArry1.indexOf(value1.name) == -1){ //如果折扣存在型号不存在
value1.checkedShop.forEach((val1,index2)=>{
if(val1){
discount1.child.push({"name":val1,"id":value1.id});
}
})
this.form.discounts[nameValArryIndex].sons.push(discount1);
}else{
let nameValArryIndex1 = nameValArry1.indexOf(value1.name); //存在的型号的index
value1.checkedShop.forEach((val1,index2)=>{
if(val1){
this.form.discounts[nameValArryIndex].sons[nameValArryIndex1].child.push({"name":val1,"id":value1.id});
this.form.discounts[nameValArryIndex].sons[nameValArryIndex1].totalNum += 1;
}
})
}
}
})
this.form.discounts[nameValArryIndex].totalNum = 0;
this.form.discounts[nameValArryIndex].sons.forEach((numValue,numIndex)=>{ //计算改折扣的总数
if(numValue.id){
this.form.discounts[nameValArryIndex].totalNum = this.form.discounts[nameValArryIndex].totalNum + numValue.totalNum;
}
})
this.form.discounts[nameValArryIndex].activeName1 = this.form.discounts[nameValArryIndex].sons.filter(n => n.id)[0].name;
this.form.activeName = this.form.discounts[nameValArryIndex].name;
}
this.form.editDiscountedAreas.forEach((value,index)=>{
if(value.id){
if(value.checkAll == true){ //删除所选部分
this.form.editDiscountedAreas.splice(index,1,{})
}else{
value.sons.forEach((value1,index1)=>{
if(value1.id && value1.checkedShop.length != 0){
if(value1.checkAll == true){
this.form.editDiscountedAreas[index].sons.splice(index1,1,{});
this.form.editDiscountedAreas[index].activeName = this.form.editDiscountedAreas[index].sons.filter(n => n.id)[0].name;
this.form.editDiscountedAreas[index].totalNum = this.form.editDiscountedAreas[index].totalNum - value1.totalNum;
}else{
let checkIndex = [];
for (i of this.form.editDiscountedAreas[index].sons[index1].child){
checkIndex.push(i.name)
}
value1.checkedShop.forEach((val1,index2)=>{
this.form.editDiscountedAreas[index].sons[index1].child.splice(checkIndex.indexOf(val1),1,{});
this.form.editDiscountedAreas[index].sons[index1].totalNum = this.form.editDiscountedAreas[index].sons[index1].totalNum - 1;
this.form.editDiscountedAreas[index].totalNum = this.form.editDiscountedAreas[index].totalNum - 1;
if(this.form.editDiscountedAreas[index].sons[index1].child.filter(n=>n.id).length == 0){
this.form.editDiscountedAreas[index].sons.splice(index1,1,{});
}
})
value1.checkedShop = [];
}
}
})
}
if(value.sons.length == 0){
this.form.editDiscountedAreas.splice(index,1,{});
}
value.checkedShop = [];
}
})
}
this.form.editDiscountedAreas.forEach((valueDiscounted,indexDiscounted)=>{ //去除复选框不确定表现
if(valueDiscounted.id){
valueDiscounted.isIndeterminate = false;
valueDiscounted.sons.forEach((valueDiscounted1,indexDiscounted1)=>{
if(valueDiscounted1.id){
valueDiscounted1.isIndeterminate = false;
}
})
}
})
},
这是点击折扣按钮的逻辑部分
removeDiscount(){
if(this.form.editDiscountedAreas.filter(n=>n.id&&n.sons.filter(s=>s.id&&s.checkedShop.length != 0).length !=0).length != 0){
this.$notify.error({
title: '错误',
message:'请先确定已勾选品牌的折扣'
});
return false;
}
let discounts1 = [];
this.form.discounts.forEach((valueDiscounted,indexDiscounted)=>{
valueDiscounted.sons.forEach((valueSons,indexSons)=>{
if(valueSons.id && valueSons.checkedShop.length != 0){
let nameArry = [];
let checkIndex;
valueSons.child.forEach((valueSons2,indexSons)=>{
nameArry.push(valueSons2.name)
})
valueSons.checkedShop.forEach((valueSons1,indexSons1)=>{
checkIndex = nameArry.indexOf(valueSons1);
discounts1.push(valueSons.child[checkIndex]);
});
}
})
})
discounts1.forEach((value,index)=>{
let idArry = [];
this.form.editDiscountedAreas.forEach((value1,index1)=>{
if(value.name){
idArry.push(value1.id)
}
})
if(value.name){
if(idArry.indexOf(value.id) == -1){ //没有这个品牌
let brand = '';
this.form.editDiscountedAreasCopy.forEach((valCopy,indexCopy)=>{ //获取品牌名
if(value.id == valCopy.brand_id){
brand = valCopy.brand_name;
}
})
let totalNum = 0;
let typeName = value.name.slice(0,4);
let discountArea = {"name":brand,"id":value.id,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"activeName":'',"totalNum":0,"sons":[]};
let discountArea1 = {"name":typeName,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"totalNum":0,"child":[],"id":value.id};
discountArea1.child.push(value);
discountArea1.totalNum += 1;
discountArea.totalNum += 1;
discountArea.sons.push(discountArea1);
this.form.editDiscountedAreas.push(discountArea);
}else{//有这个品牌
let brandIndex = idArry.indexOf(value.id); //品牌index
let typeArry = []; //当前品牌下型号的数组
this.form.editDiscountedAreas[brandIndex].sons.forEach((val1,index1)=>{ //获取当前品牌的型号
if(val1.id){
typeArry.push(val1.name);
}else{
typeArry.push('null');
}
})
let typeName = value.name.slice(0,4);
if(typeArry.indexOf(typeName) == -1){ //没有这个型号
let totalNum = 0;
let discountArea1 = {"name":typeName,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"totalNum":0,"child":[],"id":value.id};
discountArea1.child.push(value);
discountArea1.totalNum += 1;
this.form.editDiscountedAreas[brandIndex].sons.push(discountArea1);
this.form.editDiscountedAreas[brandIndex].totalNum = this.form.editDiscountedAreas[brandIndex].totalNum + 1;
}else{ //有这个型号
let typeIndex = typeArry.indexOf(typeName); //型号的index
this.form.editDiscountedAreas[brandIndex].sons[typeIndex].child.push(value);
this.form.editDiscountedAreas[brandIndex].sons[typeIndex].totalNum += 1;
this.form.editDiscountedAreas[brandIndex].totalNum += 1;
}
}
}
});
let tabsArry = [];
let sonsArry = [];
this.form.discounts.forEach((value,index)=>{
if(value.name){
tabsArry.push(value.name);
if(value.sons.length == 0){
this.form.discounts.splice(index,1,{})
}
if(this.form.discounts.length == 0){
this.form.discountAreaShow = false;
}
}
});
let tabIndex = tabsArry.indexOf(this.form.activeName);
this.form.discounts[tabIndex].sons.forEach((val,sonsIndex)=>{
if(val.id && val.checkedShop.length != 0){
if(val.checkAll == true){ //删除所选部分
this.form.discounts[tabIndex].totalNum = this.form.discounts[tabIndex].totalNum - this.form.discounts[tabIndex].sons[sonsIndex].totalNum;
this.form.discounts[tabIndex].sons.splice(sonsIndex,1,{});
}else{
let checkIndex = [];
for (i of this.form.discounts[tabIndex].sons[sonsIndex].child){
checkIndex.push(i.name)
}
val.checkedShop.forEach((value1,index1)=>{
this.form.discounts[tabIndex].sons[sonsIndex].child.splice(checkIndex.indexOf(value1),1,{})
this.form.discounts[tabIndex].sons[sonsIndex].totalNum = this.form.discounts[tabIndex].sons[sonsIndex].totalNum - 1;
this.form.discounts[tabIndex].totalNum -= 1
if(this.form.discounts[tabIndex].sons[sonsIndex].child.filter(n=>n.id).length == 0){
this.form.discounts[tabIndex].sons.splice(sonsIndex,1,{});
}
});
val.checkedShop = [];
}
}
});
this.form.discounts.forEach((valueDiscounted,indexDiscounted)=>{ //去除复选框不确定表现
if(valueDiscounted.totalNum != 0){
valueDiscounted.sons.forEach((valueDiscounted1,indexDiscounted1)=>{
if(valueDiscounted1.id){
valueDiscounted1.isIndeterminate = false;
}
})
}
})
let NullArry = this.form.discounts.filter((d) =>{ //判断设置折扣区域是否为空
return d.totalNum != 0
}).length;
if(NullArry == 0){
this.form.discountAreaShow = false;
}
},
这是点击删除部分按钮
//这里省去ajax
if(res.result.success == true){//如果请求成功
self.form.editDiscountedAreas = [];
self.form.editDiscountedAreasCopy = [];
self.form.discounts = [];
self.form.discountArr = [];
for(value of res.content.data){ //获取未设置折扣区域
let discountArea = {"name":value.brand_name,"id":value.brand_id,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"activeName":Object.keys(value.group)[0],"totalNum":self.getTotalNum(value.group),"sons":[]};
Object.keys(value.group).forEach(function(key){
let discountArea1 = {"name":key,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"totalNum":value.group[key].length,"child":[],"id":value.brand_id};
for(value1 of value.group[key]){
let discountArea2 = {"name":value1,"id":value.brand_id};
discountArea1.child.push(discountArea2);
}
discountArea.sons.push(discountArea1);
});
self.form.editDiscountedAreas.push(discountArea);
}
self.form.editDiscountedAreasCopy = res.content.data;
if(res.content.discount_area.length != 0){
self.form.discountAreaShow = true;
for(val of res.content.discount_area){
self.form.activeName = val.discount.toString();
let discount = {"name":val.discount.toString(),"activeName1":Object.keys(val.group)[0],"totalNum":self.getTotalNum(val.group),"sons":[]};
self.form.discountArr.push(val.discount);
Object.keys(val.group).forEach(function(key){
let discountArea1 = {"name":key,"isIndeterminate":false,"checkAll":false,"checkedShop":[],"totalNum":val.group[key].length,"child":[],"id":''};
for(value1 of val.group[key]){
let discountArea2 = {"name":value1.girard,"id":value1.brand_id};
discountArea1.child.push(discountArea2);
discountArea1.id = value1.brand_id;
}
discount.sons.push(discountArea1);
});
self.form.discounts.push(discount);
}
}else{
self.form.discountAreaShow = false;
}
}else{
self.$notify.error({
title: '错误',
message: res.result.errorMsg
});
}
这是页面渲染的数据格式
成功.jpg
喜极而泣.jpg
