介绍
@beisen-phoenix/field-department 是一款基于 React 开发的前端组件，用于显示 and 处理组织架构中的部门。
该组件提供了以下功能：
- 展示部门列表
- 支持搜索部门
- 支持添加部门
- 支持修改部门
- 支持删除部门
@beisen-phoenix/field-department 上线已有一段时间，已被多家企业使用，并得到了广泛好评。
安装
使用 npm 进行安装：
--- ------- --------------------------------
快速开始
在项目中使用该组件：
- 导入组件
------ - --------------- - ---- ----------------------------------
- 创建组件实例
---------------- ---------------------------- --
- 在
yourChangeHandler中获取返回值
-------- ------------------------ - ------------------ -- - ------------- - ----- ---- ------- ----- -- ----------- ---- - -
注意，@beisen-phoenix/field-department 实际上返回了一个对象，其中包含选择的部门和员工信息。如果目前选中的是员工，则 department 字段为 null，反之亦然。
完整 API 文档
DepartmentField
DepartmentField 是该组件的主要元素，用于显示 and 处理组织架构中的部门。
属性
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| dataSource | Array<DepartmentFieldDataSource> | [] | 组件的数据源，不传则不显示搜索部门的功能 |
| onChange | function | - | 点击部门或员工时的回调函数 |
| onSearch | function | - | 传入搜索框后的回调函数 |
| value | DepartmentFieldValue | null | 当前选中的部门和员工信息 |
| width | number|string | '100%' | 组件的宽度 |
| formItemProps | object | {} | 作为表单元素时的属性，例如 getFieldDecorator |
DepartmentFieldDataSource
DepartmentFieldDataSource 是组件数据源的类型，是一个包含 id, name, isLeaf, children 等信息的对象，例如：
-
----- ----
------- ------
--------- ------
----------- -
-
----- ------
------- ---- - ---
--------- ------
----------- -
-
----- --------
------- ---- - - - ---
--------- ----
-
-
-- -
----- ------
------- ---- - ---
--------- ------
----------- -
-
----- --------
------- ---- - - - ---
--------- ----
-
-
-
-
-| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| id | string | required | 部门|员工的 ID |
| name | string | required | 部门|员工的名称 |
| isLeaf | boolean | false | 是否为叶节点，叶节点代表员工 |
| children | Array<DepartmentFieldDataSource> | [] | 非叶节点的子节点 |
DepartmentFieldValue
DepartmentFieldValue 是组件选中的部门和员工信息类型，是一个包含 department, employee 等信息的对象，例如：
- ------------- - ----- ---- ------- ----- -- ----------- - ----- -------- ------- --- -- - -
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| department | object | null | 选中的部门信息 |
| employee | object | null | 选中的员工信息 |
DepartmentFieldModal
DepartmentFieldModal 是 DepartmentField 的一个子组件，用于向用户展现修改部门信息的对话框。
属性
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| record | DepartmentFieldDataSource | {} | 要修改的部门信息 |
| dataSource | Array<DepartmentFieldDataSource> | [] | 数据源，如果不传递该参数，则不显示该组件 |
| visible | boolean | false | 是否显示该组件 |
| onCancel | function | - | 取消编辑的回调函数，可以不传递该参数，则不显示取消按钮。 |
| onOk | function | - | 完成编辑的回调函数，必须传递该参数 |
| formProps | object | {} | 传入 antd form 组件的属性 |
| modalProps | object | {} | 传入 antd modal 组件的属性 |
使用示例
------ - -------- - ---- -------
------ - ------ - ---- ------
------ - ---------------- -------------------- - ---- ----------------------------------
-------- ---------------------- -
----- ---------------- ------------------ - ----------------
----- -------------------- - ------ -- -
------------------------
-
----- ----------------- - -- -- -
-------------------------
--
----- ------------- - -------------- -- -
----------------------------
-------------------------
--
------ -
--
------- ----------- -- ---------------------- --- ---- ----- ----- -----------------
---------------- ---------------------------- --
---------------------
------------------------
---------------------------
---------------------------
-------------------------
----------------------------
--------------------
--
---
-
-结尾
到此为止，@beisen-phoenix/field-department 的使用教程结束。如果需要更加详细的信息，可以参考组件源代码或文档，希望本文对你的前端学习有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/beisen-phoenix-field-department