odoo vue widget使用方式.md
True

odoo vue widget使用

一、环境安装

打开终端:
已复制

将该文件夹作为addons,并且修改package.json 相应的name,然后进入目录,输入如下命令

已复制
切换到项目目录
已复制

vue widget register使用

step1: 在项目目录下webpack.config.js 中entry配置项目主入口文件,例如我的项目有俩个木块分别是research_management和

example,我将js分别打包至相应的static下面,其中打包目标文件分别指定

已复制

配置comm js打包,这会将所有模块共用的js打包到同一文件,将该js打包后我们其他模块只需要依赖与这个歌模块就可以了。如果模块仅仅只有一个就不要改配置,这样有益于代码分离

已复制

其中字典:key是文件输出地址, value是js文件入口

step2: 主文件注册odoo widget组件:

a) 创建vue 单文本组件(.vue文件),在组件中增加widget 属性,该属性和odoo中使用相应的widget方式一致,但是重写方法一定要调用 this._super.apply(this, arguments)

已复制

b) 在主文件注册js

已复制

例如:

已复制

c) 在项目进行编译,将js编码

已复制

最后在项目中引入打包后的js文件和css文件就可以了,后面就没有什么不同field widget 直接在xml使用, client在xml ir.actions.client注册就可以使用了
备注:
$widget: 可以在vue单文本组件中,对odoo widget当前实例进行访问, 在vue中通过this.$root.$widget 访问
$require: 在vue中可以通过该钩子函数,获取odoo其余组件;例如: this$root..$required('xxxxx'),在widget中可以通过this.required('xxxx')获取,例如: this.$required("web.core")获取core对象
widget.vue: 在vue单文本组件widget 键对象中,可以通this.vue 访问vue实例

其他说明:
其余odoo extend include 可以直接使用odoo.define进行自定义

已复制

下面是一个完整的使用实例,其功能是实现了对Many2many('ir.accachment') 类型字段在tree增加一个附件列表,代码如下

step1: 新建AttachmentListField.vue文件,代码如下:

已复制

step2:在main.js注册:

已复制

step3:使用webpack编译后引入

dialog弹窗打开、关闭后回调
True