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

@extends("layouts.app")
@section("title","打印")

@section("content")
    <span id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.expressPrinting.menu')@endcomponent
        @component('maintenance.expressPrinting.print.menu')@endcomponent
    </span>
    <div class="container" id="print">
        <div class="row">
            <div class="container">
                <div class="input-group">
                    <label for="scaleNumber" class="col-form-label-sm">缩放比例</label>
                    <input id="scaleNumber" type="number" v-model="scaleNumber" class="form-control-sm">
                    <button class="btn btn-success" @click="printImage">打印</button>
                </div>
            </div>
        </div>
        <div class="row p-0 m-0" id="img-div">
        </div>
        <div class="container m-0 p-0" id="print-div" :style="getByWidth(template)"  >
            <div class="position-relative border-1 row p-0 m-0 bg-white border print-template" v-for="(item,i) in items" :style="getBgStyle(template)">
                <div class="position-absolute" v-for="(part,index) in parts" :style="getStyle(part)">
                    <svg v-if="isSvg(part)" :style="getSvgStyle(part)" :id="'svg'+i"  class="StripeCode">
                        @{{ getContent(part,item) }}
                    </svg>
                    <span v-else>@{{ getContent(part,item) }}</span>
                </div>
            </div>
        </div>

    </div>
@endsection

@section("lastScript")
    <script type="text/javascript" src="{{mix('js/utilities/barcode.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/utilities/html2canvas.js')}}"></script>
    <script>
        let vue = new Vue({
            el:"#print",
            data:{
                template:{!! $template !!},
                items:{!! $items !!},
                parts:[],
                index:0,
                scaleNumber:1,
            },
            created() {
                this.parts = JSON.parse(this.template.value);
            },
            mounted() {
                $.each(this.items,(index,item)=>{
                    window.setBarcode('123456',"#svg"+index,2,50,true);
                    $("#svg"+index).find("svg");
                });
            },
            methods:{
                isSvg(part){
                    return part.type==="StripeCode";
                },
                printingTemplate(template,items){
                    let _this = this;
                    $.each(items,function(i,item){
                        _this.paddingPrintDiv(template,item);
                    });
                },
                getBgStyle(template){
                    if (this.parts === []) this.parts = JSON.parse(template.value);
                    let style  = {};
                    this.parts.forEach((item)=>{
                        if(item.type==="bg"){
                            style =  {
                                width:item.width+'px',
                                height:item.height+'px'
                            }
                        }
                    });
                    return style;
                },
                getByWidth(){
                    if (this.parts === []) this.parts = JSON.parse(template.value);
                    let style  = {};
                    this.parts.forEach((item)=>{
                        if(item.type==="bg"){
                            style =  {
                                width:item.width+'px',
                                transform: "scale(" +this.scaleNumber +")",
                                transformOrigin: "left top",
                            }
                        }
                    });
                    return style;
                },
                getSvgStyle(item){
                    return {
                        width:item.width+'px',
                        height:item.height+'px',
                    };
                },
                getStyle(item){
                    let style = JSON.parse(JSON.stringify(item));
                    style.display = 'flex';
                    style['border-style'] = style.borderStyle;
                    style['border-width'] = style.borderWidth+'px';
                    style['font-size'] = style.fontSize+'px';
                    style['font-weight'] = style.fontWeight;
                    style['justify-content'] = style.justifyContent;
                    style['align-items'] = style.alignItems;
                    style.width+='px';
                    style.height+='px';
                    style.left+='px';
                    style.top+='px';
                    style['white-space'] = 'pre';              // 字体换行
                    return style;
                },
                getContent(part,item){  // 组件内容
                    return part.text;
                    if(part.text.indexOf("$")===-1)return part.text;
                    if(part.text.indexOf("+$")!==-1){
                        let arr = part.text.split("+$");
                        return arr[0]+item[ arr[1]];
                    }
                    if(part.text.indexOf("$")!==-1){
                        let arr = part.text.split("$");
                        return arr[0]+item[arr[1]];
                    }
                },
                printImage(){
                    let _this = this;
                     window.canvasImg("#print-div","#img-div",this.scaleNumber,function(canvas){
                        let data = canvas.toBlob(function (blob){
                            let formData =new FormData();
                            formData.append("blob",blob);
                            _this.printData(formData);
                        },"image/png");
                    });
                },
                printData(data){
                    window.axios.post("{{url("apiLocal/maintenance/expressPrinting/part/printTemplate")}}",data).then(res=>{
                        tempTip.showSuccess(res);
                    }).catch(err=>{
                        tempTip.showSuccess(err);
                    });
                }
            }
        })
    </script>
@endsection