# HrmCard 人力卡片

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/hrm-card/freepass)
- 平台：PC
- 维护者：屈正巍
- 设计稿：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';

const { openHrmCard, openHrmSP } = HrmCard;
const { uiPcClsPrefix } = constants;
const prefixCls = `${uiPcClsPrefix}-demo-hrm-card`;

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

  state = {
    id: '2585548129290371100',
    // id: '1204720751754780672',
    id1: '5115448585385597894',//test自己,
    testId: '5112772391860257103',
    id2: '5117706388620903900',
    id3: '752731651894697985'
  }

  //人员卡片
  onChange = (value: ReactText) => this.setState({ id: value })
  childRef?: HTMLAnchorElement;
  getChildRef = (el: HTMLAnchorElement) => this.childRef = el;
  getPopupContainer = () => this.childRef;
  openHrmCard: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, this.state.id, '', 'bs/hrm', {
    className: 'test',
    popupClassName: 'test-popup',
    requestParams: {
      testRequest: 'myRequest',
    }
  })
  openHrmCard1_1: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, '1169431431925800976', '', 'bs/hrm')
  openHrmSP: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmSP(e, this.state.id, '', 'bs/hrm')

  //内部人员
  onChange1 = (value: ReactText) => this.setState({ id1: value })
  childRef1?: HTMLAnchorElement;
  getChildRef1 = (el: HTMLAnchorElement) => this.childRef1 = el;
  getPopupContainer1 = () => this.childRef1;
  openHrmCard1: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, this.state.id1, 'inside', 'bs/hrm')
  openHrmSP1: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmSP(e, this.state.id1, 'inside', 'bs/hrm')

  //外部
  onChange2 = (value: ReactText) => this.setState({ id2: value })
  childRef2?: HTMLAnchorElement;
  getChildRef2 = (el: HTMLAnchorElement) => this.childRef2 = el;
  getPopupContainer2 = () => this.childRef2;
  openHrmCard2: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, this.state.id2, 'external', 'bs/hrm')
  openHrmSP2: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmSP(e, this.state.id2, 'external', 'bs/hrm')

  //离职
  onChange3 = (value: ReactText) => this.setState({ id3: value })
  childRef3?: HTMLAnchorElement;
  getChildRef3 = (el: HTMLAnchorElement) => this.childRef3 = el;
  getPopupContainer3 = () => this.childRef3;
  openHrmCard3: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, this.state.id3, 'inside', 'bs/hrm')
  openHrmSP3: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmSP(e, this.state.id3, 'inside', 'bs/hrm')

  render() {
    return (
      <div className={prefixCls}>
        <h2>人员卡片</h2>
        <h4>注意：目前使用的人员卡片接口已经同时兼容内外部人员卡片，业务在使用过程中无需再额外判断type类型，传空值即可</h4>
        <div>
          <span>请输入需要查询的联系人id：</span>
          <Input value={this.state.id} onChange={this.onChange} style={{ width: 200 }} />
        </div>
        <h4>通过 openHrmCard 方法打开小卡片（常用）</h4>
        <a className={`${prefixCls}-name`} onClick={this.openHrmCard}>联系人1</a>
        <br />
        <br />
        <a className={`${prefixCls}-name`} onClick={this.openHrmCard1_1}>联系人1.1</a>
        <br />
        <br />
        <h4>通过使用 HrmCard 组件打开小卡片</h4>
        <HrmCard
         
          triggerProps={{ getPopupContainer: this.getPopupContainer }}
          id={this.state.id}
          module="bs/hrm"
          type={''}
          otherParams={{
            className: 'test',
            popupClassName: 'test-popup',
            requestParams: {
              testRequest: 'myRequest',
            }
          }}
        >
          <span className={`${prefixCls}-name`} ref={this.getChildRef}><span>联系人2</span></span>
        </HrmCard>
        <br />
        <br />
        <h4>通过 openHrmSP 方法打开大卡片</h4>
        <a className={`${prefixCls}-name`} onClick={this.openHrmSP}>联系人3</a>
        <br />
        <br />
        <h2>内部人员（type可传空）</h2>
        <div>
          <span>请输入需要查询的内部联系人id：</span>
          <Input value={this.state.id1} onChange={this.onChange1} style={{ width: 200 }} />
        </div>
        <h4>通过 openHrmCard 方法打开内部人员小卡片（常用）</h4>
        <a className={`${prefixCls}-name`} onClick={this.openHrmCard1}>内部联系人1</a>
        <br />
        <br />
        <h4>通过 openHrmCard 方法打开内部人员小卡片（常用）</h4>
        <a className={`${prefixCls}-name`} onClick={this.openHrmCard1}>内部联系人11</a>
        <br />
        <br />
        <h4>通过使用 HrmCard 组件打开内部人员小卡片</h4>
        <HrmCard
         
          triggerProps={{ getPopupContainer: this.getPopupContainer1 }}
          id={this.state.id1}
          module="bs/hrm"
          type={"inside"}
          isColumn
        >
          <span className={`${prefixCls}-name`} ref={this.getChildRef1}><span>内部联系人2</span></span>
        </HrmCard>
        <br />
        <br />
        <h4>通过 openHrmSP 方法打开内部人员大卡片</h4>
        <a className={`${prefixCls}-name`} onClick={this.openHrmSP1}>内部联系人3</a>
        <br />
        <br />
        <h2>外部人员（type可传空）</h2>
        <div>
          <span>请输入需要查询的外部联系人id：</span>
          <Input value={this.state.id2} onChange={this.onChange2} style={{ width: 200 }} />
        </div>
        <h4>通过 openHrmCard 方法打开外部人员小卡片（常用）</h4>
        <a className={`${prefixCls}-name`} onClick={this.openHrmCard2}>外部联系人1</a>
        <br />
        <br />
        <h4>通过使用 HrmCard 组件打开外部人员小卡片</h4>
        <HrmCard
          triggerProps={{
            getPopupContainer: this.getPopupContainer2,
          }}
          id={this.state.id2}
          module="bs/hrm"
          type={"external"}
        >
          <span className={`${prefixCls}-name`} ref={this.getChildRef2}><span>外部联系人2</span></span>
        </HrmCard>
        <br />
        <br />
        <h4>通过 openHrmSP 方法打开外部人员大卡片</h4>
        <a className={`${prefixCls}-name`} onClick={this.openHrmSP2}>外部联系人3</a>
        <br />
        <br />
        <h2>离职人员</h2>
        <div>
          <span>请输入需要查询的离职人员id：</span>
          <Input value={this.state.id3} onChange={this.onChange3} style={{ width: 200 }} />
        </div>
        <h4>通过 openHrmCard 方法打开离职人员小卡片（常用）</h4>
        <a className={`${prefixCls}-name`} onClick={this.openHrmCard3}>离职人员1</a>
        <br />
        <br />
        <h4>通过使用 HrmCard 组件打开离职人员小卡片</h4>
        <HrmCard
          triggerProps={{
            getPopupContainer: this.getPopupContainer3,
          }}
          id={this.state.id3}
          module="bs/hrm"
          type={"inside"}
        >
          <span className={`${prefixCls}-name`} ref={this.getChildRef3}><span>离职人员2</span></span>
        </HrmCard>
        <br />
        <br />
        <h4>通过 openHrmSP 方法打开离职人员大卡片</h4>
        <a className={`${prefixCls}-name`} onClick={this.openHrmSP3}>离职人员3</a>
      </div>
    );
  }
}

export default HrmCardDemo
```

### 部门卡片

通过 type 为 department 配置部门卡片

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

const { openHrmCard, openCustomCard } = HrmCard;
const { uiPcClsPrefix } = constants;
const prefixCls = `${uiPcClsPrefix}-demo-hrm-card`;

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

  // private customData: any = void 0
  private customData: any = mockListCustomData2

  state = {
    id: '3575206554492200522',
    // id: '3084033516540591809',
    customData: void 0
  }
  onChange = (value: ReactText) => this.setState({ id: value })

  getChildRef = (el: HTMLAnchorElement) => this.childRef = el;
  childRef?: HTMLAnchorElement;
  getPopupContainer = () => this.childRef;
  openHrmCard1: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, this.state.id, 'department', 'bs/hrm', { path: 'card' })
  openHrmCard2: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, this.state.id, 'department', 'bs/hrm')

  childRef2?: HTMLAnchorElement;
  getChildRef2 = (el: HTMLAnchorElement) => this.childRef2 = el;
  openCustomCard: MouseEventHandler<HTMLAnchorElement> = (e) => {
    openCustomCard(e, this.state.id, 'department', 'bs/hrm', { customData: this.customData })
    const timer = setTimeout(() => {
      clearTimeout(timer)
      this.customData = mockListCustomData2
    }, 1000)
  }

  childRef3?: HTMLAnchorElement;
  getChildRef3 = (el: HTMLAnchorElement) => this.childRef3 = el;
  openHrmCard3: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, '3085665555594269326', 'department', 'bs/hrm', { path: 'card' })

  render() {
    return (
      <div className={prefixCls}>
        <h4>注意：在部门和分部卡片中openHrmCard方法会默认直接跳转新的页签（调用openHrmSP），若需要打开小卡片，则需要在otherParams中传入path='card'</h4>
        <div>
          <span>请输入需要查询的部门id：</span>
          <Input value={this.state.id} onChange={this.onChange} style={{ width: 200 }} />
        </div>
        <h3>打开部门小卡片</h3>
        <a className={`${prefixCls}-name`} ref={this.getChildRef} onClick={this.openHrmCard1}>部门1</a>
        <br />
        <br />
        <h3>直接跳转大卡片</h3>
        <a className={`${prefixCls}-name`} onClick={this.openHrmCard2}>部门2</a>
        <br />
        <br />
        <h3>通过使用 HrmCard 组件打开</h3>
        <HrmCard
         
          triggerProps={{
            getPopupContainer: this.getPopupContainer,
          }}
          id={this.state.id}
          module="bs/hrm"
          type={"department"}
        >
          <span className={`${prefixCls}-name`} ref={this.getChildRef}><span>部门3</span></span>
        </HrmCard>
        <br />
        <br />
        <h3>打开部门3</h3>
        <a className={`${prefixCls}-name`} ref={this.getChildRef3} onClick={this.openHrmCard3}>部门3</a>
        <br />
        <br />
        <h3>通过自定义数据打开</h3>
        <a className={`${prefixCls}-name`} ref={this.getChildRef2} onClick={this.openCustomCard}>自定义部门信息</a>
      </div>
    );
  }
}

export default HrmCardDemo
```

### 分部卡片

通过 type 为 subcompany 配置群组卡片

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

const { openHrmCard, openHrmSP } = HrmCard;
const { uiPcClsPrefix } = constants;
const prefixCls = `${uiPcClsPrefix}-demo-hrm-card`;

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

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

  getChildRef = (el: HTMLAnchorElement) => this.childRef = el;
  childRef?: HTMLAnchorElement;
  getPopupContainer = () => this.childRef;
  openHrmCard1: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, this.state.id, 'subcompany', 'bs/hrm', { path: 'card' })
  openHrmCard2: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, this.state.id, 'subcompany', 'bs/hrm')
  render() {
    return (
      <div className={prefixCls}>
        <h4>注意：在部门和分部卡片中openHrmCard方法会默认直接跳转新的页签（调用openHrmSP），若需要打开小卡片，则需要在otherParams中传入path='card'</h4>
        <div>
          <span>请输入需要查询的分部id：</span>
          <Input value={this.state.id} onChange={this.onChange} style={{ width: 200 }} />
        </div>
        <h3>打开分部小卡片</h3>
        <a className={`${prefixCls}-name`} ref={this.getChildRef} onClick={this.openHrmCard1}>分部1</a>
        <br />
        <br />
        <h3>直接跳转大卡片</h3>
        <a className={`${prefixCls}-name`} onClick={this.openHrmCard2}>分部2</a>
        <br />
        <br />
        <h3>通过使用 HrmCard 组件打开</h3>
        <HrmCard
         
          triggerProps={{
            getPopupContainer: this.getPopupContainer,
          }}
          id={this.state.id}
          module="bs/hrm"
          type={"subcompany"}
        >
          <span className={`${prefixCls}-name`} ref={this.getChildRef}><span>分部3</span></span>
        </HrmCard>
      </div>
    );
  }
}

export default HrmCardDemo
```

### 群组卡片

通过 type 为 group 配置群组卡片

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

const { openHrmCard, openHrmSP } = HrmCard;
const { uiPcClsPrefix } = constants;
const prefixCls = `${uiPcClsPrefix}-demo-hrm-card`;

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

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

  getChildRef = (el: HTMLAnchorElement) => this.childRef = el;
  childRef?: HTMLAnchorElement;
  getPopupContainer = () => this.childRef;
  openHrmCard: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, this.state.id, 'group', 'bs/hrm')
  openHrmSP: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmSP(e, this.state.id, 'group', 'bs/hrm')
  render() {
    return (
      <div className={prefixCls}>
        <div>
          <span>请输入需要查询的群组id：</span>
          <Input value={this.state.id} onChange={this.onChange} style={{ width: 200 }} />
        </div>
        <h3>通过 openHrmCard 方法打开（常用）</h3>
        <a className={`${prefixCls}-name`} ref={this.getChildRef} onClick={this.openHrmCard}>群组1</a>
        <br />
        <br />
        <h3>通过 openHrmSP 方法打开</h3>
        <a className={`${prefixCls}-name`} onClick={this.openHrmSP}>群组2</a>
        <br />
        <br />
        <h3>通过使用 HrmCard 组件打开</h3>
        <HrmCard
         
          triggerProps={{
            getPopupContainer: this.getPopupContainer,
          }}
          id={this.state.id}
          module="bs/hrm"
          type={"group"}
        >
          <span className={`${prefixCls}-name`} ref={this.getChildRef}><span>群组3</span></span>
        </HrmCard>
      </div>
    );
  }
}

export default HrmCardDemo
```

### 岗位卡片

通过 type 为 position 配置岗位卡片

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

const { openHrmCard, openHrmSP } = HrmCard;
const { uiPcClsPrefix } = constants;
const prefixCls = `${uiPcClsPrefix}-demo-hrm-card`;

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

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

  getChildRef = (el: HTMLAnchorElement) => this.childRef = el;
  childRef?: HTMLAnchorElement;
  getPopupContainer = () => this.childRef;
  openHrmCard: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, this.state.id, 'position', 'bs/hrm')
  openHrmSP: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmSP(e, this.state.id, 'position', 'bs/hrm')
  render() {
    return (
      <div className={prefixCls}>
        <div>
          <span>请输入需要查询的岗位id：</span>
          <Input value={this.state.id} onChange={this.onChange} style={{ width: 200 }} />
        </div>
        <h3>通过 openHrmCard 方法打开（常用）</h3>
        <a className={`${prefixCls}-name`} ref={this.getChildRef} onClick={this.openHrmCard}>岗位1</a>
        <br />
        <br />
        <h3>通过 openHrmSP 方法打开</h3>
        <a className={`${prefixCls}-name`} onClick={this.openHrmSP}>岗位2</a>
        <br />
        <br />
        <h3>通过使用 HrmCard 组件打开</h3>
        <HrmCard
         
          triggerProps={{
            getPopupContainer: this.getPopupContainer,
          }}
          id={this.state.id}
          module="bs/hrm"
          type={"position"}
        >
          <span className={`${prefixCls}-name`} ref={this.getChildRef}><span>岗位3</span></span>
        </HrmCard>
      </div>
    );
  }
}

export default HrmCardDemo
```

### 角色卡片

通过 type 为 role 配置角色卡片

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

const { openHrmCard, openHrmSP } = HrmCard;
const { uiPcClsPrefix } = constants;
const prefixCls = `${uiPcClsPrefix}-demo-hrm-card`;

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

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

  getChildRef = (el: HTMLAnchorElement) => this.childRef = el;
  childRef?: HTMLAnchorElement;
  getPopupContainer = () => this.childRef;
  openHrmCard: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, this.state.id, 'role', 'bs/hrm')
  openHrmSP: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmSP(e, this.state.id, 'role', 'bs/hrm')
  render() {
    return (
      <div className={prefixCls}>
        <div>
          <span>请输入需要查询的角色id：</span>
          <Input value={this.state.id} onChange={this.onChange} style={{ width: 200 }} />
        </div>
        <h3>通过 openHrmCard 方法打开（常用）</h3>
        <a className={`${prefixCls}-name`} ref={this.getChildRef} onClick={this.openHrmCard}>角色1</a>
        <br />
        <br />
        <h3>通过 openHrmSP 方法打开</h3>
        <a className={`${prefixCls}-name`} onClick={this.openHrmSP}>角色2</a>
        <br />
        <br />
        <h3>通过使用 HrmCard 组件打开</h3>
        <HrmCard
         
          triggerProps={{
            getPopupContainer: this.getPopupContainer,
          }}
          id={this.state.id}
          module="bs/hrm"
          type={"role"}
        >
          <span className={`${prefixCls}-name`} ref={this.getChildRef}>角色3</span>
        </HrmCard>
      </div>
    );
  }
}

export default HrmCardDemo
```

### 自定义渲染列表

自定义渲染

```jsx
import { PureComponent, MouseEventHandler } from 'react';
import { HrmCard, constants } from '@weapp/ui';

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

const mockData = {
  "customData": {
    "type": "group",
    "titleName": "7.11会议室占用",
    "topIconName": "Icon-File-expansion",
    "members": [
      {
        "id": "7008079959106541657",
        "name": "肖宏亮",
        "avatar": {}
      },
      {
        "id": "1640972497980169228",
        "name": "王金永"
      },
      {
        "id": "4531788173286269952",
        "name": "桂菲蓝"
      },
      {
        "id": "6491435565751352285",
        "name": "杨昭"
      },
      {
        "id": "6491435401898968801",
        "name": "张小丰"
      },
      {
        "id": "9080972482633231336",
        "name": "胡波"
      },
      {
        "id": "6490975734347019845",
        "name": "余海群"
      },
      {
        "id": "8409443996254292548",
        "name": "刘秀林"
      },
      {
        "id": "6491435401981368815",
        "name": "孙祥"
      },
      {
        "id": "4540923264991224315",
        "name": "徐如晶"
      },
      {
        "id": "6996941309319112777",
        "name": "钱文明"
      },
      {
        "id": "7001627333155869028",
        "name": "康渊炎"
      },
      {
        "id": "6488079952131739191",
        "name": "郑轶"
      },
      {
        "id": "4980067602845341827",
        "name": "肖荣娟"
      },
      {
        "id": "7011430422119894579",
        "name": "郭小辉"
      },
      {
        "id": "7001617252409271433",
        "name": "佘楠"
      },
      {
        "id": "4978125520436662436",
        "name": "汪洋"
      },
      {
        "id": "6491435402247168857",
        "name": "崔莹"
      },
      {
        "id": "4972421374685342675",
        "name": "鲍建"
      },
      {
        "id": "8409444074316192610",
        "name": "许杨"
      },
      {
        "id": "6488079953011439305",
        "name": "张鹏"
      },
      {
        "id": "4971634668370964627",
        "name": "蔡志军"
      },
      {
        "id": "7002091623621524637",
        "name": "刘志刚"
      },
      {
        "id": "6491435402374768879",
        "name": "陈敬照"
      },
      {
        "id": "6488079953206839333",
        "name": "殷康露"
      },
      {
        "id": "4272371634887024168",
        "name": "刘庆宇"
      },
      {
        "id": "6491435402444868889",
        "name": "刘超"
      },
      {
        "id": "4540972927850025874",
        "name": "陈凯"
      },
      {
        "id": "6491435402582468913",
        "name": "郭敬美"
      },
      {
        "id": "7010972847622820539",
        "name": "常程"
      },
      {
        "id": "4531753471023107166",
        "name": "王宇静"
      },
      {
        "id": "4981414461146627628",
        "name": "罗威"
      },
      {
        "id": "6491435402736468939",
        "name": "严玥宸"
      },
      {
        "id": "6491435402746168941",
        "name": "刘晓璇"
      },
      {
        "id": "4539973006138306327",
        "name": "程东勇"
      },
      {
        "id": "6491435403139369007",
        "name": "苏永强"
      },
      {
        "id": "6488079955900339702",
        "name": "张波（一部）"
      },
      {
        "id": "4531753478941508168",
        "name": "喻理理"
      },
      {
        "id": "4270809363797382452",
        "name": "章宏武"
      },
      {
        "id": "4540972826952316618",
        "name": "黄冠冠"
      },
      {
        "id": "4541041887419340854",
        "name": "吕益"
      },
      {
        "id": "4541414604251533910",
        "name": "陆迪付"
      },
      {
        "id": "4980972941400469963",
        "name": "刘海峰(SH)"
      },
      {
        "id": "4531753478974108182",
        "name": "杨万旭"
      },
      {
        "id": "4269582643046602887",
        "name": "杨坚"
      },
      {
        "id": "4541033002735551606",
        "name": "沈隽磊"
      },
      {
        "id": "6491435403479469059",
        "name": "董付营"
      },
      {
        "id": "4271620436415892044",
        "name": "汪键"
      },
      {
        "id": "6488080118419743707",
        "name": "叶通"
      },
      {
        "id": "7010973015927333950",
        "name": "林瑞丰"
      },
      {
        "id": "9081456668979838564",
        "name": "平振亚"
      },
      {
        "id": "4540973589988160987",
        "name": "李保进"
      },
      {
        "id": "6993373093358378310",
        "name": "谢丽青"
      },
      {
        "id": "4539973073082609577",
        "name": "张健"
      },
      {
        "id": "6491435404075969161",
        "name": "李海雲"
      },
      {
        "id": "4526155138837756272",
        "name": "梁星"
      },
      {
        "id": "6491435404384569213",
        "name": "潘伟"
      },
      {
        "id": "4541009982143252761",
        "name": "晏成"
      },
      {
        "id": "6996517853039490526",
        "name": "夏志钢"
      },
      {
        "id": "7011414481849947254",
        "name": "张保"
      },
      {
        "id": "6491700410248874794",
        "name": "梁勇（上海）"
      },
      {
        "id": "7010972823759018296",
        "name": "沈俊竹"
      },
      {
        "id": "6491435405439769392",
        "name": "何源"
      },
      {
        "id": "7010972855888921254",
        "name": "陈进"
      },
      {
        "id": "4981191753502625255",
        "name": "陆佳牛"
      },
      {
        "id": "7010972873943522845",
        "name": "吴奇"
      },
      {
        "id": "4981042055443636307",
        "name": "林志鸿"
      },
      {
        "id": "6490972696771260615",
        "name": "温明刚"
      },
      {
        "id": "4981009963428289394",
        "name": "王涛涛"
      },
      {
        "id": "9081435658803816419",
        "name": "夏守成"
      },
      {
        "id": "9081435886243920188",
        "name": "何文轩"
      },
      {
        "id": "6262789366759794433",
        "name": "师源"
      },
      {
        "id": "3322460800109299435",
        "name": "代纪章"
      },
      {
        "id": "3042968908016238634",
        "name": "李新花"
      },
      {
        "id": "744784699668267018",
        "name": "杨朝旭"
      },
      {
        "id": "3043365757204417611",
        "name": "何佳妮"
      },
      {
        "id": "6263451986760616065",
        "name": "钱平"
      },
      {
        "id": "732849883311341577",
        "name": "周幻"
      },
      {
        "id": "732850871094902787",
        "name": "於晓莉"
      },
      {
        "id": "738379172688437248",
        "name": "张晓庆"
      },
      {
        "id": "747752131237486629",
        "name": "林蕾蕾"
      },
      {
        "id": "778552187820154911",
        "name": "李超（政务）"
      },
      {
        "id": "847388526350843933",
        "name": "王贝乐"
      }
    ]
  }
}

class HrmCardDemo extends PureComponent<any> {

  openHrmCard: MouseEventHandler<HTMLAnchorElement> = (e) => openHrmCard(e, '1020075451961155601', 'group', 'bs/hrm', mockData)

  render() {
    return (
      <div className={prefixCls}>
        <h3>自定义数据卡片</h3>
        <a className={`${prefixCls}-name`} onClick={this.openHrmCard}>自定义群组</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' //岗位
```

### 参数：

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