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-07 18:04:08 +08:00
parent 36174834a8
commit 83a7c67439
7 changed files with 1085 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin/activity/item_reg.aspx
+1 -16
View File
@@ -685,21 +685,11 @@
<div class="col-sm-4">
<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:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%>
</div>
<label class="col-sm-2 col-form-label">預設列印尺寸</label>
<div class="col-sm-4">
<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:DropDownList ID="printSize" runat="server"></asp:DropDownList> --%>
</div>
</div>
<div class="row mb-1 label-sm-right">
@@ -707,15 +697,10 @@
<div class="col-sm-4">
<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:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%>
</div>
</div>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" class="row mb-1 label-sm-right">
<ContentTemplate>
<label class="col-sm-2 col-form-label"></label>
web/admin/activity/reg.aspx
+80 -2
View File
@@ -590,7 +590,79 @@
this.data_table.selected.push(this.data_table.editFilesItem[i])
}
}
}, multiPrint() {
},
multiPrintNew() {
var params = {
item: this.thisItemSelected.val,
file: this.thisFilesSelected.val,
//list: this.data_table.selected.map(x => x.num)
};
var list = [];
//list = this.data_table.selected.map(x => x.num);
list = this.data_table.selected
.sort((a, b) => (a.print_id == null ? "" : a.print_id).localeCompare(b.print_id == null ? "" : b.print_id))
.map(x => x.num);
//console.log("what:",list);
if (list.length > 0) {
// 記錄已列印
let _url = HTTP_HOST + 'api/order/printMultiFileLog';
axios.post(_url, list, { params: params })
.then(response => {
for (let i = 0; i < this.data_table.selected.length; i++) {
for (let j = 0; i < this.data_table.editFilesItem.length; j++) {
if (this.data_table.selected[i].num == this.data_table.editFilesItem[j].num) {
this.data_table.editFilesItem[j].isPrinted = true;
break;
}
}
}
})
.catch(error => {
console.log(error)
})
// 送出列印
_url = HTTP_HOST + 'admin/print/print_multi_new.aspx';
var form = document.createElement("form");
form.method = "POST";
form.action = _url;
form.target = "_blank"; // Open the result in a new tab
// Helper function to add hidden fields
const addHiddenField = (name, value) => {
const hiddenField = document.createElement("input");
hiddenField.type = "hidden";
hiddenField.name = name;
hiddenField.value = value;
form.appendChild(hiddenField);
};
// Add form fields
console.log(this.thisItemSelected.val, this.thisFilesSelected.val, JSON.stringify(list));
addHiddenField("item", this.thisItemSelected.val);
addHiddenField("file", this.thisFilesSelected.val);
addHiddenField("list", JSON.stringify(list));
addHiddenField("title", `${this.thisItemSelected.text} / ${this.thisFilesSelected.text}`);
//console.log("底家:",this.data_table.selected);
localStorage.setItem("item", this.thisItemSelected.val);
localStorage.setItem("list", JSON.stringify(this.data_table.selected));
document.body.appendChild(form); // Not entirely sure if this is necessary
form.submit();
document.body.removeChild(form);
}
else {
this.snackbar.text = "未選擇列印項目";
this.snackbar.show = true
}
},
multiPrint() {
var params = {
item: this.thisItemSelected.val,
file: this.thisFilesSelected.val,
@@ -625,7 +697,7 @@
})
// 送出列印
_url = HTTP_HOST + 'admin/print/print_multi_new.aspx';
_url = HTTP_HOST + 'admin/print/print_multi.aspx';
var form = document.createElement("form");
form.method = "POST";
form.action = _url;
@@ -1205,6 +1277,12 @@
@click="multiPrint">
列印<v-icon dark>mdi-turn-right</v-icon>
</v-btn>
<v-btn
color="primary"
class="ml-2 white--text"
@click="multiPrintNew">
列印(New)<v-icon dark>mdi-turn-right</v-icon>
</v-btn>
</div>
</v-toolbar>
</template>
web/admin/item/TabletDesigner.aspx
+18 -13
View File
@@ -345,15 +345,15 @@
}
.ancestor-wrapper {
/* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
writing-mode: horizontal-tb;
display: flex;
flex-direction: column;
align-items: center; /* 水平置中 */
justify-content: center;
width: fit-content;
}
// .ancestor-wrapper {
// /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
// writing-mode: horizontal-tb;
// display: flex;
// flex-direction: column;
// align-items: center; /* 水平置中 */
// justify-content: flex-start;
// width: fit-content;
//}
.main-name {
line-height: 1.2;
@@ -690,7 +690,7 @@
// 2. 正名合併置中
else if (el.type === 'combined-center') {
const parts = el.text.split('\n');
html = `<div class="ancestor-wrapper" >
html = `<div class="ancestor-wrapper" style="width:${el.width}px !important;height:${el.height}px !important;" >
<span class="main-name" >${parts[0] || ''}</span>
<span class="sub-text">${parts[1] || ''}</span>
</div>`;
@@ -878,8 +878,8 @@
else if (key === '2offset') el.twoOffset = parseFloat(val);
else if (key === '3offset') el.threeOffset = parseFloat(val);
else if (key === '4offset') el.fourOffset = parseFloat(val);
else if (key === 'height') el.height = parseFloat(val);
else el[key] = val;
console.log("activeId:",this.activeId)
if (el.type == "roster") {
const names = el.text.split('\n').filter(s => s.trim());
@@ -887,13 +887,18 @@
position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
}).html(this.renderRoster(names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit), el));
} else if (el.type == "combined-center") {
console.log("combined-center");
const parts = el.text.split('\n');
html = `<div class="ancestor-wrapper" >
html = `<div class="ancestor-wrapper" style='width:${el.width}px !important;height:${el.height}px !important' >
<span class="main-name" >${parts[0] || ''}</span>
<span class="sub-text">${parts[1] || ''}</span>
</div>`;
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
position: "absolute", left: el.startX + "mm", top: el.startY + "mm",
fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily,
"z-index": 9999, visibility: el.style.isActive,
}).html(html);
} else if (this.activeId === "title1") {
let names = el.text.split('\n').filter(s => s.trim());
web/admin/item/css/tablet-design.css
+1 -1
View File
@@ -232,7 +232,7 @@
display: flex;
flex-direction: column;
align-items: center; /* 水平置中 */
justify-content: center;
justify-content: flex-start;
width: fit-content;
}
web/admin/order/reg.aspx
+107
View File
@@ -464,6 +464,11 @@
initialized: false,
currentItem: {}
},
tablet_edit_new: {
show: false,
initialized: false,
currentItem: {}
},
//收款註記
cash_dialog: {
show: false,
@@ -547,6 +552,7 @@
// 關閉編輯對話框
this.tablet_edit.show = false;
thiw.tablet_edit_new.show = false;
// 顯示成功訊息
this.snackbar.text = '牌位資料已更新';
@@ -561,6 +567,13 @@
this.tablet_edit.initialized = true;
};
}
const iframe1 = document.querySelector('iframe#tablet_edit_new_iframe');
if (iframe1) {
iframe1.onload = () => {
this.tablet_edit_new.initialized = true;
};
}
},
watch: {
options: {
@@ -577,6 +590,14 @@
}
}
},
'tablet_edit_new.show': {
handler(newVal) {
if (!newVal && this._savedEditedItem) {
this.editedItem = $.extend(true, {}, this._savedEditedItem);
this._savedEditedItem = null;
}
}
},
optionsDetail: {
handler() {
this.initialize();
@@ -819,6 +840,32 @@
this.editedItem = $.extend(true, {}, item);
this.file_dialog.show = true;
},
async editTabletNew(item) {
this.editedIndex = this.desserts.indexOf(item);
this.editedItem = $.extend(true, {}, item);
try {
// 如果是新項目，先保存
if (this.editedItem.num <= 0 || this.editedItem.num === null || this.editedItem.num === undefined) {
this.editedItem.qty = 1;
const savedItem = await this.save(false);
if (savedItem) {
this.$set(this.desserts, this.editedIndex, savedItem);
this.editedItem = $.extend(true, {}, savedItem);
}
}
// 先發送消息
await this.sendMessageToIframeNew();
// 保存當前的 editedItem 數據
const currentData = $.extend(true, {}, this.editedItem);
// 顯示對話框
this.tablet_edit_new.show = true;
// 立即恢復數據
this.editedItem = $.extend(true, {}, currentData);
} catch (error) {
console.error('Error in editTablet:', error);
}
},
async editTablet(item) {
this.editedIndex = this.desserts.indexOf(item);
this.editedItem = $.extend(true, {}, item);
@@ -845,6 +892,52 @@
console.error('Error in editTablet:', error);
}
},
async sendMessageToIframeNew() {
const iframe = document.querySelector('iframe#tablet_edit_new_iframe');
// 在這裡深度複製 editedItem，確保數據不會被修改
const itemToSend = $.extend(true, {}, this.editedItem);
if (iframe) {
try {
// 準備要發送的數據
let familyMembers = [];
try {
// 嘗試獲取家族成員數據
const response = await axios.get(HTTP_HOST + 'api/familymembers/follower/' + this.follower_id);
familyMembers = response.data;
} catch (error) {
console.warn('error:', error);
}
// 準備發送的數據
const itemInfo = {
source: 'order.btn.click',
tabletItem: {
...itemToSend,
title: this.titleword() // 確保標題被包含
},
familyMembers: familyMembers
};
iframe.contentWindow.postMessage(itemInfo, '*');
// 發送後確認數據完整性
// 如果數據被清除，立即恢復
if (!this.editedItem.num && itemToSend.num) {
this.$nextTick(() => {
this.editedItem = $.extend(true, {}, itemToSend);
});
}
} catch (error) {
console.error('Error in sendMessageToIframe:', error);
}
} else {
console.error('iframe not found');
}
},
async sendMessageToIframe() {
const iframe = document.querySelector('iframe#tablet_edit_iframe');
@@ -2002,6 +2095,9 @@
<v-icon title="編輯牌位" color="blue" class="mr-2" @click="editTablet(item);">
mdi-file-document-edit-outline
</v-icon>
<v-icon title="編輯牌位New" color="blue" class="mr-2" @click="editTabletNew(item);">
mdi-file-document-edit-outline
</v-icon>
<v-icon title="列印" color="blue" class="mr-2" @click="printItem(item);" v-if="canPrint || lists.length==0" >
mdi-printer
</v-icon>
@@ -2569,6 +2665,17 @@
</v-card>
</v-dialog>
<v-dialog v-model="tablet_edit_new.show" min-width="100vw" min-height="100vh" persistent eager :class="{'d-none': !tablet_edit_new.initialized}">
<v-card>
<v-card-title class="justify-space-between grey lighten-2">
<span class="fs-6 text text-dark">編輯牌位 : {{editedItem.actitem_num_selected.text}} - {{editedItem.print_id}}</span>
<v-btn icon @click="tablet_edit_new.show=false"><v-icon>mdi-close</v-icon></v-btn>
</v-card-title>
<v-card-text>
<iframe id="tablet_edit_new_iframe" src="../print/tablet_edit/editorNewOne.html" style="width: 100%; height: 100%;min-height:100vh;min-width:100vw" frameborder="0"></iframe>
</v-card-text>
</v-card>
</v-dialog>
<v-dialog v-model="tablet_edit.show" max-width="1000px" persistent eager :class="{'d-none': !tablet_edit.initialized}">
<v-card>
<v-card-title class="justify-space-between grey lighten-2">
web/admin/print/print_multi_new.aspx
+42 -14
View File
@@ -260,7 +260,6 @@
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);
@@ -271,7 +270,6 @@
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");
@@ -305,7 +303,6 @@
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);
@@ -316,7 +313,7 @@
left.push(y.fam_name);
});
}
let ancestorFontSize = 16;
details.forEach(d => {
if (d.isActive != "hidden") {
let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
@@ -347,7 +344,6 @@
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;
@@ -363,6 +359,7 @@
"margin-bottom": "20px",
"margin-left": "5px",
"text-justify": "inter-character",
"white-space": "pre-line",
//"justify-content":"center"
});
$namelist.append($span);
@@ -375,6 +372,13 @@
newFontSize = d.fontSize;
} else if (d.elementID === "titletriangle") {
html = self.renderRoster(mid, d)
} else if (d.elementID === "combined") {
ancestorFontSize = d.fontSize;
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>
</div>`;
}
if (newFontSize < 10) {
newFontSize = 10;
@@ -520,7 +524,7 @@
display: flex;
flex-direction: column;
align-items: center; /* 水平置中 */
justify-content: center;
justify-content: felx-start;
width: fit-content;
}
@@ -530,7 +534,7 @@
}
.sub-text {
font-size: 0.6em; /* 縮小字體 */
font-size: ${ancestorFontSize}px ;/*0.8em;*/ /* 縮小字體 */
line-height: 1.2;
margin-top: 4px; /* 與上方林張的間距 */
white-space: normal; /* 避免自動換行 */
@@ -613,16 +617,18 @@
let textWidth;//= $(this).css("width");//find("span").first().css("width");
let textHeight; //= $(this).css("height");
if ($(this).find(".nameList").first()) {
if ($(this).find(".nameList").first().hasClass("nameList")) {
textWidth = $(this).find(".nameList").first().css("width");
textHeight = $(this).find(".nameList").first().css("height");
} else if ($(this).find(".liveList").first()) {
} else if ($(this).find(".liveList").first().hasClass("liveList")) {
textWidth = $(this).find(".liveList").first().css("width");
textHeight = $(this).find(".liveList").first().css("height");
} else if ($(this).find(".rosterList").first()) {
} else if ($(this).find(".rosterList").first().hasClass("rosterList")) {
textWidth = $(this).find(".rosterList").first().css("width");
textHeight = $(this).find(".rosterList").first().css("height");
} else if ($(this).find(".ancestor-wrapper").first().hasClass("ancestor-wrapper")) {
textWidth = $(this).find(".ancestor-wrapper").first().css("width");
textHeight = $(this).find(".ancestor-wrapper").first().css("height");
}
let left = $(this).css("left");
@@ -638,6 +644,10 @@
$("#textX").prop("readonly", false);
$("#textY").prop("readonly", false);
$("#fontSize").prop("readonly", false);
$("#textWidth").prop("readonly", false);
$("#textHeight").prop("readonly", false);
$("#textBreakCount").prop("readonly", true);
$("#textBreakWord").prop("readonly", true);
});
$(".tablet-element span").on("click", function (e) {
@@ -647,6 +657,13 @@
let fontFamily = $(this).css("font-family");
let textWidth = $(this).css("max-width");
let textHeight = $(this).css("min-height");
if ($(this).hasClass("liveSpan")) {
textWidth = $(this).css("width");
} else if ($(this).hasClass("main-name") || $(this).hasClass("sub-text")) {
textWidth = "";
textHeight = "";
}
let left = $(this).css("left");
let top = $(this).css("top");
left = left.replace("px", "");
@@ -661,6 +678,16 @@
$("#textX").prop("readonly", true);
$("#textY").prop("readonly", true);
$("#fontSize").prop("readonly", true);
$("#textBreakCount").prop("readonly", false);
$("#textBreakWord").prop("readonly", false);
} else if ($(this).hasClass("main-name") || $(this).hasClass("sub-text")) {
$("#textX").prop("readonly", true);
$("#textY").prop("readonly", true);
$("#fontSize").prop("readonly", true);
$("#textBreakCount").prop("readonly", true);
$("#textBreakWord").prop("readonly", true);
$("#textWidth").prop("readonly", true);
$("#textHeight").prop("readonly", true);
}
});
@@ -704,6 +731,7 @@
"text-align-last": "justify",
"margin-bottom": "10px",
"text-justify": "inter-character",
"white-space": "pre-line"
});
},
// 品字佈局邏輯：一上二下
@@ -734,6 +762,7 @@
"flex-direction": "column",
"justify-content": "center",
"height": el.textHeight,
"white-space": "pre-line"
})
items.forEach(x => {
g.append($(`<div class="" style="font-size:${el.fontSize}pt;letter-spacing: 10px;">${x}</div>`))
@@ -782,7 +811,6 @@
//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;
}
@@ -836,7 +864,7 @@
} 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());
$(x).css("width", $("#textWidth").val());
});
} else if (this.selected.hasClass("rosterSpan")) {
let spans = $(this.selected.parent().first()).find(".rosterSpan");
@@ -860,13 +888,13 @@
} 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());
$(x).css("height", $("#textHeight").val());
});
} else if (this.selected.hasClass("rosterSpan")) {
let spans = $(this.selected.parent().first()).find(".rosterSpan");
web/admin/print/tablet_edit/editorNewOne.html
+835
View File
@@ -0,0 +1,835 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../../../js/bootstrap5/bootstrap.min.css" />
<link href="../../item/jquery-ui/jquery-ui.min.css" />
<link href="../../../js/vuetify.css" rel="stylesheet" />
<link href="../../../js/mdi-font/css/materialdesignicons.min.css" rel="stylesheet" />
<script src="../../../js/vue.min.js"></script>
<script src="../../../js/vuetify.min.js"></script>
<script src="../../../js/axios.min.js"></script>
<script src="../../../js/bootstrap5/js/bootstrap.bundle.min.js"></script>
<script src="../../../js/jquery-4.0.0.min.js"></script>
<script src="../../item/jquery-ui/jquery-ui.min.js"></script>
<style>
.div_border{
border:1px solid black;
}
.work_space{
min-height:90vh;
min-width:90vw;
}
</style>
</head>
<body>
<div class="d-flex full-home no-print" style="height: 100%;width:100%;">
<div id="designArea" class="designArea" style="width: auto; height: auto">
<div class="row mt-2">
<div class="col-3">版型設定:
<select id="styleSel" onchange="designer.changeStyle()">
<option value="">請選擇版型</option>
</select>
</div>
</div>
<div class="row work_space">
<div class="col-8 div_border printArea"></div>
<div class="col-4 div_border"></div>
</div>
</div>
</div>
<script type="text/javascript">
const designer = {
code: {
style: []
},
selected: {
style: ""
},
actitem: "",
pageSize: "",
defaultStyle: "",
isAllSelected: false,
dialog: false,
addDialog: false, // 新增項目對話框
addDialogType: '', // 'Y' 或 'N'
newItemText: '', // 新增項目的文字
noSpace: true, // 不加空格 checkbox（預設勾選）
deleteDialog: false, // 確認刪除對話框
deleteIndex: -1, // 要刪除的 index
deleteType: '', // 'Y' 或 'N'
deleteMemberName: '', // 要刪除的名稱（顯示用）
phrases: [], // 常用片語
familyMembers: [], // 親友名單
tabletItem: {}, // 傳入的資料(信眾/牌位資訊)
item: {},
family_deceased_Y_selected: [], // 超渡/超薦/超冤名單
family_deceased_N_selected: [], // 消災/陽上名單
allStyle: [],
allStyleDetails: [],
allSize: [],
tabletElement: [],
http_host: "",
printData: [],
selectedElement: {},
selectStyle: {},
properTitle: [],//正名
leftProperTitle: [],//左正名
rightProperTitle: [],//右正名
address: "",//地址
alive:[],//陽上
bg: [
{ name: "黃1", path: "../../../admin/print/html/tablet-1_new.svg" },
{ name: "黃2", path: "../../../admin/print/html/tablet-1B_new.svg" },
{ name: "紅1", path: "../../../admin/print/html/tablet-2.svg" },
{ name: "紅2", path: "../../../admin/print/html/tablet-2B.svg" }
],
async init() {
// 載入常用片語
fetch('phrases.json')
.then(res => res.json())
.then(data => { this.phrases = data; })
.catch(err => console.error('載入 phrases.json 失敗:', err));
//// 監聽來自父頁面的消息
//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);
// if (event.origin === window.parent.location.origin) {
// //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 = [];
// if (receivedData.tabletItem) {
// //console.log('editor.html - updating tabletItem:', receivedData.tabletItem);
// this.tabletItem = receivedData.tabletItem;
// if (receivedData.familyMembers) {
// this.familyMembers = receivedData.familyMembers; // 更新 familyMembers
// //console.log("app mounted, window message: ", this.familyMembers, receivedData);
// }
// 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);
// // 處理 f_num_tablet 資料
// if (this.tabletItem.f_num_tablet) {
// try {
// const data = JSON.parse(this.tabletItem.f_num_tablet);
// if (this.item_type === 'B') {
// // B類型：超渡、超薦等
// this.family_deceased_Y_selected = data.mid_items || [];
// this.family_deceased_N_selected = data.left_items || [];
// this.family_deceased_Y_selected.forEach(item => {
// if (item.IsShuWen === undefined) {
// //Vue.set(item, 'IsShuWen', false);
// }
// });
// if (this.family_deceased_Y_selected.length > 0) {
// this.isAllSelected = this.family_deceased_Y_selected.every(member => member.IsShuWen === true);
// } else {
// this.isAllSelected = false;
// }
// } else {
// // A類型：消災、陽上等
// this.family_deceased_Y_selected = [];
// this.family_deceased_N_selected = data.mid_items || [];
// this.family_deceased_N_selected.forEach(item => {
// if (item.IsShuWen === undefined) {
// //Vue.set(item, 'IsShuWen', false);
// }
// });
// if (this.family_deceased_Y_selected.length > 0) {
// this.isAllSelected = this.family_deceased_N_selected.every(member => member.IsShuWen === true);
// } else {
// this.isAllSelected = false;
// }
// //console.log(this.family_deceased_N_selected)
// }
// } catch (e) {
// console.error('解析牌位資料時發生錯誤:', e);
// }
// }
// }
// }
//});
//let HTTP_HOST = "<%=UrlHost()%>";
//this.http_host = HTTP_HOST;
},
async getActItem() {
axios
.post('/api/tablet/GetActItem', { itemNum: this.actitem })
.then(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;
$("#styleSel").val(this.defaultStyle);
//this.getStyle();
}
}
);
},
async getAllStyleDetails() {
await axios
.post( '/api/tablet/GetStyleDetailData', {})
.then(response => {
if (response.status == "200") {
let data = response.data;
if (data.result == "Y") {
let details = data.data;
this.allStyleDetails = details;
//console.log(data.data);
}
}
}
);
},
async getPaperSize() {
let self = this
await axios
.post('/api/tablet/GetPaperSize', {})
.then(response => {
//if (response.result=="Y") {
if (response.status == "200") {
let data = response.data;
this.allSize = data.data;
//console.log(this.allSize);
//if (this.allSize) {
// this.allSize.forEach(x => {
// $("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`);
// })
//}
}
//$("#paperSizeSel").val("0003");
}
)
},
async getTabletElement() {
await axios
.post('/api/tablet/GetTabletElement', {})
.then(response => {
//if (response.result=="Y") {
if (response.status == "200") {
let data = response.data;
this.tabletElement = data.data;
}
});
},
async getTabletStyles() {
await axios
.post('/api/tablet/GetStyleData', {})
.then(response => {
if (response.status == "200") {
let data = response.data;
if (data.data) {
data.data.forEach(x => {
if (x.styleID !== "00001") {
this.allStyle.push(x);
$("#styleSel").append(`<option value="${x.styleID}">${x.name}</option`);
}
})
}
}
});
},
async getData() {
console.log("getData:", this.tabletItem)
this.printData.length = 0;
this.properTitle.length = 0
this.alive.length = 0;
//let list = localStorage.getItem("list")
let param = [];
let self = this;
param.push({ order_no: this.tabletItem.order_no, num: this.tabletItem.num })
await axios
.post('/api/orderdetail/GetDetailToPrint', { param: param })
.then(response => {
if (response.status == 200) {
self.printData = response.data;
self.printData.forEach(x => {
self.selectStyle = x;
let tablet = JSON.parse(x.f_num_tablet);
let mid_items = tablet.mid_items;
let left_items = tablet.left_items;
//let mid = [];
mid_items.forEach(y => {
self.properTitle.push(y.fam_name);
});
//let left = []
if (left_items) {
left_items.forEach(y => {
self.alive.push(y.fam_name);
});
}
});
this.render();
}
});
},
async render() {
$("#printArea").empty();
let self = this;
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;
//列印紙張的尺寸
console.log("printData:", this.printData);
let mid = [];
Object.assign(mid, self.properTitle);
let left = []
Object.assign(left, self.alive);
//this.printData.forEach(x => {
let x = self.selectStyle;
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 == style.printSize);
//包含空白用來折的尺寸
let printSize = self.allSize.find(y => y.paperID == style.printSize);
tabletpaper = $(` <div class="tablet-paper"></div>`)
let img = self.bg.find(y => y.name == style.backendImg);
let details = this.allStyleDetails.filter(y => y.styleID == x.style);
console.log("details:", details);
let ancestorFontSize = 16;
details.forEach(d => {
if (d.isActive != "hidden") {
let element = self.tabletElement.find(y => y.elementID == d.elementID);
//let newFontSize = self.scaleFontSize(d.sampleContent, d.fontSize, d.width);
let newFontSize = 16;
let html = "";
let alive = "";
let yang = "";
let bi = "";
if (d.elementID === 'title1') {
let $namelist = $(`<div class='nameList'></div>`).css({
"writing-mode": "vertical rl",
display: "flex",
"flex-direction": "row",
"flex-wrap": "wrap",
margin: "auto",
width: `${d.width}px`,
height: `${d.height}px`,
border: "0px solid #ccc",
padding: "1px",
"font-family": style.fontFamily,
"letter-spacing": "0.1em",
"column-gap": "1px",
"row-gap": "1px",
"align-items": "center",
"justify-content": "space-between",
});
mid.forEach(z => {
let info = self.getTextInfo(z, newFontSize);
let spanWidth = mid.length > 1 ? newFontSize : d.width
let height = d.textHeight;
if (info.width >= d.textHeight) {
height = d.height;
}
let $span = $(`<span class="nameSpan">${z}</span>`).css({
display: "block",
"min-height": `${height}px`,
"max-height": `${d.height}px`,
"max-width": `${spanWidth}px`,
//width: `${newFontSize}px`,
"text-align": "justify",
"text-align-last": "justify",
"margin-bottom": "20px",
"margin-left": "5px",
"text-justify": "inter-character",
"white-space": "pre-line",
//"justify-content":"center"
});
$namelist.append($span);
});
html = $namelist;
} else if (d.elementID === "alive") {
html = self.renderLiveList(left, d);
newFontSize = d.fontSize;
} else if (d.elementID === "titletriangle") {
html = self.renderRoster(mid, d)
} else if (d.elementID === "combined") {
ancestorFontSize = d.fontSize;
newFontSize = d.fontSize;
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>
</div>`;
}
if (newFontSize < 10) {
newFontSize = 10;
}
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',
fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
"align-items": "center"
})
.html(html);
tabletpaper.append(content);
html = "";
alive = "";
yang = "";
bi = "";
}
});
self.pageStyle = `<style id="pageStyle">
{
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
.vertical-text {
writing-mode: vertical-rl !important;
-webkit-writing-mode: vertical-rl !important;
text-orientation: mixed !important;
}
body{
overflow: visible !important;
}
@media print{
:host {
width:auto !important;
height:auto !important;
}
@page {
size:${pageSize.width}mm ${pageSize.height}mm !important;
margin:0;
}
html, body, form, .full-home, #printArea, .canvas-area {
height: auto !important;
width: auto !important;
overflow: visible !important; /*必須為 visible */
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.no-print, #customMenu {
display: none !important;
}
.canvas-area{
display:flex !important;
flex-direction: row !important;
justify-content:center !important;
align-items:center !important;
}
.tablet-paper {
position: relative !important;
display: block !important;
break-inline:avoid;
page-break-inline:avoid;
break-after: page !important;
page-break-after: always !important;
margin: 0 !important;
border: none !important;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.tablet-element {
position: absolute !important;
white-space: normal;
color: black !important; /* 確保文字是黑色的 */
}
}
/* 名單金字塔佈局容器 */
.roster-container {
width: 100%; height: 100%;
writing-mode: vertical-rl; /* 直書 */
display: flex;
/*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
flex-direction: row; /* 上下分層 (Top / Bottom) */
align-items: center; /* 左右置中對齊 */
justify-content: center;
gap: 20px; /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
}
.roster-row {
display: flex;
flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
justify-content: center;
gap: 8px; /* 名字之間的間距 */
margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
}
.name-group {
display: flex;
flex-direction: column; /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
justify-content: center;
align-items: center;
/* gap 由 HTML 動態綁定 */
}
.roster-name {
text-orientation: upright;
/*font-weight: bold;*/
white-space: normal;
line-height: 1.2;
font-family: DFKai-sb;
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
width: fit-content;
}
/* 【修復底圖沒出現】強制印出背景設定 */
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
.ancestor-wrapper {
/* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
writing-mode: horizontal-tb;
display: flex;
flex-direction: column;
align-items: center; /* 水平置中 */
justify-content: felx-start;
width: fit-content;
}
.main-name {
line-height: 1.2;
/* 保持大字 */
}
.sub-text {
font-size: ${ancestorFontSize}px ;/*0.8em;*/ /* 縮小字體 */
line-height: 1.2;
margin-top: 4px; /* 與上方林張的間距 */
white-space: normal; /* 避免自動換行 */
writing-mode:vertical-rl
}
.canvas-area{
width: ${pageSize.width}mm;
height: ${pageSize.height}mm;
break-after: page;
page-break-after: always;
display:flex !important;
justify-content:center;
}
.tablet-paper{
background-color: white;
display: inline-block;
width: ${size.width}mm !important;
height: ${size.height}mm !important;
position: relative;
margin-bottom: 0;
background-image: url(${img.path});
background-size: 100% 100%;
break-inline:avoid;
page-break-inline:avoid;
}
.tablet-element {
cursor: move;
padding: 4px;
color: black !important; /* 強制墨水為黑色 */
border: 1px solid transparent;
transition: writing-mode 0.3s, transform 0.2s;
}
.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();
$("head").append(self.pageStyle);
$(canvas).append(tabletpaper);
$(".printArea").append(canvas);
//});
$(".tablet-element").on("click", function (e) {
e.preventDefault();
self.selectedElement = $(this);
let element = $(this).children().first();
if (element.hasClass("liveList")) {//陽上
//抓往生的人出來
//self.familyMembers;
} else if (element.hasClass("address")) {//地址
} else {//其他都是正名
//抓未往生的人出來
}
//console.log(this);
});
},
//async getFamily() {
// let param = {};
// await axios
// .post('/api/familymembers/follower', { param: param })
// .then(response => { });
//},
changeStyle() {
},
fix2(val) {
return Number.parseFloat(val).toFixed(2);
},
renderLiveList(names, el) {
let $namelist = $(`<div class='liveList'></div>`).css({
"writing-mode": "vertical rl",
display: "flex",
"flex-direction": "row",
"flex-wrap": "wrap",
margin: "auto",
width: `${el.width}px`,
height: `${el.height}px`,
border: "0px solid #ccc",
padding: "1px",
"font-family": el.fontFamily,
"letter-spacing": "0.1em",
"column-gap": "1px",
"row-gap": "1px",
"align-items": "center",
});
let self = this;
names.forEach(n => {
$namelist.append(self.renderLiveSpan(n, el))
})
return $namelist;
},
renderLiveSpan(name, el) {
return $(`<span class="liveSpan">${name}</span>`).css({
display: "block",
"min-height": `${el.textHeight}px`,
"max-height": `${el.height}px`,
width: `${el.textWidth}px`,
height: `${el.textHeight}px`,
"text-align": "justify",
"text-align-last": "justify",
"margin-bottom": "10px",
"text-justify": "inter-character",
"white-space": "pre-line"
});
},
// 品字佈局邏輯：一上二下
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,
"white-space": "pre-line"
})
items.forEach(x => {
g.append($(`<div class="" style="font-size:${el.fontSize}pt;letter-spacing: 10px;">${x}</div>`))
})
return g;
},
async 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;
},
scaleFontSize(txtContent, fontSize, elementWidth) {
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;
if (newfontSize <= 8) {
return newfontSize;
}
//console.log("newfontSize:",newfontSize)
return this.scaleFontSize(txtContent, newfontSize, elementWidth);
}
return fontSize;
},
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) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.font = font;
const metrics = context.measureText(text);
return metrics;
},
getTextSize(txt, fontsize) {
let span = document.createElement("span");
span.style.visibility = "hidden";
span.style.position = "absolute";
span.style.fontSize = fontsize + "px";
span.style.fontFamily = "";
span.innerText = txt;
document.body.appendChild(span);
let result = {
width: span.offsetWidth,
height: span.offsetHeight
}
document.body.removeChild(span);
return result;
},
}
$(() => $(window).on("message", function (event) {
let e = event.originalEvent;
if (e.origin === window.parent.location.origin) {
//console.log('editor.html - origin check passed');
//console.log('editor.html - received data:', event.data);
const receivedData = e.data;
designer.family_deceased_Y_selected = [];
designer.family_deceased_N_selected = [];
if (receivedData.tabletItem) {
//console.log('editor.html - updating tabletItem:', receivedData.tabletItem);
designer.tabletItem = receivedData.tabletItem;
if (receivedData.familyMembers) {
designer.familyMembers = receivedData.familyMembers; // 更新 familyMembers
//console.log("app mounted, window message: ", this.familyMembers, receivedData);
}
if (receivedData.tabletItem) {
designer.tabletItem = receivedData.tabletItem;
}
//console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
console.log("receivedData::", receivedData);
if (receivedData.tabletItem.style) {
designer.selected.style = receivedData.tabletItem.style;
} else {
designer.selected.style = "";
}
console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
designer.actitem = receivedData.tabletItem.actitem_num_selected.val;
//console.log("actitem:",receivedData.tabletItem.actitem_num_selected.val);
// 處理 f_num_tablet 資料
if (designer.tabletItem.f_num_tablet) {
try {
const data = JSON.parse(designer.tabletItem.f_num_tablet);
if (designer.item_type === 'B') {
// B類型：超渡、超薦等
designer.family_deceased_Y_selected = data.mid_items || [];
designer.family_deceased_N_selected = data.left_items || [];
designer.family_deceased_Y_selected.forEach(item => {
if (item.IsShuWen === undefined) {
//Vue.set(item, 'IsShuWen', false);
}
});
if (designer.family_deceased_Y_selected.length > 0) {
designer.isAllSelected = this.family_deceased_Y_selected.every(member => member.IsShuWen === true);
} else {
designer.isAllSelected = false;
}
} else {
// A類型：消災、陽上等
designer.family_deceased_Y_selected = [];
designer.family_deceased_N_selected = data.mid_items || [];
designer.family_deceased_N_selected.forEach(item => {
if (item.IsShuWen === undefined) {
//Vue.set(item, 'IsShuWen', false);
}
});
if (designer.family_deceased_Y_selected.length > 0) {
designer.isAllSelected = designer.family_deceased_N_selected.every(member => member.IsShuWen === true);
} else {
designer.isAllSelected = false;
}
//console.log(this.family_deceased_N_selected)
}
} catch (e) {
console.error('解析牌位資料時發生錯誤:', e);
}
}
designer.getActItem();
designer.getData();
}
}
console.log(e.origin, window.parent.location.origin)
})
)
$(() => designer.init().then(() => designer.getTabletElement().
then(() => designer.getPaperSize().
then(() => designer.getTabletStyles().
then(designer.getAllStyleDetails())))));
</script>
</body>
</html>