在需求中我们有时候需要在form中放入一个带搜索的tree，以前我们通常会选择用vue写
现在在odoo12的主题中集成了一个子列表的组件，sub_list，可以将tree视图中展示的tree原封不动地嵌入到form中，效果如下：
实现代码如下：
首先是这个tree的xml
xxxxxxxxxx18
1
<record id="user_borrow_wechat_user_tree" model="ir.ui.view">2
<field name="name">人员管理列表</field>3
<field name="model">funenc.wechat.user</field>4
<field name="arch" type="xml">5
<tree class="noOpen" import="false" edit="1" create="1" delete="1" js_class="user_borrow_user_tree_js"6
search_ex_template="user_search_template">7
<field name="name"/>8
<field name="sex"/>9
<field name="level1_dep"/>10
<field name="level2_dep"/>11
<field name="level_id"/>12
<field name="major_ids" widget="many2many_tags"/>13
<field name="card_id"/>14
<field name="mobile" string="联系电话"/>15
<widget name="wechat_user_tree_buttons" string="操作"/>16
</tree>17
</field>18
</record>已复制
接着是form的xml部分
xxxxxxxxxx67
1
<record id="user_borrow_wechat_user_form" model="ir.ui.view">2
<field name="name">人员详情</field>3
<field name="model">funenc.wechat.user</field>4
<field name="arch" type="xml">5
<form import="false" edit="1" create="0" delete="0">6
<div class="container-fluid">7
<div class="row">8
<div class="col-auto">9
<field name="avatar" widget="avatar"/>10
</div>11
<div class="col-10">12
<field name="name" style="font-size: 26px"/>13
<div class="layui-row label_left">14
<div>15
<label for="sex" string="性别"/>16
</div>17
<div class="layui-col-sm1">18
<field name="sex"/>19
</div>20
21
<div>22
<label for="age" string="年龄"/>23
</div>24
<div class="layui-col-sm1">25
<field name="age"/>26
</div>27
</div>28
29
<div class="layui-row label_left">30
<div attrs="{'invisible': ['|', ('mobile', '=', False), ('mobile', '=', '')]}">31
<label for="mobile" string="联系电话"/>32
</div>33
<div class="layui-col-sm2">34
<field name="mobile"/>35
</div>36
37
<div>38
<label for="card_id" string="身份证号"/>39
</div>40
<div class="layui-col-sm2">41
<field name="card_id"/>42
</div>43
</div>44
</div>45
</div>46
47
<hr style="border-color: #E0E0E0;"/>48
<separator string="岗位信息"/>49
<group col="4">50
<field name="level1_dep"/>51
<field name="level2_dep"/>52
<field name="major_ids" widget="many2many_tags"/>53
<field name="level_id"/>54
</group>55
<notebook>56
<page string="自身项目">57
<!--这里就是嵌入的sub_list-->58
<widget name="wechat_user_self_project_widget"/>59
</page>60
<page string="支援项目">61
62
</page>63
</notebook>64
</div>65
</form>66
</field>67
</record>已复制
此处只做展示用，故用了一个widget来展示
下面是widget的js代码
xxxxxxxxxx32
1
/**2
* Created by artorias on 2019/5/7.3
*/4
odoo.define('wechat_user_self_project_widget', function (require) {5
"use strict";6
7
var Widget = require('web.Widget');8
var widget_registry = require('web.widget_registry');9
var sub_list = require('sub_list');10
11
var wechat_user_self_project_widget = Widget.extend({12
start: function () {13
var self = this;14
self._rpc({15
model: 'ir.model.data',16
method: 'xmlid_to_res_id',17
args: ['user_borrow.user_borrow_wechat_user_tree'],18
}).then(function (result) {19
var $el = new sub_list(self, {20
'need_search': true, // 加有此参数或者此参数为true时会显示odoo默认的tree视图的搜索栏21
'need_page': true, // 加有此参数或者此参数为true时会显示odoo默认的翻页按钮22
'list_id': result, // 这个参数可以指定展示的子列表使用哪一个xml_id23
'res_model': 'funenc.wechat.user'24
})25
$el.appendTo(self.$el)26
})27
}28
});29
widget_registry.add('wechat_user_self_project_widget', wechat_user_self_project_widget);30
return wechat_user_self_project_widget31
32
});已复制
注意：此用法适用于layui_theme_odoo12主题，funenc_theme用法一样是new，不过具体参数有些许差异