erp/Web/EDelivery/QROrder.aspx

<%@ Page Language="C#" MasterPageFile="~/MasterPage/ErpView.master" AutoEventWireup="true" CodeFile="QROrder.aspx.cs" Inherits="EDelivery_QROrder" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript" src="../js/jcPrinterSdk_api_third.js"></script>
    <script type="text/javascript" src="../js/jquery.qrcode.min.js"></script>
    <script>

        //查询按钮
        function searchFn() {
            var form = new mini.Form("#ctl00_f_all");
            var data = form.getData(true, false);
            var s = data;
            //var s = mini.encode(data);
            //alert(s);
            //form.setIsValid(false);
            //console.log("565656565", data);
            grid.load({
                ctid: s.tid, shopname: s.shop, buyer_nick: s.ww, orderState: s.state, order_area: s.order_area, address: s.address,
                placedate1: s.placedate1, placedate2: s.placedate2, seller_memo: s.memo, supplier: s.supplier, unusualcon: s.unusualcon
            });
        }
        //清除查询内容
        function clearFn() {
            //$("#ctl00_f_all").find("input").val("");
            var form = new mini.Form("#ctl00_f_all");
            form.clear();
        }

        function copyImage(ctid, text) {
            document.getElementById("qrcodeImage").innerHTML = '';
            const qrcodeImage = $('#qrcodeImage').qrcode({ width: 200, height: 200, text: utf16to8(ctid) });
            const canvas = qrcodeImage.find("canvas").get(0);

            //二维码宽高
            let qrcodewidth = 200;
            let qrcodeheight = 200;
            //canvas宽高
            let canvaswidth = qrcodewidth;
            let canvasheight = qrcodeheight;
            //logo宽高
            let logowidth = 100;
            let logoheight = 100;
            //文字描述位置
            let textleft = 0;
            let texttop = qrcodeheight + 20;
            //logo位置
            let logoleft = (qrcodewidth - logowidth) / 2;
            let logotop = (qrcodeheight - logoheight) / 2;

            let img = new Image();
            img.src = canvas.toDataURL("image/png");
            img.onload = function () {
                canvas.width = canvaswidth;
                canvas.height = canvasheight;
                let ctx = canvas.getContext("2d");
                let height_number = 2;
                let line = "";
                for (var n = 0; n < text.length; n++) {
                    var testLine = line + text[n] + ' ';
                    var metrics = ctx.measureText(testLine);
                    var testWidth = metrics.width;
                    if (testWidth > canvaswidth && n > 0) {
                        line = text[n] + ' ';
                        height_number += 1;
                    } else {
                        line = testLine;
                    }
                }
                canvas.height = canvasheight + (height_number) * 22;
                ctx.fillStyle = "#ffffff";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = '#000000';
                ctx.font = 'bold ' + 12 + 'px Arial';
                //文字描述
                wrapText(ctx, text, textleft, texttop, canvaswidth, 20);
                //绘制二维码
                ctx.drawImage(img, 0, 0);

                downloadFile(canvas.toDataURL("image/png"), ctid + ".png")
            }
        }

        function wrapText(context, text, x, y, maxWidth, lineHeight) {
            var line = '';

            for (var n = 0; n < text.length; n++) {
                var testLine = line + text[n] + ' ';
                var metrics = context.measureText(testLine);
                var testWidth = metrics.width;
                if (testWidth > maxWidth && n > 0) {
                    context.fillText(line, x, y);
                    line = text[n] + ' ';
                    y += lineHeight;

                }
                else {
                    line = testLine;
                }
            }
            context.fillText(line, x, y);
        }

        function utf16to8(str) {
            var out, i, len, c;
            out = "";
            len = str.length;
            for (i = 0; i < len; i++) {
                c = str.charCodeAt(i);
                if ((c >= 0x0001) && (c <= 0x007F)) {
                    out += str.charAt(i);
                } else if (c > 0x07FF) {
                    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                    out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                } else {
                    out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                }
            }
            return out;
        }
        function downloadFile(content, fileName) {
            var base64ToBlob = function (code) {
                let parts = code.split(';base64,');
                let contentType = parts[0].split(':')[1];
                let raw = window.atob(parts[1]);
                let rawLength = raw.length;
                let uInt8Array = new Uint8Array(rawLength);
                for (let i = 0; i < rawLength; ++i) {
                    uInt8Array[i] = raw.charCodeAt(i);
                }
                return new Blob([uInt8Array], { type: contentType });
            };
            let aLink = document.createElement('a');
            let blob = base64ToBlob(content);
            new Blob([content]);
            aLink.download = fileName;
            aLink.href = URL.createObjectURL(blob);
            aLink.click();
            aLink.remove()
        };

        function qrCodeFn() {
            let rows = grid.getSelecteds();
            for (let rec of rows) {
                copyImage(rec.ctid, rec.seller_memo)
            }
        }

        function actionRenderer(e) {
            let record = e.record;
            let html = "";
            html += getGridBtn("dis", "下载二维码", "copyImage('" + record.ctid + "','" + record.seller_memo + "')");
            return html;
        }

        /**
        ** 打印机服务
        **/
        let isPrinterConnected = false;
        let isDrawing = false;
        //SDK初始化参数
        const init_data = {
            initSdkParam: {
                "fontDir": "",
            }
        };
        const jsonObj = {
            "printerImageProcessingInfo": {
                "printQuantity": 1,
            }
        };
        //所有打印机
        let allUsbPrinters;
        window.onload = function () {
            const service_status = document.querySelector('.service_status');
            let isConnected = false;
            const usb_connect_status = document.querySelector('.usb_printer_connect_status');

            let isSupported = true;
            //连接打印服务
            getInstance(() => {
                isConnected = true;
                console.log('打印服务连接成功');
            }, () => {
                isSupported = false;
                console.log('当前浏览器不支持打印服务');
            }, () => {
                isConnected = false;
                console.log('打印服务连接断开');
            }, () => {
                isPrinterConnected = false;

            });

            setInterval(() => {
                if (isConnected) {
                    service_status.textContent = '打印服务状态：已连接';
                } else if (!isSupported) {
                    service_status.textContent = '打印服务状态：不支持';
                } else {
                    service_status.textContent = '打印服务状态：未连接';
                }


            }, 500);

            setInterval(() => {
                if (!isPrinterConnected) {
                    usb_connect_status.textContent = '打印机连接状态：未连接';
                }


            }, 500);
        }

        //更新打印机列表
        function getUsbPrinters() {

            console.log('开始获取打印机');
            getAllPrinters(function (error, data) {
                if (error) {
                    return alert(error.message);
                }

                try {
                    const { errorCode, info } = JSON.parse(JSON.stringify(data)).resultAck;
                    if (errorCode === 0) {
                        allUsbPrinters = JSON.parse(info);
                        const allPrintersName = Object.keys(allUsbPrinters);
                        const select = document.getElementById("usb_printers");
                        let selectSize = select.options.length;
                        console.log("selectSize", selectSize);
                        console.log("select", select);
                        if (allPrintersName.length > 0 && selectSize > 0) {
                            while (select.firstChild) {
                                select.removeChild(select.firstChild);
                            }
                        }

                        allPrintersName.forEach((name) => {
                            const option = document.createElement('option');
                            option.value = name;
                            option.text = name;
                            select.appendChild(option);
                        });
                        selectOnLineUsbPrinter()
                    } else {
                        console.log('无打印机在线');
                        const select = document.getElementById("usb_printers");
                        select.innerHTML = "";
                        const option = document.createElement('option')
                        option.value = '请选择USB打印机';
                        option.text = '请选择USB打印机';
                        select.appendChild(option);
                        return alert('无打印机在线');
                    }
                } catch (err) {
                    console.log(err);
                }


            });


        }
        //选择在线打印机
        function selectOnLineUsbPrinter() {
            isPrinterConnected = false;

            if (allUsbPrinters) {
                const usb_connect_status = document.querySelector('.usb_printer_connect_status');
                const select = document.getElementById("usb_printers");
                const allPrintersName = Object.keys(allUsbPrinters);
                const allPrintersValue = Object.values(allUsbPrinters);
                selectPrinter(allPrintersName[select.selectedIndex], parseInt(allPrintersValue[select.selectedIndex]), function (error, data) {
                    if (error) {
                        console.log('连接失败')
                        usb_connect_status.textContent = '打印机连接状态：未连接';
                        return alert(error.message);
                    }

                    const { errorCode } = JSON.parse(JSON.stringify(data)).resultAck;


                    if (errorCode === 0) {
                        console.log('连接成功')
                        isPrinterConnected = true;
                        usb_connect_status.textContent = '打印机连接状态：USB打印机已连接';
                        init()
                    } else {
                        console.log('连接失败')
                        usb_connect_status.textContent = '打印机连接状态：未连接';
                        alert('连接失败');
                    }


                })
            } else {
                console.log('未选择打印机')
                alert('未选择打印机');
            }
        }

        //初始化SDK
        function init() {
            let status = document.querySelector('.init_status')
            initSdk(init_data.initSdkParam, function (error, data) {
                if (error) {
                    return alert(error.message);
                }
                const { errorCode, info } = JSON.parse(JSON.stringify(data)).resultAck;


                if (errorCode === 0) {
                    console.log('初始化成功');
                    status.textContent = "SDK初始化状态：已初始化"
                } else {
                    console.log('初始化失败');
                    status.textContent = "SDK初始化状态：未初始化"
                    return alert(info);
                }

            });
        }


        function waybillFn() {
            let ids = []
            let rows = grid.getSelecteds();
            let html = ``;
            for (let rec of rows) {
                ids.push(rec.ctid)
                html += `<span class="${rec.ctid}" style="margin-right:10px">${rec.ctid}</span>`
            }
            mini.get("delivery_win").show()
            let parentElement = document.getElementById('print_value'); // 获取父元素
            let print_tids = document.getElementById('print_tids'); // 获取父元素
            parentElement.innerHTML = '';
            parentElement.innerHTML = html;
            print_tids.value = ids.join(",")
        }

        function printResult() {
            let offsetX = 0;
            let offsetY = 0;
            let width = 30;
            let height = 40;
            let rotate = 90;
            let marginX = 2.0;
            let marginY = 2.0;
            let contentWidth = height - marginX * 2;
            let qrCodeHeight = width - marginY * 2;
            let qrCodeWidth = width - marginY * 2;
            let fontSize = 3.2;
            let print_tids = document.getElementById('print_tids'); // 获取父元素
            let ids = print_tids.value;
            ids = ids.split(",");
            //组合打印数据
            let combinationPrintData = {

                InitDrawingBoardParam: {
                    "width": width,
                    "height": height,
                    "rotate": rotate,
                    "path": "ZT001.ttf",
                    "verticalShift": 0,
                    "HorizontalShift": 0
                },

                "elements": [
                    {
                        type: 'qrCode',
                        json: {
                            "x": marginX + offsetX,
                            "y": marginY + offsetY,
                            "height": qrCodeHeight,
                            "width": qrCodeWidth,
                            "value": '12345678',
                            "codeType": 31,
                            "rotate": 0
                        }
                    }, {
                        type: 'text',
                        json: {
                            "x": marginY + offsetY,
                            "y": marginX * 2 + qrCodeWidth + offsetX,
                            "height": contentWidth - qrCodeWidth - marginX,
                            "width": qrCodeHeight,
                            "value": "姓名：武汉精臣\n年龄：11\n类型：血液检测",
                            "fontFamily": "宋体",
                            "rotate": 0,
                            "fontSize": fontSize,
                            "textAlignHorizonral": 0,
                            "textAlignVertical": 1,
                            "letterSpacing": 0.0,
                            "lineSpacing": 1.0,
                            "lineMode": 6,
                            "fontStyle": [true, false, false, false],
                        }
                    },
                ]
            };
            let print_info = [];
            for (let i = 0; i < ids.length; i++) {
                let item = ids[i];
                combinationPrintData.elements[0].json.value = item;
                combinationPrintData.elements[1].json.value = item;
                print_info.push($.extend(true, {}, combinationPrintData));
            }
            batchPrintJob(print_info)


        }
        function startPrintJobTest(content) {
            let contentArr = [];
            contentArr.push(content);
            batchPrintJob(contentArr);
        }

        function batchPrintJob(list) {
            const self = this

            if (list == null || list.length === 0) {
                return;
            }

            //打印份数
            var printQuantity = jsonObj.printerImageProcessingInfo.printQuantity

            let density = 3;
            let labelType = 1;
            let printMode = 1;
            let selectDensity = 2

            //总打印份数，表示所有页面的打印份数之和。例如，如果你有3页需要打印，第一页打印3份，第二页打印2份，第三页打印5份，那么count的值应为10（3+2+5）。
            startJob(density, labelType, printMode, list.length * printQuantity, function (error, data) {
                if (error) {
                    return alert(error.message);
                }
                const { errorCode, info } = JSON.parse(JSON.stringify(data)).resultAck;
                if (errorCode !== 0) {
                    return alert(info);
                }
                // 提交打印任务
                self.printTag(list, 0, false);
            });


        }
        function printTag(list, x, isPreview) {
            //是否正在绘制状态修改，开始绘制
            isDrawing = true;
            //设置画布尺寸
            InitDrawingBoard(list[x].InitDrawingBoardParam, function (error, data) {
                if (error) {
                    return alert(error.message);
                }
                const { errorCode, info } = JSON.parse(JSON.stringify(data)).resultAck;
                if (errorCode !== 0) {
                    return alert(info);
                }

                // 元素控件绘制
                printItem(list, x, list[x].elements, 0, isPreview);

            });
        }


        function printItem(list, x, item, i, isPreview) {
            console.log(item, 'item');
            if (i < item.length) {
                switch (item[i].type) {

                    case 'text':
                        console.log(item[i].json);
                        //绘制文本
                        DrawLableText(item[i].json, function (error, data) {
                            if (error) {
                                return alert(error.message);
                            }
                            const { errorCode, info } = JSON.parse(JSON.stringify(data)).resultAck;
                            if (errorCode !== 0) {
                                return alert(info);
                            }

                            i++;
                            printItem(list, x, item, i, isPreview);
                        });
                        break;
                    case 'qrCode':
                        //绘制二维码
                        DrawLableQrCode(item[i].json, function (error, data) {
                            if (error) {
                                return alert(error.message);
                            }
                            const { errorCode, info } = JSON.parse(JSON.stringify(data)).resultAck;
                            if (errorCode !== 0) {
                                return alert(info);
                            }

                            i++;
                            printItem(list, x, item, i, isPreview);
                        });

                        break;
                    case 'barCode':
                        //绘制一维码
                        DrawLableBarCode(item[i].json, function (error, data) {
                            if (error) {
                                return alert(error.message);
                            }
                            const { errorCode, info } = JSON.parse(JSON.stringify(data)).resultAck;
                            if (errorCode !== 0) {
                                return alert(info);
                            }

                            i++;
                            printItem(list, x, item, i, isPreview);
                        });
                        break;
                    case 'line':

                        //绘制线条
                        DrawLableLine(item[i].json, function (error, data) {
                            if (error) {
                                return alert(error.message);
                            }
                            const { errorCode, info } = JSON.parse(JSON.stringify(data)).resultAck;
                            if (errorCode !== 0) {
                                return alert(info);
                            }

                            i++;
                            printItem(list, x, item, i, isPreview);
                        });
                        break;
                    case 'graph':
                        //绘制边框
                        DrawLableGraph(item[i].json, function (error, data) {
                            if (error) {
                                return alert(error.message);
                            }
                            const { errorCode, info } = JSON.parse(JSON.stringify(data)).resultAck;
                            if (errorCode !== 0) {
                                return alert(info);
                            }

                            i++;
                            printItem(list, x, item, i, isPreview);
                        });
                        break;
                    case 'image':
                        //绘制边框
                        DrawLableImage(item[i].json, function (error, data) {
                            if (error) {
                                return alert(error.message);
                            }
                            const { errorCode, info } = JSON.parse(JSON.stringify(data)).resultAck;
                            if (errorCode !== 0) {
                                return alert(info);
                            }

                            i++;
                            printItem(list, x, item, i, isPreview);
                        });
                        break;
                }
            } else { //遍历完成，开始打印
                // let index = Object.assign(x);
                // var jsonObj = {
                // 		"printerImageProcessingInfo": {
                // 		"width": width,
                // 		"height": height,
                // 		"margin": [0,0,0,0],
                // 		"printQuantity":1,
                // 		"epc":"1234"
                // 	}
                // };

                console.log('是否预览' + isPreview);
                if (isPreview) {
                    //B32和T8等300点机型倍率填12，其他机器填8，默认值8
                    generateImagePreviewImage(8, function (error, data) {
                        if (error) {
                            return alert(error.message);
                        }

                        const { errorCode, info } = JSON.parse(JSON.stringify(data)).resultAck;
                        if (errorCode !== 0) {
                            return alert(info);
                        }

                        const imageData = "data:image/jpeg;base64," + JSON.parse(info).ImageData;
                        const img = new Image();
                        img.src = imageData;

                        img.id = 'preview';

                        document.body.appendChild(img);

                        // var bg = document.querySelector('.preview_bg');
                        // bg.style.background ='url("./img/supermarket_retail.png")';
                        // bg.style.backgroundSize = 'cover';
                        // console.log(bg);
                        // const img = document.createElement('img');
                        // img.src = "./img/supermarket_retail.png";

                        // bg.appendChild(img);

                    });

                    return;
                }

                //是否正在绘制状态修改,绘制完成
                isDrawing = false;
                // var jsonObj ={"printerImageProcessingInfo": {"printQuantity": 1,}}; printQuantity属性用于指定当前页的打印份数。
                // 例如，如果你需要打印3页，第一页打印3份，第二页打印2份，第三页打印5份，那么在3次提交数据时，printerImageProcessingInfo中的printQuantity值分别应为3，2，5。
                commitJob(null, JSON.stringify(jsonObj), function (error, data) {
                    if (error) {
                        return alert(error.message);
                    }

                    const { errorCode, info, printQuantity, onPrintPageCompleted } = JSON.parse(JSON.stringify(data)).resultAck;
                    const resultInfo = "commitJob ok";
                    //异常导致打印终止
                    if (errorCode !== 0) {
                        return alert(info);
                    }


                    //回调与传参定义相反，考虑接入较多客户暂不修改为一致
                    //var jsonObj = {		"printerImageProcessingInfo": {"printQuantity":2,}}; 提交任务的打印份数
                    //printQuantity 回调打印页数的进度（一次commitJob提交为1页，内容可以不一样）
                    //onPrintPageCompleted 回调打印份数的进度（一个commit的内容打印多张，内容一样）

                    //回调页码为数据总长度且回调打印份数数据等于当前页需要打印的份数数据时，结束打印任务
                    if (printQuantity === list.length && onPrintPageCompleted === jsonObj.printerImageProcessingInfo.printQuantity) {
                        //结束打印任务
                        endJob(function (error, data) {
                            if (error) {
                                alert(error.message);
                            } else {
                                const arrParse = JSON.parse(JSON.stringify(data));
                                if (String(arrParse.resultAck.info).indexOf("endJob ok") > -1) {

                                }
                            }

                        });
                        return;
                    }

                    //当前页数据提交完成，但是未完所有页数据提交，且未进行绘制，继续发送下一页数据
                    if (String(info).indexOf(resultInfo) > -1 && x < list.length - 1 && !isDrawing) {
                        //数据提交成功，数据下标+1
                        console.log("发送下一页打印数据： ")
                        x++;
                        printTag(list, x);
                    }

                });
            }
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="btn" runat="Server">
    <div class="print_init">
        <h3>打印机初始化<span style="font-weight: bold; color: red;">(必须执行完才能进行预览打印)</span>：</h3>
        <div class="content" style="display: flex">
            <div class="service">
                <p class="service_status status">打印服务状态：未连接</p>
            </div>

            <div class="select_usb" style="display: flex; align-items: cent">
                <div class="select_printer status">
                    <label>
                        请选择USB连接的打印机:<select id="usb_printers" name="printers">
                            <option>请选择USB连接的打印机</option>
                        </select></label>
                </div>
                <button class="getPrinters" onclick="getUsbPrinters()" type="button">更新USB打印机列表</button>
            </div>

            <div class="connect_usb" style="display: flex; align-items: cent">
                <p class="usb_printer_connect_status status">打印机连接状态：未连接</p>
                <button class="connect_printer" onclick="selectOnLineUsbPrinter()" type="button">连接USB打印机</button>
            </div>
            <div class="init">
                <div class="init_content" style="display: flex; align-items: center">
                    <p class="init_status status">SDK初始化状态：未初始化</p>
                    <button class="init_sdk status" onclick="init()" type="button">初始化SDK</button>
                </div>
            </div>
        </div>
    </div>
    <table style="width: 100%;">
        <tr>
            <td style="width: 80%;">
                <a class="mini-button mini-button-primary" style="padding: 2px 5px 2px 5px;" iconcls="icon-print" onclick="waybillFn()">打印</a>
                <a class="mini-button mini-button-primary" style="padding: 2px 5px 2px 5px;" iconcls="icon-print" onclick="qrCodeFn()">二维码</a>
                <div id="qrcodeImage" style="display: none"></div>
            </td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="content" runat="Server">
    <div class="mini-fit">
        <div id="m_grid" class="mini-datagrid" style="width: 98%; height: 100%;" contextmenu="#gridMenu" showemptytext="true" emptytext="暂无记录" url="../handler/sync.ashx?t=get_erp_waitdeliverylist">
            <div property="columns">
                <div type="indexcolumn" width="20"></div>
                <div type="checkcolumn" width="20"></div>
                <div name="orderid" width="110" align="center" headeralign="center" renderer="orderIdRenderer">订单编号</div>
                <div name="orderptime" width="80" align="center" headeralign="center" renderer="orderPTimeRenderer">付款时间</div>
                <div field="IsSF" width="50" align="center" headeralign="center" renderer="SFRenderer">是否顺丰</div>
                <div field="seller_memo" width="200" align="center" headeralign="center" renderer="memoRenderer">备注</div>
                <div field="OtherMemo" id="id_othermemo" runat="server" visible="false" width="80" align="center" headeralign="center">额外备注</div>
                <div field="FinishPlaceTime" width="60" dateformat="yyyy-MM-dd HH:mm" align="center" headeralign="center">下单时间</div>
                <div field="" width="60" align="center" headeralign="center" renderer="preDeliveryTime">预计发货</div>
                <div field="CheckMemo" width="50" align="center" headeralign="center">查单备注</div>
                <div name="address" width="80" align="center" headeralign="center" renderer="addressRenderer">收货地址</div>
                <div name="orderscus" width="60" align="center" headeralign="center" renderer="orderCusRenderer">供应商</div>
                <div field="AfterSaleMethod" width="80" align="center" headeralign="center">售后方案</div>

                <div field="UnusualCon" width="50" align="center" headeralign="center">异常解释</div>
                <div name="orderstatus" width="50" align="center" headeralign="center" renderer="orderStatusRenderer">状态</div>
                <div name="action" width="50" align="center" headeralign="center" renderer="actionRenderer">#</div>
            </div>
        </div>
    </div>
    <div id="delivery_win" class="mini-window" title="打印二维码" style="width: 550px; height: 350px; position: relative; display: none">
        <input id="print_tids" type="hidden" />
        <div id="print_value"></div>
        <div class="win_btn" style="text-align: center; margin-top: 20px">
            <a class="mini-button" iconcls="icon-ok" onclick="printResult">打印</a>
        </div>
    </div>
</asp:Content>