新增親友功能

This commit is contained in:
2026-04-13 17:44:13 +08:00
parent 1afb90f3ba
commit a81967ddbd
+214 -190
View File
@@ -139,6 +139,22 @@
</div> </div>
</div> </div>
</div> </div>
<div class="position-fixed top-50 start-50 p-3" style="z-index: 10001" >
<div id="liveToast" class="toast hide " role="alert" aria-live="assertive"
data-bs-delay="3000" aria-atomic="true"
style="color:white;background-color:dimgray;opacity:1;font-size:24px;">
<div class="toast-header">
<!--<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>-->
<strong class="me-auto">提示訊息</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" id="toast_body">
</div>
</div>
</div>
<script type="text/javascript"> <script type="text/javascript">
const designer = { const designer = {
code: { code: {
@@ -184,9 +200,9 @@
alive: [],//陽上 alive: [],//陽上
tabletType: "A", tabletType: "A",
http_host: "", http_host: "",
follower_id:"", follower_id: "",
toast: null, toast: null,
modal:null, modal: null,
bg: [ bg: [
{ name: "黃1", path: "../../../admin/print/html/tablet-1_new.svg" }, { name: "黃1", path: "../../../admin/print/html/tablet-1_new.svg" },
{ name: "黃2", path: "../../../admin/print/html/tablet-1B_new.svg" }, { name: "黃2", path: "../../../admin/print/html/tablet-1B_new.svg" },
@@ -199,9 +215,9 @@
.then(res => res.json()) .then(res => res.json())
.then(data => { this.phrases = data; }) .then(data => { this.phrases = data; })
.catch(err => console.error('載入 phrases.json 失敗:', err)); .catch(err => console.error('載入 phrases.json 失敗:', err));
//this.toast = new bootstrap.Toast($('#familyModal')); this.toast = new bootstrap.Toast($('#liveToast'));
this.modal = new bootstrap.Modal($('#familyModal')); this.modal = new bootstrap.Modal($('#familyModal'));
//this.toast.hide(); //this.toast.show();
}, },
async getActItem() { async getActItem() {
axios axios
@@ -483,176 +499,176 @@
} }
}); });
self.pageStyle = `<style id="pageStyle"> self.pageStyle = `<style id="pageStyle">
{ {
-webkit-print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important; print-color-adjust: exact !important;
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 { .vertical-text {
size:${pageSize.width}mm ${pageSize.height}mm !important; writing-mode: vertical-rl !important;
margin:0; -webkit-writing-mode: vertical-rl !important;
text-orientation: mixed !important;
} }
html, body, form, .full-home, .printArea, .canvas-area { body{
height: auto !important; overflow: visible !important;
width: auto !important;
overflow: visible !important; /*必須為 visible */
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.no-print, #customMenu {
display: none !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{ .canvas-area{
width: ${pageSize.width}mm;
height: ${pageSize.height}mm;
break-after: page;
page-break-after: always;
display:flex !important; display:flex !important;
justify-content:center;
flex-direction: row !important;
justify-content:center !important;
align-items:center !important;
} }
.tablet-paper { .tablet-paper{
position: relative !important; background-color: white;
display: block !important; 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; break-inline:avoid;
page-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 { .tablet-element {
position: absolute !important; cursor: move;
white-space: normal; padding: 4px;
color: black !important; /* 確保文字是黑色 */ 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;
/* 名單金字塔佈局容器 */ }
.roster-container { </style>
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(); $("#pageStyle").remove();
$("head").append(self.pageStyle); $("head").append(self.pageStyle);
$(canvas).append(tabletpaper); $(canvas).append(tabletpaper);
@@ -675,10 +691,10 @@
//self.familyMembers; //self.familyMembers;
self.alive.forEach(x => { self.alive.forEach(x => {
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span> $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${x}</span> <span class="selected">${x}</span>
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span> <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>
<span class="itemUp" style="float:right ;margin-left:2rem;cursor:pointer;">&#8593;</span> <span class="itemUp" style="float:right ;margin-left:2rem;cursor:pointer;">&#8593;</span>
<span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`); <span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
}); });
let items = [] let items = []
self.familyMembers.forEach(x => { self.familyMembers.forEach(x => {
@@ -692,34 +708,34 @@
} else if (element.hasClass("address")) {//地址 } else if (element.hasClass("address")) {//地址
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span> $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${self.address}</span>027 <span class="selected">${self.address}</span>027
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`); <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
} else if (element.hasClass("lefttitle")) {//左正名 } else if (element.hasClass("lefttitle")) {//左正名
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span> $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${self.leftProperTitle.join("")}</span> <span class="selected">${self.leftProperTitle.join("")}</span>
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`); <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
} else if (element.hasClass("righttitle")) {//右正名 } else if (element.hasClass("righttitle")) {//右正名
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span> $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${self.rightProperTitle.join("")}</span> <span class="selected">${self.rightProperTitle.join("")}</span>
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`); <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
} else {//其他都是正名 } else {//其他都是正名
if (element.hasClass("ancestor-wrapper")) {//多姓氏合併,只允許用打的 if (element.hasClass("ancestor-wrapper")) {//多姓氏合併,只允許用打的
self.properTitle.forEach(y => { self.properTitle.forEach(y => {
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span> $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${y}</span> <span class="selected">${y}</span>
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span> <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>
<span class="itemUp" style="float:right ;margin-left:2rem;cursor:pointer;">&#8593;</span> <span class="itemUp" style="float:right ;margin-left:2rem;cursor:pointer;">&#8593;</span>
<span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`); <span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
}); });
} else if (element.hasClass("nameList") || element.hasClass("rosterList")) {// } else if (element.hasClass("nameList") || element.hasClass("rosterList")) {//
self.properTitle.forEach(y => { self.properTitle.forEach(y => {
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span> $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${y}</span> <span class="selected">${y}</span>
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span> <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>
<span class="itemUp" style="float:right ;margin-left:2rem;cursor:pointer;">&#8593;</span> <span class="itemUp" style="float:right ;margin-left:2rem;cursor:pointer;">&#8593;</span>
<span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`); <span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
}) })
let items = [] let items = []
self.familyMembers.forEach(x => { self.familyMembers.forEach(x => {
@@ -1237,9 +1253,9 @@
newFontSize = d.fontSize; newFontSize = d.fontSize;
const parts = mid.join("\n").split('\n'); const parts = mid.join("\n").split('\n');
html = `<div class="ancestor-wrapper" style="width:${d.width}px !important;height:${d.height}px !important;" > html = `<div class="ancestor-wrapper" style="width:${d.width}px !important;height:${d.height}px !important;" >
<span class="main-name" >${parts[0] || ''}</span> <span class="main-name" >${parts[0] || ''}</span>
<span class="sub-text">${parts[1] || ''}</span> <span class="sub-text">${parts[1] || ''}</span>
</div>`; </div>`;
return html return html
}, },
renderNameGroups(items, el) { renderNameGroups(items, el) {
@@ -1325,17 +1341,17 @@
console.log("follower_id:", this.follower_id); console.log("follower_id:", this.follower_id);
return false return false
} }
let pro_order_detail = let pro_order_detail =
{ {
// num: this.editedItem.num,//原先載入時的家人num // num: this.editedItem.num,//原先載入時的家人num
//f_num: this.editedItem.f_num_selected.val, //儲存時的家人num //f_num: this.editedItem.f_num_selected.val, //儲存時的家人num
//leader: this.follower_id, //leader: this.follower_id,
//appellation_id: this.editedItem.appellation_id_selected.val, //儲存時的稱謂 //appellation_id: this.editedItem.appellation_id_selected.val, //儲存時的稱謂
follower_num: this.follower_id, follower_num: this.follower_id,
fam_name: $("#family_txt").val(), fam_name: $("#family_txt").val(),
deceased: $("#deceased_sel").val() == "False" ? false : true, deceased: $("#deceased_sel").val() == "False" ? false : true,
num:0 num: 0
} }
this.modal.toggle(); this.modal.toggle();
@@ -1347,13 +1363,20 @@
axios axios
.post('/api/tablet/saveFamily', pro_order_detail) .post('/api/tablet/saveFamily', pro_order_detail)
.then(response => { .then(response => {
console.log(response); //console.log(response);
if (response.status == 200 && response.result == "Y") { if (response.status == 200 && response.data.result == "Y") {
let data = response.data; let data = response.data;
this.familyMembers.push(data); self.familyMembers.push(data.data);
//console.log(self.familyMembers);
alert("新增成功"); //alert("新增成功");
self.modal.toggle(); self.modal.toggle();
if (self.selectedElement) {
let element = $(self.selectedElement).children().first();
self.renderItem(element);
}
$("#toast_body").html(`${"新增成功"}`)
self.toast.show();
} else { } else {
} }
@@ -1487,6 +1510,7 @@
} }
$(() => $(window).on("message", function (event) { $(() => $(window).on("message", function (event) {
//designer.toast.show();
//designer.reset(); //designer.reset();
let e = event.originalEvent; let e = event.originalEvent;
if (e.origin === window.parent.location.origin) { if (e.origin === window.parent.location.origin) {
@@ -1497,7 +1521,7 @@
designer.family_deceased_N_selected = []; designer.family_deceased_N_selected = [];
designer.http_host = receivedData.host; designer.http_host = receivedData.host;
designer.follower_id = receivedData.follower_id; designer.follower_id = receivedData.follower_id;
console.log("123:",receivedData); console.log("123:", receivedData);
if (receivedData.tabletItem) { if (receivedData.tabletItem) {
//console.log('editor.html - updating tabletItem:', receivedData.tabletItem); //console.log('editor.html - updating tabletItem:', receivedData.tabletItem);
designer.tabletItem = receivedData.tabletItem; designer.tabletItem = receivedData.tabletItem;
@@ -1517,13 +1541,13 @@
} }
designer.actitem = receivedData.tabletItem.actitem_num_selected.val; designer.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 (designer.tabletItem.f_num_tablet) { if (designer.tabletItem.f_num_tablet) {
try { try {
const data = JSON.parse(designer.tabletItem.f_num_tablet); const data = JSON.parse(designer.tabletItem.f_num_tablet);
if (designer.item_type === 'B') { if (designer.item_type === 'B') {
// B類型:超渡、超薦等 // B類型:超渡、超薦等
designer.family_deceased_Y_selected = data.mid_items || []; designer.family_deceased_Y_selected = data.mid_items || [];