公用组件库

$3

> npm
``shell
$ npm i june-ui -S
`
> yarn
`shell
$ yarn add june-ui
`

$3

> npm
`shell
$ npm update june-ui@latest
`
> yarn
`shell
$ yarn upgrade june-ui@latest
`

$3

* FlowList <流程列表>
* FlowDetail <流程详情>
* FlowRecord <审批日志>
* FlowViewer <流程图>
* FlowActionButtons <转办、同意、驳回组合按钮>
* FlowTransferModal <转办弹出框>
* FlowFullScreen <全屏按钮>

$3

> FlowList

!Image text


`javascript react
import React from 'react';
import { config } from 'ice';
import { appHistory } from '@ice/stark';
import { FlowList } from 'june-ui';
import { get, post } from '@/api/request';

export default function FlowListPage(props) {

/**
* 传入的请求方法
*
*/
const request = (req) => {
switch (req.method) {
case 'GET':
return get(req.url, req.data, true);
case 'POST':
return post(req.url, { data: req.data }, true);
default:
break;
}
};

/**
* 列表 查看按钮点击事件
* record 点击行数据
*/
const onLinkClick = (_, record, index) => {
// 路由跳转
};

return ;
}
`

> FlowList props


| 参数 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| request | 请求方法 | function | / |
| onLinkClick | 列表查看点击 | function | / |


> FlowDetail


!Image text


`javascript react
import React, { useEffect, useState } from 'react';
import { FlowDetail } from 'june-ui';
import { useParams } from 'ice';
import { get, post } from '@/api/request';

export default FlowDetailPage function () {

const [id, setId] = useState()
const params = useParams()

const request = (config) => {
switch (config.method) {
case 'GET':
return get(config.url, config.data, true);
case 'POST':
return post(config.url, { data: config.data }, true);
default:
break;
}
};

useEffect(() => {
setId(params.id)
return () => {};
}, []);

return ;
};
``

> FlowDetail props

| 参数 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| id | 流程实例ID | string | / |
| request | 请求方法 | function | / |
| renderInfo | 基本信息渲染方法 | function | / |
| renderApprove | 审批表单渲染方法 | function | / |
| onTransfer | 转办回调 | function | / |
| onAgree | 同意回调 | function | / |
| onReject | 驳回回调 | function | / |