临时提交

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

@@ -24,8 +24,14 @@
                             <input type="number" id="template-height" v-model="template.height" class="form form-control">
                         </div>
                         <div class="form-group">
-                            <label for="template-border">边框</label>
-                            <input type="number" id="template-border" v-model="template.border" class="form form-control">
+                            <label for="template-border-type">边框类型</label>
+                            <select class="form-control" id="template-border-type" v-model="template.borderStyle">
+                                <option v-for="style in borderStyles" :value="style.value">@{{ style.name }}</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="template-border-weight">边框大小</label>
+                            <input type="number" id="template-border" v-model="template.borderWidth" class="form form-control">
                         </div>
                     </div>
                     <div class="card-footer">
@@ -56,23 +62,23 @@
                         </div>
                         <div class="form-group">
                             <label for="template-text-align">文本对齐方式</label>
-                            <select name="" id="template-text-align" v-model="template.justify_content" class="form form-control">
+                            <select name="" id="template-text-align" v-model="template.justifyContent" class="form form-control">
                                 <option v-for="justifyContent in justifyContents" :value="justifyContent.value">@{{ justifyContent.name }}</option>
                             </select>
                         </div>
                         <div class="form-group">
                             <label for="template-text-align">文本垂直对齐</label>
-                            <select name="" id="template-text-align" v-model="template.align_items" class="form form-control">
+                            <select name="" id="template-text-align" v-model="template.alignItems" class="form form-control">
                                 <option v-for="alignItem in alignItems" :value="alignItem.value">@{{  alignItem.name }}</option>
                             </select>
                         </div>
                         <div class="form-group">
                             <label for="template-font-size">字体大小</label>
-                            <input type="text" id="template-font-size" v-model="template.font_size" class="form form-control">
+                            <input type="text" id="template-font-size" v-model="template.fontSize" class="form form-control">
                         </div>
                         <div class="form-group">
                             <label for="template-font-weight">字体宽</label>
-                            <select id="template-font-weight" v-model="template.font_weight" class="form-control">
+                            <select id="template-font-weight" v-model="template.fontWeight" class="form-control">
                                 <option v-for="fontWeight in fontWeights" :value="fontWeight.value" >@{{ fontWeight.name }}</option>
                             </select>
                         </div>
@@ -117,13 +123,19 @@
                     type:'',
                     width:200,
                     height:100,
-                    border:1,
-                    font_size:12,
+                    borderStyle:'solid',
+                    borderWidth:1,
+                    fontSize:12,
                     text:'',
-                    font_weight:'normal',   //normal lighter bold
-                    justify_content:'',     //文字水平对齐方式
-                    align_items:'center',         //文字垂直对齐
+                    fontWeight:'normal',   //normal lighter bold
+                    justifyContent:'',     //文字水平对齐方式
+                    alignItems:'center',         //文字垂直对齐
                 },
+                types:[
+                    {name:"条纹码1",value:""},
+                    {name:"条纹码2",value:""},
+                    {name:"",value:""},
+                ],
                 fontWeights:[
                     {name:"正常",value:"normal"},
                     {name:"细体",value:"lighter"},
@@ -138,6 +150,11 @@
                     {name:"顶部",value:""},
                     {name:"居中",value:"center"},
                     {name:"底部",value:"flex-end"},
+                ],
+                borderStyles:[
+                    {name:"默认边框",value:"solid"},
+                    {name:"无边框",value:"none"},
+                    {name:"虚线边框",value:"dashed"},
                 ]
             },
             mounted() {
@@ -152,12 +169,12 @@
                         'display':'flex',
                         'width':this.template.width+'px',
                         'height':this.template.height+'px',
-                        'border-style':'solid',
-                        'border-width':this.template.border+'px',
-                        'font-size':this.template.font_size+'px',
-                        'font-weight':this.template.font_weight,
-                        'justify-content':this.template.justify_content,
-                        'align-items':this.template.align_items,
+                        'border-style':this.template.borderStyle,
+                        'border-width':this.template.borderWidth+'px',
+                        'font-size':this.template.fontSize+'px',
+                        'font-weight':this.template.fontWeight,
+                        'justify-content':this.template.justifyContent,
+                        'align-items':this.template.alignItems,
                     };
                     return style;
                 },
@@ -169,6 +186,7 @@
                     window.axios.post('{{url('apiLocal/maintenance/expressPrinting/part/create')}}',data).then(res=>{
                         if(res.data.success){
                             tempTip.showSuccess(res.data.data);
+                            $('#saveModal').modal('hide');
                             return;
                         }
                         tempTip.show(res.data.message);

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

@@ -1,6 +1,9 @@
 <div class="container-fluid">
     <div class="card">
         <form class="form">
+            <div class="card-header">
+                <button type="button" class="btn btn-success"  @click="showSaveModal">保存当前打印模板</button>
+            </div>
             <div class="card-header" v-show="selectProducePanel">
                 <span>背景版编辑</span>
             </div>
@@ -18,10 +21,15 @@
                 <span>编辑面板</span>
             </div>
             <div class="card-body" v-if="productionParts.editPart">
+                <div class="form-group m-0">
+                    <label for="compile-text" class="col-form-label">文本内容</label>
+                    <textarea class="form-control" id="compile-text" cols="30" rows="5" v-model="productionParts.editPart.text"></textarea>
+                </div>
                 <div class="form-group m-0">
                     <label for="compile-left" class="col-form-label">left</label>
                     <input type="text" id="compile-left" class="form-control form-control-sm" v-model="productionParts.editPart.left">
                 </div>
+
                 <div class="form-group m-0">
                     <label for="compile-top" class="col-form-label">top</label>
                     <input type="text" id="compile-top" class="form-control form-control-sm" v-model="productionParts.editPart.top">
@@ -34,21 +42,33 @@
                     <label for="compile-height" class="col-form-label text-sm-right">高</label>
                     <input type="text" id="compile-height" class="form-control form-control-sm" v-model="productionParts.editPart.height">
                 </div>
+                <div class="form-group m-0" >
+                    <label for="compile-font-size" class="col-form-label text-sm-right">字体大小</label>
+                    <input type="text" id="compile-font-size" class="form-control form-control-sm" v-model="productionParts.editPart.fontSize">
+                </div>
+                <div class="form-group m-0" >
+                    <label for="compile-font-weight" class="col-form-label text-sm-right">字体粗细</label>
+                    <select class="form-control" id="compile-font-weight" v-model="productionParts.editPart.fontWeight">
+                        <option  value="normal">正常</option>
+                        <option  value="lighter">细体</option>
+                        <option  value="bold">粗体</option>
+                    </select>
+                </div>
                 <div class="form-group m-0" >
                     <label for="compile-z-index" class="col-form-label text-sm-right">图层</label>
-                    <input type="text" id="compile-z-index" class="form-control form-control-sm" v-model="productionParts.editPart.style.z_index">
+                    <input type="text" id="compile-z-index" class="form-control form-control-sm" v-model="productionParts.editPart.z_index">
                 </div>
-                <div class="form-group m-0" v-if="productionParts.editPart.style">
-                    <label for="compile-justify-content" class="col-form-label text-sm-right">文本对齐方式</label>
-                    <select class="form-control-sm form-control" id="compile-justify-content" v-model="productionParts.editPart.style.justify_content">
+                <div class="form-group m-0" >
+                    <label for="compile-justify-content" class="col-form-label text-sm-right">文本水平对齐方式</label>
+                    <select class="form-control-sm form-control" id="compile-justify-content" v-model="productionParts.editPart.justifyContent">
                         <option value="">左对齐</option>
                         <option value="center">居中对齐</option>
                         <option value="flex-end">右对齐</option>
                     </select>
                 </div>
-                <div class="form-group m-0" v-if="productionParts.editPart.style">
-                    <label for="compile-text-align" class="col-form-label text-sm-right">文本对齐方式</label>
-                    <select class="form-control-sm form-control " id="compile-text-align" v-model="productionParts.editPart.style.align_items">
+                <div class="form-group m-0" >
+                    <label for="compile-text-align" class="col-form-label text-sm-right">文本垂直对齐方式</label>
+                    <select class="form-control-sm form-control " id="compile-text-align" v-model="productionParts.editPart.alignItems">
                         <option value="">顶部</option>
                         <option value="center">垂直居中</option>
                         <option value="flex-end">顶部</option>
@@ -56,11 +76,9 @@
                 </div>
             </div>
             <div class="card-footer" v-show="!selectProducePanel">
-                <button type="button" class="btn btn-outline-secondary" v-show="productionParts.editPart" @click="_removePartToProductionPanel()">删除</button>
-            </div>
-            <div class="card-footer">
-                <button type="button" class="btn btn-success"  @click="showSaveModal">保存当前打印模板</button>
+                <button type="button" class="btn btn-outline-secondary" v-show="productionParts.editPart" @click="_removePartToProductionPanel(productionParts.editPart)">删除</button>
             </div>
+
         </form>
     </div>
 

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

@@ -4,12 +4,8 @@
          @click.stop.self="productionParts.editPart = item"
          @dragstart="_dragstart(item,$event)"            {{--开始拖动元素时触发--}}
          @dragend="_dragend(item,$event)"                {{-- 拖动结束 --}}
-         :style="getPrintPartDivStyle(item)"
-         :key="i">
-        <div :style="getPrintPartStyle(item)"  @click.stop.self="productionParts.editPart = item">
-            @{{ item.text }}
-        </div>
-    </div>
+         :style="getPrintPartStyle(item)"
+         :key="i">@{{ item.text }}</div>
 </div>
 <div class="modal fade" id="saveModal" tabindex="-1"  aria-hidden="true">
     <div class="modal-dialog">

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

@@ -23,6 +23,7 @@
 @endsection
 
 @section('lastScript')
+    <script type="text/javascript" src="{{mix('js/utilities/barcode.js')}}"></script>
     <script>
         let vue = new Vue({
             el:"#print-template",
@@ -59,19 +60,18 @@
             methods:{
                 _addPartToProductionPanel(printPart){
                     let _clone = JSON.parse(JSON.stringify(printPart));
-                    let print_part_style = JSON.parse(printPart.value);
-                    let item = {
-                        index:this.productionParts.printParts.length,
-                        printPart:_clone,
-                        left:'10',
-                        top:'20',
-                        width:print_part_style.width,
-                        height:print_part_style.height,
-                        text:print_part_style.text,
-                        z_index:this.z_index++,
-                        style:print_part_style
-                    };
-                    this.productionParts.printParts.push(item);
+                    let print_part = JSON.parse(_clone.value);
+                    print_part.left = 0;
+                    print_part.top = 0;
+                    print_part.index = this.productionParts.printParts.length;
+                    print_part.z_index = this.z_index++;
+                    print_part.text = null;
+                    this.productionParts.printParts.push(print_part);
+                },
+                _removePartToProductionPanel(editPart){
+                    this.productionParts.editPart = null;
+                    let index = this.productionParts.printParts.indexOf(editPart);
+                    this.productionParts.printParts.splice(index,1);
                 },
                 _alignContentToProductionPanel(){
                     this.productionParts.printParts.splice(this.productionParts.editIndex,1);
@@ -107,37 +107,28 @@
                     $("#production_panel,#part_panel,#compile_panel,#select-panel,#produce-panel").css({height:height});
                     let produce_panel = $("#produce-panel");
                     produce_panel.css({height:height});
-                    console.log(produce_panel[0].offsetWidth);
-                    // this.producePanel = {
-                    //     width:parseInt(produce_panel.css('width')),
-                    //     height:parseInt(produce_panel.css('height')),
-                    // };
                 },
                 getPrintPartStyle(item){
-                    let style =  item.style;
-                    style = {
-                         'display':'flex',
-                         'width':style.width+'px',
-                         'height':style.height+'px',
-                         'border-style':'solid',
-                         'border-width':style.border+'px',
-                         'font-size':style.font_size+'px',
-                         'font-weight':style.font_weight,
-                         'justify-content':style.justify_content,
-                         'align-items':style.align_items,
-                    };
+                    let style = JSON.parse(JSON.stringify(item));
+                    style['border-style'] = style.borderStyle;
+                    style['border-width'] = style.borderWidth+'px';
+                    if(style.borderStyle === 'none'){
+                        style['border-style'] = 'dotted';
+                        style['border-width'] = '1px';
+                    }
+                    style.display = 'flex';
+                    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';              // 字体换行
+                    console.log(style);
                     return style;
                 },
-                getPrintPartDivStyle(item){
-                    let div_style =  {
-                        'left':item.left+'px',
-                        'top':item.top+'px',
-                        'width':item.width+'px',
-                        'height':item.height+'px'
-                    };
-                    console.log(div_style);
-                    return div_style;
-                },
                 _dragstart(item,$event){
                     {{--开始拖动元素时触发--}}
                     this.selectPrintPartPoint  = {x:parseInt(item.left),y:parseInt(item.top)};

resources/views/test.blade.php

@@ -1,62 +1,64 @@
 @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 style="margin:10px">
+        <input id="src" value="11225921991"></input><br/>
+        <input type="button" onclick='code11()' value="code11">
+        <input type="button" onclick='code39()' value="code39">
+        <input type="button" onclick='code93()' value="code93">
+        <input type="button" onclick='code128()' value="code128">
+        <input type="button" onclick='ean8()' value="ean8">
+        <input type="button" onclick='ean13()' value="ean13">
+        <input type="button" onclick='ean13()' value="std25">
+        <input type="button" onclick='int25()' value="int25">
+        <input type="button" onclick='msi()' value="msi">
+        <input type="button" onclick='datamatrix()' value="datamatrix">
+        <div id="bcTarget" class="barcodeImg" style="margin:10px"></div>
     </div>
 @endsection
 
 @section("lastScript")
+    <script type="text/javascript" src="{{mix('js/utilities/barcode.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);*/
+
+        function code11(){
+            $("#bcTarget").empty().barcode($("#src").val(), "code11",{barWidth:2, barHeight:30,showHRI:false});
+        }
+
+        function code39(){
+            $("#bcTarget").empty().barcode($("#src").val(), "code39",{barWidth:2, barHeight:30,showHRI:false});
+        }
+
+        function code93(){
+            $("#bcTarget").empty().barcode($("#src").val(), "code93",{barWidth:2, barHeight:30,showHRI:false});
+        }
+
+        function code128(){
+            $("#bcTarget").empty().barcode($("#src").val(), "code128",{barWidth:1, barHeight:30,showHRI:true,displayValue: true});
+        }
+
+        function ean8(){
+            $("#bcTarget").empty().barcode($("#src").val(), "ean8",{barWidth:2, barHeight:30,showHRI:false});
+        }
+
+        function ean13(){
+            $("#bcTarget").empty().barcode($("#src").val(), "ean13",{barWidth:2, barHeight:30,showHRI:false});
+        }
+
+        function std25(){
+            $("#bcTarget").empty().barcode($("#src").val(), "std25",{barWidth:2, barHeight:30,showHRI:false});
+        }
+
+        function int25(){
+            $("#bcTarget").empty().barcode($("#src").val(), "int25",{barWidth:2, barHeight:30,showHRI:false});
+        }
+
+        function msi(){
+            $("#bcTarget").empty().barcode($("#src").val(), "msi",{barWidth:2, barHeight:30,showHRI:false});
+        }
+
+        function datamatrix(){
+            $("#bcTarget").empty().barcode($("#src").val(), "datamatrix",{barWidth:2, barHeight:30,showHRI:false});
         }
     </script>
 @stop