wukuang/packages/print-webapp/README.md

print-webapp 前端使用说明

print-webapp 当前对外仅暴露以下 3 个能力：

• PrintDesigner：打印模板设计组件
• PrintApi：打印模板后端接口封装
• PrintRuntime：打印运行时预览对象

1. 安装与引入

在业务项目中安装后，从包根入口引入：

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）

<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)

示例：

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()

示例：

import { PrintRuntime } from "print-template";

const runtime = new PrintRuntime(templateData, formData);
runtime.printPreview();

5. 运行与打包

• 本地开发：pnpm run dev
• SDK 打包：pnpm run build

6. 当前版本注意事项

• PrintDesigner 内部目前包含示例模板数据和字段元数据，属于“可演示优先”实现。
• 保存按钮当前仅在控制台输出模板数据，未直接调用 PrintApi 持久化。
• 若用于生产业务，建议在下个版本将模板数据、字段元数据、保存行为改为外部可配置。