自定义报表

本系统可以开发自定义报表，制作中国式复杂报表。如下图所示：

自定义报表支持数字格式化，合并单元格，设置单元格格式等功能，如下图所示：

自定义报表的开发目前需要会javascript语言。

支持的功能

筛选器
下载excel
合并单元格
固定列头
数字格式化
单元格配色

报表开发方式

在服务器后台的项目文件夹目录内，新建reports目录。
将example.js和index.js放入此目录中。
刷新前端页面，点击报表一栏即可看到。

文件解释

index.js

报表目录，在此注册报表。

example.js

某张报表的具体内容文件。每一张报表一个文件。

报表js文件参数解释

报表js文件分为3个必要参数和若干个选填参数。

必要参数

参数	类型	作用
title	string	报表名称
logicforms	function	报表底层的数据申请
dataToGrid	function	返回一个二维数组，表达出整个报表

选填参数

参数	类型	作用
filters	function	筛选器申明
fix	object	固定列头申明
getColumnProps	function	单元格属性，align和width
getCellStyle	function	单元格样式，如背景色等
autoMergeForIndex	function	如果遇到同一列上下一样的，是不是要合并起来

![autoMergeForIndex 示例](images/截屏2025-04-26 10.43.06-1.png)

参数详细解释

logicforms

作用
根据传入的参数构建并一个logicform的查询对象，用于从数据库查询报表所需要的底层数据。
函数样式

logicforms: (filters, helperFunctions, initialLogicform) => {
  const { date: _date, organization } = filters;
  const date = moment(_date, 'YYYY-[Q]Q');

  lf=[
    logicform查询结构
  ]

  return lf

每个参数分别的作用

 filters：筛选器中传递出的参数    
 helperFunctions：帮助函数，使用moment函数将时间转化为指定格式
 initialLogicform：

返回的内容
返回一个Logicform结构的数组，能从数据库中筛选出报表所需要的底层数据

lf=[
    {
     schema: '',
     query: '',
     preds: '',
     groupby: '',
     limit: -1,
    }
]

dataToGrid

作用

绘制报表，设置报表的行（rowsConfig）、列（grid）等样式并将数据传入报表

函数样式

  dataToGrid: (data, filters, { moment, _, pivotData }) => {

    const rowsConfig = [
      {
        key1: 'xxx',
        title1: 'xxx',
        rowNumber1: 1,
      },
    ]
    const grid = [
      ['', '', '', '', ......],

    for (const rowConfig of rowsConfig) {
      let total = '-';
      let ncje = '-';
      if (data && data[0] && data[0].result) {
        // console.log('data[0].result', data[0].result);
        const results = data[0].result;
        
        if (!rowConfig.key1) {
          ncje = '';
          total = ''
        } else {
          value1 = results.find(r => r.xx=== rowConfig.key1);
          if (value1) {
            ncje = value1.xx;
            total = value1.xx;
          }
        }
      grid.push([
        rowConfig.title1,
        rowConfig.rowNumber1 || '',
        total === '' ? '' : {
          v: total || 0,
          formatter: '0,0.00w'
        },
        ncje === '' ? '' : {
          v: ncje || 0,
          formatter: '0,0.00w'
        },
      ])
    }

    return grid;
]

每个参数分别的作用

data：Logicform执行后得到的数据，用于判断data[0].result是否存在，然后更新rowsConfig对应的值
filters：

返回的要求是什么

使用for循环行（rowsConfig）填充grid，判断rowConfig.key1等于分组groupby，满足则通过grid.push设置格式并将数据填充到对应的表格中

    for (const rowConfig of rowsConfig) {
      let total = '-';
      let ncje = '-';
      if (data && data[0] && data[0].result) {
        // console.log('data[0].result', data[0].result);
        const results = data[0].result;
        
        if (!rowConfig.key1) {
          ncje = '';
          total = ''
        } else {
          value1 = results.find(r => r.xx=== rowConfig.key1);
          if (value1) {
            ncje = value1.xx;
            total = value1.xx;
          }
        }
      grid.push([
        rowConfig.title1,
        rowConfig.rowNumber1 || '',
        total === '' ? '' : {
          v: total || 0,
          formatter: '0,0.00w'
        },
        ncje === '' ? '' : {
          v: ncje || 0,
          formatter: '0,0.00w'
        },
      ])
    }

filters

作用

设置筛选器，使表格数据根据筛选结果变化，形成联动效果

长什么样

  filters: ({ moment }, initialLogicform) => {

    return [
            {
        title: '',
        dataIndex: '',
        valueType: '',
        initialValue: ,
        fieldProps: {
          style: { width: 120 },
        },
      },
    ];
  },       

每个参数分别的作用

moment：根据传递初始日期，对数据按照时间类型的筛选
initialLogicform：初始的Logicform查询数据

返回内容

筛选器：
    title: 指定刷选器标题
    dataIndex: 指定数据字段的索引
    valueType: 指定数据类型
    initialValue: 筛选器的值
    fieldProps: 筛选器样式

    return [
      {
        title: '',
        dataIndex: '',
        valueType: '',
        initialValue: ,
        fieldProps: 
      }
    ],

fix

作用
固定报表中表格的位置
样式

fix: { col: 0 },

getColumnProps

作用
根据传递的列索引设置报表对应单元格的对齐方式和宽度
样式

  getColumnProps: (index) => {
    if (index === 0 || index === 4) {
      return { align: 'left', width: 150 };
    }
    
    return {
      width: 100
    };
  },

参数
index：列索引，从0开始
返回内容
返回参数对应列的单元格的对齐方式和宽度

autoMergeForIndex

作用：如果遇到同一列上下一样的，是不是要合并起来

输入图片说明

样式

autoMergeForIndex: (rowIndex, colIndex) => {
  return  rowIndex <= 1; // 返回true/false
}

参数

rowIndex：当前行数，从0开始计数
colIndex：当前列数，从0开始计数

返回内容
返回true/false，让系统知道如果遇到同一列中，和当前rowIndex-1的值是一样的话，是否要合并起来。

支持的功能​

报表开发方式​

文件解释​

index.js​

example.js​

报表js文件参数解释​

必要参数​

选填参数​

参数详细解释​

logicforms​

dataToGrid​

filters​

fix​

getColumnProps​

autoMergeForIndex​