第三章：自定义看板视图

警告

强烈建议在开始本章之前完成 第一章：字段和视图。第3章介绍的概念，包括视图和示例，对于理解本章所涵盖的内容至关重要。

我们已经了解了Odoo Web框架提供的众多功能。接下来，我们将自定义看板视图。这是一个更复杂的项目，将展示框架的一些非平凡方面。目标是练习组合视图，协调UI的各个方面，并以可维护的方式完成。

Bafien有史以来最好的想法：看板视图和列表视图的混合将完美地满足您的需求！简而言之，他想在任务的看板视图左侧提供客户列表。当您在左侧侧边栏上单击客户时，右侧的看板视图将被过滤，仅显示与该客户相关的订单。

目标

Solutions

每个章节的练习解决方案都托管在 官方Odoo教程存储库。

1. 创建一个新的看板视图

由于我们正在自定义看板视图，因此让我们从扩展它并在T恤订单的看板视图中使用我们的扩展开始。

Exercise

1. 通过扩展看板控制器和创建新的视图对象来扩展看板视图。

2. 在视图注册表中注册为 awesome_tshirt.customer_kanban。

3. 更新看板视图以使用扩展视图。可以使用 js_class 属性完成此操作。

2. 创建一个 CustomerList 组件

我们需要展示客户列表，因此我们可以创建该组件。

Exercise

1. 创建一个 CustomerList 组件，目前只显示一个带有一些文本的 div 。

2. 它应该有一个 selectCustomer 属性。

3. 创建一个新的模板，扩展（XPath）看板控制器模板，将 CustomerList 添加到看板渲染器旁边。现在先给它一个空函数 selectCustomer 。

4. 子类化看板控制器，在其子组件中添加 CustomerList 。

5. 确保您在看板视图中看到了您的组件。

3. 加载并显示数据

Exercise

1. 修改 CustomerList 组件，在 onWillStart 中获取所有客户的列表。

2. 使用 t-foreach 在模板中显示列表。

3. 每当选择了一个客户，调用 selectCustomer 函数属性。

4. 更新主看板视图

Exercise

1. 在看板控制器中实现 selectCustomer 以添加正确的域。

2. 修改模板，将真实的功能赋给 CustomerList 的 selectCustomer 属性。

由于与搜索视图进行交互并不容易，因此这里提供了一个快速的代码片段以帮助您：

selectCustomer(customer_id, customer_name) {
   this.env.searchModel.setDomainParts({
      customer: {
            domain: [["customer_id", "=", customer_id]],
            facetLabel: customer_name,
      },
   });
}

5. 仅显示有有效订单的客户

在 res.partner 上有一个 has_active_order 字段。让我们允许用户根据有活动订单的客户来过滤结果。

Exercise

1. 在 CustomerList 组件中添加一个类型为复选框的输入框，并在旁边加上标签“活跃客户”。

2. 更改复选框的值应该过滤出具有有效订单的客户列表。

6. 在客户列表中添加搜索栏

Exercise

在客户列表上方添加一个输入框，允许用户输入字符串并根据客户姓名过滤显示的客户。

小技巧

您可以使用 fuzzyLookup 函数执行过滤。

另请参阅

• Code: The fuzzylookup function

• 示例：使用 fuzzyLookup

7. 重构代码以使用 t-model

为了解决前两个练习，你可能在输入框上使用了一个事件监听器。让我们看看如何以更加声明性的方式来完成，使用 t-model 指令。

Exercise

1. 确保你有一个反应式对象来表示过滤器是否激活（类似于 this.state = useState({ displayActiveCustomers: false, searchString: ''})）。

2. 修改代码以添加一个名为 displayedCustomers 的 getter，该 getter 返回当前活动的客户列表。

3. 修改模板以使用 t-model。

8. 分页显示客户！

Exercise

1. 在 CustomerList 中添加一个 pager，并且只加载/渲染前20个客户。

2. 每当分页器改变时，客户列表应相应更新。

这实际上非常困难，特别是与前面练习中的过滤相结合。需要考虑许多边缘情况。