岗位选择器组件

概述

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

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

组件名称：PostSelector

功能特性

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

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>
  <PostSelector v-model="postId" placeholder="请选择岗位" />
</template>

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

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

多选岗位

<template>
  <PostSelector
    v-model="postIds"
    :multiple="true"
    placeholder="请选择岗位"
  />
</template>

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

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

禁用状态

<template>
  <PostSelector
    v-model="postId"
    :disabled="true"
  />
</template>

与表单设计器集成

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

{
  "type": "post-selector",
  "field": "post_id",
  "label": "岗位",
  "props": {
    "multiple": false,
    "clearable": true,
    "filterable": true,
    "placeholder": "请选择岗位"
  }
}

弹窗布局

+------------------------------------------+
|  选择岗位                            [X] |
+------------------------------------------+
|  [搜索框]           |  已选 (2)    清空  |
|  ┌─────────────┐   |  ┌─────────────┐   |
|  │ 经理 manager│   |  │ 经理        │   |
|  │ 主管 leader │   |  │ 主管        │   |
|  │ 员工 staff  │   |  └─────────────┘   |
|  └─────────────┘   |                    |
+------------------------------------------+
|                    [取消]  [确认]        |
+------------------------------------------+

API 依赖

• getPostListApi() - 获取岗位列表（分页）
• getPostsByIds() - 根据 ID 批量获取岗位信息

典型应用场景

• 用户岗位分配：为用户分配岗位
• 组织架构管理：岗位关联配置
• 审批流程：按岗位配置审批人