organize-tree-help 组织树帮助框组件

组织架构树形选择器，支持搜索、展开/折叠、全选等操作，支持单选/多选模式。

功能特性

• 支持组织架构树形展示（省局 -> 市局 -> 区县 -> 部门）
• 支持关键字搜索，匹配节点高亮显示
• 支持展开/折叠全部节点
• 支持单选/多选模式
• 支持节点层级白名单过滤
• 支持全选子节点、全选搜索结果
• 支持数据回显
• 提供弹窗模式（Modal）

引入方式

// 方式一：默认导出（推荐）
import OrganizeTreeHelp from '@/view/organize-tree-help'

// 方式二：命名导出
import { DepartmentPicker, DepartmentPickerModal } from '@/view/organize-tree-help'

组件说明

1. organize-tree-help（主入口组件）

直接嵌入页面使用的组织选择器。

使用示例

<template>
  <div>
    <organize-tree-help
      v-model="selectedList"
      search-label="组织搜索"
      search-placeholder="请输入组织名称"
      item-unit-name="组织"
      :single-select="false"
      :include-node-levels="['10','16','13','20','23','26','30','33']"
      @on-change="handleChange"
    />
  </div>
</template>

<script>
import OrganizeTreeHelp from '@/view/organize-tree-help'

export default {
  components: { OrganizeTreeHelp },
  data() {
    return {
      selectedList: []
    }
  },
  methods: {
    handleChange(items) {
      console.log('选中的组织：', items)
    }
  }
}
</script>

Props

| 属性 | 说明 | 类型 | 默认值 | |------|------|------|--------| | value / v-model | 已选中的组织列表 | Array | [] | | search-label | 搜索框前的标签文字 | String | '组织搜索' | | search-placeholder | 搜索输入框的占位符 | String | '请输入组织名称' | | item-unit-name | 单位名称，用于显示（如"组织"、"部门"） | String | '组织' | | single-select | 是否单选模式 | Boolean | false | | include-node-levels | 包含的节点层级（白名单），空数组表示显示所有 | Array | [] |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|---------| | on-change | 选中项变化时触发 | (selectedItems: Array) |

Methods

| 方法名 | 说明 | 参数 | 返回值 | |--------|------|------|--------| | refreshOrgData | 刷新组织架构数据（重新请求接口） | - | - | | setSelectedNodes | 设置选中的节点 | nodes: Array | - | | getSelectedNodes | 获取当前选中的节点 | - | Array | | expandSelectedParents | 展开选中项的父节点 | - | - |

2. DepartmentPickerModal（弹窗模式）

将选择器封装在模态框中，适合弹窗选择场景。

使用示例

<template>
  <div>
    <Button @click="showModal = true">打开组织选择器</Button>

    <department-picker-modal
      v-model="showModal"
      :selected-items="selectedList"
      modal-title="选择部门"
      modal-width="1100"
      search-label="部门搜索"
      :single-select="false"
      :include-node-levels="['10','16','13','20','23','26','30','33']"
      @on-confirm="handleConfirm"
      @on-cancel="handleCancel"
    />
  </div>
</template>

<script>
import { DepartmentPickerModal } from '@/view/organize-tree-help'

export default {
  components: { DepartmentPickerModal },
  data() {
    return {
      showModal: false,
      selectedList: []
    }
  },
  methods: {
    handleConfirm(items) {
      this.selectedList = items
      console.log('确认选择：', items)
    },
    handleCancel() {
      console.log('取消选择')
    }
  }
}
</script>

Props

| 属性 | 说明 | 类型 | 默认值 | |------|------|------|--------| | value / v-model | 模态框显示状态 | Boolean | false | | selected-items | 已选中的组织列表（用于回显） | Array | [] | | modal-title | 模态框标题 | String | '组织选择' | | modal-width | 模态框宽度 | Number/String | 1100 | | search-label | 搜索标签 | String | '部门搜索' | | search-placeholder | 搜索占位符 | String | '请输入部门名称' | | item-unit-name | 单位名称 | String | '部门' | | single-select | 是否单选 | Boolean | false | | include-node-levels | 节点层级白名单 | Array | [] |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|---------| | on-confirm | 点击确定按钮时触发 | (selectedItems: Array) | | on-cancel | 点击取消按钮时触发 | - |

Methods

| 方法名 | 说明 | |--------|------| | refreshOrgData | 刷新组织架构数据 | | setSelectedNodes | 设置选中节点 | | getSelectedNodes | 获取选中节点 | | expandSelectedParents | 展开选中项的父节点 |

数据结构

选中项数据格式

{
  orgUnitId: '100123061720000000028108',    // 组织单元ID（唯一标识）
  orgUnitName: '锦江区局办公室',              // 组织名称
  orgBizCode: '32',                          // 组织业务代码
  bizCode: 'BA1105101301401',                // 业务代码
  nodeLevel: '33',                           // 节点层级代码
  levelName: '区县部门',                      // 层级名称
  rootOrgUnitId: '区县公司ID',                // 根节点ID（最近的10/20/30层级节点）
  rootOrgUnitName: '锦江区局',               // 根节点名称
  rootLevel: '30'                            // 根节点层级（10=省局, 20=市局公司, 30=区县公司）
}

rootOrgUnitId / rootOrgUnitName / rootLevel 说明

当选中一个节点时，组件会自动向上查找最近的 nodeLevel 为 10（省局）、20（市局公司）、30（区县公司）的节点，返回该节点的信息。

| 选中节点 nodeLevel | 查找规则 | |-------------------|---------| | 10/20/30 | 直接返回自身作为 root | | 16/26/13/23/33 及其他 | 向上查找最近的 10/20/30 节点 |

示例说明：

省局(10)
└── 市局公司(20)
    └── 市本级(26)
        └── 市局部门(23)  ← 选中这个

→ rootOrgUnitName = 市局公司，rootLevel = 20

省局(10)
└── 省本级(16)
    └── 省局部门(13)  ← 选中这个

→ rootOrgUnitName = 省局，rootLevel = 10

节点层级代码说明

| nodeLevel | 说明 | |-----------|------| | 10 | 省局 | | 16 | 省局本级 | | 13 | 省局部门 | | 20 | 市局公司 | | 26 | 市公司本级 | | 23 | 市局部门 | | 30 | 区县公司 | | 33 | 区县部门 |

接口返回数据格式

{
  orgBizCode: '32',
  orgUnitType: '02',           // 01-公司，02-部门
  orgUnitTypeName: '部门',
  orgUnitId: '100123061720000000028108',
  bizCode: 'BA1105101301401',
  nodeLevel: '33',
  nodeLevelName: '区县部门',
  manageUnitId: '00000000000000000000000011510101',
  parentId: '1053230207000011155',
  name: '锦江区局办公室',
  shortName: '锦江区局办公室'
}

常见使用场景

场景一：多选模式

<organize-tree-help
  v-model="selectedList"
  :single-select="false"
  @on-change="handleChange"
/>

场景二：单选模式

<organize-tree-help
  v-model="selectedList"
  :single-select="true"
  @on-change="handleChange"
/>

场景三：只选择公司层级（不选部门）

<organize-tree-help
  v-model="selectedList"
  :include-node-levels="['10','16','20','26','30']"
  item-unit-name="公司"
  @on-change="handleChange"
/>

场景四：数据回显

<template>
  <department-picker-modal
    v-model="showModal"
    :selected-items="selectedList"
    @on-confirm="handleConfirm"
  />
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      selectedList: [
        {
          orgUnitId: 'district-001',
          orgUnitName: '锦江区局',
          nodeLevel: '30',
          levelName: '区县公司'
        }
      ]
    }
  }
}
</script>

注意事项

1. 节点层级白名单：设置 include-node-levels 后，只展示指定层级的节点，不在白名单中的节点会被过滤。

2. 数据回显：传入 value 或 selected-items 的数据会自动补全名称等信息（从树数据中查找）。

3. 无效数据处理：

   • 根节点 nodeLevel 必须是 10/20/30
   • 公司层级 nodeLevel 必须是 10/16/20/26/30
   • 部门节点必须直接挂在有效公司层级下，不能挂在其他部门下
   • 不符合规则的数据会被过滤，搜索也搜不到

4. 展开状态：

   • 省局(10)、市局公司(20) 默认展开
   • 省本级(16)、市本级(26)、区县公司(30) 默认折叠
   • 有选中项时，会自动展开对应的父节点

5. 样式定制：组件使用 Less 编写样式，主色调为 #2563EB（蓝色），可通过修改样式变量进行定制。

更新日志

v1.0.0 (2024)

• 初始版本
• 支持组织架构树形选择
• 支持搜索、展开/折叠、全选
• 支持单选/多选模式
• 支持弹窗模式
• 支持数据回显
• 支持节点层级白名单过滤
• 支持无效数据自动过滤