如何在Odoo 18中更改进度条的颜色
在Odoo 18中,对用户界面(UI)元素进行定制可以提供更清晰的视觉反馈,并显著提升用户体验。进度条是一项值得注意的功能,它用于指示各种流程的状态。通过根据完成度调整进度条的颜色,用户可以一目了然地了解任务进度。本指南将引导您完成在Odoo 18中更改进度条颜色的步骤。
步骤1:更新XML文件
首先,确保在相应的表单视图中包含进度条。在本示例中,我们将通过创建或更新student_data.xml文件,在student.data表单视图中添加进度条。
以下是包含进度条的XML代码:
<?xml version="1.0" encoding="utf-8"?> <odoo> <data> <record id="view_student_form" model="ir.ui.view"> <field name="model">student.data</field> <field name="name">view.student.form</field> <field name="inherit_id" ref="test_model.view_student_data_form"/> <field name="arch" type="xml"> <xpath expr="//field[@name='address']" position="after"> <field name="progress" widget="progressbar"/> </xpath> </field> </record> </data> </odoo>
在此XML文件中,继承了基础合作伙伴表单视图,并在address字段后添加了一个进度条字段,确保进度条在合作伙伴表单中可见。
第二步:扩展进度条的 JavaScript 代码
接下来,通过集成根据完成百分比更改颜色的自定义逻辑,增强当前的进度条组件。这需要创建或修改一个 JavaScript 文件progress_bar.js。
以下是 JavaScript 代码:
/** @odoo-module **/ import {ProgressBarField} from "@web/views/fields/progress_bar/progress_bar_field"; import {patch} from "@web/core/utils/patch"; patch(ProgressBarField.prototype, { setup() { super.setup(...arguments); // 如有需要,可进行额外设置 }, get progressBarColorClass() { // 进度条颜色类别的自定义逻辑 const widthComplete = this.currentValue; if (widthComplete > 0 && widthComplete <= 40) { return "o_progress_red"; } else if (widthComplete > 40 && widthComplete <= 70) { return "o_progress_yellow"; } else if (widthComplete > 70 && widthComplete <= 90) { return "o_progress_light_green"; } else if (widthComplete > 90 && widthComplete <= 100) { return "o_progress_green"; } return "bg-primary"; } });
这个 JavaScript 文件使用patch工具来增强ProgressBarField类。progressBarColorClass方法通过评估当前进度值,并根据进度条的完成程度分配不同的类名,来选择合适的 CSS 类。
第三步:定义自定义 CSS 类
为了在视觉上区分进度条的颜色,需要定义自定义 CSS 类。进度条将根据progressBarColorClass方法返回的值,使用该方法确定的类进行样式设置。
使用以下内容创建或更新progress_bar.css文件:
.o_progress_red { background-color: red !important; } .o_progress_yellow { background-color: yellow !important; } .o_progress_light_green { background-color: lightgreen !important; } .o_progress_green { background-color: green !important; }
这些 CSS 类指定了进度条在不同完成百分比范围内的背景颜色。!important指令确保这些样式会覆盖任何默认样式。
第四步:加载 CSS 和 JS 文件
为确保自定义的 CSS 和 JS 文件在 Odoo 后端加载,需要更新模块的__manifest__.py文件,以包含对自定义资源的引用。
以下是更新__manifest__.py文件的示例:
{ 'name': 'Your Module Name', 'version': '18.0.1.0.0', 'category': 'Category', 'summary': 'Summary', 'description': 'Description', 'depends': ['base'], 'data': [ 'views/student_data.xml', ], 'assets': { 'web.assets_backend': [ 'your_module_name/static/src/js/progress_bar.js', 'your_module_name/static/src/css/progress_bar.css', ], }, 'installable': True, 'application': False, }
在此样例中,__manifest__.py文件的代码如下:
{ 'name': 'Test mdoel', 'version': '18.0.1.0.0', 'category': 'Category', 'summary': 'Summary', 'description': 'test样例', 'depends': ['base'], 'data': [ 'views/student_data.xml', ], 'assets': { 'web.assets_backend': [ 'test_model/static/src/css/progress_bar.css', ], }, 'test_model/static/src/js/progress_bar.js', 'installable': True, 'application': False, }
这个清单文件的data部分引用了 XML 文件,而assets部分确保在初始化 Odoo 后端时加载 JavaScript 和 CSS 文件。
JavaScript逻辑的详细说明
此自定义的关键在于JavaScript逻辑,特别是progressBarColorClass方法。
该方法通过评估进度条的currentValue属性来确定正确的CSS类,该属性表示其完成百分比。以下是逻辑的概述:
- 如果currentValue大于0但小于或等于40,则分配CSS类o_progress_red,将进度条变为红色。
- 如果currentValue大于40且不超过70,则应用CSS类o_progress_yellow,将进度条变为黄色。
- 如果currentValue大于70但不超过90,则分配CSS类o_progress_light_green,将进度条变为浅绿色。
- 如果currentValue大于90且不超过100,则应用CSS类o_progress_green,将进度条变为绿色。
- 如果currentValue不符合上述任何范围,则默认使用bg-primary类,应用标准的Bootstrap主色。
一旦定义了此逻辑和样式,Odoo在渲染进度条时将自动应用这些自定义。当用户与表单交互且进度值发生变化时,进度条将自动调整颜色以反映当前的完成状态。
总结
通过执行这些步骤,您可以根据完成度调整Odoo 18中进度条的颜色,从而增强用户界面的清晰度和视觉吸引力。这种自定义使用户能够轻松了解不同任务和流程的状态。改进进度条等UI元素可以显著提升用户体验并提高工作效率。