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/print/TabletDesign.aspx
+1 -78
View File
@@ -1384,27 +1384,7 @@ html, body, * {
html = this.renderNameList(slice, el, 0);
}
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);
}
else {
@@ -1490,63 +1470,6 @@ html, body, * {
let s = Number(el.style.fontSize);
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. 模擬排版：找出能讓全體塞入的最佳字體組合
while (s >= 12) {
let short_s_px = s * 1.333;
@@ -1806,7 +1729,7 @@ html, body, * {
display: "block",
"min-height": `${th}px`, // ★ 固定分配高度，交給 Flexbox 自動排版
"max-height": `${el.height}px`,
width: `${fontSize * 1.33}`,
width: "auto",//`${fontSize * 1.33}`,
//"line-height": "1.1",
"text-align": "justify", // 統一分散對齊
"text-align-last": "justify",
web/admin/print/print_multi_new.aspx
+57 -266
View File
@@ -168,10 +168,6 @@
} else {
$("#paperSizeSel").val("0001");
}
//$("#paperSizeSel").trigger('change');
//this.render();
//this.print();
//this.isInit = false;
}
);
},
@@ -184,7 +180,6 @@
if (data.result == "Y") {
let details = data.data;
this.allStyleDetails = details;
//console.log(data.data);
}
}
}
@@ -195,23 +190,16 @@
await axios
.post(this.http_host + 'api/tablet/GetPaperSize', {})
.then(response => {
//if (response.result=="Y") {
if (response.status == "200") {
let data = response.data;
this.allSize = data.data;
//console.log(this.allSize);
if (this.allSize) {
this.allSize.forEach(x => {
$("#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
.post(this.http_host + 'api/tablet/GetTabletElement', {})
.then(response => {
//if (response.result=="Y") {
if (response.status == "200") {
let data = response.data;
this.tabletElement = data.data;
@@ -250,7 +237,6 @@
if (response.status == 200) {
this.printData = response.data;
//console.log("printData:",this.printData);
this.printData.sort(function (a,b) {
if (a.print_id < b.print_id) {
return -1
@@ -259,16 +245,10 @@
}
return 0
});
//this.render();
//this.print();
}
});
},
render() {
//console.log(this.pSize)
//if (this.isInit) {
// return false;
//}
$("#printArea").empty();
let self = this;
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 wrap = $("<div class='row-wrapper'></div>")
let mode = "origin"
this.printData.forEach(x => {
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 printSize = self.allSize.find(y => y.paperID == style.printSize);
let xCount = 1;
let yCount = 1;
mode = style.printMode
let total = 1;
if (style.printMode === "combine") {
//用長根寬算出一張紙可以印幾張
xCount=parseFloat(pageSize.width) / parseFloat(size.width);
yCount=parseFloat(pageSize.height) / parseFloat(size.height);
xCount=parseFloat(Number(pageSize.width)) / parseFloat(Number(size.width));
yCount=parseFloat(Number(pageSize.height)) / parseFloat(Number(size.height));
total=Math.floor(xCount) * Math.floor(yCount);
}
console.log("xCount,yCount:",xCount,yCount)
//if ((nowPageWidth + parseFloat(printSize.width)) > pageSize.width) {
if (nowPageWidth >= total) {
//$(canvas).css("width", printSize.width + "mm");
//$(canvas).css("height", printSize.height + "mm");
//$(canvas).css("justify-content", "center");
//$(canvas).css("break-after", "page");
//$(canvas).css("page-break-after", "always");
$(canvas).append(tabletpaper);
$("#printArea").append(canvas);
canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
$(wrap).append(tabletpaper);
if (style.printMode !== "combine") {
$(canvas).append(wrap);
$("#printArea").append(canvas);
wrap = $("<div class='row-wrapper'></div>")
canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
}
nowPageWidth = 0;
}
nowPageWidth = nowPageWidth + 1; //parseFloat(printSize.width);
tabletpaper = $(` <div class="tablet-paper" style="margin-top:2mm">
tabletpaper = $(` <div class="tablet-paper" >
</div>`)
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 mid_items = tablet.mid_items;
@@ -477,7 +445,6 @@
});
sizes.forEach(item => {
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 alignStyle = item.isMulti ? "start" : "justify";
@@ -496,115 +463,11 @@
});
$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;
} 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);
//newFontSize = d.fontSize;
} else if (d.elementID === "titletriangle") {
newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
html = self.renderRoster(mid, d)
@@ -648,16 +511,21 @@
})
let content = $(`<div class="tablet-element print_id "></div>`)
.css({
position: "absolute", left: "1mm", top: "5mm", fontSize: '16px',
position: "absolute", right: "0mm", top: "0mm", fontSize: '16px',
"z-index": 9999,
"align-items": "center"
})
.html(x.print_id);
tabletpaper.append(content);
//console.log("xCount:", 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">
{
-webkit-print-color-adjust: exact !important;
@@ -696,18 +564,18 @@
.canvas-area{
display:${xFloor > 1 ? 'block' : 'flex'} !important;
display: block !important;//${xFloor > 1 ? 'block' : 'flex'}
font-size:0;
grid-template-columns: repeat(${xFloor},1fr);
flex-direction: row !important;
justify-content: ${xFloor > 1 ? 'start' : '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 {
// display: none !important;
//}
.row-wrapper{
width: ${totalPrWidth} mm; /* 關鍵：寫死精準寬度，不多也不少 */
margin: 0 20px 0 20px; /* 關鍵：左右邊界一致置中 */
font-size: 0;
}
.tablet-paper {
position: relative !important;
display: ${xFloor > 1 ? 'inline-block' : 'block'} !important;
@@ -715,7 +583,7 @@
page-break-inline:avoid;
break-after: page !important;
page-break-after: always !important;
margin: 4mm 0 0 0 !important;
margin:7mm 1px 0 1px;
border: none !important;
background-repeat: no-repeat;
background-size: 100% 100%;
@@ -734,7 +602,6 @@
width: 100%; height: 100%;
writing-mode: vertical-rl; /* 直書 */
display: flex;
/*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
flex-direction: row; /* 上下分層 (Top / Bottom) */
align-items: center; /* 左右置中對齊 */
justify-content: center;
@@ -759,7 +626,6 @@
.roster-name {
text-orientation: upright;
/*font-weight: bold;*/
white-space: normal;
line-height: 1.2;
font-family: DFKai-sb;
@@ -789,7 +655,6 @@
}
.sub-text {
/*font-size: ${ancestorFontSize}px ;*//*0.8em;*/ /* 縮小字體 */
line-height: 1.2;
margin-top: 4px; /* 與上方林張的間距 */
white-space: normal; /* 避免自動換行 */
@@ -799,27 +664,27 @@
.canvas-area{
width: ${pageSize.width}mm;
height: ${pageSize.height}mm;
font-size:0;
break-after: page;
page-break-after: always;
display:${xFloor > 1 ? 'block' : 'flex'} !important;
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{
background-color: white;
display: inline-block;
width: ${size.width}mm !important;
height: ${size.height}mm !important;
position: relative;
margin-bottom: 0;
margin: 7mm 1px 0 1px;
background-image: url(${img.path});
background-size: 100% 100%;
/*break-after: page;
page-break-after: always;*/
break-inline:avoid;
page-break-inline:avoid;
}
@@ -840,29 +705,24 @@
`
$("#pageStyle").remove();
$("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("height", printSize.height + "mm");
//$(canvas).css("justify-content", "center");
$("#printArea").append(canvas);
//$("#printArea").append(canvas);
});
//$(".tablet-element").draggable({
// start(e, ui) {
// //console.log("gogogogo");
// },
// 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");
//});
if (mode === "combine") {
$(canvas).append(wrap);
$("#printArea").append(canvas);
}
$(".tablet-element").on("contextmenu", function (e) {
e.preventDefault();
@@ -907,7 +767,6 @@
$(".tablet-element span").on("click", function (e) {
e.preventDefault();
console.log(self);
self.selected = $(this);
let fontSize = $(this).css("font-size");
let fontFamily = $(this).css("font-family");
@@ -937,14 +796,10 @@
$("#textX").prop("readonly", true);
$("#textY").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")) {
$("#textX").prop("readonly", true);
$("#textY").prop("readonly", true);
$("#fontSize").prop("readonly", true);
//$("#textBreakCount").prop("readonly", true);
//$("#textBreakWord").prop("readonly", true);
$("#textWidth").prop("readonly", true);
$("#textHeight").prop("readonly", true);
} 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) {
$("#toast_body").html("此格式不提供單項物件修改");
self.toast.show();
@@ -1032,26 +870,7 @@
return 12; // 極限最小字體
},
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 w = Number(el.width);
let th = Number(el.textHeight) || h;
@@ -1111,27 +930,13 @@
display: "block",
"min-height": `${th}px`, // ★ 固定分配高度，交給 Flexbox 自動排版
"max-height": `${el.height}px`,
width: `${fontSize*1.33}`,
//"line-height": "1.1",
width: "auto",//`${fontSize*1.33}`,
"text-align": "justify", // 統一分散對齊
"text-align-last": "justify",
//"margin-left": "5px",
"text-justify": "inter-character",
"word-break": "break-all",
"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) {
@@ -1168,8 +973,7 @@
})
return g;
},
renderNormal(mid, d) {
//sconsole.log("renderNormal:", d)
renderNormal(mid, d)
let self = this;
let txt = $(`<div class='${d.elementID}'>${mid==undefined?"":mid}</div>`).css({
"z-index": 9999, visibility: d.visibility,
@@ -1222,7 +1026,6 @@
if (newfontSize <= 10) {
return newfontSize;
}
//console.log("newfontSize:",newfontSize)
return this.scaleFontSize(txtContent, newfontSize, elementWidth);
}
return fontSize;
@@ -1248,7 +1051,6 @@
$(y).css("left", $("#textX").val() + "mm")
})
} else if ($(this.selected.hasClass(w))) {
console.log("QQ:",w,config);
$(`.${w}`).each((index, y) => {
$(y).css("left", $("#textX").val() + "mm")
})
@@ -1266,7 +1068,6 @@
$(y).css("top", $("#textY").val() + "mm")
})
} else if ($(this.selected.hasClass(w))) {
console.log("QQ:", w, config);
$(`.${w}`).each((index, y) => {
$(y).css("top", $("#textY").val() + "mm")
})
@@ -1299,8 +1100,6 @@
$("#toast_body").html("字體大小不可在全域中修改");
this.toast.show();
}
//$("#toast_body").html("字體大小不可在全域中修改");
//this.toast.show();
}
break;
case "width":
@@ -1448,10 +1247,6 @@
}
},
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');
if (!w) {
alert("請允許瀏覽器開啟彈出式視窗！");
@@ -1496,10 +1291,6 @@
},
}
$(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") {
//this.mode = "preview"
$("#printBtn").attr("style", "display:none")