From a81967ddbddbbeac059fee783595a74ac2537668 Mon Sep 17 00:00:00 2001
From: minom <minomdu@gmail.com>
Date: Mon, 13 Apr 2026 17:44:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=A6=AA=E5=8F=8B=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/admin/print/tablet_edit/editorNewOne.html | 404 ++++++++++--------
 1 file changed, 214 insertions(+), 190 deletions(-)

diff --git a/web/admin/print/tablet_edit/editorNewOne.html b/web/admin/print/tablet_edit/editorNewOne.html
index c0282a6..eb10531 100644
--- a/web/admin/print/tablet_edit/editorNewOne.html
+++ b/web/admin/print/tablet_edit/editorNewOne.html
@@ -139,6 +139,22 @@
             </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">
         const designer = {
             code: {
@@ -184,9 +200,9 @@
             alive: [],//陽上
             tabletType: "A",
             http_host: "",
-            follower_id:"",
+            follower_id: "",
             toast: null,
-            modal:null,
+            modal: null,
             bg: [
                 { name: "黃1", path: "../../../admin/print/html/tablet-1_new.svg" },
                 { name: "黃2", path: "../../../admin/print/html/tablet-1B_new.svg" },
@@ -199,9 +215,9 @@
                     .then(res => res.json())
                     .then(data => { this.phrases = data; })
                     .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.toast.hide();
+                //this.toast.show();
             },
             async getActItem() {
                 axios
@@ -483,176 +499,176 @@
                     }
                 });
                 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;
+                                                    {
+                                                        -webkit-print-color-adjust: exact !important;
+                                                        print-color-adjust: exact !important;
+                                                        color-adjust: exact !important;
                                                     }
-                                                    @page {
-                                                        size:${pageSize.width}mm ${pageSize.height}mm   !important;
-                                                        margin:0;
+                                                    .vertical-text {
+                                                        writing-mode: vertical-rl !important;
+                                                        -webkit-writing-mode: vertical-rl !important;
+                                                        text-orientation: mixed !important;
                                                     }
-                                                    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;
+                                                    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;
-
-                                                        flex-direction: row !important;
-                                                        justify-content:center !important;
-                                                        align-items:center !important;
+                                                        justify-content:center;
 
                                                     }
 
-                                                    .tablet-paper {
-                                                        position: relative !important;
-                                                        display: block !important;
+                                                    .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;
-                                                        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; /* 確保文字是黑色的 */
+                                                      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; }
 
-                                                }
-
-                                                /* 名單金字塔佈局容器 */
-                                                .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>
-                                                `
+                                                    .tablet-element span{
+                                                        z-index: 999;
+                                                    }
+                                                    </style>
+                                                    `
                 $("#pageStyle").remove();
                 $("head").append(self.pageStyle);
                 $(canvas).append(tabletpaper);
@@ -675,10 +691,10 @@
                     //self.familyMembers;
                     self.alive.forEach(x => {
                         $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                                        <span class="selected">${x}</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="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
+                                            <span class="selected">${x}</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="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
                     });
                     let items = []
                     self.familyMembers.forEach(x => {
@@ -692,34 +708,34 @@
 
                 } else if (element.hasClass("address")) {//地址
                     $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                         <span class="selected">${self.address}</span>027
-                         <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
+                             <span class="selected">${self.address}</span>027
+                             <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
                 } else if (element.hasClass("lefttitle")) {//左正名
                     $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                         <span class="selected">${self.leftProperTitle.join("")}</span>
-                         <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
+                             <span class="selected">${self.leftProperTitle.join("")}</span>
+                             <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
                 } else if (element.hasClass("righttitle")) {//右正名
                     $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                         <span class="selected">${self.rightProperTitle.join("")}</span>
-                         <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
+                             <span class="selected">${self.rightProperTitle.join("")}</span>
+                             <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
                 } else {//其他都是正名
 
                     if (element.hasClass("ancestor-wrapper")) {//多姓氏合併，只允許用打的
                         self.properTitle.forEach(y => {
                             $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                                         <span class="selected">${y}</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="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
+                                             <span class="selected">${y}</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="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
                         });
                     } else if (element.hasClass("nameList") || element.hasClass("rosterList")) {//
 
                         self.properTitle.forEach(y => {
                             $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                                         <span class="selected">${y}</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="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
+                                             <span class="selected">${y}</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="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
                         })
                         let items = []
                         self.familyMembers.forEach(x => {
@@ -1237,9 +1253,9 @@
                 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>`;
+                              <span class="main-name" >${parts[0] || ''}</span>
+                              <span class="sub-text">${parts[1] || ''}</span>
+                          </div>`;
                 return html
             },
             renderNameGroups(items, el) {
@@ -1325,17 +1341,17 @@
                     console.log("follower_id:", this.follower_id);
                     return false
                 }
-             
+
                 let pro_order_detail =
                 {
-                   // num: this.editedItem.num,//原先載入時的家人num
+                    // num: this.editedItem.num,//原先載入時的家人num
                     //f_num: this.editedItem.f_num_selected.val, //儲存時的家人num
                     //leader: this.follower_id,
                     //appellation_id: this.editedItem.appellation_id_selected.val, //儲存時的稱謂
                     follower_num: this.follower_id,
                     fam_name: $("#family_txt").val(),
                     deceased: $("#deceased_sel").val() == "False" ? false : true,
-                    num:0
+                    num: 0
 
                 }
                 this.modal.toggle();
@@ -1347,13 +1363,20 @@
                 axios
                     .post('/api/tablet/saveFamily', pro_order_detail)
                     .then(response => {
-                        console.log(response);
-                        if (response.status == 200 && response.result == "Y") {
+                        //console.log(response);
+                        if (response.status == 200 && response.data.result == "Y") {
                             let data = response.data;
-                            this.familyMembers.push(data);
-
-                            alert("新增成功");
+                            self.familyMembers.push(data.data);
+                            //console.log(self.familyMembers);
+                            //alert("新增成功");
                             self.modal.toggle();
+
+                            if (self.selectedElement) {
+                                let element = $(self.selectedElement).children().first();
+                                self.renderItem(element);
+                            }
+                            $("#toast_body").html(`${"新增成功"}`)
+                            self.toast.show();
                         } else {
 
                         }
@@ -1487,6 +1510,7 @@
         }
 
         $(() => $(window).on("message", function (event) {
+            //designer.toast.show();
             //designer.reset();
             let e = event.originalEvent;
             if (e.origin === window.parent.location.origin) {
@@ -1497,7 +1521,7 @@
                 designer.family_deceased_N_selected = [];
                 designer.http_host = receivedData.host;
                 designer.follower_id = receivedData.follower_id;
-                console.log("123:",receivedData);
+                console.log("123:", receivedData);
                 if (receivedData.tabletItem) {
                     //console.log('editor.html - updating tabletItem:', receivedData.tabletItem);
                     designer.tabletItem = receivedData.tabletItem;
@@ -1517,13 +1541,13 @@
                     }
 
                     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 || [];