第三章:自定义看板视图¶
警告
强烈建议在开始本章之前完成 第一章:字段和视图。第3章介绍的概念,包括视图和示例,对于理解本章所涵盖的内容至关重要。
我们已经了解了Odoo Web框架提供的众多功能。接下来,我们将自定义看板视图。这是一个更复杂的项目,将展示框架的一些非平凡方面。目标是练习组合视图,协调UI的各个方面,并以可维护的方式完成。
Bafien有史以来最好的想法:看板视图和列表视图的混合将完美地满足您的需求!简而言之,他想在任务的看板视图左侧提供客户列表。当您在左侧侧边栏上单击客户时,右侧的看板视图将被过滤,仅显示与该客户相关的订单。
目标
每个章节的练习解决方案都托管在 官方Odoo教程存储库。
1. 创建一个新的看板视图¶
由于我们正在自定义看板视图,因此让我们从扩展它并在T恤订单的看板视图中使用我们的扩展开始。
Exercise
通过扩展看板控制器和创建新的视图对象来扩展看板视图。
在视图注册表中注册为
awesome_tshirt.customer_kanban
。更新看板视图以使用扩展视图。可以使用
js_class
属性完成此操作。
2. 创建一个 CustomerList 组件¶
我们需要展示客户列表,因此我们可以创建该组件。
Exercise
创建一个
CustomerList
组件,目前只显示一个带有一些文本的div
。它应该有一个
selectCustomer
属性。创建一个新的模板,扩展(XPath)看板控制器模板,将
CustomerList
添加到看板渲染器旁边。现在先给它一个空函数selectCustomer
。子类化看板控制器,在其子组件中添加
CustomerList
。确保您在看板视图中看到了您的组件。
3. 加载并显示数据¶
Exercise
修改
CustomerList
组件,在onWillStart
中获取所有客户的列表。使用
t-foreach
在模板中显示列表。每当选择了一个客户,调用
selectCustomer
函数属性。
4. 更新主看板视图¶
Exercise
在看板控制器中实现
selectCustomer
以添加正确的域。修改模板,将真实的功能赋给
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
在
CustomerList
组件中添加一个类型为复选框的输入框,并在旁边加上标签“活跃客户”。更改复选框的值应该过滤出具有有效订单的客户列表。
6. 在客户列表中添加搜索栏¶
Exercise
在客户列表上方添加一个输入框,允许用户输入字符串并根据客户姓名过滤显示的客户。
小技巧
您可以使用 fuzzyLookup
函数执行过滤。
7. 重构代码以使用 t-model
¶
为了解决前两个练习,你可能在输入框上使用了一个事件监听器。让我们看看如何以更加声明性的方式来完成,使用 t-model 指令。
Exercise
确保你有一个反应式对象来表示过滤器是否激活(类似于
this.state = useState({ displayActiveCustomers: false, searchString: ''})
)。修改代码以添加一个名为
displayedCustomers
的 getter,该 getter 返回当前活动的客户列表。修改模板以使用
t-model
。
8. 分页显示客户!¶
Exercise
在
CustomerList
中添加一个 pager,并且只加载/渲染前20个客户。每当分页器改变时,客户列表应相应更新。
这实际上非常困难,特别是与前面练习中的过滤相结合。需要考虑许多边缘情况。