feat(employeeProfile): 实现部门树状员工选择组件

1.  新增EmployeeTreeNode树形节点组件用于渲染员工/部门树
2.  重构员工列表为部门树结构，支持展开收起部门节点
3.  添加搜索时切换树结构和普通列表的逻辑
4.  新增自动展开所有部门、默认选中第一个员工的功能
5.  优化搜索逻辑，改为通过计算属性实时过滤结果

src/pages/components/EmployeeTreeNode.vue

@@ -0,0 +1,125 @@
+<template>
+    <view class="tree-node">
+        <view 
+            :class="['node-row', { 'is-dept': isDept, 'is-user': isUser }]"
+            @click="handleClick"
+        >
+            <view class="toggle-icon" v-if="isDept">
+                <u-icon :name="expanded ? 'arrow-down' : 'arrow-right'" size="16" color="#999" />
+            </view>
+            <view class="toggle-icon" v-else>
+                <text class="user-dot">●</text>
+            </view>
+            <text class="node-label">{{ nodeLabel }}</text>
+            <u-icon v-if="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"
+                    @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
+        }
+    },
+    computed: {
+        isDept() {
+            const hasChildren = this.node.children && this.node.children.length > 0
+            return hasChildren || this.node.nodeType === 'dept'
+        },
+        isUser() {
+            return !this.isDept
+        },
+        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)
+            } else {
+                this.$emit('select', {
+                    userId: this.nodeId,
+                    nickName: this.nodeLabel
+                })
+            }
+        }
+    }
+}
+</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>

src/pages/employeeProfile/index.vue

@@ -239,9 +239,21 @@
                 </view>
                 <view class="search-box">
                     <u-input v-model="employeeSearchKeyword" placeholder="搜索员工" @confirm="onEmployeeSearch"
-                        @input="onEmployeeSearch" />
+                        @input="onEmployeeSearch"></u-input>
                 </view>
-                <scroll-view scroll-y class="employee-list">
+                <scroll-view v-if="!employeeSearchKeyword.trim()" scroll-y class="tree-list">
+                    <template v-for="(node, index) in deptTreeData">
+                        <employee-tree-node
+                            :key="node.id"
+                            :node="node"
+                            :expanded-ids="expandedDeptIds"
+                            :selected-id="selectedEmployeeId"
+                            @toggle="toggleDeptExpand"
+                            @select="onEmployeeSelect"
+                        />
+                    </template>
+                </scroll-view>
+                <scroll-view v-else scroll-y class="employee-list">
                     <view class="employee-item" v-for="item in filteredEmployeeList" :key="item.userId"
                         @click="onEmployeeSelect(item)">
                         <text class="employee-item-name">{{ item.nickName }}</text>
@@ -265,6 +277,7 @@ import * as echarts from 'echarts'
 import { getEmployeePortrait, countTagScore } from '@/api/portraitManagement/portraitManagement'
 import { listAllUser, getDeptUserTree } from '@/api/system/user'
 import SectionTitle from '@/components/SectionTitle.vue'
+import EmployeeTreeNode from '@/pages/components/EmployeeTreeNode.vue'
 
 const honorColors = ['#60A5FA', '#34D399', '#FBBF24', '#EF4444', '#A78BFA', '#F472B6', '#6EE7B7', '#FB923C']
 
@@ -286,7 +299,8 @@ function getRandomHexColor() {
 export default {
     name: 'EmployeeProfile',
     components: {
-        SectionTitle
+        SectionTitle,
+        EmployeeTreeNode
     },
     data() {
         return {
@@ -308,10 +322,12 @@ export default {
             showEmployeePicker: false,
             selectedEmployeeId: null,
             selectedEmployeeName: '',
+            deptTreeData: [],
+            pickerTreeData: [],
             employeeList: [],
-            filteredEmployeeList: [],
             employeeSearchKeyword: '',
             employeeLoading: false,
+            expandedDeptIds: [],
             isSecurityCheck: false,
             userInfo: null
         }
@@ -353,6 +369,13 @@ export default {
             const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
             const weekDay = weekDays[now.getDay()]
             return `${year}年${month}月${day}日 ${weekDay}`
+        },
+        filteredEmployeeList() {
+            const keyword = this.employeeSearchKeyword.trim().toLowerCase()
+            if (!keyword) return this.employeeList
+            return this.employeeList.filter(item =>
+                (item.nickName || '').toLowerCase().includes(keyword)
+            )
         }
     },
     mounted() {
@@ -382,6 +405,58 @@ export default {
             this.currentTime = `${hours}:${minutes}:${seconds}`
         },
         // 员工相关方法
+        // 扁平化部门树，提取人员
+        flattenDeptTree(tree) {
+            const result = []
+            const traverse = (nodes) => {
+                nodes.forEach(node => {
+                    const hasChildren = node.children && node.children.length > 0
+                    if (!hasChildren && node.nodeType !== 'dept') {
+                        result.push({
+                            nodeType: node.nodeType || '',
+                            userId: node.userId || node.id,
+                            nickName: node.nickName || node.label || node.userName || ''
+                        })
+                    }
+                    if (hasChildren) {
+                        traverse(node.children)
+                    }
+                })
+            }
+            traverse(tree)
+            return result
+        },
+
+        // 从树中查找第一个用户节点
+        findFirstUser(nodes) {
+            for (const node of nodes) {
+                const hasChildren = node.children && node.children.length > 0
+                if (!hasChildren && node.nodeType !== 'dept') {
+                    return node
+                }
+                if (hasChildren) {
+                    const found = this.findFirstUser(node.children)
+                    if (found) return found
+                }
+            }
+            return null
+        },
+        // 展开所有部门节点
+        expandAllDepts(nodes) {
+            this.expandedDeptIds = []
+            const traverse = (list) => {
+                list.forEach(node => {
+                    const hasChildren = node.children && node.children.length > 0
+                    if (hasChildren || node.nodeType === 'dept') {
+                        this.expandedDeptIds.push(node.id)
+                        if (hasChildren) {
+                            traverse(node.children)
+                        }
+                    }
+                })
+            }
+            traverse(nodes)
+        },
         fetchEmployeeList() {
             this.employeeLoading = true
             const user = this.$store.state.user?.userInfo || this.$store.state.user?.user
@@ -396,11 +471,8 @@ export default {
                 this.selectedEmployeeId = user.userId || user.id
                 this.selectedEmployeeName = user.nickName || user.userName || ''
                 this.searchKeyword = this.selectedEmployeeName
-                this.employeeList = [{
-                    userId: user.userId || user.id,
-                    nickName: user.nickName || user.userName || ''
-                }]
-                this.filteredEmployeeList = [...this.employeeList]
+                this.deptTreeData = []
+                this.pickerTreeData = []
                 this.employeeLoading = false
                 // 自动加载画像数据
                 this.fetchEmployeePortrait()
@@ -409,14 +481,16 @@ export default {
                 if (user && user.deptId) {
                     getDeptUserTree({ deptId: user.deptId }).then(res => {
                         if (res.code === 200) {
-                            let allUsers = this.flattenDeptTree(res.data || [])
-                            this.employeeList = allUsers.filter(user => user.nodeType == 'user')
-
-                            this.filteredEmployeeList = [...this.employeeList]
-                            // 默认选中第一个
-                            if (this.employeeList.length > 0) {
-                                this.selectedEmployeeId = this.employeeList[0].userId
-                                this.selectedEmployeeName = this.employeeList[0].nickName
+                            this.deptTreeData = res.data || []
+                            const allUsers = this.flattenDeptTree(this.deptTreeData)
+                            this.employeeList = allUsers.filter(user => user.nodeType === 'user')
+                            // 默认展开所有部门
+                            this.expandAllDepts(this.deptTreeData)
+                            // 默认选中第一个用户
+                            const firstUser = this.findFirstUser(this.deptTreeData)
+                            if (firstUser) {
+                                this.selectedEmployeeId = firstUser.userId || firstUser.id
+                                this.selectedEmployeeName = firstUser.nickName || firstUser.label || firstUser.userName || ''
                                 this.searchKeyword = this.selectedEmployeeName
                                 this.fetchEmployeePortrait()
                             }
@@ -430,36 +504,15 @@ export default {
                 }
             }
         },
-        // 扁平化部门树，提取人员
-        flattenDeptTree(tree) {
-            const result = []
-            const traverse = (nodes) => {
-                nodes.forEach(node => {
-                    // 判断是否是人员节点，这里假设人员有 userId 或者特定字段
-                    // 根据实际接口返回调整判断条件
-                    if (node.userId || (node.id && !node.children)) {
-                        result.push({
-                            nodeType: node.nodeType || '',
-                            userId: node.userId || node.id,
-                            nickName: node.nickName || node.label || node.userName || ''
-                        })
-                    }
-                    if (node.children && node.children.length > 0) {
-                        traverse(node.children)
-                    }
-                })
-            }
-            traverse(tree)
-            return result
-        },
         onEmployeeSearch() {
-            const keyword = this.employeeSearchKeyword.trim()
-            if (!keyword) {
-                this.filteredEmployeeList = [...this.employeeList]
+            // 搜索由 computed 自动处理
+        },
+        toggleDeptExpand(id) {
+            const index = this.expandedDeptIds.indexOf(id)
+            if (index > -1) {
+                this.expandedDeptIds.splice(index, 1)
             } else {
-                this.filteredEmployeeList = this.employeeList.filter(item =>
-                    (item.nickName || '').includes(keyword)
-                )
+                this.expandedDeptIds.push(id)
             }
         },
         onEmployeeSelect(item) {
@@ -853,6 +906,13 @@ export default {
     flex-shrink: 0;
 }
 
+.tree-list {
+    flex: 1;
+    padding: 0;
+    height: 0;
+    overflow: hidden;
+}
+
 .employee-list {
     flex: 1;
     padding: 0 32rpx;