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
+98 -87
View File
@@ -24,7 +24,7 @@
return {
this_id: '<%= Request["num"] %>',
paperlist: [],
stylelist:[],
stylelist: [],
options: {},
optionsDetail: {
multiSort: false,
@@ -45,7 +45,7 @@
{ id: 'kind', title: '分類名稱' },
],
selected: {},
select(item,t) {
select(item, t) {
console.log("select search1", t);
}
},
@@ -62,7 +62,7 @@
{ id: 'subject', title: '文件名稱' },
],
selected: {},
select(item,t) {
select(item, t) {
console.log("select search2", t);
item.files_num_selected.text = t.subject //=====?
@@ -73,26 +73,26 @@
id: 'search3',
title: '子項目',
text_prop: 'subject',
value_prop: 'num',
keys: [
{ id: 'subject', title: '項目名稱', value: '' },
{ id: 'kindTxt', title: '項目分類' },
],
api_url: HTTP_HOST + 'api/activity/GetItemList',
columns: [
{ id: 'subject', title: '項目名稱', value: '' },
{ id: 'kindTxt', title: '項目分類' },
],
selected: {},
select(item,t) {
console.log("select search3", item, t);
//debugger;
item.actItem.subject = t.subject
item.actItem.num = t.num
item.item_num_selected={
text: t.subject,
val : t.num
}
value_prop: 'num',
keys: [
{ id: 'subject', title: '項目名稱', value: '' },
{ id: 'kindTxt', title: '項目分類' },
],
api_url: HTTP_HOST + 'api/activity/GetItemList',
columns: [
{ id: 'subject', title: '項目名稱', value: '' },
{ id: 'kindTxt', title: '項目分類' },
],
selected: {},
select(item, t) {
console.log("select search3", item, t);
//debugger;
item.actItem.subject = t.subject
item.actItem.num = t.num
item.item_num_selected = {
text: t.subject,
val: t.num
}
// item.bom_editedItem.actItem.subject = t.subject
// item.bom_editedItem.actItem.num = t.num
@@ -100,8 +100,8 @@
// text : t.subject,
// val = t.num
// }
}
////新增/修改+關閉時, 會清空/還原
}
////新增/修改+關閉時, 會清空/還原
},
},
@@ -245,8 +245,8 @@
});
//necessary parameter===
if (this.search_dialog.current.id == 'search1') {
if (this.this_id=="")
search['status'] = "Y";//啟用
if (this.this_id == "")
search['status'] = "Y";//啟用
}
console.log("search_get", api_url, search, params, this.options);
this.search_dialog.loading = true
@@ -294,7 +294,7 @@
target.children("input.search-text").val(curr.selected[curr.text_prop])//text
target.children("input:hidden").val(curr.selected[curr.value_prop])//value
if (curr.select instanceof Function) {
curr.select(editem,row);
curr.select(editem, row);
}
this.search_dialog.show = false;
//console.log(row, row["u_name"], row["f_number"], curr.id, target);
@@ -333,48 +333,53 @@
})
.catch(
error => console.log(error)
)
axios
.post(HTTP_HOST + 'api/tablet/GetPaperSize', {})
.then(response => {
console.log(response);
if (response.status == "200") {
let data = response.data;
if (data.result == "Y") {
data.data.forEach(x => {
this.paperlist.push({ name: x.paperName, id: x.paperID, width: x.width, height: x.height })
$("#pageSize").append(`<option value="${x.paperID}">${x.paperName}</option>`);
$("#printSize").append(`<option value="${x.paperID}">${x.paperName}</option>`);
});
}
}
})
.catch(
error => console.log(error)
)
axios
.post(HTTP_HOST + 'api/tablet/GetStyleData', {})
.then(response => {
console.log(response);
if (response.status == "200") {
let data = response.data;
if (data.result == "Y") {
data.data.forEach(x => {
if (x.styleID != "000001") {
this.stylelist.push({ styleID: x.styleID, name: x.name })
$("#defaultStyle").append(`<option value="${x.styleID}">${x.name}</option>`);
}
});
}
}
})
.catch(
error => console.log(error)
)
}
axios
.post(HTTP_HOST + 'api/tablet/GetPaperSize', {})
.then(response => {
console.log(response);
if (response.status == "200") {
let data = response.data;
if (data.result == "Y") {
data.data.forEach(x => {
this.paperlist.push({ name: x.paperName, id: x.paperID, width: x.width, height: x.height })
$('#<%= ddlPageSize.ClientID %>').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())
}
}
})
.catch(
error => console.log(error)
)
axios
.post(HTTP_HOST + 'api/tablet/GetStyleData', {})
.then(response => {
console.log(response);
if (response.status == "200") {
let data = response.data;
if (data.result == "Y") {
data.data.forEach(x => {
if (x.styleID != "000001") {
this.stylelist.push({ styleID: x.styleID, name: x.name })
$('#<%= 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(
error => console.log(error)
)
},
editItem(item) {
this.editedIndex = this.desserts.indexOf(item);
@@ -445,7 +450,7 @@
if (this.editedIndex > -1) {
if (this.this_id != '') {
//chcck necessary params
if (this.editedItem.files_num_selected.val != 0 ) {
if (this.editedItem.files_num_selected.val != 0) {
//insert or update data
var pro_order_detail =
{
@@ -484,16 +489,16 @@
const _subject = $('#<%= subject.ClientID%>').val();
return "（" + strUser + "）" + " " + _kind_txt + " " + _subject;
},
bom_editItem(item){
bom_editItem(item) {
this.bom_editedIndex = this.bom_list.indexOf(item);
this.bom_editedItem = $.extend(true, {}, item);
console.log("bom_editItem:", this.bom_editedIndex, this.bom_editedItem);
//debugger;
},
bom_deleteItem(item){
bom_deleteItem(item) {
confirm('確定要刪除此筆資料嗎?') && this.bom_list.splice(index, 1);
},
bom_cancel(){
bom_cancel() {
this.bom_spliceNullData();
this.bom_close();
},
@@ -513,7 +518,7 @@
this.bom_editedItem = -1;
}, 300)
},
bom_addNew(){
bom_addNew() {
this.spliceNullData();
//addObj.id = this.desserts.length + 1;
@@ -532,11 +537,11 @@
if (!!this.bom_list) this.bom_list?.unshift(addObj);
this.bom_editItem(addObj);
},
bom_save(){
bom_save() {
if (this.bom_editedIndex > -1) {
if (this.this_id != '') {
//chcck necessary params
if (this.bom_editedItem.item_num_selected.val != 0 ) {
if (this.bom_editedItem.item_num_selected.val != 0) {
//insert or update data
var package_num = $(".packageNum input[type=hidden]").val();
var bom_detail =
@@ -566,13 +571,13 @@
}
}
},
selectChange(what) {
if (what == "pageSize") {
document.getElementById('<%= pageSizeSel.ClientID %>').value = $("#pageSize").val();
} else if (what == "printSize") {
document.getElementById('<%= printSizeSel.ClientID %>').value = $("#printSize").val();
} else if (what=="defaultStyle") {
document.getElementById('<%= defaultStyleSel.ClientID %>').value = $("#defaultStyle").val();
changeSel(selType) {
if (selType=="ddlPageSize") {
$("#<%= hidPageSize.ClientID %>").val($("#<%= ddlPageSize.ClientID %>").val())
} else if (selType == "ddlPrintSize") {
$("#<%= hidPrintSize.ClientID %>").val($("#<%=ddlPrintSize.ClientID %>").val())
} else if (selType == "ddlDefaultStyle") {
$("#<%= hidDefaultStyle.ClientID %>").val($("#<%= ddlDefaultStyle.ClientID %>").val())
}
}
},
@@ -678,28 +683,34 @@
<div class="row mb-1 label-sm-right">
<label class="col-sm-2 col-form-label">預設頁面尺寸</label>
<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>
</select>
<asp:HiddenField ID="pageSizeSel" runat="server" Value="" />
<asp:HiddenField ID="pageSizeSel" runat="server" Value="" />--%>
<%--<asp:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%>
</div>
<label class="col-sm-2 col-form-label">預設列印尺寸</label>
<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>
</select>
<asp:HiddenField ID="printSizeSel" runat="server" Value="" />
<asp:HiddenField ID="printSizeSel" runat="server" Value="" />--%>
<%-- <asp:DropDownList ID="printSize" runat="server"></asp:DropDownList> --%>
</div>
</div>
<div class="row mb-1 label-sm-right">
<label class="col-sm-2 col-form-label">預設版型</label>
<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>
</select>
<asp:HiddenField ID="defaultStyleSel" runat="server" Value="" />
<asp:HiddenField ID="defaultStyleSel" runat="server" Value="" />--%>
<%--<asp:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%>
</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;
PARTNO.Text = prod.partno;
//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)
{
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.print_init = print_init.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(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.print_init = print_init.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(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",
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));
if (bot.length) h.append(this.renderNameGroups(bot,el));
return h
web/admin/print/print_multi_new.aspx
+355 -104
View File
@@ -18,6 +18,62 @@
</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>
</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>
<select id="paperSizeSel" onchange="Printer.render()">
<!-- onchange="Printer.render()"-->
@@ -33,36 +89,6 @@
</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>
</body>
@@ -82,14 +108,14 @@
selected: null,
http_host: "",
pageStyle: "",
pSize:"",
pSize: "",
allStyle: [],
allSize: [],
allStyleDetails: [],
printData: [],
tabletElement: [],
observer: null,
isInit:true,
isInit: true,
bg: [
{ name: "黃1", path: "../../admin/print/html/tablet-1_new.svg" },
{ name: "黃2", path: "../../admin/print/html/tablet-1B_new.svg" },
@@ -105,15 +131,15 @@
this.getActItem(),
this.getPaperSize(),
]).then(() => {
Promise.all([
Promise.all([
this.getTabletElement(),
this.getTabletStyles(),
this.getAllStyleDetails(),
this.getData(),
]).then(() => {
this.render();
})
]).then(() => {
this.render();
})
})
},
async getActItem() {
@@ -159,7 +185,7 @@
this.allSize = data.data;
//console.log(this.allSize);
if (this.allSize) {
this.allSize.forEach(x => {
this.allSize.forEach(x => {
$("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`);
})
//if (this.printSize) {
@@ -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 nowPageWidth = 0;
let tabletpaper;
this.printData.forEach(x => {
if ($("#paperSizeSel").val() == "") {
if (this.pSize&&this.pSize!=undefined) {
$("#paperSizeSel").val(this.pSize);
} else {
$("#paperSizeSel").val("0003");
}
//列印紙張的尺寸
if ($("#paperSizeSel").val() == "") {
if (this.pSize && this.pSize != undefined) {
$("#paperSizeSel").val(this.pSize);
} else {
$("#paperSizeSel").val("0001");
}
}
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 pageSize = self.allSize.find(y => y.paperID == $("#paperSizeSel").val());
let printSize = self.allSize.find(y => y.paperID ==style.printSize);
if ((nowPageWidth + parseFloat(printSize.width)) > pageSize.width) {
//包含空白用來折的尺寸
let printSize = self.allSize.find(y => y.paperID == style.printSize);
//用長根寬算出一張紙可以印幾張
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("height", printSize.height + "mm");
//$(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>`)
nowPageWidth = 0;
}
nowPageWidth = nowPageWidth + parseFloat(printSize.width);
nowPageWidth = nowPageWidth + 1; //parseFloat(printSize.width);
tabletpaper = $(` <div class="tablet-paper">
</div>`)
let img = self.bg.find(y => y.name == style.backendImg);
@@ -267,6 +305,7 @@
let left_items = tablet.left_items;
let details = this.allStyleDetails.filter(y => y.styleID == x.style);
console.log("details:", details);
let mid = [];
mid_items.forEach(y => {
mid.push(y.fam_name);
@@ -308,11 +347,12 @@
mid.forEach(z => {
let info = self.getTextInfo(z, newFontSize);
let spanWidth = mid.length > 1 ? newFontSize : d.width
console.log("spanWidth:", spanWidth);
let height = d.textHeight;
if (info.width >= d.textHeight) {
height = d.height;
}
let $span = $(`<span>${z}</span>`).css({
let $span = $(`<span class="nameSpan">${z}</span>`).css({
display: "block",
"min-height": `${height}px`,
"max-height": `${d.height}px`,
@@ -320,7 +360,7 @@
//width: `${newFontSize}px`,
"text-align": "justify",
"text-align-last": "justify",
"margin-bottom": "40px",
"margin-bottom": "20px",
"margin-left": "5px",
"text-justify": "inter-character",
//"justify-content":"center"
@@ -333,17 +373,21 @@
html = self.renderLiveList(left, d);
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>`)
.css({
position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'px',
fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
"align-items":"center"
"align-items": "center"
})
.html(html);
tabletpaper.append(content);
tabletpaper.append(content);
html = "";
alive = "";
yang = "";
@@ -352,6 +396,9 @@
})
//console.log("xCount:", Math.floor( xCount));
let xFloor = Math.floor(xCount);
self.pageStyle = `<style id="pageStyle">
{
-webkit-print-color-adjust: exact !important;
@@ -363,6 +410,10 @@
-webkit-writing-mode: vertical-rl !important;
text-orientation: mixed !important;
}
body{
overflow: visible !important;
}
@media print{
:host {
width:auto !important;
@@ -372,7 +423,7 @@
size:${pageSize.width}mm ${pageSize.height}mm !important;
margin:0;
}
html, body, form, .full-home, #printArea, .canvas-area {
html, body, form, .full-home, #printArea, .canvas-area {
height: auto !important;
width: auto !important;
overflow: visible !important; /*必須為 visible */
@@ -386,15 +437,23 @@
.canvas-area{
display:flex !important;
display:${xFloor > 1 ? 'block' : 'flex'} !important;
grid-template-columns: repeat(${xFloor},1fr);
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 {
display: none !important;
}
//.no-print, #customMenu {
// display: none !important;
//}
.tablet-paper {
position: relative !important;
display: block !important;
display: ${xFloor > 1 ? 'inline-block' : 'block'} !important;
break-inline:avoid;
page-break-inline:avoid;
break-after: page !important;
page-break-after: always !important;
margin: 0 !important;
@@ -479,22 +538,31 @@
}
.canvas-area{
width: ${printSize.width}mm;
height: ${printSize.height}mm;
justify-content: center;
width: ${pageSize.width}mm;
height: ${pageSize.height}mm;
break-after: page;
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{
background-color: white;
display: inline-block;
width: ${size.width}mm !important;
height: ${ size.height }mm !important;
height: ${size.height}mm !important;
position: relative;
margin-bottom: 0;
background-image: url(${ img.path });
background-image: url(${img.path});
background-size: 100% 100%;
break-after: page;
page-break-after: always;
/*break-after: page;
page-break-after: always;*/
break-inline:avoid;
page-break-inline:avoid;
}
.tablet-element {
cursor: move;
@@ -505,6 +573,10 @@
}
.tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
.tablet-paper:last-child { page-break-after: auto; }
.tablet-element span{
z-index: 999;
}
</style>
`
$("#pageStyle").remove();
@@ -515,44 +587,82 @@
//$(canvas).css("justify-content", "center");
$("#printArea").append(canvas);
});
$(".tablet-element").draggable({
start(e, ui) {
//console.log("gogogogo");
},
stop(e, ui) {
//console.log(ui.position.left, ui.position.top);
}
});
//$(".tablet-element").draggable({
// start(e, ui) {
// //console.log("gogogogo");
// },
// stop(e, ui) {
// //console.log(ui.position.left, ui.position.top);
// }
//});
$(".tablet-element").on("click", function (e) {
e.preventDefault();
self.selected = $(this);
let fontSize = $(this).css("fontSize");
let fontFamily = $(this).css("fontFamily");
let left = $(this).css("left");
let top = $(this).css("top");
});
//$(".tablet-element").on("click", function (e) {
// e.preventDefault();
// self.selected = $(this);
// let fontSize = $(this).css("fontSize");
// let fontFamily = $(this).css("fontFamily");
// let left = $(this).css("left");
// let top = $(this).css("top");
//});
$(".tablet-element").on("contextmenu", function (e) {
e.preventDefault();
self.selected = $(this);
let fontSize = $(this).css("font-size");
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 top = $(this).css("top");
$("#customMenu").css({
top: e.pageY + "px",
left: (e.pageX + 30) + "px"
});
left = left.replace("px", "");
top = top.replace("px", "");
$("#textX").val(self.fix2(left * 0.265));
$("#textY").val(self.fix2(top * 0.265));
$("#fontSize").val(fontSize);
$("#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;
},
renderLiveSpan(name, el) {
return $(`<span>${name}</span>`).css({
return $(`<span class="liveSpan">${name}</span>`).css({
display: "block",
"min-height": `${el.textHeight}px`,
"max-height": `${el.height}px`,
@@ -592,18 +702,56 @@
height: `${el.textHeight}px`,
"text-align": "justify",
"text-align-last": "justify",
"margin-bottom": "15px",
"margin-bottom": "10px",
"text-justify": "inter-character",
});
},
getTextInfo(text,font) {
// 品字佈局邏輯：一上二下
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) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.font = font;
const metrics = context.measureText(text);
return metrics
},
getTextWidth(text,font) {
getTextWidth(text, font) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.font = font;
@@ -626,24 +774,127 @@
document.body.removeChild(span);
return result;
},
scaleFontSize(txtContent, fontSize,elementWidth) {
scaleFontSize(txtContent, fontSize, elementWidth) {
let font = this.getTextSize("講", parseInt(fontSize));
let font = this.getTextSize("講", parseInt(fontSize));
//自動判斷縮小字型的規則,要同時縮小間距
//if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) {
let newfontSize = parseInt(fontSize) - 1;
//console.log("newfontSize:",newfontSize)
return this.scaleFontSize(txtContent, newfontSize,elementWidth);
//if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
if ((Math.ceil(txtContent.length / 2) * font.width) * 2 > parseFloat(elementWidth)) {
let newfontSize = parseInt(fontSize) - 1;
console.log("newfontSize:", newfontSize);
if (newfontSize <= 8) {
return newfontSize;
}
return fontSize;
//console.log("newfontSize:",newfontSize)
return this.scaleFontSize(txtContent, newfontSize, elementWidth);
}
return fontSize;
},
breakWord(txtContent, style, dStyle) {
//自動判斷斷字
//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() {
$(this.selected).css("left", $("#textX").val() + "mm");
$(this.selected).css("top", $("#textY").val() + "mm");
@@ -723,9 +974,9 @@
},
}
$(document).click(function (e) {
if (!$("#customMenu").is(e.target) && $("#customMenu").has(e.target).length === 0) {
$("#customMenu").hide();
}
//if (!$("#customMenu").is(e.target) && $("#customMenu").has(e.target).length === 0) {
// $("#customMenu").hide();
//}
});
$(() => Printer.init());
</script>
web/admin/print/tablet_edit/editornew.html
+13 -7
View File
@@ -403,7 +403,8 @@
style:""
},
actitem: "",
pageSize:"",
pageSize: "",
defaultStyle:"",
isAllSelected: false,
dialog: false,
addDialog: false, // 新增項目對話框
@@ -506,12 +507,12 @@
window.addEventListener('message', (event) => {
this.isAllSelected = false;
console.log('editor.html - received message event');
console.log('editor.html - event origin:', event.origin);
console.log('editor.html - parent origin:', window.parent.location.origin);
//console.log('editor.html - event origin:', event.origin);
//console.log('editor.html - parent origin:', window.parent.location.origin);
if (event.origin === window.parent.location.origin) {
console.log('editor.html - origin check passed');
console.log('editor.html - received data:', event.data);
//console.log('editor.html - origin check passed');
//console.log('editor.html - received data:', event.data);
const receivedData = event.data;
this.family_deceased_Y_selected = [];
this.family_deceased_N_selected = [];
@@ -526,15 +527,16 @@
if (receivedData.tabletItem) {
this.tabletItem = receivedData.tabletItem;
}
//console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
console.log("receivedData::",receivedData);
if (receivedData.tabletItem.style) {
this.selected.style = receivedData.tabletItem.style;
} else {
this.selected.style = "";
}
//console.log("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 資料
if (this.tabletItem.f_num_tablet) {
try {
@@ -595,6 +597,9 @@
console.log(response);
if (response.data.result == "Y" && response.data.data) {
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();
}
}
@@ -615,6 +620,7 @@
}
}
})
}
})
.catch(error => console.log(error))