118 lines
3.0 KiB
Vue
118 lines
3.0 KiB
Vue
<template>
|
||
<div class="el-tree">
|
||
<div v-for="(item, index) in list" :key="index">
|
||
<div class="title">
|
||
<span
|
||
class="arrow" @click="showAction(index)"
|
||
v-if="!showSearch && item.child && item.child.length > 0"
|
||
></span>
|
||
<span
|
||
class="arrow2" @click="showAction(index)"
|
||
v-if="showSearch && item.child && item.child.length > 0"
|
||
></span>
|
||
|
||
<div class="contentbox">
|
||
<p>{{ $t("my.UserNameXm") }}：{{ item.nickName }}</p>
|
||
<p>{{ $t("my.UserNumber") }}：{{ item.userName }}</p>
|
||
<p>{{ $t("wode.Directpushnumber") }}：{{ item.totalNum }}</p>
|
||
<p>{{ $t("wode.Directpushnumber") }}：{{ item.totalNum }}</p>
|
||
<p>
|
||
{{ $t("wode.Directpushnewperformance") }}：{{ item.registerPv }}
|
||
</p>
|
||
<p>
|
||
{{ $t("wode.Cumulativenumberofteammembers") }}：{{
|
||
item.teamTotalNum
|
||
}}
|
||
</p>
|
||
<p>
|
||
{{ $t("wode.Newperformanceoftheteam") }}：{{
|
||
item.totalTeamDayAddPv
|
||
}}
|
||
</p>
|
||
<p>
|
||
{{ $t("wode.TeamCumulativePerformance") }}：{{
|
||
item.totalRegisterPv
|
||
}}
|
||
</p>
|
||
<p>{{ $t("my.PaymentTime") }}：{{ item.payTime }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="children">
|
||
<el-tree v-if="item.isShow && item.child" :data="item.child" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "el-tree",
|
||
props: {
|
||
data: Array,
|
||
},
|
||
data() {
|
||
const newData = JSON.parse(JSON.stringify(this.data));
|
||
newData.forEach((item) => {
|
||
item.isShow = false;
|
||
});
|
||
return {
|
||
list: newData,
|
||
showSearch: false,
|
||
};
|
||
},
|
||
methods: {
|
||
showAction(index) {
|
||
if (this.list[index].child && this.list[index].child.length > 0) {
|
||
this.list[index].isShow = !this.list[index].isShow;
|
||
this.showSearch = !this.showSearch;
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.title {
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.arrow {
|
||
width: 0;
|
||
height: 0;
|
||
border: 11px solid transparent;
|
||
border-left: 11px solid #999999;
|
||
display: block;
|
||
margin-right: 20px;
|
||
}
|
||
.arrow2 {
|
||
width: 0;
|
||
height: 0;
|
||
border: 11px solid transparent;
|
||
border-top: 11px solid #1890FF;
|
||
display: block;
|
||
margin-right: 20px;
|
||
}
|
||
/* .text {
|
||
display: block;
|
||
} */
|
||
.children {
|
||
width: 1450px;
|
||
padding: 0 20px;
|
||
margin-left: 40px;
|
||
}
|
||
.contentbox {
|
||
width: 1450px;
|
||
padding: 18px;
|
||
font-size: 18px;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
box-shadow: 0px 0px 12px rgba(24, 144, 255, 0.3);
|
||
p {
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
</style>
|
||
|