You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
286 lines
9.2 KiB
286 lines
9.2 KiB
<template> |
|
<view id="section_ul" class="selectTrees"> |
|
<!-- 一级分支 --> |
|
<view class="lv1list" v-for="(item, index) in selectList" :key="index"> |
|
<view class="tree-one"> |
|
<!-- 单选框组件 --> |
|
<checkbox-group v-if="showCheck" |
|
style="position: absolute;height: 80rpx;line-height: 80rpx; left:20rpx;z-index: 1;"> |
|
<checkbox :checked="item.checked" @click="_chooseAll(item,index)" /> |
|
</checkbox-group> |
|
<!-- 名字和iconfont --> |
|
<label |
|
style="height:80rpx;display: flex;align-items: center;padding: 20rpx;position: relative;border-bottom: 1px solid #e4e4e4;background: #f3f3f3;" |
|
@click="_showlv2(index)"> |
|
<view class="itemT">{{item.name}}</view> |
|
<view class="deleteBtn" v-if="showDelete" @click.stop="deleteItem(item)">删除</view> |
|
<i class="iconfont iconshang" v-if="item.show" |
|
style="position: absolute;top: 18%;right: 2%;font-size: 48rpx;"></i> |
|
<i class="iconfont iconxiala" v-else |
|
style="position: absolute;top: 18%;right: 2%;font-size: 48rpx;"></i> |
|
</label> |
|
</view> |
|
<!-- 二级分支 --> |
|
<view v-if='item.show && item.childrenList '> |
|
<view class="tree-two" v-for="(item2, index2) in item.childrenList" :key="index2" |
|
style="display: flex;"> |
|
<view class="aui-list-item-inner flexIn"> |
|
<checkbox-group v-if="showCheck"> |
|
<checkbox v-if="!disableLv2Check" :checked="item2.checked" |
|
@click="_chooseOne(index,index2)" /> |
|
<checkbox :checked="item2.checked" disabled="true" v-else /> |
|
</checkbox-group> |
|
<label style="font-size: 28rpx;">{{item2.name}}</label> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: "select-tree", |
|
data() { |
|
return { |
|
finalList: [], |
|
menuKey: 1, |
|
selectList: this.value |
|
}; |
|
}, |
|
props: { |
|
// selectList, |
|
value: { |
|
type: Array, |
|
default: function () { |
|
return [ |
|
{ |
|
name: "水果", |
|
checked: false, |
|
show: true, |
|
childrenList: [ |
|
{ |
|
checked: false, |
|
name: "西瓜" |
|
}, |
|
{ |
|
checked: false, |
|
name: "桃子" |
|
} |
|
] |
|
}, |
|
{ |
|
name: "工具", |
|
checked: false, |
|
show: false, |
|
childrenList: [ |
|
{ |
|
checked: false, |
|
name: "锄头" |
|
}, |
|
{ |
|
checked: false, |
|
name: "铲子" |
|
} |
|
] |
|
} |
|
]; |
|
} |
|
}, |
|
showCheck: { |
|
//显示多选框 |
|
type: Boolean, |
|
default: true |
|
}, |
|
disableLv2Check: { |
|
//让二级标题不可选中 |
|
type: Boolean, |
|
default: false |
|
}, |
|
showDelete: { |
|
//显示删除按钮 |
|
type: Boolean, |
|
default: false |
|
} |
|
}, |
|
mounted() { |
|
// console.log(this.value) |
|
// setTimeout(()=>{ |
|
// this.selectList = this.value |
|
// }) |
|
|
|
// this.$forceUpdate() |
|
}, |
|
methods: { |
|
_showlv2(index) { |
|
// console.log('showLv2............................', index) |
|
//展开二级目录 |
|
if (this.selectList[index].show) { |
|
this.$set(this.selectList[index], "show", false); |
|
this.$forceUpdate() |
|
this.$emit('input', this.selectList) |
|
} else { |
|
this.$set(this.selectList[index], "show", true); |
|
this.$forceUpdate() |
|
this.$emit('input', this.selectList) |
|
} |
|
}, |
|
_chooseAll(item, index) { |
|
//选中一级目录的所有 |
|
if (this.selectList[index].checked) { |
|
// |
|
this.$set(this.selectList[index], "checked", false); |
|
this.selectList[index].childrenList.forEach(item => { |
|
item.checked = false; |
|
}); |
|
this.$emit('input', this.selectList) |
|
} else { |
|
this.$set(this.selectList[index], "checked", true); |
|
this.selectList[index].childrenList.forEach(item => { |
|
item.checked = true; |
|
}); |
|
this.$emit('input', this.selectList) |
|
} |
|
this.$set(this.selectList[index], "show", true); |
|
this.$emit('input', this.selectList) |
|
this.$forceUpdate(); |
|
this._computedFinalList(); |
|
}, |
|
_chooseOne(i1, i2) { |
|
if (this.selectList[i1].childrenList[i2].checked) { |
|
//去掉勾选 |
|
this.$set(this.selectList[i1], "checked", true); |
|
this.$set(this.selectList[i1].childrenList[i2], "checked", false); |
|
if ( |
|
this.selectList[i1].childrenList.every(item => item.checked == false) |
|
) { |
|
//判断是否全部都是选中 |
|
this.$set(this.selectList[i1], "checked", false); |
|
} |
|
this.$forceUpdate(); |
|
this.$emit('input', this.selectList) |
|
this._computedFinalList(); |
|
|
|
} else { |
|
//增加勾选 |
|
this.$set(this.selectList[i1], "checked", true); |
|
this.$set(this.selectList[i1].childrenList[i2], "checked", true); |
|
if ( |
|
this.selectList[i1].childrenList.every(item => item.checked == true) |
|
) { |
|
//判断是否全部都是选中 |
|
this.$set(this.selectList[i1], "checked", true); |
|
} |
|
this.$emit('input', this.selectList) |
|
this.$forceUpdate(); |
|
this._computedFinalList(); |
|
} |
|
}, |
|
_computedFinalList() { |
|
//计算最终的值 |
|
this.finalList = []; |
|
this.selectList.forEach(item=>{ |
|
if(item.checked){ |
|
this.finalList.push(JSON.parse(JSON.stringify(item))) //对象深拷贝 不然原数据会发生变化 |
|
} |
|
}) |
|
this.finalList.forEach(item=>{ |
|
item.childrenList.forEach((item2,index2)=>{ |
|
if(!item2.checked){ |
|
item.childrenList.splice(index2,1) |
|
} |
|
}) |
|
}) |
|
this.$emit("choose", this.finalList); |
|
}, |
|
chooseAll() { |
|
//选中页面所有层级 |
|
this.selectList.forEach(item => { |
|
this.$set(item, "checked", true); |
|
item.childrenList.forEach(item2 => { |
|
this.$set(item2, "checked", true); |
|
}); |
|
}); |
|
this.$emit('input', this.selectList) |
|
this.$forceUpdate(); |
|
this._computedFinalList(); |
|
}, |
|
cancelAll() { |
|
//取消选中页面所有层级 |
|
this.selectList.forEach(item => { |
|
this.$set(item, "checked", false); |
|
item.childrenList.forEach(item2 => { |
|
this.$set(item2, "checked", false); |
|
}); |
|
}); |
|
this.$emit('input', this.selectList) |
|
this.$forceUpdate(); |
|
this._computedFinalList(); |
|
}, |
|
deleteItem(item) { |
|
//删除选中项目 |
|
this.$emit('input', this.selectList) |
|
this.$emit("deleteItem", item); |
|
} |
|
}, |
|
watch: { |
|
value(res) { |
|
console.log(res) |
|
this.selectList = res |
|
this.$emit('input', this.selectList) |
|
} |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
* { |
|
font-size: 32rpx; |
|
} |
|
|
|
/* #ifdef APP-PLUS*/ |
|
.selectTrees{ |
|
margin-bottom: 180rpx; |
|
} |
|
/* #endif */ |
|
|
|
.deleteBtn { |
|
position: absolute; |
|
right: 10%; |
|
background: #f97979; |
|
padding: 2rpx 16rpx; |
|
color: white; |
|
border-radius: 4rpx; |
|
font-size: 28rpx; |
|
} |
|
|
|
.itemT { |
|
margin-left: 60rpx; |
|
font-size: 32rpx; |
|
width: 65%; |
|
text-overflow: -o-ellipsis-lastline; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 2; |
|
line-clamp: 2; |
|
-webkit-box-orient: vertical; |
|
} |
|
|
|
.tree-two { |
|
padding: 20rpx 68rpx; |
|
background: white; |
|
border-bottom: 2rpx solid #e2e2e2; |
|
font-size: 28rpx; |
|
} |
|
|
|
.flexIn { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: flex-start; |
|
align-items: center; |
|
align-content: center; |
|
flex-wrap: nowrap; |
|
width: 100%; |
|
} |
|
</style> |