REAL SHOWCASE SOURCEprinting-lab-report

1 个文件 · 69 行 · TypeScript

// ===== showcase/src/examples/components/printing.ts ===== import {  RenderButton,  RenderPageHeader,  RenderPrintWorkspace,  RenderStackPanel,  RenderText,  RenderWrapPanel,  type PrintTemplate,} from 'ds-ui' const template: PrintTemplate = {  schemaVersion: 1,  name: '检验结果报告',  paper: { name: 'A5', widthMm: 148, heightMm: 210 },  margins: { leftMm: 10, topMm: 8, rightMm: 10, bottomMm: 8 },  pages: [{    id: 'page-1',    name: '检验报告',    bands: [      { id: 'title', kind: 'printTitle', heightMm: 18, objects: [        { id: 'title-text', kind: 'text', xMm: 0, yMm: 2, widthMm: 128, heightMm: 8, text: '检验结果报告', fontSizePt: 18, fontWeight: 'bold', textAlign: 'center' },      ] },      { id: 'patient', kind: 'pageHeader', heightMm: 14, objects: [        { id: 'patient-name', kind: 'text', xMm: 0, yMm: 1, widthMm: 62, heightMm: 6, text: '患者:{{patient.name}}' },        { id: 'record-no', kind: 'text', xMm: 66, yMm: 1, widthMm: 62, heightMm: 6, text: '门诊号:{{patient.recordNo}}' },      ] },      { id: 'items', kind: 'data', heightMm: 9, dataPath: 'items', objects: [        { id: 'item-name', kind: 'text', xMm: 0, yMm: 1, widthMm: 54, heightMm: 6, text: '{{name}}' },        { id: 'item-value', kind: 'text', xMm: 58, yMm: 1, widthMm: 34, heightMm: 6, text: '{{value}} {{unit}}' },        { id: 'item-range', kind: 'text', xMm: 96, yMm: 1, widthMm: 32, heightMm: 6, text: '{{range}}' },      ] },      { id: 'footer', kind: 'pageFooter', heightMm: 8, objects: [        { id: 'page-number', kind: 'text', xMm: 0, yMm: 1, widthMm: 128, heightMm: 6, text: '第 {{page.number}} / {{page.total}} 页', textAlign: 'center' },      ] },    ],  }],} const data = {  patient: { name: '李安然', recordNo: 'OP-20260717-018' },  items: [    { name: '白细胞计数', value: '6.21', unit: '10^9/L', range: '3.5–9.5' },    { name: '血红蛋白', value: '132', unit: 'g/L', range: '115–150' },    { name: '血小板计数', value: '228', unit: '10^9/L', range: '125–350' },  ],} export function createPrintingExample(): RenderStackPanel {  const status = new RenderText('设计模式:可调整模板结构、对象属性、网格与标尺。', { role: 'secondary' })  const workspace = new RenderPrintWorkspace({ defaultTemplate: template, data, mode: 'design', zoom: 0.72 })  workspace.height = 520  const actions = new RenderWrapPanel({ spacing: 8, runSpacing: 8 })  actions.addChild(new RenderButton({ label: '设计模式', onClick: () => { workspace.setMode('design'); status.text = '已切换到设计模式。' } }))  actions.addChild(new RenderButton({ label: '打印预览', variant: 'primary', onClick: () => { workspace.setMode('preview'); status.text = `预览已生成 ${workspace.preparedPrint.pages.length} 页。` } }))  actions.addChild(new RenderButton({ label: '导出 JSON', onClick: () => { status.text = `模板 JSON 已生成,共 ${workspace.exportJson().length} 个字符。` } }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 10, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'Printing 检验报告设计与预览',    description: '在同一工作区完成 JSON 模板设计、数据绑定、分页预览和导出。',  }))  panel.addChild(actions)  panel.addChild(status)  panel.addChild(workspace, 1)  panel.padding = 14  return panel}