|
|
@@ -1,5 +1,5 @@
|
|
|
@extends('layouts.app')
|
|
|
-@section('title')模板@endsection
|
|
|
+@section('title')模板-创建@endsection
|
|
|
|
|
|
@section('content')
|
|
|
<div class="container-fluid d-none row m-1" id="print-template">
|
|
|
@@ -27,13 +27,28 @@
|
|
|
let vue = new Vue({
|
|
|
el: "#print-template",
|
|
|
data: {
|
|
|
- printParts:{!! $printParts !!},
|
|
|
+ printParts: [
|
|
|
+ @foreach($printParts as $items)
|
|
|
+ {
|
|
|
+ name: '{{ $items['name'] }}', value: {
|
|
|
+ @foreach($items['value'] as $key=>$value)
|
|
|
+ '{{$key}}': '{{$value}}',
|
|
|
+ @endforeach
|
|
|
+ }
|
|
|
+ },
|
|
|
+ @endforeach
|
|
|
+ ],
|
|
|
+ imgPrefix:"{{asset("/storage")}}",
|
|
|
+ images:{!! $printPartImages ?? [] !!},
|
|
|
filterPrintParts: [],
|
|
|
producePanel: {}, // 背景版
|
|
|
selectProducePanel: false, // 是否选中背景版
|
|
|
productionParts: {
|
|
|
+ bg: null,
|
|
|
printParts: [], // 组件
|
|
|
- editPart: null, // 编辑中的组件
|
|
|
+ editPart: {
|
|
|
+ id:null
|
|
|
+ }, // 编辑中的组件
|
|
|
editIndex: {}, // 编辑中组件的下标
|
|
|
addPart: {}, // 添加模板
|
|
|
},
|
|
|
@@ -46,7 +61,6 @@
|
|
|
z_index: 10,
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.initProductionParts();
|
|
|
$('.navbar,.nav1,.nav2').hide();
|
|
|
$('.nav3').on('mouseenter', function () {
|
|
|
$('.navbar,.nav1,.nav2').show();
|
|
|
@@ -60,22 +74,41 @@
|
|
|
// 添加组件至面板上
|
|
|
_addPartToProductionPanel(printPart) {
|
|
|
let _clone = JSON.parse(JSON.stringify(printPart));
|
|
|
- let print_part = JSON.parse(_clone.value);
|
|
|
- print_part.left = 0;
|
|
|
- print_part.top = 0;
|
|
|
+ let print_part = _clone.value
|
|
|
+ if (!this.productionParts.bg && print_part.type !== 'bg') {
|
|
|
+ window.tempTip.show('先添加背景组件在进行其他组件的添加');
|
|
|
+ return
|
|
|
+ } else if (this.productionParts.bg && print_part.type === 'bg') {
|
|
|
+ window.tempTip.show('背景组件请勿重复添加');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (print_part.type === 'bg') {
|
|
|
+ this.productionParts.bg = print_part;
|
|
|
+ return;
|
|
|
+ }
|
|
|
print_part.index = this.productionParts.printParts.length;
|
|
|
- print_part.z_index = this.z_index++;
|
|
|
+ this.z_index+=1
|
|
|
+ print_part.z_index = this.z_index;
|
|
|
print_part.id = "id" + this.z_index;
|
|
|
print_part.text = null;
|
|
|
- this.productionParts.printParts.push(print_part);
|
|
|
- if (print_part.type === "StripeCode") {
|
|
|
+ this.productionParts.printParts.push(print_part); // 添加入组件列表中
|
|
|
+ if (print_part.type === "stripeCode") {
|
|
|
setTimeout(function () {
|
|
|
- window.setBarcode("0123456789", "#" + print_part.id, 2, 50, true)
|
|
|
+ window.setBarcode("0123456789", "#svg" + print_part.id, 2, 50, true)
|
|
|
}, 100);
|
|
|
- } else if (print_part.type === "QrCode"){
|
|
|
- setTimeout(function(){
|
|
|
- QRCode.toCanvas(document.getElementById("#"+print_part.id),"占位二维码",function(err){});
|
|
|
- },100)
|
|
|
+ } else if (print_part.type === "qRCode") {
|
|
|
+ setTimeout(function () {
|
|
|
+ new QRCode(document.getElementById(print_part.id), {
|
|
|
+ text: "0123456789",
|
|
|
+ width: print_part.width,
|
|
|
+ height: print_part.height,
|
|
|
+ colorDark : "#000000",
|
|
|
+ colorLight : "#ffffff",
|
|
|
+ correctLevel : QRCode.CorrectLevel.H
|
|
|
+ });
|
|
|
+ }, 1000)
|
|
|
+ } else if (print_part.type === "image") {
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
// 从面板删除组件
|
|
|
@@ -89,14 +122,6 @@
|
|
|
this.productionParts.printParts.splice(this.productionParts.editIndex, 1);
|
|
|
this.$forceUpdate();
|
|
|
},
|
|
|
- // 查询组件
|
|
|
- _searchPrintPart(event) {
|
|
|
- let value = $(event.target).val();
|
|
|
- this.filterPrintParts = this.printParts.filter(function (printPart) {
|
|
|
- return printPart.name.includes(value);
|
|
|
- });
|
|
|
- if (value === null || value === '') this.filterPrintParts = JSON.parse(JSON.stringify(this.printParts));
|
|
|
- },
|
|
|
// 打开保存modal
|
|
|
showSaveModal() {
|
|
|
$('#saveModal').modal('show');
|
|
|
@@ -106,12 +131,7 @@
|
|
|
tempTip.setDuration(3000);
|
|
|
tempTip.setIndex(1999);
|
|
|
let printTemplate = JSON.parse(JSON.stringify(this.productionParts.printParts));
|
|
|
- let bg = {
|
|
|
- type: 'bg',
|
|
|
- 'width': this.producePanel.width,
|
|
|
- 'height': this.producePanel.height,
|
|
|
- }
|
|
|
- printTemplate.push(bg);
|
|
|
+ printTemplate.push(this.productionParts.bg);
|
|
|
let data = {
|
|
|
name: this.productionParts.addPart.name,
|
|
|
value: printTemplate
|
|
|
@@ -127,57 +147,71 @@
|
|
|
tempTip.show(err);
|
|
|
});
|
|
|
},
|
|
|
- // 初始化编辑面板
|
|
|
- initProductionParts() {
|
|
|
- this.productionParts = {printParts: [], editPart: null, addPart: {}};
|
|
|
- this.filterPrintParts = JSON.parse(JSON.stringify(this.printParts));
|
|
|
- let height = (window.innerHeight - 120) + 'px';
|
|
|
- $("#production_panel,#part_panel,#compile_panel,#select-panel,#produce-panel").css({height: height});
|
|
|
- let produce_panel = $("#produce-panel");
|
|
|
- produce_panel.css({height: height});
|
|
|
- },
|
|
|
- //
|
|
|
- getPrintPartStyle(item) {
|
|
|
- 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'; // 字体换行
|
|
|
- return style;
|
|
|
- },
|
|
|
// 开始拖动元素时触发
|
|
|
_dragstart(item, $event) {
|
|
|
+ console.log(item)
|
|
|
this.selectPrintPartPoint = {x: parseInt(item.left), y: parseInt(item.top)};
|
|
|
this.mousePointStart = {x: $event.offsetX, y: $event.offsetY};
|
|
|
},
|
|
|
// 结束拖动元素时触发
|
|
|
_dragend(item, $event) {
|
|
|
+ console.log(item)
|
|
|
this.mousePointEnd = {x: $event.offsetX, y: $event.offsetY};
|
|
|
let left = item.left - (this.mousePointStart.x - this.mousePointEnd.x);
|
|
|
let top = item.top - (this.mousePointStart.y - this.mousePointEnd.y);
|
|
|
item.left = left > 0 ? left : 0;
|
|
|
item.top = top > 0 ? top : 0;
|
|
|
},
|
|
|
- editProducePanel() {
|
|
|
- this.selectProducePanel = !this.selectProducePanel;
|
|
|
- },
|
|
|
getProducePanelStyle() {
|
|
|
return {
|
|
|
width: this.producePanel.width + 'px',
|
|
|
height: this.producePanel.height + 'px',
|
|
|
}
|
|
|
+ },
|
|
|
+ getStyle(item) {
|
|
|
+ let style = {
|
|
|
+ width: item.width + 'px',
|
|
|
+ height: item.height + 'px',
|
|
|
+ left: item.left + 'px',
|
|
|
+ top: item.top + 'px',
|
|
|
+ 'z-index' : item['z_index'],
|
|
|
+ };
|
|
|
+ if (item.type === 'textBox'){
|
|
|
+ style['font-size'] = item['font-size'];
|
|
|
+ style['border-width'] = item['border-width']+'px';
|
|
|
+ style['border-color'] = '#000';
|
|
|
+ style['border-style'] = 'solid';
|
|
|
+ style['display'] = 'flex'
|
|
|
+ style['justify-content'] = item['justify-content']
|
|
|
+ style['align-items'] = item['align-items']
|
|
|
+ style['text-align'] = 'center'
|
|
|
+ } else if (item.type === 'qRCode'){
|
|
|
+ style.heigth = style.width;
|
|
|
+ let scale = item.scale;
|
|
|
+ style.transform = `scale(${scale},${scale})`;
|
|
|
+ } else if (item.type === 'stripeCode'){
|
|
|
+ let scale = item.scale;
|
|
|
+ style.transform = `scale(${scale},${scale})`;
|
|
|
+ }
|
|
|
+ return style;
|
|
|
+ },
|
|
|
+ getImageSrc(image){
|
|
|
+ return this.imgPrefix+image.file.url+'.'+image.file.type
|
|
|
+ },
|
|
|
+ setImageBg(image){
|
|
|
+ let src = this.getImageSrc(image);
|
|
|
+ this.productionParts.editPart.text = image.name;
|
|
|
+ document.getElementById(this.productionParts.editPart.id).setAttribute('src',src) ;
|
|
|
+ },
|
|
|
+ changeStripeCodeWidth(){
|
|
|
+ let default_width = 404;
|
|
|
+ if (this.productionParts.editPart.type === 'qRCode')default_width = 100;
|
|
|
+ this.productionParts.editPart.scale = this.productionParts.editPart.width / default_width;
|
|
|
+ },
|
|
|
+ changeStripeCodeScale(){
|
|
|
+ let default_width = 404;
|
|
|
+ if (this.productionParts.editPart.type === 'qRCode')default_width = 100;
|
|
|
+ this.productionParts.editPart.width = default_width * this.productionParts.editPart.scale;
|
|
|
}
|
|
|
}
|
|
|
});
|
ajun