如何在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 文件。