打印页面测试

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

@@ -8,9 +8,12 @@
         @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  class="position-relative border-1 row p-0 m-0 bg-white border" 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>
@@ -28,53 +31,41 @@
                 index:0,
             },
             created() {
-                if(this.template) this.parts = JSON.parse(this.template.value);
+                this.parts = JSON.parse(this.template.value);
             },
             mounted() {
-                this.printingTemplate(this.template,this.items)
+                $.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);
                     });
                 },
-                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(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'
                             }
                         }
                     });
-
-                },
-                getBgStyle(parts){
-
+                    return style;
                 },
                 getSvgStyle(item){
-                    let style = JSON.parse(JSON.stringify(item));
                     return {
-                        width:style.width+'px',
-                        height:style.height+'px',
+                        width:item.width+'px',
+                        height:item.height+'px',
                     };
                 },
                 getStyle(item){
@@ -94,6 +85,8 @@
                     return style;
                 },
                 getContent(part,item){  // 组件内容
+                    console.log(part.text);
+                    return part.text;
                     if(part.text.indexOf("$")===-1)return part.text;
                     if(part.text.indexOf("+$")!==-1){
                         let arr = part.text.split("+$");
@@ -104,7 +97,6 @@
                         return arr[0]+item[arr[1]];
                     }
                 },
-
             }
         })
     </script>

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

@@ -2,12 +2,12 @@
     <div class="position-absolute print-part"
          draggable="true"
          v-for="(item,i) in productionParts.printParts"
-         @click.stop.self="productionParts.editPart = item"
+         @click.stop="productionParts.editPart = item"
          @dragstart="_dragstart(item,$event)"             {{--开始拖动元素时触发--}}
          @dragend="_dragend(item,$event)"                 {{--拖动结束--}}
          :style="getPrintPartStyle(item)"
          :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>
+        <svg v-if="item.type ==='StripeCode'" :style="{width:item.width,height:item.height}" :id="item.id" @click.stop="productionParts.editPart = item"></svg>
         <span v-else>@{{ item.text }}</span>
     </div>
 </div>