排版設定

左右正名可選可輸入
牌位報名與列印
2026-04-16 17:51:02 +08:00 · 2026-04-15 17:46:35 +08:00 · 2026-04-14 15:45:42 +08:00 · 2026-04-13 17:44:13 +08:00 · 2026-04-12 20:55:09 +08:00 · 2026-04-10 17:24:46 +08:00
12 changed files with 2723 additions and 301 deletions
@@ -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)
@@ -8,7 +8,7 @@
    <LastUsedPlatform>Any CPU</LastUsedPlatform>
    <LaunchSiteAfterPublish>true</LaunchSiteAfterPublish>
    <PublishProvider>FileSystem</PublishProvider>
-    <PublishUrl>D:\17168web</PublishUrl>
+    <PublishUrl>C:\17168web</PublishUrl>
    <WebPublishMethod>FileSystem</WebPublishMethod>
    <_TargetId>Folder</_TargetId>
    <SiteUrlToLaunchAfterPublish />
@@ -24,7 +24,7 @@
                return {
                    this_id: '<%= Request["num"] %>',
                    paperlist: [],
-                    stylelist:[],
+                    stylelist: [],
                    options: {},
                    optionsDetail: {
                        multiSort: false,
@@ -45,7 +45,7 @@
                                    { id: 'kind', title: '分類名稱' },
                                ],
                                selected: {},
-                                select(item,t) {
+                                select(item, t) {
                                    console.log("select search1", t);
                                }
                            },
@@ -62,7 +62,7 @@
                                    { id: 'subject', title: '文件名稱' },
                                ],
                                selected: {},
-                                select(item,t) {
+                                select(item, t) {
                                    console.log("select search2", t);

                                    item.files_num_selected.text = t.subject //=====?
@@ -73,26 +73,26 @@
                                id: 'search3',
                                title: '子項目',
                                text_prop: 'subject',
-                                  value_prop: 'num',
-                                  keys: [
-                                      { id: 'subject', title: '項目名稱', value: '' },
-                                      { id: 'kindTxt', title: '項目分類' },
-                                  ],
-                                  api_url: HTTP_HOST + 'api/activity/GetItemList',
-                                  columns: [
-                                      { id: 'subject', title: '項目名稱', value: '' },
-                                      { id: 'kindTxt', title: '項目分類' },
-                                  ],
-                                  selected: {},
-                                  select(item,t) {
-                                      console.log("select search3", item, t);
-                                      //debugger;
-                                      item.actItem.subject = t.subject
-                                      item.actItem.num = t.num 
-                                      item.item_num_selected={
-                                          text: t.subject,
-                                          val : t.num
-                                      }
+                                value_prop: 'num',
+                                keys: [
+                                    { id: 'subject', title: '項目名稱', value: '' },
+                                    { id: 'kindTxt', title: '項目分類' },
+                                ],
+                                api_url: HTTP_HOST + 'api/activity/GetItemList',
+                                columns: [
+                                    { id: 'subject', title: '項目名稱', value: '' },
+                                    { id: 'kindTxt', title: '項目分類' },
+                                ],
+                                selected: {},
+                                select(item, t) {
+                                    console.log("select search3", item, t);
+                                    //debugger;
+                                    item.actItem.subject = t.subject
+                                    item.actItem.num = t.num
+                                    item.item_num_selected = {
+                                        text: t.subject,
+                                        val: t.num
+                                    }
                                    //   item.bom_editedItem.actItem.subject = t.subject
                                    //   item.bom_editedItem.actItem.num = t.num 

@@ -100,11 +100,11 @@
                                    //       text : t.subject,
                                    //       val = t.num 
                                    //   }
-                                  }
-                                  ////新增/修改+關閉時, 會清空/還原
+                                }
+                                ////新增/修改+關閉時, 會清空/還原
                            },

-                        },                        
+                        },
                        show: false,
                        current: {},
                        list: [],
@@ -144,7 +144,7 @@
                    editedItem: {
                        id: 0,
                        num: 0,
-                        actItem_num: 0,                          
+                        actItem_num: 0,
                        files_num_selected: {
                            text: '',
                            val: 0
@@ -177,12 +177,12 @@
                        'items-per-page-options': []
                    },
                    bom_list: [],
-                    bom_count: 0, 
+                    bom_count: 0,
                    bom_editedIndex: -1,
                    bom_editedItem: {
                        id: 0,
                        num: 0,
-                        package_num: 0,                          
+                        package_num: 0,
                        //item_num: 0,                          
                        item_num_selected: {
                            text: '',
@@ -192,13 +192,13 @@
                    bom_defaultItem: {
                        id: 0,
                        num: 0,
-                        package_num: 0,                          
+                        package_num: 0,
                        //item_num: 0,                          
                        item_num_selected: {
                            text: '',
                            val: 0
                        },
-                    },                
+                    },
                }
            },
            mounted() {
@@ -245,8 +245,8 @@
                    });
                    //necessary parameter===
                    if (this.search_dialog.current.id == 'search1') {
-                        if (this.this_id=="")
-                        search['status'] = "Y";//啟用              
+                        if (this.this_id == "")
+                            search['status'] = "Y";//啟用              
                    }
                    console.log("search_get", api_url, search, params, this.options);
                    this.search_dialog.loading = true
@@ -294,7 +294,7 @@
                    target.children("input.search-text").val(curr.selected[curr.text_prop])//text
                    target.children("input:hidden").val(curr.selected[curr.value_prop])//value
                    if (curr.select instanceof Function) {
-                        curr.select(editem,row);
+                        curr.select(editem, row);
                    }
                    this.search_dialog.show = false;
                    //console.log(row, row["u_name"], row["f_number"], curr.id, target);
@@ -311,7 +311,7 @@
                            actItem_num: this.this_id,
                        }
                        axios
-                            .post(HTTP_HOST + 'api/activity/GetItemFiles', 
+                            .post(HTTP_HOST + 'api/activity/GetItemFiles',
                                searchItemDetail, { params: params })
                            .then(response => {
                                this.desserts = response.data.list
@@ -325,7 +325,7 @@
                            item_num: this.this_id,
                        }
                        axios
-                            .post(HTTP_HOST + 'api/activity/GetItemBomList', 
+                            .post(HTTP_HOST + 'api/activity/GetItemBomList',
                                searchItemBom, { params: params })
                            .then(response => {
                                this.bom_list = response.data.list
@@ -333,48 +333,53 @@
                            })
                            .catch(
                                error => console.log(error)
-                        )
-
-                        axios
-                            .post(HTTP_HOST + 'api/tablet/GetPaperSize', {})
-                            .then(response => {
-                                console.log(response);
-                                if (response.status == "200") {
-                                    let data = response.data;
-                                    if (data.result == "Y") {
-                                        data.data.forEach(x => {
-                                            this.paperlist.push({ name: x.paperName, id: x.paperID, width: x.width, height: x.height })
-                                            $("#pageSize").append(`<option value="${x.paperID}">${x.paperName}</option>`);
-                                            $("#printSize").append(`<option value="${x.paperID}">${x.paperName}</option>`);
-                                        });
-                                    }
-                                }
-                            })
-                            .catch(
-                                error => console.log(error)
-                        )
-
-                        axios
-                            .post(HTTP_HOST + 'api/tablet/GetStyleData', {})
-                            .then(response => {
-                                console.log(response);
-                                if (response.status == "200") {
-                                    let data = response.data;
-                                    if (data.result == "Y") {
-                                        data.data.forEach(x => {
-                                            if (x.styleID != "000001") { 
-                                            this.stylelist.push({ styleID: x.styleID, name: x.name })
-                                            $("#defaultStyle").append(`<option value="${x.styleID}">${x.name}</option>`);
-                                            }
-                                        });
-                                    }
-                                }
-                            })
-                            .catch(
-                                error => console.log(error)
                            )
                    }

+                    axios
+                        .post(HTTP_HOST + 'api/tablet/GetPaperSize', {})
+                        .then(response => {
+                            console.log(response);
+                            if (response.status == "200") {
+                                let data = response.data;
+                                if (data.result == "Y") {
+                                    data.data.forEach(x => {
+                                        this.paperlist.push({ name: x.paperName, id: x.paperID, width: x.width, height: x.height })
+                                        $('#<%= ddlPageSize.ClientID %>').append(`<option value="${x.paperID}">${x.paperName}</option>`);
+                                            $('#<%= ddlPrintSize.ClientID %>').append(`<option value="${x.paperID}">${x.paperName}</option>`);
+                                        });
+                                                          
+                                        $('#<%= ddlPageSize.ClientID %>').val($("#<%= hidPageSize.ClientID %>").val())
+                                        $('#<%= ddlPrintSize.ClientID %>').val($("#<%= hidPrintSize.ClientID %>").val())
+                                    }
+                                }
+                            })
+                        .catch(
+                            error => console.log(error)
+                        )
+
+                    axios
+                        .post(HTTP_HOST + 'api/tablet/GetStyleData', {})
+                        .then(response => {
+                            console.log(response);
+                            if (response.status == "200") {
+                                let data = response.data;
+                                if (data.result == "Y") {
+                                    data.data.forEach(x => {
+                                        if (x.styleID != "000001") {
+                                            this.stylelist.push({ styleID: x.styleID, name: x.name })
+                                            $('#<%= ddlDefaultStyle.ClientID %>').append(`<option value="${x.styleID}">${x.name}</option>`);
+                                                 //$("#defaultStyle").append(`<option value="${x.styleID}">${x.name}</option>`);
+                                             }
+                                         });
+                                         $('#<%= ddlDefaultStyle.ClientID %>').val($("#<%= hidDefaultStyle.ClientID %>").val())
+                                     }
+                                 }
+                             })
+                        .catch(
+                            error => console.log(error)
+                        )
+
                },
                editItem(item) {
                    this.editedIndex = this.desserts.indexOf(item);
@@ -401,7 +406,7 @@
                    }
                },
                cancel() {
-                    
+
                    this.spliceNullData();
                    this.close();
                },
@@ -424,7 +429,7 @@
                    }, 300)
                },
                addNew() {
-                    
+
                    this.spliceNullData();

                    //addObj.id = this.desserts.length + 1;
@@ -440,12 +445,12 @@
                    addObj.id = (isFinite(_c) ? _c : 0) + 1;
                    this.desserts.unshift(addObj);
                    this.editItem(addObj);
-                },               
+                },
                save() {
                    if (this.editedIndex > -1) {
                        if (this.this_id != '') {
                            //chcck necessary params
-                            if (this.editedItem.files_num_selected.val != 0 ) {
+                            if (this.editedItem.files_num_selected.val != 0) {
                                //insert or update data
                                var pro_order_detail =
                                {
@@ -475,27 +480,27 @@
                        }

                    }
-                }, 
-                titleword() {                      
-                    var e = document.getElementById("<%= category.ClientID%>");                      
+                },
+                titleword() {
+                    var e = document.getElementById("<%= category.ClientID%>");
                    const strUser = e.options[e.selectedIndex].text;

                    const _kind_txt = $('#<%= kind_txt.ClientID%>').val();
                    const _subject = $('#<%= subject.ClientID%>').val();
                    return "（" + strUser + "）" + " " + _kind_txt + " " + _subject;
                },
-                bom_editItem(item){
+                bom_editItem(item) {
                    this.bom_editedIndex = this.bom_list.indexOf(item);
                    this.bom_editedItem = $.extend(true, {}, item);
                    console.log("bom_editItem:", this.bom_editedIndex, this.bom_editedItem);
                    //debugger;
                },
-                bom_deleteItem(item){
+                bom_deleteItem(item) {
                    confirm('確定要刪除此筆資料嗎?') && this.bom_list.splice(index, 1);
                },
-                bom_cancel(){
+                bom_cancel() {
                    this.bom_spliceNullData();
-                    this.bom_close();                    
+                    this.bom_close();
                },
                bom_spliceNullData() {
                    //if new data ,then splice it
@@ -513,7 +518,7 @@
                        this.bom_editedItem = -1;
                    }, 300)
                },
-                bom_addNew(){
+                bom_addNew() {
                    this.spliceNullData();

                    //addObj.id = this.desserts.length + 1;
@@ -532,13 +537,13 @@
                    if (!!this.bom_list) this.bom_list?.unshift(addObj);
                    this.bom_editItem(addObj);
                },
-                bom_save(){
+                bom_save() {
                    if (this.bom_editedIndex > -1) {
                        if (this.this_id != '') {
                            //chcck necessary params
-                            if (this.bom_editedItem.item_num_selected.val != 0 ) {
+                            if (this.bom_editedItem.item_num_selected.val != 0) {
                                //insert or update data
-                                var package_num = $(".packageNum input[type=hidden]").val(); 
+                                var package_num = $(".packageNum input[type=hidden]").val();
                                var bom_detail =
                                {
                                    num: this.bom_editedItem.num,
@@ -566,13 +571,13 @@
                        }
                    }
                },
-                selectChange(what) {
-                    if (what == "pageSize") {
-                        document.getElementById('<%= pageSizeSel.ClientID %>').value = $("#pageSize").val();
-                    } else if (what == "printSize") {
-                        document.getElementById('<%= printSizeSel.ClientID %>').value = $("#printSize").val();
-                    } else if (what=="defaultStyle") {
-                        document.getElementById('<%= defaultStyleSel.ClientID %>').value = $("#defaultStyle").val();
+                changeSel(selType) {
+                    if (selType=="ddlPageSize") {
+                        $("#<%= hidPageSize.ClientID %>").val($("#<%= ddlPageSize.ClientID %>").val())
+                    } else if (selType == "ddlPrintSize") {
+                        $("#<%= hidPrintSize.ClientID %>").val($("#<%=ddlPrintSize.ClientID %>").val())
+                    } else if (selType == "ddlDefaultStyle") {
+                        $("#<%= hidDefaultStyle.ClientID %>").val($("#<%= ddlDefaultStyle.ClientID %>").val())
                    }
                }
            },
@@ -591,8 +596,8 @@
        function setCss() {
            $(".cyclePanel input").addClass("form-check-input");
        }
-            
-    
+
+
    </script>   
 </asp:Content>
 <asp:Content ID="Content3" ContentPlaceHolderID="page_nav" runat="Server">
@@ -678,33 +683,24 @@
                         <div class="row mb-1 label-sm-right">
                              <label class="col-sm-2 col-form-label">預設頁面尺寸</label>
                             <div class="col-sm-4">
-                                 <select id="pageSize" onchange="VueApp.selectChange('pageSize')">
-                                     <option value="">請選擇</option>
-                                 </select>
-                                   <asp:HiddenField ID="pageSizeSel" runat="server" Value="" />
-                                 <%--<asp:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%>
+                                 <select ID="ddlPageSize" runat="server" onchange="VueApp.changeSel('ddlPageSize')"></select>
+                                 <asp:HiddenField ID="hidPageSize" runat="server" />
                             </div>    
                              <label class="col-sm-2 col-form-label">預設列印尺寸</label>
                            <div class="col-sm-4">
-                                 <select id="printSize" onchange="VueApp.selectChange('printSize')">
-                                       <option value="">請選擇</option>
-                                 </select>
-                                  <asp:HiddenField ID="printSizeSel" runat="server" Value="" />
-                            <%--    <asp:DropDownList ID="printSize" runat="server"></asp:DropDownList> --%>
+                                <select ID="ddlPrintSize" runat="server"  onchange="VueApp.changeSel('ddlPrintSize')"></select>
+                                 <asp:HiddenField ID="hidPrintSize" runat="server" />
                            </div>    
                        </div>
                          <div class="row mb-1 label-sm-right">
                           <label class="col-sm-2 col-form-label">預設版型</label>
                          <div class="col-sm-4">
-                              <select id="defaultStyle" onchange="VueApp.selectChange('defaultStyle')">
-                                  <option value="">請選擇</option>
-                              </select>
-                                <asp:HiddenField ID="defaultStyleSel" runat="server" Value="" />
-                              <%--<asp:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%>
+                              <select ID="ddlDefaultStyle" runat="server"  onchange="VueApp.changeSel('ddlDefaultStyle')"></select>
+                               <asp:HiddenField ID="hidDefaultStyle" runat="server" />
                          </div>    
                 
                         </div>    
-                     </div>
+                  
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server" class="row mb-1 label-sm-right">
                            <ContentTemplate>
                                <label class="col-sm-2 col-form-label"></label>
@@ -44,6 +44,21 @@ public partial class admin_activity_item_reg : MyWeb.config
                    print_init.Text = prod.print_init;
                    PARTNO.Text = prod.partno;
                    //kind.SelectedValue = prod.kind.ToString();
+                    if (!isStrNull(prod.pageSize))
+                    {
+                        ddlPageSize.Value = prod.pageSize.ToString();
+                        hidPageSize.Value = prod.pageSize.ToString();
+                    }
+                    if (!isStrNull(prod.printSize))
+                    {
+                        ddlPrintSize.Value = prod.printSize.ToString();
+                        hidPrintSize.Value = prod.printSize.ToString();
+                    }
+                    if (!isStrNull(prod.defaultStyle))
+                    {
+                        ddlDefaultStyle.Value = prod.defaultStyle.ToString();
+                        hidDefaultStyle.Value = prod.defaultStyle.ToString();
+                    }
                    if (prod.kind.HasValue)
                    {
                        kind_txt.Value = prod.actItem_kind.kind;
@@ -121,17 +136,17 @@ public partial class admin_activity_item_reg : MyWeb.config
            actItem.subject = subject.Text;            
            actItem.print_init = print_init.Text;            
            actItem.partno = PARTNO.Text;
-            if (!isStrNull(pageSizeSel.Value))
+            if (!isStrNull(ddlPageSize.Value))
            {
-                actItem.pageSize =(pageSizeSel.Value);
+                actItem.pageSize = ddlPageSize.Value;
            }
-            if (!isStrNull(printSizeSel.Value))
+            if (!isStrNull(ddlPrintSize.Value))
            {
-                actItem.printSize = (printSizeSel.Value);
+                actItem.printSize = ddlPrintSize.Value;
            }
-            if (!isStrNull(defaultStyleSel.Value))
+            if (!isStrNull(ddlDefaultStyle.Value))
            {
-                actItem.defaultStyle = (defaultStyleSel.Value);
+                actItem.defaultStyle = (ddlDefaultStyle.Value);
            }
            //if (!isStrNull(kind.SelectedValue)) { actItem.kind = Val(kind.SelectedValue); } else { actItem.kind = null; }
            if (!isStrNull(category.SelectedValue)) { actItem.category = Val(category.SelectedValue); } else { actItem.category = null; }
@@ -180,17 +195,17 @@ public partial class admin_activity_item_reg : MyWeb.config
                actItem.subject = subject.Text;
                actItem.print_init = print_init.Text;
                actItem.partno = PARTNO.Text;
-                if (!isStrNull(pageSizeSel.Value))
+                if (!isStrNull(hidPageSize.Value))
                {
-                    actItem.pageSize = (pageSizeSel.Value);
+                    actItem.pageSize = hidPageSize.Value;
                }
-                if (!isStrNull(printSizeSel.Value))
+                if (!isStrNull(hidPrintSize.Value))
                {
-                    actItem.printSize = (printSizeSel.Value);
+                    actItem.printSize = hidPrintSize.Value;
                }
-                if (!isStrNull(defaultStyleSel.Value))
+                if (!isStrNull(hidDefaultStyle.Value))
                {
-                    actItem.defaultStyle = (defaultStyleSel.Value);
+                    actItem.defaultStyle = (hidDefaultStyle.Value);
                }
                //if (!isStrNull(kind.SelectedValue)) { actItem.kind = Val(kind.SelectedValue); } else { actItem.kind = null; }
                if (!isStrNull(category.SelectedValue)) { actItem.category = Val(category.SelectedValue); } else { actItem.category = null; }
@@ -270,4 +285,16 @@ public partial class admin_activity_item_reg : MyWeb.config
            }
        }
    }
+
+    //protected override void Render(HtmlTextWriter writer)
+    //{
+    //    ClientScript.RegisterForEventValidation(
+    //        ddlDefaultStyle.UniqueID, "ddlDefaultStyle");
+    //    ClientScript.RegisterForEventValidation(
+    //      ddlPageSize.UniqueID, "ddlPageSize");
+    //    ClientScript.RegisterForEventValidation(
+    //      ddlPrintSize.UniqueID, "ddlPrintSize");
+
+    //    base.Render(writer);
+    //}
 }
@@ -590,7 +590,79 @@
                                  this.data_table.selected.push(this.data_table.editFilesItem[i])
                          }
                      }
-                  }, multiPrint() {
+                  },
+                  multiPrintNew() {
+                      var params = {
+                          item: this.thisItemSelected.val,
+                          file: this.thisFilesSelected.val,
+                          //list: this.data_table.selected.map(x => x.num)
+                      };
+
+                      var list = [];
+                      //list = this.data_table.selected.map(x => x.num);
+
+                      list = this.data_table.selected
+                          .sort((a, b) => (a.print_id == null ? "" : a.print_id).localeCompare(b.print_id == null ? "" : b.print_id))
+                          .map(x => x.num);
+
+                      //console.log("what:",list);
+
+                      if (list.length > 0) {
+                          // 記錄已列印
+                          let _url = HTTP_HOST + 'api/order/printMultiFileLog';
+                          axios.post(_url, list, { params: params })
+                              .then(response => {
+                                  for (let i = 0; i < this.data_table.selected.length; i++) {
+                                      for (let j = 0; i < this.data_table.editFilesItem.length; j++) {
+                                          if (this.data_table.selected[i].num == this.data_table.editFilesItem[j].num) {
+                                              this.data_table.editFilesItem[j].isPrinted = true;
+                                              break;
+                                          }
+                                      }
+                                  }
+                              })
+                              .catch(error => {
+                                  console.log(error)
+
+                              })
+                          // 送出列印
+                          _url = HTTP_HOST + 'admin/print/print_multi_new.aspx';
+                          var form = document.createElement("form");
+                          form.method = "POST";
+                          form.action = _url;
+                          form.target = "_blank"; // Open the result in a new tab
+
+                          // Helper function to add hidden fields
+                          const addHiddenField = (name, value) => {
+                              const hiddenField = document.createElement("input");
+                              hiddenField.type = "hidden";
+                              hiddenField.name = name;
+                              hiddenField.value = value;
+                              form.appendChild(hiddenField);
+                          };
+
+                          // Add form fields
+                          console.log(this.thisItemSelected.val, this.thisFilesSelected.val, JSON.stringify(list));
+                          addHiddenField("item", this.thisItemSelected.val);
+                          addHiddenField("file", this.thisFilesSelected.val);
+                          addHiddenField("list", JSON.stringify(list));
+                          addHiddenField("title", `${this.thisItemSelected.text} / ${this.thisFilesSelected.text}`);
+                          //console.log("底家:",this.data_table.selected);
+                          localStorage.setItem("item", this.thisItemSelected.val);
+                          localStorage.setItem("list", JSON.stringify(this.data_table.selected));
+
+                         
+
+                          document.body.appendChild(form); // Not entirely sure if this is necessary
+                          form.submit();
+                          document.body.removeChild(form);
+                      }
+                      else {
+                          this.snackbar.text = "未選擇列印項目";
+                          this.snackbar.show = true
+                      }
+                  },
+                  multiPrint() {
                      var params = {
                          item: this.thisItemSelected.val,
                          file: this.thisFilesSelected.val,
@@ -625,7 +697,7 @@

                                })
                            // 送出列印
-                            _url = HTTP_HOST + 'admin/print/print_multi_new.aspx';
+                            _url = HTTP_HOST + 'admin/print/print_multi.aspx';
                            var form = document.createElement("form");
                            form.method = "POST";
                            form.action = _url;
@@ -1205,6 +1277,12 @@
                                  @click="multiPrint">
                                  列印<v-icon dark>mdi-turn-right</v-icon>
                              </v-btn>
+                              <v-btn
+                                color="primary"
+                                class="ml-2 white--text"                             
+                                @click="multiPrintNew">
+                                列印(New)<v-icon dark>mdi-turn-right</v-icon>
+                            </v-btn>
                          </div>
                       </v-toolbar>
                       </template>    
@@ -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;
                }

@@ -345,15 +362,15 @@
                }


-                 .ancestor-wrapper {
-                    /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
-                    writing-mode: horizontal-tb;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center; /* 水平置中 */
-                    justify-content: center;
-                    width: fit-content;
-                }
+                // .ancestor-wrapper {
+                //    /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
+                //    writing-mode: horizontal-tb;
+                //    display: flex;
+                //    flex-direction: column;
+                //    align-items: center; /* 水平置中 */
+                //    justify-content: flex-start;
+                //    width: fit-content;
+                //}

                .main-name {
                    line-height: 1.2;
@@ -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();
                            }
                        }
                    });
@@ -690,7 +709,7 @@
                // 2. 正名合併置中
                else if (el.type === 'combined-center') {
                    const parts = el.text.split('\n');
-                    html = `<div class="ancestor-wrapper" >
+                    html = `<div class="ancestor-wrapper" style="width:${el.width}px !important;height:${el.height}px !important;" >
                                <span class="main-name" >${parts[0] || ''}</span>
                                <span class="sub-text">${parts[1] || ''}</span>
                            </div>`;
@@ -807,13 +826,6 @@
                        "justify-content": "start",
                        gap: "20px",
                    });
-                //h.append(
-                //    $(`<div class="name-group">${top.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`)
-                //)
-                //if (bot.length) h.append(`<div class="name-group">${bot.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`)
-                //h += `<div class="name-group">${top.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
-                ///if (bot.length) h += `<div class="name-group">${bot.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
-                //return h + `</div>`;
                h.append(this.renderNameGroups(top,el));
                if (bot.length) h.append(this.renderNameGroups(bot,el));
                return h
@@ -885,8 +897,8 @@
                else if (key === '2offset') el.twoOffset = parseFloat(val);
                else if (key === '3offset') el.threeOffset = parseFloat(val);
                else if (key === '4offset') el.fourOffset = parseFloat(val);
+                else if (key === 'height') el.height = parseFloat(val);
                else el[key] = val;
-                console.log("activeId:",this.activeId)
                if (el.type == "roster") {
                    const names = el.text.split('\n').filter(s => s.trim());

@@ -894,13 +906,18 @@
                        position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
                    }).html(this.renderRoster(names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit), el));
                } else if (el.type == "combined-center") {
+                    console.log("combined-center");
+
                    const parts = el.text.split('\n');
-                    html = `<div class="ancestor-wrapper" >
+                    html = `<div class="ancestor-wrapper" style='width:${el.width}px !important;height:${el.height}px !important' >
                                <span class="main-name" >${parts[0] || ''}</span>
                                <span class="sub-text">${parts[1] || ''}</span>
                            </div>`;
                    $(`.tablet-element[id="${this.activeId}"]`).css({
-                        position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
+                        position: "absolute", left: el.startX + "mm", top: el.startY + "mm",
+                        fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily,
+                        "z-index": 9999, visibility: el.style.isActive,
+                
                    }).html(html);
                } else if (this.activeId === "title1") {
                    let names = el.text.split('\n').filter(s => s.trim());
@@ -916,6 +933,24 @@
                    $(`.tablet-element[id="${this.activeId}"]`).css({
                        position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
                    }).html(html);
+                } else if (this.activeId==="righttitle") {
+                    $(`.tablet-element[id="${this.activeId}"]`).css({
+                        position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt',
+                        fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility,
+                        width:el.width,height:el.height
+                    }).text(el.text);
+                } else if (this.activeId === "lefttitle") {
+                    $(`.tablet-element[id="${this.activeId}"]`).css({
+                        position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt',
+                        fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility,
+                        width: el.width, height: el.height
+                    }).text(el.text);
+                } else if (this.activeId === "address") {
+                    $(`.tablet-element[id="${this.activeId}"]`).css({
+                        position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt',
+                        fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility,
+                        width: el.width, height: el.height
+                    }).text(el.text);
                } else {
                    $(`.tablet-element[id="${this.activeId}"]`).css({
                        position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
@@ -995,7 +1030,7 @@
                })
            },
            async saveStyle() {
-
+                let self = this;
                let detail = [

                ];
@@ -1027,7 +1062,9 @@
                    .then(response => {
                        if (response.status == "200") {
                            if (response.data.result == "Y") {
-                                alert("ok");
+
+                                $("#toast_body").html(`${"ok！"}`)
+                                self.toast.show();
                            }
                        }
                    });
@@ -232,7 +232,7 @@
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平置中 */
-    justify-content: center;
+    justify-content: flex-start;
    width: fit-content;
 }

@@ -11,9 +11,9 @@
    border-bottom: 1px solid #eee;
 }
 </style>
+
 </asp:Content>
 <asp:Content ID="Content4" ContentPlaceHolderID="footer_script" runat="Server">
-
    <script>
        Vue.filter('timeString', function (value, myFormat) {
            return value == null || value == "" ? "" : moment(value).format(myFormat || 'YYYY-MM-DD, HH:mm:ss');
@@ -464,6 +464,11 @@
                        initialized: false,
                        currentItem: {}
                    },
+                    tablet_edit_new: {
+                        show: false,
+                        initialized: false,
+                        currentItem: {}
+                    },
                    //收款註記
                    cash_dialog: {
                        show: false,
@@ -526,13 +531,13 @@
                window.addEventListener('message', async (event) => {
                    if (event.data.source === 'editor.btn.click') {
                        const receivedData = event.data.data;
-                        
+
                        // 更新編輯中的項目
                        //if (receivedData.tabletItem && this.editedIndex > -1) {
                        if (receivedData.tabletItem) {
                            // 將 tablet_data 轉換為 JSON 字串
                            //this.editedItem.f_num_tablet = JSON.stringify(receivedData.tablet_data);
-                            
+
                            // 確保其他必要欄位保持不變
                            const currentItem = this.desserts[this.editedIndex];
                            //currentItem.f_num_tablet = JSON.stringify(receivedData.tablet_data);
@@ -544,13 +549,41 @@
                            // 呼叫 save 方法
                            await this.save();
                        }
-                        
+
                        // 關閉編輯對話框
                        this.tablet_edit.show = false;
-                        
+                        this.tablet_edit_new.show = false;
+
                        // 顯示成功訊息
                        this.snackbar.text = '牌位資料已更新';
                        this.snackbar.show = true;
+                    } else if (event.data.source === 'editorNew.btn.click') {
+
+                        const receivedData = event.data.data;
+
+                        // 更新編輯中的項目
+                        //if (receivedData.tabletItem && this.editedIndex > -1) {
+                        if (receivedData.tabletItem) {
+                            // 將 tablet_data 轉換為 JSON 字串
+                            //this.editedItem.f_num_tablet = JSON.stringify(receivedData.tablet_data);
+
+                            // 確保其他必要欄位保持不變
+                            const currentItem = this.desserts[this.editedIndex];
+                            //currentItem.f_num_tablet = JSON.stringify(receivedData.tablet_data);
+                            this.editedItem = {
+                                ...currentItem,
+                                f_num_tablet: JSON.stringify(receivedData.tablet_data),
+                                style: receivedData.style
+                            };
+                            // 呼叫 save 方法
+                            await this.save();
+                        }
+                        this.tablet_edit_new.show = false;
+
+                        // 顯示成功訊息
+                        this.snackbar.text = '牌位資料已更新';
+                        this.snackbar.show = true;
+
                    }
                });
                
@@ -561,6 +594,13 @@
                        this.tablet_edit.initialized = true;
                    };
                }
+
+                const iframe1 = document.querySelector('iframe#tablet_edit_new_iframe');
+                if (iframe1) {
+                    iframe1.onload = () => {
+                        this.tablet_edit_new.initialized = true;
+                    };
+                }
            },
            watch: {
                options: {
@@ -572,6 +612,17 @@
                'tablet_edit.show': {
                    handler(newVal) {
                        if (!newVal && this._savedEditedItem) {
+                           // console.log("三小");
+                            this.editedItem = $.extend(true, {}, this._savedEditedItem);
+                            this._savedEditedItem = null;
+                        }
+                    }
+                },
+                'tablet_edit_new.show': {
+                    handler(newVal) {
+                        if (!newVal && this._savedEditedItem) {
+                            //console.log("不合理");
+                            //$("#tablet_edit_new_iframe").src = $("#tablet_edit_new_iframe").src;
                            this.editedItem = $.extend(true, {}, this._savedEditedItem);
                            this._savedEditedItem = null;
                        }
@@ -819,6 +870,34 @@
                    this.editedItem = $.extend(true, {}, item);
                    this.file_dialog.show = true;
                },
+                async editTabletNew(item) {
+                    this.editedIndex = this.desserts.indexOf(item);
+                    this.editedItem = $.extend(true, {}, item);
+
+                    try {
+                        //document.getElementById("tablet_edit_new_iframe").contentWindow.location.reload();
+                        // 如果是新項目，先保存
+                        if (this.editedItem.num <= 0 || this.editedItem.num === null || this.editedItem.num === undefined) {
+                            this.editedItem.qty = 1;
+                            const savedItem = await this.save(false);
+                            if (savedItem) {
+                                this.$set(this.desserts, this.editedIndex, savedItem);
+                                this.editedItem = $.extend(true, {}, savedItem);
+                            }
+                        }
+                        // 先發送消息
+                        await this.sendMessageToIframeNew();
+                        // 保存當前的 editedItem 數據
+                        const currentData = $.extend(true, {}, this.editedItem);
+                        // 顯示對話框
+                        
+                        this.tablet_edit_new.show = true;
+                        // 立即恢復數據
+                        this.editedItem = $.extend(true, {}, currentData);
+                    } catch (error) {
+                        console.error('Error in editTablet:', error);
+                    }
+                },
                async editTablet(item) {
                    this.editedIndex = this.desserts.indexOf(item);
                    this.editedItem = $.extend(true, {}, item);
@@ -845,6 +924,54 @@
                        console.error('Error in editTablet:', error);
                    }
                },
+                async sendMessageToIframeNew() {
+                    const iframe = document.querySelector('iframe#tablet_edit_new_iframe');
+
+                    // 在這裡深度複製 editedItem，確保數據不會被修改
+                    const itemToSend = $.extend(true, {}, this.editedItem);
+
+                    if (iframe) {
+                        try {
+                            // 準備要發送的數據
+                            let familyMembers = [];
+
+                            try {
+                                // 嘗試獲取家族成員數據
+                                const response = await axios.get(HTTP_HOST + 'api/familymembers/follower/' + this.follower_id);
+                                familyMembers = response.data;
+                            } catch (error) {
+                                console.warn('error:', error);
+                            }
+
+                            // 準備發送的數據
+                            const itemInfo = {
+                                source: 'order.btn.click',
+                                tabletItem: {
+                                    ...itemToSend,
+                                    title: this.titleword() // 確保標題被包含
+                                },
+                                familyMembers: familyMembers,
+                                host: HTTP_HOST,
+                                follower_id:this.follower_id
+                            };
+
+                            iframe.contentWindow.postMessage(itemInfo, '*');
+
+                            // 發送後確認數據完整性
+
+                            // 如果數據被清除，立即恢復
+                            if (!this.editedItem.num && itemToSend.num) {
+                                this.$nextTick(() => {
+                                    this.editedItem = $.extend(true, {}, itemToSend);
+                                });
+                            }
+                        } catch (error) {
+                            console.error('Error in sendMessageToIframe:', error);
+                        }
+                    } else {
+                        console.error('iframe not found');
+                    }
+                },
                async sendMessageToIframe() {
                    const iframe = document.querySelector('iframe#tablet_edit_iframe');
                    
@@ -2001,7 +2128,10 @@
                                  </v-icon>
                                  <v-icon title="編輯牌位" color="blue" class="mr-2" @click="editTablet(item);">
                                    mdi-file-document-edit-outline
-                                  </v-icon>                                  
+                                  </v-icon>     
+                                  <v-icon title="編輯牌位New" color="blue" class="mr-2" @click="editTabletNew(item);">
+                                    mdi-file-document-edit-outline
+                                  </v-icon>     
                                  <v-icon title="列印" color="blue" class="mr-2" @click="printItem(item);" v-if="canPrint || lists.length==0" >
                                    mdi-printer
                                  </v-icon>
@@ -2569,6 +2699,17 @@
               
            </v-card>
        </v-dialog>
+        <v-dialog v-model="tablet_edit_new.show" min-width="100vw" min-height="100vh" persistent eager :class="{'d-none': !tablet_edit_new.initialized}">
+            <v-card>
+                <v-card-title class="justify-space-between grey lighten-2">
+                    <span class="fs-6 text text-dark">編輯牌位 : {{editedItem.actitem_num_selected.text}} - {{editedItem.print_id}}</span>
+                    <v-btn icon @click="tablet_edit_new.show=false"><v-icon>mdi-close</v-icon></v-btn>
+                </v-card-title>
+                <v-card-text>
+                    <iframe id="tablet_edit_new_iframe" src="../print/tablet_edit/editorNewOne.html" style="width: 100%; height: 100%;min-height:100vh;min-width:100vw" frameborder="0"></iframe>
+                </v-card-text>
+            </v-card>
+        </v-dialog>
        <v-dialog v-model="tablet_edit.show" max-width="1000px" persistent eager :class="{'d-none': !tablet_edit.initialized}">
            <v-card>
                <v-card-title class="justify-space-between grey lighten-2">
@@ -17,54 +17,91 @@
    <%--<link href="~/admin/item/css/tablet-design.css" rel="stylesheet" />--%>
 </head>
 <body>
-   
-        <span class="btn btn-primary no-print" onclick="Printer.print()">列印</span>
-        <select id="paperSizeSel" onchange="Printer.render()">
-            <!-- onchange="Printer.render()"-->
-            <option value="">紙張尺寸</option>
-        </select>
-        <div class="d-flex full-home no-print" style="height: auto;width:100%;">
-            <div id="printArea" class="printArea" style="width: auto; height: auto">

-                <%--   <div class="tablet-paper">
-         </div>--%>
-                <%-- </div>--%>
+    <div id="customMenu" style="top: 20px; right: 10mm; width: 20vw; height: 90vh; position: fixed; background-color: #f0f0f0; border: 1px solid #ccc; padding: 10px; z-index: 1000; opacity: 1;">
+        <div class="container">
+            <div class="row">
+                <div class="col-12">
+                    <input type="radio" name="setup" id="indivualSetup" style="width: 30px; height: 30px;" checked="checked" />個別設定 
+                <input type="radio" name="setup" id="allSetup" style="width: 30px; height: 30px;" />全域設定
+                </div>
            </div>
-        </div>
-
-
-        <div id="customMenu" style="display: none; position: absolute; background-color: #f9f9f9; border: 1px solid #ccc; padding: 10px; z-index: 1000; opacity: 1;">
-            <div class="container">
-                <div class="row">
-                    <div class="col-6">
-                        <div class="form-floating mb-3">
-                            <input type="text" id="textX" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
-                            <label class="small" for="textX">X軸位置</label>
-                        </div>
+            <div class="row">
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="text" id="textX" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('X')" />
+                        <label class="small" for="textX">X軸位置</label>
                    </div>
-                    <div class="col-6">
-                        <div class="form-floating mb-3">
-                            <input type="text" id="textY" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
-                            <label class="small" for="textY">Y軸位置</label>
-                        </div>
+                </div>
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="text" id="textY" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('Y')" />
+                        <label class="small" for="textY">Y軸位置</label>
                    </div>
-                    <div class="col-6">
-                        <div class="form-floating mb-3">
-                            <input type="text" id="fontSize" class="form-control form-control-sm mb-2" onchange="Printer.changeSize()" />
-                            <label class="small" for="fontSize">字體大小</label>
-                        </div>
+                </div>
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="text" id="fontSize" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('fontSize')" />
+                        <label class="small" for="fontSize">字體大小</label>
                    </div>
-                    <div class="col-6">
-                        <div class="form-floating mb-3">
-                            <input type="text" id="textWidth" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
-                            <label class="small" for="textWidth">文字寬度</label>
-                        </div>
+                </div>
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="text" id="textWidth" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('width')" />
+                        <label class="small" for="textWidth">物件寬度</label>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="text" id="textHeight" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('height')" />
+                        <label class="small" for="textHeight">物件高度</label>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="text" id="textBreakCount" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
+                        <label class="small" for="textBreakCount">文字斷行(依字數)</label>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="text" id="textBreakWord" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
+                        <label class="small" for="textBreakWord">文字斷行(依文字)</label>
                    </div>
                </div>
            </div>
        </div>
-     <form id="form1" runat="server">
+    </div>
+
+    <span class="btn btn-primary no-print" onclick="Printer.print()">列印</span>
+    <select id="paperSizeSel" onchange="Printer.render()">
+        <!-- onchange="Printer.render()"-->
+        <option value="">紙張尺寸</option>
+    </select>
+    <div class="d-flex full-home no-print" style="height: auto; width: 100%;">
+        <div id="printArea" class="printArea" style="width: auto; height: auto">
+
+            <%--   <div class="tablet-paper">
+         </div>--%>
+            <%-- </div>--%>
+        </div>
+    </div>
+
+
+    <form id="form1" runat="server">
    </form>
+    <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>
 </body>
 <script src="<%=ResolveUrl("~/js/bootstrap5/js/bootstrap.bundle.min.js")%>"></script>
 <script src="<%=ResolveUrl("~/js/jquery-4.0.0.min.js")%>"></script>
@@ -77,19 +114,20 @@
 <script src="<%=ResolveUrl("~/admin/item/jquery-ui/jquery-ui.min.js")%>"></script>
 <script>
    // 建立 MutationObserver 實例，並傳入 callback 函式
-    
+
    const Printer = {
        selected: null,
        http_host: "",
        pageStyle: "",
-        pSize:"",
+        pSize: "",
        allStyle: [],
        allSize: [],
        allStyleDetails: [],
        printData: [],
        tabletElement: [],
        observer: null,
-        isInit:true,
+        isInit: true,
+        toast: null,
        bg: [
            { name: "黃1", path: "../../admin/print/html/tablet-1_new.svg" },
            { name: "黃2", path: "../../admin/print/html/tablet-1B_new.svg" },
@@ -97,23 +135,23 @@
            { name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
        ],
        async init() {
-        
+            this.toast = new bootstrap.Toast($('#liveToast'));
            let HTTP_HOST = "<%=UrlHost()%>";
            this.http_host = HTTP_HOST;
            //
            Promise.all([
                this.getActItem(),
                this.getPaperSize(),
-            ]).then(() => { 
-            Promise.all([
+            ]).then(() => {
+                Promise.all([
                    this.getTabletElement(),
                    this.getTabletStyles(),
                    this.getAllStyleDetails(),
                    this.getData(),
-                
-            ]).then(() => {
-                this.render();
-            })
+
+                ]).then(() => {
+                    this.render();
+                })
            })
        },
        async getActItem() {
@@ -159,7 +197,7 @@
                        this.allSize = data.data;
                        //console.log(this.allSize);
                        if (this.allSize) {
-                             this.allSize.forEach(x => {
+                            this.allSize.forEach(x => {
                                $("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`);
                            })
                            //if (this.printSize) {
@@ -207,7 +245,7 @@

                    if (response.status == 200) {
                        this.printData = response.data;
-                       
+
                        //this.render();
                        //this.print();
                    }
@@ -223,19 +261,29 @@
            let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
            let nowPageWidth = 0;
            let tabletpaper;
-            this.printData.forEach(x => {
-                        if ($("#paperSizeSel").val() == "") {
-                    if (this.pSize&&this.pSize!=undefined) {
-                        $("#paperSizeSel").val(this.pSize);
-                    } else {
-                        $("#paperSizeSel").val("0003");
-                    }
+            //列印紙張的尺寸
+            if ($("#paperSizeSel").val() == "") {
+                if (this.pSize && this.pSize != undefined) {
+                    $("#paperSizeSel").val(this.pSize);
+                } else {
+                    $("#paperSizeSel").val("0001");
                }
+            }
+            let pageSize = self.allSize.find(y => y.paperID == $("#paperSizeSel").val());
+
+            this.printData.forEach(x => {
                let style = self.allStyle.find(y => y.styleID == x.style);
+                //用來印內容的尺寸
                let size = self.allSize.find(y => y.paperID == style.paperSize);
-                   let pageSize = self.allSize.find(y => y.paperID == $("#paperSizeSel").val());
-                let printSize = self.allSize.find(y => y.paperID ==style.printSize);
-                if ((nowPageWidth + parseFloat(printSize.width)) > pageSize.width) {
+                //包含空白用來折的尺寸
+                let printSize = self.allSize.find(y => y.paperID == style.printSize);
+
+                //用長根寬算出一張紙可以印幾張
+                let xCount = parseFloat(pageSize.width) / parseFloat(printSize.width);
+                let yCount = parseFloat(pageSize.height) / parseFloat(printSize.height);
+                let total = Math.floor(xCount) * Math.floor(yCount);
+                //if ((nowPageWidth + parseFloat(printSize.width)) > pageSize.width) {
+                if (nowPageWidth >= total) {
                    //$(canvas).css("width", printSize.width + "mm");
                    //$(canvas).css("height", printSize.height + "mm");
                    //$(canvas).css("justify-content", "center");
@@ -246,7 +294,7 @@
                    canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
                    nowPageWidth = 0;
                }
-                nowPageWidth = nowPageWidth + parseFloat(printSize.width);
+                nowPageWidth = nowPageWidth + 1; //parseFloat(printSize.width);
                tabletpaper = $(` <div class="tablet-paper">
                </div>`)
                let img = self.bg.find(y => y.name == style.backendImg);
@@ -265,7 +313,10 @@

                let mid_items = tablet.mid_items;
                let left_items = tablet.left_items;
-          
+                let mid_left = tablet.mid_left;
+                let mid_right = tablet.mid_right;
+                let addr_items = tablet.addr_items;
+
                let details = this.allStyleDetails.filter(y => y.styleID == x.style);
                let mid = [];
                mid_items.forEach(y => {
@@ -277,11 +328,25 @@
                        left.push(y.fam_name);
                    });
                }
+                let lefttitle = [];
+                if (mid_left) {
+                    mid_left.forEach(y => {
+                        lefttitle.push(y.fam_name);
+                    });
+                }
+                let righttitle = [];
+                if (mid_right) {
+                    mid_right.forEach(y => {
+                        righttitle.push(y.fam_name);
+                    });
+                }
+                let address = addr_items;

+                let ancestorFontSize = 16;
                details.forEach(d => {
                    if (d.isActive != "hidden") {
                        let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
-          
+
                        let html = "";
                        let alive = "";
                        let yang = "";
@@ -312,7 +377,7 @@
                                if (info.width >= d.textHeight) {
                                    height = d.height;
                                }
-                                let $span = $(`<span>${z}</span>`).css({
+                                let $span = $(`<span class="nameSpan">${z}</span>`).css({
                                    display: "block",
                                    "min-height": `${height}px`,
                                    "max-height": `${d.height}px`,
@@ -320,9 +385,10 @@
                                    //width: `${newFontSize}px`,
                                    "text-align": "justify",
                                    "text-align-last": "justify",
-                                    "margin-bottom": "40px",
+                                    "margin-bottom": "20px",
                                    "margin-left": "5px",
                                    "text-justify": "inter-character",
+                                    "white-space": "pre-line",
                                    //"justify-content":"center"
                                });
                                $namelist.append($span);
@@ -333,17 +399,35 @@
                            html = self.renderLiveList(left, d);

                            newFontSize = d.fontSize;
+                        } else if (d.elementID === "titletriangle") {
+                            html = self.renderRoster(mid, d)
+                        } else if (d.elementID === "combined") {
+                            ancestorFontSize = d.fontSize;
+                            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>`;
+                        } else if (d.elementID === "address") {
+                            html = self.renderNormal(address, d)
+                        } else if (d.elementID === "lefttitle") {
+                            html = self.renderNormal(lefttitle, d)
+                        }
+                        else if (d.elementID === "righttitle") {
+                            html = self.renderNormal(righttitle, d)
+                        }
+                        if (newFontSize < 10) {
+                            newFontSize = 10;
                        }
-
                        let content = $(`<div class="tablet-element vertical-text "></div>`)
                            .css({
                                position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'px',
                                fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
-                                "align-items":"center"
-                                
+                                "align-items": "center"
+
                            })
                            .html(html);
-                            tabletpaper.append(content);
+                        tabletpaper.append(content);
                        html = "";
                        alive = "";
                        yang = "";
@@ -352,6 +436,9 @@

                })

+                //console.log("xCount:", Math.floor( xCount));
+                let xFloor = Math.floor(xCount);
+
                self.pageStyle = `<style id="pageStyle">
                {
                    -webkit-print-color-adjust: exact !important;
@@ -363,6 +450,10 @@
                    -webkit-writing-mode: vertical-rl !important;
                    text-orientation: mixed !important;
                }
+                body{
+                    overflow: visible !important;
+                }
+
                @media print{
                    :host {
                        width:auto !important;
@@ -372,7 +463,7 @@
                        size:${pageSize.width}mm ${pageSize.height}mm   !important;
                        margin:0;
                    }
-                        html, body, form, .full-home, #printArea, .canvas-area {
+                    html, body, form, .full-home, #printArea, .canvas-area {
                        height: auto !important;
                        width: auto !important;
                        overflow: visible !important;  /*必須為 visible */
@@ -386,15 +477,23 @@


                    .canvas-area{
-                        display:flex !important;
+                        display:${xFloor > 1 ? 'block' : 'flex'} !important;
+                        grid-template-columns: repeat(${xFloor},1fr);
                        flex-direction: row !important;
+                        justify-content: ${xFloor > 1 ? 'start' : 'center'} !important;
+                        align-items:center !important;
+                         ${xFloor > 1 ? 'margin-left:20px !important' : ''};
+                         ${xFloor > 1 ? 'margin-right:20px !important' : ''};
+                         ${xFloor > 1 ? 'margin-top:-20px !important' : ''};
                    }
-                    .no-print, #customMenu {
-                        display: none !important;
-                    }
+                    //.no-print, #customMenu {
+                    //    display: none !important;
+                    //}
                    .tablet-paper {
                        position: relative !important;
-                        display: block !important;
+                        display: ${xFloor > 1 ? 'inline-block' : 'block'} !important;
+                        break-inline:avoid;
+                        page-break-inline:avoid;
                        break-after: page !important;
                        page-break-after: always !important;
                        margin: 0 !important;
@@ -461,7 +560,7 @@
                    display: flex;
                    flex-direction: column;
                    align-items: center; /* 水平置中 */
-                    justify-content: center;
+                    justify-content: felx-start;
                    width: fit-content;
                }

@@ -471,7 +570,7 @@
                }

                .sub-text {
-                    font-size: 0.6em; /* 縮小字體 */
+                    /*font-size: ${ancestorFontSize}px ;*//*0.8em;*/ /* 縮小字體 */
                    line-height: 1.2;
                    margin-top: 4px; /* 與上方林張的間距 */
                    white-space: normal; /* 避免自動換行 */
@@ -479,22 +578,31 @@
                }

                .canvas-area{
-                    width: ${printSize.width}mm;
-                    height: ${printSize.height}mm;
-                    justify-content: center;
+                    width: ${pageSize.width}mm;
+                    height: ${pageSize.height}mm;
                    break-after: page;
                    page-break-after: always;
+                    display:${xFloor > 1 ? 'block' : 'flex'} !important;
+                    grid-template-columns: repeat(${xFloor},1fr);
+                    ${xFloor > 1 ? 'margin-left:20px !important' : ''};
+                    ${xFloor > 1 ? 'margin-right:20px !important' : ''};
+                    /*align-items: center !important;
+                    justify-content: ${xFloor > 1 ? 'start' : 'center'} !important;*/
                }
+               
                .tablet-paper{
                    background-color: white;
+                    display: inline-block;
                    width: ${size.width}mm !important;
-                    height: ${ size.height }mm !important;
+                    height: ${size.height}mm !important;
                    position: relative;
                    margin-bottom: 0;
-                    background-image: url(${ img.path });
+                    background-image: url(${img.path});
                    background-size: 100% 100%;
-                    break-after: page;
-                    page-break-after: always;
+                    /*break-after: page;
+                    page-break-after: always;*/
+                    break-inline:avoid;
+                    page-break-inline:avoid;
                }
                .tablet-element {
                  cursor: move;
@@ -505,6 +613,10 @@
                }
                .tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
                .tablet-paper:last-child { page-break-after: auto; }
+
+                .tablet-element span{
+                    z-index: 999;
+                }
                </style>
                `
                $("#pageStyle").remove();
@@ -515,47 +627,108 @@
                //$(canvas).css("justify-content", "center");
                $("#printArea").append(canvas);
            });
-            $(".tablet-element").draggable({
-                start(e, ui) {
-                    //console.log("gogogogo");
-                },
-                stop(e, ui) {
-                    //console.log(ui.position.left, ui.position.top);
-                }
-            });
+            //$(".tablet-element").draggable({
+            //    start(e, ui) {
+            //        //console.log("gogogogo");
+            //    },
+            //    stop(e, ui) {
+            //        //console.log(ui.position.left, ui.position.top);
+            //    }
+            //});

-            $(".tablet-element").on("click", function (e) {
-                e.preventDefault();
-                self.selected = $(this);
-                let fontSize = $(this).css("fontSize");
-                let fontFamily = $(this).css("fontFamily");
-                let left = $(this).css("left");
-                let top = $(this).css("top");
-            });
+            //$(".tablet-element").on("click", function (e) {
+            //    e.preventDefault();
+            //    self.selected = $(this);
+            //    let fontSize = $(this).css("fontSize");
+            //    let fontFamily = $(this).css("fontFamily");
+            //    let left = $(this).css("left");
+            //    let top = $(this).css("top");
+            //});

            $(".tablet-element").on("contextmenu", function (e) {
                e.preventDefault();
                self.selected = $(this);
                let fontSize = $(this).css("font-size");
                let fontFamily = $(this).css("font-family");
-                console.log($(this).css("font-size"));
-                let textWidth = $(this).find("span").first().css("width");
+
+                let textWidth;//= $(this).css("width");//find("span").first().css("width");
+                let textHeight; //= $(this).css("height");
+                if ($(this).find(".nameList").first().hasClass("nameList")) {
+                    textWidth = $(this).find(".nameList").first().css("width");
+                    textHeight = $(this).find(".nameList").first().css("height");
+                } else if ($(this).find(".liveList").first().hasClass("liveList")) {
+                    textWidth = $(this).find(".liveList").first().css("width");
+                    textHeight = $(this).find(".liveList").first().css("height");
+                } else if ($(this).find(".rosterList").first().hasClass("rosterList")) {
+                    textWidth = $(this).find(".rosterList").first().css("width");
+                    textHeight = $(this).find(".rosterList").first().css("height");
+                } else if ($(this).find(".ancestor-wrapper").first().hasClass("ancestor-wrapper")) {
+                    textWidth = $(this).find(".ancestor-wrapper").first().css("width");
+                    textHeight = $(this).find(".ancestor-wrapper").first().css("height");
+                }
+
                let left = $(this).css("left");
                let top = $(this).css("top");
-                $("#customMenu").css({
-                    top: e.pageY + "px",
-                    left: (e.pageX + 30) + "px"
-                });
+
                left = left.replace("px", "");
                top = top.replace("px", "");
                $("#textX").val(self.fix2(left * 0.265));
                $("#textY").val(self.fix2(top * 0.265));
                $("#fontSize").val(fontSize);
                $("#textWidth").val(textWidth);
-                $("#customMenu").show();
+                $("#textHeight").val(textHeight);
+                $("#textX").prop("readonly", false);
+                $("#textY").prop("readonly", false);
+                $("#fontSize").prop("readonly", false);
+                $("#textWidth").prop("readonly", false);
+                $("#textHeight").prop("readonly", false);
+                $("#textBreakCount").prop("readonly", true);
+                $("#textBreakWord").prop("readonly", true);
            });

-            
+            $(".tablet-element span").on("click", function (e) {
+                e.preventDefault();
+                self.selected = $(this);
+                let fontSize = $(this).css("font-size");
+                let fontFamily = $(this).css("font-family");
+                let textWidth = $(this).css("max-width");
+                let textHeight = $(this).css("min-height");
+                if ($(this).hasClass("liveSpan")) {
+                    textWidth = $(this).css("width");
+                } else if ($(this).hasClass("main-name") || $(this).hasClass("sub-text")) {
+                    textWidth = "";
+                    textHeight = "";
+                }
+
+                let left = $(this).css("left");
+                let top = $(this).css("top");
+                left = left.replace("px", "");
+                top = top.replace("px", "");
+                $("#textX").val("");
+                $("#textY").val("");
+                $("#fontSize").val("");
+                $("#textWidth").val(textWidth);
+                $("#textHeight").val(textHeight);
+                let parentElement = this.parentElement;
+                if ($(parentElement).hasClass("nameList") || $(parentElement).hasClass("liveList") || $(parentElement).hasClass("rosterList")) {
+                    $("#textX").prop("readonly", true);
+                    $("#textY").prop("readonly", true);
+                    $("#fontSize").prop("readonly", true);
+                    $("#textBreakCount").prop("readonly", false);
+                    $("#textBreakWord").prop("readonly", false);
+                } else if ($(this).hasClass("main-name") || $(this).hasClass("sub-text")) {
+                    $("#textX").prop("readonly", true);
+                    $("#textY").prop("readonly", true);
+                    $("#fontSize").prop("readonly", true);
+                    $("#textBreakCount").prop("readonly", true);
+                    $("#textBreakWord").prop("readonly", true);
+                    $("#textWidth").prop("readonly", true);
+                    $("#textHeight").prop("readonly", true);
+                }
+
+            });
+
+
        },
        fix2(val) {
            return Number.parseFloat(val).toFixed(2);
@@ -584,7 +757,7 @@
            return $namelist;
        },
        renderLiveSpan(name, el) {
-            return $(`<span>${name}</span>`).css({
+            return $(`<span class="liveSpan">${name}</span>`).css({
                display: "block",
                "min-height": `${el.textHeight}px`,
                "max-height": `${el.height}px`,
@@ -592,23 +765,72 @@
                height: `${el.textHeight}px`,
                "text-align": "justify",
                "text-align-last": "justify",
-                "margin-bottom": "15px",
+                "margin-bottom": "10px",
                "text-justify": "inter-character",
+                "white-space": "pre-line"
            });
        },
-        getTextInfo(text,font) {
+        // 品字佈局邏輯：一上二下
+        renderRoster(names, el) {
+            if (!names.length) return '';
+            const mid = names.length === 1 ? 1 : Math.floor(names.length / 2);
+            const top = names.slice(0, mid);
+            const bot = names.slice(mid);
+            const size = this.autoScale(names, el.fontSize);
+
+            let h = $(`<div class="rosterList"></div>`).css(
+                {
+                    width: el.width, height: el.height,
+                    "writing-mode": "vertical-rl", /* 直書 */
+                    display: "flex",
+                    "flex-direction": "row",     /* 上下分層 (Top / Bottom) */
+                    "align-items": "center",    /* 左右置中對齊 */
+                    "justify-content": "start",
+                    gap: "20px",
+                });
+            h.append(this.renderNameGroups(top, el));
+            if (bot.length) h.append(this.renderNameGroups(bot, el));
+            return h
+        },
+        renderNameGroups(items, el) {
+            let g = $(`<div class="rosterspan"></div>`).css({
+                "display": "flex",
+                "flex-direction": "column",
+                "justify-content": "center",
+                "height": el.textHeight,
+                "white-space": "pre-line"
+            })
+            items.forEach(x => {
+                g.append($(`<div class="" style="letter-spacing: 10px;">${x}</div>`))
+            })
+            return g;
+        },
+        renderNormal(mid, d) {
+            //sconsole.log("renderNormal:", d)
+            let self = this;
+            let txt = $(`<div class='${d.elementID}'>${mid}</div>`).css({
+                "z-index": 9999, visibility: d.visibility,
+                width: d.width, height: d.height
+            });
+            return txt;
+        },
+        autoScale(names, base) {
+            const max = Math.max(...names.map(n => n.length), 0);
+            return max > 5 ? Math.max(base * (5 / max), base * 0.6) : base;
+        },
+        getTextInfo(text, font) {
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");
            context.font = font;
            const metrics = context.measureText(text);
            return metrics
        },
-        getTextWidth(text,font) {
+        getTextWidth(text, font) {
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");
            context.font = font;
            const metrics = context.measureText(text);
-          
+
            return metrics;
        },
        getTextSize(txt, fontsize) {
@@ -626,24 +848,144 @@
            document.body.removeChild(span);
            return result;
        },
-         scaleFontSize(txtContent, fontSize,elementWidth) {
+        scaleFontSize(txtContent, fontSize, elementWidth) {

-             let font = this.getTextSize("講", parseInt(fontSize));
+            let font = this.getTextSize("講", parseInt(fontSize));
            //自動判斷縮小字型的規則,要同時縮小間距

-             //if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
-             if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) {
-                 let newfontSize = parseInt(fontSize) - 1;
-                 //console.log("newfontSize:",newfontSize)
-                 return this.scaleFontSize(txtContent, newfontSize,elementWidth);
-                }    
-             return fontSize;
+            //if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
+            if ((Math.ceil(txtContent.length / 2) * font.width) * 2 > parseFloat(elementWidth)) {
+                let newfontSize = parseInt(fontSize) - 1;
+                if (newfontSize <= 10) {
+                    return newfontSize;
+                }
+                //console.log("newfontSize:",newfontSize)
+                return this.scaleFontSize(txtContent, newfontSize, elementWidth);
+            }
+            return fontSize;
        },
        breakWord(txtContent, style, dStyle) {
            //自動判斷斷字
            //1. by 特定字 2.by長度

        },
+        async changeSetup(config) {
+
+            let classList = ["liveList", "nameList", "address", "ancestor-wrapper", "lefttitle", "righttitle", "rosterList"]
+            switch (config) {
+                case "X":
+                    if ($("#indivualSetup").prop("checked")) {
+                        $(this.selected).css("left", $("#textX").val() + "mm");
+                    } else if ($("#allSetup").prop("checked")) {
+                        classList.forEach(w => {
+                            if ($(this.selected.children()).first().hasClass(w)) {
+                                $(`.${w}`).parent().each((index, y) => {
+                                    $(y).css("left", $("#textX").val() + "mm")
+                                })
+                            }
+                        });
+                    }
+                    break;
+                case "Y":
+                    if ($("#indivualSetup").prop("checked")) {
+                        $(this.selected).css("top", $("#textY").val() + "mm");
+                    } else if ($("#allSetup").prop("checked")) {
+                        classList.forEach(w => {
+                            if ($(this.selected.children()).first().hasClass(w)) {
+                                $(`.${w}`).parent().each((index, y) => {
+                                    $(y).css("top", $("#textY").val() + "mm")
+                                })
+                            }
+                        });
+
+                    }
+                    break;
+                case "fontSize":
+                    if ($("#indivualSetup").prop("checked")) {
+                        $(this.selected).css("font-size", $("#fontSize").val())
+                    } else if ($("#allSetup").prop("checked")) {
+                        $("#toast_body").html("字體大小不可在全域中修改");
+                        this.toast.show();
+                    }
+                    break;
+                case "width":
+
+                    if ($("#indivualSetup").prop("checked")) {
+                        if (this.selected.find(".nameList").length >= 1) {
+                            $(this.selected.find(".nameList").first()).css("width", $("#textWidth").val())
+                        } else if (this.selected.find(".liveList").length >= 1) {
+                            this.selected.find(".liveList").first().css("width", $("#textWidth").val())
+                        } else if (this.selected.find(".rosterList").length >= 1) {
+                            this.selected.find(".rosterList").first().css("width", $("#textWidth").val())
+                        } else if (this.selected.hasClass("nameSpan")) {
+                            let spans = $(this.selected.parent().first()).find(".nameSpan");
+                            spans.each(function (index, x) {
+                                $(x).css("max-width", $("#textWidth").val());
+                            });
+                        } else if (this.selected.hasClass("liveSpan")) {
+                            let spans = $(this.selected.parent().first()).find(".liveSpan");
+                            spans.each(function (index, x) {
+                                $(x).css("width", $("#textWidth").val());
+                            });
+                        } else if (this.selected.hasClass("rosterSpan")) {
+                            let spans = $(this.selected.parent().first()).find(".rosterSpan");
+                            spans.each(function (index, x) {
+                                $(x).css("max-width", $("#textWidth").val());
+                            });
+                        }
+
+                    } else if ($("#allSetup").prop("checked")) {
+                        $("#toast_body").html("寬度不可在全域中修改");
+                        this.toast.show();
+                    }
+                    break;
+                case "height":
+                    if ($("#indivualSetup").prop("checked")) {
+                        if (this.selected.find(".nameList").length >= 1) {
+                            $(this.selected.find(".nameList").first()).css("height", $("#textHeight").val())
+                        } else if (this.selected.find(".liveList").length >= 1) {
+                            this.selected.find(".liveList").first().css("height", $("#textHeight").val())
+                        } else if (this.selected.find(".rosterList").length >= 1) {
+                            this.selected.find(".rosterList").first().css("height", $("#textHeight").val())
+                        } else if (this.selected.hasClass("nameSpan")) {
+                            let spans = $(this.selected.parent().first()).find(".nameSpan");
+                            spans.each(function (index, x) {
+                                $(x).css("min-height", $("#textHeight").val());
+                            });
+                        } else if (this.selected.hasClass("liveSpan")) {
+                            let spans = $(this.selected.parent().first()).find(".liveSpan");
+                            spans.each(function (index, x) {
+                                $(x).css("min-height", $("#textHeight").val());
+                                $(x).css("height", $("#textHeight").val());
+                            });
+                        } else if (this.selected.hasClass("rosterSpan")) {
+                            let spans = $(this.selected.parent().first()).find(".rosterSpan");
+                            spans.each(function (index, x) {
+                                $(x).css("min-height", $("#textHeight").val());
+                            });
+                        }
+
+                    } else if ($("#allSetup").prop("checked")) {
+                        $("#toast_body").html("高度不可在全域中修改");
+                        this.toast.show();
+                    }
+                    break;
+                case "breakCount":
+                    if ($("#indivualSetup").prop("checked")) {
+
+                    } else if ($("#allSetup").prop("checked")) {
+
+                    }
+                    break;
+                case "breakWord":
+                    if ($("#indivualSetup").prop("checked")) {
+
+                    } else if ($("#allSetup").prop("checked")) {
+
+                    }
+                    break;
+            }
+        },
        async changeLocation() {
            $(this.selected).css("left", $("#textX").val() + "mm");
            $(this.selected).css("top", $("#textY").val() + "mm");
@@ -723,9 +1065,9 @@
        },
    }
    $(document).click(function (e) {
-        if (!$("#customMenu").is(e.target) && $("#customMenu").has(e.target).length === 0) {
-            $("#customMenu").hide();
-        }
+        //if (!$("#customMenu").is(e.target) && $("#customMenu").has(e.target).length === 0) {
+        //    $("#customMenu").hide();
+        //}
    });
    $(() => Printer.init());
 </script>
@@ -403,7 +403,8 @@
                        style:""
                    },
                    actitem: "",
-                    pageSize:"",
+                    pageSize: "",
+                    defaultStyle:"",
                    isAllSelected: false,
                    dialog: false,
                    addDialog: false,        // 新增項目對話框
@@ -506,12 +507,12 @@
                window.addEventListener('message', (event) => {
                    this.isAllSelected = false;
                    console.log('editor.html - received message event');
-                    console.log('editor.html - event origin:', event.origin);
-                    console.log('editor.html - parent origin:', window.parent.location.origin);
+                    //console.log('editor.html - event origin:', event.origin);
+                    //console.log('editor.html - parent origin:', window.parent.location.origin);

                    if (event.origin === window.parent.location.origin) {
-                        console.log('editor.html - origin check passed');
-                        console.log('editor.html - received data:', event.data);
+                        //console.log('editor.html - origin check passed');
+                        //console.log('editor.html - received data:', event.data);
                        const receivedData = event.data;
                        this.family_deceased_Y_selected = [];
                        this.family_deceased_N_selected = [];
@@ -526,15 +527,16 @@
                            if (receivedData.tabletItem) {
                                this.tabletItem = receivedData.tabletItem;
                            }
+                            //console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
                            console.log("receivedData::",receivedData);
                            if (receivedData.tabletItem.style) {
                                this.selected.style = receivedData.tabletItem.style;
                            } else {
                                this.selected.style = "";
                            }
-
+                            //console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
                            this.actitem = receivedData.tabletItem.actitem_num_selected.val;
-                            console.log("actitem:",receivedData.tabletItem.actitem_num_selected.val);
+                            //console.log("actitem:",receivedData.tabletItem.actitem_num_selected.val);
                            // 處理 f_num_tablet 資料
                            if (this.tabletItem.f_num_tablet) {
                                try {
@@ -595,6 +597,9 @@
                            console.log(response);
                            if (response.data.result == "Y" && response.data.data) {
                                this.pageSize = response.data.data.pageSize;
+                                this.defaultStyle = response.data.data.defaultStyle;
+                                this.selected.style = response.data.data.defaultStyle;
+                                console.log("shit:",this.selected.style);
                                this.getStyle();
                            }
                        }
@@ -615,6 +620,7 @@
                                        }
                                    }
                                })
+
                            }
                        })
                        .catch(error => console.log(error))
@@ -46,8 +46,8 @@
  </appSettings>
  <connectionStrings>
    <!--SQL用-->
-    <add name="shopConn" providerName="System.Data.SqlClient" connectionString="Data Source=192.168.5.27;Initial Catalog=17168erp_c;User ID=sa;Password=linux@mssql1234;Encrypt=False;TrustServerCertificate=True;Provider=SQLOLEDB;Connection Timeout=10;" />
-    <add name="ezEntities" providerName="System.Data.EntityClient" connectionString="metadata=res://*/App_Code.Model.Model.csdl|res://*/App_Code.Model.Model.ssdl|res://*/App_Code.Model.Model.msl;provider=System.Data.SqlClient;provider connection string=&quot;Data Source=192.168.5.27;Initial Catalog=17168erp_c;User ID=sa;Password=linux@mssql1234;Encrypt=False;TrustServerCertificate=True;Connection Timeout=10;&quot;" />
+    <add name="shopConn" providerName="System.Data.SqlClient" connectionString="Data Source=192.168.5.20;Initial Catalog=17168erp_c;User ID=sa;Password=linux@mssql1234;Encrypt=False;TrustServerCertificate=True;Provider=SQLOLEDB;Connection Timeout=10;" />
+    <add name="ezEntities" providerName="System.Data.EntityClient" connectionString="metadata=res://*/App_Code.Model.Model.csdl|res://*/App_Code.Model.Model.ssdl|res://*/App_Code.Model.Model.msl;provider=System.Data.SqlClient;provider connection string=&quot;Data Source=192.168.5.20;Initial Catalog=17168erp_c;User ID=sa;Password=linux@mssql1234;Encrypt=False;TrustServerCertificate=True;Connection Timeout=10;&quot;" />
    <!-- 
    -->
    <!--SQL用-->
Author	SHA1	Message	Date
minom	3273072fb3	排版設定	2026-04-16 17:51:02 +08:00
minom	d9e651fe72	左右正名可選可輸入	2026-04-15 17:46:35 +08:00
minom	08b339e0cd	牌位報名與列印	2026-04-14 15:45:42 +08:00
minom	a81967ddbd	新增親友功能	2026-04-13 17:44:13 +08:00
minom	1afb90f3ba	新增親友	2026-04-12 20:55:09 +08:00
minom	21a3ec6198	still 牌位版面調整	2026-04-10 17:24:46 +08:00
minom	c5fc2469d7	1.報名牌位 2.牌位列印	2026-04-09 17:42:29 +08:00
minom	8fe243356e	牌位設定	2026-04-08 17:54:28 +08:00
minom	83a7c67439	增加一個新的報名牌位編輯功能	2026-04-07 18:04:08 +08:00
minom	36174834a8	牌位排版	2026-04-06 19:06:22 +08:00