yiming/17168ERP
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

調整版面

Browse Source
This commit is contained in:
minom
2026-08-05 17:40:06 +08:00
parent d6c817475c
commit b30cc47184
4 changed files with 111 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin/order/pre_order.vue
+12 -5
View File
@@ -16,7 +16,7 @@
class="elevation-1"> class="elevation-1">
<template #item.slot_btn="{ item }"> <template #item.slot_btn="{ item }">
<a @click.prevent="openReceipt" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-receipt-text"></i>開立收據</a> <a @click.prevent="openReceipt(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-receipt-text"></i>開立收據</a>
<!--<a :href="'reg.aspx?order_no='+item.order_no" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-pencil-box-outline"></i>編輯</a> <!--<a :href="'reg.aspx?order_no='+item.order_no" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-pencil-box-outline"></i>編輯</a>
<a @click="deleteItem(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-trash-can"></i>刪除</a>--> <a @click="deleteItem(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-trash-can"></i>刪除</a>-->
</template> </template>
@@ -46,10 +46,11 @@
<div v-if="isModalOpen" class="modal-backdrop" @click.self="closeModal"> <div v-if="isModalOpen" class="modal-backdrop" @click.self="closeModal"
style="top: 5vh !important; left: 5vw !important; display: flex; margin: auto !important; width: 100% !important; height: 100% !important; ">
<!-- Modal Window Box --> <!-- Modal Window Box -->
<div class="modal-window"> <div class="modal-window" style="height: 100% !important; width: 100% !important; overflow: auto !important; width: 80vw !important; height: 80vh !important; ">
<header class="modal-header"> <header class="modal-header">
<!--<h2>Modal Title</h2>--> <!--<h2>Modal Title</h2>-->
<button @click="closeModal" class="close-btn">&times;</button> <button @click="closeModal" class="close-btn">&times;</button>
@@ -57,7 +58,7 @@
<main class="modal-body" style="overflow-y:auto;"> <main class="modal-body" style="overflow-y:auto;">
<!-- Async component loaded dynamically via v-if --> <!-- Async component loaded dynamically via v-if -->
<receipt-component :form-data="formData" @close-dialog="closeModal" /> <receipt-component :form-data="formData" @close-dialog="closeModal" mode="preOrder" :order_no="receiptComponent.order_no" :total_amt="receiptComponent.total_amt" />
</main> </main>
</div> </div>
@@ -78,6 +79,10 @@
options: { multiSort: false }, options: { multiSort: false },
search_options: { multiSort: false }, search_options: { multiSort: false },
isModalOpen: false, isModalOpen: false,
receiptComponent: {
order_no: "",
total_amt:0
},
search: {}, search: {},
data_table: { data_table: {
loading: true, loading: true,
@@ -118,8 +123,10 @@
this.loadData() this.loadData()
} }
}, },
openReceipt() {///開收據 openReceipt(item) {///開收據
this.openModal(); this.openModal();
this.receiptComponent.order_no = item.order_no;
this.receiptComponent.total_amt = item.total_amt;
}, },
gotoAdd() { gotoAdd() {
this.$emit('custom-event', { action: 'add' }); this.$emit('custom-event', { action: 'add' });
web/admin/print/TabletDesign.aspx
+1 -78
View File
@@ -1384,27 +1384,7 @@ html, body, * {
html = this.renderNameList(slice, el, 0); html = this.renderNameList(slice, el, 0);
} }
else if (el.id === 'alive') { else if (el.id === 'alive') {
//console.log("createEl:", slice, el)
//let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
//let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
//let rowWidth = Math.floor(Number(el.width) / rows);
//fontSize = Math.floor(rowWidth / 2);
//if (fontSize > el.style.fontSize) {
// fontSize = el.style.fontSize;
// rowWidth = fontSize * 2;
//}
//let th = Number(el.textHeight) || 0;
//let span = Number(el.textSpan) || 0;
//let h = Number(el.height);
//let w = Number(el.width);
//let namesPerCol = Math.floor((h + span) / (th + span));
//if (namesPerCol < 1) namesPerCol = 1;
//// 2. 計算總共會產生幾列 (cols)，並推算出每個名字能分配到的最大欄寬
//let cols = Math.ceil(slice.length / namesPerCol);
//if (cols < 1) cols = 1;
//let colWidth = Math.floor(w / cols);
html = this.renderLiveList(slice, el); html = this.renderLiveList(slice, el);
} }
else { else {
@@ -1490,63 +1470,6 @@ html, body, * {
let s = Number(el.style.fontSize); let s = Number(el.style.fontSize);
let sizes = []; let sizes = [];
//// 1. 模擬排版：找出能讓全體塞入的最佳字體組合
//while (s >= 12) {
// let short_s_px = s * 1.333;
// let long_s = Math.floor(s * 0.75); // 長字體最多縮小 25%
// if (long_s < 12) long_s = 12;
// let long_s_px = long_s * 1.333;
// let currentColHeight = 0;
// let totalWidth = 0;
// let tempSizes = [];
// for (let i = 0; i < names.length; i++) {
// let name = names[i];
// let l = name.length;
// let isMulti = (l * short_s_px) > th;
// let size = isMulti ? long_s : s;
// let size_px = isMulti ? long_s_px : short_s_px;
// tempSizes.push({ name: name, size: size, isMulti: isMulti });
// if (isMulti) {
// // 多行長名
// let charsPerCol = Math.floor(h / size_px);
// if (charsPerCol < 1) charsPerCol = 1;
// let lines = Math.ceil(l / charsPerCol);
// let nameW = lines * (size_px * 1.1); // 1.1倍行距
// if (currentColHeight > 0) currentColHeight = 0;
// totalWidth += nameW + gap;
// } else {
// // 單行短名
// if (currentColHeight > 0 && (currentColHeight + th + gap) <= h) {
// currentColHeight += th + gap;
// } else {
// currentColHeight = th;
// totalWidth += short_s_px + gap;
// }
// }
// }
// if (totalWidth > 0) totalWidth -= gap;
// // 總寬度未爆框，確定最佳組合
// if (totalWidth <= w) {
// sizes = tempSizes;
// break;
// }
// s -= 1;
//}
//// 處理極端情況
//if (sizes.length === 0) {
// sizes = names.map(name => {
// return { name: name, size: 12, isMulti: (name.length * 12 * 1.333) > th };
// });
//}
// 1. 模擬排版：找出能讓全體塞入的最佳字體組合 // 1. 模擬排版：找出能讓全體塞入的最佳字體組合
while (s >= 12) { while (s >= 12) {
let short_s_px = s * 1.333; let short_s_px = s * 1.333;
@@ -1806,7 +1729,7 @@ html, body, * {
display: "block", display: "block",
"min-height": `${th}px`, // ★ 固定分配高度，交給 Flexbox 自動排版 "min-height": `${th}px`, // ★ 固定分配高度，交給 Flexbox 自動排版
"max-height": `${el.height}px`, "max-height": `${el.height}px`,
width: `${fontSize * 1.33}`, width: "auto",//`${fontSize * 1.33}`,
//"line-height": "1.1", //"line-height": "1.1",
"text-align": "justify", // 統一分散對齊 "text-align": "justify", // 統一分散對齊
"text-align-last": "justify", "text-align-last": "justify",
web/admin/print/print_multi_new.aspx
+56 -265
View File
@@ -168,10 +168,6 @@
} else { } else {
$("#paperSizeSel").val("0001"); $("#paperSizeSel").val("0001");
} }
//$("#paperSizeSel").trigger('change');
//this.render();
//this.print();
//this.isInit = false;
} }
); );
}, },
@@ -184,7 +180,6 @@
if (data.result == "Y") { if (data.result == "Y") {
let details = data.data; let details = data.data;
this.allStyleDetails = details; this.allStyleDetails = details;
//console.log(data.data);
} }
} }
} }
@@ -195,23 +190,16 @@
await axios await axios
.post(this.http_host + 'api/tablet/GetPaperSize', {}) .post(this.http_host + 'api/tablet/GetPaperSize', {})
.then(response => { .then(response => {
//if (response.result=="Y") {
if (response.status == "200") { if (response.status == "200") {
let data = response.data; let data = response.data;
this.allSize = data.data; this.allSize = data.data;
//console.log(this.allSize);
if (this.allSize) { if (this.allSize) {
this.allSize.forEach(x => { this.allSize.forEach(x => {
$("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`); $("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`);
}) })
//if (this.printSize) {
// $("#paperSizeSel").val(this.printSize);
//} else {
// $("#paperSizeSel").val("0003")
//}
} }
} }
//$("#paperSizeSel").val("0003");
} }
) )
}, },
@@ -219,7 +207,6 @@
await axios await axios
.post(this.http_host + 'api/tablet/GetTabletElement', {}) .post(this.http_host + 'api/tablet/GetTabletElement', {})
.then(response => { .then(response => {
//if (response.result=="Y") {
if (response.status == "200") { if (response.status == "200") {
let data = response.data; let data = response.data;
this.tabletElement = data.data; this.tabletElement = data.data;
@@ -250,7 +237,6 @@
if (response.status == 200) { if (response.status == 200) {
this.printData = response.data; this.printData = response.data;
//console.log("printData:",this.printData);
this.printData.sort(function (a,b) { this.printData.sort(function (a,b) {
if (a.print_id < b.print_id) { if (a.print_id < b.print_id) {
return -1 return -1
@@ -259,16 +245,10 @@
} }
return 0 return 0
}); });
//this.render();
//this.print();
} }
}); });
}, },
render() { render() {
//console.log(this.pSize)
//if (this.isInit) {
// return false;
//}
$("#printArea").empty(); $("#printArea").empty();
let self = this; let self = this;
let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`) let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
@@ -283,54 +263,42 @@
} }
} }
let pageSize = self.allSize.find(y => y.paperID == $("#paperSizeSel").val()); let pageSize = self.allSize.find(y => y.paperID == $("#paperSizeSel").val());
let wrap = $("<div class='row-wrapper'></div>")
let mode = "origin"
this.printData.forEach(x => { this.printData.forEach(x => {
let style = self.allStyle.find(y => y.styleID == x.style); let style = self.allStyle.find(y => y.styleID == x.style);
//用來印內容的尺寸 //用來印內容的尺寸
console.log("style.paperSize:", style.paperSize) //console.log("style.paperSize:", style.paperSize)
let size = self.allSize.find(y => y.paperID == style.paperSize); let size = self.allSize.find(y => y.paperID == style.paperSize);
//包含空白用來折的尺寸 //包含空白用來折的尺寸
let printSize = self.allSize.find(y => y.paperID == style.printSize); let printSize = self.allSize.find(y => y.paperID == style.printSize);
let xCount = 1; let xCount = 1;
let yCount = 1; let yCount = 1;
mode = style.printMode
let total = 1; let total = 1;
if (style.printMode === "combine") { if (style.printMode === "combine") {
//用長根寬算出一張紙可以印幾張 //用長根寬算出一張紙可以印幾張
xCount=parseFloat(pageSize.width) / parseFloat(size.width); xCount=parseFloat(Number(pageSize.width)) / parseFloat(Number(size.width));
yCount=parseFloat(pageSize.height) / parseFloat(size.height); yCount=parseFloat(Number(pageSize.height)) / parseFloat(Number(size.height));
total=Math.floor(xCount) * Math.floor(yCount); total=Math.floor(xCount) * Math.floor(yCount);
} }
console.log("xCount,yCount:",xCount,yCount)
//if ((nowPageWidth + parseFloat(printSize.width)) > pageSize.width) {
if (nowPageWidth >= total) { if (nowPageWidth >= total) {
//$(canvas).css("width", printSize.width + "mm"); $(wrap).append(tabletpaper);
//$(canvas).css("height", printSize.height + "mm"); if (style.printMode !== "combine") {
//$(canvas).css("justify-content", "center"); $(canvas).append(wrap);
//$(canvas).css("break-after", "page"); $("#printArea").append(canvas);
//$(canvas).css("page-break-after", "always"); wrap = $("<div class='row-wrapper'></div>")
$(canvas).append(tabletpaper); canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
$("#printArea").append(canvas); }
canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
nowPageWidth = 0; nowPageWidth = 0;
} }
nowPageWidth = nowPageWidth + 1; //parseFloat(printSize.width); nowPageWidth = nowPageWidth + 1; //parseFloat(printSize.width);
tabletpaper = $(` <div class="tablet-paper" style="margin-top:2mm"> tabletpaper = $(` <div class="tablet-paper" >
</div>`) </div>`)
let img = self.bg.find(y => y.name == style.backendImg); let img = self.bg.find(y => y.name == style.backendImg);
/*tabletpaper.css({
"background-color": "white",
width: size.width + 'mm',
height: size.height + 'mm',
position: "relative",
"margin-bottom": "0",
"background-image": `url(${img.path})`,
'background-size': '100% 100%',
"break-after": "page",
"page-break-after": "always"
});*/
let tablet = JSON.parse(x.f_num_tablet); let tablet = JSON.parse(x.f_num_tablet);
let mid_items = tablet.mid_items; let mid_items = tablet.mid_items;
@@ -477,7 +445,6 @@
}); });
sizes.forEach(item => { sizes.forEach(item => {
let th = Number(d.textHeight) || Number(d.height) let th = Number(d.textHeight) || Number(d.height)
//let minH = item.isMulti ? `${d.height}px` : `${d.textHeight}px`;
let minH = item.isShort ? `${th}px` : `${d.height}px` let minH = item.isShort ? `${th}px` : `${d.height}px`
; ;
let alignStyle = item.isMulti ? "start" : "justify"; let alignStyle = item.isMulti ? "start" : "justify";
@@ -496,115 +463,11 @@
}); });
$namelist.append($span); $namelist.append($span);
}); });
//let perRow = Math.floor(Number(d.height) / Number(d.textHeight));
//let rows = Math.ceil(Number(mid.length) / Number(perRow));//總行數
//let rowWidth = Math.floor(Number(d.width) / rows);
//newFontSize = Math.floor(rowWidth / 2);
//if (newFontSize > d.fontSize) {
// newFontSize = d.fontSize;
// rowWidth = newFontSize * 2;
//}
//let th = Number(d.textHeight) || 0;
//let span = Number(d.textSpan) || 0;
//let h = Number(d.height);
//let w = Number(d.width);
//let namesPerCol = Math.floor((h + span) / (th + span));
//if (namesPerCol < 1) namesPerCol = 1;
//// 2. 計算總共會產生幾列 (cols)，並推算出每個名字能分配到的最大欄寬
//let cols = Math.ceil(mid.length / namesPerCol);
//if (cols < 1) cols = 1;
//let colWidth = Math.floor(w / cols);
//let $namelist = $(`<div class='nameList'></div>`).css({
// "writing-mode": "vertical rl",
// display: "flex",
// "flex-direction": "row",
// "flex-wrap": "wrap",
// margin: "auto",
// width: `${d.width}px`,
// height: `${d.height}px`,
// border: "0px solid #ccc",
// padding: "1px",
// "font-family": style.fontFamily,
// //"letter-spacing": "0.1em",
// "column-gap": `${d.textSpan}px`,
// //"row-gap": "1px",
// "align-items": "center",
// "justify-content": "start",
//});
//mid.forEach(z => {
// //let info = self.getTextInfo(z, newFontSize);
// //let spanWidth = mid.length > 1 ? newFontSize : d.width
// //let height = d.textHeight;
// //if (info.height >= d.textHeight) {//width
// // height = d.height;
// //}
// //let $span = $(`<span class="nameSpan">${z}</span>`).css({
// // display: "block",
// // "min-height": `${height}px`,
// // "max-height": `${d.height}px`,
// // "max-width": `${rowWidth}px`,
// // //width: `${newFontSize}px`,
// // "text-align": "justify",
// // "text-align-last": "justify",
// // //"margin-bottom": "20px",
// // "margin-left": "5px",
// // "text-justify": "inter-character",
// // "white-space": "pre-line",
// // //"justify-content":"center"
// //});
// let indSize = this.calcIndividualFontSize(z, d, colWidth);
// // 2. 判斷是否發生了折行 (名字長度 * 單字像素高度 > 分配到的最大高度)
// let s_px = indSize * 1.333;
// let isMultiLine = (z.length * s_px) > Number(d.textHeight);
// // 3. 根據是否折行動態決定對齊方式
// // 單行：分散對齊 (justify) / 多行：置中對齊 (center) 或是改為 靠上對齊 (start)
// let alignStyle = isMultiLine ? "start" : "justify";
// let $span = $(`<span style="font-size: ${indSize}pt;">${z}</span>`).css({
// display: "block",
// "min-height": `${d.textHeight}px`,
// "max-height": `${d.height}px`,
// width: "auto",
// "line-height": "1.1",
// "text-align": alignStyle, // ★ 動態套用對齊方式
// "text-align-last": alignStyle, // ★ 動態套用最後一行對齊方式
// "margin-left": "5px",
// "text-justify": "inter-character",
// "word-break": "break-all"
// });
// $namelist.append($span);
//});
html = $namelist; html = $namelist;
} else if (d.elementID === "alive") { } else if (d.elementID === "alive") {
//let perRow = Math.floor(Number(d.height) / Number(d.textHeight));
//let rows = Math.ceil(Number(left.length) / Number(perRow));//總行數
//let rowWidth = Math.floor(Number(d.width) / rows);
//newFontSize = Math.floor(rowWidth / 2);
//if (newFontSize > d.fontSize) {
// newFontSize = d.fontSize;
// rowWidth = newFontSize * 2;
//}
//let th = Number(d.textHeight) || 0;
//let span = Number(d.textSpan) || 0;
//let h = Number(d.height);
//let w = Number(d.width);
//let namesPerCol = Math.floor((h + span) / (th + span));
//if (namesPerCol < 1) namesPerCol = 1;
//// 2. 計算總共會產生幾列 (cols)，並推算出每個名字能分配到的最大欄寬
//let cols = Math.ceil(left.length / namesPerCol);
//if (cols < 1) cols = 1;
//let colWidth = Math.floor(w / cols);
html = self.renderLiveList(left, d); html = self.renderLiveList(left, d);
//newFontSize = d.fontSize;
} else if (d.elementID === "titletriangle") { } else if (d.elementID === "titletriangle") {
newFontSize = self.scaleFontSize(mid, d.fontSize, d.width); newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
html = self.renderRoster(mid, d) html = self.renderRoster(mid, d)
@@ -648,16 +511,21 @@
}) })
let content = $(`<div class="tablet-element print_id "></div>`) let content = $(`<div class="tablet-element print_id "></div>`)
.css({ .css({
position: "absolute", left: "1mm", top: "5mm", fontSize: '16px', position: "absolute", right: "0mm", top: "0mm", fontSize: '16px',
"z-index": 9999, "z-index": 9999,
"align-items": "center" "align-items": "center"
}) })
.html(x.print_id); .html(x.print_id);
tabletpaper.append(content); tabletpaper.append(content);
//console.log("xCount:", Math.floor( xCount));
let xFloor = Math.floor(xCount); let xFloor = Math.floor(xCount);
let totalPrWidth = printSize.width
if (xFloor > 1) {
totalPrWidth = Number(size.width) * Number(xFloor)+3
}
self.pageStyle = `<style id="pageStyle"> self.pageStyle = `<style id="pageStyle">
{ {
-webkit-print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important;
@@ -696,18 +564,18 @@
.canvas-area{ .canvas-area{
display:${xFloor > 1 ? 'block' : 'flex'} !important; display: block !important;//${xFloor > 1 ? 'block' : 'flex'}
font-size:0;
grid-template-columns: repeat(${xFloor},1fr); grid-template-columns: repeat(${xFloor},1fr);
flex-direction: row !important; flex-direction: row !important;
justify-content: ${xFloor > 1 ? 'start' : 'center'} !important; justify-content: ${xFloor > 1 ? 'start' : 'center'} !important;
align-items:center !important; align-items:center !important;
${xFloor > 1 ? 'margin-left:20px !important' : ''};
${xFloor > 1 ? 'margin-right:20px !important' : ''};
${xFloor > 1 ? 'margin-top:-20px !important' : ''};
} }
//.no-print, #customMenu { .row-wrapper{
// display: none !important; width: ${totalPrWidth} mm; /* 關鍵：寫死精準寬度，不多也不少 */
//} margin: 0 20px 0 20px; /* 關鍵：左右邊界一致置中 */
font-size: 0;
}
.tablet-paper { .tablet-paper {
position: relative !important; position: relative !important;
display: ${xFloor > 1 ? 'inline-block' : 'block'} !important; display: ${xFloor > 1 ? 'inline-block' : 'block'} !important;
@@ -715,7 +583,7 @@
page-break-inline:avoid; page-break-inline:avoid;
break-after: page !important; break-after: page !important;
page-break-after: always !important; page-break-after: always !important;
margin: 4mm 0 0 0 !important; margin:7mm 1px 0 1px;
border: none !important; border: none !important;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
@@ -734,7 +602,6 @@
width: 100%; height: 100%; width: 100%; height: 100%;
writing-mode: vertical-rl; /* 直書 */ writing-mode: vertical-rl; /* 直書 */
display: flex; display: flex;
/*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
flex-direction: row; /* 上下分層 (Top / Bottom) */ flex-direction: row; /* 上下分層 (Top / Bottom) */
align-items: center; /* 左右置中對齊 */ align-items: center; /* 左右置中對齊 */
justify-content: center; justify-content: center;
@@ -759,7 +626,6 @@
.roster-name { .roster-name {
text-orientation: upright; text-orientation: upright;
/*font-weight: bold;*/
white-space: normal; white-space: normal;
line-height: 1.2; line-height: 1.2;
font-family: DFKai-sb; font-family: DFKai-sb;
@@ -789,7 +655,6 @@
} }
.sub-text { .sub-text {
/*font-size: ${ancestorFontSize}px ;*//*0.8em;*/ /* 縮小字體 */
line-height: 1.2; line-height: 1.2;
margin-top: 4px; /* 與上方林張的間距 */ margin-top: 4px; /* 與上方林張的間距 */
white-space: normal; /* 避免自動換行 */ white-space: normal; /* 避免自動換行 */
@@ -799,27 +664,27 @@
.canvas-area{ .canvas-area{
width: ${pageSize.width}mm; width: ${pageSize.width}mm;
height: ${pageSize.height}mm; height: ${pageSize.height}mm;
font-size:0;
break-after: page; break-after: page;
page-break-after: always; page-break-after: always;
display:${xFloor > 1 ? 'block' : 'flex'} !important; display:${xFloor > 1 ? 'block' : 'flex'} !important;
grid-template-columns: repeat(${xFloor},1fr); grid-template-columns: repeat(${xFloor},1fr);
${xFloor > 1 ? 'margin-left:20px !important' : ''};
${xFloor > 1 ? 'margin-right:20px !important' : ''};
/*align-items: center !important;
justify-content: ${xFloor > 1 ? 'start' : 'center'} !important;*/
}
}
.row-wrapper{
width: ${totalPrWidth} mm; /* 關鍵：寫死精準寬度，不多也不少 */
margin: 0 20px 0 20px; /* 關鍵：左右邊界一致置中 */
font-size: 0;
}
.tablet-paper{ .tablet-paper{
background-color: white; background-color: white;
display: inline-block; display: inline-block;
width: ${size.width}mm !important; width: ${size.width}mm !important;
height: ${size.height}mm !important; height: ${size.height}mm !important;
position: relative; position: relative;
margin-bottom: 0; margin: 7mm 1px 0 1px;
background-image: url(${img.path}); background-image: url(${img.path});
background-size: 100% 100%; background-size: 100% 100%;
/*break-after: page;
page-break-after: always;*/
break-inline:avoid; break-inline:avoid;
page-break-inline:avoid; page-break-inline:avoid;
} }
@@ -840,29 +705,24 @@
` `
$("#pageStyle").remove(); $("#pageStyle").remove();
$("head").append(self.pageStyle); $("head").append(self.pageStyle);
$(canvas).append(tabletpaper);
$(wrap).append(tabletpaper);
if (style.printMode !== "combine") {
$(canvas).append(wrap);
$("#printArea").append(canvas);
// wrap = $("<div class='row-wrapper'></div>")
}
//$(canvas).append(wrap);
//$(canvas).append(tabletpaper);
//$(canvas).css("width", printSize.width + "mm"); //$(canvas).css("width", printSize.width + "mm");
//$(canvas).css("height", printSize.height + "mm"); //$(canvas).css("height", printSize.height + "mm");
//$(canvas).css("justify-content", "center"); //$(canvas).css("justify-content", "center");
$("#printArea").append(canvas); //$("#printArea").append(canvas);
}); });
//$(".tablet-element").draggable({ if (mode === "combine") {
// start(e, ui) { $(canvas).append(wrap);
// //console.log("gogogogo"); $("#printArea").append(canvas);
// }, }
// stop(e, ui) {
// //console.log(ui.position.left, ui.position.top);
// }
//});
//$(".tablet-element").on("click", function (e) {
// e.preventDefault();
// self.selected = $(this);
// let fontSize = $(this).css("fontSize");
// let fontFamily = $(this).css("fontFamily");
// let left = $(this).css("left");
// let top = $(this).css("top");
//});
$(".tablet-element").on("contextmenu", function (e) { $(".tablet-element").on("contextmenu", function (e) {
e.preventDefault(); e.preventDefault();
@@ -907,7 +767,6 @@
$(".tablet-element span").on("click", function (e) { $(".tablet-element span").on("click", function (e) {
e.preventDefault(); e.preventDefault();
console.log(self);
self.selected = $(this); self.selected = $(this);
let fontSize = $(this).css("font-size"); let fontSize = $(this).css("font-size");
let fontFamily = $(this).css("font-family"); let fontFamily = $(this).css("font-family");
@@ -937,14 +796,10 @@
$("#textX").prop("readonly", true); $("#textX").prop("readonly", true);
$("#textY").prop("readonly", true); $("#textY").prop("readonly", true);
$("#fontSize").prop("readonly", true); $("#fontSize").prop("readonly", true);
//$("#textBreakCount").prop("readonly", false);
//$("#textBreakWord").prop("readonly", false);
} else if ($(this).hasClass("main-name") || $(this).hasClass("sub-text")) { } else if ($(this).hasClass("main-name") || $(this).hasClass("sub-text")) {
$("#textX").prop("readonly", true); $("#textX").prop("readonly", true);
$("#textY").prop("readonly", true); $("#textY").prop("readonly", true);
$("#fontSize").prop("readonly", true); $("#fontSize").prop("readonly", true);
//$("#textBreakCount").prop("readonly", true);
//$("#textBreakWord").prop("readonly", true);
$("#textWidth").prop("readonly", true); $("#textWidth").prop("readonly", true);
$("#textHeight").prop("readonly", true); $("#textHeight").prop("readonly", true);
} else if ($(parentElement).hasClass("print_id") ){ } else if ($(parentElement).hasClass("print_id") ){
@@ -959,23 +814,6 @@
}); });
//$(".tablet-element .print_id").on("click", function (e) {
// let left = $(this).css("left");
// let top = $(this).css("top");
// left = left.replace("px", "");
// top = top.replace("px", "");
// $("#textX").val(self.fix2(left * 0.265));
// $("#textY").val(self.fix2(top * 0.265));
// $("#textX").prop("readonly", false);
// $("#textY").prop("readonly", false);
// $("#fontSize").prop("readonly", false);
// $("#textWidth").prop("readonly", false);
// $("#textHeight").prop("readonly", false);
// $("#textBreakCount").prop("readonly", true);
// $("#textBreakWord").prop("readonly", true);
//});
$(".tablet-element .rosterspan").on("click", function (e) { $(".tablet-element .rosterspan").on("click", function (e) {
$("#toast_body").html("此格式不提供單項物件修改"); $("#toast_body").html("此格式不提供單項物件修改");
self.toast.show(); self.toast.show();
@@ -1032,26 +870,7 @@
return 12; // 極限最小字體 return 12; // 極限最小字體
}, },
renderLiveList(names, el) { renderLiveList(names, el) {
//let $namelist = $(`<div class='liveList'></div>`).css({
// "writing-mode": "vertical rl",
// display: "flex",
// "flex-direction": "row",
// "flex-wrap": "wrap",
// margin: "auto",
// width: `${el.width}px`,
// height: `${el.height}px`,
// border: "0px solid #ccc",
// padding: "1px",
// "font-family": el.fontFamily,
// //"letter-spacing": "0.1em",
// "column-gap": `${el.textSpan}px`,
// //"row-gap": "1px",
// "align-items": "center",
//});
//let self = this;
//names.forEach(n => {
// $namelist.append(self.renderLiveSpan(n, el,rowWidth))
//})
let h = Number(el.height); let h = Number(el.height);
let w = Number(el.width); let w = Number(el.width);
let th = Number(el.textHeight) || h; let th = Number(el.textHeight) || h;
@@ -1111,27 +930,13 @@
display: "block", display: "block",
"min-height": `${th}px`, // ★ 固定分配高度，交給 Flexbox 自動排版 "min-height": `${th}px`, // ★ 固定分配高度，交給 Flexbox 自動排版
"max-height": `${el.height}px`, "max-height": `${el.height}px`,
width: `${fontSize*1.33}`, width: "auto",//`${fontSize*1.33}`,
//"line-height": "1.1",
"text-align": "justify", // 統一分散對齊 "text-align": "justify", // 統一分散對齊
"text-align-last": "justify", "text-align-last": "justify",
//"margin-left": "5px",
"text-justify": "inter-character", "text-justify": "inter-character",
"word-break": "break-all", "word-break": "break-all",
"white-space": "pre-line" "white-space": "pre-line"
}); });
//return $(`<span class="liveSpan">${name}</span>`).css({
// display: "block",
// "min-height": `${el.textHeight}px`,
// "max-height": `${el.height}px`,
// width: `${rowWidth}px`,
// "text-align": "justify",
// "text-align-last": "justify",
// "margin-bottom": "10px",
// "text-justify": "inter-character",
// "white-space": "pre-line"
//});
}, },
// 品字佈局邏輯：一上二下 // 品字佈局邏輯：一上二下
renderRoster(names, el) { renderRoster(names, el) {
@@ -1168,8 +973,7 @@
}) })
return g; return g;
}, },
renderNormal(mid, d) { renderNormal(mid, d)
//sconsole.log("renderNormal:", d)
let self = this; let self = this;
let txt = $(`<div class='${d.elementID}'>${mid==undefined?"":mid}</div>`).css({ let txt = $(`<div class='${d.elementID}'>${mid==undefined?"":mid}</div>`).css({
"z-index": 9999, visibility: d.visibility, "z-index": 9999, visibility: d.visibility,
@@ -1222,7 +1026,6 @@
if (newfontSize <= 10) { if (newfontSize <= 10) {
return newfontSize; return newfontSize;
} }
//console.log("newfontSize:",newfontSize)
return this.scaleFontSize(txtContent, newfontSize, elementWidth); return this.scaleFontSize(txtContent, newfontSize, elementWidth);
} }
return fontSize; return fontSize;
@@ -1248,7 +1051,6 @@
$(y).css("left", $("#textX").val() + "mm") $(y).css("left", $("#textX").val() + "mm")
}) })
} else if ($(this.selected.hasClass(w))) { } else if ($(this.selected.hasClass(w))) {
console.log("QQ:",w,config);
$(`.${w}`).each((index, y) => { $(`.${w}`).each((index, y) => {
$(y).css("left", $("#textX").val() + "mm") $(y).css("left", $("#textX").val() + "mm")
}) })
@@ -1266,7 +1068,6 @@
$(y).css("top", $("#textY").val() + "mm") $(y).css("top", $("#textY").val() + "mm")
}) })
} else if ($(this.selected.hasClass(w))) { } else if ($(this.selected.hasClass(w))) {
console.log("QQ:", w, config);
$(`.${w}`).each((index, y) => { $(`.${w}`).each((index, y) => {
$(y).css("top", $("#textY").val() + "mm") $(y).css("top", $("#textY").val() + "mm")
}) })
@@ -1299,8 +1100,6 @@
$("#toast_body").html("字體大小不可在全域中修改"); $("#toast_body").html("字體大小不可在全域中修改");
this.toast.show(); this.toast.show();
} }
//$("#toast_body").html("字體大小不可在全域中修改");
//this.toast.show();
} }
break; break;
case "width": case "width":
@@ -1448,10 +1247,6 @@
} }
}, },
print() { print() {
//let pageSize = this.allSize.find(x => x.paperID == $("#paperSizeSel").val());
//let printSize = this.allSize.find(x => x.paperID == $("#paperSizeSel").val());
//console.log("a:",pageSize," b:",printSize);
let w = window.open('', '_blank'); let w = window.open('', '_blank');
if (!w) { if (!w) {
alert("請允許瀏覽器開啟彈出式視窗！"); alert("請允許瀏覽器開啟彈出式視窗！");
@@ -1496,10 +1291,6 @@
}, },
} }
$(document).ready(function (e) { $(document).ready(function (e) {
//if (!$("#customMenu").is(e.target) && $("#customMenu").has(e.target).length === 0) {
// $("#customMenu").hide();
//}
console.log(localStorage.getItem("mode"))
if (localStorage.getItem("mode") && localStorage.getItem("mode") == "preview") { if (localStorage.getItem("mode") && localStorage.getItem("mode") == "preview") {
//this.mode = "preview" //this.mode = "preview"
$("#printBtn").attr("style", "display:none") $("#printBtn").attr("style", "display:none")
web/admin/receipt/receipt.vue
+41 -10
View File
@@ -292,6 +292,13 @@
num: { num: {
type: Number // num type: Number // num
}, },
order_no: {
type: String,
default:''
},
total_amt: {
type:Number
},
mode: { mode: {
type: String, type: String,
default:'' default:''
@@ -373,7 +380,7 @@
}, },
num: { num: {
handler(newVal) { handler(newVal) {
console.log("........", newVal) //console.log("........", newVal)
this.formData = { this.formData = {
source: '', source: '',
order_no: '', order_no: '',
@@ -389,6 +396,16 @@
}, },
deep: true, deep: true,
immediate: true immediate: true
},
order_no: {
handler(newVal) {
console.log(this.mode,this.order_no,this.total_amt)
if (this.mode == "preOrder" && newVal != "") {
this.formData.source = "1"
this.formData.order_no = newVal
this.formData.total_amt = this.total_amt
}
}
} }
}, },
methods: { methods: {
@@ -415,7 +432,7 @@
axios axios
.post(HTTP_HOST + 'api/order/GetList', search, { params: params }) .post(HTTP_HOST + 'api/order/GetList', search, { params: params })
.then(response => { .then(response => {
console.log(response) //console.log(response)
self.order_dialog.list = response.data.list self.order_dialog.list = response.data.list
self.order_dialog.count = response.data.count; self.order_dialog.count = response.data.count;
self.order_dialog.loading = false self.order_dialog.loading = false
@@ -647,15 +664,29 @@
this.alreadyAmt = 0; this.alreadyAmt = 0;
}, },
mounted() { mounted() {
console.log(this.mode, this.order_no, this.total_amt)
this.getReceiptStyles(); this.getReceiptStyles();
this.formData = { if (this.mode !== "preOrder") {
source: '', this.formData = {
order_no: '', source: '',
receipt_date: null, order_no: '',
receipt_style: "", receipt_date: null,
total_amt: 0, receipt_style: "",
style_num: 0, total_amt: 0,
num: 0 style_num: 0,
num: 0
}
} else {
this.formData = {
source: '1',
order_no: this.order_no,
receipt_date: null,
receipt_style: "",
total_amt: this.total_amt,
style_num: 0,
num: 0
}
} }
this.formDetail.length = 0; this.formDetail.length = 0;
this.alreadyAmt = 0; this.alreadyAmt = 0;