如何在Odoo 18中更改进度条的颜色

admin

如何在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元素可以显著提升用户体验并提高工作效率。




相关标签 TAG :  odoo  进度条  颜色