Odoo丨Get原生form表单变“美”小技巧~

本期内容

Odoo原生form表单改造

Odoo作为快速搭建系统的框架，我们在利用它便捷高效功能的同时，有没有觉得有些页面不太好看呢？

今天我们一起来聊聊如何让odoo原生的form表单更美观更符合用户体验~

原生表单实现方式

Odoo为了极致的简约，字段的定义直接通过xml，然后渲染到页面上展示。

如果需要调整整体布局，将字段分成两列三列展示，可以使用group标签进行分组，如果想做成分页样式可以使用page标签。

虽然Odoo提供的整体样式，能够满足常见的业务场景，但是odoo对字段底层样式却没有那么灵活的配置选项；样式改变只能改变简单的必填与否，如果需求对字段进行比较复杂的操作或者指令，就必须通过widget来实现。

Odoo给我们也提供了很多原生的widget，比如实现多对多用widget="many2many_tags"，枚举把下拉框变成单选框用widget="radio"，时间格式只保留年月日用widget="date"等等

问题发现与分析

项目中遇到问题

问题起源于我们细致入微的产品经理，拿到我们做的表单之后，就说了一句话：丑，那一片空白是什么？多行之间是错行的？

/ 改造之前

问题的具体分析

在编辑模式下，可编辑字段是输入框，不可编辑字段仍然是空白，或者一段数据，对比一下，视觉上冲击力更强。

调试模式下，输入框是input标签，而只读字段的被渲染成span，稍微了解一点前端知识的同学都知道，span本身在页面上是看不到的，只有span中有文字才会显示出文字。

为了解决这种问题，让表格更好看，让整个页面看起来更赏心悦目。我们想办法对页面进行改造。根据以上发现，既然字段的属性不能解决这个问题，那就通过widget来实现，原生方法不可能考虑到所有使用场景，根据实际场景还是要自定义。

具体解决方法

第一步：把Span变成输入框

明确目标是想要把显示的span变成显示输入框，那就去找到加载页面的时候，渲染字段的方法。

对于不同的数据类型，加载的时候执行的模块和方法不同，那就要根据数据类型分批改造方法，以字符串类型为例，在保持原有数据功能不变的情况下，对其方法进行拓展。

在渲染字段的时候进行判断，如果是只读属性，就把本来要渲染的数据，放到输入框里，同时定义好输入框的宽度，和原生输入框保持一致，避免长短不一的情况

同样的我们可以对多对一关系、浮点类型、日期类型等进行改造，显示输入框。

以上改造的主要逻辑都是一样的，只不过不同数据类型封装的数组格式不同，需要从中取出展示在页面上的值。

除此之外，关于多对多类型有另外的方法，因为多对多类型本来就带有输入框，只是没有显示出来，而且页面上的值是通过关联表查出的自己改写显示起来比较复杂。需要把它原本的输入框显示出来即可。显示的样式和颜色从别的输入框抓取。

改写完成，使用的时候给字段绑上特定的widget就可以啦。

看下效果：

是不是舒服多了，编辑功能保留原有的就行，只是把只读的输入框和编辑的默认框高度宽度保持一致就好啦！

第二步：改写_renderFieldWidget

到这里，进度条已经走完80%了。

这时候你会发现，如果该字段有值时会显示输入框，但是为空时，还是一片空白，好像并没有完成成功……

这是因为字段加载空值的时候不会通过 _render方法；

我们需要改写 _renderFieldWidget 方法，在刚开始加载的时候，对所有情况进行统一，无论什么情况都执行我们改写的代码。

修改的位置源码是：

element.widget.isEmpty()，我们改成false，字段数据为空的时候不生效。

在注册widget的时候引入这个文件就可以啦

再去页面看看，是不是好看多了~

/ 改造之后

最后，给页面上所有字段都绑定widget就大功告成了！

本次分享就到这里啦~~~