临时提交

app/Http/Controllers/PrintPartController.php

@@ -3,7 +3,9 @@
 namespace App\Http\Controllers;
 
 use App\Components\AsyncResponse;
+use App\Order;
 use App\PrintPart;
+use App\PrintTemplate;
 use Illuminate\Http\Request;
 
 class PrintPartController extends Controller
@@ -32,4 +34,11 @@ class PrintPartController extends Controller
         $printPart->delete();
         $this->success('删除成功');
     }
+
+    public function print(Request $request)
+    {
+        $template = PrintTemplate::query()->where('name','test-快递单号打印')->first();
+        $items = Order::query()->whereIn('code',["SO190628000378","SO190628000347"])->with('packages')->get();
+        return view("maintenance.expressPrinting.print.index",compact("template",'items'));
+    }
 }

app/Http/Controllers/TestController.php

@@ -1569,4 +1569,9 @@ where (commodities.owner_id,commodity_barcodes.code) in (select commodities.owne
         }
     }
 
+    public function testPrint(Request $request)
+    {
+        return (new PrintPartController())->print($request);
+    }
+
 }

resources/views/maintenance/expressPrinting/menu.blade.php

@@ -5,7 +5,7 @@
                 <a target="maintenance/expressPrinting/part" class="nav-link" href="{{url('/maintenance/expressPrinting/part')}}" :class="{active:isActive('part',3)}">组件</a>
             </li>
             <li class="nav-item">
-                <a target="maintenance/expressPrinting/template" class="nav-link" href="{{url('/maintenance/expressPrinting/template')}}" :class="{active:isActive('template',3)}">模板</a>
+                <a target="maintenance/expressPrinting/template" class="nav-link" href="{{url('/maintenance/expressPrinting/template/index')}}" :class="{active:isActive('template',3)}">模板</a>
             </li>
         </ul>
     </div>

resources/views/maintenance/expressPrinting/part/create.blade.php

@@ -41,9 +41,12 @@
             </div>
             <div class="col-6 justify-content-center align-items-center flex-fill" >
                 {{-- 模板展示--}}
-                <div :style="getStyle()">
-                    <span>@{{ template.text }}</span>
+                <div v-if="template.type==='text'" :style="getStyle()">
+                    <span >@{{ template.text }}</span>
                 </div>
+                {{-- 二维码展示 --}}
+                <svg v-show="template.type!=='text'" :style="{width:template.width,height:template.height}" id="barcodeDiv1">
+                </svg>
             </div>
             <div class="col-3">
                 {{-- 属性 --}}
@@ -54,7 +57,9 @@
                     <div class="card-body">
                         <div class="form-group">
                             <label for="template-type">组件类型</label>
-                            <input type="text" id="template-type" class="form-control" v-model="template.type">
+                            <select class="form-control" v-model="template.type" @change="setContent">
+                                <option v-for="type in types" :value="type.value">@{{ type.name }}</option>
+                            </select>
                         </div>
                         <div class="form-group">
                             <label for="template-text">内容</label>
@@ -114,13 +119,15 @@
 @endsection
 
 @section('lastScript')
+    <script type="text/javascript" src="{{mix('js/utilities/barcode.js')}}"></script>
+
     <script>
         let vue = new Vue({
             el:"#create-print-part",
             data:{
                 printPart:{name:'',value:''},
                 template:{
-                    type:'',
+                    type:'text',
                     width:200,
                     height:100,
                     borderStyle:'solid',
@@ -133,9 +140,7 @@
                 },
                 types:[
                     {name:"文本框",value:"text"},
-                    {name:"条纹码1",value:"StripeCode1"},
-                    {name:"条纹码2",value:"StripeCode2"},
-                    {name:"二维码",value:"QRCode"},
+                    {name:"条纹码",value:"StripeCode"},
                 ],
                 fontWeights:[
                     {name:"正常",value:"normal"},
@@ -194,6 +199,14 @@
                         tempTip.show('网络异常:'+err);
                     });
                 },
+                setContent(){
+                    if(this.template.type === "text")return;
+                    this.template.borderStyle = 'none';
+                    let div = $("#barcodeDiv1");
+                    window.setBarcode("0123456789","#barcodeDiv1",2,50,true)
+                    this.template.width = div.width();
+                    this.template.height = div.height();
+                }
             }
         });
     </script>

resources/views/maintenance/expressPrinting/part/index.blade.php

@@ -28,8 +28,6 @@
                     tempTip.setDuration(3000);
                     window.tempTip.postBasicRequest('{{url('apiLocal/maintenance/expressPrinting/part/destroy')}}',{id:id},res=>{
                         tempTip.showSuccess(res);
-                        // this.printParts.splice(index,1);
-                        // this.$forceUpdate();
                         this.$delete(this.printParts,index);
                     });
                 }

resources/views/maintenance/expressPrinting/print/index.blade.php

@@ -0,0 +1,111 @@
+@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="position-relative border-1 row p-0 m-0 bg-white border" id="expressPrint" v-for="(item,i) in items" :style="getBgStyle(parts)">
+            <div class="position-relative" v-for="(part,index) in parts" >
+
+            </div>
+        </div>
+    </div>
+@endsection
+
+@section("lastScript")
+    <script type="text/javascript" src="{{mix('js/utilities/barcode.js')}}"></script>
+    <script>
+        let vue = new Vue({
+            el:"#print",
+            data:{
+                template:{!! $template !!},
+                items:{!! $items !!},
+                parts:[],
+                index:0,
+            },
+            created() {
+                if(this.template) this.parts = JSON.parse(this.template.value);
+            },
+            mounted() {
+                this.printingTemplate(this.template,this.items)
+            },
+            methods:{
+                printingTemplate(template,items){
+                    let _this = this;
+                    $.each(items,function(i,item){
+                        _this.paddingPrintDiv(template,item);
+                    });
+                },
+                paddingPrintDiv(template,item){
+                    let parts = JSON.parse(template.value);
+                    let _this = this;
+                    let div= $('<div class="position-relative border-1 row p-0 m-0 bg-white border"></div>');
+                    $("#expressPrint").append(div);
+                    $.each(parts,function(i,part){
+                        if(part.type === 'bg'){
+                            div.css({'width':item.width+'px','height':item.height+'px'});
+                        }else{
+                            if(part.type === "StripeCode"){ // 一维码 【条形码】
+                                let childDiv = $('<svg id="svg-'+(this.index++)+'"></svg>');
+                                let css = _this.getSvgStyle(item);
+                                childDiv.css(css);
+                                div.append(childDiv);
+                                setTimeout(function(){
+                                    // let text = _this.getContent(part,item);
+                                    window.setBarcode(part.text,"#svg-"+_this.index,2,50,true)
+                                },100);
+                            }else{
+                                let childDiv = $('<div class="position-absolute">'+_this.getContent(part,item)+'</div>');
+                                childDiv.css(_this.getStyle(item));
+                                div.append(childDiv);
+                            }
+                        }
+                    });
+
+                },
+                getBgStyle(parts){
+
+                },
+                getSvgStyle(item){
+                    let style = JSON.parse(JSON.stringify(item));
+                    return {
+                        width:style.width+'px',
+                        height:style.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){  // 组件内容
+                    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]];
+                    }
+                },
+
+            }
+        })
+    </script>
+@endsection

resources/views/maintenance/expressPrinting/print/menu.blade.php

@@ -0,0 +1,9 @@
+<div class="container-fluid nav3">
+    <div class="card" >
+        <ul class="nav nav-pills">
+            <li class="nav-item">
+                <a target="maintenance/expressPrinting/print/index" class="nav-link" href="{{url('/maintenance/expressPrinting/print/index')}}" :class="{active:isActive('index',4)}">打印</a>
+            </li>
+        </ul>
+    </div>
+</div>

resources/views/maintenance/expressPrinting/template/_produce.blade.php

@@ -1,11 +1,15 @@
 <div class="position-relative border-1 row p-0 m-0 bg-white border" id="produce-panel" @click="editProducePanel" :style="getProducePanelStyle()" >  <!--position-relative--> <!--position-absolute-->
-    <div class="position-absolute print-part" draggable="true"
+    <div class="position-absolute print-part"
+         draggable="true"
          v-for="(item,i) in productionParts.printParts"
          @click.stop.self="productionParts.editPart = item"
-         @dragstart="_dragstart(item,$event)"            {{--开始拖动元素时触发--}}
-         @dragend="_dragend(item,$event)"                {{-- 拖动结束 --}}
+         @dragstart="_dragstart(item,$event)"             {{--开始拖动元素时触发--}}
+         @dragend="_dragend(item,$event)"                 {{--拖动结束--}}
          :style="getPrintPartStyle(item)"
-         :key="i">@{{ item.text }}</div>
+         :key="i" >
+        <svg v-if="item.type ==='StripeCode'" :style="{width:item.width,height:item.height}" :id="item.id" @click.stop.self="productionParts.editPart = item"></svg>
+        <span v-else>@{{ item.text }}</span>
+    </div>
 </div>
 <div class="modal fade" id="saveModal" tabindex="-1"  aria-hidden="true">
     <div class="modal-dialog">

resources/views/maintenance/expressPrinting/template/create.blade.php

@@ -67,8 +67,14 @@
                     print_part.top = 0;
                     print_part.index = this.productionParts.printParts.length;
                     print_part.z_index = this.z_index++;
+                    print_part.id = "id"+this.z_index;
                     print_part.text = null;
                     this.productionParts.printParts.push(print_part);
+                    if(print_part.type ==="StripeCode"){
+                        setTimeout(function(){
+                            window.setBarcode("0123456789","#"+print_part.id,2,50,true)
+                        },100);
+                    }
                 },
                 _removePartToProductionPanel(editPart){
                     this.productionParts.editPart = null;
@@ -144,7 +150,7 @@
                 },
                 _dragstart(item,$event){
                     {{--开始拖动元素时触发--}}
-                        this.selectPrintPartPoint  = {x:parseInt(item.left),y:parseInt(item.top)};
+                    this.selectPrintPartPoint  = {x:parseInt(item.left),y:parseInt(item.top)};
                     this.mousePointStart = {x:$event.offsetX, y:$event.offsetY};
                 },
                 _dragend(item,$event){

resources/views/test.blade.php

@@ -1,62 +1,55 @@
 @extends('layouts.app')
 
 @section('content')
-    <div id="container" class="m-lg-auto position-relative border border-3 border-dark" style="width:500px;height:500px;cursor: pointer" onselectstart="return false">
-        <div id="abc" class="position-absolute border border-2 border-warning bg-warning" style="width:50px;height:50px">111</div>
-        <div id="abn" class="position-absolute border border-2 border-danger bg-danger" style="width:50px;height:50px;top:30px">111</div>
-    </div>
-    <div>
-        <button onclick="getCoordinate()">获取下位置</button>
+    <div class="container" id="container">
+        <div class="form-group">
+            <input id="file" type="file" class="form-control-file">
+            <button class="btn btn-primary" type="button" @click="uploadFile">上传</button>
+        </div>
+        <svg id="barcodeDiv" style="width: 2px;height: 200px">
+        </svg>
+        <svg id="barcodeDiv1" style="width: 2px;height: 200px">
+
+        </svg>
+        <div><img src="{{asset('icon/faviconc.ico')}}" alt=""></div>
+
+        <button class="btn btn-primary" @click="deduction">截图</button>
+
     </div>
 @endsection
 
 @section("lastScript")
+    <script type="text/javascript" src="{{mix('js/utilities/barcode.js')}}"></script>
+    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
     <script>
-        //获取元素
-        var dv = document.getElementById('abn');
-        let x = 0;
-        let y = 0;
-        let l = 0;
-        let t = 0;
-        let isDown = false;
-        //鼠标按下事件
-        dv.onmousedown = function(e) {
-            //获取x坐标和y坐标
-            x = e.clientX;
-            y = e.clientY;
-
-            //获取左部和顶部的偏移量
-            l = dv.offsetLeft;
-            t = dv.offsetTop;
-            //开关打开
-            isDown = true;
-            //设置样式
-            dv.style.cursor = 'move';
-        }
-        //鼠标移动
-        window.onmousemove = function(e) {
-            if (isDown == false) {
-                return;
-            }
-            //获取x和y
-            let nx = e.clientX;
-            let ny = e.clientY;
-            //计算移动后的左偏移量和顶部的偏移量
-            let nl = nx - (x - l);
-            let nt = ny - (y - t);
-
-            dv.style.left = nl + 'px';
-            dv.style.top = nt + 'px';
-        }
-        //鼠标抬起事件
-        dv.onmouseup = function() {
-            isDown = false;
-        }
-        function getCoordinate() {
-            console.log(dv.offsetTop);
-            document.getElementById("abc").style.top = dv.offsetTop+"px";
-            /*console.log("宽".dv);
-            console.log("宽".dv.offsetY);*/
-        }
+        let vue = new Vue({
+            el:"#container",
+            data:{
+
+            },
+            mounted() {
+                window.setBarcode("0123456789","#barcodeDiv1",2,50,false)
+            },
+            methods:{
+                uploadFile(){
+                    let formData = new FormData();
+                    //第一个参数key和表单中的name的值是一个意思canvascanvas
+                    //第二个参数是文件的数据对象
+                    formData.append('file',document.getElementById('file').files[0]);
+                    window.axios.post("http://127.0.0.1:3000",formData).then(res=>{
+                        console.log(res);
+                    }).catch(err=>{
+                        console.log(err);
+                    })
+                },
+                deduction(){
+                    html2canvas(document.body).then(function(canvas) {
+                        document.body.appendChild(canvas);
+                    });
+                }
+
+            },
+
+        })
     </script>
 @stop