修改模型添加

resources/views/maintenance/expressPrinting/part/image/_create.blade.php → resources/views/maintenance/expressPrinting/image/_create.blade.php

@@ -11,16 +11,16 @@
             <div class="modal-body">
                 <form class="form">
                     <div class="form-group row">
-                        <label for="image-name" class="col-sm-3 col-form-label text-right">name</label>
+                        <label for="image-name" class="col-sm-3 col-form-label text-right">图片名</label>
                         <div class="col-sm-9 form-inline">
-                            <input type="text" id="image-name" class="form-control col-9" v-model="editItem.name" placeholder="图片名"></input>
+                            <input type="text" id="image-name" name="imageName" class="form-control col-9" v-model="editItem.name" placeholder="图片名"></input>
                         </div>
                     </div>
 
                     <div class="form-group row">
                         <label for="image-file" class="col-sm-3 col-form-label text-right">所属图片</label>
                         <div class="col-sm-9 form-inline">
-                            <input type="file" id="image-file" class="form-control col-9" ref="image"></input>
+                            <input type="file" id="image-file" class="form-control col-9" ref="image" accept="image/jpeg,image/jpg,image/png,image/svg"></input>
                         </div>
                     </div>
                 </form>

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

@@ -4,23 +4,27 @@
             <div class="card-header">
                 <button type="button" class="btn btn-success"  @click="showSaveModal">保存当前打印模板</button>
             </div>
-            <div class="card-header" v-show="selectProducePanel">
+            <div class="card-header" v-if="productionParts.bg">
                 <span>背景版编辑</span>
             </div>
-            <div class="card-body" v-show="selectProducePanel">
+            <div class="card-body" v-if="productionParts.bg">
                 <div class="form-group m-0">
                     <label for="producePanel-width" class="col-form-label">宽</label>
-                    <input type="text" id="producePanel-width" class="form-control form-control-sm" v-model="producePanel.width">
+                    <input type="text" id="producePanel-width" class="form-control form-control-sm" v-model="productionParts.bg.width">
                 </div>
                 <div class="form-group m-0">
                     <label for="producePanel-height" class="col-form-label">高</label>
-                    <input type="text" id="producePanel-height" class="form-control form-control-sm" v-model="producePanel.height">
+                    <input type="text" id="producePanel-height" class="form-control form-control-sm" v-model="productionParts.bg.height">
                 </div>
             </div>
             <div class="card-header">
                 <span>编辑面板</span>
             </div>
             <div class="card-body" v-if="productionParts.editPart">
+                <div class="form-group m-0">
+                    <label for="compile-border-width" class="col-form-label">边框大小</label>
+                    <input type="text" id="compile-border-width" class="form-control form-control-sm" v-model="productionParts.editPart['border-width']">
+                </div>
                 <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>
@@ -34,42 +38,43 @@
                     <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">
                 </div>
-                <div class="form-group m-0">
+
+                <div class="form-group m-0"  v-if="productionParts.editPart.type === 'stripeCode'">
+                    <label for="compile-scale" class="col-form-label">比例</label>
+                    <input type="text" id="compile-scale" class="form-control form-control-sm"  v-model="productionParts.editPart.scale" @input="changeStripeCodeScale">
+                </div>
+
+                <div class="form-group m-0" v-if=" ['textBox','qRCode','stripeCode'].includes(productionParts.editPart.type) ">
                     <label for="compile-width" class="col-form-label">宽</label>
-                    <input type="text" id="compile-width" class="form-control form-control-sm" v-model="productionParts.editPart.width">
+                    <input type="text" id="compile-width" class="form-control form-control-sm"
+                           v-if="['qRCode','stripeCode'].includes(productionParts.editPart.type)"
+                           v-model="productionParts.editPart.width" @input="changeStripeCodeWidth()">
+                    <input type="text" v-else id="compile-width" class="form-control form-control-sm" v-model="productionParts.editPart.width" @input="changeStripeCodeWidth()">
                 </div>
-                <div class="form-group m-0">
+
+                <div class="form-group m-0" v-if="productionParts.editPart.type === 'textBox'">
                     <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" >
+                <div class="form-group m-0"  v-if="productionParts.editPart['font-size']">
                     <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>
+                    <input type="text" id="compile-font-size" class="form-control form-control-sm" v-model="productionParts.editPart['font-size']">
                 </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.z_index">
                 </div>
-                <div class="form-group m-0" >
+                <div class="form-group m-0" v-if="productionParts.editPart.type === 'textBox'">
                     <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>
+                    <select class="form-control-sm form-control" id="compile-justify-content" v-model="productionParts.editPart['justify-content']">
+                        <option value="flex-start">左对齐</option>
                         <option value="center">居中对齐</option>
-                        <option value="flex-end">右对齐</option>
                     </select>
                 </div>
-                <div class="form-group m-0" >
+                <div class="form-group m-0" v-if="productionParts.editPart.type === 'textBox'">
                     <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>
+                    <select class="form-control-sm form-control " id="compile-text-align" v-model="productionParts.editPart['align-items']">
+                        <option value="flex-start">顶部</option>
                         <option value="center">垂直居中</option>
                         <option value="flex-end">顶部</option>
                     </select>

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

@@ -1,15 +1,57 @@
-<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"
-         v-for="(item,i) in productionParts.printParts"
-         @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="productionParts.editPart = item"></svg>
-        <span v-else>@{{ item.text }}</span>
-    </div>
+<div class=" border-1 row p-0 m-0 border bg-light" id="produce-panel"  style="height: 1000px">  <!--position-relative--> <!--position-absolute-->
+    <template v-if="productionParts.bg">
+
+        <div class="bg-white border-dark position-relative"  :style="{height: productionParts.bg.height+'px', width:productionParts.bg.width+'px','z-index':9 }">
+
+            <template v-for="(printPart,i) in productionParts.printParts ">
+{{---文本框--}}
+                <template v-if="printPart.type === 'textBox'">
+                    <div class="position-absolute print-part bg-white" id="bg" :key="i" draggable="true"
+                         :style="getStyle(printPart)"
+                         @click.stop="productionParts.editPart = printPart"
+                         @dragstart="_dragstart(printPart,$event)"             {{--开始拖动元素时触发--}}
+                         @dragend="_dragend(printPart,$event)"                 {{--拖动结束--}}
+                    >
+                        @{{ printPart.text }}
+                    </div>
+                </template>
+{{---条纹码--}}
+                <template v-if="printPart.type === 'stripeCode'">
+                    <div class="position-absolute print-part bg-white" draggable="true"  :key="i"
+                         :style="getStyle(printPart)"
+                         @click.stop="productionParts.editPart = printPart"
+                         @dragstart="_dragstart(printPart,$event)"             {{--开始拖动元素时触发--}}
+                         @dragend="_dragend(printPart,$event)"                 {{--拖动结束--}}
+                    >
+                        <svg class="" :id="'svg'+printPart.id"   :class="{'bg-secondary':productionParts.editPart.id === printPart.id}">
+                        </svg>
+                    </div>
+
+                </template>
+{{---二维码--}}
+                <template v-if="printPart.type === 'qRCode'">
+                    <div class="position-absolute print-part bg-white"  :id="printPart.id" :key="i" draggable="true"
+                         :style="getStyle(printPart)"
+                         @click.stop="productionParts.editPart = printPart"
+                         @dragstart="_dragstart(printPart,$event)"             {{--开始拖动元素时触发--}}
+                         @dragend="_dragend(printPart,$event)"                 {{--拖动结束--}}
+                    >
+                    </div>
+                </template>
+{{---图片--}}
+                <template v-if="printPart.type === 'image'">
+                    <img  class="position-absolute print-part bg-white" src="\icon\img404-thumbnail.jpg" :alt="printPart.value" :key="i" :height="printPart.height" :width="printPart.width" :id="printPart.id"
+                         :style="getStyle(printPart)"
+                          :class="{'bg-secondary':productionParts.editPart.id === printPart.id}"
+                         @click.stop="productionParts.editPart = printPart"
+                         @dragstart="_dragstart(printPart,$event)"             {{--开始拖动元素时触发--}}
+                         @dragend="_dragend(printPart,$event)"                 {{--拖动结束--}}
+                    >
+                </template>
+            </template>
+        </div>
+    </template>
+
 </div>
 <div class="modal fade" id="saveModal" tabindex="-1"  aria-hidden="true">
     <div class="modal-dialog">

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

@@ -1,11 +1,29 @@
 <div class="container-fluid p-0"  id="select-panel" style="cursor: pointer; overflow-y: scroll;border-radius:5px;" >
-    <input type="text" class="form-control" placeholder="输入组件名称进行搜索" @change="_searchPrintPart($event)">
-    <ul class="list-group" >
-        <li class="list-group-item align-text-top hover"
-            v-for="(printPart,i) in filterPrintParts"
-            @dblclick="_addPartToProductionPanel(printPart)">
-            @{{ printPart.name }}
-            <span class="text-right float-right btn btn-sm btn-outline-success">添加</span>
-        </li>
-    </ul>
+    <div class="card">
+        <div class="card-header">组件列表</div>
+        <div class="card-body m-0 p-0">
+            <ul class="list-group" >
+                <li class="list-group-item align-text-top hover"
+                    v-for="(printPart,i) in printParts"
+                    @dblclick="_addPartToProductionPanel(printPart)">
+                    @{{ printPart.name }}
+                    <span class="text-right float-right btn btn-sm btn-outline-success" @click="_addPartToProductionPanel(printPart)">添加</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="card" v-if="productionParts.editPart && productionParts.editPart.type === 'image'">
+        <div class="card-header">图片选择</div>
+        <div class="card-body">
+            <ul class="list-group">
+                <template v-for="(image,i) in images">
+                    <li class="list-group-item" :class="{'list-group-item active' : productionParts.editPart.value === 'image.name'}">
+                        <img :src="getImageSrc(image)" alt="image.name" height="200" width="100">
+                        <button class="btn btn-sm" @click="setImageBg(image)">替换</button>
+                    </li>
+                </template>
+
+            </ul>
+        </div>
+    </div>
 </div>