目的: V120502B - 預覽列印 - 標籤列印 - 先預覽再列印
處理說明: 1>$('#my_div1,#break_page1').printThis({importCSS: false, // import parent page css
importStyle: false, // import style tags
loadCSS: "../JsFunction/print.css",
// path to additional css file - use an array [] for multiple
});
});
2>
pub_print_area_Str1 = pub_print_area_Str1
+ "<div style='width: 9cm; height: 5cm;border: 3px solid yellow;' id='my_div" + Tmp_uni + "'>"
+ "<table id = 'my_tbl" + Tmp_uni + "' style='width: 100%; line-height: 9pt; font-size: 6pt;border-collapse:collapse;' border=1px borderstyle='solid' bordercolor='blue' > "
+ "<tr ><th width=30% style='transform: scale(0.7);'>件號<br>(PART NO)</th><td width=70%>" + Tmp_PN + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>EO號碼<br>(EONO)</th><td width=70%>" + Tmp_EOCND + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>日期<br>(DATE)</th><td width=70%>" + Tmp_DT + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>數量<br>(QTY)</th><td width=70%>" + Tmp_QTY + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>工令單號<br>(SOR NO)</th><td width=70%>" + Tmp_SAPNO + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>品保<br>(QC)</th><td width=70%></td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>備註<br>(REMARK)</th><td width=70%>" + Tmp_RMK + "</td></tr>"
+ "</table>"
+ "</div>"
1>*.js
1>>V120502.js
//按鈕 : [列印包裝貼紙]
var BtnAry = [
{
xtype: 'button', text: '列印包裝貼紙', id: 'PrnPackBtn',
listeners: {
click: function () {
//mysuccessalert("列印包裝貼紙 click");
PrnPackBtn_click();
}
}
},
2>>V120502B.js
//[包裝貼紙列印]子視窗.[確定]
function PrnPackBtn_click() {
var sub_Columns = [
{ header: "工號", dataIndex: "SAPNO", width: 150, TMType: "string" },
{ header: "件號", dataIndex: "PN", width: 150, TMType: "string" },
{ header: "數量", dataIndex: "QTY", width: 50, TMType: "string" },
{ header: "EO", dataIndex: "EOCND", width: 150, TMType: "string" },
{ header: "備註", dataIndex: "RMK", width: 200, TMType: "string", },
]
var sub_Fields = [
{ name: "SAPNO" },
{ name: "PN" },
{ name: "QTY" },
{ name: "EOCND" },
{ name: "RMK" },
];
//包籤列印 sub_Grid
var sub_Grid = Ext.create('TMGrid', {
grid_id: 'sub_Grid',
columns: sub_Columns,
autoScroll: true,
flex: 1,
store: Ext.create('gridstore', { model: sub_Fields }),
});
//將子視窗 store 不分頁, PageToolBar.Visible 設為 false , 不分頁
Ext.getCmp('sub_Grid_ptb').setVisible(false);
//[印表機選項]-ComboBox的下拉表單欄位值
var store_PRNLIST = Ext.create("Ext.data.Store", {
fields: ["Name", "Value"],
});
//store_PRNLIST.load();
//[標籤高度] -ComboBox的下拉表單欄位值
var store_LABELH = Ext.create("Ext.data.Store", {
fields: ["Name", "Value"],
data: [
{ Name: "40", Value: 40 },
{ Name: "60", Value: 60 },
{ Name: "70", Value: 70 },
]
});
// [包裝標籤列印]鈕 - 子畫面欄位
var mySub = [
{
type: 'panel', bodyStyle: "background-color:transparent;", border: 0, layout: { type: 'vbox', align: 'stretch' }, padding: "5",
style: { margin: '0px, 0px, 0px, 0px' },
items: [
{
xtype: 'panel',
id: 'sub_panel1',
//title: 'sub2_panel1',
layout: { type: 'hbox', align: 'stretch' },
flex: 5,
border: 1,
items: [
{ //工號
xtype: "fieldcontainer", fieldLabel: "工號", labelWidth: 60, layout: "hbox", flex: 5,
items: [
{ xtype: "textfield", id: "sub_SAPNO", name: "sub_SAPNO", width: 110, padding: "0 4 0 0", },
]
}, // end of 工號
{
xtype: "fieldcontainer", fieldLabel: "", labelWidth: 60, layout: "hbox", flex: 5,
items: [
{
xtype: "checkbox", id: "sub_DT", name: "sub_DT", width: 110, padding: "0 4 0 0",
boxLabelAlign: "after", boxLabel: "不印日期",
},
]
}, // end of 不印日期
{
xtype: 'button',
id: 'sub_btn_Add',
flex: 2,
border: 1,
text: '加入標籤列印', //sub2
iconCls: 'icon-search',
handler: function () {
//alert("加入標籤列印 click");
call_Add_Prn();
}
}, // end of 加入標籤列印
] //end of panel1.items
}, //end of panel1
{ // Grid
xtype: 'panel',
id: 'sub_panel2',
//title: 'sub2_panel2',
layout: { type: 'vbox', align: 'stretch' },
flex: 30,
border: 1,
items: [sub_Grid]
}, //end of panel2
{ // 標籤列印.[確定]鈕
xtype: 'panel',
id: 'sub_panel3',
//title: 'sub2_panel2',
layout: { type: 'hbox', align: 'stretch' },
flex: 5,
border: 1,
items: [
{
xtype: 'panel',
flex: 15,
},
{ //刪除記錄
xtype: 'button',
id: 'sub_btn_DEL',
flex: 4,
border: 1,
text: '刪除記錄', //sub2
iconCls: 'icon-search',
handler: function () {
//alert("刪除記錄 click");
//Tmp_sub_store.remove(record1);
var Tmp_sub_Grid = Ext.getCmp('sub_Grid');
//console.log("Tmp_sub_Grid:", Tmp_sub_Grid);
var cur_recs;
var cur_rec;
cur_recs = Tmp_sub_Grid.selModel.getSelection();
//console.log("cur_recs.length=", cur_recs.length);
if (cur_recs.length == 0) {
mywarnalert("請先選擇要刪除的資料");
return;
}
else {
cur_rec = cur_recs[0];
//console.log("cur_rec:", cur_rec);
//console.log("Tmp_sub_Grid.store:", Tmp_sub_Grid.store);
Tmp_sub_Grid.store.remove(cur_rec);
mysuccessalert("刪除資料完成 !!");
return;
}
} // enf of 刪錄.handler()
}, // end of 刪除記錄
{
xtype: 'button',
id: 'sub_btn_OK1',
flex: 4,
border: 1,
text: '列印預覽', //sub2
iconCls: 'icon-search',
handler: function () {
//[包裝標籤列印]子視窗.確定1_列印預覽
mySub1_OkBtn2_click();
}
}, // end of 確定1- 網頁預覽
{
xtype: 'button',
id: 'sub_btn_Cancel',
flex: 3,
border: 1,
text: '取消', //sub2
iconCls: 'icon-search',
handler: function () {
//alert("取消 click");
this.up("window").close();
this.up("window").destroy();
}
}, // end of 取消
] //end of panel3.items
}, //end of panel3
{ // [預覽列印]鈕 - 放[預覽列印]的 Table_div 元件暫時 panel4
xtype: 'panel',
id: 'sub_panel4',
layout: { type: 'hbox', align: 'stretch', },
style: { margin: '0px, 0px, 0px, 0px', border: 1 },
flex: 5,
border: 1,
items: [],
}, // end of mySub
]
} //end of panel
] // end of mySub
//mysuccessalert("mySub_OkBtn_click ");
var win = getMyWindow("包裝標籤列印", mySub, null);
win.width = 800;
win.height = 600;
win.closeable = true;
win.on('resize', function (me, width, height, eOpts) {
var Tmp_panel1_Height = Ext.getCmp('sub_panel1').getHeight();
var Tmp_panel3_Height = Ext.getCmp('sub_panel3').getHeight();
var Tmp_rHeight = Ext.getCmp('mySubForm').getHeight() - Tmp_panel1_Height - Tmp_panel3_Height - 30;
//console.log("Ext.getCmp('mySubForm').getHeight()=", Ext.getCmp('mySubForm').getHeight());
//console.log("Tmp_panel1_Height=", Tmp_panel1_Height);
//console.log("Tmp_panel3_Height=", Tmp_panel3_Height);
//console.log("Tmp_rHeight=", Tmp_rHeight);
//console.log("win.buttons=", win.buttons);
Ext.getCmp('sub_panel2').setHeight(Tmp_rHeight);
});
//新增 ComboBox[本機印表機選項]
win.on('show', function (me, eOpts) {
console.log("win.onshow");
var np = {};
Ext.Ajax.request({
method: "POST",
url: '../../api/V120502API/Get_PRNLIST',
params: np,
async: false,
success: function (response, opts) {
//console.log("0 response=", response);
//console.log("0 response.responseText=", response.responseText);
var Tmp_Obj = Ext.decode(response.responseText);
//console.log("3 Ext.decode(response.responseText)=", Tmp_Obj);
//解碼成 Tmp_Obj : Array
var Tmp_Name, Tmp_Value;
var cur_rec = {};
for (i = 0; i < Tmp_Obj.length; i++) {
Tmp_Name = Tmp_Obj[i]["Key"];
Tmp_Value = Tmp_Obj[i]["Value"];
cur_rec = { Name: Tmp_Name, Value: Tmp_Value };
//cur_rec = { Name: Tmp_Obj[i]["Key"], Value: Tmp_Obj[i]["Value"] };
//console.log("6 cur_rec= ", cur_rec);
store_PRNLIST.add(cur_rec);
}
}, // end of success
failure: function (response, opts) {
//console.log("Ext.Ajax failure !!");
//console.log("response=", response);
//var obj = Ext.decode(response.responseText);
////var obj = Ext.decode(opts.response.responseText);
////console.log("obj:", obj);
////var Tmp_Str = "資料刪除失敗 !! (" + obj['RtnMsg'] + ")";
//var Tmp_Str = obj['RtnMsg']; //刪除失敗
//mywarnalert(Tmp_Str);
}
}); // end of Ext.Ajax
}); // end of on show event
win.show();
var Tmp_Str = '';
var Tmp_Grid = Ext.getCmp('grid_Single');
var Tmp_store = Tmp_Grid.store; //= gridstore
var Tmp_sub_Grid = Ext.getCmp('sub_Grid');
var Tmp_sub_store = Tmp_sub_Grid.store; //= gridstore
var Tmp_PageCnt = Tmp_store.getCount();
//console.log("分頁共 N 筆 , Tmp_PageCnt =", Tmp_PageCnt);
var cur_rec, Tmp_AMMNO, Tmp_CHECK, Tmp_SAPNO, Tmp_PN, Tmp_QTY, Tmp_EOCND, Tmp_RMK;
var Tmp_OK = true;
var np = {};
var sub_Store_np = {};
var Tmp_SelCnt = 0;
//將主畫面勾選的資料, 加入子視窗.DBGrid
for (i = 0; i < Tmp_PageCnt; i++) {
//console.log("更新第 i 筆", i);
//依目前 store的資料, 更新 AMM_FACDEPD.NWK , PK( DT+DEP+EMPLYID)
cur_rec = Tmp_store.getAt(i);
Tmp_AMMNO = cur_rec.data["AMMNO"];
Tmp_CHECK = cur_rec.data["CHECK"];
Tmp_SAPNO = cur_rec.data["SAPNO"];
Tmp_PN = cur_rec.data["PN"];
Tmp_QTY = cur_rec.data["QTY"];
if (!checkisnull(cur_rec.data["ECNO"])) {
Tmp_EOCND = cur_rec.data["ECNO"] + "+" + cur_rec.data["CNDPROCCODE"];
}
else {
Tmp_EOCND = "";
}
Tmp_RMK = cur_rec.data["ACNO_"];
//若主畫面資料有勾選,則加入 sub_store , sub_store 不分頁
if (Tmp_CHECK) {
sub_Store_np = {
SAPNO: Tmp_SAPNO,
PN: Tmp_PN,
QTY: Tmp_QTY,
EOCND: Tmp_EOCND,
RMK: Tmp_RMK,
}
Tmp_sub_store.add(sub_Store_np);
}
} // end of for i=
Tmp_SelCnt = Tmp_store.getCount();
if (Tmp_SelCnt == 0) {
mywarnalert("請先選擇要列印的資料 !!");
return;
}
} // end of function mySub2_OkBtn_click()
//預覽列印
function mySub1_OkBtn2_click() {
//組合 print_div
//取得是否列印日期
var cur_rec, Tmp_AMMNO, Tmp_CHECK, Tmp_SAPNO, Tmp_PN, Tmp_QTY, Tmp_EOCND, Tmp_RMK, Tmp_DT;
var Tmp_sub_DT = Ext.getCmp('sub_DT').getValue();
console.log("Tmp_sub_DT:", Tmp_sub_DT);
if (Tmp_sub_DT == true)
Tmp_DT = "";
else
Tmp_DT = DatetoStr(now, "Y/m/d");
//取得 sub_store;
var Tmp_sub_Grid = Ext.getCmp('sub_Grid');
var Tmp_sub_store = Tmp_sub_Grid.store; //= gridstore
var Tmp_PageCnt = Tmp_sub_store.getCount();
if (Tmp_PageCnt == 0) {
var Tmp_Str = "請先選擇要列印的資料!!"
mywarnalert(Tmp_Str);
return;
}
var pub_print_area_Str1 = "<div id='print_area' style='border: 5px solid green;'>";
var Tmp_uni = "0";
//my_div1
for (i = 0; i < Tmp_PageCnt; i++) {
//console.log("更新第 i 筆", i);
//依目前 store的資料, 更新 AMM_FACDEPD.NWK , PK( DT+DEP+EMPLYID)
cur_rec = Tmp_sub_store.getAt(i);
Tmp_AMMNO = cur_rec.data["AMMNO"];
Tmp_CHECK = cur_rec.data["CHECK"];
Tmp_SAPNO = cur_rec.data["SAPNO"];
if (checkisnull(Tmp_SAPNO))
Tmp_SAPNO = "";
Tmp_PN = cur_rec.data["PN"];
Tmp_QTY = cur_rec.data["QTY"];
Tmp_EOCND = cur_rec.data["EOCND"];
Tmp_RMK = cur_rec.data["RMK"];
if (checkisnull(Tmp_RMK))
Tmp_RMK = "";
Tmp_uni = (i + 1).toString();
pub_print_area_Str1 = pub_print_area_Str1
+ "<div style='width: 9cm; height: 5cm;border: 3px solid yellow;' id='my_div" + Tmp_uni + "'>"
+ "<table id = 'my_tbl" + Tmp_uni + "' style='width: 100%; line-height: 9pt; font-size: 6pt;border-collapse:collapse;' border=1px borderstyle='solid' bordercolor='blue' > "
+ "<tr ><th width=30% style='transform: scale(0.7);'>件號<br>(PART NO)</th><td width=70%>" + Tmp_PN + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>EO號碼<br>(EONO)</th><td width=70%>" + Tmp_EOCND + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>日期<br>(DATE)</th><td width=70%>" + Tmp_DT + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>數量<br>(QTY)</th><td width=70%>" + Tmp_QTY + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>工令單號<br>(SOR NO)</th><td width=70%>" + Tmp_SAPNO + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>品保<br>(QC)</th><td width=70%></td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>備註<br>(REMARK)</th><td width=70%>" + Tmp_RMK + "</td></tr>"
+ "</table>"
+ "</div>"
//分頁
+ "<div class='display' id='break_page" + Tmp_uni + "' style='break-after:page'></div>";
}; // for (i = 0; i < Tmp_PageCnt; i++) {
//將 [預覽列印]的 Table_div String 加入 子視窗.panel
//將上次的列印資料 remove()
$("#print_area").remove();
var Tmp_sub_panel4 = $('#sub_panel4');
Tmp_sub_panel4.append(pub_print_area_Str1);
var Tmp_Str = "<link type='text/css' rel='stylesheet' href='../JsFunction/print.css' " + " media='print'>";
$('head').append(Tmp_Str);
console.log("0 $('#sub_panel4').width:", $("#sub_panel4").width());
console.log("0 $('#sub_panel4').heigh:", $("#sub_panel4").height());
//var Tmp_prn_div_Str = "'";
var Tmp_prn_div_Str = "";
for (i = 0; i < Tmp_PageCnt; i++) {
Tmp_uni = (i + 1).toString();
Tmp_prn_div_Str = Tmp_prn_div_Str + "#my_div" + Tmp_uni;
if (i != (Tmp_PageCnt - 1))
Tmp_prn_div_Str = Tmp_prn_div_Str + ",#break_page" + Tmp_uni + ",";
}
//if (Tmp_prn_div_Str.length > 0)
//Tmp_prn_div_Str = Tmp_prn_div_Str + "'";
console.log("Tmp_prn_div_Str:", Tmp_prn_div_Str);
//預覽列印
//$('#my_div1,#break_page2,#my_div2,#break_page3,#my_div3').printThis({
$(Tmp_prn_div_Str).printThis({
importCSS: false, // import parent page css
importStyle: false, // import style tags
loadCSS: "../JsFunction/print.css", // path to additional css file - use an array [] for multiple
});
}
