Department 部门选择组件
@beisen-phoenix/department 设计地址 https://mastergo.com/goto/sAwf8Ylz?page_id=73038:016979&file=63730735057652
简介
- 提供:单选/多选
- 使用时需提供固定宽高的容器,建议宽高,单选:
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 | 『确定』按钮点击时的回调,参数为选中的部门 | (data:选择的数据,withDisableCheck:包含停用组织的状态)=>void | 无 | 是 | 单选时参数为 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,则勾选框不会显示,并且展示的数据将不包含“已停用”的部门 |
withDisableCheck | 「包含停用组织」的勾选状态,showDisableCheck 为 true 时有用 | boolean |
false |
否 | 如果配置为 true,则会显示“已停用”的部门 ,反之不会显示 |
expandLevel | 树形组件默认展开的层级 | number |
2 |
否 | 实际默认展开层级同时取决于 treeData 数据中是否有相应层级的数据 |
forbidRoot | 禁止根组织被选中 | boolean |
false |
否 | 用来控制树形的根组织是否可选。若要控制具体节点是否可选,可在 department 对象里面设置属性forbidden: true |
forbiddenTipsText | 禁止根组织被选中的tips提示 | boolean |
false |
否 | 用来控制树形的根组织是否可选。若要控制具体节点是否可选,可在 department 对象里面设置属性forbidden: true |
columns | 自定义配置已选列表 | array |
组织名称 上级组织 包含下级 三列,默认配置参考下方示例 |
否 | table 使用了 @beisen/fast-table 组件,columns 的配置可参考下方示例“columns 配置” |
translation | 国际化,详情见下方 | object |
- | 否 | |
lang | 当前语言环境(zh_CN,en_US,zh_TW) | string |
zh_CN |
否 | |
noData | 可自定义空状态时的文案 | string |
“这里什么都没有...” | 否 | |
tipZIndex | 用于设置部门内部使用 tooltip 的 z-index | number | 2000 | 否 | |
withSubAll | 用于部门增加包含下级默认选择且不可编辑状态 | boolean | false | 否 | |
showBU | 用于部门增加集团化展示资源名称 | boolean | false | 否 | |
showCheckTip | 是否在checkbox外显示tooltip | boolean | false | 否 | |
withDisableCheckUncontrolled | 「包含停用组织」的勾选状态不随传入参数改变 | boolean | false | 否 | |
singleModeCustomFooter | 单选模式下自定义footer | ({withSubDep,onIncludSubChange,onSingleSubmit,translation}||{})=>jsx | false | 否 | hideWithSub为true时才会传参数,否则不会传参 |
相关说明
translation
const translation: ITranslation = {
upToLimit: '可选数量已达到上限~',
placeholder: '搜索',
showDisable: '显示停用',
clearSelected: '清空已选',
selectFromLeft: '请从左侧选择部门',
departmentName: '组织名称',
disabled: '已停用',
parentDepartmentName: '上级组织',
withSub: '包含下级',
tipText: '包含全部下级',
businessUnit: "资源集合",
disabledTipText: '您没有此组织设置包含全部下级的权限',
noData: '这里什么都没有...',
selectSibling: '选中同级',
cancelSelectSibling: '取消选中同级',
canSelectDepartment: '可选组织',
selectedDepartment: '已选组织',
cancelButtonText: '取消',
okButtonText: '确定'
};
department 对象格式
{
departmentCode: '组织编码(string|number,非必需)',
departmentId: '组织id(string|number,必需)',
departmentName: '组织名称(string,必需)',
businessUnit: '资源集合名称(string,非必需)',
parentDepartmentId: '父级组织id(string|number,必需)',
departmentStatus: '组织状态(是否为启动状态)(boolean,必需)',
forbidden: '禁止组织被选择,默认为false,即可被选中(boolean,非必需)',
forbiddenTipsText: '禁止组织被选择的提示内容(string,非必需)',
parentDepartmentName: '父级组织名称(string,非必需)',
isShowDepartmentFullPathName: '是否开启显示部门信息全路径(boolean, 非必须), 开启后原有显示上级部门的地方,会显示为全路径部门',
fullDepartmentPathName: '部门信息全路径(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的配置可参考 @beisen/fast-table
// 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);
});
};