|
|
@@ -82,8 +82,40 @@
|
|
|
this.productionParts.printParts.forEach(function(item,index,array){
|
|
|
if (self.z_index < item['z_index'])self.z_index = item['z_index']+1;
|
|
|
});
|
|
|
+ this.initCode();
|
|
|
},
|
|
|
methods: {
|
|
|
+ initCode(){
|
|
|
+ let self = this;
|
|
|
+ console.log(this.productionParts.printParts);
|
|
|
+ this.productionParts.printParts.forEach(function(item){
|
|
|
+ if (item.type==="stripeCode"){
|
|
|
+ setTimeout(function () {
|
|
|
+ window.setBarcode("0123456789", "#svg" + item.id, 2, 50, true)
|
|
|
+ }, 1000);
|
|
|
+ }else if(item.type === 'qRCode'){
|
|
|
+ setTimeout(function () {
|
|
|
+ new QRCode(document.getElementById(item.id), {
|
|
|
+ text: "占位二维码",
|
|
|
+ width: item.height,
|
|
|
+ height: item.height,
|
|
|
+ colorDark : "#000000",
|
|
|
+ colorLight : "#ffffff",
|
|
|
+ correctLevel : QRCode.CorrectLevel.H
|
|
|
+ });
|
|
|
+ }, 1000)
|
|
|
+ } else if(item.type === "image"){
|
|
|
+ let images = self.images.filter(function(img){
|
|
|
+ return img.name === item.value;
|
|
|
+ })
|
|
|
+ let img = images.shift();
|
|
|
+ console.log(img);
|
|
|
+ let element = document.getElementById(item.id);
|
|
|
+ // element.setAttribute('src',)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 添加组件至面板上
|
|
|
// 添加组件至面板上
|
|
|
_addPartToProductionPanel(printPart) {
|
|
|
let _clone = JSON.parse(JSON.stringify(printPart));
|
|
|
@@ -107,13 +139,12 @@
|
|
|
this.productionParts.printParts.push(print_part); // 添加入组件列表中
|
|
|
if (print_part.type === "stripeCode") {
|
|
|
setTimeout(function () {
|
|
|
- console.log(123);
|
|
|
- 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 () {
|
|
|
new QRCode(document.getElementById(print_part.id), {
|
|
|
- text: "占位二维码",
|
|
|
+ text: "0123456789",
|
|
|
width: print_part.width,
|
|
|
height: print_part.height,
|
|
|
colorDark : "#000000",
|
|
|
@@ -122,7 +153,7 @@
|
|
|
});
|
|
|
}, 1000)
|
|
|
} else if (print_part.type === "image") {
|
|
|
- // TODO 修改为图片
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
// 从面板删除组件
|
|
|
@@ -136,7 +167,6 @@
|
|
|
this.productionParts.printParts.splice(this.productionParts.editIndex, 1);
|
|
|
this.$forceUpdate();
|
|
|
},
|
|
|
-
|
|
|
// 打开保存modal
|
|
|
showSaveModal() {
|
|
|
$('#saveModal').modal('show');
|
|
|
@@ -148,10 +178,11 @@
|
|
|
let printTemplate = JSON.parse(JSON.stringify(this.productionParts.printParts));
|
|
|
printTemplate.push(this.productionParts.bg);
|
|
|
let data = {
|
|
|
+ id: this.printTemplate.id,
|
|
|
name: this.productionParts.addPart.name,
|
|
|
value: printTemplate
|
|
|
};
|
|
|
- window.axios.post("{{url('apiLocal/maintenance/expressPrinting/template/create')}}", data).then(res => {
|
|
|
+ window.axios.post("{{url('apiLocal/maintenance/expressPrinting/template/update')}}", data).then(res => {
|
|
|
if (res.data.success) {
|
|
|
tempTip.showSuccess('保存成功!');
|
|
|
$('#saveModal').modal('hide');
|
|
|
@@ -187,15 +218,28 @@
|
|
|
height: item.height + 'px',
|
|
|
left: item.left + 'px',
|
|
|
top: item.top + 'px',
|
|
|
- 'white-space': 'pre',
|
|
|
'z-index' : item['z_index'],
|
|
|
};
|
|
|
- if (item['border-width']) {
|
|
|
+ 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.width = 100+'px';
|
|
|
+ style.height = 100+'px';
|
|
|
+ let scale = item.scale;
|
|
|
+ if(scale){
|
|
|
+ style.transform = `scale(${scale},${scale})`;
|
|
|
+ }
|
|
|
+ } else if (item.type === 'stripeCode'){
|
|
|
+ let scale = item.scale;
|
|
|
+ style.transform = `scale(${scale},${scale})`;
|
|
|
}
|
|
|
- if (item['font-size']) style['font-size'] = item['font-size'];
|
|
|
return style;
|
|
|
},
|
|
|
getImageSrc(image){
|
|
|
@@ -203,8 +247,18 @@
|
|
|
},
|
|
|
setImageBg(image){
|
|
|
let src = this.getImageSrc(image);
|
|
|
- this.productionParts.editPart.value = image.name;
|
|
|
+ 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;
|
|
|
}
|
|
|
}
|
|
|
});
|