OrgHierarchy 组织筛选

组织树多栏浏览 + 搜索。节点唯一键为业务 type_id。 value-mode="path"（默认）回传完整路径树 string[][]；value-mode="value" 仅回传选中节点 string[]。叶子展开用 ref.getOrgLeafValues。

基础用法

默认不联动（每层独立勾选）。用 RdInputGroup 的 #left 做标签（带分隔线）；预选「财务部」，打开面板会展开到该节点。

组织架构

财务部

v-model：[ [ "1-1", "1-3" ] ]

<script setup lang="ts">
import { ref } from 'vue'
import {
  RdInputGroup,
  RdOrgHierarchySearch,
  type OrgNode,
} from '@rd-element/ui'

/** value 必须用 type_id，勿用会撞号的裸 id */
const options: OrgNode[] = [
  {
    label: 'RD',
    value: '1-1',
    type: 'business_group',
    subtitle: '集团总根部门',
    children: [
      { label: '总经办', value: '1-9', type: 'department' },
      {
        label: '财务部',
        value: '1-3',
        type: 'department',
        children: [
          { label: 'sunning123', value: '2-100563', type: 'person', subtitle: '469831104@qq.com' },
          { label: 'FX888', value: '2-100585', type: 'person', subtitle: 'fx888@feixun.com' },
          { label: 'rdtest', value: '2-100592', type: 'person', subtitle: 'rdtest@rdtest.com' },
        ],
      },
      { label: '市场部', value: '1-6', type: 'department' },
    ],
  },
]

const paths = ref<string[][] | null>([['1-1', '1-3']])
</script>

<template>
  <div class="org-hierarchy-showcase">
    <RdInputGroup>
      <template #left>
        <span class="rd-input-group__text">组织架构</span>
      </template>
      <RdOrgHierarchySearch
        v-model="paths"
        :options="options"
        placeholder="选择组织或人员"
        class="rd-input-group__control"
      />
    </RdInputGroup>
    <p class="org-hierarchy-showcase__value">v-model：{{ paths }}</p>
  </div>
</template>

勾选联动

check-cascade：选中上级时紧凑写入该路径，下级视为已选；子项全选会冒泡为父级；取消某个被覆盖的子项会拆分祖先并保留兄弟选中态。

联动

财务部

v-model：[ [ "1-1", "1-3" ] ]

<script setup lang="ts">
import { ref } from 'vue'
import {
  RdInputGroup,
  RdOrgHierarchySearch,
  type OrgNode,
} from '@rd-element/ui'

const options: OrgNode[] = [
  {
    label: 'RD',
    value: '1-1',
    type: 'business_group',
    subtitle: '集团总根部门',
    children: [
      { label: '总经办', value: '1-9', type: 'department' },
      {
        label: '财务部',
        value: '1-3',
        type: 'department',
        children: [
          { label: 'sunning123', value: '2-100563', type: 'person', subtitle: '469831104@qq.com' },
          { label: 'FX888', value: '2-100585', type: 'person', subtitle: 'fx888@feixun.com' },
          { label: 'rdtest', value: '2-100592', type: 'person', subtitle: 'rdtest@rdtest.com' },
        ],
      },
      { label: '市场部', value: '1-6', type: 'department' },
    ],
  },
]

const paths = ref<string[][] | null>([['1-1', '1-3']])
</script>

<template>
  <div class="org-hierarchy-showcase">
    <RdInputGroup>
      <template #left>
        <span class="rd-input-group__text">联动</span>
      </template>
      <RdOrgHierarchySearch
        v-model="paths"
        :options="options"
        check-cascade
        placeholder="选部门覆盖下属人员"
        class="rd-input-group__control"
      />
    </RdInputGroup>
    <p class="org-hierarchy-showcase__value">v-model：{{ paths }}</p>
  </div>
</template>

v-model 两种形态

value-mode="path"（默认）回传完整路径树 string[][]；value-mode="value" 仅回传选中节点 type_id string[]。

path

财务部

v-model（path）：[ [ "1-1", "1-3" ] ]

value

财务部

v-model（value）：[ "1-3" ]

<script setup lang="ts">
import { ref } from 'vue'
import {
  RdInputGroup,
  RdOrgHierarchySearch,
  type OrgNode,
} from '@rd-element/ui'

const options: OrgNode[] = [
  {
    label: 'RD',
    value: '1-1',
    type: 'business_group',
    subtitle: '集团总根部门',
    children: [
      { label: '总经办', value: '1-9', type: 'department' },
      {
        label: '财务部',
        value: '1-3',
        type: 'department',
        children: [
          { label: 'sunning123', value: '2-100563', type: 'person', subtitle: '469831104@qq.com' },
          { label: 'FX888', value: '2-100585', type: 'person', subtitle: 'fx888@feixun.com' },
          { label: 'rdtest', value: '2-100592', type: 'person', subtitle: 'rdtest@rdtest.com' },
        ],
      },
      { label: '市场部', value: '1-6', type: 'department' },
    ],
  },
]

/** path：完整路径树 */
const paths = ref<string[][] | null>([['1-1', '1-3']])
/** value：仅选中节点 type_id */
const values = ref<string[] | null>(['1-3'])
</script>

<template>
  <div class="org-hierarchy-showcase">
    <RdInputGroup>
      <template #left>
        <span class="rd-input-group__text">path</span>
      </template>
      <RdOrgHierarchySearch
        v-model="paths"
        :options="options"
        value-mode="path"
        placeholder="选择组织或人员"
        class="rd-input-group__control"
      />
    </RdInputGroup>
    <p class="org-hierarchy-showcase__value">v-model（path）：{{ paths }}</p>
    <RdInputGroup>
      <template #left>
        <span class="rd-input-group__text">value</span>
      </template>
      <RdOrgHierarchySearch
        v-model="values"
        :options="options"
        value-mode="value"
        placeholder="选择组织或人员"
        class="rd-input-group__control"
      />
    </RdInputGroup>
    <p class="org-hierarchy-showcase__value">v-model（value）：{{ values }}</p>
  </div>
</template>

自定义字段名

真实接口常用 name / type_id，通过 field-names 映射即可。叶子 type_id 用组件 ref 调用 getOrgLeafValues。

真实字段

财务部

v-model：[ [ "1-1", "1-3" ] ]

ref.getOrgLeafValues('1-1')：[]

ref.getOrgLeafValues(['1-3', '1-9'])：[]

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
  RdInputGroup,
  RdOrgHierarchySearch,
  type RdOrgHierarchySearchExpose,
} from '@rd-element/ui'

/** 真实接口：name / type_id */
const options = [
  {
    name: 'RD',
    type_id: '1-1',
    children: [
      { name: '总经办', type_id: '1-9' },
      {
        name: '财务部',
        type_id: '1-3',
        children: [
          { name: 'sunning123', type_id: '2-100563' },
          { name: 'FX888', type_id: '2-100585' },
          { name: 'rdtest', type_id: '2-100592' },
        ],
      },
      { name: '市场部', type_id: '1-6' },
    ],
  },
]

const fieldNames = { label: 'name', value: 'type_id' }
const paths = ref<string[][] | null>([['1-1', '1-3']])
const orgRef = ref<RdOrgHierarchySearchExpose | null>(null)

onMounted(() => {
  // → ['1-9', '2-100563', '2-100585', '2-100592', '1-6']
  console.log(orgRef.value?.getOrgLeafValues('1-1'))
  // → ['2-100563', '2-100585', '2-100592', '1-9']
  console.log(orgRef.value?.getOrgLeafValues(['1-3', '1-9']))
})
</script>

<template>
  <div class="org-hierarchy-showcase">
    <RdInputGroup>
      <template #left>
        <span class="rd-input-group__text">真实字段</span>
      </template>
      <RdOrgHierarchySearch
        ref="orgRef"
        v-model="paths"
        :options="options"
        :field-names="fieldNames"
        placeholder="选择组织或人员"
        class="rd-input-group__control"
      />
    </RdInputGroup>
    <p class="org-hierarchy-showcase__value">v-model：{{ paths }}</p>
  </div>
</template>

API

Attributes

属性名	说明	类型	默认值
v-model	选中值；形态由 valueMode 决定；null 未选	string[][] | string[] | null	null
valueMode	path=完整路径树 string[][]；value=仅选中 type_id string[]	'path' | 'value'	'path'
options	组织树；可用 fieldNames 映射真实字段	unknown[]	—
fieldNames	字段映射，如 { label: 'name', value: 'type_id' }	OrgFieldNames	label/value/children
placeholder	触发器占位	string	'选择组织或人员'
rootLabel	面包屑与路径展示用的根标签（不可勾选）	string	'全公司'
collapseTags	多选折叠标签	boolean	true
checkStrictly	允许选任意层级	boolean	true
checkCascade	勾选联动：选上级覆盖下级；子项全选冒泡父级；取消子项时拆分祖先	boolean	false

Events

事件名	说明	类型
update:modelValue	选中变更（形态随 valueMode）	(value: string[][] | string[] | null) => void
change	确认选择	(value: string[][] | string[] | null) => void

Expose

名称	说明	签名
getOrgLeafValues	按 type_id（单个或多个）取子树全部叶子 type_id，结果去重	(typeId: string | string[]) => string[]