# @beisen-phoenix/department

> >- 提供：单选/多选 >- 使用时需提供固定宽高的容器，建议宽高，单选：`340*420`，多选(组件最小宽高)：`640*420`；已设置内边距。 >- example中的带阴影容器为测试容器，不包含在本组件内

Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-phoenix/department
pnpm add @beisen-phoenix/department
yarn add @beisen-phoenix/department
bun add @beisen-phoenix/department
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.55 |
| Published | 2019-11-25 |
| First published | 2019-07-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 225 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-phoenix/department
- npm.io page: https://npm.io/package/@beisen-phoenix/department

## Dependencies (11)

- [antd](https://npm.io/package/antd.md) ^3.20.5
- [lodash](https://npm.io/package/lodash.md) 4.17.15
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@beisen-phoenix/icon](https://npm.io/package/@beisen-phoenix/icon.md) ^3.2.54
- [@beisen-phoenix/button](https://npm.io/package/@beisen-phoenix/button.md) ^3.3.55
- [@beisen-phoenix/search](https://npm.io/package/@beisen-phoenix/search.md) ^3.3.55
- [@beisen-phoenix/loading](https://npm.io/package/@beisen-phoenix/loading.md) ^3.3.55
- [@beisen-phoenix/message](https://npm.io/package/@beisen-phoenix/message.md) ^3.3.55
- [@beisen-phoenix/tooltip](https://npm.io/package/@beisen-phoenix/tooltip.md) ^3.3.55
- [@beisen-phoenix/checkbox](https://npm.io/package/@beisen-phoenix/checkbox.md) ^3.3.55
- [@beisen-phoenix/style-token](https://npm.io/package/@beisen-phoenix/style-token.md) ^3.3.55

## Recent versions

- 3.3.55 (latest) — 2019-11-25
- 3.2.44-rc.1 (rc) — 2019-10-24
- 3.3.54 — 2019-11-25
- 3.3.53 — 2019-11-25
- 3.3.52 — 2019-11-24
- 3.3.51 — 2019-11-23
- 3.3.50 — 2019-11-22
- 3.3.49 — 2019-11-22
- 3.3.48 — 2019-11-22
- 3.3.47 — 2019-11-22
- 3.3.46 — 2019-11-22
- 3.3.45 — 2019-11-21
- 3.3.43 — 2019-11-21
- 3.3.42 — 2019-11-21
- 3.3.41-beta.1 — 2019-11-21
- … 291 more at https://npm.io/package/@beisen-phoenix/department/versions

## README

## Department 部门选择组件
>- 提供：单选/多选
>- 使用时需提供固定宽高的容器，建议宽高，单选：`340*420`，多选(组件最小宽高)：`640*420`；已设置内边距。
>- example中的带阴影容器为测试容器，不包含在本组件内

### API

| 参数 | 说明 | 类型 | 默认值 | 是否必传 | 备注 |
| --- | --- | :---: | :---: | :---: | --- |
| onSearchChange | 搜索框中值变化时的回调，参数为输入框的value | `async function` | 无 | 是 | 该回调函数应该return一个`Promise`对象，异步返回的数据为department对象组成的数组，已做防抖处理(300ms) |
| validateSearch | 搜索框中数据的验证，在搜索行为发生前执行，参数为输入框的value | `function` | 无 | 否 | 该回调函数应该return一个对象{value: '处理后的value', info: '验证的提示信息，会显示在输入框下方', clearTipAfter: '提示信息自动消失的时间间隔'} |
| onExpand | 树形组件中，部门展开的回调；当被展开的部门无子部门数据时会调用该函数，参数为department对象 | `async function` | 无 | 是 | 该回调函数应该return一个`Promise`对象，异步返回的数据为department对象组成的数组 |
| onCancel | 『取消』按钮点击时的回调 | `function` | 无 | 是 | 多选时才会用到 |
| onSubmit | 『确定』按钮点击时的回调，参数为选中的部门 | `function` | 无 | 是 | 单选时参数为dep对象，多选时为dep对象组成的数组 |
| treeLoading | 树形loading状态 | `boolean` | `false` | 否 | 可用于异步加载treeData前设置loading |
| treeData | 初始传入的树形组件数据 | `array` | `[]` | 是 | 该数据为department对象组成的一维数组 |
| selectedData | 默认选中的数据 | `array` | `[]` | 否 | 该数据为department对象组成的一维数组，单选时只会取数组中的第一个元素 |
| multi | 是否多选 | `boolean` | `false` | 否 | 根据该值确认显示单选或者多选组件 |
| withSub | “包含下级”默认勾选状态 | `boolean` | `true` | 否 | 单选时才会用到 |
| hideWithSub | 隐藏“包含下级”和“确定”按钮 | `boolean` | `false` | 否 | 单选时才会用到 |
| leftTitle | 可选组织的标题 | `string` | `可选组织` | 否 | 多选时才会用到 |
| rightTitle | 已选组织的标题 | `string` | `已选组织` | 否 | 多选时才会用到 |
| maxCount | 多选时的最大可选数 | `number` | `Number.MAX_VALUE` | 否 | 多选时才会用到 |
| maxCountTip | 多选达到最大可选数时弹出的message内容 | `string` | `可选数量已达到上限~` | 否 | 多选时才会用到 |
| showDisableCheck | 是否显示「显示停用」勾选框 | `boolean` | `false` | 否 | 如果配置为false，则勾选框不会显示，并且展示的数据将不包含“已停用”的部门 |
| expandLevel | 树形组件默认展开的层级 | `number` | `2` | 否 | 实际默认展开层级同时取决于treeData数据中是否有相应层级的数据 |
| forbidRoot | 禁止根组织被选中 | `boolean` | `false` | 否 | 用来控制树形的根组织是否可选。若要控制具体节点是否可选，可在department对象里面设置属性`forbidden: true` |
| columns | 自定义配置已选列表 | `array` | `组织名称` `上级组织` `包含下级`三列，默认配置参考下方示例 | 否 | table使用了antd组件，columns的配置可参考下方示例“columns配置” |
| translation | 多语言配置 | `object` | 默认值参考下方"多语言配置" | 否 |  |

### 相关示例

###### department对象格式

```javascript
{
  departmentCode: '组织编码(string|number,非必需)', 
  departmentId: '组织id(string|number,必需)',
  departmentName: '组织名称(string,必需)',
  parentDepartmentId: '父级组织id(string|number,必需)',
  departmentStatus: '组织状态(是否为启动状态)(boolean,必需)',
  forbidden: '禁止组织被选择，默认为false，即可被选中(boolean,非必需)',
  parentDepartmentName: '父级组织名称(string,非必需)',
  withSub: '是否包含下级(boolean,selecteData中必需)：组织的一种可配置状态，即是否自动给当前子级或者将来可能新增的子级加上权限，跟当前“是否存在子级组织”没有关系',
  withSubEnable: '“是否包含下级”的可配置状态(boolean,必需)',
  hasChildrenEnable: '是否存在未停用的子级(boolean,必需)',
  hasChildrenDisabled: '是否存在已停用的子级(boolean,必需)'
}
```
---
###### dep对象格式

```javascript
{
  departmentId: '组织id',
  departmentName: '组织名称',
  withSub: '是否包含下级',
  departmentCode: '组织编码', 
  departmentStatus: '组织状态（是否停用）', 
  withSubEnable: '包含下级是否可选'
}
```
---
###### 自定义columns示例，以下为其中一列的配置
> - `title`和`key`为**必传**项，其他为非必传
> - 由于涉及用户交互及数据处理，“包含下级”列，即`key=withSub`的列，只支持配置`title`、`dataIndex`和`key`，其他配置项不生效

```javascript
// columns其中一列的可配置项
const column = {
  title: '组织名称',
  dataIndex: 'departmentName',
  key: 'departmentName',
  className: 'department-table-name',
  render: (value, department) => {
    // value为当前配置的key对应的值，department为当前组织对象
    return (
      <Tooltip
        title={value}
        showOverflowTooltip={true}
      >
        <span className="phoenix-department-table__text">
          {value}
        </span>
      </Tooltip>
    );
  }
}
```
```javascript
// columns默认配置如下
const columns = [{
  title: '组织名称',
  key: 'departmentName'
}, {
  title: '上级组织',
  key: 'parentDepartmentName'
}, {
  title: '包含下级',
  key: 'withSub'
}]
```
---
###### 多语言配置
```javascript
// 多语言默认配置
const translation = {
  upToLimit: '可选数量已达到上限~',
  placeholder: '搜索',
  showDisable: '显示停用',
  clearSelected:'清空已选',
  selectFromLeft:'请从左侧选择部门',
  departmentName:'组织名称',
  disabled:'已停用',
  parentDepartmentName:'上级组织',
  withSub:'包含下级',
  tipText:'包含全部下级',
  disabledTipText:'您没有此组织设置包含全部下级的权限',
  noData:'这里什么都没有...',
  selectSibling:'选中同级',
  cancelSelectSibling: '取消选中同级',
  canSelectDepartment:'可选组织',
  selectedDepartment: '已选组织',
  cancelButtonText:'取消',
  okButtonText:'确定'
}
```
---
###### onSearchChange回调

```javascript
// 回调务必返回Promise对象
onSearchChange = value => {
  return new Promise((resolve, reject) => {
    const list = this.getSearchData()
    resolve(list);
  })
}
```
---
###### onExpand回调

```javascript
// 回调务必返回Promise对象
onExpand = department => {
  return new Promise((resolve, reject) => {
    const tree = this.getSubTreeData(department)
    resolve(tree);
  })
}
```

---
_Source: https://npm.io/package/@beisen-phoenix/department · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._