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-03-27 19:24:04 +08:00
parent 7722cc16ff
commit ad1c99c3e9
3 changed files with 295 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,11 @@
<%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %> <%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server"> <asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
<style>
.canvas-area{
min-height: 100vw !important;
}
</style>
</asp:Content> </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

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

@@ -1,7 +1,7 @@
:host { :host {
display: block; display: block;
width: 100%; width: auto;
height: 100%; height: auto;
--canvas-bg: #f8f9fa; --canvas-bg: #f8f9fa;
--canvas-grid: #dee2e6; --canvas-grid: #dee2e6;
--paper-bg: #fffbf0; --paper-bg: #fffbf0;
@@ -27,7 +27,7 @@
background-image: linear-gradient(45deg, var(--canvas-grid) 25%, transparent 25%), linear-gradient(-45deg, var(--canvas-grid) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--canvas-grid) 75%), linear-gradient(-45deg, transparent 75%, var(--canvas-grid) 75%); background-image: linear-gradient(45deg, var(--canvas-grid) 25%, transparent 25%), linear-gradient(-45deg, var(--canvas-grid) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--canvas-grid) 75%), linear-gradient(-45deg, transparent 75%, var(--canvas-grid) 75%);
background-size: 20px 20px; background-size: 20px 20px;
transition: background-color 0.3s; transition: background-color 0.3s;
min-height: 100vw; /* min-height: 100vw;*/
} }

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

@@ -15,49 +15,71 @@
<link href="~/admin/Templates/TBS5ADM001/css/Style.css" rel="stylesheet" /> <link href="~/admin/Templates/TBS5ADM001/css/Style.css" rel="stylesheet" />
<link href="~/admin/item/css/floating.css" rel="stylesheet" /> <link href="~/admin/item/css/floating.css" rel="stylesheet" />
<link href="~/admin/item/css/tablet-design.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: 210mm !important;
overflow: visible !important; /*必須為 visible */
margin: 0 !important;
padding: 0 !important;
/* display: block !important;*/
}
.no-print, #customMenu {
display: none !important;
}
}
</style>
</head> </head>
<body> <body>
<form id="form1" runat="server">
<div class="d-flex overflow-hidden" style="height:1920px">
<div id="printArea" style="width: 100vw; height: 100vh">
<%-- <div class="tablet-paper"> <span class="btn btn-primary no-print" onclick="Printer.print()">列印</span>
<div class="d-flex full-home" style="height: auto;width:100%;">
<div id="printArea" class="printArea" style="width: auto; height: auto">
<%-- <div class="tablet-paper">
</div>--%> </div>--%>
<%-- </div>--%> <%-- </div>--%>
</div>
</div>
<div id="customMenu" style="display: none; position: absolute; background-color: #f9f9f9; border: 1px solid #ccc; padding: 10px; z-index: 1000;opacity:1;">
<div class="container">
<div class="row">
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textX" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
<label class="small" for="textX">X軸位置</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textY" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
<label class="small" for="textY">Y軸位置</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="fontSize" class="form-control form-control-sm mb-2" onchange="Printer.changeSize()" />
<label class="small" for="fontSize">字體大小</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textWidth" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
<label class="small" for="textWidth">文字寬度</label>
</div>
</div>
</div> </div>
</div> </div>
</div>
<div id="customMenu" style="display: none; position: absolute; background-color: #f9f9f9; border: 1px solid #ccc; padding: 10px; z-index: 1000; opacity: 1;">
<div class="container">
<div class="row">
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textX" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
<label class="small" for="textX">X軸位置</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textY" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
<label class="small" for="textY">Y軸位置</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="fontSize" class="form-control form-control-sm mb-2" onchange="Printer.changeSize()" />
<label class="small" for="fontSize">字體大小</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textWidth" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
<label class="small" for="textWidth">文字寬度</label>
</div>
</div>
</div>
</div>
</div>
<form id="form1" runat="server">
</form> </form>
</body> </body>
<script src="<%=ResolveUrl("~/js/bootstrap5/js/bootstrap.bundle.min.js")%>"></script> <script src="<%=ResolveUrl("~/js/bootstrap5/js/bootstrap.bundle.min.js")%>"></script>
@@ -71,11 +93,11 @@
<script src="<%=ResolveUrl("~/admin/item/jquery-ui/jquery-ui.min.js")%>"></script> <script src="<%=ResolveUrl("~/admin/item/jquery-ui/jquery-ui.min.js")%>"></script>
<script> <script>
const Printer = { const Printer = {
selected:null, selected: null,
http_host: "", http_host: "",
allStyle: [], allStyle: [],
allSize: [], allSize: [],
allStyleDetails:[], allStyleDetails: [],
printData: [], printData: [],
tabletElement: [], tabletElement: [],
bg: [ bg: [
@@ -141,7 +163,7 @@
}, },
async getTabletStyles() { async getTabletStyles() {
await axios await axios
.post(this.http_host + 'api/tablet/GetStyleData', {}) .post(this.http_host + 'api/tablet/GetStyleData', {})
.then(response => { .then(response => {
//if (response.result=="Y") { //if (response.result=="Y") {
if (response.status == "200") { if (response.status == "200") {
@@ -174,28 +196,32 @@
}, },
render() { render() {
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>`)
this.printData.forEach(x => { this.printData.forEach(x => {
let style = this.allStyle.find(y => y.styleID == x.style); let style = this.allStyle.find(y => y.styleID == x.style);
console.log("style:",style); console.log("style:", style);
let size = this.allSize.find(y => y.paperID == style.paperSize); let size = this.allSize.find(y => y.paperID == style.paperSize);
let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-column align-items-center position-relative" ></div>`)
let tabletpaper = $(` <div class="tablet-paper"> let 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({ tabletpaper.css({
"background-color": "white", "background-color": "white",
width: size.width + 'mm', width: size.width + 'mm',
height:size.height + 'mm', height: size.height + 'mm',
position: "absolute", position: "relative",
"margin-bottom": "0",
"background-image": `url(${img.path})`, 'background-size': '100% 100%', "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;
let left_items = tablet.left_items; let left_items = tablet.left_items;
console.log("mid_items:",mid_items) console.log("mid_items:", mid_items)
let details = this.allStyleDetails.filter(y => y.styleID == x.style); let details = this.allStyleDetails.filter(y => y.styleID == x.style);
let mid = []; let mid = [];
mid_items.forEach(y => { mid_items.forEach(y => {
@@ -204,7 +230,7 @@
details.forEach(d => { details.forEach(d => {
if (d.isActive != "hidden") { if (d.isActive != "hidden") {
console.log(d); console.log(d);
let html=""; let html = "";
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",
@@ -216,7 +242,7 @@
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": "Kaiti",
"letter-spacing": "0.1em", "letter-spacing": "0.1em",
"column-gap": "1px", "column-gap": "1px",
"row-gap": "1px", "row-gap": "1px",
@@ -230,7 +256,7 @@
width: `${d.textWidth}px`, width: `${d.textWidth}px`,
"text-align": "justify", "text-align": "justify",
"text-align-last": "justify", "text-align-last": "justify",
"margin-bottom": "40px", "margin-bottom": "20px",
"margin-left": "5px", "margin-left": "5px",
"text-justify": "inter-character", "text-justify": "inter-character",
"z-index": 10000, "z-index": 10000,
@@ -242,16 +268,46 @@
} }
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: d.fontSize + 'pt', fontFamily: d.fontFamily, "z-index": 9999, visibility: d.isActive position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: d.fontSize + 'pt', fontFamily: d.fontFamily, "z-index": 9999, visibility: d.isActive
//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); tabletpaper.append(content);
} }
}) })
$(canvas).append(tabletpaper); $(canvas).append(tabletpaper);
console.log(size.width,size.height);
let pageStyle = `<style id="pageStyle">
@media print{
:host {
width:auto !important;
height:auto !important;
}
@page {
size:210mm 297mm !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;
}
}
`
$("#pageStyle").remove();
$("head").append(pageStyle
);
$(canvas).css("width", "210" + "mm");
$(canvas).css("height","297"+ "mm");
$("#printArea").append(canvas); $("#printArea").append(canvas);
//this.bindKeyEvent(); //this.bindKeyEvent();
}); });
@@ -286,11 +342,11 @@
console.log(fontSize, fontFamily, left, top); console.log(fontSize, fontFamily, left, top);
$("#customMenu").css({ $("#customMenu").css({
top: e.pageY + "px", top: e.pageY + "px",
left: (e.pageX+30) + "px" left: (e.pageX + 30) + "px"
}); });
left = left.replace("px", ""); left = left.replace("px", "");
top = top.replace("px", ""); top = top.replace("px", "");
$("#textX").val(self.fix2(left*0.265)); $("#textX").val(self.fix2(left * 0.265));
$("#textY").val(self.fix2(top * 0.265)); $("#textY").val(self.fix2(top * 0.265));
$("#fontSize").val(fontSize); $("#fontSize").val(fontSize);
//$("#textWidth").val(""); //$("#textWidth").val("");
@@ -303,8 +359,8 @@
}, },
async changeLocation() { async changeLocation() {
console.log(this.selected); console.log(this.selected);
$(this.selected).css("left", $("#textX").val()+"mm"); $(this.selected).css("left", $("#textX").val() + "mm");
$(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("fontSize", $("#fontSize").val())
@@ -317,16 +373,18 @@
let spans = $(nameList).find("span"); let spans = $(nameList).find("span");
console.log(spans); console.log(spans);
if (spans) { if (spans) {
spans.each(function(index,x) { spans.each(function (index, x) {
$(x).css("width",$("#textWidth").val()) $(x).css("width", $("#textWidth").val())
}); });
} }
} }
}, },
print() { print() {
//let s = this.allStyle.find(x => x.styleID == this.styleID)
let size = this.allSize.find(x => x.paperID = "0001") //setTimeout(() => { window.print(); }, 1000);
let s = this.allStyle.find(x => x.styleID == this.styleID)
let size = this.allSize.find(x => x.paperID = "20260311160935")
let w = window.open('', '_blank'); let w = window.open('', '_blank');
if (!w) { if (!w) {
alert("請允許瀏覽器開啟彈出式視窗！"); alert("請允許瀏覽器開啟彈出式視窗！");
@@ -352,118 +410,174 @@
<meta charset="utf-8"> <meta charset="utf-8">
<style> <style>
/* 基礎變數與強制背景列印 */
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
/* 名單金字塔佈局容器 */ /* 螢幕預覽樣式 */
.roster-container { @media screen {
width: 100%; height: 100%; body {
writing-mode: vertical-rl; /* 直書 */ background-color: #525659;
display: flex; display: flex;
/*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */ flex-direction: column;
flex-direction: row; /* 上下分層 (Top / Bottom) */ align-items: center;
align-items: center; /* 左右置中對齊 */ padding: 20px 0;
justify-content: center;
gap: 20px; /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
} }
#printArea {
.roster-row { width: auto !important;
display: flex; height: auto !important; /* 移除 100vh 限制 */
flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
justify-content: center;
gap: 8px; /* 名字之間的間距 */
margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
} }
.tablet-paper {
.name-group { margin-bottom: 30px;
display: flex; box-shadow: 0 0 10px rgba(0,0,0,0.5);
flex-direction: column; /* ★★★ 關鍵：這讓名字左右並排 ★★★ */ background-color: white;
justify-content: center;
align-items: center;
/* gap 由 HTML 動態綁定 */
} }
}
.roster-name { /* 關鍵：修正 Ctrl+P 空白問題 */
text-orientation: upright; @media print {
/*font-weight: bold;*/ @page {
white-space: nowrap; size: 210mm 272mm portrait;
line-height: 1.2; margin: 0;
font-family: 'Kaiti', serif;
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
width: fit-content;
} }
.vertical-text { html, body, form, .full-home, #printArea, .canvas-area {
writing-mode: vertical-rl !important; height: auto !important;
-webkit-writing-mode: vertical-rl !important; width: auto !important;
text-orientation: mixed !important; overflow: visible !important; /* 必須為 visible */
margin: 0 !important;
padding: 0 !important;
display: block !important;
} }
.canvas-area{
/* 【修復底圖沒出現】強制印出背景設定 */ display:flex !important;
* { flex-direction: row !important;
-webkit-print-color-adjust: exact !important; }
print-color-adjust: exact !important; .no-print, #customMenu {
color-adjust: exact !important; display: none !important;
} }
/* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
.tablet-paper { .tablet-paper {
position: relative !important; position: relative !important;
margin: 0 auto !important; display: block !important;
break-after: page !important;
page-break-after: always !important; page-break-after: always !important;
box-shadow: none !important; margin: 0 !important;
width: var(--page-w); border: none !important;
height: var(--page-h);
} }
.tablet-element {
position: absolute !important; /* 絕對不能被 Bootstrap 覆蓋為 static */
color: black !important; /* 確保文字是黑色的 */
} }
/* 元素排版樣式 */
.ancestor-wrapper { .tablet-paper {
/* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */ position: relative;
writing-mode: horizontal-tb; overflow: hidden;
display: flex; background-repeat: no-repeat;
flex-direction: column; background-size: 100% 100%;
align-items: center; /* 水平置中 */
justify-content: center;
width: fit-content;
} }
.tablet-element {
.main-name { position: absolute !important;
line-height: 1.2; white-space: nowrap;
/* 保持大字 */
} }
.vertical-text {
.sub-text { writing-mode: vertical-rl !important;
font-size: 0.6em; /* 縮小字體 */ -webkit-writing-mode: vertical-rl !important;
line-height: 1.2;
margin-top: 4px; /* 與上方林張的間距 */
white-space: nowrap; /* 避免自動換行 */
writing-mode:vertical-rl
} }
</style>
<style>
/* 列印時的紙張大小與頁面歸零 */ /* 名單金字塔佈局容器 */
@media print { .roster-container {
@page { width: 100%; height: 100%;
/* 動態套用您設定的紙張寬高 */ writing-mode: vertical-rl; /* 直書 */
size: ${size.width}mm ${size.height}mm portrait; display: flex;
margin: 0; /*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
} flex-direction: row; /* 上下分層 (Top / Bottom) */
body, html { align-items: center; /* 左右置中對齊 */
margin: 0 !important; justify-content: center;
padding: 0 !important; gap: 20px; /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
}
} .roster-row {
body{ display: flex;
--page-w: ${size.width}mm; flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
--page-h: ${size.height}mm; justify-content: center;
--font-max: 22pt; gap: 8px; /* 名字之間的間距 */
--bg-padding: 0; margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
} }
}
</style> .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: nowrap;
line-height: 1.2;
font-family: 'Kaiti', serif;
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
width: fit-content;
}
.vertical-text {
writing-mode: vertical-rl !important;
-webkit-writing-mode: vertical-rl !important;
text-orientation: mixed !important;
}
/* 【修復底圖沒出現】強制印出背景設定 */
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
/* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
.tablet-paper {
position: relative !important;
margin: 0 auto !important;
page-break-after: always !important;
box-shadow: none !important;
width: var(--page-w);
height: var(--page-h);
}
.tablet-element {
position: absolute !important; /* 絕對不能被 Bootstrap 覆蓋為 static */
color: black !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: nowrap; /* 避免自動換行 */
writing-mode:vertical-rl
}
</style>
</head> </head>
<body> <body>
${canvasHtml} ${canvasHtml}