npmapps 1.1.6 → 1.2.0

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

@@ -1,585 +0,0 @@
-import { defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue'
-import { Loading } from '@element-plus/icons-vue'
-import { debounce } from 'lodash-es'
-import PopoverSelector from './PopoverSelector.jsx'
-import SelectorTrigger from './SelectorTrigger.jsx'
-import { fetchPersonnel, searchPersonnel } from '../mockData.js'
-import styles from './PersonnelSelector.module.scss'
-
-/**
- * 人员选择器组件
- * @component PersonnelSelector
- * @description 基于 PopoverSelector 构建的人员选择器，支持单选和多选，提供列表形式展示
- *
- * @example
- * // 单选模式（输入框）
- * <PersonnelSelector
- *   v-model={selectedPersonnel}
- *   placeholder="请选择人员"
- *   clearable={true}
- * />
- *
- * // 多选模式（按钮）
- * <PersonnelSelector
- *   v-model={selectedPersonnelList}
- *   displayType="button"
- *   label="人员:"
- *   multiple={true}
- *   clearable={true}
- * />
- *
- * // 按部门过滤
- * <PersonnelSelector
- *   v-model={selectedPersonnelList}
- *   departmentId={1}
- *   placeholder="请选择人员"
- * />
- */
-export default defineComponent({
-    name: 'PersonnelSelector',
-
-    props: {
-        /**
-         * 选中的人员（单选时为对象，多选时为数组）
-         * @type {Object|Array<Object>}
-         * @example 单选：{ id: 10245, name: '张三', position: '高级工程师' }
-         * @example 多选：[{ id: 10245, name: '张三' }, { id: 10246, name: '李四' }]
-         */
-        modelValue: {
-            type: [Object, Array],
-            default: null,
-        },
-        /**
-         * 是否多选
-         * @type {boolean}
-         */
-        multiple: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * 输入框占位文本
-         * @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,
-        },
-        /**
-         * 按部门ID过滤人员（为null时显示所有人员）
-         * @type {number|null}
-         */
-        departmentId: {
-            type: Number,
-            default: null,
-        },
-        /**
-         * 远程搜索方法
-         * @type {Function}
-         * @param {string} query - 搜索关键词
-         * @returns {Promise<Array>} 返回过滤后的人员列表数据
-         */
-        remoteMethod: {
-            type: Function,
-            default: null,
-        },
-    },
-
-    emits: ['update:modelValue', 'change'],
-
-    setup(props, { emit }) {
-        // 人员列表数据
-        const personnel = ref([])
-        // 原始完整人员数据（用于本地搜索）
-        const allPersonnel = ref([])
-
-        // 搜索关键词
-        const searchKeyword = ref('')
-
-        // 远程搜索加载状态
-        const searchLoading = ref(false)
-
-        // 数据加载状态
-        const dataLoading = ref(false)
-
-        /**
-         * 获取选中的人员信息
-         * @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 loadPersonnel = async () => {
-            dataLoading.value = true
-            try {
-                const data = await fetchPersonnel(300, props.departmentId)
-                personnel.value = data
-                allPersonnel.value = data
-            } catch (error) {
-                console.error('加载人员数据失败:', error)
-            } finally {
-                dataLoading.value = false
-            }
-        }
-
-        /**
-         * 悬浮窗打开时的回调
-         */
-        const handleOpen = async () => {
-            // 如果数据未加载，加载数据
-            if (personnel.value.length === 0) {
-                await loadPersonnel()
-            }
-        }
-
-        /**
-         * 人员项点击事件
-         * @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
-         * @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 {Event} e - 事件对象
-         */
-        const handleClear = (e) => {
-            e.stopPropagation()
-            emit('update:modelValue', props.multiple ? [] : null)
-            emit('change', props.multiple ? [] : null)
-        }
-
-        /**
-         * 移除单个标签
-         * @param {Event} e - 事件对象
-         * @param {number|string} id - 人员ID
-         */
-        const removeTag = (e, id) => {
-            e.stopPropagation()
-            if (props.multiple) {
-                const newValue = (Array.isArray(props.modelValue) ? props.modelValue : [])
-                    .filter(item => item.id !== id)
-                emit('update:modelValue', newValue)
-                emit('change', newValue)
-            }
-        }
-
-        /**
-         * 执行搜索（防抖）
-         * @param {string} value - 搜索关键词
-         */
-        const performSearch = async (value) => {
-            // 如果有远程搜索方法，调用远程搜索
-            if (props.remoteMethod && typeof props.remoteMethod === 'function') {
-                try {
-                    searchLoading.value = true
-                    const result = await props.remoteMethod(value)
-                    // 更新人员数据
-                    if (Array.isArray(result)) {
-                        personnel.value = result
-                    }
-                } catch (error) {
-                    console.error('远程搜索失败:', error)
-                } finally {
-                    searchLoading.value = false
-                }
-            } else {
-                // 使用本地搜索
-                if (!value) {
-                    personnel.value = allPersonnel.value
-                } else {
-                    personnel.value = searchPersonnel(value, allPersonnel.value)
-                }
-            }
-        }
-
-        // 创建防抖搜索函数（300ms延迟）
-        const debouncedSearch = debounce(performSearch, 300)
-
-        /**
-         * 搜索关键词变化处理
-         * @param {string} value - 搜索关键词
-         */
-        const handleSearchChange = (value) => {
-            debouncedSearch(value)
-        }
-
-        // 监听 departmentId 变化，重新加载数据
-        watch(() => props.departmentId, () => {
-            loadPersonnel()
-        })
-
-        // 组件卸载时
-        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
-            }
-
-            return (
-                <PopoverSelector
-                    width={400}
-                    maxHeight={300}
-                    disabled={props.disabled}
-                    onOpen={handleOpen}
-                >
-                    {{
-                        // 触发器插槽
-                        trigger: ({ open, visible }) => {
-                            // 计算是否有选中值
-                            const hasValue = props.multiple
-                                ? selectedPersonnel.value.length > 0
-                                : !!displayText.value
-
-                            return (
-                                <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.searchBox}>
-                                    <el-input
-                                        v-model={searchKeyword.value}
-                                        placeholder="搜索人员（姓名/职位/电话/邮箱）"
-                                        prefix-icon="Search"
-                                        clearable
-                                        size="small"
-                                        loading={searchLoading.value}
-                                        onInput={handleSearchChange}
-                                    />
-                                </div>
-
-                                {/* 人员列表 */}
-                                <div class={styles.listWrapper}>
-                                    {(searchLoading.value || dataLoading.value) ? (
-                                        <div class={styles.loading}>
-                                            <el-icon class="is-loading">
-                                                <Loading />
-                                            </el-icon>
-                                            <span>{searchLoading.value ? '搜索中...' : '加载中...'}</span>
-                                        </div>
-                                    ) : personnel.value.length === 0 ? (
-                                        <div class={styles.empty}>暂无人员数据</div>
-                                    ) : (
-                                        <div class={styles.personnelList}>
-                                            {personnel.value.map(person => (
-                                                <div
-                                                    key={person.id}
-                                                    class={[
-                                                        styles.personnelItem,
-                                                        isPersonSelected(person.id) && styles.selected,
-                                                    ]}
-                                                    onClick={() => handlePersonClick(person, close)}
-                                                >
-                                                    {/* 多选模式显示复选框 */}
-                                                    {props.multiple && (
-                                                        <el-checkbox
-                                                            modelValue={isPersonSelected(person.id)}
-                                                            class={styles.checkbox}
-                                                        />
-                                                    )}
-
-                                                    {/* 人员信息 */}
-                                                    <div class={styles.personInfo}>
-                                                        <div class={styles.personName}>{person.name}</div>
-                                                        <div class={styles.personMeta}>
-                                                            <span class={styles.position}>{person.position}</span>
-                                                            {person.phone && (
-                                                                <>
-                                                                    <span class={styles.divider}>|</span>
-                                                                    <span class={styles.phone}>{person.phone}</span>
-                                                                </>
-                                                            )}
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            ))}
-                                        </div>
-                                    )}
-                                </div>
-                            </div>
-                        ),
-                    }}
-                </PopoverSelector>
-            )
-        }
-    },
-})