baoshi-was/resources/views/maintenance/expressPrinting/template/_produce.blade.php

<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"  :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">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="saveModalLabel">保存打印模板</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="productionParts.addPart.name = null">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="recipient-name" class="col-form-label">模板名称</label>
                    <input type="text" id="recipient-name" class="form-control" v-model="productionParts.addPart.name">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="productionParts.addPart.name = null">关闭</button>
                <button type="button" class="btn btn-success" @click="_savePrintTemplate">保存</button>
            </div>
        </div>
    </div>
</div>