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-06 19:06:22 +08:00
parent f087e4aa61
commit 36174834a8
5 changed files with 533 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin/activity/item_reg.aspx
+28 -17
View File
@@ -334,6 +334,7 @@
.catch( .catch(
error => console.log(error) error => console.log(error)
) )
}
axios axios
.post(HTTP_HOST + 'api/tablet/GetPaperSize', {}) .post(HTTP_HOST + 'api/tablet/GetPaperSize', {})
@@ -344,9 +345,12 @@
if (data.result == "Y") { if (data.result == "Y") {
data.data.forEach(x => { data.data.forEach(x => {
this.paperlist.push({ name: x.paperName, id: x.paperID, width: x.width, height: x.height }) this.paperlist.push({ name: x.paperName, id: x.paperID, width: x.width, height: x.height })
$("#pageSize").append(`<option value="${x.paperID}">${x.paperName}</option>`); $('#<%= ddlPageSize.ClientID %>').append(`<option value="${x.paperID}">${x.paperName}</option>`);
$("#printSize").append(`<option value="${x.paperID}">${x.paperName}</option>`); $('#<%= ddlPrintSize.ClientID %>').append(`<option value="${x.paperID}">${x.paperName}</option>`);
}); });
$('#<%= ddlPageSize.ClientID %>').val($("#<%= hidPageSize.ClientID %>").val())
$('#<%= ddlPrintSize.ClientID %>').val($("#<%= hidPrintSize.ClientID %>").val())
} }
} }
}) })
@@ -364,16 +368,17 @@
data.data.forEach(x => { data.data.forEach(x => {
if (x.styleID != "000001") { if (x.styleID != "000001") {
this.stylelist.push({ styleID: x.styleID, name: x.name }) this.stylelist.push({ styleID: x.styleID, name: x.name })
$("#defaultStyle").append(`<option value="${x.styleID}">${x.name}</option>`); $('#<%= ddlDefaultStyle.ClientID %>').append(`<option value="${x.styleID}">${x.name}</option>`);
//$("#defaultStyle").append(`<option value="${x.styleID}">${x.name}</option>`);
} }
}); });
$('#<%= ddlDefaultStyle.ClientID %>').val($("#<%= hidDefaultStyle.ClientID %>").val())
} }
} }
}) })
.catch( .catch(
error => console.log(error) error => console.log(error)
) )
}
}, },
editItem(item) { editItem(item) {
@@ -566,13 +571,13 @@
} }
} }
}, },
selectChange(what) { changeSel(selType) {
if (what == "pageSize") { if (selType=="ddlPageSize") {
document.getElementById('<%= pageSizeSel.ClientID %>').value = $("#pageSize").val(); $("#<%= hidPageSize.ClientID %>").val($("#<%= ddlPageSize.ClientID %>").val())
} else if (what == "printSize") { } else if (selType == "ddlPrintSize") {
document.getElementById('<%= printSizeSel.ClientID %>').value = $("#printSize").val(); $("#<%= hidPrintSize.ClientID %>").val($("#<%=ddlPrintSize.ClientID %>").val())
} else if (what=="defaultStyle") { } else if (selType == "ddlDefaultStyle") {
document.getElementById('<%= defaultStyleSel.ClientID %>').value = $("#defaultStyle").val(); $("#<%= hidDefaultStyle.ClientID %>").val($("#<%= ddlDefaultStyle.ClientID %>").val())
} }
} }
}, },
@@ -678,28 +683,34 @@
<div class="row mb-1 label-sm-right"> <div class="row mb-1 label-sm-right">
<label class="col-sm-2 col-form-label">預設頁面尺寸</label> <label class="col-sm-2 col-form-label">預設頁面尺寸</label>
<div class="col-sm-4"> <div class="col-sm-4">
<select id="pageSize" onchange="VueApp.selectChange('pageSize')"> <select ID="ddlPageSize" runat="server" onchange="VueApp.changeSel('ddlPageSize')"></select>
<asp:HiddenField ID="hidPageSize" runat="server" />
<%-- <select id="pageSize" onchange="VueApp.selectChange('pageSize')">
<option value="">請選擇</option> <option value="">請選擇</option>
</select> </select>
<asp:HiddenField ID="pageSizeSel" runat="server" Value="" /> <asp:HiddenField ID="pageSizeSel" runat="server" Value="" />--%>
<%--<asp:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%> <%--<asp:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%>
</div> </div>
<label class="col-sm-2 col-form-label">預設列印尺寸</label> <label class="col-sm-2 col-form-label">預設列印尺寸</label>
<div class="col-sm-4"> <div class="col-sm-4">
<select id="printSize" onchange="VueApp.selectChange('printSize')"> <select ID="ddlPrintSize" runat="server" onchange="VueApp.changeSel('ddlPrintSize')"></select>
<asp:HiddenField ID="hidPrintSize" runat="server" />
<%-- <select id="printSize" onchange="VueApp.selectChange('printSize')">
<option value="">請選擇</option> <option value="">請選擇</option>
</select> </select>
<asp:HiddenField ID="printSizeSel" runat="server" Value="" /> <asp:HiddenField ID="printSizeSel" runat="server" Value="" />--%>
<%-- <asp:DropDownList ID="printSize" runat="server"></asp:DropDownList> --%> <%-- <asp:DropDownList ID="printSize" runat="server"></asp:DropDownList> --%>
</div> </div>
</div> </div>
<div class="row mb-1 label-sm-right"> <div class="row mb-1 label-sm-right">
<label class="col-sm-2 col-form-label">預設版型</label> <label class="col-sm-2 col-form-label">預設版型</label>
<div class="col-sm-4"> <div class="col-sm-4">
<select id="defaultStyle" onchange="VueApp.selectChange('defaultStyle')"> <select ID="ddlDefaultStyle" runat="server" onchange="VueApp.changeSel('ddlDefaultStyle')"></select>
<asp:HiddenField ID="hidDefaultStyle" runat="server" />
<%-- <select id="defaultStyle" onchange="VueApp.selectChange('defaultStyle')">
<option value="">請選擇</option> <option value="">請選擇</option>
</select> </select>
<asp:HiddenField ID="defaultStyleSel" runat="server" Value="" /> <asp:HiddenField ID="defaultStyleSel" runat="server" Value="" />--%>
<%--<asp:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%> <%--<asp:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%>
</div> </div>
web/admin/activity/item_reg.aspx.cs
+39 -12
View File
@@ -44,6 +44,21 @@ public partial class admin_activity_item_reg : MyWeb.config
print_init.Text = prod.print_init; print_init.Text = prod.print_init;
PARTNO.Text = prod.partno; PARTNO.Text = prod.partno;
//kind.SelectedValue = prod.kind.ToString(); //kind.SelectedValue = prod.kind.ToString();
if (!isStrNull(prod.pageSize))
{
ddlPageSize.Value = prod.pageSize.ToString();
hidPageSize.Value = prod.pageSize.ToString();
}
if (!isStrNull(prod.printSize))
{
ddlPrintSize.Value = prod.printSize.ToString();
hidPrintSize.Value = prod.printSize.ToString();
}
if (!isStrNull(prod.defaultStyle))
{
ddlDefaultStyle.Value = prod.defaultStyle.ToString();
hidDefaultStyle.Value = prod.defaultStyle.ToString();
}
if (prod.kind.HasValue) if (prod.kind.HasValue)
{ {
kind_txt.Value = prod.actItem_kind.kind; kind_txt.Value = prod.actItem_kind.kind;
@@ -121,17 +136,17 @@ public partial class admin_activity_item_reg : MyWeb.config
actItem.subject = subject.Text; actItem.subject = subject.Text;
actItem.print_init = print_init.Text; actItem.print_init = print_init.Text;
actItem.partno = PARTNO.Text; actItem.partno = PARTNO.Text;
if (!isStrNull(pageSizeSel.Value)) if (!isStrNull(ddlPageSize.Value))
{ {
actItem.pageSize =(pageSizeSel.Value); actItem.pageSize = ddlPageSize.Value;
} }
if (!isStrNull(printSizeSel.Value)) if (!isStrNull(ddlPrintSize.Value))
{ {
actItem.printSize = (printSizeSel.Value); actItem.printSize = ddlPrintSize.Value;
} }
if (!isStrNull(defaultStyleSel.Value)) if (!isStrNull(ddlDefaultStyle.Value))
{ {
actItem.defaultStyle = (defaultStyleSel.Value); actItem.defaultStyle = (ddlDefaultStyle.Value);
} }
//if (!isStrNull(kind.SelectedValue)) { actItem.kind = Val(kind.SelectedValue); } else { actItem.kind = null; } //if (!isStrNull(kind.SelectedValue)) { actItem.kind = Val(kind.SelectedValue); } else { actItem.kind = null; }
if (!isStrNull(category.SelectedValue)) { actItem.category = Val(category.SelectedValue); } else { actItem.category = null; } if (!isStrNull(category.SelectedValue)) { actItem.category = Val(category.SelectedValue); } else { actItem.category = null; }
@@ -180,17 +195,17 @@ public partial class admin_activity_item_reg : MyWeb.config
actItem.subject = subject.Text; actItem.subject = subject.Text;
actItem.print_init = print_init.Text; actItem.print_init = print_init.Text;
actItem.partno = PARTNO.Text; actItem.partno = PARTNO.Text;
if (!isStrNull(pageSizeSel.Value)) if (!isStrNull(hidPageSize.Value))
{ {
actItem.pageSize = (pageSizeSel.Value); actItem.pageSize = hidPageSize.Value;
} }
if (!isStrNull(printSizeSel.Value)) if (!isStrNull(hidPrintSize.Value))
{ {
actItem.printSize = (printSizeSel.Value); actItem.printSize = hidPrintSize.Value;
} }
if (!isStrNull(defaultStyleSel.Value)) if (!isStrNull(hidDefaultStyle.Value))
{ {
actItem.defaultStyle = (defaultStyleSel.Value); actItem.defaultStyle = (hidDefaultStyle.Value);
} }
//if (!isStrNull(kind.SelectedValue)) { actItem.kind = Val(kind.SelectedValue); } else { actItem.kind = null; } //if (!isStrNull(kind.SelectedValue)) { actItem.kind = Val(kind.SelectedValue); } else { actItem.kind = null; }
if (!isStrNull(category.SelectedValue)) { actItem.category = Val(category.SelectedValue); } else { actItem.category = null; } if (!isStrNull(category.SelectedValue)) { actItem.category = Val(category.SelectedValue); } else { actItem.category = null; }
@@ -270,4 +285,16 @@ public partial class admin_activity_item_reg : MyWeb.config
} }
} }
} }
//protected override void Render(HtmlTextWriter writer)
//{
// ClientScript.RegisterForEventValidation(
// ddlDefaultStyle.UniqueID, "ddlDefaultStyle");
// ClientScript.RegisterForEventValidation(
// ddlPageSize.UniqueID, "ddlPageSize");
// ClientScript.RegisterForEventValidation(
// ddlPrintSize.UniqueID, "ddlPrintSize");
// base.Render(writer);
//}
} }
web/admin/item/TabletDesigner.aspx
-7
View File
@@ -807,13 +807,6 @@
"justify-content": "start", "justify-content": "start",
gap: "20px", gap: "20px",
}); });
//h.append(
// $(`<div class="name-group">${top.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`)
//)
//if (bot.length) h.append(`<div class="name-group">${bot.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`)
//h += `<div class="name-group">${top.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
///if (bot.length) h += `<div class="name-group">${bot.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
//return h + `</div>`;
h.append(this.renderNameGroups(top,el)); h.append(this.renderNameGroups(top,el));
if (bot.length) h.append(this.renderNameGroups(bot,el)); if (bot.length) h.append(this.renderNameGroups(bot,el));
return h return h
web/admin/print/print_multi_new.aspx
+328 -77
View File
@@ -18,6 +18,62 @@
</head> </head>
<body> <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>
</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>
</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>
</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>
</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>
</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>
</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>
<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()"-->
@@ -33,36 +89,6 @@
</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 id="form1" runat="server">
</form> </form>
</body> </body>
@@ -223,19 +249,31 @@
let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`) 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 nowPageWidth = 0;
let tabletpaper; let tabletpaper;
this.printData.forEach(x => { //列印紙張的尺寸
if ($("#paperSizeSel").val() == "") { if ($("#paperSizeSel").val() == "") {
if (this.pSize && this.pSize != undefined) { if (this.pSize && this.pSize != undefined) {
$("#paperSizeSel").val(this.pSize); $("#paperSizeSel").val(this.pSize);
} else { } else {
$("#paperSizeSel").val("0003"); $("#paperSizeSel").val("0001");
} }
} }
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());
this.printData.forEach(x => {
console.log("x:", x)
let style = self.allStyle.find(y => y.styleID == x.style);
//用來印內容的尺寸
let size = self.allSize.find(y => y.paperID == style.paperSize);
//包含空白用來折的尺寸
let printSize = self.allSize.find(y => y.paperID == style.printSize); let printSize = self.allSize.find(y => y.paperID == style.printSize);
if ((nowPageWidth + parseFloat(printSize.width)) > pageSize.width) {
//用長根寬算出一張紙可以印幾張
let xCount = parseFloat(pageSize.width) / parseFloat(printSize.width);
let yCount = parseFloat(pageSize.height) / parseFloat(printSize.height);
let total = Math.floor(xCount) * Math.floor(yCount);
console.log(xCount, yCount, total);
//if ((nowPageWidth + parseFloat(printSize.width)) > pageSize.width) {
if (nowPageWidth >= total) {
//$(canvas).css("width", printSize.width + "mm"); //$(canvas).css("width", printSize.width + "mm");
//$(canvas).css("height", printSize.height + "mm"); //$(canvas).css("height", printSize.height + "mm");
//$(canvas).css("justify-content", "center"); //$(canvas).css("justify-content", "center");
@@ -246,7 +284,7 @@
canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`) canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
nowPageWidth = 0; nowPageWidth = 0;
} }
nowPageWidth = nowPageWidth + parseFloat(printSize.width); nowPageWidth = nowPageWidth + 1; //parseFloat(printSize.width);
tabletpaper = $(` <div class="tablet-paper"> 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);
@@ -267,6 +305,7 @@
let left_items = tablet.left_items; let left_items = tablet.left_items;
let details = this.allStyleDetails.filter(y => y.styleID == x.style); let details = this.allStyleDetails.filter(y => y.styleID == x.style);
console.log("details:", details);
let mid = []; let mid = [];
mid_items.forEach(y => { mid_items.forEach(y => {
mid.push(y.fam_name); mid.push(y.fam_name);
@@ -308,11 +347,12 @@
mid.forEach(z => { mid.forEach(z => {
let info = self.getTextInfo(z, newFontSize); let info = self.getTextInfo(z, newFontSize);
let spanWidth = mid.length > 1 ? newFontSize : d.width let spanWidth = mid.length > 1 ? newFontSize : d.width
console.log("spanWidth:", spanWidth);
let height = d.textHeight; let height = d.textHeight;
if (info.width >= d.textHeight) { if (info.width >= d.textHeight) {
height = d.height; height = d.height;
} }
let $span = $(`<span>${z}</span>`).css({ let $span = $(`<span class="nameSpan">${z}</span>`).css({
display: "block", display: "block",
"min-height": `${height}px`, "min-height": `${height}px`,
"max-height": `${d.height}px`, "max-height": `${d.height}px`,
@@ -320,7 +360,7 @@
//width: `${newFontSize}px`, //width: `${newFontSize}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",
//"justify-content":"center" //"justify-content":"center"
@@ -333,8 +373,12 @@
html = self.renderLiveList(left, d); html = self.renderLiveList(left, d);
newFontSize = d.fontSize; newFontSize = d.fontSize;
} else if (d.elementID === "titletriangle") {
html = self.renderRoster(mid, d)
}
if (newFontSize < 10) {
newFontSize = 10;
} }
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: newFontSize + 'px', position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'px',
@@ -352,6 +396,9 @@
}) })
//console.log("xCount:", Math.floor( xCount));
let xFloor = Math.floor(xCount);
self.pageStyle = `<style id="pageStyle"> self.pageStyle = `<style id="pageStyle">
{ {
-webkit-print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important;
@@ -363,6 +410,10 @@
-webkit-writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important;
text-orientation: mixed !important; text-orientation: mixed !important;
} }
body{
overflow: visible !important;
}
@media print{ @media print{
:host { :host {
width:auto !important; width:auto !important;
@@ -386,15 +437,23 @@
.canvas-area{ .canvas-area{
display:flex !important; display:${xFloor > 1 ? 'block' : 'flex'} !important;
grid-template-columns: repeat(${xFloor},1fr);
flex-direction: row !important; flex-direction: row !important;
justify-content: ${xFloor > 1 ? 'start' : 'center'} !important;
align-items:center !important;
${xFloor > 1 ? 'margin-left:20px !important' : ''};
${xFloor > 1 ? 'margin-right:20px !important' : ''};
${xFloor > 1 ? 'margin-top:-20px !important' : ''};
} }
.no-print, #customMenu { //.no-print, #customMenu {
display: none !important; // display: none !important;
} //}
.tablet-paper { .tablet-paper {
position: relative !important; position: relative !important;
display: block !important; display: ${xFloor > 1 ? 'inline-block' : 'block'} !important;
break-inline:avoid;
page-break-inline:avoid;
break-after: page !important; break-after: page !important;
page-break-after: always !important; page-break-after: always !important;
margin: 0 !important; margin: 0 !important;
@@ -479,22 +538,31 @@
} }
.canvas-area{ .canvas-area{
width: ${printSize.width}mm; width: ${pageSize.width}mm;
height: ${printSize.height}mm; height: ${pageSize.height}mm;
justify-content: center;
break-after: page; break-after: page;
page-break-after: always; page-break-after: always;
display:${xFloor > 1 ? 'block' : 'flex'} !important;
grid-template-columns: repeat(${xFloor},1fr);
${xFloor > 1 ? 'margin-left:20px !important' : ''};
${xFloor > 1 ? 'margin-right:20px !important' : ''};
/*align-items: center !important;
justify-content: ${xFloor > 1 ? 'start' : 'center'} !important;*/
} }
.tablet-paper{ .tablet-paper{
background-color: white; background-color: white;
display: inline-block;
width: ${size.width}mm !important; width: ${size.width}mm !important;
height: ${size.height}mm !important; height: ${size.height}mm !important;
position: relative; position: relative;
margin-bottom: 0; margin-bottom: 0;
background-image: url(${img.path}); background-image: url(${img.path});
background-size: 100% 100%; background-size: 100% 100%;
break-after: page; /*break-after: page;
page-break-after: always; page-break-after: always;*/
break-inline:avoid;
page-break-inline:avoid;
} }
.tablet-element { .tablet-element {
cursor: move; cursor: move;
@@ -505,6 +573,10 @@
} }
.tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); } .tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
.tablet-paper:last-child { page-break-after: auto; } .tablet-paper:last-child { page-break-after: auto; }
.tablet-element span{
z-index: 999;
}
</style> </style>
` `
$("#pageStyle").remove(); $("#pageStyle").remove();
@@ -515,44 +587,82 @@
//$(canvas).css("justify-content", "center"); //$(canvas).css("justify-content", "center");
$("#printArea").append(canvas); $("#printArea").append(canvas);
}); });
$(".tablet-element").draggable({ //$(".tablet-element").draggable({
start(e, ui) { // start(e, ui) {
//console.log("gogogogo"); // //console.log("gogogogo");
}, // },
stop(e, ui) { // stop(e, ui) {
//console.log(ui.position.left, ui.position.top); // //console.log(ui.position.left, ui.position.top);
} // }
}); //});
$(".tablet-element").on("click", function (e) { //$(".tablet-element").on("click", function (e) {
e.preventDefault(); // e.preventDefault();
self.selected = $(this); // self.selected = $(this);
let fontSize = $(this).css("fontSize"); // let fontSize = $(this).css("fontSize");
let fontFamily = $(this).css("fontFamily"); // let fontFamily = $(this).css("fontFamily");
let left = $(this).css("left"); // let left = $(this).css("left");
let top = $(this).css("top"); // let top = $(this).css("top");
}); //});
$(".tablet-element").on("contextmenu", function (e) { $(".tablet-element").on("contextmenu", function (e) {
e.preventDefault(); e.preventDefault();
self.selected = $(this); self.selected = $(this);
let fontSize = $(this).css("font-size"); let fontSize = $(this).css("font-size");
let fontFamily = $(this).css("font-family"); let fontFamily = $(this).css("font-family");
console.log($(this).css("font-size"));
let textWidth = $(this).find("span").first().css("width"); let textWidth;//= $(this).css("width");//find("span").first().css("width");
let textHeight; //= $(this).css("height");
if ($(this).find(".nameList").first()) {
textWidth = $(this).find(".nameList").first().css("width");
textHeight = $(this).find(".nameList").first().css("height");
} else if ($(this).find(".liveList").first()) {
textWidth = $(this).find(".liveList").first().css("width");
textHeight = $(this).find(".liveList").first().css("height");
} else if ($(this).find(".rosterList").first()) {
textWidth = $(this).find(".rosterList").first().css("width");
textHeight = $(this).find(".rosterList").first().css("height");
}
let left = $(this).css("left"); let left = $(this).css("left");
let top = $(this).css("top"); let top = $(this).css("top");
$("#customMenu").css({
top: e.pageY + "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); $("#textWidth").val(textWidth);
$("#customMenu").show(); $("#textHeight").val(textHeight);
$("#textX").prop("readonly", false);
$("#textY").prop("readonly", false);
$("#fontSize").prop("readonly", false);
});
$(".tablet-element span").on("click", function (e) {
e.preventDefault();
self.selected = $(this);
let fontSize = $(this).css("font-size");
let fontFamily = $(this).css("font-family");
let textWidth = $(this).css("max-width");
let textHeight = $(this).css("min-height");
let left = $(this).css("left");
let top = $(this).css("top");
left = left.replace("px", "");
top = top.replace("px", "");
$("#textX").val("");
$("#textY").val("");
$("#fontSize").val("");
$("#textWidth").val(textWidth);
$("#textHeight").val(textHeight);
let parentElement = this.parentElement;
if ($(parentElement).hasClass("nameList") || $(parentElement).hasClass("liveList") || $(parentElement).hasClass("rosterList")) {
$("#textX").prop("readonly", true);
$("#textY").prop("readonly", true);
$("#fontSize").prop("readonly", true);
}
}); });
@@ -584,7 +694,7 @@
return $namelist; return $namelist;
}, },
renderLiveSpan(name, el) { renderLiveSpan(name, el) {
return $(`<span>${name}</span>`).css({ return $(`<span class="liveSpan">${name}</span>`).css({
display: "block", display: "block",
"min-height": `${el.textHeight}px`, "min-height": `${el.textHeight}px`,
"max-height": `${el.height}px`, "max-height": `${el.height}px`,
@@ -592,10 +702,48 @@
height: `${el.textHeight}px`, height: `${el.textHeight}px`,
"text-align": "justify", "text-align": "justify",
"text-align-last": "justify", "text-align-last": "justify",
"margin-bottom": "15px", "margin-bottom": "10px",
"text-justify": "inter-character", "text-justify": "inter-character",
}); });
}, },
// 品字佈局邏輯：一上二下
renderRoster(names, el) {
if (!names.length) return '';
const mid = names.length === 1 ? 1 : Math.floor(names.length / 2);
const top = names.slice(0, mid);
const bot = names.slice(mid);
const size = this.autoScale(names, el.fontSize);
let h = $(`<div class="rosterList"></div>`).css(
{
width: el.width, height: el.height,
"writing-mode": "vertical-rl", /* 直書 */
display: "flex",
"flex-direction": "row", /* 上下分層 (Top / Bottom) */
"align-items": "center", /* 左右置中對齊 */
"justify-content": "start",
gap: "20px",
});
h.append(this.renderNameGroups(top, el));
if (bot.length) h.append(this.renderNameGroups(bot, el));
return h
},
renderNameGroups(items, el) {
let g = $(`<div class="rosterspan"></div>`).css({
"display": "flex",
"flex-direction": "column",
"justify-content": "center",
"height": el.textHeight,
})
items.forEach(x => {
g.append($(`<div class="" style="font-size:${el.fontSize}pt;letter-spacing: 10px;">${x}</div>`))
})
return g;
},
autoScale(names, base) {
const max = Math.max(...names.map(n => n.length), 0);
return max > 5 ? Math.max(base * (5 / max), base * 0.6) : base;
},
getTextInfo(text, font) { getTextInfo(text, font) {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
const context = canvas.getContext("2d"); const context = canvas.getContext("2d");
@@ -634,6 +782,10 @@
//if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下 //if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
if ((Math.ceil(txtContent.length / 2) * font.width) * 2 > parseFloat(elementWidth)) { if ((Math.ceil(txtContent.length / 2) * font.width) * 2 > parseFloat(elementWidth)) {
let newfontSize = parseInt(fontSize) - 1; let newfontSize = parseInt(fontSize) - 1;
console.log("newfontSize:", newfontSize);
if (newfontSize <= 8) {
return newfontSize;
}
//console.log("newfontSize:",newfontSize) //console.log("newfontSize:",newfontSize)
return this.scaleFontSize(txtContent, newfontSize, elementWidth); return this.scaleFontSize(txtContent, newfontSize, elementWidth);
} }
@@ -644,6 +796,105 @@
//1. by 特定字 2.by長度 //1. by 特定字 2.by長度
}, },
async changeSetup(config) {
switch (config) {
case "X":
if ($("#indivualSetup").prop("checked")) {
$(this.selected).css("left", $("#textX").val() + "mm");
} else if ($("#allSetup").prop("checked")) {
}
break;
case "Y":
if ($("#indivualSetup").prop("checked")) {
$(this.selected).css("top", $("#textY").val() + "mm");
} else if ($("#allSetup").prop("checked")) {
}
break;
case "fontSize":
if ($("#indivualSetup").prop("checked")) {
$(this.selected).css("font-size", $("#fontSize").val())
} else if ($("#allSetup").prop("checked")) {
}
break;
case "width":
if ($("#indivualSetup").prop("checked")) {
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())
} else if (this.selected.find(".rosterList").length >= 1) {
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) {
$(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) {
$(x).css("max-width", $("#textWidth").val());
});
} else if (this.selected.hasClass("rosterSpan")) {
let spans = $(this.selected.parent().first()).find(".rosterSpan");
spans.each(function(index, x) {
$(x).css("max-width", $("#textWidth").val());
});
}
} else if ($("#allSetup").prop("checked")) {
}
break;
case "height":
if ($("#indivualSetup").prop("checked")) {
if (this.selected.find(".nameList").length >= 1) {
$(this.selected.find(".nameList").first()).css("height", $("#textHeight").val())
} else if (this.selected.find(".liveList").length >= 1) {
this.selected.find(".liveList").first().css("height", $("#textHeight").val())
} else if (this.selected.find(".rosterList").length >= 1) {
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) {
console.log($(x))
$(x).css("min-height", $("#textHeight").val());
});
} else if (this.selected.hasClass("liveSpan")) {
let spans = $(this.selected.parent().first()).find(".liveSpan");
spans.each(function (index, x) {
$(x).css("min-height", $("#textHeight").val());
});
} else if (this.selected.hasClass("rosterSpan")) {
let spans = $(this.selected.parent().first()).find(".rosterSpan");
spans.each(function (index, x){
$(x).css("min-height", $("#textHeight").val());
});
}
} else if ($("#allSetup").prop("checked")) {
}
break;
case "breakCount":
if ($("#indivualSetup").prop("checked")) {
} else if ($("#allSetup").prop("checked")) {
}
break;
case "breakWord":
if ($("#indivualSetup").prop("checked")) {
} else if ($("#allSetup").prop("checked")) {
}
break;
}
},
async changeLocation() { async changeLocation() {
$(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");
@@ -723,9 +974,9 @@
}, },
} }
$(document).click(function (e) { $(document).click(function (e) {
if (!$("#customMenu").is(e.target) && $("#customMenu").has(e.target).length === 0) { //if (!$("#customMenu").is(e.target) && $("#customMenu").has(e.target).length === 0) {
$("#customMenu").hide(); // $("#customMenu").hide();
} //}
}); });
$(() => Printer.init()); $(() => Printer.init());
</script> </script>
web/admin/print/tablet_edit/editornew.html
+12 -6
View File
@@ -404,6 +404,7 @@
}, },
actitem: "", actitem: "",
pageSize: "", pageSize: "",
defaultStyle:"",
isAllSelected: false, isAllSelected: false,
dialog: false, dialog: false,
addDialog: false, // 新增項目對話框 addDialog: false, // 新增項目對話框
@@ -506,12 +507,12 @@
window.addEventListener('message', (event) => { window.addEventListener('message', (event) => {
this.isAllSelected = false; this.isAllSelected = false;
console.log('editor.html - received message event'); console.log('editor.html - received message event');
console.log('editor.html - event origin:', event.origin); //console.log('editor.html - event origin:', event.origin);
console.log('editor.html - parent origin:', window.parent.location.origin); //console.log('editor.html - parent origin:', window.parent.location.origin);
if (event.origin === window.parent.location.origin) { if (event.origin === window.parent.location.origin) {
console.log('editor.html - origin check passed'); //console.log('editor.html - origin check passed');
console.log('editor.html - received data:', event.data); //console.log('editor.html - received data:', event.data);
const receivedData = event.data; const receivedData = event.data;
this.family_deceased_Y_selected = []; this.family_deceased_Y_selected = [];
this.family_deceased_N_selected = []; this.family_deceased_N_selected = [];
@@ -526,15 +527,16 @@
if (receivedData.tabletItem) { if (receivedData.tabletItem) {
this.tabletItem = receivedData.tabletItem; this.tabletItem = receivedData.tabletItem;
} }
//console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
console.log("receivedData::",receivedData); console.log("receivedData::",receivedData);
if (receivedData.tabletItem.style) { if (receivedData.tabletItem.style) {
this.selected.style = receivedData.tabletItem.style; this.selected.style = receivedData.tabletItem.style;
} else { } else {
this.selected.style = ""; this.selected.style = "";
} }
//console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
this.actitem = receivedData.tabletItem.actitem_num_selected.val; this.actitem = receivedData.tabletItem.actitem_num_selected.val;
console.log("actitem:",receivedData.tabletItem.actitem_num_selected.val); //console.log("actitem:",receivedData.tabletItem.actitem_num_selected.val);
// 處理 f_num_tablet 資料 // 處理 f_num_tablet 資料
if (this.tabletItem.f_num_tablet) { if (this.tabletItem.f_num_tablet) {
try { try {
@@ -595,6 +597,9 @@
console.log(response); console.log(response);
if (response.data.result == "Y" && response.data.data) { if (response.data.result == "Y" && response.data.data) {
this.pageSize = response.data.data.pageSize; this.pageSize = response.data.data.pageSize;
this.defaultStyle = response.data.data.defaultStyle;
this.selected.style = response.data.data.defaultStyle;
console.log("shit:",this.selected.style);
this.getStyle(); this.getStyle();
} }
} }
@@ -615,6 +620,7 @@
} }
} }
}) })
} }
}) })
.catch(error => console.log(error)) .catch(error => console.log(error))