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

---
 web/App_Code/api/designerController.cs        |  22 +
 web/admin/order/reg.aspx                      |   3 +-
 web/admin/print/tablet_edit/editorNewOne.html | 581 ++++++++++--------
 3 files changed, 349 insertions(+), 257 deletions(-)

diff --git a/web/App_Code/api/designerController.cs b/web/App_Code/api/designerController.cs
index 3755b9f..7d503a7 100644
--- a/web/App_Code/api/designerController.cs
+++ b/web/App_Code/api/designerController.cs
@@ -76,6 +76,28 @@ public class designerController : ApiController
         //return Ok(data);
     }
 
+    [HttpPost]
+    [Route("api/tablet/saveFamily")]
+    public IHttpActionResult saveFamily([FromBody] family_members familyMember)
+    {
+        LogUtility log = new LogUtility();
+        _db.family_members.Add(familyMember);
+        _db.SaveChanges();
+        return Ok(new { result = "Y", data= familyMember });
+
+        //object[] obj = new StyleDataAccess().GetStyle("", "");
+        //if (obj[0].ToString() == "Y")
+        //{
+        //    return Ok(new { result = "Y", data = obj[2] });
+        //}
+        //else
+        //{
+        //    return Ok(new { result = "N", message = obj[1] });
+        //    //throw new HttpResponseException(HttpStatusCode.NotFound);
+        //}
+        //return Ok(data);
+    }
+
     [HttpPost]
     [Route("api/tablet/GetStyleData")]
     public IHttpActionResult GetStyleData([FromBody] dynamic data)
diff --git a/web/admin/order/reg.aspx b/web/admin/order/reg.aspx
index b0fa856..3846b82 100644
--- a/web/admin/order/reg.aspx
+++ b/web/admin/order/reg.aspx
@@ -951,7 +951,8 @@
                                     title: this.titleword() // 確保標題被包含
                                 },
                                 familyMembers: familyMembers,
-                                host: HTTP_HOST
+                                host: HTTP_HOST,
+                                follower_id:this.follower_id
                             };
 
                             iframe.contentWindow.postMessage(itemInfo, '*');
diff --git a/web/admin/print/tablet_edit/editorNewOne.html b/web/admin/print/tablet_edit/editorNewOne.html
index 791fd23..c0282a6 100644
--- a/web/admin/print/tablet_edit/editorNewOne.html
+++ b/web/admin/print/tablet_edit/editorNewOne.html
@@ -85,10 +85,15 @@
                                 <div class="col-10">
                                     <div class="form-floating mb-3">
                                         <input class="form-control" type="text" id="filter_txt"
-                                              onkeyup="designer.filterToSel()" placeholder="請輸入名稱" />
-                                        <label for="filter_txt">請輸入名稱</label>
+                                               onkeyup="designer.filterToSel()" placeholder="篩選條件" />
+                                        <label for="filter_txt">篩選條件</label>
                                     </div>
                                 </div>
+                                <div class="col-2">
+                                    <button type="button" data-bs-toggle="modal" data-bs-target="#familyModal" title="新增親友">
+                                        <i class="mdi mdi-account-multiple-plus" style="font-size:30px;"></i>
+                                    </button>
+                                </div>
                             </div>
                             <ul class="canselectItem" style="margin-left: 1rem;margin-right:1rem;">
                             </ul>
@@ -99,6 +104,41 @@
 
         </div>
     </div>
+    <div class="modal fade hide" id="familyModal" tabindex="-1" aria-labelledby="familyModalLabel" aria-hidden="true" style="z-index:10000 !important;">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">新增親友</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="form-floating mb-3">
+                                <input class="form-control" type="text" id="family_txt"
+                                       placeholder="姓名" />
+                                <label for="family_txt">姓名</label>
+                            </div>
+                        </div>
+                        <div class="col-12">
+                            <div class="form-floating mb-3">
+                                <select class="form-select" id="deceased_sel"
+                                        placeholder="存歿">
+                                    <option value="False">存</option>
+                                    <option value="True">歿</option>
+                                </select>
+                                <label for="deceased_sel">存歿</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
+                    <button type="button" class="btn btn-primary" onclick="designer.saveFamily()">存檔</button>
+                </div>
+            </div>
+        </div>
+    </div>
     <script type="text/javascript">
         const designer = {
             code: {
@@ -128,7 +168,7 @@
             family_deceased_N_selected: [],  // 消災/陽上名單
             family_left_title: [],
             family_right_title: [],
-            family_address:"",
+            family_address: "",
             allStyle: [],
             allStyleDetails: [],
             allSize: [],
@@ -143,8 +183,10 @@
             address: "",//地址
             alive: [],//陽上
             tabletType: "A",
-            http_host:"",
-            //toast:null,
+            http_host: "",
+            follower_id:"",
+            toast: null,
+            modal:null,
             bg: [
                 { name: "黃1", path: "../../../admin/print/html/tablet-1_new.svg" },
                 { name: "黃2", path: "../../../admin/print/html/tablet-1B_new.svg" },
@@ -157,14 +199,15 @@
                     .then(res => res.json())
                     .then(data => { this.phrases = data; })
                     .catch(err => console.error('載入 phrases.json 失敗:', err));
-                //this.toast = new bootstrap.Toast(document.querySelector(".toast"));
+                //this.toast = new bootstrap.Toast($('#familyModal'));
+                this.modal = new bootstrap.Modal($('#familyModal'));
                 //this.toast.hide();
             },
             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;
@@ -319,7 +362,7 @@
                     });
             },
             async render() {
-    
+
                 $(".printArea").empty();
                 $(".selectedItem").empty();
                 $(".canselectItem").empty();
@@ -329,7 +372,7 @@
                 let nowPageWidth = 0;
                 let tabletpaper;
                 //列印紙張的尺寸
-                
+
                 let mid = [];
                 Object.assign(mid, self.properTitle);
                 let left = []
@@ -340,7 +383,7 @@
                 let myAddress = [];
                 Object.assign(ltitle, self.leftProperTitle);
                 Object.assign(rtitle, self.rightProperTitle);
-                if (self.address!="") {
+                if (self.address != "") {
                     myAddress.push(self.address)
                 }
 
@@ -349,12 +392,12 @@
                 let style = self.allStyle.find(y => y.styleID == (x.style ? x.style : $("#styleSel").val()));
                 //console.log("style:",style)
                 if (x.style) {
-                   
+
                 } else {
                     self.selectStyle.style = style.styleID;
                     self.selected.style = style.styleID;
                 }
-       
+
                 //用來印內容的尺寸
                 let size = self.allSize.find(y => y.paperID == style.paperSize);
                 let pageSize = self.allSize.find(y => y.paperID == style.printSize);
@@ -365,12 +408,12 @@
                 let img = self.bg.find(y => y.name == style.backendImg);
                 let details = this.allStyleDetails.filter(y => y.styleID == style.styleID);
                 let ancestorFontSize = 16;
-         
+
                 details.forEach(d => {
                     if (d.isActive != "hidden") {
                         let element = self.tabletElement.find(y => y.elementID == d.elementID);
 
-                        let newFontSize =self.scaleFontSize(mid, d.fontSize, d.width);
+                        let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
                         let html = "";
                         let alive = "";
                         let yang = "";
@@ -389,11 +432,11 @@
                             newFontSize = self.scaleFontSize(left, d.fontSize, d.Width);
                             //newFontSize = d.fontSize;
                             html = self.renderLiveList(left, d);
-                 
+
                         } else if (d.elementID === "titletriangle") {
                             if (mid.length == 0) {
                                 mid.push("請選擇")
-                            } 
+                            }
                             html = self.renderRoster(mid, d)
                         } else if (d.elementID === "combined" || d.elementID === "tricombined") {
                             ancestorFontSize = d.fontSize;
@@ -440,176 +483,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);
@@ -626,16 +669,16 @@
                 let self = this;
                 $(".selectedItem").empty();
                 $(".canselectItem").empty();
-   
+
                 if (element.hasClass("liveList")) {//陽上
                     //抓未往生的人出來
                     //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 => {
@@ -649,34 +692,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 => {
@@ -698,7 +741,7 @@
             async addNewItem() {
                 let self = this;
                 let target = $(self.selectedElement).children().first();
- 
+
                 //let fam = self.familyMembers.find(x => x.fam_name == target.text());
                 if (target.hasClass("liveList")) {
                     self.alive.push($("#custom_txt").val());
@@ -761,7 +804,7 @@
                         option_break: false
                     }
                     self.family_left_title.push(obj);
-                        //self.family_deceased_N_selected.push(obj);
+                    //self.family_deceased_N_selected.push(obj);
                     //}
                 } else if (target.hasClass("righttitle")) {
                     //if (self.rightProperTitle.length >= 1) {
@@ -769,36 +812,36 @@
                     //} else {
                     self.rightProperTitle.length = 0;
                     self.family_right_title.length = 0;
-                        self.rightProperTitle.push($("#custom_txt").val());
-                        let obj = {
-                            IsShuWen: false,
-                            deceased: false,
-                            fam_gender: "",
-                            fam_name: $("#custom_txt").val(),
-                            fam_file: "",
-                            nospace: true,
-                            num: 0,
-                            option_break: false
-                            }
+                    self.rightProperTitle.push($("#custom_txt").val());
+                    let obj = {
+                        IsShuWen: false,
+                        deceased: false,
+                        fam_gender: "",
+                        fam_name: $("#custom_txt").val(),
+                        fam_file: "",
+                        nospace: true,
+                        num: 0,
+                        option_break: false
+                    }
                     self.family_right_title.push(obj);
-                        //self.family_deceased_N_selected.push(obj);
+                    //self.family_deceased_N_selected.push(obj);
                     //}
                 } else if (target.hasClass("address")) {
-                 
-                        self.address=($("#custom_txt").val());
-                        let obj = {
-                            IsShuWen: false,
-                            deceased: false,
-                            fam_gender: "",
-                            fam_name: $("#custom_txt").val(),
-                            fam_file: "",
-                            nospace: true,
-                            num: 0,
-                            option_break: false
+
+                    self.address = ($("#custom_txt").val());
+                    let obj = {
+                        IsShuWen: false,
+                        deceased: false,
+                        fam_gender: "",
+                        fam_name: $("#custom_txt").val(),
+                        fam_file: "",
+                        nospace: true,
+                        num: 0,
+                        option_break: false
                     }
-                    self.family_address=self.address
-                        //self.family_deceased_N_selected.push(obj);
-                    
+                    self.family_address = self.address
+                    //self.family_deceased_N_selected.push(obj);
+
                 }
                 $("#custom_txt").val("");
                 self.renderItem($(self.selectedElement).children().first());
@@ -895,7 +938,7 @@
                             [self.family_deceased_N_selected[index - 1], self.family_deceased_N_selected[index]] =
                                 [self.family_deceased_N_selected[index], self.family_deceased_N_selected[index - 1]];
                         }
-                    } else if ($(self.selectedElement).children().first().hasClass("ancestor-wrapper") ) {
+                    } else if ($(self.selectedElement).children().first().hasClass("ancestor-wrapper")) {
                         let index = self.properTitle.indexOf(curr.text());
                         if (index == 0) {
 
@@ -912,7 +955,7 @@
 
                         } else {
                             [self.leftProperTitle[index - 1], self.leftProperTitle[index]] = [self.leftProperTitle[index], self.properTitle[index - 1]];
-                        
+
                         }
                     } else if ($(self.selectedElement).children().first().hasClass("righttitle")) {
                         let index = self.rightProperTitle.indexOf(curr.text());
@@ -920,7 +963,7 @@
 
                         } else {
                             [self.rightProperTitle[index - 1], self.rightProperTitle[index]] = [self.rightProperTitle[index], self.properTitle[index - 1]];
-                           
+
                         };
                     }
                     self.renderItem($(self.selectedElement).children().first());
@@ -930,7 +973,7 @@
                     let curr = $(e.currentTarget.parentElement).find(".selected").first();
                     if ($(self.selectedElement).children().first().hasClass("liveList")) {
                         let index = self.alive.indexOf(curr.text());
-                        if (index == self.alive.length-1) {
+                        if (index == self.alive.length - 1) {
 
                         } else {
                             [self.alive[index], self.alive[index + 1]] = [self.alive[index + 1], self.alive[index]];
@@ -940,7 +983,7 @@
                     } else if ($(self.selectedElement).children().first().hasClass("nameList") ||
                         $(self.selectedElement).children().first().hasClass("rosterList")) {
                         let index = self.properTitle.indexOf(curr.text());
-                        if (index == self.properTitle.length-1) {
+                        if (index == self.properTitle.length - 1) {
 
                         } else {
                             [self.properTitle[index], self.properTitle[index + 1]] = [self.properTitle[index + 1], self.properTitle[index]];
@@ -949,7 +992,7 @@
                         }
                     } else if ($(self.selectedElement).children().first().hasClass("ancestor-wrapper")) {
                         let index = self.properTitle.indexOf(curr.text());
-                        if (index == self.properTitle.length-1) {
+                        if (index == self.properTitle.length - 1) {
 
                         } else {
                             [self.properTitle[index], self.properTitle[index + 1]] = [self.properTitle[index + 1], self.properTitle[index]];
@@ -963,7 +1006,7 @@
                         if (index == 0) {
 
                         } else {
-                            [self.leftProperTitle[index], self.leftProperTitle[index+1]] = [self.leftProperTitle[index+1], self.properTitle[index]];
+                            [self.leftProperTitle[index], self.leftProperTitle[index + 1]] = [self.leftProperTitle[index + 1], self.properTitle[index]];
 
                         }
                     } else if ($(self.selectedElement).children().first().hasClass("righttitle")) {
@@ -971,7 +1014,7 @@
                         if (index == 0) {
 
                         } else {
-                            [self.rightProperTitle[index], self.rightProperTitle[index+1]] = [self.rightProperTitle[index+1], self.properTitle[index]];
+                            [self.rightProperTitle[index], self.rightProperTitle[index + 1]] = [self.rightProperTitle[index + 1], self.properTitle[index]];
 
                         };
                     }
@@ -1077,10 +1120,10 @@
                 return Number.parseFloat(val).toFixed(2);
             },
             renderNormal(mid, d) {
-                console.log("renderNormal:",d)
+                console.log("renderNormal:", d)
                 let self = this;
                 let txt = $(`<div class='${d.elementID}'>${mid}</div>`).css({
-                   "z-index": 9999, visibility: d.visibility,
+                    "z-index": 9999, visibility: d.visibility,
                     width: d.width, height: d.height
                 });
                 return txt;
@@ -1189,15 +1232,15 @@
                 if (bot.length) h.append(this.renderNameGroups(bot, el));
                 return h
             },
-            renderCombined(mid,d) {
+            renderCombined(mid, d) {
                 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>`;
-                  return html
+                          <span class="main-name" >${parts[0] || ''}</span>
+                          <span class="sub-text">${parts[1] || ''}</span>
+                      </div>`;
+                return html
             },
             renderNameGroups(items, el) {
                 let g = $(`<div class="rosterspan"></div>`).css({
@@ -1217,7 +1260,7 @@
                 return max > 5 ? Math.max(base * (5 / max), base * 0.6) : base;
             },
             scaleFontSize(txtContent, fontSize, elementWidth) {
-  
+
                 let font = this.getTextSize("講", parseInt(fontSize));
                 //自動判斷縮小字型的規則,要同時縮小間距
 
@@ -1267,37 +1310,59 @@
                 let allList = document.querySelector(".canselectItem").querySelectorAll("li"); //$(".canselectItem").querySelectorAll("li");
                 allList.forEach(x => {
                     let curr = $(x).children().eq(1);
-                    x.setAttribute("style","display:none")
+                    x.setAttribute("style", "display:none")
                     $(x).css("style", "display:none")
                     if (curr && curr.text().includes($("#filter_txt").val())) {
                         x.setAttribute("style", "display:")
                     } else {
-                       
+
                     }
                 });
             },
+            async saveFamily() {
+                let self = this;
+                if (this.follower_id == "") {
+                    console.log("follower_id:", this.follower_id);
+                    return false
+                }
+             
+                let pro_order_detail =
+                {
+                   // 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
+
+                }
+                this.modal.toggle();
+                //$(this.modal).toggle();
+                //$(this.modal).addClass("hide");
+                //console.log(pro_order_detail);
+                //console.log(this.modal);
+                //$(this.modal).hide();
+                axios
+                    .post('/api/tablet/saveFamily', pro_order_detail)
+                    .then(response => {
+                        console.log(response);
+                        if (response.status == 200 && response.result == "Y") {
+                            let data = response.data;
+                            this.familyMembers.push(data);
+
+                            alert("新增成功");
+                            self.modal.toggle();
+                        } else {
+
+                        }
+                    });
+            },
             async save() {
                 //console.log("tabletItem:", designer.tabletItem);
                 //拚牌位的內容
                 let self = this;
-                //let target = self.familyMembers.filter(x => self.alive.includes(x.fam_name));
-                //designer.family_deceased_Y_selected.length = 0;
-                //self.alive.forEach(x => {
-                //    let t = target.find(y => y.fam_name == x);
-                //    let obj = {
-                //        IsShuWen: false,
-                //        deceased: false,
-                //        fam_gender: "",
-                //        fam_name: t.fam_name,
-                //        fam_file: "",
-                //        nospace: true,
-                //        num: t.num,
-                //        option_break: false
-                //    }
-                //    designer.family_deceased_Y_selected.push(obj);
-                //});
-                //console.log(designer.family_deceased_Y_selected, designer.family_deceased_N_selected);
-
                 let tablet = {
                     mid_items: designer.family_deceased_N_selected,
                     left_items: designer.family_deceased_Y_selected,
@@ -1336,7 +1401,7 @@
                 await axios
                     .post('/api/order/SaveDetailData', pro_order_detail)
                     .then(response => {
- 
+
                         let tablet_data = {
                             mid_items: self.family_deceased_N_selected,
                             left_items: self.family_deceased_Y_selected,
@@ -1407,7 +1472,8 @@
                 designer.rightProperTitle = [];//右正名
                 designer.address = "";//地址
                 designer.alive = [];//陽上
-                designer.tabletType= "A";
+                designer.tabletType = "A";
+                designer.follower_id = "";
                 $(".printArea").empty();
                 $(".selectItem").empty();
                 $(".canselectItem").empty();
@@ -1430,6 +1496,8 @@
                 designer.family_deceased_Y_selected = [];
                 designer.family_deceased_N_selected = [];
                 designer.http_host = receivedData.host;
+                designer.follower_id = receivedData.follower_id;
+                console.log("123:",receivedData);
                 if (receivedData.tabletItem) {
                     //console.log('editor.html - updating tabletItem:', receivedData.tabletItem);
                     designer.tabletItem = receivedData.tabletItem;
@@ -1449,12 +1517,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);
-                            console.log("阿巫醫ㄟ喔:", data)
+                        
                             if (designer.item_type === 'B') {
                                 // B類型：超渡、超薦等
                                 designer.family_deceased_Y_selected = data.mid_items || [];