operp-print-designer 1.0.9 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -3
- package/dist/components/Canvas.d.ts +2 -0
- package/dist/components/PrintDesigner/index.d.ts +3 -1
- package/dist/components/PrintPreview.d.ts +4 -1
- package/dist/components/QRCode.d.ts +9 -0
- package/dist/constants/index.d.ts +11 -0
- package/dist/index.d.ts +2 -2
- package/dist/operp-print-designer.css +1 -1
- package/dist/operp-print-designer.es.js +4311 -3996
- package/dist/operp-print-designer.umd.js +21 -21
- package/dist/types/index.d.ts +7 -1
- package/dist/utils/dataHelper.d.ts +4 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
# Print Designer 使用文档
|
|
1
|
+
# Operp Print Designer 使用文档
|
|
2
|
+
|
|
3
|
+
**Git 仓库地址**: https://gitee.com/garychk/operp-react-print
|
|
2
4
|
|
|
3
5
|
## 安装
|
|
4
6
|
|
|
@@ -53,6 +55,7 @@ function Previewer() {
|
|
|
53
55
|
|------|------|------|------|
|
|
54
56
|
| `isPreview` | `boolean` | 否 | 是否为预览模式（只读），默认为 `false` |
|
|
55
57
|
| `initialTemplateData` | `TemplateData` | 否 | 初始模板数据，用于加载已有的模板 |
|
|
58
|
+
| `dataSource` | `PrintDesignerDataSource` | 否 | 外部数据源，传入后优先于模板内部数据源用于渲染和打印 |
|
|
56
59
|
| `onSave` | `(data: TemplateData) => void` | 否 | 保存回调函数，当用户点击保存按钮时触发 |
|
|
57
60
|
| `onPrint` | `() => void` | 否 | 打印回调函数，当用户点击打印按钮时触发 |
|
|
58
61
|
|
|
@@ -84,10 +87,19 @@ interface DataSource {
|
|
|
84
87
|
}
|
|
85
88
|
```
|
|
86
89
|
|
|
90
|
+
### PrintDesignerDataSource
|
|
91
|
+
|
|
92
|
+
```typescript
|
|
93
|
+
interface PrintDesignerDataSource {
|
|
94
|
+
data?: Record<string, unknown>; // 对象数据
|
|
95
|
+
list?: Record<string, unknown>[]; // 列表数据
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
87
99
|
### CanvasComponent
|
|
88
100
|
|
|
89
101
|
```typescript
|
|
90
|
-
type CanvasComponentType = 'text' | 'image' | 'table' | 'barcode' | 'line';
|
|
102
|
+
type CanvasComponentType = 'text' | 'image' | 'table' | 'barcode' | 'qrcode' | 'line';
|
|
91
103
|
|
|
92
104
|
interface CanvasComponent {
|
|
93
105
|
id: string;
|
|
@@ -274,7 +286,7 @@ import 'operp-print-designer/dist/index.css';
|
|
|
274
286
|
2. **TypeScript**: 该库使用 TypeScript 编写，自带类型定义。
|
|
275
287
|
|
|
276
288
|
3. **数据绑定**: 数据源支持对象和数组两种类型：
|
|
277
|
-
- **对象类型**:
|
|
289
|
+
- **对象类型**: 适用于文本、图片、条码、二维码等组件的数据绑定
|
|
278
290
|
- **数组类型**: 适用于表格组件的数据绑定
|
|
279
291
|
|
|
280
292
|
4. **预览模式**: 当 `isPreview` 为 `true` 时，组件处于只读模式，用户不能编辑模板，只能预览和打印。
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import 'react-grid-layout/css/styles.css';
|
|
3
3
|
import 'react-resizable/css/styles.css';
|
|
4
|
+
import { DataSource } from '../types';
|
|
4
5
|
declare const Canvas: React.FC<{
|
|
5
6
|
isPreview?: boolean;
|
|
7
|
+
dataSources?: DataSource[];
|
|
6
8
|
}>;
|
|
7
9
|
export default Canvas;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { TemplateData } from '../../types';
|
|
2
|
+
import { PrintDesignerDataSource, TemplateData } from '../../types';
|
|
3
3
|
export interface PrintDesignerProps {
|
|
4
4
|
/** 是否为预览模式（只读） */
|
|
5
5
|
isPreview?: boolean;
|
|
6
6
|
/** 初始模板数据 */
|
|
7
7
|
initialTemplateData?: TemplateData;
|
|
8
|
+
/** 外部数据源。传入后优先于设计器内部数据源用于渲染和打印 */
|
|
9
|
+
dataSource?: PrintDesignerDataSource;
|
|
8
10
|
/** 保存回调 */
|
|
9
11
|
onSave?: (templateData: TemplateData) => void;
|
|
10
12
|
/** 打印回调 */
|
|
@@ -40,6 +40,7 @@ export declare const COMPONENT_DEFAULTS: {
|
|
|
40
40
|
textAlign: "left";
|
|
41
41
|
color: string;
|
|
42
42
|
backgroundColor: string;
|
|
43
|
+
format: string;
|
|
43
44
|
};
|
|
44
45
|
image: {
|
|
45
46
|
src: string;
|
|
@@ -51,6 +52,9 @@ export declare const COMPONENT_DEFAULTS: {
|
|
|
51
52
|
cols: number;
|
|
52
53
|
borderWidth: number;
|
|
53
54
|
borderColor: string;
|
|
55
|
+
headerBackgroundColor: string;
|
|
56
|
+
headerColor: string;
|
|
57
|
+
headerFontSize: number;
|
|
54
58
|
content: string;
|
|
55
59
|
};
|
|
56
60
|
barcode: {
|
|
@@ -58,6 +62,13 @@ export declare const COMPONENT_DEFAULTS: {
|
|
|
58
62
|
format: "CODE128";
|
|
59
63
|
content: string;
|
|
60
64
|
};
|
|
65
|
+
qrcode: {
|
|
66
|
+
value: string;
|
|
67
|
+
errorLevel: "M";
|
|
68
|
+
color: string;
|
|
69
|
+
backgroundColor: string;
|
|
70
|
+
content: string;
|
|
71
|
+
};
|
|
61
72
|
line: {
|
|
62
73
|
color: string;
|
|
63
74
|
thickness: number;
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,6 @@ import PrintDesigner from './components/PrintDesigner';
|
|
|
2
2
|
export default PrintDesigner;
|
|
3
3
|
export { PrintDesigner };
|
|
4
4
|
export type { PrintDesignerProps } from './components/PrintDesigner';
|
|
5
|
-
export type { CanvasComponent, CanvasComponentType, PageSettings, GridSettings, TemplateData, DataSource, DataSourceType, TableColumnConfig, DataBinding, DataBindingConfig, } from './types';
|
|
6
|
-
export { getRenderValue, getObjectFromDataSource, getArrayFromDataSource, safeParseJSON, getValueByPath, } from './utils/dataHelper';
|
|
5
|
+
export type { CanvasComponent, CanvasComponentType, PageSettings, GridSettings, TemplateData, DataSource, DataSourceType, PrintDesignerDataSource, TableColumnConfig, DataBinding, DataBindingConfig, } from './types';
|
|
6
|
+
export { getRenderValue, getObjectFromDataSource, getArrayFromDataSource, formatRenderValue, safeParseJSON, getValueByPath, } from './utils/dataHelper';
|
|
7
7
|
export { useDesignerStore } from './store';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-body{display:flex;flex:1;overflow:hidden}.app-left-panel{width:
|
|
1
|
+
*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-body{display:flex;flex:1;overflow:hidden}.app-left-panel{position:relative;width:240px;min-width:220px;display:flex;flex-direction:column;border-right:1px solid #e8e8e8;background:#fff;overflow:hidden;transition:width .2s ease,min-width .2s ease}.app-left-top{flex-shrink:0}.app-left-bottom{flex:1;overflow:auto}.app-right-panel{position:relative;width:260px;min-width:260px;display:flex;flex-direction:column;border-left:1px solid #e8e8e8;background:#fff;overflow:auto;transition:width .2s ease,min-width .2s ease}.app-left-panel.collapsed,.app-right-panel.collapsed{width:40px;min-width:40px;align-items:center;justify-content:flex-start;overflow:hidden}.panel-collapse-trigger{position:absolute;top:8px;z-index:2;width:24px;height:24px;padding:0}.panel-collapse-trigger-left,.panel-collapse-trigger-right{right:8px}.panel-collapsed-trigger{width:32px;height:32px;margin-top:8px;padding:0}.canvas-grid{background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:20px 20px}.react-grid-item.react-grid-placeholder{background:#1677ff!important;opacity:.15!important;border-radius:4px}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}
|