左右正名可選可輸入

web/admin/item/TabletDesigner.aspx

@@ -101,14 +101,14 @@
                 </select>
                 <label for="printMode" style="color: black">列印模式</label>
             </div>
-             <div class="form-floating mb-3">
+ <%--            <div class="form-floating mb-3">
                  <input type="number" id="rosterLimit" onchange="Designer.changeRosterLimit()" class="form-control form-control-sm mb-2">
                  <label class="small" for="rosterLimit" style="color: black;">正名上限</label>
              </div>
             <div class="form-floating mb-3">
                 <input type="number" id="perpage" class="form-control form-control-sm mb-2">
                 <label class="small" for="perpage" style="color: black;">每頁列印筆數</label>
-            </div>
+            </div>--%>
             <div class="row">
                 <div class="col-6">
                     <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.saveStyle()">存檔</span>
@@ -135,7 +135,7 @@
                 <label class="small" for="inp-size">字體大小 (pt)</label>
             </div>
 
-            <div class="row ">
+           <%-- <div class="row ">
                 <div class="col-6">
                     <div class="form-floating mb-3">
                         <input type="number" id="2offset" class="form-control form-control-sm mb-2">
@@ -163,7 +163,7 @@
                         <label class="small" for="breakLen">斷行字數</label>
                     </div>
                 </div>
-            </div>
+            </div>--%>
 
             <div class="row">
                 <div class="col-6">
@@ -210,7 +210,19 @@
         </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">
+                <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>
 
 </asp:Content>
 
@@ -235,6 +247,7 @@
             tabletElements: [
             ],
             orientation: "portrait",
+            toast:null,
             init() {
                 //$(".tablet-element").draggable({});
                 this.getPaperSize();
@@ -247,13 +260,17 @@
                     $("#backendInp").append("<option value='" + x.name + "'>" + x.name + "</option>")
                 });
                 $("#paperOrientation").html("<span>直向</span>")
+                this.toast = new bootstrap.Toast($('#liveToast'));
             },
             print() {
+                let self = this;
                 let s = this.allStyle.find(x => x.styleID == this.styleID)
                 let size = this.allSize.find(x => x.id = s.paperSize)
                 let w = window.open('', '_blank');
                 if (!w) {
-                    alert("請允許瀏覽器開啟彈出式視窗！");
+                
+                    $("#toast_body").html(`${"請允許瀏覽器開啟彈出式視窗！"}`)
+                    self.toast.show();
                     return;
                 }
 
@@ -586,7 +603,7 @@
                 if (paperSize == "newsize") {
                     $("#sizeDiv").attr("style", "display:");
                 } else {
-                    console.log("paperSize:", paperSize);
+                   // console.log("paperSize:", paperSize);
                     let size = this.allSize.find(x => x.id == paperSize)
                     $(".tablet-paper").css({
                         "background-color": "white",
@@ -607,7 +624,9 @@
                     .then(response => {
                         if (response.status == "200") {
                             if (response.data.result=="Y") {
-                                alert("ok");
+
+                                $("#toast_body").html(`${"ok"}`)
+                                self.toast.show();
                             }
                         }
                     });
@@ -1011,7 +1030,7 @@
                 })
             },
             async saveStyle() {
-
+                let self = this;
                 let detail = [
 
                 ];
@@ -1043,7 +1062,9 @@
                     .then(response => {
                         if (response.status == "200") {
                             if (response.data.result == "Y") {
-                                alert("ok");
+
+                                $("#toast_body").html(`${"ok！"}`)
+                                self.toast.show();
                             }
                         }
                     });

web/admin/print/tablet_edit/editorNewOne.html

@@ -309,6 +309,8 @@
                 //console.log("getData:", this.tabletItem)
                 this.printData.length = 0;
                 this.properTitle.length = 0
+                this.leftProperTitle.length = 0;
+                this.rightProperTitle.length = 0;
                 this.alive.length = 0;
                 //let list = localStorage.getItem("list")
                 let param = [];
@@ -465,12 +467,12 @@
                             if (ltitle.length == 0) {
                                 ltitle.push("請選擇")
                             }
-                            html = self.renderNormal(ltitle.join(""), d)
+                            html = self.renderNormalWithSpace(ltitle, d)
                         } else if (d.elementID === "righttitle") {
                             if (rtitle.length == 0) {
                                 rtitle.push("請選擇")
                             }
-                            html = self.renderNormal(rtitle.join(""), d)
+                            html = self.renderNormalWithSpace(rtitle, d)
                         } else if (d.elementID == "address") {
                             if (myAddress.length == 0) {
                                 myAddress.push("請選擇")
@@ -711,13 +713,43 @@
                              <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")) {//左正名
+                    self.leftProperTitle.forEach(x => {
+
+                    
                     $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                             <span class="selected">${self.leftProperTitle.join("")}</span>
+                             <span class="selected">${x}</span>
                              <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
+                    })
+                        let items = [];
+                    self.familyMembers.forEach(x => {
+                        if (self.tabletType == "A" && x.deceased == false) {
+                            items.push(x.fam_name);
+                        } else if (self.tabletType == "B" && x.deceased == true) {
+                            items.push(x.fam_name);
+                        }
+                    });
+                    let finalItem = items.filter(y => !self.leftProperTitle.includes(y))
+                    finalItem.forEach(yy => {
+                        $(".canselectItem").append(`<li><span  style="opacity:0.5">卍</span> <span class="unselect">${yy}</span><span class='itemAppend' style="float:right;cursor:pointer;">&#43;<span></li>`);
+                    });
                 } else if (element.hasClass("righttitle")) {//右正名
-                    $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
+                    self.rightProperTitle.forEach(x => {
-                             <span class="selected">${self.rightProperTitle.join("")}</span>
+                        $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                             <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
+                        <span class="selected">${x}</span>
+                        <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
+                    })
+                    let items = [];
+                    self.familyMembers.forEach(x => {
+                        if (self.tabletType == "A" && x.deceased == false) {
+                            items.push(x.fam_name);
+                        } else if (self.tabletType == "B" && x.deceased == true) {
+                            items.push(x.fam_name);
+                        }
+                    });
+                    let finalItem = items.filter(y => !self.rightProperTitle.includes(y))
+                    finalItem.forEach(yy => {
+                        $(".canselectItem").append(`<li><span  style="opacity:0.5">卍</span> <span class="unselect">${yy}</span><span class='itemAppend' style="float:right;cursor:pointer;">&#43;<span></li>`);
+                    });
                 } else {//其他都是正名
 
                     if (element.hasClass("ancestor-wrapper")) {//多姓氏合併，只允許用打的
@@ -901,6 +933,34 @@
                                 option_break: false
                             }
                             self.family_deceased_N_selected.push(obj);
+                        } else if ($(self.selectedElement).children().first().hasClass("lefttitle")) {
+                            self.leftProperTitle.push(target.fam_name);
+
+                            let obj = {
+                                IsShuWen: false,
+                                deceased: false,
+                                fam_gender: "",
+                                fam_name: target.fam_name,
+                                fam_file: "",
+                                nospace: true,
+                                num: target.num,
+                                option_break: false
+                            }
+                            self.family_left_title.push(obj);
+                        } else if ($(self.selectedElement).children().first().hasClass("righttitle")) {
+                            self.rightProperTitle.push(target.fam_name);
+
+                            let obj = {
+                                IsShuWen: false,
+                                deceased: false,
+                                fam_gender: "",
+                                fam_name: target.fam_name,
+                                fam_file: "",
+                                nospace: true,
+                                num: target.num,
+                                option_break: false
+                            }
+                            self.family_right_title.push(obj);
                         }
                     }
                     self.renderItem($(self.selectedElement).children().first())
@@ -971,7 +1031,8 @@
 
                         } else {
                             [self.leftProperTitle[index - 1], self.leftProperTitle[index]] = [self.leftProperTitle[index], self.properTitle[index - 1]];
-
+                            [self.family_left_title[index - 1], self.family_left_title[index]] =
+                                [self.family_left_title[index], self.family_left_title[index - 1]];
                         }
                     } else if ($(self.selectedElement).children().first().hasClass("righttitle")) {
                         let index = self.rightProperTitle.indexOf(curr.text());
@@ -979,7 +1040,8 @@
 
                         } else {
                             [self.rightProperTitle[index - 1], self.rightProperTitle[index]] = [self.rightProperTitle[index], self.properTitle[index - 1]];
-
+                            [self.family_right_title[index - 1], self.family_right_title[index]] =
+                                [self.family_right_title[index], self.family_right_title[index - 1]];
                         };
                     }
                     self.renderItem($(self.selectedElement).children().first());
@@ -1023,7 +1085,8 @@
 
                         } else {
                             [self.leftProperTitle[index], self.leftProperTitle[index + 1]] = [self.leftProperTitle[index + 1], self.properTitle[index]];
-
+                            [self.family_left_title[index], self.family_left_title[index + 1]] =
+                                [self.family_left_title[index + 1], self.family_left_title[index]];
                         }
                     } else if ($(self.selectedElement).children().first().hasClass("righttitle")) {
                         let index = self.rightProperTitle.indexOf(curr.text());
@@ -1031,7 +1094,8 @@
 
                         } else {
                             [self.rightProperTitle[index], self.rightProperTitle[index + 1]] = [self.rightProperTitle[index + 1], self.properTitle[index]];
-
+                            [self.family_right_title[index], self.family_right_title[index + 1]] =
+                                [self.family_right_title[index + 1], self.family_right_title[index]];
                         };
                     }
 
@@ -1068,14 +1132,14 @@
                         $(self.selectedElement).empty();
                         Object.assign(data, self.leftProperTitle);
                         let d = details.find(y => y.elementID == "lefttitle");
-                        let html = self.renderNormal(data, d);
+                        let html = self.renderNormalWithSpace(data, d);
                         //console.log("html:",html);
                         $(self.selectedElement).append(html);
                     } else if ($(self.selectedElement).children().first().hasClass("righttitle")) {
                         $(self.selectedElement).empty();
                         Object.assign(data, self.rightProperTitle);
                         let d = details.find(y => y.elementID == "righttitle");
-                        let html = self.renderNormal(data, d);
+                        let html = self.renderNormalWithSpace(data, d);
                         $(self.selectedElement).append(html);
                     } else if ($(self.selectedElement).children().first().hasClass("address")) {
                         $(self.selectedElement).empty();
@@ -1135,6 +1199,36 @@
             fix2(val) {
                 return Number.parseFloat(val).toFixed(2);
             },
+            renderNormalWithSpace(mid, d) {
+                //console.log("renderNormal:", d)
+                let self = this;
+                let txt = $(`<div class='${d.elementID}'></div>`).css({
+                    "z-index": 9999, visibility: d.visibility,
+                    width: d.width, height: d.height,
+                    padding: "1px",
+                    "writing-mode": "vertical rl",
+                    display: "flex",
+                    "flex-direction": "row",
+                    "flex-wrap": "wrap",
+                    margin: "auto",
+                    "letter-spacing": "0.1em",
+                    "column-gap": "1px",
+                    "row-gap": "1px",
+                    "align-items": "flex-start",
+                    "justify-content": "start",
+                });
+                console.log("吼優:",mid);
+                mid.forEach(x => {
+                    let dd = $(`<div>${x}</div>`).css({
+                        "margin-bottom": "10px",
+                        "margin-left": "5px",
+                        "text-justify": "inter-character",
+                        "white-space": "pre-line",
+                    });
+                    $(txt).append(dd);
+                });
+                return txt;
+            },
             renderNormal(mid, d) {
                 //console.log("renderNormal:", d)
                 let self = this;
@@ -1482,6 +1576,8 @@
                 designer.item = {};
                 designer.family_deceased_Y_selected = []; // 超渡/超薦/超冤名單
                 designer.family_deceased_N_selected = [];  // 消災/陽上名單
+                designer.family_left_title = [];
+                designer.family_right_title = [];
                 designer.allStyle = [];
                 designer.allStyleDetails = [];
                 designer.allSize = [];
@@ -1519,9 +1615,11 @@
                 const receivedData = e.data;
                 designer.family_deceased_Y_selected = [];
                 designer.family_deceased_N_selected = [];
+                designer.family_left_title = [];
+                designer.family_right_title = [];
                 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;