npmapps 1.0.21 → 1.0.23

package/app/wujie-vue3-child/src/views/aiCoach/departmentPersonnel/components/DepartmentSelector.module.scss

@@ -0,0 +1,330 @@
+// 部门选择器样式
+.departmentSelector {
+    position: relative;
+    width: 100%;
+}
+
+// 自定义输入框
+.customInput {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 32px;
+    padding: 1px 11px;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    outline: none;
+    box-sizing: border-box;
+
+    &:hover {
+        border-color: #c0c4cc;
+    }
+
+    &.focused {
+        border-color: #409eff;
+    }
+
+    &.disabled {
+        background-color: #f5f7fa;
+        border-color: #e4e7ed;
+        color: #c0c4cc;
+        cursor: not-allowed;
+    }
+}
+
+// 按钮模式包装器
+.buttonWrapper {
+    // width: 100%;
+}
+
+// 按钮内部容器
+.buttonInner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 8px;
+}
+
+// 按钮内容区域
+.buttonContent {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    text-align: left;
+    overflow: hidden;
+}
+
+// 按钮文字包装器（用于显示文字+徽章）
+.buttonTextWrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+// 数量徽章（圆圈显示 +N）
+.countBadge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 4px;
+    background-color: #ecf5ff;
+    color: #409eff;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 10px;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+// 输入框内容区域
+.inputContent {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    min-height: 30px;
+    padding: 2px 0;
+}
+
+// 占位符
+.placeholder {
+    // color: #c0c4cc;
+    font-size: 14px;
+}
+
+// 前置标签
+.label {
+    color: #606266;
+    font-size: 14px;
+    margin-right: 4px;
+    flex-shrink: 0;
+}
+
+// 单选文本
+.text {
+    color: #606266;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// 标签容器
+.tagsWrapper {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+
+// 标签
+.tag {
+    margin: 0;
+    max-width: 100%;
+
+    :global(.el-tag__content) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+// 右侧图标区域
+.suffixIcons {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 8px;
+    flex-shrink: 0;
+}
+
+// 清除图标
+.clearIcon {
+    font-size: 14px;
+    color: #c0c4cc;
+    cursor: pointer;
+    transition: color 0.2s;
+
+    &:hover {
+        color: #909399;
+    }
+}
+
+// 下拉箭头图标
+.arrowIcon {
+    font-size: 14px;
+    color: #c0c4cc;
+    transition: transform 0.3s;
+
+    &.reverse {
+        transform: rotate(180deg);
+    }
+}
+
+.disabled {
+    .clearIcon,
+    .arrowIcon {
+        cursor: not-allowed;
+    }
+}
+
+// 下拉框容器
+.dropdown {
+    position: fixed;
+    background: #fff;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    z-index: 2000;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    // 添加动画效果
+    animation: dropdownSlideIn 0.2s ease-out;
+    transform-origin: top;
+}
+
+// 悬浮窗内容
+.dropdownContent {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: inherit; // 继承父容器的 maxHeight
+    overflow: hidden; // 防止内容溢出到悬浮窗外
+}
+
+// 下拉框淡入动画
+@keyframes dropdownSlideIn {
+    from {
+        opacity: 0;
+        transform: scaleY(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+}
+
+// 搜索框区域
+.searchBox {
+    padding: 8px;
+    border-bottom: 1px solid #e4e7ed;
+    background: #fff;
+}
+
+// 树形结构容器
+.treeWrapper {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 0;
+
+    // 自定义滚动条样式
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 3px;
+
+        &:hover {
+            background: #a8a8a8;
+        }
+    }
+
+    // 树节点样式
+    :global {
+        .el-tree {
+            background: transparent;
+
+            .el-tree-node {
+                &:focus > .el-tree-node__content {
+                    background-color: #f5f7fa;
+                }
+            }
+
+            .el-tree-node__content {
+                height: 32px;
+                padding-right: 12px;
+                transition: background-color 0.2s;
+
+                &:hover {
+                    background-color: #f5f7fa;
+                }
+            }
+
+            .el-tree-node__label {
+                font-size: 14px;
+                color: #606266;
+            }
+
+            // 高亮当前选中节点（单选）
+            .el-tree-node.is-current > .el-tree-node__content {
+                background-color: #ecf5ff;
+                color: #409eff;
+
+                .el-tree-node__label {
+                    color: #409eff;
+                    font-weight: 500;
+                }
+            }
+
+            // 复选框样式
+            .el-checkbox {
+                margin-right: 8px;
+            }
+
+            // 展开/收起图标
+            .el-tree-node__expand-icon {
+                font-size: 12px;
+                color: #c0c4cc;
+
+                &.is-leaf {
+                    color: transparent;
+                }
+            }
+        }
+    }
+}
+
+// 空状态
+.empty {
+    padding: 40px 16px;
+    text-align: center;
+    color: #909399;
+    font-size: 14px;
+}
+
+// 加载状态
+.loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 16px;
+    color: #909399;
+    font-size: 14px;
+    gap: 12px;
+
+    :global(.el-icon) {
+        font-size: 24px;
+        color: #409eff;
+    }
+
+    span {
+        margin-top: 4px;
+    }
+}

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

@@ -0,0 +1,378 @@
+import { defineComponent, ref } from 'vue'
+import { ArrowDown, CircleClose, Loading } from '@element-plus/icons-vue'
+import PopoverSelector from './PopoverSelector.jsx'
+import { fetchDepartments } from '../mockData.js'
+import styles from './DepartmentSelectorV2.module.scss'
+
+/**
+ * 基于 PopoverSelector 的部门选择器示例
+ * @component DepartmentSelectorV2
+ * @description 使用通用 PopoverSelector 组件构建的部门选择器
+ */
+export default defineComponent({
+    name: 'DepartmentSelectorV2',
+
+    props: {
+        /**
+         * 选中的部门（单选时为对象，多选时为数组）
+         * @type {Object|Array<Object>}
+         * @example 单选：{ id: 911, label: '前端开发组' }
+         * @example 多选：[{ id: 910, label: '后端开发组' }, { id: 911, label: '前端开发组' }]
+         */
+        modelValue: {
+            type: [Object, Array],
+            default: null,
+        },
+        /**
+         * 是否多选
+         */
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * 占位文本
+         */
+        placeholder: {
+            type: String,
+            default: '请选择部门',
+        },
+        /**
+         * 前置标签
+         */
+        label: {
+            type: String,
+            default: '',
+        },
+        /**
+         * 显示类型：input | button
+         */
+        displayType: {
+            type: String,
+            default: 'input',
+            validator: (value) => ['input', 'button'].includes(value),
+        },
+        /**
+         * 是否禁用
+         */
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * 是否可清空
+         */
+        clearable: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    emits: ['update:modelValue', 'change'],
+
+    setup(props, { emit }) {
+        // 部门树数据
+        const departments = ref([])
+        // 数据加载状态
+        const loading = ref(false)
+        // 是否 hover
+        const isHovering = ref(false)
+        // 树组件 ref
+        const treeRef = ref(null)
+        // 搜索关键词
+        const searchKeyword = ref('')
+
+        /**
+         * 获取选中的部门信息
+         */
+        const selectedDepartments = (() => {
+            if (!props.modelValue) return []
+            // v-model 直接绑定对象，单选转数组，多选直接使用
+            return Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
+        })
+
+        /**
+         * 显示文本
+         */
+        const displayText = (() => {
+            const selected = selectedDepartments()
+            if (selected.length === 0) return ''
+            return selected.map(d => d.label).join(', ')
+        })
+
+        /**
+         * 加载部门数据
+         */
+        const loadDepartments = async () => {
+            loading.value = true
+            try {
+                departments.value = await fetchDepartments(2000)
+            } catch (error) {
+                console.error('加载部门数据失败:', error)
+            } finally {
+                loading.value = false
+            }
+        }
+
+        /**
+         * 树节点点击
+         */
+        const handleNodeClick = (data, node, close) => {
+            if (!props.multiple) {
+                // 单选：选中后关闭，emit 完整对象
+                emit('update:modelValue', data)
+                emit('change', data)
+                close()
+            } else {
+                // 多选：点击展开/收起
+                if (node.childNodes && node.childNodes.length > 0) {
+                    node.expanded = !node.expanded
+                }
+            }
+        }
+
+        /**
+         * 树节点勾选
+         */
+        const handleCheck = (data, checkedInfo) => {
+            if (props.multiple) {
+                const checkedKeys = checkedInfo.checkedKeys
+                // 找出所有选中的部门对象
+                const findDepartment = (depts, id) => {
+                    for (const dept of depts) {
+                        if (dept.id === id) return dept
+                        if (dept.children) {
+                            const found = findDepartment(dept.children, id)
+                            if (found) return found
+                        }
+                    }
+                    return null
+                }
+                const selectedDepts = checkedKeys.map(id => findDepartment(departments.value, id)).filter(Boolean)
+
+                emit('update:modelValue', selectedDepts) // emit 完整对象数组
+                emit('change', selectedDepts)
+            }
+        }
+
+        /**
+         * 清空选择
+         */
+        const handleClear = (e) => {
+            e.stopPropagation()
+            emit('update:modelValue', props.multiple ? [] : null)
+            emit('change', props.multiple ? [] : null)
+        }
+
+        /**
+         * 过滤节点
+         */
+        const filterNode = (value, data) => {
+            if (!value) return true
+            return data.label.toLowerCase().includes(value.toLowerCase())
+        }
+
+        /**
+         * 搜索变化
+         */
+        const handleSearchChange = (value) => {
+            if (treeRef.value) {
+                treeRef.value.filter(value)
+            }
+        }
+
+        /**
+         * 悬浮窗打开时
+         */
+        const handleOpen = async () => {
+            // 如果数据未加载，加载数据
+            if (departments.value.length === 0) {
+                await loadDepartments()
+            }
+
+            // 设置树的选中状态
+            setTimeout(() => {
+                if (treeRef.value) {
+                    if (props.multiple) {
+                        // 多选：从对象数组中提取 id
+                        const ids = Array.isArray(props.modelValue)
+                            ? props.modelValue.map(item => item.id)
+                            : []
+                        treeRef.value.setCheckedKeys(ids)
+                    } else {
+                        // 单选：从对象中提取 id
+                        const id = props.modelValue?.id || null
+                        treeRef.value.setCurrentKey(id)
+                    }
+                }
+            }, 100)
+        }
+
+        return () => {
+            // 渲染显示内容
+            const renderContent = () => {
+                let content = null
+
+                if (props.multiple) {
+                    const selected = selectedDepartments()
+                    if (selected.length === 0) {
+                        content = <span class={styles.placeholder}>{props.placeholder}</span>
+                    } else if (props.displayType === 'button') {
+                        // 按钮模式：显示文字 + 徽章
+                        const first = selected[0]
+                        const restCount = selected.length - 1
+                        content = (
+                            <div class={styles.textWrapper}>
+                                <span class={styles.text}>{first.label}</span>
+                                {restCount > 0 && (
+                                    <span class={styles.countBadge}>+{restCount}</span>
+                                )}
+                            </div>
+                        )
+                    } else {
+                        // 输入框模式：显示文本
+                        content = <span class={styles.text}>{displayText()}</span>
+                    }
+                } else {
+                    content = displayText() ? (
+                        <span class={styles.text}>{displayText()}</span>
+                    ) : (
+                        <span class={styles.placeholder}>{props.placeholder}</span>
+                    )
+                }
+
+                if (props.label) {
+                    return (
+                        <>
+                            <span class={styles.label}>{props.label}</span>
+                            {content}
+                        </>
+                    )
+                }
+
+                return content
+            }
+
+            // 渲染图标
+            const renderIcons = (visible) => {
+                const hasValue = props.multiple
+                    ? selectedDepartments().length > 0
+                    : !!displayText()
+
+                const showClearIcon = props.clearable && hasValue && isHovering.value
+
+                return (
+                    <div class={styles.icons}>
+                        {showClearIcon && (
+                            <el-icon class={styles.clearIcon} onClick={handleClear}>
+                                <CircleClose />
+                            </el-icon>
+                        )}
+                        {!showClearIcon && (
+                            <el-icon class={[styles.arrowIcon, visible && styles.reverse]}>
+                                <ArrowDown />
+                            </el-icon>
+                        )}
+                    </div>
+                )
+            }
+
+            return (
+                <PopoverSelector
+                    width={400}
+                    maxHeight={400}
+                    disabled={props.disabled}
+                    onOpen={handleOpen}
+                >
+                    {{
+                        // 触发器插槽
+                        trigger: ({ open, visible }) => {
+                            if (props.displayType === 'button') {
+                                return (
+                                    <el-button
+                                        disabled={props.disabled}
+                                        onClick={open}
+                                        onMouseenter={() => (isHovering.value = true)}
+                                        onMouseleave={() => (isHovering.value = false)}
+                                        class={styles.buttonTrigger}
+                                    >
+                                        {{
+                                            default: () => (
+                                                <div class={styles.buttonInner}>
+                                                    <div class={styles.content}>
+                                                        {renderContent()}
+                                                    </div>
+                                                    {renderIcons(visible)}
+                                                </div>
+                                            ),
+                                        }}
+                                    </el-button>
+                                )
+                            }
+
+                            return (
+                                <div
+                                    class={[
+                                        styles.inputTrigger,
+                                        props.disabled && styles.disabled,
+                                        visible && styles.focused,
+                                    ]}
+                                    onClick={open}
+                                    onMouseenter={() => (isHovering.value = true)}
+                                    onMouseleave={() => (isHovering.value = false)}
+                                >
+                                    <div class={styles.content}>{renderContent()}</div>
+                                    {renderIcons(visible)}
+                                </div>
+                            )
+                        },
+
+                        // 悬浮窗内容插槽
+                        default: ({ close }) => (
+                            <div class={styles.dropdownContent}>
+                                {/* 搜索框 */}
+                                <div class={styles.searchBox}>
+                                    <el-input
+                                        v-model={searchKeyword.value}
+                                        placeholder="搜索部门"
+                                        prefix-icon="Search"
+                                        clearable
+                                        size="small"
+                                        onInput={handleSearchChange}
+                                    />
+                                </div>
+
+                                {/* 树形结构 */}
+                                <div class={styles.treeWrapper}>
+                                    {loading.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' }}
+                                            show-checkbox={props.multiple}
+                                            check-strictly={true}
+                                            default-expand-all={false}
+                                            highlight-current={!props.multiple}
+                                            expand-on-click-node={false}
+                                            filter-node-method={filterNode}
+                                            onNodeClick={(data, node) => handleNodeClick(data, node, close)}
+                                            onCheck={handleCheck}
+                                        />
+                                    )}
+                                </div>
+                            </div>
+                        ),
+                    }}
+                </PopoverSelector>
+            )
+        }
+    },
+})