cj_orgpicker

项目概述

cj_orgpicker 是一个基于 Vue3 和 Element Plus 的组织选择组件。该组件提供了部门和用户的多选功能，支持树形结构展示，可用于组织架构人员选择等场景。

安装说明

环境要求

• Node.js (建议 v16 或更高版本)
• Vue 3.x
• Element Plus

安装步骤

1. 使用npm安装组件：

npm install @scenetechnology/cj_orgpicker --legacy-peer-deps

2. 在main.js中引入组件：

import cj_orgpicker from '@scenetechnology/cj_orgpicker'
import '@scenetechnology/cj_orgpicker/dist/cj_orgpicker.css'

app.use(cj_orgpicker)

组件说明

cj_orgpicker 组件提供以下主要功能：

• 支持部门和用户的树形展示和选择
• 支持多选功能
• 支持搜索过滤

属性配置

基础属性

| 属性名 | 说明 | 类型 | 默认值 | 是否必填 | | --- | --- | --- | --- | --- | | title | 对话框标题 | String | '请选择' | 否 | | type | 选择器类型，可选值：'org'、'user'、'dept'、'deptpost'、'role'、'range' | String | 'org' | 否 | | multiple | 是否多选 | Boolean | false | 否 | | selected | 已选中的项 | Array | [] | 否 | | show | 是否显示对话框 | Boolean | false | 否 | | all_project | 是否显示所有项目 | Boolean | true | 否 |

type 类型说明

| type值 | 说明 | | --- | --- | | org | 选择所有类型（部门、岗位、人员均可选） | | user | 仅选择人员，部门和岗位节点不可选 | | dept | 仅选择部门，过滤掉岗位和人员节点 | | deptpost | 仅选择部门和岗位，过滤掉人员节点 | | role | 角色/岗位下的人员选择，简化UI | | range | 范围选择，行为与role一致 |

事件

| 事件名 | 说明 | 回调参数 | | --- | --- | --- | | selectOk | 点击确定按钮时触发 | (value: array) 当前选中的值 | | selectClose | 关闭对话框时触发 | - |

使用示例

<template>
  <cj_orgpicker
    v-model:show="showPicker"
    title="选择组织"
    type="org"
    :multiple="true"
    :selected="selectedItems"
    @selectOk="handleSelectOk"
    @selectClose="handleSelectClose"
  />
</template>

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

const showPicker = ref(false)
const selectedItems = ref([])

const handleSelectOk = (value) => {
  console.log('选中的项：', value)
  selectedItems.value = value
  showPicker.value = false
}

const handleSelectClose = () => {
  showPicker.value = false
}
</script>

注意事项

1. 组件依赖于Element Plus，使用前请确保已正确安装和配置Element Plus
2. 多选模式下，可以同时选择多个部门或用户
3. 搜索功能支持按名称搜索 npm run build:lib //打包 记得改版本号

npm publish --access public //发布