OrgSelector 组织选择器

可通过该组件选取获得指定组织的数据。（该组件支持函数式调用）

基本用法

该组件无需引入可在现目中直接使用，具体文件放置在 /apps/*/components/OrgUserSelector 下。

通过 v-model 绑定数据

<script setup lang="ts">
interface Org {
  orgId: string
  orgName: string
}

const open = ref(false)
function toggle() {
  open.value = true
}

const orgs = ref<Org[]>([])
function submit(orgs: Org[]) {}
</script>

<template>
  <OrgSelector
    v-model:open="open"
    v-model="orgs"
    title="选择组织"
    multiple
    @submit="submit"
  />
</template>

通过调用 open 方法打开

<script setup lang="ts">
const orgSelectorRef = ref()

function open() {
  orgSelectorRef.value.open()
}
</script>

<template>
  <OrgSelector ref="orgSelectorRef" />
</template>

通过 trigger 插槽触发

<template>
  <OrgSelector>
    <template #trigger>
      <button>选择组织</button>
    </template>
  </OrgSelector>
</template>

函数式调用

import { selectOrg } from '@/components/OrgUserSelector'

function onClick() {
  selectOrg({
    modelValue: [], // 回显时选中的数据
    multiple: true,
    onSubmit(selected = []) {
      console.log(selected) // 点击确认后返回选中的数据
    },
  })
}

过滤数据

可通过 filter 属性将组织数据过滤，如：将 orgId 为 '0' 的组织过滤掉。

如果想设置组件默认过滤的数据，可以前往 components/OrgUserSelector/OrgSelector.vue 中自行修改 props.filter 定义的默认值。

<template>
  <OrgSelector :filter="(node) => node.orgId !== '0'" />
</template>

API

属性

名称	说明	类型	默认值
v-model:open	是否展示弹窗	boolean	false
v-model	选中的组织数据	Org[]	[]
title	选择器弹窗标题	string	'选择组织'
multiple	是否允许多选	boolean	false
auth	数据权限配置	string	undefined
apis	替换接口	Apis	{}
tabs	Tab页	Array<{ value: string, label: string }>	见Tab页
disabledData	判断禁用数据	(node: any) => boolean	() => false
filter	过滤组织数据	(node: any) => boolean	() => true

Tab页

const tabs = [
  { value: 'RecentlyUsed', label: '最近常用' },
  { value: 'Favorites', label: '收藏' },
  { value: 'OrgTree', label: '全部' },
  { value: 'Groups', label: '群组' },
]

事件

名称	说明	类型
submit	弹窗确认后的触发事件	(orgs: Org[]) => void

暴露

名称	说明	类型
open	调用后打开弹窗	() => void

类型声明

interface Org {
  orgId: string
  orgName: string
}

interface Apis {
  /** 最近常用 */
  recentlyUsed?: DataListProps['request']
  /** 收藏 */
  favorites?: DataListProps['request']
  /** 添加取消收藏 */
  favoriteToggle?: FavoriteToggle
  /** 组织树 */
  orgTree?: DataTreeProps['request']
  /** 组织下的所有子孙节点 */
  orgChildren?: DataTreeProps['request']
  /** 组织列表 */
  orgList?: DataListProps['request']
  /** 群组列表 */
  groups?: DataGroupProps['request']
  /** 群组数据 */
  groupData?: DataGroupProps['requestData']
}