部门选择器组件

概述

DeptSelector 是一个部门树形选择器组件，支持单选/多选部门，通过弹窗展示部门树结构，显示部门完整路径。

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

组件名称：DeptSelector

功能特性

• 树形部门结构展示
• 支持单选/多选模式
• 部门路径显示（如：总公司 / 技术部 / 前端组）
• 支持搜索过滤
• 弹窗选择，左侧树 + 右侧已选列表
• 懒加载部门数据
• 支持清除和移除标签

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>
  <DeptSelector v-model="deptId" placeholder="请选择部门" />
</template>

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

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

多选部门

<template>
  <DeptSelector
    v-model="deptIds"
    :multiple="true"
    placeholder="请选择部门"
  />
</template>

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

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

禁用状态

<template>
  <DeptSelector
    v-model="deptId"
    :disabled="true"
  />
</template>

不可搜索

<template>
  <DeptSelector
    v-model="deptId"
    :filterable="false"
  />
</template>

与表单设计器集成

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

{
  "type": "dept-selector",
  "field": "dept_id",
  "label": "所属部门",
  "props": {
    "multiple": false,
    "clearable": true,
    "filterable": true,
    "placeholder": "请选择部门"
  }
}

组件结构

弹窗内部布局：

+------------------------------------------+
|  选择部门                            [X] |
+------------------------------------------+
|  [搜索框]           |  已选 (2)    清空  |
|  ├─ 总公司          |  总公司/技术部     |
|  │  ├─ 技术部  ✓    |  总公司/市场部     |
|  │  ├─ 市场部  ✓    |                    |
|  │  └─ 财务部       |                    |
|  └─ 分公司          |                    |
+------------------------------------------+
|                    [取消]  [确认]        |
+------------------------------------------+

数据格式

部门树节点

interface DeptTreeNode {
  id: string;
  name: string;
  children?: DeptTreeNode[];
  parent_id?: string | null;
  status?: number;
  child_count?: number;
}

API 依赖

• getDeptTreeApi() - 获取部门树
• getDeptsByIds(ids) - 根据 ID 批量获取部门信息

典型应用场景

• 用户所属部门：选择用户归属的部门
• 数据权限配置：配置可访问的部门范围
• 审批流程：选择审批部门
• 组织架构管理：部门关联配置