# g-select-dialog

**Repository Path**: ujjldn/g-select-dialog

## Basic Information

- **Project Name**: g-select-dialog
- **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-10
- **Last Updated**: 2025-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Element-UI

## README

# g-selectDialog

一个基于 Vue 3 和 Element Plus 的选择器组件库，包含用户、部门和角色选择功能。

## 🎯 项目概述

g-selectDialog 是一组灵活且易用的选择器组件，专为 Vue 3 应用程序设计。它提供了用户、部门和角色的选择功能，支持单选、多选以及限制选择数量等多种使用场景。

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 本地开发

```bash
npm run dev
```

### 生产构建

```bash
npm run build
```

## 🧩 组件介绍

### UserSelector - 用户选择器

用户选择器组件支持通过部门和角色筛选用户，提供用户列表展示和搜索功能。

#### 功能特性
- 支持通过部门和角色筛选用户
- 用户搜索功能
- 支持单选和多选模式
- 可限制选择数量
- 分页展示用户列表
- 已选择用户管理

#### 使用示例

```vue
<template>
  <el-button type="primary" @click="openUserSelector">选择人员</el-button>
  
  <UserSelector 
    ref="userSelectorRef" 
    dept-data-api="/api/departments" 
    role-data-api="/api/roles"
    user-data-api="/api/users"/>
</template>

<script setup>
import { ref } from 'vue'
import UserSelector from '@/components/UserSelector.vue'

const userSelectorRef = ref()
const selectedIds = ref([])
const selectedNames = ref([])

const openUserSelector = () => {
  // 调用选择器，传入已选中的用户ID
  userSelectorRef.value.selectUser(selectedIds.value, (result) => {
    // 处理选择结果
    selectedIds.value = result.ids
    selectedNames.value = result.names
    console.log('选择的用户ID:', result.ids)
    console.log('选择的用户名:', result.names)
  })
}

// 单选模式
const openUserSelectorSingle = () => {
  userSelectorRef.value.selectUser(selectedIds.value, (result) => {
    // 处理选择结果
    selectedIds.value = result.ids
    selectedNames.value = result.names
  }, 1) // 限制选择1个
}

// 限制选择数量
const openUserSelectorLimit = () => {
  userSelectorRef.value.selectUser(selectedIds.value, (result) => {
    // 处理选择结果
    selectedIds.value = result.ids
    selectedNames.value = result.names
  }, 3) // 限制选择3个
}
</script>
```

### UserSelectorH5 - 用户选择器(H5移动端)

专为移动端设计的用户选择器组件，具有响应式布局和触摸友好的交互。

#### 功能特性
- 支持通过部门筛选用户
- 用户搜索功能
- 支持单选和多选模式
- 可限制选择数量
- 分页展示用户列表
- 已选择用户管理
- 面包屑导航支持
- 移动端优化的UI界面

#### 使用示例

```vue
<template>
  <el-button type="primary" @click="openUserSelectorH5">选择人员(H5)</el-button>
  
  <UserSelectorH5 
    ref="userSelectorH5Ref" 
    dept-data-api="/api/departments" 
    user-data-api="/api/users"
    user-dept-id-key="deptId"/>
</template>

<script setup>
import { ref } from 'vue'
import UserSelectorH5 from '@/components/UserSelectorH5.vue'

const userSelectorH5Ref = ref()
const selectedIds = ref([])
const selectedNames = ref([])

const openUserSelectorH5 = () => {
  // 调用选择器，传入已选中的用户ID
  userSelectorH5Ref.value.selectUserH5(selectedIds.value, (result) => {
    // 处理选择结果
    selectedIds.value = result.ids
    selectedNames.value = result.names
    console.log('选择的用户ID:', result.ids)
    console.log('选择的用户名:', result.names)
  })
}

// 单选模式
const openUserSelectorSingleH5 = () => {
  userSelectorH5Ref.value.selectUserH5(selectedIds.value, (result) => {
    // 处理选择结果
    selectedIds.value = result.ids
    selectedNames.value = result.names
  }, 1) // 限制选择1个
}

// 限制选择数量
const openUserSelectorLimitH5 = () => {
  userSelectorH5Ref.value.selectUserH5(selectedIds.value, (result) => {
    // 处理选择结果
    selectedIds.value = result.ids
    selectedNames.value = result.names
  }, 3) // 限制选择3个
}
</script>
```

### DeptSelector - 部门选择器

部门选择器基于树形结构展示部门信息，支持层级选择。

#### 功能特性
- 树形结构展示部门层级
- 支持单选和多选模式
- 可限制选择数量
- 部门搜索功能
- 全选功能（多选模式下）

#### 使用示例

```vue
<template>
  <el-button type="primary" @click="openDeptSelector">选择部门</el-button>
  
  <DeptSelector ref="deptSelectorRef" data-api="/api/departments" />
</template>

<script setup>
import { ref } from 'vue'
import DeptSelector from '@/components/DeptSelector.vue'

const deptSelectorRef = ref()
const selectedDeptIds = ref([])
const selectedDeptNames = ref([])

const openDeptSelector = () => {
  deptSelectorRef.value.selectDept(selectedDeptIds.value, (result) => {
    selectedDeptIds.value = result.ids
    selectedDeptNames.value = result.names
    console.log('选择的部门ID:', result.ids)
    console.log('选择的部门名:', result.names)
  })
}

// 单选模式
const openDeptSelectorSingle = () => {
  deptSelectorRef.value.selectDept(selectedDeptIds.value, (result) => {
    selectedDeptIds.value = result.ids
    selectedDeptNames.value = result.names
  }, 1)
}

// 限制选择数量
const openDeptSelectorLimit = () => {
  deptSelectorRef.value.selectDept(selectedDeptIds.value, (result) => {
    selectedDeptIds.value = result.ids
    selectedDeptNames.value = result.names
  }, 3)
}
</script>
```

### DeptSelectorH5 - 部门选择器(H5移动端)

专为移动端设计的部门选择器组件，具有响应式布局和触摸友好的交互。

#### 功能特性
- 树形结构展示部门层级
- 支持单选和多选模式
- 可限制选择数量
- 部门搜索功能
- 全选功能（多选模式下）
- 面包屑导航支持
- 移动端优化的UI界面

#### 使用示例

```vue
<template>
  <el-button type="primary" @click="openDeptSelectorH5">选择部门(H5)</el-button>
  
  <DeptSelectorH5 ref="deptSelectorH5Ref" data-api="/api/departments" />
</template>

<script setup>
import { ref } from 'vue'
import DeptSelectorH5 from '@/components/DeptSelectorH5.vue'

const deptSelectorH5Ref = ref()
const selectedDeptIds = ref([])
const selectedDeptNames = ref([])

const openDeptSelectorH5 = () => {
  deptSelectorH5Ref.value.selectDeptH5(selectedDeptIds.value, (result) => {
    selectedDeptIds.value = result.ids
    selectedDeptNames.value = result.names
    console.log('选择的部门ID:', result.ids)
    console.log('选择的部门名:', result.names)
  })
}

// 单选模式
const openDeptSelectorSingleH5 = () => {
  deptSelectorH5Ref.value.selectDeptH5(selectedDeptIds.value, (result) => {
    selectedDeptIds.value = result.ids
    selectedDeptNames.value = result.names
  }, 1)
}

// 限制选择数量
const openDeptSelectorLimitH5 = () => {
  deptSelectorH5Ref.value.selectDeptH5(selectedDeptIds.value, (result) => {
    selectedDeptIds.value = result.ids
    selectedDeptNames.value = result.names
  }, 3)
}
</script>
```

### RoleSelector - 角色选择器

角色选择器同样基于树形结构展示角色信息。

#### 功能特性
- 树形结构展示角色层级
- 支持单选和多选模式
- 可限制选择数量
- 角色搜索功能
- 全选功能（多选模式下）

#### 使用示例

```vue
<template>
  <el-button type="primary" @click="openRoleSelector">选择角色</el-button>
  
  <RoleSelector ref="roleSelectorRef" data-api="/api/roles" />
</template>

<script setup>
import { ref } from 'vue'
import RoleSelector from '@/components/RoleSelector.vue'

const roleSelectorRef = ref()
const selectedRoleIds = ref([])
const selectedRoleNames = ref([])

const openRoleSelector = () => {
  roleSelectorRef.value.selectRole(selectedRoleIds.value, (result) => {
    selectedRoleIds.value = result.ids
    selectedRoleNames.value = result.names
    console.log('选择的角色ID:', result.ids)
    console.log('选择的角色名:', result.names)
  })
}
</script>
```

### cdn 使用示例  
详见test/test - dialog-js.html文件
使用组件名称调用对应的组件
dialogName：string 组件名称(characterSelector/RoleSelector/DeptSelector/UserSelector/RoleSelector/DeptSelectorH5/UserSelectorH5)
```javascript
GDialog.openDialog({dialogName: 'RoleSelector', ...props,onConfirm:{},onCancel:{})
```
```html
<script src="../node_modules/vue/dist/vue.global.prod.js"></script>
<link rel="stylesheet" href="../node_modules/element-plus/dist/index.css">
<script src="../node_modules/element-plus/dist/index.full.min.js"></script>
<script src="../dist/gdialog.umd.js"></script>
<link rel="stylesheet" href="../dist/gdialog.css" />

<el-button
  :key="4"
    type="primary"
    @click="openDeptSelectorH5"
  >
  部门选择框H5
</button>

openDeptSelectorH5(){
    window.GDialog.openDialog({
    dialogName: 'DeptSelectorH5',
    visible:true,
    selected:[3],
    departments: depts,
    onConfirm: (result) => {
      console.log('收到:', result)		  
    }
    })
  }
```

## 🛠️ 开发与构建

- 本地开发：`npm run dev`
- 生产构建：`npm run build`
- 预览生产构建：`npm run preview`

构建输出目录为 `dist/`。

## 📁 目录结构

```
.
├── public/
│   └── mockData/           # 模拟数据
│       ├── department.json
│       ├── role.json
│       └── user.json
├── src/
│   ├── components/
│   │   ├── characterSelector/
│   │   ├── treeSelector/
│   │   ├── DeptSelector.vue
│   │   ├── DeptSelectorH5.vue
│   │   ├── RoleSelector.vue
│   │   ├── UserSelector.vue
│   │   ├── UserSelectorH5.vue
│   │   ├── character-dialog.vue
│   │   ├── character-drawer.vue
│   │   └── g-select-dialog.vue
│   ├── utils/
│   │   └── useSelectDialog.js
│   ├── App.vue
│   └── main.js
├── temp/
├── test/
├── README.md
├── index.html
├── package.json
└── vite.config.js
```

## 🤝 更新日志
### 2025-08-11 v.0.0.2
1. 修复UserSelector组件使用props传参时，组件内部数据未更新

### 2025-08-23 v.0.0.3
1. 新增UserSelectorH5和DeptSelectorH5移动端组件
2. 优化组件布局和交互体验

### 2025-08-26 v.0.0.4
1. 编译成cdn下使用的gdialog.umd.js时，通过window.GDialog.openDialog({...})可以调用全部组件，详见test/test - dialog-js.html文件
2. 部门、角色、用户等选择框增加 onConfirm和onCancel回调函数或通过confirm,cancel 属性设置回调函数,增加selected属性，用于设置默认选中项[1,2,3]


## 📄 许可证

MIT License