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-02 18:22:18 +08:00
parent 37d0b928ec
commit 7998312785
11 changed files with 469 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,38 +14,16 @@
<link href="~/admin/Templates/TBS5ADM001/css/Style.css" rel="stylesheet" />
<link href="~/admin/item/css/floating.css" rel="stylesheet" />
<link href="~/admin/item/css/tablet-design.css" rel="stylesheet" />
<style>
@media print {
/*@page {
size: 398mm 216mm portrait;
margin: 0;
}*/
html, body, form, .full-home, #printArea, .canvas-area {
height: auto !important;
width: auto !important;
overflow: visible !important; /*必須為 visible */
margin: 0 !important;
padding: 0 !important;
/* display: block !important;*/
}
.no-print, #customMenu {
display: none !important;
}
}
</style>
<%--<link href="~/admin/item/css/tablet-design.css" rel="stylesheet" />--%>
</head>
<body>
<span class="btn btn-primary no-print" onclick="Printer.print()">列印</span>
<select id="paperSizeSel" onchange="Printer.render()">
<option>紙張尺寸</option>
<!-- onchange="Printer.render()"-->
<option value="">紙張尺寸</option>
</select>
<div class="d-flex full-home" style="height: auto;width:100%;">
<div class="d-flex full-home no-print" style="height: auto;width:100%;">
<div id="printArea" class="printArea" style="width: auto; height: auto">
<%-- <div class="tablet-paper">
@@ -98,14 +76,20 @@
<script src="<%=ResolveUrl("~/admin/Templates/TBS5ADM001/js/Script.js")%>"></script>
<script src="<%=ResolveUrl("~/admin/item/jquery-ui/jquery-ui.min.js")%>"></script>
<script>
// 建立 MutationObserver 實例，並傳入 callback 函式
const Printer = {
selected: null,
http_host: "",
pageStyle: "",
pSize:"",
allStyle: [],
allSize: [],
allStyleDetails: [],
printData: [],
tabletElement: [],
observer: null,
isInit:true,
bg: [
{ name: "黃1", path: "../../admin/print/html/tablet-1_new.svg" },
{ name: "黃2", path: "../../admin/print/html/tablet-1B_new.svg" },
@@ -113,17 +97,41 @@
{ name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
],
async init() {
let HTTP_HOST = "<%=UrlHost()%>";
this.http_host = HTTP_HOST;
await Promise.all([
//
Promise.all([
this.getActItem(),
this.getPaperSize(),
this.getTabletElement(),
this.getTabletStyles(),
this.getAllStyleDetails()
]);
this.getData();
]).then(() => {
Promise.all([
this.getTabletElement(),
this.getTabletStyles(),
this.getAllStyleDetails(),
this.getData(),
]).then(() => {
this.render();
})
})
},
async getActItem() {
axios
.post('/api/tablet/GetActItem', { itemNum: localStorage.getItem("item") })
.then(response => {
if (response.data.result == "Y" && response.data.data) {
this.pSize = response.data.data.printSize;
$("#paperSizeSel").val(this.pSize);
} else {
$("#paperSizeSel").val("0001");
}
//$("#paperSizeSel").trigger('change');
//this.render();
//this.print();
//this.isInit = false;
}
);
},
async getAllStyleDetails() {
await axios
@@ -134,7 +142,7 @@
if (data.result == "Y") {
let details = data.data;
this.allStyleDetails = details;
console.log(data.data);
//console.log(data.data);
}
}
}
@@ -149,12 +157,19 @@
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")
//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");
}
)
},
@@ -166,23 +181,18 @@
if (response.status == "200") {
let data = response.data;
this.tabletElement = data.data;
}
}
);
});
},
async getTabletStyles() {
await axios
.post(this.http_host + 'api/tablet/GetStyleData', {})
.then(response => {
//if (response.result=="Y") {
if (response.status == "200") {
let data = response.data;
this.allStyle = data.data;
}
}
);
});
},
async getData() {
let list = localStorage.getItem("list")
@@ -197,41 +207,50 @@
if (response.status == 200) {
this.printData = response.data;
this.render();
this.print();
//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>`)
let nowPageWidth = 0;
let tabletpaper;
this.printData.forEach(x => {
if ($("#paperSizeSel").val() == "") {
if (this.pSize&&this.pSize!=undefined) {
$("#paperSizeSel").val(this.pSize);
} else {
$("#paperSizeSel").val("0003");
}
}
let style = self.allStyle.find(y => y.styleID == x.style);
let size = self.allSize.find(y => y.paperID == style.paperSize);
let pageSize = self.allSize.find(y => y.paperID == $("#paperSizeSel").val());
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");
if ((nowPageWidth + parseFloat(printSize.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);
$("#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 = nowPageWidth + parseFloat(size.width);
nowPageWidth = nowPageWidth + parseFloat(printSize.width);
tabletpaper = $(` <div class="tablet-paper">
</div>`)
let img = self.bg.find(y => y.name == style.backendImg);
tabletpaper.css({
/*tabletpaper.css({
"background-color": "white",
width: size.width + 'mm',
height: size.height + 'mm',
@@ -239,9 +258,9 @@
"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);
let mid_items = tablet.mid_items;
@@ -261,9 +280,6 @@
details.forEach(d => {
if (d.isActive != "hidden") {
//console.log(d);
//let { newFontSize, newTxtWidth } = self.scaleFontSize(mid, style, d)
let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
let html = "";
@@ -314,34 +330,9 @@
html = $namelist;
} else if (d.elementID === "alive") {
//陽上
//d.startX
//yang = $("<div class='yang'></div>").css({
// height: "36px","font-size": "12px"
//});
//$(yang).append("<span>陽上</span>")
html = self.renderLiveList(left, d);
//拜薦
//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"
//})
newFontSize = d.fontSize;
//html=$(alive).append(yang).append(html).append(bi);
}
let content = $(`<div class="tablet-element vertical-text "></div>`)
@@ -349,15 +340,10 @@
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);
//if (d.elementID == "alive") {
// tabletpaper.append( $(alive).append(yang).append(content).append(bi));
//} else {
tabletpaper.append(content);
//}
html = "";
alive = "";
yang = "";
@@ -366,30 +352,168 @@
})
let pageStyle = `<style id="pageStyle">
@media print{
:host {
width:auto !important;
height:auto !important;
}
@page {
size:${pageSize.width}mm 393mm !important;
margin:0;
}
self.pageStyle = `<style id="pageStyle">
{
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
.vertical-text {
writing-mode: vertical-rl !important;
-webkit-writing-mode: vertical-rl !important;
text-orientation: mixed !important;
}
@media print{
:host {
width:auto !important;
height:auto !important;
}
@page {
size:${pageSize.width}mm ${pageSize.height}mm !important;
margin:0;
}
html, body, form, .full-home, #printArea, .canvas-area {
height: auto !important;
width: auto !important;
overflow: visible !important; /*必須為 visible */
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.no-print, #customMenu {
display: none !important;
}
</style>
`
console.log("pageSize:",pageSize);
$("#pageStyle").remove();
$("head").append(pageStyle);
.canvas-area{
display:flex !important;
flex-direction: row !important;
}
.no-print, #customMenu {
display: none !important;
}
.tablet-paper {
position: relative !important;
display: block !important;
break-after: page !important;
page-break-after: always !important;
margin: 0 !important;
border: none !important;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.tablet-element {
position: absolute !important;
white-space: normal;
color: black !important; /* 確保文字是黑色的 */
}
}
/* 名單金字塔佈局容器 */
.roster-container {
width: 100%; height: 100%;
writing-mode: vertical-rl; /* 直書 */
display: flex;
/*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
flex-direction: row; /* 上下分層 (Top / Bottom) */
align-items: center; /* 左右置中對齊 */
justify-content: center;
gap: 20px; /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
}
.roster-row {
display: flex;
flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
justify-content: center;
gap: 8px; /* 名字之間的間距 */
margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
}
.name-group {
display: flex;
flex-direction: column; /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
justify-content: center;
align-items: center;
/* gap 由 HTML 動態綁定 */
}
.roster-name {
text-orientation: upright;
/*font-weight: bold;*/
white-space: normal;
line-height: 1.2;
font-family: DFKai-sb;
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
width: fit-content;
}
/* 【修復底圖沒出現】強制印出背景設定 */
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
.ancestor-wrapper {
/* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
writing-mode: horizontal-tb;
display: flex;
flex-direction: column;
align-items: center; /* 水平置中 */
justify-content: center;
width: fit-content;
}
.main-name {
line-height: 1.2;
/* 保持大字 */
}
.sub-text {
font-size: 0.6em; /* 縮小字體 */
line-height: 1.2;
margin-top: 4px; /* 與上方林張的間距 */
white-space: normal; /* 避免自動換行 */
writing-mode:vertical-rl
}
.canvas-area{
width: ${printSize.width}mm;
height: ${printSize.height}mm;
justify-content: center;
break-after: page;
page-break-after: always;
}
.tablet-paper{
background-color: white;
width: ${size.width}mm !important;
height: ${ size.height }mm !important;
position: relative;
margin-bottom: 0;
background-image: url(${ img.path });
background-size: 100% 100%;
break-after: page;
page-break-after: always;
}
.tablet-element {
cursor: move;
padding: 4px;
color: black !important; /* 強制墨水為黑色 */
border: 1px solid transparent;
transition: writing-mode 0.3s, transform 0.2s;
}
.tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
.tablet-paper:last-child { page-break-after: auto; }
</style>
`
$("#pageStyle").remove();
$("head").append(self.pageStyle);
$(canvas).append(tabletpaper);
$(canvas).css("width", printSize.width + "mm");
$(canvas).css("height", printSize.height + "mm");
$(canvas).css("justify-content", "center");
//$(canvas).css("width", printSize.width + "mm");
//$(canvas).css("height", printSize.height + "mm");
//$(canvas).css("justify-content", "center");
$("#printArea").append(canvas);
//this.bindKeyEvent();
});
$(".tablet-element").draggable({
start(e, ui) {
@@ -430,6 +554,8 @@
$("#textWidth").val(textWidth);
$("#customMenu").show();
});
},
fix2(val) {
return Number.parseFloat(val).toFixed(2);
@@ -452,11 +578,9 @@
"align-items": "center",
});
let self = this;
//$namelist.append("陽上");
names.forEach(n => {
$namelist.append(self.renderLiveSpan(n, el))
})
//$namelist.append("拜薦");
return $namelist;
},
renderLiveSpan(name, el) {
@@ -469,7 +593,6 @@
"text-align": "justify",
"text-align-last": "justify",
"margin-bottom": "15px",
//"margin-left": "5px",
"text-justify": "inter-character",
});
},
@@ -500,26 +623,20 @@
width: span.offsetWidth,
height: span.offsetHeight
}
//console.log("result:",result);
document.body.removeChild(span);
return result;
},
scaleFontSize(txtContent, fontSize,elementWidth) {
let font = this.getTextSize("講", parseInt(fontSize));
console.log("scaleFontSize:", fontSize, " A:", font, " B:", Math.ceil((txtContent.length) / 2), " C:", font.width, elementWidth, (Math.ceil(txtContent.length / 2) * font.width)*2)
//console.log(newFontSize, newTxtWidth)
//自動判斷縮小字型的規則,要同時縮小間距
// console.log("A:", dStyle, dStyle.fontSize)
//if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) {
let newfontSize = parseInt(fontSize) - 1;
//console.log("newfontSize:",newfontSize)
return this.scaleFontSize(txtContent, newfontSize,elementWidth);
}
//}
//console.log(txtContent,style,dStyle)
//console.log(newFontSize,newTxtWidth)
return fontSize;
},
breakWord(txtContent, style, dStyle) {
@@ -559,11 +676,8 @@
},
print() {
//setTimeout(() => { window.print(); }, 1000);
//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());
//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) {
@@ -588,160 +702,9 @@
<head>
<title>預覽列印 - 牌位設計</title>
<meta charset="utf-8">
${this.pageStyle}
<style>
/* 基礎變數與強制背景列印 */
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
/* 螢幕預覽樣式 */
@media screen {
body {
background-color: #525659;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;
}
#printArea {
width: auto !important;
height: auto !important; /* 移除 100vh 限制 */
}
.tablet-paper {
margin-bottom: 30px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
background-color: white;
text-align:justify;
}
}
/* 關鍵：修正 Ctrl+P 空白問題 */
@media print {
@page {
size: ${printSize.width}mm 393mm !important;
margin: 0;
}
html, body, form, .full-home, #printArea, .canvas-area {
height: auto !important;
width: auto !important;
overflow: visible !important; /* 必須為 visible */
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.canvas-area{
display:flex !important;
flex-direction: row !important;
}
.no-print, #customMenu {
display: none !important;
}
.tablet-paper {
position: relative !important;
display: block !important;
break-after: page !important;
page-break-after: always !important;
margin: 0 !important;
border: none !important;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.tablet-element {
position: absolute !important;
white-space: normal;
color: black !important; /* 確保文字是黑色的 */
}
}
/* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
.tablet-paper {
width: var(--page-w);
height: var(--page-h);
}
.vertical-text {
writing-mode: vertical-rl !important;
-webkit-writing-mode: vertical-rl !important;
text-orientation: mixed !important;
}
/* 名單金字塔佈局容器 */
.roster-container {
width: 100%; height: 100%;
writing-mode: vertical-rl; /* 直書 */
display: flex;
/*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
flex-direction: row; /* 上下分層 (Top / Bottom) */
align-items: center; /* 左右置中對齊 */
justify-content: center;
gap: 20px; /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
}
.roster-row {
display: flex;
flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
justify-content: center;
gap: 8px; /* 名字之間的間距 */
margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
}
.name-group {
display: flex;
flex-direction: column; /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
justify-content: center;
align-items: center;
/* gap 由 HTML 動態綁定 */
}
.roster-name {
text-orientation: upright;
/*font-weight: bold;*/
white-space: normal;
line-height: 1.2;
font-family: DFKai-sb;
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
width: fit-content;
}
/* 【修復底圖沒出現】強制印出背景設定 */
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
.ancestor-wrapper {
/* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
writing-mode: horizontal-tb;
display: flex;
flex-direction: column;
align-items: center; /* 水平置中 */
justify-content: center;
width: fit-content;
}
.main-name {
line-height: 1.2;
/* 保持大字 */
}
.sub-text {
font-size: 0.6em; /* 縮小字體 */
line-height: 1.2;
margin-top: 4px; /* 與上方林張的間距 */
white-space: normal; /* 避免自動換行 */
writing-mode:vertical-rl
}
</style>
</head>
<body>
${canvasHtml}
@@ -758,28 +721,6 @@
w.print();
}, 1200);
},
//bindKeyEvent() {
// let element = document.querySelectorAll(".tablet-element");
// element.forEach(y => {
// console.log("QQ:",y);
// $(y).on("keydown", (e) => {
// console.log(e.key);
// e.preventDefault();
// let top = parseInt(y.style.top);
// let left = parseInt(y.style.left);
// switch (e.key) {
// case 'ArrowUp': top = top - 10; break;
// case 'ArrowDown': top = top + 10; break;
// case 'ArrowLeft': left = left - 10; break;
// case 'ArrowRight': left = left + 10; break;
// }
// y.style.top = top + 'px';
// y.style.left = left + 'px';
// })
// })
//}
}
$(document).click(function (e) {
if (!$("#customMenu").is(e.target) && $("#customMenu").has(e.target).length === 0) {