單頁Web應用（single page web application，SPA）： SPA 是一種特殊的 Web 應用，是加載單個 HTML 頁面並在用戶與應用程序交互時動態更新該頁面的。 它將所有的活動局限於一個 Web 頁面中，僅在該 Web 頁面初始化時加載相應的 HTML 、 JavaScript 、 CSS 。 一旦頁面加載完成， SPA 不會因為用戶的操作而進行頁面的重新加載或跳轉， 而是利用 JavaScript 動態的變換 HTML（采用的是 div 切換顯示和隱藏），從而實現UI與用戶的交互。在 SPA 應用中， 應用加載之后就不會再有整頁刷新。相反，展示邏輯預先加載，並有賴於內容Region（區域）中的視圖切換來展示內容。 odoo前端應用：Odoo 目前包含三個單頁應用：后台應用，工時單應用，POS 應用單頁Web應用 1、菜單響應在/web/static/src/s/web_client.js 中定義： 1.1、調用 data_manager.load_action() 通過 rpc 取得動作； 1.2、action_manager.do_action() 執行動作 案例：視圖跳轉/切換 語法： 其中 action 是一個用於描述要跳轉到的視圖的信息字典 var web_client = require('web.web_client'); web_client.action_manager.do_action(action, ,{clear_breadcrumbs: true}); clear_breadcrumbs: true 用於控制是否清除面包屑導航當前層 案例代碼：通過action var attendance_state =self.login_employee.attendance_state; var message = '' var action_client = { type: "ir.actions.client", name: _t('Dashboard '), tag: 'hr_dashboard', }; self.do_action(action_client, {clear_breadcrumbs: true}); if (attendance_state == 'checked_in'){ message = 'Checked Out' } else if (attendance_state == 'checked_out'){ message = 'Checked In' } self.trigger_up('show_effect', { message: _t("Successfully " + message), type: 'rainbow_man' }); 2、后台模型 語法：var Model = require('web.Model'); new Model('res.users'').call('do_manual_launch',, [[]]).then(function(result){ web_client.action_manager.do_action(action); })； 調用了后端 res.users 模型的 do_manual_launch 方法 實際案例：odoo14里面用了_rpc來實現 fetch_data: function() { var self = this; var def0 = self._rpc({ model: 'hr.employee', method: 'check_user_group' }).then(function(result) { if (result == true){ self.is_manager = true; } else{ self.is_manager = false; } }); var def1 = this._rpc({ model: 'hr.employee', method: 'get_user_employee_details' }).then(function(result) { self.login_employee = result[0]; }); var def2 = self._rpc({ model: "hr.employee", method: "get_upcoming", }) .then(function (res) { self.employee_birthday = res['birthday']; self.upcoming_events = res['event']; self.announcements = res['announcement']; }); return $.when(def0, def1, def2); }, 3、客戶端方法 // 獲取 web_client 對象 var web_client = require('eb.web_client'); //刷新視圖頁面（可更新按鈕的顯示狀態） web_client.do_show(); // 刷新頁面 web_client.do_reload(); // 通知提示（頁面右上角）第三個參數表示通知是否固定在頁面不消失，默認 false web_client.do_warn('標題內容', '提示內容', false); web_client.do_notify('標題內容', '提示內容', false); // 設置窗口標題 web_client.set_title("窗口標題"); // 執行窗口動作以切換視圖 web_client.do_action(action); // 獲取當前狀態 web_client._current_state; //獲取 domain web_client.action_manager.get_inner_action().widget.searchview.build_search_data() 4、Odoo act_window 的 flags 參數 通過 Odoo act_window 的 flags 可以實現一些個性化的視圖控制。 'flags': { //是否顯示 sidebar 區域(主要為 action 按鈕) 'sidebar': False, 'pager': False, //是否顯示分頁組件 'initial_mode': 'edit', // 進入時的默認視圖模式 'form': { //表單視圖的設置 'action_buttons': False, 'initial_mode': 'edit', 'options': {'mode': 'view'}, }, 'tree': { //列表視圖的設置 'action_buttons': False } } 使用示例： <field name="context">{ "flags": {"disable_filters": False} }</field> 其他控制項 headless views_switcher 5 display_title search_view auto_search hidden 隱藏控制 disable_filters - 禁用搜索欄篩選 disable_groupby - 禁用搜索欄分組 disable_favorites - 禁用搜索欄收藏 disable_custom_filters 禁用自定義過濾
5、
_onFilePDF: function (ev) { var self = this; var fieldId = self._getId(ev.currentTarget); self.$el.append(` <div class="zPDF_iframe"> <div class="pdc_close btn btn-primary">關閉</div> <div class="btn btn-primary"><a href="/web/content/${fieldId}?download=true" style="text-decoration: none; color: white">下載</a></div><br> <iframe class="zPDF" scrolling="yes" id="main" name="main" frameborder="0" style="min-height:600px;width:1000px;height:100%;" src="/web/content/${fieldId}"></iframe> </div> `) }
