visual-config-report 可视化报告配置组件

介绍

基于 react hook + hox 可视化配置报告元素，包括元素的拖拽、缩放、编辑等功能

• 元素添加&画布区域内拖拽
• 元素大小缩放
• 元素样式编辑

使用说明

安装依赖

npm i visual-config-report

使用

暴露两个组件 
<ReportConfig/>  配置页面
<ReportHtmlModel/>  预览已配置报告
className=indexContainer 是ReportConfig的外容器  最好设置固定高度 可滚动
存在自定义组件的  可外部自行添加样式 

import React from 'react';
import { render } from 'react-dom';
import { ReportConfig, ReportHtmlModel } from 'visual-config-report';

const App = ()=>{
  return (
    <ReportConfig
      reportTypeList={[]}
      onChangeReportType={() => { }}
      baseElems={[]}
      totalPage={''}
      configElemsList={[]}
      defaultElemsList={[]}
      mockReportData={[]}
      onSaveReportConfig={() => { }}
      
      renderCustomComponent={()=>{ }}
      beforeReportRender={()=>{ }}
      afterReportRender={() => { }}
  />    
  )
}

const previewReport = ()=>{
  return (
    <ReportHtmlModel
      oTable={true}
      reportsData={mockReportData}
      reportConfigedElems={configElemsList}
      renderCustomComponent={()=>{ }}
      beforeReportRender={()=>{ }}
      afterReportRender={() => { }}
  />)
}

API

属性

| 属性名 | 说明 | 类型 | 默认 | | --------------------- | ------------ | ------------------------------------------ | ----- | | reportTypeList | 报告模版所属 | ^[Array] | [] | | baseElems | 报告基础元素集 | ^[Array] | [] | | configElemsList | 已配置模版元素集 | ^[Array] | 0 | | defaultElemsList | 默认配置模版元素集 | ^[Array] | [] | | totalPage | 报告页数 | ^[number] | 0 | | mockReportData | 预览用报告数据 | ^[Array] | [] | | onChangeReportType | 改变报告所属回调 | ^[Function](reportType) => void |- | | onSaveReportConfig | 保存报告配置回调 | ^[Function]({configElemsList,reportType,totalPage}) => void | | - | - | - | - | | onTable | 是否开启Table布局 | ^[boolean] | false | | reportsData | 报告数据 | ^[Array] | [] | | reportConfigedElems | 已配置模版元素集 | ^[Array] | [] | | renderCustomComponent | 渲染自定义组件 | ^[Function](reportData, elem) => void | - | | beforeReportRender | 报告渲染前 |^[Function](configedList, reportData) => void | - | | afterReportRender | 报告渲染后 | ^[Function](dragData) => void | - |

• reportTypeList 类型

baseELems = [
  { value: '新筛-室间质评计划报告', key: 'XS' }
]

以下数据类型均为数组是为了支持可以同时生成多份报告

• configElemsList / defaultElemsList 类型

configElemsList = [{
    label: '母亲姓名',
    id: 'motherName',
    component: 'baseText',  
    /* 组件类型有baseText, customText, customComponent, line, image, pageLine
     * baseText 基础文本 内容绑定id 渲染报告时从reportsData获取
     * customText 自定义文本 内容由用户编辑输入
     * customComponent 自定义组件 一般为较复杂元素比如表格等 画报告时该元素只占位 真是渲染由renderCustomComponent进行处理
     * line 分割线
     * image 图片 由用户自己上传
     * pageLine 分页符
     */
    style: {
      width: gridW * 4,
      height: gridH,
      top: 0,
      left: 0
    }
}]

• baseELems 类型

baseELems = [{
  "id": "deptCode",
  "label": "单位(实验室)编码",
  "component": "baseText",  //customText, customComponent, line, image, pageLine
  "dynamic": false,
  "style": null
}]

• mockReportData / reportsData 类型

configElemsList = [{
  deptName: '亳州市妇幼保健院新筛中心',
  motherName: '韩梅梅',
  phone: '0102111',
}]