@beisen-phoenix/department NPM

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

@beisen-phoenix/button @beisen-phoenix/checkbox @beisen-phoenix/icon @beisen-phoenix/loading @beisen-phoenix/message @beisen-phoenix/search @beisen-phoenix/style-token @beisen-phoenix/tooltip antd classnames lodash

@infinitebrahmanuniverse/nolb-_beisen-@everything-registry/sub-chunk-118 ux-platform-department @beisen-phoenix/field-department @beisen-phoenix/search-form @beisen/tita-react-components @beisen-elearning/manage-courses-edit @beisen-elearning/ux-p-man-question-bank @beisen-elearning/ux-p-man-question-lib @beisen-platform/ux-platform-department

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago