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">
                <div class="form-group">
                    <label class="form-inline" for="printStr"></label>
                    <input type="text" name="printStr" class="form-control" ref="printStr" id="printStr" placeholder="输入波次号，订单号，">
                </div>
            </div>
            <div class="card-body">
                <button class="btn btn-primary" @click="getPrintItems">获取</button>
                <button class="btn btn-outline-info" @click="wsGetImage">GoWebSocket 预览</button>
                <button class="btn btn-outline-primary" @click="uploadPrintData">WAS加工</button>
                <button class="btn btn-success" @click="wsPrintImage">GoWebSocket 打印</button>
                {{--<button class="btn btn-outline-warning" @click="initGoWebSocket">GoWebSocket 重置</button>--}}
            </div>

            <div class="container">
                <p>打印步骤</p>
                <p>1:输入单号-获取</p>
                <p>2:预览</p>
                <p>3:加工</p>
                <p>4:打印</p>
            </div>
            <div class="alert alert-success" v-if="goWebSocketStatus === 1">
                链接成功
            </div>
            <div class="alert alert-primary" v-if="goWebSocketStatus === 2" @click="initGoWebSocket">
                链接失败
            </div>
            <div class="alert alert-primary" v-if="goWebSocketStatus === 3" @click="initGoWebSocket">
                链接错误
            </div>
        </div>
        <div class="card">
            <ul class="list-group">
                <template v-for="item in printItems">
                    <li class="list-group-item">
                        <p> 编号：@{{ item.task_id }}</p>
                        <p> 快递单号 ：@{{ item.logistic_number }}</p>
                        <div v-if="item.base64" class="position-relative">
                            <img :src="'data:image/jpeg;base64,'+item.base64" alt="" style="width: 50%;height: 50%"
                                 class="position-relative">
                        </div>
                    </li>
                </template>
            </ul>
        </div>
    </div>

    </div>
@endsection


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

            },
            mounted() {
                // 初始化 go 链接
                this.initGoWebSocket();
            },
            methods: {
                // TODO 获取打印参数
                getPrintItems() {
                    let url = '{{url('apiLocal/maintenance/print/getData')}}'
                    let data = {
                        printStr: this.$refs.printStr.value,
                    };
                    if (data.printStr.trim().length === 0) {
                        window.tempTip.show('输入后在获取')
                    }
                    window.axios.post(url, data).then(res => {
                        this.printItems = res.data.data
                        this.$forceUpdate();
                    }).catch(err => {
                        console.log(err);
                    });
                },
                // TODO GoWs 返回信息
                receiveGoWebSocketMessage(meg) {
                    this.goWebSocketStatus = 1;
                    let res = JSON.parse(meg.data)
                    if (res.operation === 'print') {
                        if (res.status === true) {
                        }
                    } else if (res.operation === 'preview') {
                        if (res.status === "success") {
                            this.printItems.forEach(function (item) {
                                if (item['task_id'] === res['task_id']) {
                                    item['base64'] = res.data.shift();
                                }
                            })
                            this.$forceUpdate();
                        }
                    } else if (res.operation === 'line') {
                        if (res.status === '') this.goWebSocketStatus = 1;
                    }
                },
                // TODO 发送到后台进行加工
                uploadPrintData() {
                    let url = "{{url("apiLocal/maintenance/print/uploadPrintData")}}";
                    let data = {printData: this.printItems}
                    let self = this;
                    window.axios.post(url, data).then(res => {
                        console.log(res)
                        if (res.data.success) {
                            res.data.data.forEach(function (item) {
                                self.printItems.forEach(function (data, index, array) {
                                    if (data['logistic_number'] === item['logistic_number']) {
                                        array[index] = item
                                    }
                                })
                            })
                            this.$forceUpdate();
                        }
                    }).then(err => {

                    })
                },
                // TODO GoWebSocket 初始化
                initGoWebSocket() {
                    if (this.goWebSocket && this.goWebSocket.readyState === 1) return this.goWebSocket;
                    this.goWebSocketStatus = 2;
                    let self = this;
                    this.goWebSocket = new window.WebSocket(this.goWebSocketPath);
                    this.goWebSocket.onmessage = this.receiveGoWebSocketMessage;
                    this.goWebSocket.onopen = function () {
                        self.goWebSocketStatus = 1
                    };
                    this.goWebSocket.onclose = function () {
                        self.goWebSocketStatus = 2
                    };

                    this.goWebSocket.onerror = function () {
                        self.goWebSocketStatus = 3
                    }
                },
                // TODO GoWebSocket 链接成功
                GoWebSocketOpen() {
                    this.goWebSocketStatus = 0;
                },
                // TODO GoWebSocket 链接关闭
                GoWebSocketClose() {
                    this.goWebSocketStatus = 1;
                },
                // TODO  GoWebSocket 关闭
                closeGoWebSocket() {
                    this.goWebSocketStatus = 2;
                    this.goWebSocket.close();
                },
                // TODO 推动到GoWs 获取打印图片
                wsGetImage() {
                    let self = this;
                    if (!this.goWebSocket || this.goWebSocket.readyState !== 1) {
                        window.tempTip.show("重置链接或继续")
                    }
                    this.initGoWebSocket();
                    this.printItems.forEach(function (item) {
                        if (item['is_process'] === true) return;
                        item['operation'] = 'preview';
                        self.goWebSocket.send(JSON.stringify(item))
                    });
                },
                // TODO 推动到GoWs 进行打印
                wsPrintImage() {
                    this.initGoWebSocket();
                    let self = this;
                    this.printItems.forEach(function (item) {
                        item['operation'] = 'print';
                        self.goWebSocket.send(JSON.stringify(item));
                    });
                },
            }
        });

    </script>
@endsection