80 lines
2.1 KiB
Vue
80 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<view class="treeItemWrapper" v-for="item in formatedValues" :key="item.id">
|
||
|
|
<view :class="['treeItem', item.user_code === searchKey ? 'active' : '']">
|
||
|
|
<view v-for="i in item.tier" :key="item.user_code + i" style="display: flex; align-items: center">
|
||
|
|
<view :class="['line', 'vertical', item.lineConfig[i - 1] ? '' : 'transparent']"></view>
|
||
|
|
<view class="line transparent" :style="{ width: '36px' }"></view>
|
||
|
|
</view>
|
||
|
|
<view class="line vertical"></view>
|
||
|
|
<view class="line"></view>
|
||
|
|
<image
|
||
|
|
:src="`/static/partner/${item.collapse ? 'unfold' : 'collapse'}.png`"
|
||
|
|
mode="aspectFill"
|
||
|
|
class="collapseBtn"
|
||
|
|
v-if="item.children"
|
||
|
|
@click="() => toogleItemCollapse(item)"
|
||
|
|
></image>
|
||
|
|
<view class="labelWrapper">
|
||
|
|
<view :class="['label', isIb(item) ? 'ib' : '']">
|
||
|
|
<image :src="`/static/partner/${isIb(item) ? 'ib' : 'client'}.png`" mode="aspectFit" style="width: 19px; height: 19px"></image>
|
||
|
|
{{ `${item.user_code}(${item.id})` }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<TreeItem v-if="item.children && !item.collapse" :values="item.children" :lineConfig="item.lineConfig" :searchKey="searchKey" :isLast="item.isLast" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'TreeItem',
|
||
|
|
props: {
|
||
|
|
values: {
|
||
|
|
type: Object,
|
||
|
|
required: true,
|
||
|
|
default: () => ({})
|
||
|
|
},
|
||
|
|
lineConfig: {
|
||
|
|
type: Array,
|
||
|
|
required: false,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
searchKey: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
isLast: {
|
||
|
|
type: Boolean,
|
||
|
|
required: false,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
isIb(item) {
|
||
|
|
return item.user_type === 1;
|
||
|
|
},
|
||
|
|
toogleItemCollapse(item) {
|
||
|
|
item.collapse = !item.collapse;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
formatedValues() {
|
||
|
|
const tempValues = [...this.values];
|
||
|
|
tempValues?.forEach((item, index, arr) => {
|
||
|
|
if (index !== arr.length - 1 && arr.length > 1 && item.tier >= 1) {
|
||
|
|
item.lineConfig = [...this.lineConfig, true];
|
||
|
|
} else {
|
||
|
|
item.lineConfig = [...this.lineConfig, false];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return tempValues;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import './index.scss';
|
||
|
|
</style>
|