[IMP] stock: picking gui initial commit
bzr revid: fva@openerp.com-20130626083039-vrwwmwulddkirg83
This commit is contained in:
Frédéric van der Essen
parent
a0edfd14e8
commit
b2ec2351e2
|
|
@ -98,7 +98,15 @@ Dashboard / Reports for Warehouse Management will include:
|
|||
'installable': True,
|
||||
'application': True,
|
||||
'auto_install': False,
|
||||
'css': [ 'static/src/css/stock.css' ],
|
||||
'css': [
|
||||
'static/src/css/picking.css',
|
||||
'static/src/css/stock.css',
|
||||
],
|
||||
'js': [
|
||||
'static/src/js/widgets.js',
|
||||
'static/src/js/main.js',
|
||||
],
|
||||
'qweb':['static/src/xml/picking.xml'],
|
||||
}
|
||||
|
||||
# vim:expandtab:smartindent:tabstop=4:softtabstop=4:shiftwidth=4:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,179 @@
|
|||
|
||||
/* ----------------------- *
|
||||
* PICKING WIDGET LAYOUT *
|
||||
* ----------------------- */
|
||||
|
||||
.oe_pick_widget {
|
||||
position: absolute;
|
||||
top: 0px; right: 0px; bottom: 0px; left: 0px;
|
||||
color: #444444;
|
||||
background: #686868;
|
||||
text-shadow: none;
|
||||
font-family: 'Lato';
|
||||
}
|
||||
.oe_pick_widget .oe_pick_layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.oe_pick_widget .oe_pick_header{
|
||||
background: red;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_body_cont{
|
||||
background: blue;
|
||||
height: 100%;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: green;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_app{
|
||||
width: 600px;
|
||||
background: yellow;
|
||||
margin: 40px auto;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_toolbar{
|
||||
width: 600px;
|
||||
background: purple;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_button{
|
||||
display: inline-block;
|
||||
min-width: 120px;
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
background: white;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_right_toolbar{
|
||||
background: blue;
|
||||
float: right;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_col_small{ width: 50px; }
|
||||
.oe_pick_widget .oe_pick_col_medium{ width: 100px; }
|
||||
.oe_pick_widget .oe_pick_col_big{ width: 200px; }
|
||||
.oe_pick_widget .oe_pick_col_expand{ width: 100%; }
|
||||
.oe_pick_widget .oe_invalid{
|
||||
background: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ----------------------- *
|
||||
* PICKING TABLES *
|
||||
* ----------------------- */
|
||||
|
||||
.oe_pick_widget .oe_pick_list{
|
||||
background: red;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.oe_pick_widget .oe_pick_list_header{
|
||||
background: blue;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_list_table{
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
background: greenyellow;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----------------------- *
|
||||
* TACTILE LIST *
|
||||
* ----------------------- */
|
||||
|
||||
.openerp .oe_tactlist {
|
||||
border-radius: 3px;
|
||||
font-size: 18px;
|
||||
background: black;
|
||||
color: white;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_tactlist_header{
|
||||
padding: 5px;
|
||||
font-size: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_vresizer{
|
||||
cursor: ns-resize;
|
||||
height: 15px;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_hresizer{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
color: rgba(255,255,255,0.3);
|
||||
cursor: move;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_scrolltable{
|
||||
position: relative;
|
||||
background: rgb(209,209,209);
|
||||
}
|
||||
.openerp .oe_tactlist td{
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_scrolltable_scroll{
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_scrolltable_header_container{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_scrolltable_header{
|
||||
background: black;
|
||||
color: white;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_scrolltable_body{
|
||||
table-layout: fixed;
|
||||
margin-top: 32px;
|
||||
background: #D6D6D6;
|
||||
color: #444444;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_invalid{
|
||||
background: rgb(255, 192, 192);
|
||||
color: rgb(201, 0, 0);
|
||||
}
|
||||
.openerp .oe_tactlist .oe_scrolltable_body tr:nth-child(even){
|
||||
background: rgba(0,0,0,0.02);
|
||||
}
|
||||
.openerp .oe_tactlist td.oe_small, .openerp .oe_tactlist col.oe_small{ width: 50px; }
|
||||
.openerp .oe_tactlist td.oe_medium, .openerp .oe_tactlist col.oe_medium{ width: 100px; }
|
||||
.openerp .oe_tactlist td.oe_big, .openerp .oe_tactlist col.oe_big{ width: 200px; }
|
||||
.openerp .oe_tactlist td.oe_expand, .openerp .oe_tactlist col.oe_expand{ width: 100%; }
|
||||
|
||||
.openerp .oe_tactlist ::-webkit-scrollbar{
|
||||
width: 15px;
|
||||
background-color: black;
|
||||
}
|
||||
.openerp .oe_tactlist ::-webkit-scrollbar-track{
|
||||
background-color: black;
|
||||
}
|
||||
.openerp .oe_tactlist ::-webkit-scrollbar-thumb{
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
border: solid 4px black;
|
||||
}
|
||||
.openerp .oe_tactlist ::-wekbit-scrollbar-button{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
console.log('Executing picking module');
|
||||
|
||||
openerp.stock = function(instance){
|
||||
|
||||
console.log('Loading stock picking module');
|
||||
|
||||
instance.stock = instance.stock || {};
|
||||
|
||||
openerp_picking_widgets(instance);
|
||||
|
||||
instance.web.client_actions.add('stock.ui', 'instance.stock.PickingMainWidget');
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
|
||||
function openerp_picking_widgets(instance){
|
||||
var module = instance.stock;
|
||||
|
||||
/*
|
||||
* new TactileListWidget(parent,{
|
||||
* height: '500px',
|
||||
* width: '100%',
|
||||
* title: 'Sample List',
|
||||
* collumns: [
|
||||
* {header:'Foobar', classes:'oe_small'},
|
||||
* {header:'Foobar', classes:'oe_medium'},
|
||||
* {header:'' , classes:'oe_big'},
|
||||
* {header:'BarFoo', classes:'oe_expand'},
|
||||
* ],
|
||||
* rows: [
|
||||
* {cols: [0,1,2,3] },
|
||||
* {cols: [1,2,3,4], classes:'oe_selected oe_invalid'},
|
||||
* {cols: [2,1,3,4] },
|
||||
* ]
|
||||
* });
|
||||
*/
|
||||
|
||||
module.TactileListWidget = instance.web.Widget.extend({
|
||||
template: 'TactileListWidget',
|
||||
init: function(parent, options){
|
||||
this._super(parent,options);
|
||||
this._collumns = options.collumns || [];
|
||||
this._rows = options.rows || [];
|
||||
this._title = options.title || '';
|
||||
this._width = options.width || 625;
|
||||
this._height = options.height || 200;
|
||||
this._scrollbarwidth = 15;
|
||||
},
|
||||
renderElement: function(){
|
||||
var self = this;
|
||||
this._super();
|
||||
this.$('.js_vresizer, .js_hresizer').mousedown(function(event){
|
||||
self._startsize = {height: self.get_height(), width: self.get_width()};
|
||||
console.log('drag init:',self._startsize);
|
||||
});
|
||||
this.$('.js_vresizer').drag(function(event,dragevent){
|
||||
self.set_height(self._startsize.height + dragevent.deltaY);
|
||||
});
|
||||
this.$('.js_hresizer').drag(function(event,dragevent){
|
||||
self.set_height(self._startsize.height + dragevent.deltaY);
|
||||
self.set_width(self._startsize.width + dragevent.deltaX);
|
||||
});
|
||||
},
|
||||
get_collumns: function(){
|
||||
return this._collumns;
|
||||
},
|
||||
get_rows: function(){
|
||||
return this._rows;
|
||||
},
|
||||
add_row: function(row){
|
||||
this._rows.push(row);
|
||||
this.renderElement();
|
||||
},
|
||||
get_title: function(){
|
||||
return this._title;
|
||||
},
|
||||
get_width: function(){
|
||||
return this._width;
|
||||
},
|
||||
get_innerwidth: function(){
|
||||
return this._width - this._scrollbarwidth;
|
||||
},
|
||||
set_width: function(width){
|
||||
if(width >= 0){
|
||||
this._width = width;
|
||||
this.$('.js_innerwidth').css({'width':this.get_innerwidth()+'px'});
|
||||
this.$el.css({'width':this.get_width()+'px'});
|
||||
}
|
||||
},
|
||||
get_height: function(){
|
||||
return this._height;
|
||||
},
|
||||
set_height: function(height){
|
||||
if(height >= 0){
|
||||
this._height = height;
|
||||
this.$('.js_height').css({'height':this.get_height()+'px'});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
module.PickingEditorWidget = instance.web.Widget.extend({
|
||||
template: 'PickingEditorWidget',
|
||||
get_header: function(){
|
||||
return 'Picking: INTERNAL/00112';
|
||||
},
|
||||
get_rows: function(){
|
||||
return [
|
||||
{ cols: { product:'abc', qty:1, rem: 4, uom: 5, loc: 'def', stat: 'available' }, },
|
||||
{ cols: { product:'dec', qty:2, rem: 3, uom: 5, loc: 'rcd', stat: 'available' }, classes: 'oe_invalid' },
|
||||
{ cols: { product:'qcr', qty:4, rem: 4, uom: 5, loc: 'hre', stat: 'unavailable' }, },
|
||||
];
|
||||
},
|
||||
});
|
||||
|
||||
module.PackageEditorWidget = instance.web.Widget.extend({
|
||||
template: 'PackageEditorWidget',
|
||||
get_header: function(){
|
||||
return 'Package: 032 ';
|
||||
},
|
||||
get_rows: function(){
|
||||
return [
|
||||
{ cols: { product:'abc', qty:1, uom: 5, }, },
|
||||
{ cols: { product:'dec', qty:2, uom: 5, }, classes: 'oe_invalid' },
|
||||
{ cols: { product:'qcr', qty:4, uom: 5, }, },
|
||||
];
|
||||
},
|
||||
});
|
||||
|
||||
module.PackageSelectorWidget = instance.web.Widget.extend({
|
||||
template: 'PackageSelectorWidget',
|
||||
get_header: function(){
|
||||
return 'Package Selector';
|
||||
},
|
||||
get_rows: function(){
|
||||
return [
|
||||
{ cols: { pack:'abc' }, },
|
||||
{ cols: { pack:'def' }, classes: 'oe_invalid' },
|
||||
{ cols: { pack:'ghi' }, },
|
||||
];
|
||||
},
|
||||
increment: function(){
|
||||
},
|
||||
decrement: function(){
|
||||
},
|
||||
});
|
||||
|
||||
module.PickingMainWidget = instance.web.Widget.extend({
|
||||
template: 'PickingMainWidget',
|
||||
init: function(){
|
||||
|
||||
},
|
||||
start: function(){
|
||||
var self = this;
|
||||
instance.webclient.set_content_full_screen(true);
|
||||
|
||||
var picking_editor = new module.PickingEditorWidget(this);
|
||||
picking_editor.replace(this.$('.oe_placeholder_picking_editor'));
|
||||
|
||||
var package_editor = new module.PackageEditorWidget(this);
|
||||
package_editor.replace(this.$('.oe_placeholder_package_editor'));
|
||||
|
||||
var package_selector = new module.PackageSelectorWidget(this);
|
||||
package_selector.replace(this.$('.oe_placeholder_package_selector'));
|
||||
|
||||
return this._super();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
|
||||
<t t-name="TactileListWidget">
|
||||
<div class='oe_tactlist js_width' t-att-style="'width:' + widget.get_width() + 'px'">
|
||||
<div class='oe_tactlist_header'>
|
||||
<t t-esc='widget.get_title()' />
|
||||
</div>
|
||||
|
||||
<div class='oe_scrolltable js_height' t-att-style="'height:' + widget.get_height() + 'px'">
|
||||
<div class='oe_scrolltable_scroll'>
|
||||
<div class='oe_scrolltable_header_container js_innerwidth' t-att-style="'width:' + widget.get_innerwidth() + 'px'">
|
||||
<table class='oe_scrolltable_header js_innerwidth' >
|
||||
<tbody>
|
||||
<tr>
|
||||
<t t-foreach="widget.get_collumns()" t-as="col">
|
||||
<td t-att-class="col.classes">
|
||||
<t t-esc="col.header" />
|
||||
</td>
|
||||
</t>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class='oe_scrolltable_body js_innerwidth' t-att-style="'width:' + widget.get_innerwidth() + 'px'">
|
||||
<colgroup>
|
||||
<t t-foreach="widget.get_collumns()" t-as="col">
|
||||
<col t-att-class="col.classes"></col>
|
||||
</t>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<t t-foreach="widget.get_rows()" t-as="row">
|
||||
<tr t-att-class="row.classes">
|
||||
<t t-foreach="row.cols" t-as="col">
|
||||
<td><t t-esc="col" /></td>
|
||||
</t>
|
||||
</tr>
|
||||
</t>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class='oe_vresizer js_vresizer'>
|
||||
<span class='oe_hresizer js_hresizer'>●</span>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name='PickingEditorWidget'>
|
||||
<div class='oe_pick_list'>
|
||||
<div class='oe_pick_list_header'><t t-esc="widget.get_header()" /></div>
|
||||
<table class='oe_pick_list_table'>
|
||||
|
||||
<colgroup>
|
||||
<col class='oe_pick_col_expand'></col>
|
||||
<col class='oe_pick_col_small'></col>
|
||||
<col class='oe_pick_col_small'></col>
|
||||
<col class='oe_pick_col_small'></col>
|
||||
<col class='oe_pick_col_expand'></col>
|
||||
<col class='oe_pick_col_expand'></col>
|
||||
</colgroup>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product</th> <th>Qty</th> <th>Rem</th> <th>UoM</th> <th>Location</th> <th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<t t-foreach="widget.get_rows()" t-as="row">
|
||||
<tr t-att-class="row.classes">
|
||||
<td> <t t-esc="row.cols.product" /> </td>
|
||||
<td> <t t-esc="row.cols.qty" /> </td>
|
||||
<td> <t t-esc="row.cols.rem" /> </td>
|
||||
<td> <t t-esc="row.cols.uom" /> </td>
|
||||
<td> <t t-esc="row.cols.loc" /> </td>
|
||||
<td> <t t-esc="row.cols.stat" /> </td>
|
||||
</tr>
|
||||
</t>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name='PackageEditorWidget'>
|
||||
<div class='oe_pick_list'>
|
||||
<div class='oe_pick_list_header'> <t t-esc="widget.get_header()" /> </div>
|
||||
<table class='oe_pick_list_table'>
|
||||
|
||||
<colgroup>
|
||||
<col class='oe_pick_col_expand'></col>
|
||||
<col class='oe_pick_col_small'></col>
|
||||
<col class='oe_pick_col_small'></col>
|
||||
</colgroup>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product</th> <th>Qty</th> <th>UoM</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<t t-foreach="widget.get_rows()" t-as="row">
|
||||
<tr t-att-class="row.classes">
|
||||
<td> <t t-esc="row.cols.product" /> </td>
|
||||
<td> <t t-esc="row.cols.qty" /> </td>
|
||||
<td> <t t-esc="row.cols.uom" /> </td>
|
||||
</tr>
|
||||
</t>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name='PackageSelectorWidget'>
|
||||
<div class='oe_pick_list'>
|
||||
<div class='oe_pick_list_header'> <t t-esc="widget.get_header()" /> </div>
|
||||
<table class='oe_pick_list_table'>
|
||||
|
||||
<colgroup>
|
||||
<col class='oe_pick_col_expand'></col>
|
||||
<col class='oe_pick_col_small'></col>
|
||||
<col class='oe_pick_col_small'></col>
|
||||
</colgroup>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Package</th> <th></th> <th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<t t-foreach="widget.get_rows()" t-as="row">
|
||||
<tr t-att-class="row.classes">
|
||||
<td> <t t-esc="row.cols.pack" /> </td>
|
||||
<td> + </td>
|
||||
<td> - </td>
|
||||
</tr>
|
||||
</t>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="PickingMainWidget">
|
||||
<div class='oe_pick_widget'>
|
||||
<table class='oe_pick_layout'>
|
||||
<tr class='oe_pick_header_row'>
|
||||
<td class='oe_pick_header'>
|
||||
|
||||
<div class='oe_pick_right_toolbar'>
|
||||
<div class='oe_pick_button js_pick_quit'> Quit </div>
|
||||
</div>
|
||||
|
||||
<div class='oe_pick_toolbar'>
|
||||
<div class='oe_pick_button js_pick_pack'> Pack </div>
|
||||
<div class='oe_pick_button js_pick_reset'> Reset </div>
|
||||
<div class='oe_pick_button js_pick_done'> Done </div>
|
||||
</div>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr class='oe_pick_body_row'>
|
||||
<td class='oe_pick_body_cont'>
|
||||
<div class='oe_pick_body'>
|
||||
<div class='oe_pick_app'>
|
||||
|
||||
<div class='oe_placeholder_picking_editor'></div>
|
||||
<div class='oe_placeholder_package_editor'></div>
|
||||
<div class='oe_placeholder_package_selector'></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
Loading…
Reference in New Issue