|
|
|
|
@ -79,10 +79,42 @@ DingDan/DD_OrderListForTM2.aspx
|
|
|
|
|
justify-self: flex-start;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media print {
|
|
|
|
|
@page {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
body * {
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
#printArea, #printArea * {
|
|
|
|
|
visibility: visible;
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
height:unset !important;
|
|
|
|
|
max-width: 100vw;
|
|
|
|
|
max-height: 100vh;
|
|
|
|
|
aspect-ratio: 900 / 660;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
#printArea {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
max-width: 100vw;
|
|
|
|
|
max-height: 100vh;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
page-break-after: avoid;
|
|
|
|
|
display:flex;
|
|
|
|
|
justify-content:center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.6.2/jQuery.print.min.js" integrity="sha512-t3XNbzH2GEXeT9juLjifw/5ejswnjWWMMDxsdCg4+MmvrM+MwqGhxlWeFJ53xN/SBHPDnW0gXYvBx/afZZfGMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
|
<script src="../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
|
|
|
|
|
<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
|
|
|
|
|
<script src="../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
|
|
|
|
|
@ -145,6 +177,26 @@ DingDan/DD_OrderListForTM2.aspx
|
|
|
|
|
num = num - 1;
|
|
|
|
|
$("#a_select").html("已选中" + num + "条");
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$("#" + datagrid1.TableID + " [CommandName='cmdImg']").live("click", function () {
|
|
|
|
|
var RowIndex = $(this).parentsUntil("tr").parent().attr("index");
|
|
|
|
|
var model = datagrid1.Get_Model(RowIndex);
|
|
|
|
|
$("#img_1").attr("src", model.ImageUrls[0]);
|
|
|
|
|
$("#div_img").empty();
|
|
|
|
|
model.ImageUrls.forEach(pic=>{
|
|
|
|
|
$("#div_img").append("<img src='../" + pic + "' width='100px' height='80px' style='margin-right:5px'/>");
|
|
|
|
|
})
|
|
|
|
|
$.fancybox({
|
|
|
|
|
'width': '40%',
|
|
|
|
|
'height': '40%',
|
|
|
|
|
'autoScale': false,
|
|
|
|
|
'transitionIn': 'elastic',
|
|
|
|
|
'transitionOut': 'elastic',
|
|
|
|
|
'href': '#test3',
|
|
|
|
|
'onComplete': function () {}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 初始化DataGrid
|
|
|
|
|
@ -172,7 +224,7 @@ DingDan/DD_OrderListForTM2.aspx
|
|
|
|
|
|
|
|
|
|
col = new nblf.ui.DataGridColumn();
|
|
|
|
|
col.HeaderText = "Photo";
|
|
|
|
|
col.CellTemplate = "<img src='{Bind firstImg}' alt='' width='50px' height='50px'/>";
|
|
|
|
|
col.CellTemplate = "<a CommandName='cmdImg' iul='{Bind firstImg}'><img src='{Bind firstImg}' alt='' width='50px' height='50px'/></a>";
|
|
|
|
|
Array.add(datagrid1.Columns, col);
|
|
|
|
|
|
|
|
|
|
var col = new nblf.ui.DataGridColumn();
|
|
|
|
|
@ -256,7 +308,7 @@ DingDan/DD_OrderListForTM2.aspx
|
|
|
|
|
col.Width = "100px";
|
|
|
|
|
col.CellTemplate = "{Bind orginData}";
|
|
|
|
|
col.CellFormatter = function (data) {
|
|
|
|
|
var OptionStr = "";
|
|
|
|
|
var OptionStr = "<input onclick='PrintBarcode(this)' class='btnClass dgbtnEdit' type='button' value='Print BarCode'></input>";
|
|
|
|
|
var status = data.Status
|
|
|
|
|
switch (status) {
|
|
|
|
|
case 1:
|
|
|
|
|
@ -322,6 +374,7 @@ DingDan/DD_OrderListForTM2.aspx
|
|
|
|
|
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
|
|
|
|
|
success: function (data) {
|
|
|
|
|
WindowLoadModel.Hide();
|
|
|
|
|
data.d.DataSource = data.d.DataSource ? data.d.DataSource : []
|
|
|
|
|
data.d.DataSource.forEach(it=>{
|
|
|
|
|
it.orginData = JSON.parse(JSON.stringify(it))
|
|
|
|
|
it.firstImg = it.ImageUrls && it.ImageUrls.length ? it.ImageUrls[0] : ""
|
|
|
|
|
@ -442,6 +495,27 @@ DingDan/DD_OrderListForTM2.aspx
|
|
|
|
|
}
|
|
|
|
|
//#endregion
|
|
|
|
|
|
|
|
|
|
//#region 打印条码图片
|
|
|
|
|
async function PrintBarcode(obj) {
|
|
|
|
|
var rowindex = $(obj).parent().parent().attr("index");
|
|
|
|
|
var model = datagrid1.Get_Model(rowindex);
|
|
|
|
|
model.date = formatDate(model.CreationTime)
|
|
|
|
|
console.log(model)
|
|
|
|
|
const canvas = await generateImage(model);
|
|
|
|
|
document.getElementById('printArea').appendChild(canvas);
|
|
|
|
|
window.print()
|
|
|
|
|
document.getElementById('printArea').removeChild(canvas);
|
|
|
|
|
//$(canvas).print()
|
|
|
|
|
|
|
|
|
|
//SelectList = [obj]
|
|
|
|
|
//var printedIds = SelectList.map(it => it.Id)
|
|
|
|
|
//var uploadIds = SelectList.filter(it => it.Status == 1).map(it => it.Id)
|
|
|
|
|
//BatChangeIsPrinted(printedIds);
|
|
|
|
|
//generateAndDownload(SelectList)
|
|
|
|
|
//BatUploadGoods(uploadIds);
|
|
|
|
|
}
|
|
|
|
|
//#endregion
|
|
|
|
|
|
|
|
|
|
//#region 批量修改打印状态
|
|
|
|
|
function BatChangeIsPrinted(Ids) {
|
|
|
|
|
var param = {
|
|
|
|
|
@ -516,57 +590,48 @@ DingDan/DD_OrderListForTM2.aspx
|
|
|
|
|
}
|
|
|
|
|
// 生成条码图片
|
|
|
|
|
async function generateImage(item) {
|
|
|
|
|
// 创建画布
|
|
|
|
|
// 创建画布 - 使用A4横向比例
|
|
|
|
|
const canvas = document.createElement('canvas');
|
|
|
|
|
canvas.width = 900;
|
|
|
|
|
canvas.height = 660;
|
|
|
|
|
canvas.width = 1000;
|
|
|
|
|
canvas.height = 707;
|
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
|
|
|
|
|
// 填充白色背景
|
|
|
|
|
ctx.fillStyle = 'white';
|
|
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
|
|
|
|
|
// 添加SKU
|
|
|
|
|
// 添加SKU到左上角
|
|
|
|
|
ctx.fillStyle = 'black';
|
|
|
|
|
ctx.font = '48px SimHei';
|
|
|
|
|
ctx.fillText(item.SkuCode, 30, 60);
|
|
|
|
|
ctx.font = '56px SimHei';
|
|
|
|
|
ctx.fillText(item.SkuCode, 50, 80);
|
|
|
|
|
|
|
|
|
|
// 添加日期，右对齐
|
|
|
|
|
ctx.font = '40px SimHei';
|
|
|
|
|
const dateWidth = ctx.measureText(item.date).width; // 测量文本宽度
|
|
|
|
|
ctx.fillText(item.date, canvas.width - 30 - dateWidth, 60); // 从右边缘减去文本宽度和边距
|
|
|
|
|
// 添加更大更粗的BarCode文字在正中央
|
|
|
|
|
ctx.font = 'bold 200px SimHei';
|
|
|
|
|
const codeText = item.BarCode;
|
|
|
|
|
const codeWidth = ctx.measureText(codeText).width;
|
|
|
|
|
const centerX = (canvas.width - codeWidth) / 2;
|
|
|
|
|
const centerY = (canvas.height + 100) / 2;
|
|
|
|
|
ctx.fillText(codeText, centerX, centerY);
|
|
|
|
|
|
|
|
|
|
// 生成条形码
|
|
|
|
|
// 生成缩小的条形码
|
|
|
|
|
const barcodeCanvas = document.createElement('canvas');
|
|
|
|
|
JsBarcode(barcodeCanvas, item.BarCode, {
|
|
|
|
|
format: "CODE128",
|
|
|
|
|
width: 6,
|
|
|
|
|
height: 300,
|
|
|
|
|
displayValue: true,
|
|
|
|
|
fontSize: 48,
|
|
|
|
|
width: 3,
|
|
|
|
|
height: 100,
|
|
|
|
|
displayValue: false,
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
fontOptions: "bold",
|
|
|
|
|
textMargin: 10,
|
|
|
|
|
textMargin: 0,
|
|
|
|
|
font: "SimHei"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 将条形码绘制到主画布
|
|
|
|
|
ctx.drawImage(barcodeCanvas, 150, 120);
|
|
|
|
|
// 将条形码绘制到右下角
|
|
|
|
|
ctx.drawImage(barcodeCanvas, canvas.width - barcodeCanvas.width - 50, canvas.height - 180);
|
|
|
|
|
|
|
|
|
|
// 添加物流跟踪号
|
|
|
|
|
ctx.font = '40px SimHei';
|
|
|
|
|
ctx.fillText(`${item.TrackingCode}`, 30, 560);
|
|
|
|
|
|
|
|
|
|
// 添加分割线
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.moveTo(30, 580);
|
|
|
|
|
ctx.lineTo(870, 580);
|
|
|
|
|
ctx.strokeStyle = 'black';
|
|
|
|
|
ctx.lineWidth = 3;
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
|
|
|
|
|
// 添加提示文字
|
|
|
|
|
ctx.font = '35px Arial';
|
|
|
|
|
ctx.fillText('Notice: This product cannot be returned or exchanged', 30, 630);
|
|
|
|
|
// 添加物流追踪号在左下角
|
|
|
|
|
ctx.font = '56px SimHei';
|
|
|
|
|
ctx.fillText(item.TrackingCode, 50, canvas.height - 75);
|
|
|
|
|
|
|
|
|
|
return canvas;
|
|
|
|
|
}
|
|
|
|
|
@ -832,6 +897,25 @@ DingDan/DD_OrderListForTM2.aspx
|
|
|
|
|
<div id="DataGrid2" class="DataGridStyle"></div>
|
|
|
|
|
<input onclick='RetrieveOrderUsedSalePlatformLabel()' class='btnClass dgbtnEdit' type='button' value='重新获取'></input>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 图片预览弹框 -->
|
|
|
|
|
<div id="test3" title="货物图片" style="width: 700px; height: 500px;">
|
|
|
|
|
<table width="95%" class="tableAll" border="1" ellspacing="0" cellpadding="2">
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="2" align="center">
|
|
|
|
|
<img src="" width="500px" height="350px" id="img_1" />
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td style="width: 80px;" class="f1">
|
|
|
|
|
图片：
|
|
|
|
|
</td>
|
|
|
|
|
<td align="left"><div id="div_img"></div></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="printArea"></div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
