角色选择器组件

概述

RoleSelector 是一个角色选择组件，支持单选/多选角色，通过弹窗展示角色列表，支持搜索和分页加载。

组件路径：web/apps/web-ele/src/components/zq-form/role-selector/

组件名称：RoleSelector

功能特性

• 角色列表展示
• 支持单选/多选模式
• 支持搜索过滤
• 分页加载（触底加载更多）
• 显示角色名称和编码
• 弹窗选择，左侧列表 + 右侧已选

Props

属性	类型	默认值	说明
modelValue	string | string[]	-	选中的角色 ID
multiple	boolean	false	是否多选
placeholder	string	'请选择'	占位符
disabled	boolean	false	是否禁用
clearable	boolean	true	是否可清除
filterable	boolean	true	是否可搜索

Events

事件	参数	说明
update:modelValue	string | string[] | undefined	值更新
change	string | string[] | undefined	值变化

Expose 方法

方法	说明
openModal()	打开角色选择弹窗

使用示例

单选角色

<template>
  <RoleSelector v-model="roleId" placeholder="请选择角色" />
</template>

<script setup>
import { ref } from 'vue';

const roleId = ref('');
</script>

多选角色

<template>
  <RoleSelector
    v-model="roleIds"
    :multiple="true"
    placeholder="请选择角色"
  />
</template>

<script setup>
import { ref } from 'vue';

const roleIds = ref([]);
</script>

禁用状态

<template>
  <RoleSelector
    v-model="roleId"
    :disabled="true"
  />
</template>

与表单设计器集成

在表单设计器中，该组件作为 role-selector 类型的表单项使用：

{
  "type": "role-selector",
  "field": "role_id",
  "label": "角色",
  "props": {
    "multiple": false,
    "clearable": true,
    "filterable": true,
    "placeholder": "请选择角色"
  }
}

弹窗布局

+------------------------------------------+
|  选择角色                            [X] |
+------------------------------------------+
|  [搜索框]           |  已选 (2)    清空  |
|  ┌─────────────┐   |  ┌─────────────┐   |
|  │ 管理员 admin│   |  │ 管理员      │   |
|  │ 编辑 editor │   |  │ 编辑        │   |
|  │ 访客 guest  │   |  └─────────────┘   |
|  └─────────────┘   |                    |
+------------------------------------------+
|                    [取消]  [确认]        |
+------------------------------------------+

API 依赖

• getRoleListApi() - 获取角色列表（分页）
• getRolesByIds() - 根据 ID 批量获取角色信息

典型应用场景

• 用户角色分配：为用户分配一个或多个角色
• 权限配置：选择角色进行权限配置
• 数据权限：按角色配置数据访问范围