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