排版設定

web/App_Code/api/designerController.cs

@@ -76,6 +76,28 @@ public class designerController : ApiController
         //return Ok(data);
     }
 
+    [HttpPost]
+    [Route("api/tablet/saveFamily")]
+    public IHttpActionResult saveFamily([FromBody] family_members familyMember)
+    {
+        LogUtility log = new LogUtility();
+        _db.family_members.Add(familyMember);
+        _db.SaveChanges();
+        return Ok(new { result = "Y", data= familyMember });
+
+        //object[] obj = new StyleDataAccess().GetStyle("", "");
+        //if (obj[0].ToString() == "Y")
+        //{
+        //    return Ok(new { result = "Y", data = obj[2] });
+        //}
+        //else
+        //{
+        //    return Ok(new { result = "N", message = obj[1] });
+        //    //throw new HttpResponseException(HttpStatusCode.NotFound);
+        //}
+        //return Ok(data);
+    }
+
     [HttpPost]
     [Route("api/tablet/GetStyleData")]
     public IHttpActionResult GetStyleData([FromBody] dynamic data)

web/App_Data/PublishProfiles/FolderProfile.pubxml

@@ -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 />

web/admin/activity/item_reg.aspx

@@ -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',
+                                value_prop: 'num',
-                                  keys: [
+                                keys: [
-                                      { id: 'subject', title: '項目名稱', value: '' },
+                                    { id: 'subject', title: '項目名稱', value: '' },
-                                      { id: 'kindTxt', title: '項目分類' },
+                                    { id: 'kindTxt', title: '項目分類' },
-                                  ],
+                                ],
-                                  api_url: HTTP_HOST + 'api/activity/GetItemList',
+                                api_url: HTTP_HOST + 'api/activity/GetItemList',
-                                  columns: [
+                                columns: [
-                                      { id: 'subject', title: '項目名稱', value: '' },
+                                    { id: 'subject', title: '項目名稱', value: '' },
-                                      { id: 'kindTxt', title: '項目分類' },
+                                    { id: 'kindTxt', title: '項目分類' },
-                                  ],
+                                ],
-                                  selected: {},
+                                selected: {},
-                                  select(item,t) {
+                                select(item, t) {
-                                      console.log("select search3", item, t);
+                                    console.log("select search3", item, t);
-                                      //debugger;
+                                    //debugger;
-                                      item.actItem.subject = t.subject
+                                    item.actItem.subject = t.subject
-                                      item.actItem.num = t.num 
+                                    item.actItem.num = t.num
-                                      item.item_num_selected={
+                                    item.item_num_selected = {
-                                          text: t.subject,
+                                        text: t.subject,
-                                          val : t.num
+                                        val: t.num
-                                      }
+                                    }
                                     //   item.bom_editedItem.actItem.subject = t.subject
                                     //   item.bom_editedItem.actItem.num = t.num 
 
@@ -100,8 +100,8 @@
                                     //       text : t.subject,
                                     //       val = t.num 
                                     //   }
-                                  }
+                                }
-                                  ////新增/修改+關閉時, 會清空/還原
+                                ////新增/修改+關閉時, 會清空/還原
                             },
 
                         },
@@ -245,8 +245,8 @@
                     });
                     //necessary parameter===
                     if (this.search_dialog.current.id == 'search1') {
-                        if (this.this_id=="")
+                        if (this.this_id == "")
-                        search['status'] = "Y";//啟用              
+                            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);
@@ -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);
@@ -445,7 +450,7 @@
                     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 =
                                 {
@@ -484,16 +489,16 @@
                     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();
                 },
@@ -513,7 +518,7 @@
                         this.bom_editedItem = -1;
                     }, 300)
                 },
-                bom_addNew(){
+                bom_addNew() {
                     this.spliceNullData();
 
                     //addObj.id = this.desserts.length + 1;
@@ -532,11 +537,11 @@
                     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 bom_detail =
@@ -566,13 +571,13 @@
                         }
                     }
                 },
-                selectChange(what) {
+                changeSel(selType) {
-                    if (what == "pageSize") {
+                    if (selType=="ddlPageSize") {
-                        document.getElementById('<%= pageSizeSel.ClientID %>').value = $("#pageSize").val();
+                        $("#<%= hidPageSize.ClientID %>").val($("#<%= ddlPageSize.ClientID %>").val())
-                    } else if (what == "printSize") {
+                    } else if (selType == "ddlPrintSize") {
-                        document.getElementById('<%= printSizeSel.ClientID %>').value = $("#printSize").val();
+                        $("#<%= hidPrintSize.ClientID %>").val($("#<%=ddlPrintSize.ClientID %>").val())
-                    } else if (what=="defaultStyle") {
+                    } else if (selType == "ddlDefaultStyle") {
-                        document.getElementById('<%= defaultStyleSel.ClientID %>').value = $("#defaultStyle").val();
+                        $("#<%= hidDefaultStyle.ClientID %>").val($("#<%= ddlDefaultStyle.ClientID %>").val())
                     }
                 }
             },
@@ -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')">
+                                 <select ID="ddlPageSize" runat="server" onchange="VueApp.changeSel('ddlPageSize')"></select>
-                                     <option value="">請選擇</option>
+                                 <asp:HiddenField ID="hidPageSize" runat="server" />
-                                 </select>
-                                   <asp:HiddenField ID="pageSizeSel" runat="server" Value="" />
-                                 <%--<asp:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%>
                              </div>    
                               <label class="col-sm-2 col-form-label">預設列印尺寸</label>
                             <div class="col-sm-4">
-                                 <select id="printSize" onchange="VueApp.selectChange('printSize')">
+                                <select ID="ddlPrintSize" runat="server"  onchange="VueApp.changeSel('ddlPrintSize')"></select>
-                                       <option value="">請選擇</option>
+                                 <asp:HiddenField ID="hidPrintSize" runat="server" />
-                                 </select>
-                                  <asp:HiddenField ID="printSizeSel" runat="server" Value="" />
-                            <%--    <asp:DropDownList ID="printSize" runat="server"></asp:DropDownList> --%>
                             </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')">
+                              <select ID="ddlDefaultStyle" runat="server"  onchange="VueApp.changeSel('ddlDefaultStyle')"></select>
-                                  <option value="">請選擇</option>
+                               <asp:HiddenField ID="hidDefaultStyle" runat="server" />
-                              </select>
-                                <asp:HiddenField ID="defaultStyleSel" runat="server" Value="" />
-                              <%--<asp:DropDownList ID="pageSize" runat="server"></asp:DropDownList> --%>
                           </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>

web/admin/activity/item_reg.aspx.cs

@@ -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);
+    //}
 }

web/admin/activity/reg.aspx

@@ -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>    

web/admin/item/TabletDesigner.aspx

@@ -101,14 +101,14 @@
                 </select>
                 <label for="printMode" style="color: black">列印模式</label>
             </div>
-             <div class="form-floating mb-3">
+ <%--            <div class="form-floating mb-3">
                  <input type="number" id="rosterLimit" onchange="Designer.changeRosterLimit()" class="form-control form-control-sm mb-2">
                  <label class="small" for="rosterLimit" style="color: black;">正名上限</label>
              </div>
             <div class="form-floating mb-3">
                 <input type="number" id="perpage" class="form-control form-control-sm mb-2">
                 <label class="small" for="perpage" style="color: black;">每頁列印筆數</label>
-            </div>
+            </div>--%>
             <div class="row">
                 <div class="col-6">
                     <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.saveStyle()">存檔</span>
@@ -135,7 +135,7 @@
                 <label class="small" for="inp-size">字體大小 (pt)</label>
             </div>
 
-            <div class="row ">
+           <%-- <div class="row ">
                 <div class="col-6">
                     <div class="form-floating mb-3">
                         <input type="number" id="2offset" class="form-control form-control-sm mb-2">
@@ -163,7 +163,7 @@
                         <label class="small" for="breakLen">斷行字數</label>
                     </div>
                 </div>
-            </div>
+            </div>--%>
 
             <div class="row">
                 <div class="col-6">
@@ -210,7 +210,19 @@
         </div>
     </div>
 
+    <div class="position-fixed top-50 start-50 p-3" style="z-index: 10001" >
+        <div id="liveToast" class="toast hide " role="alert" aria-live="assertive" 
+             data-bs-delay="3000" aria-atomic="true" 
+             style="color:white;background-color:dimgray;opacity:1;font-size:24px;">
+            <div class="toast-header">
+                <strong class="me-auto">提示訊息</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+            <div class="toast-body" id="toast_body">
                 
+            </div>
+        </div>
+    </div>
 
 </asp:Content>
 
@@ -235,6 +247,7 @@
             tabletElements: [
             ],
             orientation: "portrait",
+            toast:null,
             init() {
                 //$(".tablet-element").draggable({});
                 this.getPaperSize();
@@ -247,13 +260,17 @@
                     $("#backendInp").append("<option value='" + x.name + "'>" + x.name + "</option>")
                 });
                 $("#paperOrientation").html("<span>直向</span>")
+                this.toast = new bootstrap.Toast($('#liveToast'));
             },
             print() {
+                let self = this;
                 let s = this.allStyle.find(x => x.styleID == this.styleID)
                 let size = this.allSize.find(x => x.id = s.paperSize)
                 let w = window.open('', '_blank');
                 if (!w) {
-                    alert("請允許瀏覽器開啟彈出式視窗！");
+                
+                    $("#toast_body").html(`${"請允許瀏覽器開啟彈出式視窗！"}`)
+                    self.toast.show();
                     return;
                 }
 
@@ -345,15 +362,15 @@
                 }
 
 
-                 .ancestor-wrapper {
+                // .ancestor-wrapper {
-                    /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
+                //    /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
-                    writing-mode: horizontal-tb;
+                //    writing-mode: horizontal-tb;
-                    display: flex;
+                //    display: flex;
-                    flex-direction: column;
+                //    flex-direction: column;
-                    align-items: center; /* 水平置中 */
+                //    align-items: center; /* 水平置中 */
-                    justify-content: center;
+                //    justify-content: flex-start;
-                    width: fit-content;
+                //    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();
                             }
                         }
                     });

web/admin/item/css/tablet-design.css

@@ -232,7 +232,7 @@
     display: flex;
     flex-direction: column;
     align-items: center; /* 水平置中 */
-    justify-content: center;
+    justify-content: flex-start;
     width: fit-content;
 }
 

web/admin/order/reg.aspx

@@ -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,
@@ -547,10 +552,38 @@
 
                         // 關閉編輯對話框
                         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');
                     
@@ -2002,6 +2129,9 @@
                                   <v-icon title="編輯牌位" color="blue" class="mr-2" @click="editTablet(item);">
                                     mdi-file-document-edit-outline
                                   </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">

web/admin/print/print_multi_new.aspx

@@ -18,53 +18,90 @@
 </head>
 <body>
 
-        <span class="btn btn-primary no-print" onclick="Printer.print()">列印</span>
+    <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;">
-        <select id="paperSizeSel" onchange="Printer.render()">
+        <div class="container">
-            <!-- onchange="Printer.render()"-->
+            <div class="row">
-            <option value="">紙張尺寸</option>
+                <div class="col-12">
-        </select>
+                    <input type="radio" name="setup" id="indivualSetup" style="width: 30px; height: 30px;" checked="checked" />個別設定 
-        <div class="d-flex full-home no-print" style="height: auto;width:100%;">
+                <input type="radio" name="setup" id="allSetup" style="width: 30px; height: 30px;" />全域設定
-            <div id="printArea" class="printArea" style="width: auto; height: auto">
+                </div>
-
-                <%--   <div class="tablet-paper">
-         </div>--%>
-                <%-- </div>--%>
             </div>
-        </div>
+            <div class="row">
-
+                <div class="col-6">
-
+                    <div class="form-floating mb-3">
-        <div id="customMenu" style="display: none; position: absolute; background-color: #f9f9f9; border: 1px solid #ccc; padding: 10px; z-index: 1000; opacity: 1;">
+                        <input type="text" id="textX" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('X')" />
-            <div class="container">
+                        <label class="small" for="textX">X軸位置</label>
-                <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>
-                    <div class="col-6">
+                </div>
-                        <div class="form-floating mb-3">
+                <div class="col-6">
-                            <input type="text" id="textY" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
+                    <div class="form-floating mb-3">
-                            <label class="small" for="textY">Y軸位置</label>
+                        <input type="text" id="textY" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('Y')" />
-                        </div>
+                        <label class="small" for="textY">Y軸位置</label>
                     </div>
-                    <div class="col-6">
+                </div>
-                        <div class="form-floating mb-3">
+                <div class="col-6">
-                            <input type="text" id="fontSize" class="form-control form-control-sm mb-2" onchange="Printer.changeSize()" />
+                    <div class="form-floating mb-3">
-                            <label class="small" for="fontSize">字體大小</label>
+                        <input type="text" id="fontSize" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('fontSize')" />
-                        </div>
+                        <label class="small" for="fontSize">字體大小</label>
                     </div>
-                    <div class="col-6">
+                </div>
-                        <div class="form-floating mb-3">
+                <div class="col-6">
-                            <input type="text" id="textWidth" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
+                    <div class="form-floating mb-3">
-                            <label class="small" for="textWidth">文字寬度</label>
+                        <input type="text" id="textWidth" class="form-control form-control-sm mb-2" onchange="Printer.changeSetup('width')" />
-                        </div>
+                        <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>
@@ -82,14 +119,15 @@
         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,7 +135,7 @@
             { 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;
             //
@@ -105,15 +143,15 @@
                 this.getActItem(),
                 this.getPaperSize(),
             ]).then(() => {
-            Promise.all([
+                Promise.all([
                     this.getTabletElement(),
                     this.getTabletStyles(),
                     this.getAllStyleDetails(),
                     this.getData(),
 
-            ]).then(() => {
+                ]).then(() => {
-                this.render();
+                    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) {
@@ -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 ($("#paperSizeSel").val() == "") {
-                    if (this.pSize&&this.pSize!=undefined) {
+                if (this.pSize && this.pSize != undefined) {
-                        $("#paperSizeSel").val(this.pSize);
+                    $("#paperSizeSel").val(this.pSize);
-                    } else {
+                } else {
-                        $("#paperSizeSel").val("0003");
+                    $("#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);
+                let printSize = self.allSize.find(y => y.paperID == style.printSize);
-                if ((nowPageWidth + parseFloat(printSize.width)) > pageSize.width) {
+
+                //用長根寬算出一張紙可以印幾張
+                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,6 +313,9 @@
 
                 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 = [];
@@ -277,7 +328,21 @@
                         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);
@@ -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 {
+                    //.no-print, #customMenu {
-                        display: none !important;
+                    //    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;
+                    width: ${pageSize.width}mm;
-                    height: ${printSize.height}mm;
+                    height: ${pageSize.height}mm;
-                    justify-content: center;
                     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;
+                    /*break-after: page;
-                    page-break-after: always;
+                    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,44 +627,105 @@
                 //$(canvas).css("justify-content", "center");
                 $("#printArea").append(canvas);
             });
-            $(".tablet-element").draggable({
+            //$(".tablet-element").draggable({
-                start(e, ui) {
+            //    start(e, ui) {
-                    //console.log("gogogogo");
+            //        //console.log("gogogogo");
-                },
+            //    },
-                stop(e, ui) {
+            //    stop(e, ui) {
-                    //console.log(ui.position.left, ui.position.top);
+            //        //console.log(ui.position.left, ui.position.top);
-                }
+            //    }
-            });
+            //});
 
-            $(".tablet-element").on("click", function (e) {
+            //$(".tablet-element").on("click", function (e) {
-                e.preventDefault();
+            //    e.preventDefault();
-                self.selected = $(this);
+            //    self.selected = $(this);
-                let fontSize = $(this).css("fontSize");
+            //    let fontSize = $(this).css("fontSize");
-                let fontFamily = $(this).css("fontFamily");
+            //    let fontFamily = $(this).css("fontFamily");
-                let left = $(this).css("left");
+            //    let left = $(this).css("left");
-                let top = $(this).css("top");
+            //    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);
+                }
+
             });
 
 
@@ -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,18 +765,67 @@
                 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;
@@ -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 (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
-             if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) {
+            if ((Math.ceil(txtContent.length / 2) * font.width) * 2 > parseFloat(elementWidth)) {
-                 let newfontSize = parseInt(fontSize) - 1;
+                let newfontSize = parseInt(fontSize) - 1;
-                 //console.log("newfontSize:",newfontSize)
+                if (newfontSize <= 10) {
-                 return this.scaleFontSize(txtContent, newfontSize,elementWidth);
+                    return newfontSize;
                 }
-             return fontSize;
+                //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) {
+        //if (!$("#customMenu").is(e.target) && $("#customMenu").has(e.target).length === 0) {
-            $("#customMenu").hide();
+        //    $("#customMenu").hide();
-        }
+        //}
     });
     $(() => Printer.init());
 </script>

web/admin/print/tablet_edit/editornew.html

@@ -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 - event origin:', event.origin);
-                    console.log('editor.html - parent origin:', window.parent.location.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 - origin check passed');
-                        console.log('editor.html - received data:', event.data);
+                        //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))

web/web.config

@@ -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="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.27;Initial Catalog=17168erp_c;User ID=sa;Password=linux@mssql1234;Encrypt=False;TrustServerCertificate=True;Connection Timeout=10;&quot;" />
+    <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用-->