REAL SHOWCASE SOURCEreport-workspace-designer

2 个文件 · 145 行 · TypeScript

// ===== showcase/src/examples/components/report_workspace.ts ===== import {  RenderPageHeader,  RenderReportV3Workspace,  RenderStackPanel,  RenderText,} from 'ds-ui'import { medicalReportDatasets, medicalReportTemplate } from './report_shared' export function createReportWorkspaceExample(): RenderStackPanel {  const status = new RenderText('设计模式:选择单元格后可编辑字段绑定、格式、边框和关系。', { role: 'secondary' })  const workspace = new RenderReportV3Workspace({    template: medicalReportTemplate,    datasets: medicalReportDatasets,    mode: 'design',    debugMode: false,    dockValidationByDefault: false,    onModeChange: mode => {      status.text = mode === 'preview'        ? '预览模式:模板已编译并使用门诊工作量数据完成物化。'        : '设计模式:选择单元格后可编辑字段绑定、格式、边框和关系。'    },    onTemplateChange: template => {      status.text = `模板已更新:${template.cells.length} 个单元格,${template.relations.length} 条关系。`    },    onTemplateExport: json => {      status.text = `模板已导出:${json.length.toLocaleString('zh-CN')} 字节。`    },  })   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 12, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'ReportWorkspace 门诊日报设计器',    description: '在同一工作区中完成字段放置、单元格设计、模板校验、运行预览与 JSON 导出。',  }))  panel.addChild(status)  panel.addChild(workspace, 1)  panel.padding = 18  return panel} // ===== showcase/src/examples/components/report_shared.ts ===== import type { ReportDatasetMap, ReportTemplateV3 } from 'ds-ui' export const medicalReportTemplate: ReportTemplateV3 = {  schemaVersion: 3,  rows: [    { height: 38 },    { height: 30 },    { height: 30 },    { height: 30 },    { height: 30 },  ],  columns: [    { width: 132 },    { width: 112 },    { width: 104 },    { width: 104 },  ],  freeze: { rows: 2, columns: 1 },  cells: [    {      id: 'report_title',      address: 'A1',      row: 0,      column: 0,      columnSpan: 4,      value: { type: 'text', text: '门诊科室工作量日报' },      style: { fontWeight: 'bold', align: 'center' },    },    { id: 'header_department', address: 'A2', row: 1, column: 0, value: { type: 'text', text: '科室' }, style: { fontWeight: 'bold' } },    { id: 'header_doctor', address: 'B2', row: 1, column: 1, value: { type: 'text', text: '医生' }, style: { fontWeight: 'bold' } },    { id: 'header_visits', address: 'C2', row: 1, column: 2, value: { type: 'text', text: '接诊量' }, style: { fontWeight: 'bold', align: 'right' } },    { id: 'header_wait', address: 'D2', row: 1, column: 3, value: { type: 'text', text: '平均等待' }, style: { fontWeight: 'bold', align: 'right' } },    {      id: 'detail_department',      address: 'A3',      row: 2,      column: 0,      value: { type: 'field', field: 'department', dataset: 'clinic' },      binding: { dataset: 'clinic', mode: 'value', field: 'department' },      expansion: { direction: 'down' },    },    {      id: 'detail_doctor',      address: 'B3',      row: 2,      column: 1,      value: { type: 'field', field: 'doctor', dataset: 'clinic' },      binding: { dataset: 'clinic', mode: 'value', field: 'doctor' },    },    {      id: 'detail_visits',      address: 'C3',      row: 2,      column: 2,      value: { type: 'field', field: 'visits', dataset: 'clinic' },      binding: { dataset: 'clinic', mode: 'value', field: 'visits' },      style: { align: 'right' },    },    {      id: 'detail_wait',      address: 'D3',      row: 2,      column: 3,      value: { type: 'field', field: 'wait', dataset: 'clinic' },      binding: { dataset: 'clinic', mode: 'value', field: 'wait' },      format: { formatter: { type: 'unit', unit: 'minute', maximumFractionDigits: 0 } },      style: { align: 'right' },    },  ],  relations: [    { type: 'structure', from: 'detail_department', to: 'detail_doctor', kind: 'child' },    { type: 'layout', from: 'detail_department', to: 'detail_doctor', kind: 'rightOf' },    { type: 'layout', from: 'detail_doctor', to: 'detail_visits', kind: 'rightOf' },    { type: 'layout', from: 'detail_visits', to: 'detail_wait', kind: 'rightOf' },    { type: 'scope', from: 'detail_department', to: 'detail_doctor', kind: 'inherit' },    { type: 'scope', from: 'detail_department', to: 'detail_visits', kind: 'inherit' },    { type: 'scope', from: 'detail_department', to: 'detail_wait', kind: 'inherit' },  ],  datasets: [    {      id: 'clinic',      label: '门诊工作量',      fields: [        { id: 'department', label: '科室', type: 'text', role: 'dimension' },        { id: 'doctor', label: '医生', type: 'text', role: 'dimension' },        { id: 'visits', label: '接诊量', type: 'number', role: 'measure' },        { id: 'wait', label: '平均等待', type: 'number', role: 'measure' },      ],    },  ],} export const medicalReportDatasets: ReportDatasetMap = {  clinic: [    { department: '心内科', doctor: '林医生', visits: 42, wait: 18 },    { department: '心内科', doctor: '陈医生', visits: 37, wait: 22 },    { department: '呼吸内科', doctor: '王医生', visits: 51, wait: 16 },    { department: '神经内科', doctor: '赵医生', visits: 35, wait: 25 },    { department: '急诊医学科', doctor: '周医生', visits: 68, wait: 12 },  ],}