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

牌位報名與列印

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