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

牌位設定列印

Browse Source
This commit is contained in:
minom
2026-04-01 18:03:42 +08:00
parent 5f8da12363
commit 37d0b928ec
3 changed files with 108 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/admin/item/TabletDesigner.aspx
View File

@@ -311,7 +311,7 @@
/*font-weight: bold;*/ /*font-weight: bold;*/
white-space: nowrap; white-space: nowrap;
line-height: 1.2; line-height: 1.2;
font-family: 'Kaiti', serif; font-family: ${style.fontFamily};
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */ /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
width: fit-content; width: fit-content;
} }
@@ -543,7 +543,7 @@
x: el.startX, y: el.startY, x: el.startX, y: el.startY,
style: { style: {
fontSize: el.fontSize, fontSize: el.fontSize,
fontFamily: "Kaiti", fontFamily: el.fontFamily,
isVertical: true, isVertical: true,
letterSpacing: 5, lineHeight: 1.5, letterSpacing: 5, lineHeight: 1.5,
visibility: el.isActive, visibility: el.isActive,
@@ -717,7 +717,7 @@
height: `${el.height}px`, height: `${el.height}px`,
border: "0px solid #ccc", border: "0px solid #ccc",
padding: "1px", padding: "1px",
"font-family": "BiauKai", "font-family": el.fontFamily,
"letter-spacing": "0.1em", "letter-spacing": "0.1em",
"column-gap": "1px", "column-gap": "1px",
"row-gap": "1px", "row-gap": "1px",

11
web/admin/item/css/tablet-design.css
View File

@@ -16,6 +16,17 @@
/* 紙張保持米黃，因為它是實物模擬 */ /* 紙張保持米黃，因為它是實物模擬 */
} }
/*.yangshang-wrapper {
display: flex !important;
flex-direction: row !important;*/ /* 垂直堆疊 */
/*justify-content: space-between !important;*/ /* 陽上與拜薦各據頂底 */
/*align-items: center !important;*/ /* 水平方向置中 */
/*height: 100% !important;
width: 100% !important;
writing-mode: vertical-rl !important;*/ /* 確保內部文字均為垂直書寫 */
/*text-orientation: upright !important;*/ /* 確保文字方向轉正 */
/*gap: 1px;
}*/
.designer-root { .designer-root {
/* 防止瀏覽器預設捲動影響畫布 */ /* 防止瀏覽器預設捲動影響畫布 */

162
web/admin/print/print_multi_new.aspx
View File

@@ -33,23 +33,18 @@
display: none !important; display: none !important;
} }
.yangshang-wrapper {
display: flex !important;
flex-direction: column !important; /* 垂直堆疊 */
justify-content: space-between !important; /* 陽上與拜薦各據頂底 */
align-items: center !important; /* 水平方向置中 */
height: 100% !important;
width: 100% !important;
writing-mode: vertical-rl !important; /* 確保內部文字均為垂直書寫 */
text-orientation: upright !important; /* 確保文字方向轉正 */
}
} }
</style> </style>
</head> </head>
<body> <body>
<span class="btn btn-primary no-print" onclick="Printer.print()">列印</span> <span class="btn btn-primary no-print" onclick="Printer.print()">列印</span>
<select id="paperSizeSel" onchange="Printer.render()">
<option>紙張尺寸</option>
</select>
<div class="d-flex full-home" style="height: auto;width:100%;"> <div class="d-flex full-home" style="height: auto;width:100%;">
<div id="printArea" class="printArea" style="width: auto; height: auto"> <div id="printArea" class="printArea" style="width: auto; height: auto">
@@ -112,8 +107,8 @@
printData: [], printData: [],
tabletElement: [], tabletElement: [],
bg: [ bg: [
{ name: "黃1", path: "../../admin/print/html/tablet-1.svg" }, { name: "黃1", path: "../../admin/print/html/tablet-1_new.svg" },
{ name: "黃2", path: "../../admin/print/html/tablet-1B.svg" }, { name: "黃2", path: "../../admin/print/html/tablet-1B_new.svg" },
{ name: "紅1", path: "../../admin/print/html/tablet-2.svg" }, { name: "紅1", path: "../../admin/print/html/tablet-2.svg" },
{ name: "紅2", path: "../../admin/print/html/tablet-2B.svg" } { name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
], ],
@@ -154,7 +149,11 @@
if (response.status == "200") { if (response.status == "200") {
let data = response.data; let data = response.data;
this.allSize = data.data; this.allSize = data.data;
this.allSize.forEach(x => {
$("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`);
})
$("#paperSizeSel").val("0003")
} }
} }
) )
@@ -206,18 +205,21 @@
}); });
}, },
render() { render() {
$("#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>`)
let nowPageWidth = 0; let nowPageWidth = 0;
let tabletpaper; let tabletpaper;
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);
let size = self.allSize.find(y => y.paperID == style.paperSize); let size = self.allSize.find(y => y.paperID == style.paperSize);
let pageSize = self.allSize.find(y => y.paperID == $("#paperSizeSel").val());
if ((nowPageWidth + parseFloat(size.width)) > 297) { let printSize = self.allSize.find(y => y.paperID ==style.printSize);
$(canvas).css("width", "297" + "mm"); console.log("size:",size);
$(canvas).css("height", "210" + "mm"); if ((nowPageWidth + parseFloat(size.width)) > pageSize.width) {
$(canvas).css("width", printSize.width + "mm");
$(canvas).css("height", printSize.height + "mm");
$(canvas).css("justify-content", "center");
$(canvas).css("break-after", "page"); $(canvas).css("break-after", "page");
$(canvas).css("page-break-after", "always"); $(canvas).css("page-break-after", "always");
$(canvas).append(tabletpaper); $(canvas).append(tabletpaper);
@@ -237,8 +239,8 @@
"margin-bottom": "0", "margin-bottom": "0",
"background-image": `url(${img.path})`, "background-image": `url(${img.path})`,
'background-size': '100% 100%', 'background-size': '100% 100%',
"break-after": "page", //"break-after": "page",
"page-break-after": "always" //"page-break-after": "always"
}); });
let tablet = JSON.parse(x.f_num_tablet); let tablet = JSON.parse(x.f_num_tablet);
@@ -251,11 +253,12 @@
mid.push(y.fam_name); mid.push(y.fam_name);
}); });
let left = [] let left = []
left_items.forEach(y => { if (left_items) {
left.push(y.fam_name); left_items.forEach(y => {
}); left.push(y.fam_name);
});
}
details.forEach(d => { details.forEach(d => {
if (d.isActive != "hidden") { if (d.isActive != "hidden") {
//console.log(d); //console.log(d);
@@ -264,6 +267,9 @@
let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width); let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
let html = ""; let html = "";
let alive = "";
let yang = "";
let bi = "";
if (d.elementID === 'title1') { if (d.elementID === 'title1') {
let $namelist = $(`<div class='nameList'></div>`).css({ let $namelist = $(`<div class='nameList'></div>`).css({
"writing-mode": "vertical rl", "writing-mode": "vertical rl",
@@ -275,14 +281,12 @@
height: `${d.height}px`, height: `${d.height}px`,
border: "0px solid #ccc", border: "0px solid #ccc",
padding: "1px", padding: "1px",
"font-family": "BiauKai", "font-family": style.fontFamily,
"letter-spacing": "0.1em", "letter-spacing": "0.1em",
"column-gap": "1px", "column-gap": "1px",
"row-gap": "1px", "row-gap": "1px",
"align-items": "center", "align-items": "center",
"justify-content": "space-between", "justify-content": "space-between",
}); });
mid.forEach(z => { mid.forEach(z => {
@@ -312,32 +316,52 @@
} else if (d.elementID === "alive") { } else if (d.elementID === "alive") {
//陽上 //陽上
//d.startX //d.startX
let alive = $("<div class='yangshang-wrapper '></div>"); //yang = $("<div class='yang'></div>").css({
let yang = $("<div class='yang'></div>") // height: "36px","font-size": "12px"
$(yang).append("<span>陽上</span>") //});
//$(yang).append("<span>陽上</span>")
html = self.renderLiveList(left, d); html = self.renderLiveList(left, d);
//拜薦 //拜薦
let bi = $("<div class='bi'></div>") //bi = $("<div class='bi'></div>")
$(bi).append("<span>拜薦</span>") //$(bi).append("<span>拜薦</span>").css({
// height: "36px","font-size":"12px"
//});
//alive = $("<div class='yangshang-wrapper'></div>").css({
// //"font-size": d.fontSize+"px",
// display: "flex ",
// "flex-direction": "row", /* 垂直堆疊 */
// "justify-content": "space-between ", /* 陽上與拜薦各據頂底 */
// "align-items": "center", /* 水平方向置中 */
// "height": "100%",//"100% !important",
// "width": "100% ",
// "writing-mode": "vertical-rl", /* 確保內部文字均為垂直書寫 */
// "text-orientation": "upright", /* 確保文字方向轉正 */
// "gap": "1px"
//})
html=$(alive).append(yang).append(html).append(bi); newFontSize = d.fontSize;
//html=$(alive).append(yang).append(html).append(bi);
//tabletpaper.append(bi)
} }
// console.log(mid, newFontSize, newTxtWidth)
let content = $(`<div class="tablet-element vertical-text "></div>`) let content = $(`<div class="tablet-element vertical-text "></div>`)
.css({ .css({
position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'pt', position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'px',
fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive, fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
"align-items":"center" "align-items":"center"
//"text-align": "justify","text-align-last": "justify", //"text-align": "justify","text-align-last": "justify",
//position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.isActive //position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.isActive
}) })
.html(html); .html(html);
tabletpaper.append(content); //if (d.elementID == "alive") {
// tabletpaper.append( $(alive).append(yang).append(content).append(bi));
//} else {
tabletpaper.append(content);
//}
html = ""; html = "";
alive = "";
yang = "";
bi = "";
} }
}) })
@@ -349,34 +373,21 @@
height:auto !important; height:auto !important;
} }
@page { @page {
size:297mm 210mm landscape !important; size:${pageSize.width}mm 393mm !important;
margin:0; margin:0;
} }
/*.tablet-paper {
width: ${size.width}mm ;
height: ${size.height}mm;
position: relative !important;
display: block !important;
break-after: page !important;
page-break-after: always !important;
margin: 0 !important;
border: none !important;
}
.tablet-paper .tablet-element .nameList{
justify-content:center !important;
}
.tablet-paper .tablet-element span{
word-break: break-all !important;
}*/
} }
</style> </style>
` `
console.log("pageSize:",pageSize);
$("#pageStyle").remove(); $("#pageStyle").remove();
$("head").append(pageStyle); $("head").append(pageStyle);
$(canvas).append(tabletpaper); $(canvas).append(tabletpaper);
$(canvas).css("width", "297" + "mm"); $(canvas).css("width", printSize.width + "mm");
$(canvas).css("height", "210" + "mm"); $(canvas).css("height", printSize.height + "mm");
$(canvas).css("justify-content", "center");
$("#printArea").append(canvas); $("#printArea").append(canvas);
//this.bindKeyEvent(); //this.bindKeyEvent();
}); });
@@ -401,8 +412,9 @@
$(".tablet-element").on("contextmenu", function (e) { $(".tablet-element").on("contextmenu", function (e) {
e.preventDefault(); e.preventDefault();
self.selected = $(this); self.selected = $(this);
let fontSize = $(this).css("fontSize"); let fontSize = $(this).css("font-size");
let fontFamily = $(this).css("fontFamily"); let fontFamily = $(this).css("font-family");
console.log($(this).css("font-size"));
let textWidth = $(this).find("span").first().css("width"); let textWidth = $(this).find("span").first().css("width");
let left = $(this).css("left"); let left = $(this).css("left");
let top = $(this).css("top"); let top = $(this).css("top");
@@ -433,7 +445,7 @@
height: `${el.height}px`, height: `${el.height}px`,
border: "0px solid #ccc", border: "0px solid #ccc",
padding: "1px", padding: "1px",
"font-family": "BiauKai", "font-family": el.fontFamily,
"letter-spacing": "0.1em", "letter-spacing": "0.1em",
"column-gap": "1px", "column-gap": "1px",
"row-gap": "1px", "row-gap": "1px",
@@ -453,10 +465,11 @@
"min-height": `${el.textHeight}px`, "min-height": `${el.textHeight}px`,
"max-height": `${el.height}px`, "max-height": `${el.height}px`,
width: `${el.textWidth}px`, width: `${el.textWidth}px`,
height: `${el.textHeight}px`,
"text-align": "justify", "text-align": "justify",
"text-align-last": "justify", "text-align-last": "justify",
"margin-bottom": "15px", "margin-bottom": "15px",
"margin-left": "5px", //"margin-left": "5px",
"text-justify": "inter-character", "text-justify": "inter-character",
}); });
}, },
@@ -501,7 +514,7 @@
//if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下 //if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) { if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) {
let newfontSize = parseInt(fontSize) - 1; let newfontSize = parseInt(fontSize) - 1;
console.log("newfontSize:",newfontSize) //console.log("newfontSize:",newfontSize)
return this.scaleFontSize(txtContent, newfontSize,elementWidth); return this.scaleFontSize(txtContent, newfontSize,elementWidth);
} }
//} //}
@@ -519,7 +532,7 @@
$(this.selected).css("top", $("#textY").val() + "mm"); $(this.selected).css("top", $("#textY").val() + "mm");
}, },
async changeSize() { async changeSize() {
$(this.selected).css("fontSize", $("#fontSize").val()) $(this.selected).css("font-size", $("#fontSize").val())
}, },
async changeWidth() { async changeWidth() {
let nameList = $(this.selected).find(".nameList").first(); let nameList = $(this.selected).find(".nameList").first();
@@ -533,12 +546,25 @@
} }
} }
let liveList = $(this.selected).find(".liveList").first();
if (liveList) {
let spans = $(liveList).find("span");
if (spans) {
spans.each(function (index, x) {
$(x).css("width", $("#textWidth").val())
});
}
}
}, },
print() { print() {
//setTimeout(() => { window.print(); }, 1000); //setTimeout(() => { window.print(); }, 1000);
let s = this.allStyle.find(x => x.styleID == this.styleID) //let s = this.allStyle.find(x => x.styleID == this.style)
let size = this.allSize.find(x => x.paperID = "20260311160935") //let size = this.allSize.find(x => x.paperID == s.paperSize)
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("請允許瀏覽器開啟彈出式視窗！");
@@ -596,7 +622,7 @@
/* 關鍵：修正 Ctrl+P 空白問題 */ /* 關鍵：修正 Ctrl+P 空白問題 */
@media print { @media print {
@page { @page {
size: 297mm 210mm landscape; size: ${printSize.width}mm 393mm !important;
margin: 0; margin: 0;
} }
html, body, form, .full-home, #printArea, .canvas-area { html, body, form, .full-home, #printArea, .canvas-area {
@@ -677,7 +703,7 @@
/*font-weight: bold;*/ /*font-weight: bold;*/
white-space: normal; white-space: normal;
line-height: 1.2; line-height: 1.2;
font-family: 'Kaiti', serif; font-family: DFKai-sb;
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */ /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
width: fit-content; width: fit-content;
} }