Hi all,
i have made this Page (ERPNext) based on some codes from open source …
Because we have a customer that needs to print Barcodes for all items or the ones he selects so we had to start this… not yet Tuned but works… reason why sharing if anyone needs.
Ps. Need local access Server in order to put the Code in your JS (page). You need to add also Slick.checkboxselectcolumn and slick.rowselectionmodel under you Public JS/Lib
==== CODE
var grid;
var dadoss =[];
var columnpicker = “”;
frappe.pages[‘imprimir-item-barcod’].on_page_load = function(wrapper) {
frappe.imprimir_item_barcod = new frappe.Imprimir_item_barcode(wrapper);
}
frappe.Imprimir_item_barcode = Class.extend({
init: function (parent) {
frappe.ui.make_app_page({
parent: parent,
title: 'Imprimir BarCode para Itens',
single_column: false
});
this.parent = parent;
this.page = this.parent.page;
this.page.sidebar.html(`<ul class="module-sidebar-nav overlay-sidebar nav nav-pills nav-stacked"></ul>`);
this.$sidebar_list = this.page.sidebar.find('ul');
var me = this;
console.log('SlickGrid Table...')
var colunas = []
var checkboxSelector = new Slick.CheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel"
});
colunas.push(checkboxSelector.getColumnDefinition());
colunas.push({ id: 'col0', name: 'Codigo', field: 'name', width: 100 },
{ id: 'col1', name: 'Descricao', field: 'item_name', width: 100},
{ id: 'col2', name: 'Codigo Barras', field: 'barcode', width: 100},
{ id: 'col3', name: 'Preco', field: 'preco', width: 50}
);
var opcoes = {
enableCellNavigation: true,
enableColumnReorder: false,
forceFitColumns: true
};
$("<table width='100%>\
<tr>\
<td valign='top' width='100%'>\
<div id='demo_grid' style='width:100%;height:1000px;''></div>\
</td>\
</tr>\
</table>").appendTo($(me.page.wrapper).find('.layout-main-section'));
$("<script src='https://cdn.jsdelivr.net/jsbarcode/3.3.7/JsBarcode.all.min.js'></script> \
<style> @media print { .page { width:21cm; height:29.7cm; margin: 0; border: initial; border-radius: initial; width: initial; \
min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } } </style> \
<div id='block' class='col-12 col-print-12' width:100%> \
<div class='image-view-body' style='text-align:center;> \
<a data-item-code='{{ barcode }}' \
> \
<a id='nome' style='text-align:center;font-size:9px'>PP</a>\
<br><a id='preco' style='text-align:center;font-size:10px'>PRECO</a> \
<div class='image-field' \
style='border: 0px;' \
> \
<span class='placeholder-text'> \
<svg id='barcode'></svg> \
</span> \
</div> \
<span class='item-info'> \
<a id='data' style='text-align:center;font-size:9px'>DATA</a> \
</span> \
</a> \
<p style='page-break-after: always'> </p>\
</div>").appendTo($(me.page.wrapper).find('.layout-main-section'));
//Select from Item with Barcode
frappe.call({
method: "frappe.client.get_list",
args:{
doctype: "Item",
filters: [
["disabled", "=", 0],
["barcode", "!=", ""]
],
fields: ['name','item_name','barcode','standard_rate']
},
callback: function(r){
if (r.message){
$.each(r.message, function(i,d){
dadoss.push({name:d.name,item_name:d.item_name,barcode:d.barcode,preco:d.standard_rate})
});
}
}
});
grid = new Slick.Grid("#demo_grid", dadoss, colunas, opcoes);
grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
grid.registerPlugin(checkboxSelector);
columnpicker = new Slick.Controls.ColumnPicker(colunas, grid, opcoes);
console.log(columnpicker)
this.message = null;
this.make();
},
make: function () {
var me = this;
this.imprimir = this.page.add_field({
fieldname:"imprimir",
label: __("Imprimir"),
fieldtype: "Button"
});
console.log('botao')
this.imprimir.$input.on("click", function() {
console.log('tt print')
//Select all from table dadoss
console.log('Select all from table dadoss')
if (dadoss.length != 0){
console.log('seelced')
console.log(grid.getSelectedRows());
var checkedRows = grid.getSelectedRows();
var html="<html>";
console.log(checkedRows)
if (checkedRows.length !=0){
for (dd in checkedRows){
JsBarcode("#barcode", grid.getDataItem(checkedRows[dd]).barcode,{
width:1,
height:25,
fontSize:12,
flat: true,
displayValue: true
});
html+= document.getElementById('block').innerHTML;
//html+= document.getElementById('nome').value = 'TESTE1';
html = html.replace('PP', grid.getDataItem(checkedRows[dd]).item_name)
html = html.replace('PRECO', grid.getDataItem(checkedRows[dd]).preco)
html = html.replace('DATA', moment(frappe.datetime.now_date()).format('DD-MM-YYYY'))
html+="</html>";
}
}else{
for (dd in dadoss) {
//console.log(dd)
JsBarcode("#barcode", dadoss[dd].barcode,{
width:1,
height:25,
fontSize:12,
flat: true,
displayValue: true
});
html+= document.getElementById('block').innerHTML;
//html+= document.getElementById('nome').value = 'TESTE1';
html = html.replace('PP', dadoss[dd].item_name)
html = html.replace('PRECO', dadoss[dd].preco)
html = html.replace('DATA', moment(frappe.datetime.now_date()).format('DD-MM-YYYY'))
html+="</html>";
}
}
var printWin = window.open('','','left=0,top=0,width=1350,height=850,toolbar=0,scrollbars=0,status=0,resizable=1');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
})
},
});