# HrmCard 人力卡片

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/hrm-card/freepass)
- 平台：移动端
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/sjl/rykp/
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[HrmCard]

## 代码演示

### 人员卡片

目前使用的人员卡片接口已经同时兼容内外部人员卡片，业务在使用过程中无需再额外判断type类型，传空值即可

```jsx
import { PureComponent, MouseEventHandler, ReactText } from 'react';
import { HrmCard, HrmCardProps, constants, Input } from '@weapp/ui';
import { weappSDK } from '@weapp/utils'

const { openMobileHrmCard } = HrmCard;
const { uiPcClsPrefix } = constants;
const prefixCls = `${uiPcClsPrefix}-demo-hrm-card`;

interface HrmCardDemoProps extends HrmCardProps {
}
class HrmCardDemo extends PureComponent<HrmCardDemoProps> {

  state = {
    id: '4613573453204737181'
  }
  onChange = (value: ReactText) => this.setState({ id: value })

  getChildRef = (el: HTMLAnchorElement) => this.childRef = el;
  childRef?: HTMLAnchorElement;
  getPopupContainer = () => this.childRef;
  openMobileHrmCard: MouseEventHandler<HTMLAnchorElement> = (e) => openMobileHrmCard(this.state.id, '', 'bs/hrm')
  openLink = () => weappSDK.openLink({ url: `/mobile/hrm/profile/${this.state.id}` })

  render() {
    return (
      <div className={prefixCls}>
        <h4>基础用法</h4>
        <div>
          <span>请输入需要查询的移动人员id：</span>
          <Input value={this.state.id} onChange={this.onChange} style={{ width: 200 }} />
        </div>
        <a className={`${prefixCls}-name`} ref={this.getChildRef} onClick={this.openMobileHrmCard}>调用内部openMobileHrmCard方法</a>
        <br />
        <a className={`${prefixCls}-name`} onClick={this.openLink}>直接使用openLink传参</a>
      </div>
    );
  }
}

export default HrmCardDemo
```

## 链接跳转（含h5）

```typescript
人力卡片链接跳转
1.需求：
之前人力卡片H5与PC分开，链接跳转情况较多，需要在跳转中添加权限等方面控制
2.当前情况：
目前人力卡片提供了两种使用方法，目前各业务模块上方法1较为常见
（1）采用组件抛出的openHrmCard, openHrmSP方法，绑定在a标签上使用点击事件回调的e来控制卡片弹层位置
（2）在页面中插入HrmCard组件的dom，采用用ref控制卡片展开
3.优化方式：
针对上述方法1，对于openHrmCard方法进行pc、h5、app内部的统一跳转控制，丰富方法使用场景以及适用的终端
4.改造点：
（1）人力卡片组件内部方法改造
（2）各个模块在各情景使用人力卡片的方法调整统一
```

#### HrmCard.openHrmCard 方法说明

```typescript
 export function openHrmCard: (e: any, id: string, type: string, module: string, otherParams?: any) => void;
  // e: 用于卡片定位计算，传入当前点击触发卡片显示的dom元素
  // id：人员/部门/群组id
  // type：人员/部门/群组类型
  // module：人员/部门/群组接口标识
  // otherParams：其他参数
注意：
1.人员卡片，接口已经同时兼容内外部人员卡片，业务在使用过程中无需再额外判断type类型，模块使用中传空值即可
2.部门和分部卡片，默认直接在该方法内部调用openHrmSP方法（直接打开新的页签 -> 大卡片），若需要打开小卡片，则需要额外在otherParams中传入参数path='card'
```

#### HrmCard.openHrmSP 方法说明

```typescript
 export function openHrmSP: (e: any, id: string, type: string, module: string, otherParams?: any) => void;
  // e: 用于卡片定位计算，传入当前点击触发卡片显示的dom元素
  // id：人员/部门/群组id
  // type：人员/部门/群组类型
  // module：人员/部门/群组接口标识
  // otherParams：其他参数
注意：
 1.该方法用采用sdk的openLink用于打开新的页签->大卡片
```

#### HrmCard.openMobileHrmCard（h5）方法说明

```typescript
 export function openMobileHrmCard: (id: string, type?: string, module?: string, otherParams?: any) => void;
  // e: 用于卡片定位计算，传入当前点击触发卡片显示的dom元素
  // id：人员/部门/群组id
  // type：人员/部门/群组类型
  // module：人员/部门/群组接口标识
  // otherParams：其他参数
注意：
1.人员卡片，接口已经同时兼容内外部人员卡片，业务在使用过程中无需再额外判断type类型，模块使用中传空值即可
2.目前h5端只支持人员卡片，module参数暂时可不传
```

## API

### 类型：（请从@weapp/ui 中导出）

```typescript
  export type HrmCardType =   
  | 'inside' //内部联系人
  | 'external' //外部联系人
  | 'department' //部门
  | 'subcompany' //分部
  | 'group' //群组
  | 'position' //岗位
  | 'unitGroup' //自定义数据类型
```

### 参数：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| id | 人员/部门/群组 id | string | 是 |  |
| type | 人员/部门/群组类型 | HrmCardType | 是（人员卡片场景可传空） |  |
| module | 人员/部门/群组接口标识 | string | 是 |  |
| imageCopperDialogProps | 头像更换dialog自定义配置 | DialogProps | 否 |  |
| groupDepartmentTopIcon | 群组以及部门卡片自定义图标 | IconNames(参考Icon组件) | 否 |  |
| openStatisticsRequest | 是否开启详细事项请求 | boolean | 否 |  |
