构建 Node.js 库存和发票计费应用程序：指南

如今，在经营企业时，无论身在何处，访问订单、库存和财务数据都非常重要。这就是为什么拥有灵活、交互式且能够适应各种屏幕分辨率的屏幕报告至关重要。

这样做可以让您掌握业务绩效，并随时随地做出明智的决策。

ActiveReportsJS 允许您构建具有高度交互式报告功能的响应式 Web 应用程序，该应用程序可在任何浏览器中运行并支持桌面和移动设备。

在本文中，我们将向您展示如何构建响应式 Node.js 库存管理系统，允许用户使用 ActiveReportsJS 跟踪订单报告。我们将讨论以下主题：

• 设计报告标题

• 在 Node.js 中定义数据访问

• 使用计算字段

• 添加图表控件

• 添加表格控件

• 定义子表

• 添加向下钻取功能

• 向表添加排序列

• 创建 Node.js 发票应用程序

  
  

如果您想了解已完成的报告和应用程序，可以在此处找到存储库。

构建基于 Web 的销售报告

对于我们的场景，我们有一个名为 ACME Inc. 的客户，他与我们签订了合同，让我们为他们制作一份销售报告。该请求附带了报告的模型，如下所示：

为了创建像上面这样的企业级报告，GrapeCity 提供了 ActiveReportsJS Designer。这个直观的工具可帮助您配置报告以获取数据并使用表格、条形图、饼图等可视元素呈现数据。

ActiveReportsJS Designer 以特殊的 JSON 格式存储报表定义，并将其保存在扩展名为.rdlx-json 的文件中。

设计报告标题

要创建新报告，请在设计器中打开设计器工具栏中的“文件”菜单，然后选择“连续页面布局”报告选项：

现在我们有了新的报告，单击左侧的汉堡包按钮将展开控制面板。从这里，您可以将控件拖放到报表画布上，以将它们包含在报表中：

对于我们的报告，我们将在顶部有一个容器，其中包含徽标图像和标签。将容器控件从控制面板拖放到报表画布上；然后将图像和文本框控件拖放到报表画布上的容器控件中。

要将图像链接到图像控件，您可以从外部源（例如 URL 或数据库）提取图像，也可以从本地文件嵌入图像。我们的形象将是 ACME Inc. 徽标。

对于文本框，您可以根据需要自定义字体、大小和颜色。对于标题文本，我们将其设置为Monthly Orders 。

完成后，您的标题应如下所示：

在 Node.js 中定义数据访问

ActiveReportsJS Designer 通过两种类型的实体管理数据连接：数据源和数据集。

数据源用作与外部数据存储的连接，例如可嵌入报表中的 URI 或 JSON 文件或 JSON 文档。

数据集是一个中间元素，它从数据源获取数据并将其绑定到报表数据模型中的字段。您还可以定义计算字段，它使用表达式转换源数据。然后，报表控件就可以使用数据集字段。

我们的库存发票软件将通过位于 HTTP 服务的外部 API 访问数据，并以 JSON 格式返回结果。该报告将根据该服务的“实时”数据显示各种订单信息。

要定义对报告中客户数据的访问，请首先选择“数据源”选项卡，然后单击“数据源”部分中的“添加”按钮：

这将打开“新数据源”窗口：

此窗口命名数据源、设置数据提供程序并添加所需的任何其他 HTTP 标头或参数。

添加数据提供程序时，您可以选择远程 JSON 或通过本地文件将 JSON 嵌入到报告中。我们将从远程源加载此库存发票应用程序的数据。添加完所有内容后，单击“保存”按钮保存数据源。

注意：数据源是一个简单的连接配置；尚未提出任何请求。

现在我们已经创建了数据源，我们需要创建一个使用该源检索数据的数据集。要创建数据集，请单击数据源旁边出现的加号按钮：

这将打开“新数据集”窗口：

我们通常需要在这里设置两个属性： Uri/path和JSON Path 。 Uri/path 告诉 ActiveReportsJS 在到达 API 端点后在哪里查找 JSON 文件，而 Json Path 用于告诉我们的 Node.js 发票应用程序我们想要获取 JSON 的哪一部分。

对于 Uri/path，我们将使用/Customers返回有关客户的数据。在我们的例子中，我们想要获取所有条目，因此我们将传递$.*作为 JSON 路径。

最后，我们需要验证数据源，以便 ActiveReportsJS 可以确认它可以检索数据。如果您看到数据库字段数组填充了值，您就会知道您的数据源已经过验证：

我们的应用程序需要另一个数据源，我们将使用它来检索通过 node.js 发票应用程序下的订单的数据。您的第二个数据源应如下所示：

我们还需要两个数据集：一个基于 NWAPI 数据源，使用/Products作为 Uri/path，另一个基于 NWOData 源，使用/Orders作为 Uri/path。对于Orders数据集，还将 Json 路径设置为$.value[*] 。

设置后，数据面板应如下所示：

使用计算字段

有时，您需要将一个或多个源字段转换为要在报表中使用的新计算字段。 ActiveReportsJS提供了一种具有丰富内置函数的表达式语言来满足这种需求。

在此示例中，我们将 OrderDate 字段转换为“月/年”格式。您必须将自定义字段添加到自动绑定的数据库字段列表中才能实现此目的。

编辑订单数据集，然后展开计算字段部分；这是我们可以添加新的计算字段的地方。将字段命名为MonthYear，并将值设置为{DateTime.Parse(OrderDate).ToString("MM/yyyy")} ：

基于NWOData源创建一个名为OrderDetails的新数据集；将 Uri/path 设置为/OrderDetails并将 Json 路径设置为$.value[*] 。

请注意，OrderDetails 数据集不包含每项总价值的字段。您的报告中可能多次需要此值。因此，您必须在每次需要时计算该值或创建新的计算字段。后一种选择效率更高。

展开 OrderDetails 数据集的CalculatedFields部分，将字段命名为Subtotal，并将值设置为{Round(100 * (UnitPrice - UnitPrice * Discount) * Quantity) / 100} 。

添加图表控件

现在我们已经设置了多个数据源，是时候将它们合并到报告中了；为此，我们将添加一个图表。将图表控件从控制面板拖放到报表上将显示图表向导：

确保数据集设置为使用我们的OrderDetails集，然后单击“下一步”按钮。

现在我们可以设置数据和类别字段。对于“数据值”，添加一个新字段。将名称设置为{Subtotal}并将聚合设置为Sum 。然后，对于“数据类别”，将字段设置为{Lookup(OrderId, OrderId, MonthYear, “Orders”)} 。它应该看起来像这样：

单击“下一步”，然后单击“完成” 。在查看图表之前要做的最后一件事是对图表各个元素的属性进行一些最终更改。

要修改图表的元素，您只需确保查看的是属性窗口而不是数据窗口，然后单击图表的元素。

属性窗口将更新以显示当前所选元素的所有属性。定义图表属性如下：

完成后，您的报告应如下所示：

单击“预览”将向我们显示正在加载的数据的报告：

添加表格控件

除了图表之外，我们还希望允许用户在 Node.js 发票应用程序中查看更多数据。让我们创建按月订单量的表格视图。将表格控件从控制面板拖放到图表下方的报表中：

默认情况下，ActiveReportsJS 表创建为三列三行。顶行用作标题行，中间行是详细信息行并保存数据，底行是页脚行。

报表作者可以调整表格大小、添加或删除行和列、定义多个页眉和页脚等。

现在，选择表，导航到属性面板，然后定义属性，如下所示：

然后删除表格的页眉和页脚行，因为不需要这些行。这是通过右键单击要删除的行中的单元格，选择“行”选项，然后单击“删除行”来完成的：

现在，合并详细信息行的单元格。这是通过选择要合并的单元格，右键单击选定单元格之一，从菜单中选择单元格选项，然后单击合并单元格来完成的：

现在选择新合并的单元格，将其文本框名称设置为txtMonth ，并将其值设置为{MonthName(Month(OrderDate))}/{Year(OrderDate)} ：

最后，您必须定义表分组。这可以通过选择单元格并从弹出菜单中选择<详细信息组>来完成。

使用公式{Year(OrderDate)}设置组的第一级别，将第二级别设置为{Month(OrderDate)} ：

新表格在表格部分显示第一级数据：

现在，我们将开始添加更多级别的数据。在当前行下方创建一个新行，删除页眉和页脚行，合并详细信息行，然后将另一个表格控件拖放到新的大单元格中。

定义新表的属性如下：

现在选择新合并的单元格，将其文本框名称设置为txtOrderId ，并将其值设置为订单 ID： {OrderId} 。设置完成后，预览报告以查看结果：

请注意， tableOrders表位于报告中的第二层；它详细说明了特定月份内下的订单。

定义子表

现在我们按月显示订单，是时候为通过我们的库存发票应用程序发送的每个订单添加订单详细信息部分了。

在OrderId详细信息行下方添加一个新的详细信息行，合并单元格，然后在该详细信息行中放置另一个表。这次，不是删除页眉和页脚行，而是删除详细信息和页脚行，保留页眉行。

接下来，不要将所有三个单元格合并为一个，而是将中心单元格和右侧单元格合并为一个单元格，并将左侧单元格保留为其自己的单元格。

将左侧单元格公式定义为Total：对于合并单元格，使用属性面板将单元格对齐设置为Left并将其格式属性设置为货币，并将合并单元格公式设置为{SUM(Subtotal)} ：

在资源管理器中选择tableOrderTotal表，然后展开Filters属性。单击“添加项目”，然后添加包含以下字段的新过滤条件：

正如您所看到的，新的 tableOrderTotals 表基于 OrderDetails 数据集。通过按表Order 行的OrderId 过滤订单详细信息并对Subtotal 字段值求和即可获得总计值。

单击“预览”将显示更新后的表：

最后，我们将创建一个表示发票订单项目的表。

在 tableOrders 表中创建一个新的详细信息行，然后在新的详细信息行中创建一个名为tableOrderDetails的新表。配置表如下：

完成后，该表应如下所示：

单击“预览”将显示新表：

在继续之前，我们将做一些造型来改善表格的外观。最终版本如下：

添加向下钻取功能

现在，让我们向报表添加向下钻取功能，使我们能够将tableOrders和tableOrderDetails表保持折叠状态，直到用户展开它们为止。

选择 tableOrders 表，然后更改Hidden和Toggle Item属性，如下所示：

选择 tableOrderDetails 表，并使其也可折叠：

现在，我们可以通过单击 +/- 符号来展开和折叠细节级别：

接下来，让我们向 Node.js 发票应用程序的报告添加更多详细信息。

在tableOrderDetails表中的现有标题行上方添加四个新行。这四行的顶部和底部将用作缓冲区，中间两行将保存我们要显示的数据。

在添加的第二行和第三行中，保留每行最左侧的单元格，并合并每行的其余单元格。然后，填写各行，如下所示：

单击“预览”，您可以看到添加到发票中的客户姓名和订单日期：

向表中添加排序列

我们要添加到报告中的最后一件事是能够对订单详细信息的列进行排序。

选择每个标题单元格，然后使用以下公式填写“用户排序”部分下的“排序表达式”字段：

单击“预览”，您现在可以看到列标题旁边的排序图标；按数量对订单项目进行排序：

按总价对订单进行排序：

创建 Node.JS 发票应用程序

现在定义了报告，我们可以创建库存发票应用程序。该应用程序需要一个在桌面和移动设备上看起来都不错的响应式网页显示。 ActiveReportsJS 默认提供此功能。

示例应用程序将使用 Node.js（一个 JavaScript 运行时环境）在服务器端执行 Web 应用程序。

首先，创建一个名为InventoryInvoice 的新文件夹，然后在您首选的 IDE 中打开它。然后，在命令行中运行：

 npm init

这将引导您设置package.json文件，该文件将用于构建您的应用程序。文件生成后，运行以下两个命令：

 npm install express npm install @grapecity/activereports

这将安装 Express（Node.js 框架）和 ActiveReports（我们将用它来显示发票）。

现在我们已经安装了 Express，我们需要使用它。在InventoryInvoice文件夹中创建一个名为index.js的新文件。该文件将使用 Express 为我们的 Node.js 库存发票应用程序提供服务。

在index.js文件中，添加以下代码：

 const express = require('express'); //import Express.js module const app = express(); const path = require('path'); app.use(express.static(path.join(__dirname))); app.listen(3000, () => { console.log(`Example app listening on port 3000`) })

现在，是时候快速解释一下我们在这里所做的事情了：

• 前两行代码在我们的服务器中包含 Express，并为我们提供一个变量来引用 Express 方法和属性。

• 第三行创建一个变量，该变量指向文件夹的相对路径，第四行告诉 Express 我们要使用此路径作为应用程序的静态路径。

• 第六行到第八行使用 Express 来启动应用程序；在这里，我们告诉它在端口 3000 上运行，当它开始运行时，我们会向终端记录一条消息。

这就是最基本的 Express！现在我们有了一个可以启动库存发票软件的服务器，是时候创建一个页面来为用户提供服务了。

在InventoryInvoice文件夹中创建一个新文件，并将其命名为index.html 。创建完成后，插入以下代码：

 <html> <head> <meta charset="utf-8" /> <title>ActiveReportsJS Viewer</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-ui.css" /> <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" /> <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script> <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script> <style> #arjs-viewer { width: 100%; height: 100vh; } </style> </head> <body onload="load()"> <div id="arjs-viewer"></div> <script> function load() { const viewer = new ActiveReports.Viewer('#arjs-viewer'); viewer.open('MonthlyOrders.rdlx-json'); } </script> </body> </html>

这里有一些事情需要注意。首先，我们在 HTML 文件中包含四个文件； ar-js-ui.css 、 ar-js-viewer.css 、 ar-js-core.js和ar-js-viewer.js 。 CSS 文件是 ActiveReportsJS 的核心 CSS 文件，也是用于设置查看器样式的 CSS 文件。

JS文件是一样的；一个核心 JS 文件和一个用于查看器的 JS 文件。

其次，对于 HTML，我们仅使用一行来创建 ActiveReportsJS 查看器。我们所需要的只是一个带有 ID 的 div，我们可以使用它来将查看器与该 div 关联起来。

第三，在 JavaScript 中，页面加载后，我们将创建一个新的 ActiveReports.Viewer 控件，将其与 div 关联，然后告诉它打开我们的报表。

最后，我们添加了少量 CSS，以便查看器占据整个屏幕。

完成此操作后，您所需要做的就是将报告移至InventoryInvoice文件夹中，然后运行以下命令来启动 Node.js 库存发票应用程序：

 node index.js

导航到 localhost:3000，您应该可以看到并能够与您创建的报告进行交互：

ActiveReportsJS Viewer 组件也是响应式的；它可以在各种屏幕尺寸的各种设备上正确呈现。您可以使用 Web 浏览器中提供的开发人员工具快速模拟各种移动设备、屏幕尺寸和页面方向：

最后的注释

这样，我们就完成了！本文提供了使用 GrapeCity 的 ActiveReportsJS Designer 创建每月库存发票报告的实践方法。

我们讨论了如何聚合信息以创建按月份分组的销售图表，以及具有向下钻取功能的交互式表格报告，可按月份和订单 ID 合并销售额。

如果您想查看完整的申请表和报告，可以在此处找到。快乐编码！