chongqing-app/src/pages/components/EmployeeTreeNode.vue

<template>
    <view class="tree-node">
        <view 
            :class="['node-row', { 'is-dept': isDept, 'is-user': isUser }]"
            @click="handleClick"
        >
            <view class="toggle-icon" v-if="isDept && !selectable">
                <u-icon :name="expanded ? 'arrow-down' : 'arrow-right'" size="16" color="#999" />
            </view>
            <view class="toggle-icon" v-else-if="isDept && selectable">
                <text class="user-dot" style="color: #A78BFA">●</text>
            </view>
            <view class="toggle-icon" v-else>
                <text class="user-dot">●</text>
            </view>
            <text class="node-label">{{ nodeLabel }}</text>
            <u-icon v-if="selectable && nodeId === selectedId" name="checkmark" color="#34D399" size="18" />
            <u-icon v-else-if="!selectable && isUser && nodeId === selectedId" name="checkmark" color="#34D399" size="18" />
        </view>
        <view v-if="isDept && expanded" class="node-children">
            <template v-for="child in nodeChildren">
                <employee-tree-node
                    :key="child.id"
                    :node="child"
                    :expanded-ids="expandedIds"
                    :selected-id="selectedId"
                    :selectable="selectable"
                    @toggle="$emit('toggle', $event)"
                    @select="$emit('select', $event)"
                />
            </template>
        </view>
    </view>
</template>

<script>
export default {
    name: 'EmployeeTreeNode',
    props: {
        node: {
            type: Object,
            required: true
        },
        expandedIds: {
            type: [Array, Set],
            default: () => []
        },
        selectedId: {
            type: [String, Number],
            default: null
        },
        selectable: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        isDept() {
            const hasChildren = this.node.children && this.node.children.length > 0
            return hasChildren || this.node.nodeType === 'dept'
        },
        isUser() {
            return !this.isDept || this.selectable
        },
        nodeId() {
            return this.node.userId || this.node.id
        },
        nodeLabel() {
            return this.node.nickName || this.node.label || this.node.userName || this.node.name || ''
        },
        nodeChildren() {
            return this.node.children || []
        },
        expanded() {
            if (this.expandedIds instanceof Set) {
                return this.expandedIds.has(this.node.id)
            }
            return this.expandedIds.includes(this.node.id)
        }
    },
    methods: {
        handleClick() {
            if (this.isDept) {
                this.$emit('toggle', this.node.id)
                if (this.selectable) {
                    this.$emit('select', {
                        userId: this.node.userId || this.node.id,
                        nodeId: this.node.id,
                        nickName: this.nodeLabel,
                        nodeType: this.node.nodeType || 'dept',
                        deptType: this.node.deptType || ''
                    })
                }
            } else {
                this.$emit('select', {
                    userId: this.nodeId,
                    nickName: this.nodeLabel,
                    nodeType: this.node.nodeType || 'user',
                    deptType: this.node.deptType || ''
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.tree-node {
    width: 100%;
}

.node-row {
    display: flex;
    align-items: center;
    padding: 20rpx 32rpx 20rpx 16rpx;
    gap: 12rpx;

    &.is-dept {
        padding-left: 16rpx;
    }
}

.toggle-icon {
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-dot {
    font-size: 16rpx;
    color: #999;
}

.node-label {
    flex: 1;
    font-size: 28rpx;
    color: #333;
}

.node-children {
    padding-left: 32rpx;
}
</style>