小智报表实战系列 -3 分栏报表

<link rel="stylesheet" href="/xzreport.css"><script type="module" src="/xzreportdesigner.js"></script>const dataset = [ //  添加数据集按钮  { id: 1,value: "新建Json数据集"  },  { id: 2,value: "新建Http接口数据集" },  { id: 3,value: "API服务数据集"  },  { id: 4,value: "外部数据集"  }];const options = {  row: 100,  col: 25,  width: () => document.documentElement.clientWidth,  renderArrow: true,  // 是否显式 扩展方向图标  showFreeze: true,  // 是否显式冻结线  showGrid: true,   // 是否显式网格线  showPreviewToolbar: true,  showBottombar: true,  showSelect: true,  dataset}const _onUpdateDatasetList = [  {    "name": "检验报告单",    "id": "检验报告单",    "type": 4,    "columns": [      {"name": "bgd_id",      "data_type": "3"   },      {"name": "姓名",        "data_type": "3"      },      {"name": "科别",        "data_type": "3"   },       { "name": "病人类别",   "data_type": "3"   },      {"name": "标本号",      "data_type": "3"   },       {  "name": "性别",      "data_type": "3"      },      {"name": "送检医师",    "data_type": "3"   },       {  "name": "标本类型",   "data_type": "3"    },      {"name": "病历号",      "data_type": "3"   },       {  "name": "年龄",       "data_type": "3"      },      {"name": "床号",        "data_type": "3"    },      { "name": "临床诊断",    "data_type": "3"    },      {"name": "备注",        "data_type": "3"    },      { "name": "送检时间",     "data_type": "3"   },      {"name": "检查时间",    "data_type": "3"    },       { "name": "检验者",      "data_type": "3"      },      {"name": "审核者",      "data_type": "3"    },       {  "name": "报告时间",    "data_type": "3"    },      {"name": "注意",        "data_type": "3"     }   ],    "params": [      {        "name": "bgd_id",        "data_type": "3"      }    ]  },  {    "name": "检验项目",    "id": "检验项目",    "type": 4,    "columns": [      { "name": "bgd_id",     "data_type": "3"  },      { "name": "序号",        "data_type": "3"      },      { "name": "项目名称",    "data_type": "3"  },      {  "name": "结果",       "data_type": "3"      },      { "name": "单位",        "data_type": "3"  },      { "name": "参考值",      "data_type": "3"      }    ],    "params": [      {        "name": "bgd_id",        "data_type": "3"      }    ]  }]options.onUpdateDatasetList =  () => {  return new Promise((resolve, reject) => {//Promise 异步回调    resolve(_onUpdateDatasetList);// 返回后台获取的数据集列表  })}onMounted(() => {// 页面加载时,初始化报表设计器  sheetDesign = XZReportDesigner("#action_8_1_main", options);})

const {config, data} = sheetDesign.getData(); //报表设计器的保存事件

const option = {  mode: 'read', view: { width: 1920px, height:1080px },   // 设置报表的宽高  renderArrow: true,  // 是否显式 扩展方向图标  showFreeze: true,  // 是否显式冻结线  showGrid: true,   // 是否显式网格线  showPreviewToolbar: true,  showBottombar: true,  showSelect: true,};......onMounted(() => {....    //sheetConfig是报表设计器中getData().config    //data       是报表设计器中getData().data    spreadSheet = XZReport("#containerxzreport1", option, sheetConfig, data);....}实现数据接口const onUpdateData = (datasets, params) => {  console.log("datasets:", datasets, "params:", params);  return new Promise((resolve, reject) => {    //假设从axios远程拿到的报表渲染数据放在__updateData中（和getData().data不是一个东西）    resolve(queryonUpdateDataFrom(datasets, params,__updateData));  })}option.onUpdateData = onUpdateData