董海洋
124 lines
2.7 KiB
Markdown
124 lines
2.7 KiB
Markdown
# print-webapp 前端使用说明
|
||
|
||
`print-webapp` 当前对外仅暴露以下 3 个能力：
|
||
|
||
- `PrintDesigner`：打印模板设计组件
|
||
- `PrintApi`：打印模板后端接口封装
|
||
- `PrintRuntime`：打印运行时预览对象
|
||
|
||
## 1. 安装与引入
|
||
|
||
在业务项目中安装后，从包根入口引入：
|
||
|
||
```ts
|
||
import { PrintDesigner, PrintApi, PrintRuntime } from "print-template";
|
||
```
|
||
|
||
> 当前包的 `exports` 仅开放根入口，请勿使用子路径导入。
|
||
|
||
## 2. PrintDesigner 组件
|
||
|
||
### 2.1 组件入参
|
||
|
||
- `modelId: string`（必填）
|
||
数据模型 ID，用于设计器内部字段查询。
|
||
- `id: string`（必填）
|
||
模板 ID。
|
||
- `templateName?: string`（选填）
|
||
页面头部展示的模板名称。
|
||
|
||
### 2.2 组件事件
|
||
|
||
- `back`
|
||
点击头部“返回”按钮触发。
|
||
|
||
### 2.3 页面中使用示例（Vue 3）
|
||
|
||
```vue
|
||
<script setup lang="ts">
|
||
import { PrintDesigner } from "print-template";
|
||
|
||
const modelId = "YOUR_MODEL_ID";
|
||
const templateId = "YOUR_TEMPLATE_ID";
|
||
|
||
const onBack = () => {
|
||
// 返回列表页
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<PrintDesigner
|
||
:model-id="modelId"
|
||
:id="templateId"
|
||
template-name="测试模板"
|
||
@back="onBack"
|
||
/>
|
||
</template>
|
||
```
|
||
|
||
## 3. PrintApi 接口
|
||
|
||
`PrintApi` 为模板 CRUD 封装，返回值为 `Promise`。
|
||
|
||
- `getPrintTemplate(templateId: string)`
|
||
- `createPrintTemplate(data: any)`
|
||
- `updatePrintTemplate(templateId: string, data: any)`
|
||
- `deletePrintTemplate(templateId: string)`
|
||
|
||
示例：
|
||
|
||
```ts
|
||
import { PrintApi } from "print-template";
|
||
|
||
// 查询模板
|
||
const detail = await PrintApi.getPrintTemplate("template-id");
|
||
|
||
// 新建模板
|
||
await PrintApi.createPrintTemplate({
|
||
templateName: "测试模板",
|
||
settings: "{}",
|
||
content: "[]",
|
||
});
|
||
|
||
// 更新模板
|
||
await PrintApi.updatePrintTemplate("template-id", {
|
||
templateName: "测试模板-更新",
|
||
});
|
||
|
||
// 删除模板
|
||
await PrintApi.deletePrintTemplate("template-id");
|
||
```
|
||
|
||
## 4. PrintRuntime 对象
|
||
|
||
`PrintRuntime` 用于基于模板数据和表单数据进行打印预览。
|
||
|
||
### 4.1 构造参数
|
||
|
||
- `templateData: PageData`
|
||
- `formData: RuntimeFormData`
|
||
|
||
### 4.2 当前可用方法
|
||
|
||
- `printPreview()`
|
||
|
||
示例：
|
||
|
||
```ts
|
||
import { PrintRuntime } from "print-template";
|
||
|
||
const runtime = new PrintRuntime(templateData, formData);
|
||
runtime.printPreview();
|
||
```
|
||
|
||
## 5. 运行与打包
|
||
|
||
- 本地开发：`pnpm run dev`
|
||
- SDK 打包：`pnpm run build`
|
||
|
||
## 6. 当前版本注意事项
|
||
|
||
- `PrintDesigner` 内部目前包含示例模板数据和字段元数据，属于“可演示优先”实现。
|
||
- 保存按钮当前仅在控制台输出模板数据，未直接调用 `PrintApi` 持久化。
|
||
- 若用于生产业务，建议在下个版本将模板数据、字段元数据、保存行为改为外部可配置。
|