@netease-ehr/base

EHR 业务组件库

安装依赖

yarn add @netease-ehr/base

引用

任务导出组件

// 1、任务开始层
import { getImproveExport } from '@/axios'; // 导出函数 promise 函数
import { useDownloadTask } from '@netease-ehr/base';
const { downloadTask, loading } = useDownloadTask(getImproveExport); // 导出任务

<Button
    type="primary"
    loading={loading}
    onClick={() => {
        downloadTask(ExportParams);
    }}
>
    导出
</Button>

// 2、任务UI
import { TaskUi } from '@netease-ehr/base';
import { getTaskProcess } from '@/axios'; // 导出进度查询函数 promise 函数

// interface TaskUiProps {
//    style?: React.CSSProperties;
//    downloadProcessFunctionApi: (req: any) => Promise<any>; // 查询导出任务进度 promise 函数
// }

// style 主要是设置 UI的位置
<TaskUi downloadProcessFunctionApi={getTaskProcess} style={{ right: '16px', bottom: '136px' } } />

文件列表

// + 文件列表组件

const links = [
    {
        name: 'new.pptx',
        url:'',
        nosKey: 'xxx',
        transformId: 'xxx',
        transformType: 'KM',
        canDownload: true,
        kmTransformType: 'SUCCESS'
    },
];

return (
    <div className="m-file-link">
        {
            links.map(item=>
                <FileLink
                    key={item.url}
                    prefix={<span className="tag">{ChapterTypeName[item.type]}</span>}
                    {...item.file}
                    name={item.name}
                />)
        }
    </div>
)
       

预览组件

• PreviewModal

// 渲染标题
const blank = () =>{
    return (
        <>
            {canDownload ? (
                <LinkOutlined />
            ) : (
                <Tooltip title="文档加密，用户不可下载">
                    <LockOutlined />
                </Tooltip>
            )}
            <span className="u-title">{name}</span>
        </>
    )
}

const renderAction = () => <a>{blank()}</a>

return (
    <PreviewModal 
        className="class"
        file={{ transformId, name, url, transformType }} 
        allowDownload={canDownload} 
        action={renderAction()} 
    />
)

• Preview

// 参数说明：
/**
 * @param {File} 文件类型 参考下面栗子
 * @param {string} host 公共服务域名
 */
<Preview file={{ transformId, name, url, transformType }} />

上传组件

使用说明：文档参照antd export { Upload, SimpleUpload, EncryUpload };

• Upload：点击上传
• SimpleUpload：普通上传
• EncryUpload：加密上传

// 参数说明：
/**
 * 大附件直传
 * @param {Boolean} dragger 是否为拖拽上传组件
 * @param {Boolean} canRepeat 是否能重复上传相同附件
 * @param {String} text 上传按钮文件
 * @param {Number} trunkSize 分片附件大小 默认5M（5 * 1024 * 1024）
 * @param {Array} validFileType 支持上传的附件类型
 * @param {Array | Object} fileList 附件
 * @param {Number} maxCount 最大上传个数
 * @param {Boolean} transfrom 加密-转换
 * @param {Number} maxSize 最大上传文件大小
 * @param {ReactNode} extra 额外展示内容
 * @param {string} SERVICE_HOST 公共服务域名
 * @param {string} SERVICE_HOST BUCKET_NAME 桶名
 * @param {Function} onStatusChange 分片上传状态变更时调用 0-上传失败 1-正在上传 2-上传成功
 */

export { Upload, SimpleUpload, EncryUpload };

import { EncryUpload } from '@netease-ehr/base';

<EncryUpload
    extra="上传视频、音频、PDF文件(暂不支持加密上传)"
    maxCount={1}
    validFileType={[...videoType, ...audioType, ...documentType]}
/>