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>
                <input type="file" id="uploadInput">
{{--                <template v-for="image in printImage">--}}
{{--                    <div class="print-div">--}}
{{--                        <template v-if="image.type === 'image'">--}}
{{--                            <img :src="image.uri" class="print-image">--}}
{{--                        </template>--}}
{{--                        <template v-else-if="image.type === 'pdf'">--}}
{{--                            <embed :src="image.uri" type="application/pdf" width="100%" height="100%" class="print-pdf">--}}
{{--                        </template>--}}
{{--                    </div>--}}
{{--                </template>--}}
            </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>
    </div>
@endsection


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

            },
            mounted() {
                this.getGoWebSocket();
            },
            methods: {
                getGoWebSocket(){
                    let self = this;
                    if(this.goWebSocket)return this.goWebSocket;
                    let socket= new window.WebSocket(this.goWebSocketPath);
                    socket.onopen  = function(){
                        self.goWebSocketStatus = true;
                    }
                    console.log(123);
                    return this.goWebSocket = socket;
                },
                getPrintRequest() {
                    let self = this;
                    let url = '{{url('apiLocal/maintenance/print/getData')}}'
                    window.axios.post(url).then(res => {
                        res.data.data.forEach(function (item) {
                            self.printData.push({
                                type:"CAINIAO",
                                data:self.getPreviewRequest(item,null)
                            });
                        });
                        this.$forceUpdate();
                        console.log(this.printData);
                    }).catch(err => {
                        console.log(err);
                    });
                },
                pushGoPrintData(){
                    let socket = this.getGoWebSocket();
                    this.printData.forEach(function(item){
                        let json =  JSON.stringify(item);
                        socket.send(json);
                    })
                },
                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']
                                }],
                            }],
                        }
                    };
                }
            }
        });

    </script>
@endsection