User Select Dialog

Vue 3 Element Plus User Select Dialog Component

Installation

npm install user-select-dialog

Usage

Basic Usage

<template>
  <div>
    <el-button @click="dialogVisible = true">Select User</el-button>
    <user-select-dialog
      v-model="dialogVisible"
      :api="api"
      :selected-users="selectedUsers"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import UserSelectDialog from 'user-select-dialog'

const dialogVisible = ref(false)
const selectedUsers = ref([])

const api = {
  // 异步获取用户分页列表
  async getUserPageList(pageDto, params) {
    // 实现你的API调用逻辑
    return {
      data: [
        { id: '1', name: 'John Doe', departmentName: 'IT', jobNumber: '001', mobile: '13800138000' },
        { id: '2', name: 'Jane Smith', departmentName: 'HR', jobNumber: '002', mobile: '13900139000' }
      ],
      pagination: { totalCount: 2 }
    }
  },
  // 异步获取部门选项
  async getDepartmentOptions() {
    // 实现你的API调用逻辑
    return [
      { id: '1', name: 'IT' },
      { id: '2', name: 'HR' }
    ]
  }
}

function handleConfirm(users) {
  selectedUsers.value = users
  console.log('Selected users:', users)
}
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | modelValue | Boolean | false | 控制对话框显示/隐藏 | | dialogTitle | String | "选择用户" | 对话框标题 | | selectedUsers | Array | [] | 已选用户列表，格式: [{ id, name, jobNumber? }] | | api | Object | required | API对象，包含 getUserPageList 和 getDepartmentOptions 方法 | | multiple | Boolean | true | 是否允许多选 | | multipleLimit | Number | 0 | 多选时最大数量，0表示不限制 |

Events

| Event | Description | Parameters | |-------|-------------|------------| | update:modelValue | 对话框显示状态变化 | Boolean | | confirm | 确认选择用户 | Array<{ id, name, jobNumber? }> |

API Methods

getUserPageList(pageDto, params)

• pageDto: { page: Number, pageSize: Number }
• params: { description: String, departmentId: String }
• Returns: Promise<{ data: Array, pagination: { totalCount: Number } }>

getDepartmentOptions()

• Returns: Promise<Array<{ id: String, name: String }>>