牌位報名與列印

This commit is contained in:
2026-04-14 15:45:42 +08:00
parent a81967ddbd
commit 08b339e0cd
2 changed files with 108 additions and 78 deletions
+105 -75
View File
@@ -17,80 +17,91 @@
<%--<link href="~/admin/item/css/tablet-design.css" rel="stylesheet" />--%>
</head>
<body>
<div id="customMenu" style="top:20px;right:10mm;width:20vw;height:90vh; position: fixed; background-color: #f0f0f0;
border: 1px solid #ccc; padding: 10px; z-index: 1000; opacity: 1;">
<div class="container">
<div class="row">
<div class="col-12">
<input type="radio" name="setup" id="indivualSetup" style="width:30px;height:30px;" checked="checked"/>個別設定
<input type="radio" name="setup" id="allSetup" style="width:30px;height:30px;"/>全域設定
</div>
</div>
<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.changeSetup('X')" />
<label class="small" for="textX">X軸位置</label>
<div id="customMenu" style="top: 20px; right: 10mm; width: 20vw; height: 90vh; position: fixed; background-color: #f0f0f0; border: 1px solid #ccc; padding: 10px; z-index: 1000; opacity: 1;">
<div class="container">
<div class="row">
<div class="col-12">
<input type="radio" name="setup" id="indivualSetup" style="width: 30px; height: 30px;" checked="checked" />個別設定
<input type="radio" name="setup" id="allSetup" style="width: 30px; height: 30px;" />全域設定
</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.changeSetup('Y')" />
<label class="small" for="textY">Y軸位置</label>
<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.changeSetup('X')" />
<label class="small" for="textX">X軸位置</label>
</div>
</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.changeSetup('fontSize')" />
<label class="small" for="fontSize">字體大小</label>
<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.changeSetup('Y')" />
<label class="small" for="textY">Y軸位置</label>
</div>
</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.changeSetup('width')" />
<label class="small" for="textWidth">物件寬度</label>
<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.changeSetup('fontSize')" />
<label class="small" for="fontSize">字體大小</label>
</div>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textHeight" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('height')" />
<label class="small" for="textHeight">物件高度</label>
<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.changeSetup('width')" />
<label class="small" for="textWidth">物件寬度</label>
</div>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textBreakCount" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
<label class="small" for="textBreakCount">文字斷行(依字數)</label>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textHeight" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('height')" />
<label class="small" for="textHeight">物件高度</label>
</div>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textBreakWord" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
<label class="small" for="textBreakWord">文字斷行(依文字)</label>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textBreakCount" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
<label class="small" for="textBreakCount">文字斷行(依字數)</label>
</div>
</div>
<div class="col-6">
<div class="form-floating mb-3">
<input type="text" id="textBreakWord" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
<label class="small" for="textBreakWord">文字斷行(依文字)</label>
</div>
</div>
</div>
</div>
</div>
</div>
<span class="btn btn-primary no-print" onclick="Printer.print()">列印</span>
<select id="paperSizeSel" onchange="Printer.render()">
<!-- onchange="Printer.render()"-->
<option value="">紙張尺寸</option>
</select>
<div class="d-flex full-home no-print" style="height: auto;width:100%;">
<div id="printArea" class="printArea" style="width: auto; height: auto">
<span class="btn btn-primary no-print" onclick="Printer.print()">列印</span>
<select id="paperSizeSel" onchange="Printer.render()">
<!-- onchange="Printer.render()"-->
<option value="">紙張尺寸</option>
</select>
<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">
<%-- <div class="tablet-paper">
</div>--%>
<%-- </div>--%>
<%-- </div>--%>
</div>
</div>
<form id="form1" runat="server">
</form>
<div class="position-fixed top-50 start-50 p-3" style="z-index: 10001">
<div id="liveToast" class="toast hide " role="alert" aria-live="assertive"
data-bs-delay="3000" aria-atomic="true"
style="color: white; background-color: dimgray; opacity: 1; font-size: 24px;">
<div class="toast-header">
<strong class="me-auto">提示訊息</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" id="toast_body">
</div>
</div>
<form id="form1" runat="server">
</form>
</div>
</body>
<script src="<%=ResolveUrl("~/js/bootstrap5/js/bootstrap.bundle.min.js")%>"></script>
<script src="<%=ResolveUrl("~/js/jquery-4.0.0.min.js")%>"></script>
@@ -103,7 +114,7 @@
<script src="<%=ResolveUrl("~/admin/item/jquery-ui/jquery-ui.min.js")%>"></script>
<script>
// 建立 MutationObserver 實例,並傳入 callback 函式
const Printer = {
selected: null,
http_host: "",
@@ -116,6 +127,7 @@
tabletElement: [],
observer: null,
isInit: true,
toast: null,
bg: [
{ name: "黃1", path: "../../admin/print/html/tablet-1_new.svg" },
{ name: "黃2", path: "../../admin/print/html/tablet-1B_new.svg" },
@@ -123,7 +135,7 @@
{ name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
],
async init() {
this.toast = new bootstrap.Toast($('#liveToast'));
let HTTP_HOST = "<%=UrlHost()%>";
this.http_host = HTTP_HOST;
//
@@ -391,7 +403,7 @@
html = self.renderRoster(mid, d)
} else if (d.elementID === "combined") {
ancestorFontSize = d.fontSize;
const parts =mid.join("\n").split('\n');
const parts = mid.join("\n").split('\n');
html = `<div class="ancestor-wrapper" style="width:${d.width}px !important;height:${d.height}px !important;" >
<span class="main-name" >${parts[0] || ''}</span>
<span class="sub-text">${parts[1] || ''}</span>
@@ -687,7 +699,7 @@
textWidth = "";
textHeight = "";
}
let left = $(this).css("left");
let top = $(this).css("top");
left = left.replace("px", "");
@@ -794,7 +806,7 @@
return g;
},
renderNormal(mid, d) {
console.log("renderNormal:", d)
//sconsole.log("renderNormal:", d)
let self = this;
let txt = $(`<div class='${d.elementID}'>${mid}</div>`).css({
"z-index": 9999, visibility: d.visibility,
@@ -858,18 +870,33 @@
},
async changeSetup(config) {
let classList = ["liveList", "nameList", "address", "ancestor-wrapper", "lefttitle", "righttitle", "rosterList"]
switch (config) {
case "X":
if ($("#indivualSetup").prop("checked")) {
$(this.selected).css("left", $("#textX").val() + "mm");
} else if ($("#allSetup").prop("checked")) {
classList.forEach(w => {
if ($(this.selected.children()).first().hasClass(w)) {
$(`.${w}`).parent().each((index, y) => {
$(y).css("left", $("#textX").val() + "mm")
})
}
});
}
break;
case "Y":
if ($("#indivualSetup").prop("checked")) {
$(this.selected).css("top", $("#textY").val() + "mm");
} else if ($("#allSetup").prop("checked")) {
classList.forEach(w => {
if ($(this.selected.children()).first().hasClass(w)) {
$(`.${w}`).parent().each((index, y) => {
$(y).css("top", $("#textY").val() + "mm")
})
}
});
}
break;
@@ -877,13 +904,14 @@
if ($("#indivualSetup").prop("checked")) {
$(this.selected).css("font-size", $("#fontSize").val())
} else if ($("#allSetup").prop("checked")) {
$("#toast_body").html("字體大小不可在全域中修改");
this.toast.show();
}
break;
case "width":
if ($("#indivualSetup").prop("checked")) {
if (this.selected.find(".nameList").length>=1) {
if (this.selected.find(".nameList").length >= 1) {
$(this.selected.find(".nameList").first()).css("width", $("#textWidth").val())
} else if (this.selected.find(".liveList").length >= 1) {
this.selected.find(".liveList").first().css("width", $("#textWidth").val())
@@ -891,23 +919,24 @@
this.selected.find(".rosterList").first().css("width", $("#textWidth").val())
} else if (this.selected.hasClass("nameSpan")) {
let spans = $(this.selected.parent().first()).find(".nameSpan");
spans.each(function (index, x) {
spans.each(function (index, x) {
$(x).css("max-width", $("#textWidth").val());
});
} else if (this.selected.hasClass("liveSpan")) {
let spans = $(this.selected.parent().first()).find(".liveSpan");
spans.each(function (index, x) {
spans.each(function (index, x) {
$(x).css("width", $("#textWidth").val());
});
} else if (this.selected.hasClass("rosterSpan")) {
let spans = $(this.selected.parent().first()).find(".rosterSpan");
spans.each(function(index, x) {
spans.each(function (index, x) {
$(x).css("max-width", $("#textWidth").val());
});
}
}
} else if ($("#allSetup").prop("checked")) {
$("#toast_body").html("寬度不可在全域中修改");
this.toast.show();
}
break;
case "height":
@@ -920,7 +949,7 @@
this.selected.find(".rosterList").first().css("height", $("#textHeight").val())
} else if (this.selected.hasClass("nameSpan")) {
let spans = $(this.selected.parent().first()).find(".nameSpan");
spans.each(function (index, x) {
spans.each(function (index, x) {
$(x).css("min-height", $("#textHeight").val());
});
} else if (this.selected.hasClass("liveSpan")) {
@@ -931,13 +960,14 @@
});
} else if (this.selected.hasClass("rosterSpan")) {
let spans = $(this.selected.parent().first()).find(".rosterSpan");
spans.each(function (index, x){
spans.each(function (index, x) {
$(x).css("min-height", $("#textHeight").val());
});
}
}
} else if ($("#allSetup").prop("checked")) {
$("#toast_body").html("高度不可在全域中修改");
this.toast.show();
}
break;
case "breakCount":
@@ -480,7 +480,7 @@
if (newFontSize < 10) {
newFontSize = 10;
}
console.log("乎哈:", d.elementID, d.textWidth, newFontSize)
let content = $(`<div class="tablet-element vertical-text ">${element.sampleContent}</div>`)
.css({
position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'px',
@@ -1136,7 +1136,7 @@
return Number.parseFloat(val).toFixed(2);
},
renderNormal(mid, d) {
console.log("renderNormal:", d)
//console.log("renderNormal:", d)
let self = this;
let txt = $(`<div class='${d.elementID}'>${mid}</div>`).css({
"z-index": 9999, visibility: d.visibility,
@@ -1394,7 +1394,7 @@
mid_right: designer.family_right_title,
addr_items: designer.family_address
}
console.log(JSON.stringify(tablet));
//console.log(JSON.stringify(tablet));
var pro_order_detail =
{
num: designer.tabletItem.num <= 0 ? null : designer.tabletItem.num,