## 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);
  })
}
```