在 Odoo 16 中动态更改进度条的颜色

Question

我想更改瞬态模型中 one2many 行中进度条的颜色。 我的想法是从进度条小部件创建一个自定义小部件，然后添加一个获取颜色值的方法，并且脚本更改颜色。 颜色值将存储在在线中不可见的计算字段中。

所以我的第一次尝试是创建自定义小部件，但这不起作用。

odoo.define('your_module_name.custom_progressbar', function (require) {
"use strict";

var field_registry = require('web.field_registry');
var FieldProgressBar = require('web.basic_fields').FieldProgressBar;

var CustomProgressBar = FieldProgressBar.extend({
    template: FieldProgressBar.prototype.template,
    // Your custom methods and properties here
});

field_registry.add('custom_progressbar', CustomProgressBar);

return CustomProgressBar;

});

我不太擅长 Java 编码，在这种情况下网络也没有帮助。 问题是我在浏览器开发工具中收到一条消息：

web.assets_backend.min.js:2970 Missing widget: CustomProgressBar for field of type integer

此时，我还没有尝试使用颜色制作零件，直到原始小部件显示在我的视图中。

并且小部件未显示。

是的，.js 位于 manifast 中并且也将运行

有人可以帮我吗？

Answer 1

尝试继承进度条字段

示例：

/** @odoo-module **/

import { registry } from "@web/core/registry";
import { ProgressBarField } from "@web/views/fields/progress_bar/progress_bar_field";

export class CustomProgressBarField extends ProgressBarField {
    
}

registry.category("fields").add("custom_progressbar", CustomProgressBarField);

您可以使用自定义模板，如下所示：

CustomProgressBarField.template = "web.CustomProgressBarField";

要根据计算字段更改字段颜色，您可以使用

t-attf-class

属性：

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="web.CustomProgressBarField" t-inherit="web.ProgressBarField" t-inherit-mode="primary" owl="1">
        <xpath expr="//div[hasclass('o_progress')]/div" position="attributes">
            <attribute name="t-attf-class">{{ props.record.data.color_field < 5 ? 'bg-danger' : 'bg-primary' }} h-100</attribute>
        </xpath>
    </t>

</templates>