User Select Vue 2

Vue 2 Element UI User Select Dialog Component

Installation

npm install user-select-vue2

Usage

Basic Usage

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

<script>
import UserSelectDialog from 'user-select-vue2'

export default {
  components: {
    UserSelectDialog
  },
  data() {
    return {
      dialogVisible: false,
      selectedUsers: []
    }
  },
  methods: {
    handleConfirm(users) {
      this.selectedUsers = users
      console.log('Selected users:', users)
    }
  },
  computed: {
    api() {
      return {
        // 异步获取用户分页列表
        getUserPageList: async (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 }
          }
        },
        // 异步获取部门选项
        getDepartmentOptions: async () => {
          // 实现你的API调用逻辑
          return [
            { id: '1', name: 'IT' },
            { id: '2', name: 'HR' }
          ]
        }
      }
    }
  }
}
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | 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 | |-------|-------------|------------| | input | 对话框显示状态变化 | 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 }>>