JLC Docs
PIG
AI
PIG
AI

前端组织架构组件

组件预览

组织架构选择器界面

页面使用

<template>
  <org-selector v-model:orgList="userList" type="user" :multiple="false" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import orgSelector from '/@/components/OrgSelector/index.vue';

const userList = ref([]);
</script>
组件导入

OrgSelector 组件支持选择用户、部门、角色、岗位等多种组织架构实体，通过 type 属性控制选择类型。

数据格式

组件返回的数据格式为数组，每个元素包含以下字段：

[
  {
    "type": "user",
    "id": "1",
    "name": "admin",
    "avatar": "xx.png"
  }
]

属性说明

属性名类型默认值描述
orgListArray[]组织列表，用于显示可选的组织。
typeStringuser类型，可选值为 user、dept、org (部门、用户 同时可选)、role、post
multipleBooleantrue是否允许多选。如果为 true，则可以选择多个组织或用户；如果为 false，则只能选择一个组织或用户。默认为 true。
disabledBooleanfalse是否禁用组件。如果为 true，则组件将不可用，用户无法进行选择。默认为 false。
selectSelfBooleantrue是否包含自身。如果为 true，则在可选项中包含当前用户自身；如果为 false，则不包含当前用户自身。默认为 true。

选择类型

用户选择

选择组织架构中的用户：

<org-selector v-model:orgList="userList" type="user" />

部门选择

选择组织架构中的部门：

<org-selector v-model:orgList="deptList" type="dept" />

组织选择

同时选择部门和用户：

<org-selector v-model:orgList="orgList" type="org" />

角色选择

选择系统角色：

<org-selector v-model:orgList="roleList" type="role" />

岗位选择

选择组织岗位：

<org-selector v-model:orgList="postList" type="post" />

单选与多选

单选模式

设置 multiple 为 false 启用单选模式：

<org-selector v-model:orgList="selectedUser" type="user" :multiple="false" />
单选数据格式

单选模式下，返回的数据仍然是数组格式，但只包含一个元素。

多选模式

默认为多选模式，可以选择多个项目：

<org-selector v-model:orgList="selectedUsers" type="user" :multiple="true" />

禁用状态

在查看模式下可以禁用选择器：

<org-selector v-model:orgList="userList" type="user" :disabled="true" />

排除自身

在某些场景下需要排除当前登录用户，可以设置 selectSelf 为 false：

<org-selector v-model:orgList="userList" type="user" :selectSelf="false" />
应用场景

在流程审批、任务分配等场景中，通常需要排除自身，避免将任务分配给自己。

本页目录