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;*/
white-space: nowrap;
line-height: 1.2;
font-family: 'Kaiti', serif;
font-family: ${style.fontFamily};
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
width: fit-content;
}
@@ -543,7 +543,7 @@
x: el.startX, y: el.startY,
style: {
fontSize: el.fontSize,
fontFamily: "Kaiti",
fontFamily: el.fontFamily,
isVertical: true,
letterSpacing: 5, lineHeight: 1.5,
visibility: el.isActive,
@@ -717,7 +717,7 @@
height: `${el.height}px`,
border: "0px solid #ccc",
padding: "1px",
"font-family": "BiauKai",
"font-family": el.fontFamily,
"letter-spacing": "0.1em",
"column-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 {
/* 防止瀏覽器預設捲動影響畫布 */

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

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