在Odoo18中实现多选下拉框搜索功能

背景需求

最近在开发一个Odoo项目时，客户提出了一个特定的搜索需求：希望在列表页面中展示多个多选下拉框作为过滤条件。用户选中任意下拉选项时，列表需要实时查询并显示对应的结果。
这种设计相较于Odoo原生搜索更为直观，特别是当用户需要同时基于多个维度筛选数据时，操作更加便捷。

Odoo原生搜索的局限性

Odoo作为一款国际化的开源ERP系统，其搜索功能设计理念与国内用户的使用习惯存在一定差异：

• 搜索模式单一：默认采用"搜索框+预设过滤器"的模式
  
• 多条件过滤不够直观：需要点击过滤器图标，在弹出窗口中配置多个条件
  
• 用户体验差异：国外用户习惯文本搜索+条件组合，国内用户更习惯可视化的多选过滤
  

解决方案：自定义控件开发

面对这种需求差异，我们决定采用Odoo的自定义开发能力。Odoo提供了灵活的扩展机制，特别是基于QWeb模板引擎，我们可以通过以下方式实现自定义搜索控件：

• 自定义多选下拉框组件
  
• 集成到搜索面板
  
• 重写列表视图控制器
  
• 动态构建搜索条件
  

完整方案实现

1. 多选下拉框组件 (XML模板)

首先需要在XML文件中定义自定义下拉框控件视图(multi_select_widget.xml)：

1. <?xml version="1.0" encoding="UTF-8"?>
2. <templates xml:space="preserve">
3.     <t t-name="multi_select" owl="1">
4.         
5.             
6.                
7.                     <t t-esc="props.placeholder || 'Select options'"/>
8.                
9.                
10.                     
11.                
12.                  1"  >
13.                     已选择<t t-esc="state.selected.size"></t>个<t t-esc="props.fieldName"/>
14.                
15.             
16.             
17.             
18.                 <t t-foreach="props.options" t-as="option" t-key="option">
19.                      this.selectOption(option, ev)">
20.                         <t t-esc="option"/>
21.                     
22.                 </t>
23.             
24.             
25.         
26.     </t>
27. </templates>

复制代码

2. 多选下拉框组件逻辑 (JavaScript)

业务逻辑我们用js来实现(multi_select_widget.js)

1. import { Component, useState, useRef, onMounted, onWillUnmount } from "@odoo/owl";
3. export class MultiSelectField extends Component {
4.     static template = "multi_select";
5.     static props = {
6.         options: Array,
7.         placeholder: { type: String, optional: true },
8.         fieldName: String,
9.         onChange: Function,
10.     };
12.     setup() {
13.         this.dropdownRef = useRef("multi_select_dropdown");
14.         this.state = useState({
15.             isOpen: false,
16.             selected: new Set(),
17.         });
19.         this.clickOutsideHandler = null;
20.         this.keydownHandler = null;
22.         onMounted(() => {
23.             this.setupEventListeners();
24.         });
26.         onWillUnmount(() => {
27.             this.cleanupEventListeners();
28.         });
29.     }
31.     toggleDropdown() {
32.         this.state.isOpen = !this.state.isOpen;
33.     }
35.     selectOption = (option, ev) => {
36.         if (this.state.selected.has(option)) {
37.             this.state.selected.delete(option);
38.         } else {
39.             this.state.selected.add(option);
40.         }
41.         this.props.onChange(this.props.fieldName, [...this.state.selected]);
42.     }
44.     setupEventListeners() {
45.         this.clickOutsideHandler = (event) => {
46.             if (!this.dropdownRef || !this.dropdownRef.el) return;
48.             if (!this.dropdownRef.el.contains(event.target)) {
49.                 this.state.isOpen = false;
50.             }
51.         }
53.         this.keydownHandler = (event) => {
54.             if (event.key === 'Escape' && this.state.isOpen) {
55.                 event.preventDefault();
56.                 event.stopPropagation();
57.                 event.stopImmediatePropagation();
58.                 this.state.isOpen = false;
59.             }
60.         }
62.         document.addEventListener('mousedown', this.clickOutsideHandler, true);
63.         document.addEventListener('touchstart', this.clickOutsideHandler, true);
64.         document.addEventListener('keydown', this.keydownHandler, true);
65.     }
67.     cleanupEventListeners() {
68.         if (this.clickOutsideHandler) {
69.             document.removeEventListener('mousedown', this.clickOutsideHandler, true);
70.             document.removeEventListener('touchstart', this.clickOutsideHandler, true);
71.         }
73.         if (this.keydownHandler) {
74.             document.removeEventListener('keydown', this.keydownHandler, true);
75.         }
77.         this.clickOutsideHandler = null;
78.         this.keydownHandler = null;
79.     }
80. }

复制代码

3.自定义搜索面板 (XML模板)

同样定义一个xml(search_widget.xml)

1. <?xml version="1.0" encoding="UTF-8"?>
2. <templates xml:space="preserve">
3.     <t t-name="custom_search_panel" owl="1">
4.         
5.             
6.             <t t-if="state.loading">
7.                
8.                     <i ></i>
9.                     正在加载数据...
10.                
11.             </t>
13.             
14.             <t t-if="state.error">
15.                
16.                     <i ></i>
17.                     
18.                
19.             </t>
21.             
22.             <t t-if="!state.loading and !state.error">
23.                
24.                     
25.                     <MultiSelectField
26.                         fieldName="field_a"
27.                         options="state.dropdownData.field_a"
28.                         placeholder="'字段A筛选'"
29.                         onChange="(field, values) => handleSelection(field, values)"
30.                     />
31.                     
32.                     <MultiSelectField
33.                         fieldName="field_b"
34.                         options="state.dropdownData.field_b"
35.                         placeholder="'字段B筛选'"
36.                         onChange="(field, values) => handleSelection(field, values)"
37.                     />
38.                     
39.                     <MultiSelectField
40.                         fieldName="field_c"
41.                         options="state.dropdownData.field_c"
42.                         placeholder="'字段C筛选'"
43.                         onChange="(field, values) => handleSelection(field, values)"
44.                     />
45.                
46.             </t>
47.             
48.             
49.         
50.     </t>
51. </templates>

复制代码

4.搜索面板业务逻辑 (JavaScript)

search_widget.js

1. import { Component, useState, onWillStart } from "@odoo/owl";
2. import { registry } from "@web/core/registry";
3. import { useService } from "@web/core/utils/hooks";
4. import { MultiSelectField } from "./multi_select_widget";
6. export class CustomSearchPanel extends Component {
7.     static template = "custom_search_panel";
8.     static components = { MultiSelectField };
10.     setup() {
11.         // 获取服务
12.         this.ormService = useService("orm");
13.         
14.         // 初始化响应式状态
15.         this.state = useState({
16.             dropdownData: {
17.                 field_a: [],
18.                 field_b: [],
19.                 field_c: [],
20.             },
21.             selectedValues: {
22.                 field_a: [],
23.                 field_b: [],
24.                 field_c: [],
25.             },
26.             loading: false,
27.             error: null,
28.         });
30.         // 组件挂载前加载数据
31.         onWillStart(async () => {
32.             await this.loadDropdownData();
33.         });
34.     }
36.     // 加载下拉框数据
37.     loadDropdownData = async () => {
38.         this.state.loading = true;
39.         this.state.error = null;
40.         
41.         try {
42.             // 调用后端方法获取下拉框数据
43.             const dropdownData = await this.ormService.call(
44.                 "your.model.name",  // 替换为实际模型名
45.                 "get_filter_dropdown_data",  // 后端方法名
46.                 [],
47.                 {}
48.             );
49.             
50.             this.state.dropdownData = dropdownData;
51.         } catch (error) {
52.             console.error("加载下拉框数据失败:", error);
53.             this.state.error = "加载筛选数据失败，请稍后重试";
54.         } finally {
55.             this.state.loading = false;
56.         }
57.     }
59.     // 处理选择变化
60.     handleSelection = async (fieldName, selectedValues) => {
61.         // 更新选中值
62.         this.state.selectedValues[fieldName] = selectedValues;
63.         
64.         // 生成搜索条件
65.         const domain = this.generateSearchDomain();
66.         
67.         // 触发搜索更新
68.         this.triggerSearchUpdate(domain);
69.     }
71.     // 生成搜索条件
72.     generateSearchDomain() {
73.         const domain = [];
74.         
75.         Object.entries(this.state.selectedValues).forEach(([field, values]) => {
76.             if (values && values.length > 0) {
77.                 // 使用 'in' 操作符支持多选
78.                 domain.push([field, 'in', values]);
79.             }
80.         });
81.         
82.         return domain;
83.     }
85.     // 触发搜索更新
86.     triggerSearchUpdate(domain) {
87.         // 更新搜索模型
88.         this.env.searchModel.updateDomain(domain);
89.         
90.         // 发送自定义事件通知列表刷新
91.         this.env.bus.trigger('custom_search:updated', {
92.             domain,
93.             timestamp: Date.now()
94.         });
95.     }
96. }
98. // 注册组件
99. registry.category("view_components").add("custom_search_panel", CustomSearchPanel);

复制代码

5.自定义列表控制器 (JavaScript)

1. import { registry } from "@web/core/registry";
2. import { listView } from "@web/views/list/list_view";
3. import { ListController } from "@web/views/list/list_controller";
4. import { CustomSearchPanel } from "./search_widget";
5. import { useBus } from "@web/core/utils/hooks";
7. // 扩展原生列表控制器
8. export class CustomListController extends ListController {
9.     static components = {
10.         ...ListController.components,
11.         SearchPanel: CustomSearchPanel,  // 替换搜索组件
12.     };
13.    
14.     static template = "web.ListView";
16.     setup() {
17.         super.setup();
18.         
19.         // 监听自定义搜索事件
20.         useBus(this.env.bus, "custom_search:updated", (ev) => {
21.             this.handleCustomSearch(ev.detail.domain);
22.         });
23.     }
25.     // 处理自定义搜索
26.     async handleCustomSearch(domain) {
27.         try {
28.             // 显示加载状态
29.             this.model.isLoading = true;
30.             this.render();
31.             
32.             // 加载数据
33.             await this.model.load({ domain });
34.             
35.             // 更新分页信息
36.             if (this.model.data) {
37.                 this.model.pager.limit = this.model.data.length;
38.             }
39.         } catch (error) {
40.             console.error("搜索数据失败:", error);
41.         } finally {
42.             this.model.isLoading = false;
43.             this.render();
44.         }
45.     }
46. }
48. // 注册自定义列表视图
49. registry.category("views").add("custom_multi_select_list", {
50.     ...listView,
51.     Controller: CustomListController,
52.     display: {
53.         controlPanel: {
54.         'bottom-left': false,
55.         'bottom-right': false,
56.         },
57.     },
58. });

复制代码

6.后端数据接口 (Python)

1. # models/your_model.py
2. from odoo import models, fields, api
4. class YourModel(models.Model):
5.     _name = 'your.model.name'
6.     _description = '示例模型'
7.    
8.     # 定义字段
9.     field_a = fields.Selection([
10.         ('option1', '选项1'),
11.         ('option2', '选项2'),
12.         ('option3', '选项3'),
13.     ], string='字段A')
14.    
15.     field_b = fields.Char(string='字段B')
16.     field_c = fields.Many2one('related.model', string='字段C')
17.    
18.     # 获取下拉框数据的方法
19.     @api.model
20.     def get_filter_dropdown_data(self):
21.         """返回所有下拉框的选项数据"""
22.         return {
23.             'field_a': self._get_field_a_options(),
24.             'field_b': self._get_field_b_options(),
25.             'field_c': self._get_field_c_options(),
26.         }
27.    
28.     def _get_field_a_options(self):
29.         """获取字段A的选项"""
30.         return [
31.             display_value
32.             for value, display_value in self._fields['field_a'].selection
33.         ]
34.    
35.     def _get_field_b_options(self):
36.         """获取字段B的去重值"""
37.         records = self.search_read(
38.             [('field_b', '!=', False)],
39.             ['field_b'],
40.             limit=100
41.         )
42.         return sorted(list(set([
43.             record['field_b']
44.             for record in records
45.             if record['field_b']
46.         ])))
47.    
48.     def _get_field_c_options(self):
49.         """获取字段C的关联选项"""
50.         related_records = self.env['related.model'].search_read(
51.             [],
52.             ['name'],
53.             limit=50
54.         )
55.         return [record['name'] for record in related_records]

复制代码

7. 视图配置 (XML)

1. <?xml version="1.0" encoding="UTF-8"?>
2. <odoo>
3.   
4.    
5.     <record id="view_custom_list" model="ir.ui.view">
6.         <field name="name">your.model.custom.list</field>
7.         <field name="model">your.model.name</field>
8.         <field name="arch" type="xml">
9.             <list js_>
10.                 <field name="name" string="名称"/>
11.                 <field name="field_a" string="字段A"/>
12.                 <field name="field_b" string="字段B"/>
13.                 <field name="field_c" string="字段C"/>
14.                
15.             </list>
16.         </field>
17.     </record>
18. </odoo>

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！