|
|
@@ -8,19 +8,34 @@
|
|
|
@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" 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 class="row">
|
|
|
+ <div class="container">
|
|
|
+ <div class="input-group">
|
|
|
+ <label for="scale" class="col-form-label-sm">缩放比例</label>
|
|
|
+ <input id="scale" type="number" v-model="scale" 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" 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",
|
|
|
@@ -29,6 +44,7 @@
|
|
|
items:{!! $items !!},
|
|
|
parts:[],
|
|
|
index:0,
|
|
|
+ scale:1,
|
|
|
},
|
|
|
created() {
|
|
|
this.parts = JSON.parse(this.template.value);
|
|
|
@@ -62,6 +78,18 @@
|
|
|
});
|
|
|
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',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return style;
|
|
|
+ },
|
|
|
getSvgStyle(item){
|
|
|
return {
|
|
|
width:item.width+'px',
|
|
|
@@ -85,7 +113,6 @@
|
|
|
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){
|
|
|
@@ -97,6 +124,10 @@
|
|
|
return arr[0]+item[arr[1]];
|
|
|
}
|
|
|
},
|
|
|
+ printImage(){
|
|
|
+ let img = window.canvasImg("#print-div","#img-div",this.scale);
|
|
|
+ $("#img-div").append(img);
|
|
|
+ }
|
|
|
}
|
|
|
})
|
|
|
</script>
|
ajun