129 lines
3.1 KiB
Vue
129 lines
3.1 KiB
Vue
<!--
|
|
* @Descripttion:
|
|
* @version:
|
|
* @Author: 王三华
|
|
* @Date: 2023-07-28 16:30:26
|
|
-->
|
|
<template>
|
|
<view>
|
|
<view v-for="(item, index) in data" :key="item.id">
|
|
<view class="thetree">
|
|
<view
|
|
@click="toggleNode(index)"
|
|
class="arrow"
|
|
v-if="!item.expanded && item.children && item.children.length > 0"
|
|
>
|
|
<u-icon size="56rpx" color="#ee252a" name="plus-circle"></u-icon>
|
|
</view>
|
|
<view
|
|
@click="toggleNode(index)"
|
|
class="arrow"
|
|
v-else-if="item.expanded && item.children && item.children.length > 0"
|
|
>
|
|
<u-icon size="56rpx" color="#ee252a" name="minus-circle"></u-icon>
|
|
</view>
|
|
<view class="arrow" v-else
|
|
><u-icon size="56rpx" color="#ee252a00" name="minus-circle"></u-icon
|
|
></view>
|
|
<view class="fzbtn"
|
|
><u-button
|
|
@click="copyText(item.splice)"
|
|
class="thebtn"
|
|
size="small"
|
|
:text="$t('MY_CK_27')"
|
|
></u-button
|
|
></view>
|
|
<view class="maintree">{{ item.splice }}</view>
|
|
</view>
|
|
<tree-item
|
|
style="margin-left: 40rpx"
|
|
v-if="item.isShow && item.children"
|
|
:data="item.children"
|
|
></tree-item>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "TreeItems",
|
|
props: ["data"],
|
|
|
|
data() {
|
|
const newData = this.data;
|
|
newData.forEach((item, index) => {
|
|
this.$set(this.data[index], "isShow", false);
|
|
this.$set(this.data[index], "expanded", false);
|
|
// item.isShow = false;
|
|
// item.expanded = false;
|
|
});
|
|
return {
|
|
expanded: false, // 初始状态为折叠
|
|
};
|
|
},
|
|
created() {
|
|
this.expanded = false;
|
|
},
|
|
watch: {
|
|
data(val) {
|
|
this.data = val;
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
copyText(text) {
|
|
let self = this;
|
|
uni.setClipboardData({
|
|
data: text,
|
|
success: function (res) {
|
|
uni.getClipboardData({
|
|
success: function (res) {
|
|
uni.showToast({
|
|
title: self.$t("MY_CK_29"),
|
|
icon: "none",
|
|
});
|
|
},
|
|
});
|
|
},
|
|
});
|
|
},
|
|
toggleNode(index) {
|
|
console.log(index);
|
|
// return
|
|
if (this.data[index].children && this.data[index].children.length > 0) {
|
|
console.log(11);
|
|
this.expanded = !this.expanded; // 切换展开和折叠状态
|
|
this.$set(this.data[index], "isShow", !this.data[index].isShow);
|
|
this.$set(this.data[index], "expanded", !this.data[index].expanded);
|
|
console.log(22);
|
|
// this.data[index].isShow = !this.data[index].isShow;
|
|
// this.data[index].expanded = !this.data[index].expanded;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.thetree {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.fzbtn {
|
|
.thebtn {
|
|
color: #333333;
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.maintree {
|
|
border: 2rpx solid #eeeeee;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
background: #f3f3f3;
|
|
margin-left: 20rpx;
|
|
padding: 28rpx 25rpx;
|
|
margin-top: 27rpx;
|
|
}
|
|
}
|
|
</style>
|