Openerp/histest3

หน้านี้รวมข้อมูลสำหรับการทดสอบการพัฒนาระบบด้วย OpenERP

การแยกโค้ด javascript เป็นส่วน

ก่อนเริ่ม: ดาวน์โหลดโค้ด histest.zip จากครั้งก่อน

histest.js

openerp.histest = function(instance) {

    openerp.histest.message(instance);
    openerp.histest.patient(instance);
    
    instance.web.client_actions.add('histest.indexAction',
                                    'instance.histest.patient.indexAction');

};

histest_message.js

openerp.histest.message = function(instance) {

    instance.histest.message = {};
    instance.histest.message.popupInterval = null;
    instance.histest.message.MsgManagerWidget = instance.web.Widget.extend({

        start: function() {
            var self = this;
            console.log("MsgMan started...");
            if(instance.histest.message.popupInterval) {
                clearInterval(instance.histest.message.popupInterval);
            }
            instance.histest.message.popupInterval = setInterval(function() {
                self.popup();
            },5000);
            this.shownMsgId = 0;
            this.fetchNewMessage(this.shownMsgId, function(msgId) {
                self.shownMsgId = msgId;
            });
        },

        fetchNewMessage: function(recentId, callback) {
            var model = new instance.web.Model('histest.message');
            model.query().filter([['id','>',recentId]]).all().done(function(results){
                if (results.length > 0) {
                    msgId = results[results.length-1].id;
                    callback(msgId);
                }
            });
        },
        
        popup: function() {
            var self = this;
            this.fetchNewMessage(this.shownMsgId, function(msgId) {
                self.do_action({
                    type: 'ir.actions.act_window',
                    res_model: "histest.message",
                    res_id: msgId,
                    views: [[false, 'form']],
                    target: 'new',
                    context: {},
                });
                self.shownMsgId = msgId;
            });
        }
    });
};

histest_patient.js

openerp.histest.patient = function(instance) {
    
    instance.histest.patient = {};
    instance.histest.patient.indexAction = instance.web.Widget.extend({
        template: 'histest.index',
        events: {
            'click .oe_histest_patient_new_link': 'linkClick',
            'click .oe_histest_patient_query_link': 'patientQuery',
        },

        start: function() {
            var msgManager = new instance.histest.message.MsgManagerWidget(this);
            msgManager.appendTo('.oe_application');
        },

        patientQuery: function() {
            var model = new instance.web.Model('histest.patient');
            var self = this;
            self.$(".oe_histest_patient_results").html("");
            model.query().all().done(function(results) {
                for(var i=0; i < results.length; i++) {
                    self.$(".oe_histest_patient_results")
                        .append('<li>' + results[i].first_name + '</li>');
                }
            });
        },

        linkClick: function() {
            this.do_action({
                type: 'ir.actions.act_window',
                res_model: 'histest.patient',
                views: [[false,'form']],
                target: 'current',
                context: {},
            });
        }
    });
};

Responsive CSS

addons/web/static/src/xml/base.xml

453c453
<             <td colspan="2" class="oe_topbar">
---
>             <td colspan="1" class="oe_topbar">
460c460,461
<             <td class="oe_leftbar" valign="top">
---
>           <td>
>             <div class="oe_leftbar" style="float: left;" valign="top">
470,472c471,474
<             </td>
<             <td class="oe_application">
<             </td>
---
>             </div>
>             <div class="oe_application" style="float: left">
>             </div>
>           </td>

addons/web/controllers/main.py

546a547
>         <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

histest/static/src/css/histest.css

.openerp .oe_histest_index {
    padding: 10px;
    background: black;
    color: white;
}
.openerp .oe_histest_index h1 {
    font-size: 40px;
}
.openerp .oe_application {
    width: calc(100% - 221px);
}

@media screen and (max-width: 800px) {
    .openerp .oe_leftbar {
        width: 100%;
    }
    .openerp .oe_application {
        width: 100%;
    }
    .openerp a.oe_logo {
        display: none;
    }
}

Asynchronous request

เพิ่มปุ่ม Search ในฟอร์มให้เรียกค้นกลับไปยังเซิร์ฟเวอร์ของ OpenERP

ไฟล์ histest_view.xml

แก้ไข view histest.patient.form โดยระบุชนิด widget ที่สร้างขึ้นมาให้กับฟิลด์ first_name last_name และ id_number

<record model="ir.ui.view" id="view_histest_patient_form">
  <field name="name">histest.patient.form</field>
  <field name="model">histest.patient</field>
  <field name="arch" type="xml">
    <form string="Patient" version="7.0">
      <group cols="2">
        <group colspan="1">
          <field name="title"/>
          <field name="first_name" widget="firstname" />
          <field name="last_name" widget="lastname" />
        </group>
        <group colspan="1">
          <field name="sex"/>
          <field name="id_number" widget="person_id" />
        </group>
      </group>
    </form>
  </field>
</record>

ไฟล์ static/src/xml/histest.xml

เพิ่มเทมเพลทเพื่อใข้กับ widget สำหรับฟิลด์ first_name last_name และ id_number ในฟอร์มเพิ่มข้อมูลผู้ป่วย

<templates>
  :
  <t t-name="histest.FieldPID" t-extend="FieldChar">
    <t t-jquery="input">
      this.parent().append('<button class="oe_histest_pid_search">Search</button>');
    </t>
  </t>

  <t t-name="histest.FieldFirstName" t-extend="FieldChar">
    <t t-jquery="input">
      this.addClass("oe_histest_firstname");
    </t>
  </t>

  <t t-name="histest.FieldLastName" t-extend="FieldChar">
    <t t-jquery="input">
      this.addClass("oe_histest_lastname");
    </t>
  </t>
  :
</templates>

ไฟล์ static/src/js/histest_regis.js

เป็นไฟล์ใหม่ที่สร้างขึ้นมาเพื่อผูก widget ใหม่เข้ากับเทมเพลท รวมถึงบรรจุโค้ดที่ดำเนินการส่งคำร้องการค้นหาตามรหัสผู้ป่วยแบบ asynchronous กลับมายัง OpenERP Server เมื่อผู้ใช้คลิ้กปุ่ม Search ซึ่งเมื่อได้รับคำตอบแล้วจะนำไปอัพเดตในฟิลด์ first_name และ last_name ที่อยู่ในฟอร์มอีกที

openerp.histest.regis = function(instance) {
    instance.histest.regis = {}

    instance.histest.regis.FieldPID = instance.web.form.FieldChar.extend({

        template: 'histest.FieldPID',

        events: {
          'click .oe_histest_pid_search': function(e) {
            var url = "/histest/ajax?pid="+$(".oe_histest_pid_search").parent().find("input").val();
            $.getJSON(url, function(data) {
              $(".oe_histest_firstname").val(data.firstname);
              $(".oe_histest_lastname").val(data.lastname);
            });
          },
        },

    });

    instance.histest.regis.FieldFirstName = instance.web.form.FieldChar.extend({
        template: 'histest.FieldFirstName',
    });

    instance.histest.regis.FieldLastName = instance.web.form.FieldChar.extend({
        template: 'histest.FieldLastName',
    });

    instance.web.form.widgets.add('person_id', 'instance.histest.regis.FieldPID');
    instance.web.form.widgets.add('firstname', 'instance.histest.regis.FieldFirstName');
    instance.web.form.widgets.add('lastname', 'instance.histest.regis.FieldLastName');
};

ไฟล์ __openerp__.py

ระบุให้โค้ดจาวาสคริปต์ static/src/js/histest_regis.js ถูกโหลดพร้อมกับมอดูล

{
    :
    'js': [
        'static/src/js/histest.js',
        'static/src/js/histest_message.js',
        'static/src/js/histest_patient.js',
        'static/src/js/histest_regis.js',
    ],
    :
}

สร้าง web controller เพื่อรับคำร้องการค้นหา

web controller ที่สร้างขึ้นมีขั้นตอนการทำงานดังนี้

1. รับคำร้องในรูป AJAX request เมื่อผู้ใช้กดปุ่มค้นหาในฟอร์มวิว โดยส่งมาในรูปของ URL localhost:8069/histest/ajax/?pid=<รหัสผู้ป่วย>
2. ส่งเลขประจำตัวผู้ป่วยไปยังเซิร์ฟเวอร์ให้บริการข้อมูล (อาทิเช่นเซิร์ฟเวอร์ทะเบียนราษฎร์) เพื่อขอรายละเอียดผู้ป่วย ในการอบรมนี้สมมติว่าเซิร์ฟเวอร์รอรับคำร้องขออยู่ที่ URL http://theory.cpe.ku.ac.th:8080
3. คืนผลลัพธ์กลับไปที่ฟอร์มในรูปของ JSON

ไฟล์ controllers/__init__.py

import my_controller

ไฟล์ controllers/my_controller.py

import openerp.addons.web.http as http
import simplejson as json
import urllib2

class MyController(http.Controller):
    _cp_path = '/histest/ajax'

    @http.httprequest
    def index(self, req, s_action=None, **kwargs):
        pid = req.params['pid']
        request_url = "http://theory.cpe.ku.ac.th:8080/%s" % pid
        contents = urllib2.urlopen(request_url)
        return contents.read()

ไฟล์ __init__.py

เพิ่มคำสั่ง import แพคเกจ controllers

import histest
import controllers

การสร้างรายงาน

• สร้างไดเรคตอรี่ชื่อ report และสร้างไฟล์ __init__.py ไว้ภายในนั้น
• ดาวน์โหลด ไฟล์:Histest patient.odt เพื่อใช้เตรียมเทมเพลทสำหรับรายงาน เซฟไฟล์นี้ไว้ในไดเรคตอรี report
• ใช้คำสั่ง openerp_sxw2rml.py แปลงไฟล์ของ OpenOffice ให้เป็นไฟล์ RML (Report Markup Language) เพื่อนำไปใช้กับระบบสร้างรายงานของ OpenERP ต่อไป

python /opt/openerp/openerp/addons/base_report_designer/openerp_sxw2rml/openerp_sxw2rml.py histest_patient.odt > histest_patient.rml

ไฟล์ histest.py

เพิ่มโมเดล HISAppointment และแก้ไขโมเดล HISPatient ให้เชื่อมโยงถึงกัน

from osv import osv, fields

class HISPatient(osv.Model):
    _name='histest.patient'

    def get_full_name(self, cr, uid, ids, field_name, arg, context):
        patients = self.browse(cr, uid, ids)
        result = {}
        for p in patients:
            result[p.id] = (u'%s %s %s' % (p.title,
                                           p.first_name,
                                           p.last_name))
        return result


    _rec_name='full_name'

    _columns={
        'title': fields.char(size=50,
                             string=u'คำนำหน้าชื่อ',
                             required=True),
        'first_name': fields.char(size=256,
                                  string=u'ชื่อ',
                                  required=True),
        'last_name': fields.char(size=256,
                                 string=u'นามสกุล',
                                 required=True),
        'sex': fields.selection([('M',u'ชาย'),('F',u'หญิง'),],
                                string=u'เพศ',
                                required=True),
        'id_number': fields.char(size=20,
                                 string=u'เลขบัตรประชาชน',
                                 required=True),
        'full_name': fields.function(get_full_name,
                                     type='char'),
        'appointment_ids': fields.one2many('histest.appointment',
                                           'patient_id',
                                           'Appointments'),
    }
    
:

class HISAppointment(osv.Model):
    _name = 'histest.appointment'
    _columns = {
            'date': fields.date(string=u'วันนัดหมาย', required=True),
            'patient_id': fields.many2one('histest.patient', 'Patient'),
            }

ไฟล์ histest_view.xml

เพิ่มการแสดงผลฟิลด์ appointment_ids ในฟอร์มของโมเดล HISPatient

    <record model="ir.ui.view" id="view_histest_patient_form">
      <field name="name">histest.patient.form</field>
      <field name="model">histest.patient</field>
      <field name="arch" type="xml">
        <form string="Patient" version="7.0">
          <group cols="2">
            <group colspan="1">
              <field name="title"/>
              <field name="first_name" widget="firstname" />
              <field name="last_name" widget="lastname" />
            </group>
            <group colspan="1">
              <field name="sex"/>
              <field name="id_number" widget="person_id" />
              <field name="appointment_ids" />
            </group>
          </group>
        </form>
      </field>
    </record>

ไฟล์ histest_report.xml

ใช้ไฟล์นี้ระบุองค์ประกอบของรายงานการนัดหมายผู้ป่วย

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

    <report
      auto="True"
      id="report_histest_patient"
      model="histest.patient"
      name="histest.patient"
      rml="histest/report/histest_patient.rml"
      string="Print Appointments"
      header="False"
      menu="True"
      />

  </data>
</openerp>

ไฟล์ __openerp__.py

ระบุให้ใช้ไฟล์ histest_report.xml เป็น data

{
    :
    'data': [
        'histest_view.xml',
        'histest_report.xml',
    ],
    :
}

เอกสารครั้งก่อน ๆ

• โค้ดสำหรับการทดสอบครั้งที่ 1 วันที่ 27 มี.ค. 2557 - เกี่ยวกับ web module และการเรียก message