HTML:
<form id="form1">
<div id="t_border">
<!--startprint-->
<div id="first">
<span id="title">****汽车服务连锁施工单</span>
</div>
<table id="TableTitle" style="width:1200px;margin-bottom:10px;">
<tr>
<td id="memberCard"></td>
<td id="deName"></td>
<td id="orderDate"></td>
</tr>
<tr>
<td id="memberType"></td>
<td id="consumeType"></td>
<td id="handleMan"></td>
</tr>
</table>
<table id="pTable">
</table>
<table id="TableFoot" style="width:1200px;margin-top:10px;">
<tr>
<td id="orderMemo"></td>
</tr>
<tr>
<td id="workHours"></td>
<td id="technician"></td>
<td id="payWay"></td>
</tr>
<tr>
<td id="receiveM"></td>
<td id="cutMoney"></td>
<td id="totalM"></td>
</tr>
</table>
<table id="custSign">
<tr>
<td>技师签字:________________________</td>
<td style="width:420px;"></td>
<td>客户签字:________________________</td>
</tr>
</table>
<div id="address">
<span>地址:****汽车服务连锁</span><span> 加盟电话:400-990-8816 / 0371-555111333</span>
<!-- <span id="printTime"></span> -->
</div>
<!--endprint-->
<div></div>
</div>
<div id="dayin">
<input id="print" type="button" name="print" value="打印" οnclick="preview()" />
</div>
</form>
JS:
$(function () {
//动态生成打印订单
var tr = " <tr id=\"title1\"><td style=\"width: 70px;\">编码</td><td style=\"width: 180px;\">商品名称
</td><td style=\"width: 60px;\">规格</td><td style=\"width: 80px;\">型号</td><td style=\"width: 60px;\">单
位</td><td style=\"width: 60px;\">数量</td> <td style=\"width: 70px;\">单价</td><td style=\"width: 70px;\">
金额</td><td style=\"width: 80px;\">备注</td></tr>";
$.parser.parse($("#pTable").html(tr.toString()));
//消费清单列表
$.post('../Ajax/MemberConsumAjax.ashx?cmd=getMemberCon', { 'mclId': top.jQuery("#printId").val() },
function (result) {
var result = eval('(' + result + ')');
$.each(result.list, function (i, purList) {
if (purList.memberType == "非会员") {
$("#memberCard").text("车主:" + purList.cust_Name);
} else {
$("#memberCard").text("会员卡号:" + purList.memberId);
}
$("#deName").text("消费门店:" + purList.deName1);
$("#orderDate").text("单据日期:" + purList.or_Date);
$("#handleMan").text("经手人:" + purList.handleMan);
$("#memberType").text("会员类型:" + purList.memberType);
$("#consumeType").text("消费类型:" + purList.consumeType);
var memo = "";
if (purList.or_Memo == null) {
$("#orderMemo").text("备注:" + memo);
} else {
$("#orderMemo").text("备注:" + purList.or_Memo);
}
$("#totalM").text("总金额:"+purList.or_TotalM1);
$("#receiveM").text("应收金额:"+purList.recieveM);
$("#cutMoney").text("优惠金额:"+purList.cutMoney);
if (purList.workHours != null) {
$("#workHours").text("工时:" + purList.workHours);
} else {
$("#workHours").text("工时:");
}
if (purList.technician != null) {
$("#technician").text("技师:" + purList.technician);
} else {
$("#technician").text("技师:");
}
$("#payWay").html("");
if (purList.memberType == "非会员") {
var payWay = "";
if (1 == purList.pw_Id1) {
payWay += "<input name=\"payWay\" type=\"checkbox\" disabled=\"disabled\" checked=
\"checked\" />现金";
}
if (2 == purList.pw_Id2) {
payWay += "<input name=\"payWay\" type=\"checkbox\" disabled=\"disabled\" checked=
\"checked\" />银行卡";
}
if (3 == purList.pw_Id3) {
payWay += "<input name=\"payWay\" type=\"checkbox\" disabled=\"disabled\" checked=
\"checked\" />微信";
}
if (4 == purList.pw_Id4) {
payWay += "<input name=\"payWay\" type=\"checkbox\" disabled=\"disabled\" checked=
\"checked\" />支付宝";
}
if (5 == purList.pw_Id5) {
payWay += "<input name=\"payWay\" type=\"checkbox\" disabled=\"disabled\" checked=
\"checked\" />美团";
}
$.parser.parse($("#payWay").html("支付方式:" + payWay.toString()));
}
//明细
$.post('../Ajax/MemberConsumAjax.ashx?cmd=memberConsum', { 'mclId': top.jQuery("#printId").val
(), 'de_Id': purList.de_Id1 }, function (result) {
var result = eval('(' + result + ')');
$.each(result.rows, function (i, retail) {
var g_Size = "";
var g_Version = "";
var g_Unit = "";
if (retail.g_Size != null) {
g_Size = retail.g_Size;
}
if (retail.g_Version != null) {
g_Version = retail.g_Version;
}
if (retail.g_Unit != null) {
g_Unit = retail.g_Unit;
}
//截取过长的商品名称
var g_Name = "";
if (retail.g_Name.length > 35) {
g_Name = retail.g_Name.substring(0, 20) + "......";
} else {
g_Name = retail.g_Name;
}
tr += " <tr><td>" + retail.g_Code + "</td><td>" + g_Name + "</td><td>" + g_Size +
"</td><td>" + g_Version + "</td><td>" + g_Unit + "</td><td>" + retail.number + "</td><td>" + retail.price +
"</td><td>" + retail.totalMoney + "</td>";
if (retail.memo != null) {
tr += "<td>" + retail.memo + "</td>";
} else {
tr += "<td></td>";
}
tr += "</tr>";
});
$.parser.parse($("#pTable").html(tr.toString()));
});
return false;
});
});
//无预览,直接打印
if (top.jQuery("#isPreOrPrint").val() == "print") {
bdhtml = window.document.body.innerHTML;
sprnstr = "<!--startprint-->";
eprnstr = "<!--endprint-->";
prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
window.document.body.innerHTML = prnhtml;
window.print();
}
});
//打印日期
function PrintTime() {
var date = new Date();
var seperator1 = "/";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var secondes = date.getSeconds();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
if (hours >= 0 && hours <= 9) {
hours = "0" + hours;
}
if (minutes >= 0 && minutes <= 9) {
minutes = "0" + minutes;
}
if (secondes >= 0 && secondes <= 9) {
secondes = "0" + secondes;
}
var currentTime = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + hours + seperator2 + minutes + seperator2 + secondes;
return currentTime;
}
//打印
function preview() {
bdhtml = window.document.body.innerHTML;
sprnstr = "<!--startprint-->";
eprnstr = "<!--endprint-->";
prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
window.document.body.innerHTML = prnhtml;
window.print();
//prnform.htext.value=prnhtml;
//prnform.submit();
//alert(prnhtml);
}
//获取当前日期并格式化
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
return currentdate.toString();
}
CSS:
body {font-size: 25px;}
li { float: left;list-style-type: none;}
#t_border { border: 1px dashed #ccc; width: 1200px; padding: 50px; margin: 50px;}
table { border-collapse: collapse; width: 1200px;margin: 0 0;}
table td {border: 1px solid #000; text-align: center; height: 35px; line-height: 35px; }
/*表格样式*/
#TableTitle tr td,#TableFoot tr td,#custSign tr td{padding:0; margin:0;border:none ;text-align:left; }
#TableTitle, #TableFoot,#custSign { margin-left:10px;}
#TableFoot { width:1200px;}
#title1 { height: 45px;line-height: 45px;}
#dayin ,#DayIn{ text-align: center;}
#first { width: 1200px;margin-bottom: 10px;}
#title { font-family: Microsoft YaHei; font-size: 46px;padding-left: 270px;}
#printTime { float: right;}
#f2 {margin-top:10px;}
#sign {float:right;margin-right:100px;}
#mSign { margin-top:50px;}
#address {margin-left:9px;margin-top:20px;}
#pTable {margin-top:5px;}
#reFoot {margin-top: 20px; width: 1200px; margin-left:-40px;}