# el-user-dept-select-mobile

**Repository Path**: ujjldn/el-user-dept-select-mobile

## Basic Information

- **Project Name**: el-user-dept-select-mobile
- **Description**: 这是一个基于 Vue 3 和 Element Plus 的移动端用户和部门选择组件库，提供了直观易用的界面用于在移动设备上选择用户和部门。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-22
- **Last Updated**: 2025-08-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Element-UI

## README

# 移动端用户和部门选择组件

这是一个基于 Vue 3 和 Element Plus 的移动端用户和部门选择组件库，提供了直观易用的界面用于在移动设备上选择用户和部门。

## 功能特性

### 部门选择组件 (DepartmentSelect)

- 树形结构展示部门层级关系
- 支持搜索功能，可快速查找部门
- 面包屑导航，方便返回上级部门
- 支持限制选择数量（limit属性）
- 无限制模式下提供全选功能
- 响应式设计，适配移动端显示

### 用户选择组件 (UserSelect)

- 按部门分类展示用户
- 支持搜索功能，可快速查找用户
- 面包屑导航，方便返回上级部门
- 支持限制选择数量（limit属性）
- 无限制模式下提供全选功能
- 响应式设计，适配移动端显示

## 技术栈

- Vue 3.5.17
- Element Plus 2.9.11
- @element-plus/icons-vue 2.3.1
- Vite 6.3.5
- Sass-embedded 1.90.0

## 安装和使用

### 安装依赖

```bash
npm install
```

### 开发环境运行

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

## 组件使用说明

### 部门选择组件 DepartmentSelect

```vue
<template>
  <DepartmentSelect
    v-model="selectedDepartments"
    :limit="0"
    :departments="departmentData"
    :loadDepartments="loadDepartmentData"
    placeholder="请选择部门"
  />
</template>

<script setup>
import { ref } from 'vue'
import DepartmentSelect from './src/components/DepartmentSelect.vue'

const selectedDepartments = ref([])
const departmentData = ref([])

// 加载部门数据的方法
const loadDepartmentData = async () => {
  // 返回部门数据的Promise
  return [
    {
      id: 1,
      name: '管理部门',
      count: 25,
      children: [
        {
          id: 11,
          name: '人力资源部',
          count: 10,
          children: [
            {
              id: 111,
              name: '招聘组',
              count: 5
            },
            {
              id: 112,
              name: '培训组',
              count: 5
            }
          ]
        }
        // 更多部门...
      ]
    }
    // 更多顶级部门...
  ]
}
</script>
```

### 用户选择组件 UserSelect

```vue
<template>
  <UserSelect
    v-model="selectedUsers"
    :limit="0"
    :users="userData"
    :departments="departmentData"
    :loadUsers="loadUserData"
    :loadDepartments="loadDepartmentData"
    placeholder="请选择用户"
  />
</template>

<script setup>
import { ref } from 'vue'
import UserSelect from './src/components/UserSelect.vue'

const selectedUsers = ref([])
const userData = ref([])
const departmentData = ref([])

// 加载用户数据的方法
const loadUserData = async () => {
  // 返回用户数据的Promise
  return [
    {
      id: 1,
      name: '张三',
      department: '管理部门',
      deptId: 1,
      avatar: ''
    }
    // 更多用户...
  ]
}

// 加载部门数据的方法
const loadDepartmentData = async () => {
  // 返回部门数据的Promise
  return [
    {
      id: 1,
      name: '管理部门',
      userCount: 2
    }
    // 更多部门...
  ]
}
</script>
```

## API 说明

### DepartmentSelect 组件属性

| 属性名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| modelValue | Object/Array | null | 绑定值，支持v-model |
| limit | Number | 0 | 选择限制数量，0表示无限制 |
| placeholder | String | '请选择部门' | 占位符文本 |
| departments | Array | [] | 部门数据 |
| loadDepartments | Function | null | 加载部门数据的异步函数 |
| pageSize | Number | 10 | 分页大小 |

### UserSelect 组件属性

| 属性名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| modelValue | Object/Array | null | 绑定值，支持v-model |
| limit | Number | 0 | 选择限制数量，0表示无限制 |
| placeholder | String | '请选择人员' | 占位符文本 |
| users | Array | [] | 用户数据 |
| departments | Array | [] | 部门数据 |
| loadUsers | Function | null | 加载用户数据的异步函数 |
| loadDepartments | Function | null | 加载部门数据的异步函数 |
| pageSize | Number | 10 | 分页大小 |

### limit 属性说明

- `limit=0`: 无限制选择模式，可以选择任意数量的项
- `limit=1`: 单选模式，只能选择一个项
- `limit>1`: 多选模式，最多可以选择指定数量的项

## 设计规范

### 移动端交互设计

1. 使用 el-dialog 实现弹出式选择界面
2. 提供较大的点击区域和清晰的视觉反馈
3. 仿钉钉/飞书样式设计
4. 支持搜索和分页功能
5. 通过 `before-close` 钩子函数控制关闭逻辑

### 全选功能

1. 仅在无限制模式（limit=0）下显示全选功能
2. 全选操作会选中所有可选项（而非仅当前显示项）
3. 提供清晰的视觉反馈和状态显示

### 数据处理规范

1. 组件内部始终使用数组处理数据
2. 根据选择模式决定返回的数据格式：
   - 单选模式（limit=1）：返回单个对象或null
   - 多选模式（limit≠1）：返回数组
3. 在确认选择时，根据选择模式返回正确的数据格式

## 目录结构

```
.
├── src
│   ├── components
│   │   ├── DepartmentSelect.vue  # 部门选择组件
│   │   └── UserSelect.vue        # 用户选择组件
│   ├── App.vue                   # 应用入口
│   └── main.js                   # Vue 初始化文件
├── guserselectm.js
├── index.html                    # Vite 入口 HTML
├── package.json                  # 项目配置和依赖
├── vite.config.js                # Vite 构建配置
└── README.md                     # 项目说明文档
```

## 浏览器支持

- Chrome 最新版本
- Safari 最新版本
- Firefox 最新版本
- Edge 最新版本

## 许可证

MIT