通达科技 - 宜兴电脑维护及IT服务外包服务商

本教程的第一部分向您介绍了大部分Owl的概念。现在是时候全面了解Odoo JavaScript框架了，因为它是Web客户端所使用的。

对于本章，我们将从 awesome_tshirt 插件提供的空仪表板开始。我们将逐步添加功能，使用Odoo JavaScript框架。

 目标

1. 新布局

Odoo 网页客户端中的大多数屏幕使用了一个常见的布局：顶部的控制面板，带有一些按钮，以及下方的主要内容区域。这是通过使用 Layout 组件，该组件位于 @web/search/layout 中来实现的。

2. 添加一些快速导航按钮

让我们现在使用动作服务来方便地访问Odoo中的常见视图。

Services 是 Odoo JavaScript 框架定义的一个概念；它是一个持久的代码片段，可以导出状态和/或函数。每个服务可以依赖其他服务，组件可以使用 useService() 钩子导入服务。

import { useService } from "@web/core/utils/hooks";
...
setup() {
    this.action = useService("action");
}
openSettings() {
    this.action.doAction("base_setup.action_general_configuration");
}
...

3. 调用服务器，添加一些统计信息

让我们通过添加一些卡片（参见 Card 组件 在上一章中创建的) 来改进仪表盘，其中包含一些统计信息。有一个路由 /awesome_tshirt/statistics 执行一些计算并返回一个包含一些有用信息的对象。

每当我们需要调用特定的控制器时，我们需要使用 rpc 服务。它只导出一个执行请求的函数： rpc(route, params, settings)

这里是有关各种参数的简短说明：

• route 是目标路由，以字符串形式表示。例如 /myroute/。

• params is an object that contains all data that will be given to the controller. (optional)

• settings are for advanced controls on the request. Make it silent, or using a specific xhr instance. (optional)

setup() {
    this.rpc = useService("rpc");
    onWillStart(async () => {
        const result = await this.rpc("/my/controller", {a: 1, b: 2});
        // ...
    });
}

4. 缓存网络调用，创建服务

如果您打开浏览器的开发工具的 Network 选项卡，您会发现每次显示客户端操作时都会调用 /awesome_tshirt/statistics。这是因为每次挂载 Dashboard 组件时都会调用 onWillStart 钩子。但在这种情况下，我们更希望只在第一次调用时执行，因此我们实际上需要在 Dashboard 组件之外维护一些状态。这是一个很好的服务使用案例！

import { registry } from "@web/core/registry";
const myService = {
    dependencies: ["notification"],
    start(env, { notification }) {
        let counter = 1;
        setInterval(() => {
            notification.add(`Tick Tock ${counter++}`);
        }, 5000);
    },
};
registry.category("services").add("myService", myService);

5. 显示饼图

每个人都喜欢图表（！），所以让我们在我们的仪表板中添加一个饼图。它将显示每个尺码（S/M/L/XL/XXL）销售的T恤比例。

对于这个练习，我们将使用 Chart.js。它是图表视图使用的图表库。然而，默认情况下它不会被加载，所以我们需要将它添加到我们的资源包中，或者进行懒加载。懒加载通常更好，因为我们的用户如果不需要它，就不必每次都加载 chartjs 代码。

6. 更进一步

以下是一些小的改进建议，如果您有时间可以尝试一下：

 Exercise

1. 确保你的应用程序可以通过 env._t 进行 翻译。

2. 点击饼图的某个部分应该打开一个列表视图，其中包含所有具有相应大小的订单。

3. 添加一个 SCSS 文件，尝试更改仪表板操作的背景颜色。