Bài này sẽ hướng dẫn cách tùy biến hóa đơn trong odoo để có bản in như ý bằng cách thêm một nút chức năng mới mà không làm ảnh hưởng tới chức năng in hóa đơn hiện tại.

2015-09-16 16_33_07-Odoo Qweb 101 by Min reviewd David 0902.docx - Microsoft Word

Để thêm một sự lựa chọn khác trong trình đơn thả xuống chúng ta sẽ kế thừa module kế toán: account.account (chúng ta cũng có thể làm điều tương tự với bản in khác như bán hàng hoặc đơn đặt hàng)

Bước 1: Định nghĩa __init__.py và __openerp__.py trong một module mới, đặt vào report_customisation.

Bước 2:  Tạo file invoice_report_extension.py và invoice_report_extension.xml. Thêm vào những dòng code sau:


from openerp import models,api,fields

from openerp.tools import amount_to_text_en

class res_company(models.Model):

_inherit=‘res.company’

logo_report= fields.Binary(“Header Image”,

help=“This field holds the image used for the logo on the prints, limited to 1024x1024px”)

class account_invoive_extension(models.Model):

_inherit=‘account.invoice’


<?xml version=“1.0” encoding=“utf-8”?>

<openerp>

<data>

        <!– form view for company –>

<record id=“view_company_form_ce” model=“ir.ui.view”>

<field name=“name”>report.customisation.company.form</field>

<field name=“model”>res.company</field>

<field name=“inherit_id” ref=“base.view_company_form”/>

<field name=“arch” type=“xml”>

<field name=“custom_footer” position=“before”>

<field name=“logo_report” widget=“image”/>

</field>

</field>

</record>

</data>

</openerp>


Giải thích: Điều này được thừa hưởng trong hai module: nó mở rộng thông tin công ty bằng việc thêm một logo ở phần header và nó mở rộng hóa đơn để thay đổi việc hiển thị và lấy dữ liệu để tạo báo cáo. File XML chỉ thêm một lựa chọn để chỉnh sửa cách hiển thị với việc cho phép upload logo.

Bước 3: Tạo một nút lệnh trong menu in và xác định yếu tố báo cáo. Chúng ta sẽ tạo ra một file xml mới tên report_sales_invoice.xml có nội dung như sau:


<template id=“report_sales_invoice_template”>

<t t-call=“report.html_container”>

<t t-foreach=“doc_ids” t-as=“doc_id”>

<t t-raw=“translate_doc(doc_id, doc_model, ‘partner_id.lang’, ‘report_customisation.report_sales_invoice_document’)”/>

</t>

</t>

</template>

<report

id=“report_sales_invoices”

model=“account.invoice”

string=“Sales Invoice Report”

report_type=“qweb-pdf”

name=“report_customisation.report_sales_invoice_template”

file=“report_customisation.report_sales_invoice_template”

attachment_use=“True”

attachment=“(object.state in (‘open’,’paid’)) and (‘INV’+(object.number or ”).replace(‘/’,”)+’.pdf’)”

/>


Các yếu tố báo cáo xác định tính chất của nút: báo cáo nào sẽ được tạo và kiểu cách của nó. Chúng ta có thể thấy tên của nó là “Sale Invoice Report” và REPORT_TYPE là “qweb-pdf”. Model này là account.invoice, nút sẽ xuất hiện trong View của Model này.

Các mẫu  là cầu nối quan trọng giữa giao diện web và logic cơ bản. Dự kiến, sẽ chỉ bao gồm dòng này:

<template id = “report_sales_invoice_document” />

Bây giờ cài đặt module (đừng quên để thêm các file xml trong __openerp__.py ) và chúng ta sẽ có thể thấy nút xuất hiện trong menu in như sau:

2015-09-16 16_34_07-Odoo Qweb 101 by Min reviewd David 0902.docx - Microsoft Word

  1. Nhưng lúc này nếu in nó sẽ chỉ cho một trang trống, bởi vì chúng ta chưa code mẫu chính! Bây giờ chúng ta hãy thay đổi điều đó từng bước. Đầu tiên, bao gồm các dòng code sau trong mẫu chúng ta để trống ở trên:

<t t-if =”o and ‘company_id’ in o” >

<t t-if=”o.date_invoice“>

<t t-set=”pdate” t-value=”time.strftime(‘%d %B %Y’,time.strptime(o.date_invoice,’%Y-%m-%d’))” />

</t>

</t>


Điều này về cơ bản xác minh rằng hóa đơn của chúng ta tồn tại và company_id của nó tồn tại. Sau đó, nếu ngày không tồn tại trong hóa đơn đó sẽ tạo ra một biến “pDate ‘ để lưu trữ ngày hiện tại. Lưu ý rằng nó sử dụng o như một hình thức ngắn cho đối tượng (doc_id trong phần trước), được chấp nhận bởi Qweb. Từ bây giờ chúng ta có thể sử dụng dữ liệu trong hóa đơn bằng cách tham khảo các đối tượng o.

Bây giờ chúng ta cần phải xác định các tiêu đề. Chúng ta có thể viết nó bên trong mẫu chính, hoặc một mẫu mới và gọi nó từ mẫu chính sử dụng t-call. Chúng ta thực hiện chiến lược sau vì tiêu đề có thể được chia sẻ với các tài liệu khác!


<template id=”custom_layout_header“>

<t t-if =“o and ‘company_id’ in o” >

<t t-set=“company” t-value=”o.company_id”/>

<t t-set=“customer” t-value=”o.partner_id”/>

</t>

<div class=”header“>

<div class=”row” style=“font-size:11px; line-height=80%”>

<div class=“col-xs-6”>

<img  t-if=“company.logo_report”

t-att-src=“‘data:image/png;base64,%s’ %                                                                                                                            “company.logo_report”

style=“max-height: 140px;” />

</div>

<div class=“col-xs-4 col-xs-offset-2″ style=”margin-top:10px”>

<span t-field=“company.name” style=“color:blue”/><br/>

<span t-field=“company.street”/><br/>

<span t-field=“company.street2″/><br/>

<span t-field=“company.country_id”/><span t-field=“company.zip“/><br/>

Phone: <span t-field=“company.phone”/><br/>

Fax: <span t-field=“company.fax”/><br/>

Email: <span t-field=“company.email”/><br/>

<span t-field=“company.website”/><br/>

</div>

</div>

<hr style=“height:3px;border:none;color:#FF0000;background-color:#FF0000;margin-top:0px;margin-bottom:12px”/>

</div>

</div>

</template>


Các Qweb đã bổ sung thêm nhiều classes và styles được sử dụng giống như bất kỳ phần tử html khác. Ở đây tôi sẽ giải thích dễ hiểu nhất để bạn có thể giải mã các dòng lệnh:

<t t-set=”company” t-value=“o.company_id”/>

<t t-set=”customer“ t-value=“o.partner_id”/>

Ở đây chúng ta đặt một số biến được Qweb định tính tại thời gian chạy. Điều này khiến thuận tiện hơn ở đây, vì vậy chúng ta có thể sử dụng thông tin công ty và khách hàng như là bí danh cho o.company_id và o.partner_id.

style=“font-size:11px; line-height=80%”

Đây chỉ là định nghĩa style css cổ điển. Nó định nghĩa phông chữ và giãn dòng cho tất cả các thông tin trong phần này.

t-if=“company.logo_report”

t-att-src=“‘data:image/png;base64,%s’ %                                                                                                                            “company.logo_report”

style=“max-height: 140px;”

Dưới đây chúng ta trích xuất các hình ảnh và đặt nó vào vị trí tốt trong báo cáo. T-if khẳng định rằng nó tồn tại và t-att-src tải nó như là một hình ảnh (được lưu trữ như là một trường nhị phân trong Odoo), sau đó xác định kích thước của nó:

<div class=”col-xs-4 col-xs-offset-2” style=”margin-top:10px“>

Col-xs-## với # là viết tắt của một số từ 1 đến 12. Qweb chia chiều rộng trang thành 12 cột và col-xs-## xác định có bao nhiêu cột. Lưu ý rằng những hình ảnh trước đó đã thực hiện 6 cột, vì vậy chỉ còn 6 cột sẵn sàng được chia sẻ trong các phần tử div. (Bên ngoài div chúng ta có thể tái sử dụng các thủ thuật tương tự để sắp xếp các layour)

Ngoài ra còn có col-xs-offset-## xác định khoảng cách nhất định giữa các yếu tố, sau đó có thể kéo bên trái và kéo bên phải nếu bạn muốn đưa dữ liệu trong một cột trên cùng cực trái hoặc phải.

<span t-field=”company.name” style=”color:blue“/><br/>

Đây là một trường tham chiếu trực tiếp trong đối tượng. Lưu bí danh được xác định trên? Ở đây chúng ta ghi tên của nó. Nếu công ty của bạn được gọi là Goodyear, nó sẽ xuất hiện như Goodyear trong tài liệu hoá đơn. Nếu bạn thay đổi công ty hoặc tên công ty, nó sẽ được tự động cập nhật tại đây.

Sau khi định nghĩa tiêu đề, chúng ta có thể đơn giản bao gồm nó trong mẫu chính bằng cách sử dụng một t-call:

After defining the header, we can simply include it in the main template by using a t-call:

<t t-call=“report_customisation.custom_layout_header”/>

Bây giờ nếu bạn in hóa đơn của bạn, bạn có thể nhìn thấy trên đỉnh tài liệu ví dụ như thế này:

2015-09-16 16_34_24-Odoo Qweb 101 by Min reviewd David 0902.docx - Microsoft Word

Tất nhiên bạn cần phải nhập thông tin chi tiết của công ty bạn bao gồm bạn logo, hoặc nếu không bạn sẽ không có nhiều thông tin. Bây giờ một bài tập nhỏ: trong tiêu đề ở trên có quá nhiều khoảng trống giữa logo và thông tin công ty. Làm thế nào để bạn sửa chữa nó bằng cách thay đổi cách bố trí?

2015-09-16 16_35_57-Odoo Qweb 101 by Min reviewd David 0902.docx - Microsoft Word

Tham khảo: http://elico-corp.com.sg/2015/09/16/how-to-customize-your-printout-of-your-invoice-odoo-qweb-101/

BÌNH LUẬN

Please enter your comment!
Please enter your name here