牌位報名與列印
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user