WebDesign 心得綜整: 預覽

目的: 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
});

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',

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',

flex: 30,

border: 1,

items: [sub_Grid]

}, //end of panel2

{ // 標籤列印.[確定]鈕

xtype: 'panel',

id: 'sub_panel3',

//title: 'sub2_panel2',

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',

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 + "'>"