baoshi-was/resources/views/maintenance/expressPrinting/print/template.blade.php

@extends('layouts.app')

@section('title','面单打印')

@section('content')
    <div class="container  " id="list">
        <div class="card">
            <div class="card-header">
                <label>
                    <input type="text" name="printStr" class="form-control">
                </label>
            </div>
            <div class="card-body">
                <button @click="getPrintRequest">获取</button>
                <button @click="pushGoPrintData">打印</button>
                <button @click="resetGoWebsocket">recon</button>
                <button @click="uploadPrintData">上传</button>
            </div>
            <div class="alert-success" v-if="goWebSocketStatus">
                链接成功
            </div>
            <div v-else class="alert-primary">
                链接失败
            </div>
            <div class="card-footer">
                <canvas id="canvas-div" class="d-none"></canvas>
            </div>
            <div>
                <img src="" alt="" id="img">
            </div>
        </div>
    </div>
@endsection


@section('lastScript')
    <script>
        let vue = new Vue({
            el: '#list',
            data: {
                data: [],
                goWebSocketPath: "ws://127.0.0.1:11101/msg",
                goWebSocket: null,
                goWebSocketStatus: false,
                printData: [],
                uploadData:[]
            },
            created() {

            },
            mounted() {
                this.getGoWebSocket();
            },
            methods: {
                getGoWebSocket() {
                    if (this.goWebSocket) return this.goWebSocket;
                    this.goWebSocket = new window.WebSocket(this.goWebSocketPath);
                    this.goWebSocket.onmessage = this.receiveGoWebSocketMessage;
                    return this.goWebSocket;
                },
                closeGoWebSocket() {
                    this.goWebSocket.close();
                },
                getPrintRequest() {
                    let self = this;
                    let url = '{{url('apiLocal/maintenance/print/getData')}}'
                    window.axios.get(url).then(res => {
                        res.data.data.forEach(function (item) {
                            self.printData.push({
                                type: "CAINIAO",
                                data: JSON.stringify(self.getPreviewRequest(item, null))
                            });
                        });
                        this.$forceUpdate();
                        console.log(this.printData);
                    }).catch(err => {
                        console.log(err);
                    });
                },
                pushGoPrintData() {
                    let self = this;
                    this.printData.forEach(function (item) {
                        let json = JSON.stringify(item);
                        self.getGoWebSocket().send(json);
                    })
                },
                receiveGoWebSocketMessage(meg) {
                    console.log("receiveGoWebSocketMessage");
                    let params = JSON.parse(meg.data)
                    if(params.success ==="false"){
                        alert(params.message)
                    }else if (params.success ==="true"){
                        let imgBase64 = params.data;
                        let base64String = "data:image/gif;base64," + imgBase64;
                        document.getElementById("img").setAttribute("src",base64String)
                        // js/base64图片 base64String
                        this.uploadData.push({
                            'base64':base64String
                        })
                        console.log(this.uploadData);
                        this.$forceUpdate()
                    }
                },
                getPreviewRequest(item, taskId) {
                    return {
                        cmd: "print",
                        requestID: "123458976",
                        letsion: '1.0',
                        firstDocumentNumber: 0,
                        totalDocumentCount: 1,
                        task: {
                            taskID: '123458976123',
                            preview: true,
                            printer: '',
                            notifyMode: 'allInOne',
                            previewType: 'image',
                            documents: [{
                                documentID: "123123123",
                                contents: [{
                                    encryptedData: item['encryptedData'],
                                    signature: item['encryptedData'],
                                    templateURL: item['templateURL'],
                                    ver: item['ver']
                                }],
                            }],
                        }
                    };
                },
                resetGoWebsocket() {
                    this.goWebSocket = new window.WebSocket(this.goWebSocketPath);
                    this.goWebSocket.onmessage = this.receiveGoWebSocketMessage;
                },
                uploadPrintData(){
                    let url = "{{url("apiLocal/maintenance/print/uploadPrintData")}}";
                    let data = {printData:this.uploadData}
                    window.axios.post(url,data).then(res=>{
                    }).then(err=>{
                    })
                }
            }
        });

    </script>
@endsection