【odoo17】【odoo前端开发】在报表上方增加搜索视图

最新推荐文章于 2025-07-25 17:05:31 发布

原创

最新推荐文章于 2025-07-25 17:05:31 发布 · 746 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#odoo #owl #前端

在报表上方增加搜索视图

先看效果

在这里插入图片描述

1.场景描述

如果不在报表的上方增加搜索视图，通常的做法是将搜索条件用一个TransientModel来完成，如下图，这种方式也是也是可行的，不过想要改变筛选条件时，要重新点开筛选框，比较麻烦。
在这里插入图片描述

2.实现过程

2.1.view视图

<record id="action_asset_liabilities_report" model="ir.actions.client">
    <field name="name">资产负债表</field>
    <field name="res_model">asset.liabilities.report</field>
    <field name="tag">asset_liabilities_report</field>
</record>

<menuitem sequence="40" name='资产负债表'
	   id='menu_account_financial_report_tree'
	   parent="jcerp_account.menu_account_report_config"
	   action='action_account_financial_report_tree'/>

2.2.asset_liabilities_report的前端逻辑

在这里插入图片描述
这里的搜索逻辑与odoo原生的搜索逻辑类似，可以参考odoo源代码：@web/search/search_bar/search_bar。

2.3.report_search_bar设计

两个方面，
1、从report中传入搜索字段
2、是onClickSearch，最后点击搜索时，根据筛选条件获取报表数据。

export class ReportSearchBar extends Component {
   
   
}
ReportSearchBar.template = "jcerp_control_panel.ReportSearchBar";
ReportSearchBar.components = {
   
   
    DateBetweenValue,
    SearchAutoComplete,
    Dropdown,
    DropdownItem
}
ReportSearchBar.props = {
   
   
    items: {
   
    type: Object },
    onClickSearch: Function,
};
ReportSearchBar.defaultProps = {
   
   
    autofocus: true,
};

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="jcerp_control_panel.ReportSearchBar.Input">
        <div style="align-items: flex-start;display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 10px;">
            <t t-foreach="items" t-as="item" t-key="item.id">
                <div class="filter-item px-3 fs-5">
                    <label class="filter-item-label" t-att-for="item.description"><t t-esc="item.description"/></label>
                    <t t-if="item.fieldType === 'date' or item.fieldType === 'datetime'">
                        <div class="filter-no-border-input">
                            <DateBetweenValue onFromToChanged="(value) => this.onDateInput(item, value)"/>
                        </div>
                    </t>
                    <t t-elif="['many2one', 'selection', 'boolean', 'tags'].includes(item.fieldType)">
                        <SearchAutoComplete t-props="getAutoCompleteProps(item)"/>
                    </t>
                    <t t-else="">
                        <input type="text"
                            role="searchbox"
                            class="filter-border-input"
                            t-att-id="item.id"
                            t-on-keydown="onSearchKeydown"
                            t-on-input="onSearchInput"
                        />
                    </t>
                </div>