npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-vue3-child/src/views/aiCoach/departmentPersonnel/components/DepartmentPersonnelSelector.jsx

@@ -0,0 +1,687 @@
+import { defineComponent, ref, computed, nextTick, onBeforeUnmount } from 'vue'
+import { Search, Delete, Loading } from '@element-plus/icons-vue'
+import { debounce } from 'lodash-es'
+import PopoverSelector from './PopoverSelector.jsx'
+import SelectorTrigger from './SelectorTrigger.jsx'
+import { fetchDepartments, fetchPersonnel, searchPersonnel } from '../mockData.js'
+import styles from './DepartmentPersonnelSelector.module.scss'
+
+/**
+ * 部门人员选择器组件（三栏布局）
+ * @component DepartmentPersonnelSelector
+ * @description 左侧部门树，中间人员列表，右侧已选人员的三栏布局选择器
+ *
+ * @example
+ * // 单选
+ * <DepartmentPersonnelSelector
+ *   v-model={selectedPersonnel}
+ *   placeholder="请选择人员"
+ * />
+ *
+ * // 多选
+ * <DepartmentPersonnelSelector
+ *   v-model={selectedPersonnelList}
+ *   multiple={true}
+ *   placeholder="请选择人员"
+ * />
+ */
+export default defineComponent({
+    name: 'DepartmentPersonnelSelector',
+
+    props: {
+        /**
+         * 选中的人员（单选时为对象，多选时为对象数组）
+         * @type {Object|Array<Object>}
+         * @example 单选：{ id: 1001, name: '张伟', position: '部门总经理' }
+         * @example 多选：[{ id: 1001, name: '张伟' }, { id: 1002, name: '王芳' }]
+         */
+        modelValue: {
+            type: [Object, Array],
+            default: null,
+        },
+        /**
+         * 是否多选
+         * @type {boolean}
+         */
+        multiple: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * 输入框占位文本
+         * @type {string}
+         */
+        placeholder: {
+            type: String,
+            default: '请选择人员',
+        },
+        /**
+         * 显示类型：input 输入框模式 | button 按钮模式
+         * @type {string}
+         */
+        displayType: {
+            type: String,
+            default: 'input',
+            validator: (value) => ['input', 'button'].includes(value),
+        },
+        /**
+         * 前置标签文本，如："人员:"
+         * @type {string}
+         */
+        label: {
+            type: String,
+            default: '',
+        },
+        /**
+         * 是否禁用
+         * @type {boolean}
+         */
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * 是否可清空
+         * @type {boolean}
+         */
+        clearable: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * 多选时是否将选中值按文字的形式展示
+         * @type {boolean}
+         */
+        collapseTags: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签
+         * @type {boolean}
+         */
+        collapseTagsTooltip: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * 多选时用户最多可以选择的项目数，为 0 则不限制
+         * @type {number}
+         */
+        maxCollapseTags: {
+            type: Number,
+            default: 0,
+        },
+        /**
+         * 是否默认选择第一个部门
+         * @type {boolean}
+         */
+        defaultSelectFirstDepartment: {
+            type: Boolean,
+            default: true,
+        },
+    },
+
+    emits: ['update:modelValue', 'change'],
+
+    setup(props, { emit }) {
+        // 部门树数据
+        const departments = ref([])
+        // 所有人员数据
+        const allPersonnel = ref([])
+        // 当前部门的人员列表
+        const currentPersonnel = ref([])
+        // 当前选中的部门ID
+        const selectedDepartmentId = ref(null)
+
+        // 数据加载状态
+        const isLoadingDepartments = ref(false)
+        const isLoadingPersonnel = ref(false)
+
+        // 树组件 ref
+        const treeRef = ref(null)
+
+        // 搜索关键词
+        const searchKeyword = ref('')
+        // 是否正在搜索
+        const isSearching = computed(() => searchKeyword.value.trim() !== '')
+
+        /**
+         * 获取选中的人员信息
+         * @returns {Array}
+         */
+        const selectedPersonnel = computed(() => {
+            if (!props.modelValue) return []
+            // v-model 直接绑定对象，单选转数组，多选直接使用
+            return Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
+        })
+
+        /**
+         * 显示在输入框中的文本
+         * @returns {string}
+         */
+        const displayText = computed(() => {
+            if (selectedPersonnel.value.length === 0) return ''
+            return selectedPersonnel.value.map(p => p.name).join(', ')
+        })
+
+        /**
+         * 已选人员统计
+         */
+        const selectedCount = computed(() => selectedPersonnel.value.length)
+
+        /**
+         * 加载部门数据
+         */
+        const loadDepartments = async () => {
+            try {
+                isLoadingDepartments.value = true
+                departments.value = await fetchDepartments(1500)
+            } catch (error) {
+                console.error('加载部门数据失败:', error)
+            } finally {
+                isLoadingDepartments.value = false
+            }
+        }
+
+        /**
+         * 加载所有人员数据
+         */
+        const loadAllPersonnel = async () => {
+            try {
+                isLoadingPersonnel.value = true
+                allPersonnel.value = await fetchPersonnel(1500, null)
+            } catch (error) {
+                console.error('加载人员数据失败:', error)
+            } finally {
+                isLoadingPersonnel.value = false
+            }
+        }
+
+        /**
+         * 加载指定部门的人员
+         * @param {number} departmentId - 部门ID
+         */
+        const loadPersonnelByDepartment = async (departmentId) => {
+            try {
+                isLoadingPersonnel.value = true
+                currentPersonnel.value = await fetchPersonnel(1500, departmentId)
+            } catch (error) {
+                console.error('加载部门人员失败:', error)
+            } finally {
+                isLoadingPersonnel.value = false
+            }
+        }
+
+        /**
+         * 悬浮窗打开时的回调
+         */
+        const handleOpen = async () => {
+            // 异步加载数据（不阻塞悬浮窗打开）
+            const loadDataPromises = []
+
+            // 如果数据未加载，先加载
+            if (departments.value.length === 0) {
+                loadDataPromises.push(loadDepartments())
+            }
+
+            // 等待数据加载完成
+            if (loadDataPromises.length > 0) {
+                await Promise.all(loadDataPromises)
+            }
+
+            // 如果配置了默认选择第一个部门
+            if (props.defaultSelectFirstDepartment) {
+                // 如果没有选中部门，默认选中第一个部门
+                if (!selectedDepartmentId.value && departments.value.length > 0) {
+                    const firstDept = departments.value[0]
+                    selectedDepartmentId.value = firstDept.id
+                    await loadPersonnelByDepartment(firstDept.id)
+                }
+            }
+
+            // 设置树的选中状态（每次打开都设置，确保高亮显示）
+            await nextTick()
+            if (treeRef.value && selectedDepartmentId.value) {
+                treeRef.value.setCurrentKey(selectedDepartmentId.value)
+            }
+        }
+
+        /**
+         * 部门树节点点击事件
+         * @param {Object} data - 节点数据
+         */
+        const handleDepartmentClick = async (data) => {
+            selectedDepartmentId.value = data.id
+            searchKeyword.value = ''
+            await loadPersonnelByDepartment(data.id)
+        }
+
+        /**
+         * 检查人员是否被选中
+         * @param {number|string} id - 人员ID
+         * @returns {boolean}
+         */
+        const isPersonSelected = (id) => {
+            if (!props.multiple) {
+                return props.modelValue?.id === id
+            } else {
+                const currentValue = Array.isArray(props.modelValue) ? props.modelValue : []
+                return currentValue.some(p => p.id === id)
+            }
+        }
+
+        /**
+         * 人员项点击事件（添加到已选列表）
+         * @param {Object} person - 人员数据
+         * @param {Function} close - 关闭悬浮窗的函数
+         */
+        const handlePersonClick = (person, close) => {
+            if (!props.multiple) {
+                // 单选模式：直接选择并关闭，emit 完整对象
+                emit('update:modelValue', person)
+                emit('change', person)
+                close()
+            } else {
+                // 多选模式：切换选中状态
+                const currentValue = Array.isArray(props.modelValue) ? props.modelValue : []
+                const index = currentValue.findIndex(p => p.id === person.id)
+
+                let newValue
+                if (index > -1) {
+                    // 已选中，取消选中
+                    newValue = currentValue.filter(p => p.id !== person.id)
+                } else {
+                    // 未选中，添加选中
+                    newValue = [...currentValue, person]
+                }
+
+                emit('update:modelValue', newValue)
+                emit('change', newValue) // 返回完整对象数组
+            }
+        }
+
+        /**
+         * 从已选列表中移除人员
+         * @param {number|string} id - 人员ID
+         */
+        const removeSelectedPerson = (id) => {
+            if (props.multiple) {
+                const newValue = (Array.isArray(props.modelValue) ? props.modelValue : [])
+                    .filter(item => item.id !== id)
+                emit('update:modelValue', newValue)
+                emit('change', newValue) // 返回完整对象数组
+            }
+        }
+
+        /**
+         * 清空所有已选人员
+         */
+        const clearAllSelected = () => {
+            emit('update:modelValue', props.multiple ? [] : null)
+            emit('change', props.multiple ? [] : null) // 空值时直接返回 null 或 []
+        }
+
+        /**
+         * 清空选择（从输入框）
+         */
+        const handleClear = (e) => {
+            e.stopPropagation()
+            clearAllSelected()
+        }
+
+        /**
+         * 移除单个标签
+         * @param {number|string} id - 人员ID
+         */
+        const removeTag = (e, id) => {
+            e.stopPropagation()
+            removeSelectedPerson(id)
+        }
+
+        /**
+         * 搜索关键词变化处理（防抖）
+         */
+        const performSearch = () => {
+            const keyword = searchKeyword.value.trim()
+            if (!keyword) {
+                // 清空搜索，恢复当前部门人员
+                if (selectedDepartmentId.value) {
+                    loadPersonnelByDepartment(selectedDepartmentId.value)
+                }
+            } else {
+                // 搜索全局人员
+                currentPersonnel.value = searchPersonnel(keyword, allPersonnel.value)
+            }
+        }
+
+        // 创建防抖搜索函数（300ms延迟）
+        const debouncedSearch = debounce(performSearch, 300)
+
+        /**
+         * 搜索输入变化处理
+         */
+        const handleSearchChange = () => {
+            debouncedSearch()
+        }
+
+        // 组件卸载时
+        onBeforeUnmount(() => {
+            // 取消防抖函数
+            debouncedSearch.cancel()
+        })
+
+        return () => {
+            // 渲染多选标签
+            const renderTags = () => {
+                if (!props.multiple || selectedPersonnel.value.length === 0) return null
+
+                const persons = selectedPersonnel.value
+
+                // collapse-tags 模式：只显示第一个 + 剩余数量
+                if (props.collapseTags) {
+                    const firstPerson = persons[0]
+                    const restCount = persons.length - 1
+
+                    const tagsContent = (
+                        <div class={styles.tagsWrapper}>
+                            <el-tag
+                                closable
+                                disable-transitions
+                                onClose={(e) => removeTag(e, firstPerson.id)}
+                                size="small"
+                                type="info"
+                                class={styles.tag}
+                            >
+                                {firstPerson.name}
+                            </el-tag>
+                            {restCount > 0 && (
+                                <el-tag
+                                    disable-transitions
+                                    size="small"
+                                    type="info"
+                                    class={styles.tag}
+                                >
+                                    +{restCount}
+                                </el-tag>
+                            )}
+                        </div>
+                    )
+
+                    // collapse-tags-tooltip 模式：悬停显示所有标签
+                    if (props.collapseTagsTooltip && restCount > 0) {
+                        const tooltipContent = persons.slice(1).map(p => p.name).join('、')
+                        return (
+                            <el-tooltip
+                                content={tooltipContent}
+                                placement="top"
+                                effect="light"
+                            >
+                                {tagsContent}
+                            </el-tooltip>
+                        )
+                    }
+
+                    return tagsContent
+                }
+
+                // max-collapse-tags 模式：限制显示的标签数量
+                if (props.maxCollapseTags > 0 && persons.length > props.maxCollapseTags) {
+                    const visiblePersons = persons.slice(0, props.maxCollapseTags)
+                    const restCount = persons.length - props.maxCollapseTags
+
+                    return (
+                        <div class={styles.tagsWrapper}>
+                            {visiblePersons.map(person => (
+                                <el-tag
+                                    key={person.id}
+                                    closable
+                                    disable-transitions
+                                    onClose={(e) => removeTag(e, person.id)}
+                                    size="small"
+                                    type="info"
+                                    class={styles.tag}
+                                >
+                                    {person.name}
+                                </el-tag>
+                            ))}
+                            <el-tag
+                                disable-transitions
+                                size="small"
+                                type="info"
+                                class={styles.tag}
+                            >
+                                +{restCount}
+                            </el-tag>
+                        </div>
+                    )
+                }
+
+                // 默认模式：显示所有标签
+                return (
+                    <div class={styles.tagsWrapper}>
+                        {persons.map(person => (
+                            <el-tag
+                                key={person.id}
+                                closable
+                                disable-transitions
+                                onClose={(e) => removeTag(e, person.id)}
+                                size="small"
+                                type="info"
+                                class={styles.tag}
+                            >
+                                {person.name}
+                            </el-tag>
+                        ))}
+                    </div>
+                )
+            }
+
+            // 渲染显示内容（文本或标签）
+            const renderContent = () => {
+                let content = null
+
+                if (props.multiple) {
+                    // 多选模式
+                    if (selectedPersonnel.value.length === 0) {
+                        content = <span class={styles.placeholder}>{props.placeholder}</span>
+                    } else if (props.displayType === 'button') {
+                        // 按钮模式：显示文字 + 圆圈徽章
+                        const firstPerson = selectedPersonnel.value[0]
+                        const restCount = selectedPersonnel.value.length - 1
+
+                        content = (
+                            <div class={styles.buttonTextWrapper}>
+                                <span class={styles.text}>{firstPerson.name}</span>
+                                {restCount > 0 && (
+                                    <span class={styles.countBadge}>+{restCount}</span>
+                                )}
+                            </div>
+                        )
+                    } else {
+                        // 输入框模式：显示标签
+                        content = renderTags()
+                    }
+                } else {
+                    // 单选：显示文本
+                    content = displayText.value ? (
+                        <span class={styles.text}>{displayText.value}</span>
+                    ) : (
+                        <span class={styles.placeholder}>{props.placeholder}</span>
+                    )
+                }
+
+                // 如果有 label，添加前缀
+                if (props.label) {
+                    return (
+                        <>
+                            <span class={styles.label}>{props.label}</span>
+                            {content}
+                        </>
+                    )
+                }
+
+                return content
+            }
+
+            // 计算是否有选中值
+            const hasValue = props.multiple
+                ? selectedPersonnel.value.length > 0
+                : !!displayText.value
+
+            // 计算悬浮窗宽度（单选520px，多选800px）
+            const popoverWidth = props.multiple ? 800 : 520
+
+            return (
+                <PopoverSelector
+                    width={popoverWidth}
+                    maxHeight={500}
+                    disabled={props.disabled}
+                    onOpen={handleOpen}
+                >
+                    {{
+                        // 触发器插槽
+                        trigger: ({ open, visible }) => (
+                            <SelectorTrigger
+                                displayType={props.displayType}
+                                visible={visible}
+                                disabled={props.disabled}
+                                clearable={props.clearable}
+                                hasValue={hasValue}
+                                onClick={open}
+                                onClear={handleClear}
+                            >
+                                {renderContent()}
+                            </SelectorTrigger>
+                        ),
+
+                        // 悬浮窗内容插槽
+                        default: ({ close }) => (
+                            <div class={styles.dropdownContent}>
+                                {/* 搜索栏 */}
+                                <div class={styles.searchBar}>
+                                    <el-input
+                                        v-model={searchKeyword.value}
+                                        placeholder="搜索人员（姓名/职位/电话/邮箱）"
+                                        prefix-icon="Search"
+                                        onInput={handleSearchChange}
+                                    />
+                                </div>
+
+                                {/* 三栏内容区域 */}
+                                <div class={styles.contentArea}>
+                                    {/* 左侧：部门树 */}
+                                    <div class={styles.leftPanel}>
+                                        <div class={styles.panelTitle}>部门</div>
+                                        <div class={styles.treeWrapper}>
+                                            {isLoadingDepartments.value ? (
+                                                <div class={styles.loading}>
+                                                    <el-icon class="is-loading">
+                                                        <Loading />
+                                                    </el-icon>
+                                                    <span>加载部门中...</span>
+                                                </div>
+                                            ) : (
+                                                <el-tree
+                                                    ref={treeRef}
+                                                    data={departments.value}
+                                                    node-key="id"
+                                                    props={{ label: 'label', children: 'children' }}
+                                                    default-expand-all={false}
+                                                    highlight-current={true}
+                                                    expand-on-click-node={true}
+                                                    onNodeClick={handleDepartmentClick}
+                                                />
+                                            )}
+                                        </div>
+                                    </div>
+
+                                    {/* 中间：人员列表 */}
+                                    <div class={styles.middlePanel}>
+                                        <div class={styles.panelTitle}>
+                                            {isSearching.value ? '搜索结果' : '人员列表'}
+                                        </div>
+                                        <div class={styles.personnelList}>
+                                            {isLoadingPersonnel.value ? (
+                                                <div class={styles.loading}>
+                                                    <el-icon class="is-loading">
+                                                        <Loading />
+                                                    </el-icon>
+                                                    <span>加载人员中...</span>
+                                                </div>
+                                            ) : currentPersonnel.value.length === 0 ? (
+                                                <div class={styles.empty}>
+                                                    {isSearching.value ? '未找到相关人员' : '暂无人员'}
+                                                </div>
+                                            ) : (
+                                                currentPersonnel.value.map(person => (
+                                                    <div
+                                                        key={person.id}
+                                                        class={[
+                                                            styles.personnelItem,
+                                                            isPersonSelected(person.id) && styles.selected,
+                                                        ]}
+                                                        onClick={() => handlePersonClick(person, close)}
+                                                    >
+                                                        {/* 人员信息 */}
+                                                        <div class={styles.personInfo}>
+                                                            <div class={styles.personName}>{person.name}</div>
+                                                            <div class={styles.personMeta}>
+                                                                <span class={styles.position}>{person.position}</span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                ))
+                                            )}
+                                        </div>
+                                    </div>
+
+                                    {/* 右侧：已选人员（仅多选模式显示） */}
+                                    {props.multiple && (
+                                        <div class={styles.rightPanel}>
+                                            <div class={styles.panelTitle}>
+                                                已选择 ({selectedCount.value})
+                                                {selectedCount.value > 0 && (
+                                                    <span
+                                                        class={styles.clearAll}
+                                                        onClick={clearAllSelected}
+                                                    >
+                                                        清空
+                                                    </span>
+                                                )}
+                                            </div>
+                                            <div class={styles.selectedList}>
+                                                {selectedPersonnel.value.length === 0 ? (
+                                                    <div class={styles.empty}>暂无选择</div>
+                                                ) : (
+                                                    selectedPersonnel.value.map(person => (
+                                                        <div key={person.id} class={styles.selectedItem}>
+                                                            <div class={styles.selectedPersonInfo}>
+                                                                <div class={styles.selectedPersonName}>
+                                                                    {person.name}
+                                                                </div>
+                                                                <div class={styles.selectedPersonMeta}>
+                                                                    {person.position}
+                                                                </div>
+                                                            </div>
+                                                            <el-icon
+                                                                class={styles.removeIcon}
+                                                                onClick={() => removeSelectedPerson(person.id)}
+                                                            >
+                                                                <Delete />
+                                                            </el-icon>
+                                                        </div>
+                                                    ))
+                                                )}
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        ),
+                    }}
+                </PopoverSelector>
+            )
+        }
+    },
+})