# WorkStatus 工作状态

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/work-status/freepass)
- 平台：PC
- 维护者：王斌
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/sjl/ryxkp/#s5
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[WorkStatus]

## 代码演示

### 基础用法

最简单的用法.

```jsx
import * as React from 'react';
import { WorkStatus } from '@weapp/ui'

export default class BasicDemo extends React.Component<any, any> {

  render() {
    return (
      <div style={{ padding: '12px 27px 12px', background: '#fff' }}>
        <WorkStatus
         
          style={{ width: '340px' }}
        />
      </div>
    );
  }
}
```

### 非popover弹窗模式（小卡片模式）

```jsx
import * as React from 'react';
import { WorkStatus } from '@weapp/ui'

export default class UnPopoverDemo extends React.Component<any, any> {

  render() {
    return (
      <div style={{ padding: '12px 27px 12px', background: '#fff' }}>
        <WorkStatus
         
          popoverMode={false}
          style={{ width: '340px' }}
        />
      </div>
    );
  }
}
```

### 只读模式

```jsx
import * as React from 'react';
import { WorkStatus } from '@weapp/ui'

export default class ReadonlyDemo extends React.Component<any, any> {

  render() {
    return (
      <div style={{ padding: '12px 27px 12px', background: '#fff' }}>
        <WorkStatus
         
          readonly
          style={{ width: '340px' }}
        />
      </div>
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| readonly | 是否只读 | boolean | 否 | false |
| style | 复写样式 | React.CSSProperties | 否 |  |
| className | 复写类名 | string | 否 |  |
| onChange | value更新回调事件 | (statusData: AnyObj, historyData?: AnyObj[]) => void | 否 |  |
| popoverMode | popover弹窗模式 | boolean | 否 | true |
| empIds | 外部控制工作状态人员id(目前只支持 搭配 readonly属性，且长度为1) | string[] | 否 |  |
| triggerProps | popover弹窗模式下trigger配置props（具体见 Trigger 组件api文档） | TriggerProps | 否 |  |
