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

问：

我想更改瞬态模型中 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 中，也会运行

有人可以帮我吗？

javascript 进度条 odoo-16

/** @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>

示例2：

根据通过字段选项传递的颜色字段和字段名称设置进度条背景颜色：

progress_bar_field.js

export class CustomProgressBarField extends ProgressBarField {}

CustomProgressBarField.template = 'chn_event_availability_manager.custom_progressbar_template';

CustomProgressBarField.props = {
    ...ProgressBarField.props,
    colorField: { type: String, optional: true },  // Hinzufügen der colorField-Option
};

CustomProgressBarField.extractProps = ({ attrs }) => {
    const parentProps = ProgressBarField.extractProps({ attrs });  // Extrahieren Sie die Eigenschaften von der übergeordneten Methode
    return {
        ...parentProps,  // Fügen Sie die extrahierten Eigenschaften von der übergeordneten Methode hinzu
        colorField: attrs.options.color_field,  // Extrahieren Sie die neue Eigenschaft 'colorField'
    };
};
registry.category("fields").add("custom_progressbar", CustomProgressBarField);

custom_progressbar_template.xml

<t t-name="chn_event_availability_manager.custom_progressbar_template" t-inherit="web.ProgressBarField" t-inherit-mode="primary" owl="1">
    <xpath expr="//div[hasclass('o_progress')]/div" position="attributes">
        <attribute name="t-att-style">'width: min(' + 100 * state.currentValue / state.maxValue + '%, 100%)' + ';background-color: ' + (props.record.data[props.colorField] or '#007bff') + ' !important'</attribute>
    </xpath>
</t>

更新：

若要使用通过字段选项传递的颜色，请使用而不是在样式表达式中props.colorFieldprops.record.data[props.colorField]

/** @odoo-module **/

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

console.log("Run CustomProgressBarField");

export class CustomProgressBarField extends ProgressBarField {
    template = 'chn_event_availability_manager.custom_progressbar_template';

    constructor() {
           super(...arguments);
           this.color = this.getColorValue(this.props);
           console.log("Run constructor");
           console.log('Color:', this.color);
    }

   renderElement() {
        super.renderElement(...arguments);
        this.el.querySelector('.o_progressbar .o_progress .o_progress_bar').style.backgroundColor = this.color;
        const colorFieldInput = this.el.querySelector('.o_field_widget[name="color_field"]');
        if (colorFieldInput) {
            colorFieldInput.addEventListener('change', this._onColorFieldChange.bind(this));
        }
    }

    _onColorFieldChange(event) {
        this.color = event.target.value;
        this.renderElement();
    }

    getColorValue(p) {
       return p.colorField || '#007bff';  // Standardfarbe ist Blau
    }
}

CustomProgressBarField.props = {
    ...ProgressBarField.props,
    colorField: { type: String, optional: true },  // Hinzufügen der colorField-Option
};

CustomProgressBarField.extractProps = ({ attrs }) => {
    const parentProps = ProgressBarField.extractProps({ attrs });  // Extrahieren Sie die Eigenschaften von der übergeordneten Methode
    return {
        ...parentProps,  // Fügen Sie die extrahierten Eigenschaften von der übergeordneten Methode hinzu
        colorField: attrs.options.color_field,  // Extrahieren Sie die neue Eigenschaft 'colorField'
    };
};

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

现在我试图解决的问题是函数：

RenderElement（）没有执行，我不知道为什么，所以颜色没有转移到进度条上。

但是我在constructor（）中获得了正确的值。

模板的：

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="custom_progressbar_template" inherit_id="web.ProgressBarField" name="Custom Progress Bar">
        <xpath expr="//div[@class='o_progress']" position="attributes">
            <attribute name="t-att-style">`'background-color: ' + (record.color_field ? record.color_field : '#007bff')`</attribute>
        </xpath>
    </template>
</odoo>

和 CSS 来更改颜色：

.custom_progressbar .o_progressbar .o_progress .bg-primary {
    background-color: #007bff !important; /* Default color is blue */
    height: 100% !important;
}

js有什么好的解释吗？在Odoo 16中，这并不容易理解框架。

谢谢

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

Changing the color of a progress bar dynamically in Odoo 16

评论

评论

评论