Department 部门选择组件

@beisen-phoenix/department 设计地址 https://mastergo.com/goto/sAwf8Ylz?page_id=73038:016979&file=63730735057652

简介

• 提供：单选/多选
• 使用时需提供固定宽高的容器，建议宽高，单选：340*420，多选(组件最小宽高)：640*420；已设置内边距。
• example 中的带阴影容器为测试容器，不包含在本组件内

API

相关说明

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