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` 持久化。
|
|||
|
|
- 若用于生产业务，建议在下个版本将模板数据、字段元数据、保存行为改为外部可配置。
|