odoo12 列表視圖新增自定義按鈕實現不同的業務需求

odoo12 列表視圖新增自定義按鈕實現不同的業務需求

場景：

　　一個神奇的需求吧，算是，列表頁創建表單數據的時候，通過type控制數據的不同，但是說為了防止用戶誤操作，需要把原來odoo自帶的創建按鈕去掉，做成兩個不同的創建入口（入庫創建按鈕、出庫創建按鈕）附圖一張。

 　　然后就是做成彈窗樣式的數據，沒有常規操作點擊列表數據進入form視圖的操作。

 

思路：

　　用xml繼承模板寫按鈕，然后通過js來獲取按鈕的點擊與否，再寫業務邏輯

 按鈕添加參考這篇：https://blog.csdn.net/Katherine130/article/details/103457644

js打開form參考這篇：https://www.cnblogs.com/da-tong/p/13029686.html

代碼實現：

　　1. 首先在static下的src文件夾下的xml文件夾里面新建一個按鈕的模板out_in_stock_btn_template.xml（記得在__manifest__文件里面引入qweb）

<?xml version="1.0" encoding="UTF-8"?>
<templates>
<!--    Tree 視圖上自定義按鈕-->
    <t t-name="OutInStockBtnView.in_stock_button">
        <button type="button" class="btn btn-primary in_stock_btn" style="border-radius: 5px">
            新增入庫
        </button>
    </t>
    <t t-name="OutInStockBtnView.out_stock_button">
        <button type="button" class="btn btn-primary out_stock_btn" style="margin-left: 10px;border-radius: 5px">
            新增出庫
        </button>
    </t>
    <t t-name="OutInStockBtnView.carry_last_month_stock">
        <button type="button" class="btn btn-primary last_month_stock" style="margin-left: 200px;border-radius: 5px">
            結轉上月庫存
        </button>
    </t>

    <t t-extend="ListView.buttons" t-name="OutInStockBtnView.out_in_stock_button">
        <t t-jquery="div.o_list_buttons" t-operation="append"> <!-- t-jquery 根據頁面布局自行填寫 -->
            <t t-call="OutInStockBtnView.in_stock_button"/>
            <t t-call="OutInStockBtnView.out_stock_button"/>
            <t t-call="OutInStockBtnView.carry_last_month_stock"/>
        </t>
    </t>
</templates>

 　　2. 新建一個瞬時模型和form視圖，用來在點擊了自定義按鈕后彈出頁面（記得在__manifest__文件引入）

　　     我的頁面就是這樣

　　

 

 ·彈窗的保存按鈕：

<button string="保存" type="object" name="execute" class="oe_highlight"/>

 

　　3. 對應瞬時模型對應保存按鈕方法

@api.multi
    def execute(self):
        """新增入庫"""
        pass

 

　　4. static下的src下js文件夾新建out_in_site_usage.js文件（為自定義按鈕綁定事件，觸發功能）

odoo.define('fr.off.site.usage', function (require) {
    "use strict";

    let Dialog = require('web.Dialog');
    let core = require('web.core');
    let ListController = require('web.ListController');
    let ListView = require('web.ListView');
    let rpc = require('web.rpc');
    let viewRegistry = require('web.view_registry');
    let qweb = core.qweb;

    let FrOffSiteUsage = ListController.extend({
        buttons_template: 'OutInStockBtnView.out_in_stock_button',
        renderButtons: function () {
            this._super.apply(this, arguments);
            if (this.$buttons) {
                var self = this;
                this.$buttons.on('click', '.in_stock_btn', this.proxy('create_in_stock'));
                this.$buttons.on('click', '.out_stock_btn', this.proxy('create_out_stock'));
                this.$buttons.on('click', '.last_month_stock', this.proxy('carry_last_month_stock'));
            }
        },create_in_stock: function () {
//            this._rpc({
//                model: "fr.off.site.in.stock.wizard", # 模型名
//                method: "execute", # 方法名
//                args: ['in'], # 參數
//            }).then(function () {
//                 location.reload();
//            }); 這是可以直接出發對應模型的方法
            var self = this;
            this.do_action({
                name: "新增入庫",   //自定義彈出框名稱
                type: 'ir.actions.act_window',  //動作類型
                res_model: 'fr.off.site.in.stock.wizard',    //視圖的model
                views: [
                    // [false, 'list'],
                    [false, 'form'],
                ],
                view_mode: "form",
                view_type: 'form',
                view_id: 'fr_storage_extend.FrOffSiteInStockWizardAction',    //視圖的id
                context: "{'stock': 'in'}",
//                flags: {'initial_mode': 'view',action_buttons:false},  //target: 'new'彈出框默認為編輯模式，需要只讀模式的可以加上這句
                target: 'new'   //打開方式
            })
        },

        create_out_stock: function () {
            alert('點擊了新增出庫')
        },carry_last_month_stock: function () {
            alert('點擊了結轉上月庫存')
        }
    });


    let OutInStockBtnView = ListView.extend({
        config: _.extend({}, ListView.prototype.config, {
            Controller: FrOffSiteUsage,
        }),
    });

    viewRegistry.add('fr_off_site_usage', OutInStockBtnView);

});

 

　　5.  js文件引入（此xml文件也要記得引入）

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>

        <template id="FrStorageExtend" name="FrStorageExtendReportKanBanExtend assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/fr_storage_extend/static/src/js/out_in_site_usage.js"/>
            </xpath>
        </template>

    </data>
</odoo>