client-app/pages/ledger/components/log-collapse.vue

<template>
    <view class="hc-log-time-tree">
        <uni-collapse accordion v-model="collapseKey" @change="collapseChange">
            <template v-for="(item, index) in dataList" :key="index">
                <uni-collapse-item :show-arrow="false" :name="item.hierarchy">
                    <template v-slot:title>
                        <view class="log-time-title-box">
                            <view class="name-bar">
                                <text class="i-ri-arrow-right-s-fill icon"/>
                                <text class="name">{{item.hierarchy}}</text>
                                <text class="text">({{item.logs.length}}条)</text>
                            </view>
                            <view class="action-bar"
                                  v-if="isAction"
                                  :class="item.treeList.length <= 0 ? 'is-disabled': ''"
                                  @click.stop="actionClick(item,index)"
                            >
                                <text class="i-ri-calendar-2-line"/>
                                <text class="name">{{text}}</text>
                            </view>
                        </view>
                    </template>
                    <view class="log-time-content-bar">
                        <slot :item="item" :index="index"/>
                    </view>
                </uni-collapse-item>
            </template>
        </uni-collapse>
    </view>
</template>

<script setup>
import { ref, watch } from "vue";
import {getArrValue} from "js-fast-way";

//参数
const props = defineProps({
    modelValue: {
        type: String,
        default: '',
    },
    data: {
        type: Array,
        default: () => ([]),
    },
    text: {
        type: String,
        default: '月份',
    },
    action: {
        type: Boolean,
        default: true,
    },
})

//基础变量
const collapseKey = ref(props.modelValue)
const isAction = ref(props.action)
const dataList = ref(props.data)

//监听选中项
watch(() => [
    props.modelValue
], ([val]) => {
    collapseKey.value = val
})

//监听列表数据
watch(() => [
    props.data
], ([val]) => {
    dataList.value = val
}, {deep: true})

//事件
const emit = defineEmits(['update:modelValue', 'change', 'action'])

//选择数据改变
const collapseChange = (key) => {
    emit('update:modelValue', key)
    emit('change', key)
}

//右边被点击
const actionClick = (item, index) => {
    const arr = getArrValue(item.treeList)
    if (arr.length > 0) {
        emit('action', item, index)
    }
}
</script>

<style lang="scss" scoped>
.hc-log-time-tree {
    position: relative;
    margin-top: 8rpx;
    margin-bottom: 10rpx;
    :deep(.uni-collapse-item__title.is-open) {
        border-color: #ebeef5;
        .name-bar .icon {
            transform: rotate(90deg);
        }
    }
    .log-time-title-box {
        position: relative;
        padding: 0 28rpx;
        height: 80rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: 14rpx;
        .name-bar {
            flex: 1;
            padding-right: 55rpx;
            display: flex;
            align-items: center;
            .icon {
                font-size: 20px;
                color: #7A7B7C;
                margin-right: 10rpx;
                transform: rotate(0);
                transition: transform .3s ease-in-out;
            }
            .text {
                margin-left: 8rpx;
                color: #7A7B7C;
            }
        }
        .action-bar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            position: relative;
            color: #007aff;
            .name {
                margin-left: 5rpx;
            }
            &:after {
                content: "";
                position: absolute;
                left: -26rpx;
                height: 100%;
                width: 1px;
                background: #eee;
            }
            &.is-disabled {
                color: #E9EAEC;
            }
        }
    }
    .log-time-content-bar {
        position: relative;
        background: #E9EAEC;
        :deep(.hc-all-user-list) {
            margin-top: 0;
            margin-bottom: 0;
        }
    }
}
</style>