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
3 years ago
|
<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>
|