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对象格式
{
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对象格式
{
departmentId: '组织id',
departmentName: '组织名称',
withSub: '是否包含下级',
departmentCode: '组织编码',
departmentStatus: '组织状态（是否停用）',
withSubEnable: '包含下级是否可选'
}
自定义columns示例，以下为其中一列的配置
-
title和key为必传项，其他为非必传
- 由于涉及用户交互及数据处理，“包含下级”列，即
key=withSub的列，只支持配置title、dataIndex和key，其他配置项不生效
// 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>
);
}
}// columns默认配置如下
const columns = [{
title: '组织名称',
key: 'departmentName'
}, {
title: '上级组织',
key: 'parentDepartmentName'
}, {
title: '包含下级',
key: 'withSub'
}]
多语言配置
// 多语言默认配置
const translation = {
upToLimit: '可选数量已达到上限~',
placeholder: '搜索',
showDisable: '显示停用',
clearSelected:'清空已选',
selectFromLeft:'请从左侧选择部门',
departmentName:'组织名称',
disabled:'已停用',
parentDepartmentName:'上级组织',
withSub:'包含下级',
tipText:'包含全部下级',
disabledTipText:'您没有此组织设置包含全部下级的权限',
noData:'这里什么都没有...',
selectSibling:'选中同级',
cancelSelectSibling: '取消选中同级',
canSelectDepartment:'可选组织',
selectedDepartment: '已选组织',
cancelButtonText:'取消',
okButtonText:'确定'
}
onSearchChange回调
// 回调务必返回Promise对象
onSearchChange = value => {
return new Promise((resolve, reject) => {
const list = this.getSearchData()
resolve(list);
})
}
onExpand回调
// 回调务必返回Promise对象
onExpand = department => {
return new Promise((resolve, reject) => {
const tree = this.getSubTreeData(department)
resolve(tree);
})
}