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>
|
|||
|
|
|