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}