排版

web/App_Code/Model/Model.cs

@@ -184,6 +184,9 @@ namespace Model
         public string partno { get; set; }
         public string print_init { get; set; }
         public string is_reconcile { get; set; }
+        public string pageSize { get; set; }
+        public string printSize { get; set; }
+        public string defaultStyle { get; set; }
     
         public virtual actItem_kind actItem_kind { get; set; }
         [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]

web/App_Code/Model/Model.edmx

@@ -91,6 +91,9 @@
           <Property Name="customize_data" Type="nvarchar(max)" />
           <Property Name="reg_time" Type="datetime" />
           <Property Name="is_reconcile" Type="nvarchar" MaxLength="1" />
+          <Property Name="pageSize" Type="varchar" MaxLength="50" />
+          <Property Name="printSize" Type="varchar" MaxLength="50" />
+          <Property Name="defaultStyle" Type="varchar" MaxLength="50" />
         </EntityType>
         <EntityType Name="actItem_files">
           <Key>
@@ -480,7 +483,7 @@
           <Property Name="country" Type="nvarchar" MaxLength="5" />
           <Property Name="appellation_id" Type="int" />
           <Property Name="follower_hash" Type="nvarchar" MaxLength="100" />
-          <Property Name="search_keywords" Type="nvarchar(max)" />
+          <Property Name="search_keywords" Type="varchar(max)" />
         </EntityType>
         <EntityType Name="followers_tablet">
           <Key>
@@ -981,7 +984,7 @@
           <Property Name="balance_act_item" Type="int" />
           <Property Name="balance_pro_order_detail" Type="int" />
         </EntityType>
-        <Association Name="FK__Ancestral__Regis__4DF47A4E">
+        <Association Name="FK__Ancestral__Regis__1A9EF37A">
           <End Role="AncestralTabletRegistrant" Type="Self.AncestralTabletRegistrant" Multiplicity="1" />
           <End Role="AncestralTabletPositionRecord" Type="Self.AncestralTabletPositionRecord" Multiplicity="*" />
           <ReferentialConstraint>
@@ -1129,18 +1132,6 @@
             </Dependent>
           </ReferentialConstraint>
         </Association>
-        <Association Name="FK_activity_activity_kind">
-          <End Role="activity_kind" Type="Self.activity_kind" Multiplicity="0..1" />
-          <End Role="activity" Type="Self.activity" Multiplicity="*" />
-          <ReferentialConstraint>
-            <Principal Role="activity_kind">
-              <PropertyRef Name="num" />
-            </Principal>
-            <Dependent Role="activity">
-              <PropertyRef Name="kind" />
-            </Dependent>
-          </ReferentialConstraint>
-        </Association>
         <Association Name="FK_activity_check_activity">
           <End Role="activity" Type="Self.activity" Multiplicity="0..1">
             <OnDelete Action="Cascade" />
@@ -2158,7 +2149,7 @@
           <EntitySet Name="supplier" EntityType="Self.supplier" Schema="dbo" store:Type="Tables" />
           <EntitySet Name="supplier_kind" EntityType="Self.supplier_kind" Schema="dbo" store:Type="Tables" />
           <EntitySet Name="transfer_register" EntityType="Self.transfer_register" Schema="dbo" store:Type="Tables" />
-          <AssociationSet Name="FK__Ancestral__Regis__4DF47A4E" Association="Self.FK__Ancestral__Regis__4DF47A4E">
+          <AssociationSet Name="FK__Ancestral__Regis__1A9EF37A" Association="Self.FK__Ancestral__Regis__1A9EF37A">
             <End Role="AncestralTabletRegistrant" EntitySet="AncestralTabletRegistrant" />
             <End Role="AncestralTabletPositionRecord" EntitySet="AncestralTabletPositionRecord" />
           </AssociationSet>
@@ -2206,10 +2197,6 @@
             <End Role="activity_category_kind" EntitySet="activity_category_kind" />
             <End Role="activity" EntitySet="activity" />
           </AssociationSet>
-          <AssociationSet Name="FK_activity_activity_kind" Association="Self.FK_activity_activity_kind">
-            <End Role="activity_kind" EntitySet="activity_kind" />
-            <End Role="activity" EntitySet="activity" />
-          </AssociationSet>
           <AssociationSet Name="FK_activity_check_activity" Association="Self.FK_activity_check_activity">
             <End Role="activity" EntitySet="activity" />
             <End Role="activity_check" EntitySet="activity_check" />
@@ -2614,6 +2601,9 @@
           <Property Name="print_init" Type="String" MaxLength="100" FixedLength="false" Unicode="true" />
           <NavigationProperty Name="transfer_register" Relationship="Model.FK_transfer_register_actItem" FromRole="actItem" ToRole="transfer_register" />
           <Property Name="is_reconcile" Type="String" MaxLength="1" FixedLength="false" Unicode="true" />
+          <Property Name="pageSize" Type="String" MaxLength="50" FixedLength="false" Unicode="false" />
+          <Property Name="printSize" Type="String" MaxLength="50" FixedLength="false" Unicode="false" />
+          <Property Name="defaultStyle" Type="String" MaxLength="50" FixedLength="false" Unicode="false" />
           </EntityType>
         <EntityType Name="actItem_files">
           <Key>
@@ -2973,7 +2963,7 @@
           <NavigationProperty Name="transfer_register" Relationship="Model.FK_transfer_register_followers" FromRole="follower" ToRole="transfer_register" />
           <NavigationProperty Name="transfer_register1" Relationship="Model.FK_transfer_register_followers_match" FromRole="follower" ToRole="transfer_register" />
           <NavigationProperty Name="GuaDanOrder" Relationship="Model.FK_GuaDanOrder_Followers" FromRole="follower" ToRole="GuaDanOrder" />
-          <Property Name="search_keywords" Type="String" MaxLength="Max" FixedLength="false" Unicode="true" />
+          <Property Name="search_keywords" Type="String" MaxLength="Max" FixedLength="false" Unicode="false" />
           <NavigationProperty Name="GuaDanOrderGuest" Relationship="Model.FK_GuaDanOrderGuest_FOLLOWERS" FromRole="follower" ToRole="GuaDanOrderGuest" />
         </EntityType>
         <EntityType Name="followers_tablet">
@@ -3189,7 +3179,7 @@
           <Property Name="UpdateTime" Type="DateTime" Precision="7" />
           <NavigationProperty Name="accountings" Relationship="Model.FK_accounting_pro_order_detail" FromRole="pro_order_detail" ToRole="accounting" />
           <NavigationProperty Name="transfer_register" Relationship="Model.FK_transfer_register_pro_order_detail" FromRole="pro_order_detail" ToRole="transfer_register" />
-          <Property Name="style" Type="String" Unicode="true" FixedLength="false" MaxLength="50" Nullable="true" />
+          <Property Name="style" Type="String" Unicode="false" FixedLength="false" MaxLength="50" Nullable="true" />
         </EntityType>
         <EntityType Name="pro_order_record">
           <Key>
@@ -5336,6 +5326,9 @@
           <EntitySetMapping Name="actItems">
             <EntityTypeMapping TypeName="Model.actItem">
               <MappingFragment StoreEntitySet="actItem">
+                <ScalarProperty Name="defaultStyle" ColumnName="defaultStyle" />
+                <ScalarProperty Name="printSize" ColumnName="printSize" />
+                <ScalarProperty Name="pageSize" ColumnName="pageSize" />
                 <ScalarProperty Name="is_reconcile" ColumnName="is_reconcile" />
                 <ScalarProperty Name="print_init" ColumnName="print_init" />
                 <ScalarProperty Name="partno" ColumnName="partno" />

web/App_Code/Model/Model.edmx.diagram

@@ -17,7 +17,7 @@
         <EntityTypeShape EntityType="Model.activity_check" Width="1.5" PointX="5.25" PointY="18.5" IsExpanded="true" />
         <EntityTypeShape EntityType="Model.activity_kind" Width="1.5" PointX="0.75" PointY="11.625" IsExpanded="true" />
         <EntityTypeShape EntityType="Model.activity_kind_detail" Width="1.5" PointX="13.5" PointY="3.875" IsExpanded="true" />
-        <EntityTypeShape EntityType="Model.activity_relating" Width="1.5" PointX="10.5" PointY="9.875" IsExpanded="true" />
+        <EntityTypeShape EntityType="Model.activity_relating" Width="1.5" PointX="11.25" PointY="9.875" IsExpanded="true" />
         <EntityTypeShape EntityType="Model.activity_spares" Width="1.5" PointX="13.5" PointY="7.75" IsExpanded="true" />
         <EntityTypeShape EntityType="Model.admin" Width="1.5" PointX="6" PointY="1.375" IsExpanded="true" />
         <EntityTypeShape EntityType="Model.admin_group" Width="1.5" PointX="3.75" PointY="3.625" IsExpanded="true" />

web/App_Code/api/designerController.cs

@@ -1,5 +1,6 @@
 using Microsoft.Ajax.Utilities;
 using MINOM.COM.Utility;
+using Model;
 using Newtonsoft.Json;
 using Newtonsoft.Json.Linq;
 using System;
@@ -14,6 +15,7 @@ using System.Web.Http;
 /// </summary>
 public class designerController : ApiController
 {
+    private Model.ezEntities _db = new Model.ezEntities();
     public designerController()
     {
         //
@@ -21,6 +23,19 @@ public class designerController : ApiController
         //
     }
 
+
+    [HttpPost]
+    [Route("api/tablet/GetActItem")]
+    public IHttpActionResult GetActItem([FromBody] dynamic data)
+    {
+        LogUtility log = new LogUtility();
+        var json = data;
+        string itemNum = (json == null || json.itemNum == null) ? "" : (string)json.itemNum;
+        int num = int.Parse(itemNum);
+        var item=_db.actItems.AsQueryable().Where(x => x.num == num).FirstOrDefault();
+        return Ok(new { result = "Y", data =item});
+    }
+
     [HttpPost]
     [Route("api/tablet/GetTabletElement")]
     public IHttpActionResult GetTabletElement([FromBody] dynamic data)
@@ -131,6 +146,14 @@ public class designerController : ApiController
         if (mode == "add")
         {
             object[] obj = new StyleDataAccess().AddStyle(ts, list);
+            if (obj[0].ToString() == "Y")
+            {
+                return Ok(new { result = "Y" });
+            }
+            else
+            {
+                return Ok(new { result = "N" });
+            }
         }
         return Ok();
     }
@@ -188,8 +211,14 @@ public class designerController : ApiController
         }
 
         object[] obj = new StyleDataAccess().UpdateStyle(ts, list);
-
+        if (obj[0].ToString() == "Y")
-        return Ok();
+        {
+            return Ok(new { result = "Y" });
+        }
+        else
+        {
+            return Ok(new { result = "N" });
+        }
     }
 
 
@@ -238,8 +267,14 @@ public class designerController : ApiController
         tps.UTime = DateTime.Now.ToString("HHmmss");
 
         object[] obj = new StyleDataAccess().AddTabletPaper(tps);
-
+        if (obj[0].ToString()=="Y")
-        return Ok();
+        {
+            return Ok(new { result = "Y" });
+        }
+        else
+        {
+            return Ok(new { result = "N"});
+        }
     }
 
 }

web/admin/activity/item_reg.aspx

@@ -23,6 +23,8 @@
             data() {
                 return {
                     this_id: '<%= Request["num"] %>',
+                    paperlist: [],
+                    stylelist:[],
                     options: {},
                     optionsDetail: {
                         multiSort: false,
@@ -332,6 +334,45 @@
                             .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)
+                            )
                     }
 
                 },
@@ -525,6 +566,15 @@
                         }
                     }
                 },
+                selectChange(what) {
+                    if (what == "pageSize") {
+                        document.getElementById('<%= pageSizeSel.ClientID %>').value = $("#pageSize").val();
+                    } else if (what == "printSize") {
+                        document.getElementById('<%= printSizeSel.ClientID %>').value = $("#printSize").val();
+                    } else if (what=="defaultStyle") {
+                        document.getElementById('<%= defaultStyleSel.ClientID %>').value = $("#defaultStyle").val();
+                    }
+                }
             },
             computed: {
             },
@@ -624,6 +674,36 @@
                                 <asp:TextBox ID="price" MaxLength="7" runat="server" CssClass="form-control" placeholder="請輸入預設金額"></asp:TextBox>
                                 <asp:RegularExpressionValidator ControlToValidate="price" Display="Dynamic" SetFocusOnError="true" ErrorMessage="只能輸入數字"  ID="RegularExpressionValidator3" runat="server" ValidationExpression="^(-?\d+)(\.\d+)?$" />
                             </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="pageSize" onchange="VueApp.selectChange('pageSize')">
+                                     <option value="">請選擇</option>
+                                 </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')">
+                                       <option value="">請選擇</option>
+                                 </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')">
+                                  <option value="">請選擇</option>
+                              </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>

web/admin/activity/item_reg.aspx.cs

@@ -121,6 +121,18 @@ 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))
+            {
+                actItem.pageSize =(pageSizeSel.Value);
+            }
+            if (!isStrNull(printSizeSel.Value))
+            {
+                actItem.printSize = (printSizeSel.Value);
+            }
+            if (!isStrNull(defaultStyleSel.Value))
+            {
+                actItem.defaultStyle = (defaultStyleSel.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; }
             if (!isStrNull(kind.Value)) { actItem.kind = Val(kind.Value); } else { actItem.kind = null; }
@@ -168,6 +180,18 @@ 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))
+                {
+                    actItem.pageSize = (pageSizeSel.Value);
+                }
+                if (!isStrNull(printSizeSel.Value))
+                {
+                    actItem.printSize = (printSizeSel.Value);
+                }
+                if (!isStrNull(defaultStyleSel.Value))
+                {
+                    actItem.defaultStyle = (defaultStyleSel.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; }
                 if (!isStrNull(kind.Value)) { actItem.kind = Val(kind.Value); } else { actItem.kind = null; }

web/admin/activity/reg.aspx

@@ -641,11 +641,13 @@
                             };
 
                           // 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));
                          
                             /*

web/admin/item/TabletDesigner.aspx

@@ -168,13 +168,13 @@
             <div class="row">
                 <div class="col-6">
                     <div class="form-floating mb-3">
-                        <input type="number" id="xPosition" class="form-control form-control-sm mb-2">
+                        <input type="number" id="xPosition" class="form-control form-control-sm mb-2"  onchange="Designer.changePosition()">
                         <label class="small" for="xPosition">X</label>
                     </div>
                 </div>
                 <div class="col-6">
                     <div class="form-floating mb-3">
-                        <input type="number" id="yPosition" class="form-control form-control-sm mb-2">
+                        <input type="number" id="yPosition" class="form-control form-control-sm mb-2"  onchange="Designer.changePosition()">
                         <label class="small" for="yPosition">Y</label>
                     </div>
                 </div>
@@ -225,8 +225,8 @@
             allSize: [
             ],
             bg: [
-                { name: "黃1", path: "../../admin/print/html/tablet-1.svg" },
+                { name: "黃1", path: "../../admin/print/html/tablet-1_new.svg" },
-                { name: "黃2", path: "../../admin/print/html/tablet-1B.svg" },
+                { name: "黃2", path: "../../admin/print/html/tablet-1B_new.svg" },
                 { name: "紅1", path: "../../admin/print/html/tablet-2.svg" },
                 { name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
             ],
@@ -572,6 +572,13 @@
             },
             changePrintSize() {
 
+            },
+            changePosition() {
+                //this.activeId = id;
+                const el = this.elements.find(x => x.id === this.activeId);
+                el.x=$('#xPosition').val();
+                el.y = $("#yPosition").val();
+                $(`.tablet-element[id="${this.activeId}"]`).css({ left: el.x + "mm", top: el.y + "mm" });
             },
             changePaper() {
                 let paperSize = $("#paperSize").val()
@@ -599,6 +606,9 @@
                     .post(HTTP_HOST + 'api/tablet/SavePaperSize', ps)
                     .then(response => {
                         if (response.status == "200") {
+                            if (response.data.result=="Y") {
+                                alert("ok");
+                            }
                         }
                     });
 
@@ -926,7 +936,7 @@
                     const id = `${prefix}-${Date.now()}-${i}`;
                     this.elements.push({
                         id, type: 'title', text: `正名${i}`, x: 100 - (i * 30), y: 80,
-                        style: { fontSize: 24, fontFamily: 'Kaiti', isVertical: true }
+                        style: { fontSize: 24, fontFamily: 'DFKai-sb', isVertical: true }
                     });
                 }
                 //this.render();
@@ -937,7 +947,7 @@
 
                 this.elements.push({
                     id: 'combined-' + Date.now(), type: 'combined-center', text: '林張\n氏歷代祖先', x: 130, y: 80,
-                    style: { fontSize: 24, fontFamily: 'Kaiti', isVertical: true }
+                    style: { fontSize: 24, fontFamily: 'DFKai-sb', isVertical: true }
                 });
                 //this.render();
             },
@@ -1015,7 +1025,11 @@
                 await axios
                     .post(HTTP_HOST + `api/tablet/${path}`, master)
                     .then(response => {
-                        console.log(response);
+                        if (response.status == "200") {
+                            if (response.data.result == "Y") {
+                                alert("ok");
+                            }
+                        }
                     });
             }
         };

web/admin/order/reg.aspx

@@ -2576,7 +2576,7 @@
                     <v-btn icon @click="tablet_edit.show=false"><v-icon>mdi-close</v-icon></v-btn>
                 </v-card-title>
                 <v-card-text>
-                    <iframe id="tablet_edit_iframe" src="../print/tablet_edit/editornew.html" style="width: 100%; height: 550px;" frameborder="0"></iframe>
+                    <iframe id="tablet_edit_iframe" src="../print/tablet_edit/editornew.html" style="width: 100%; height: 580px;" frameborder="0"></iframe>
                 </v-card-text>
             </v-card>
         </v-dialog>

web/admin/print/print_multi_new.aspx

@@ -14,38 +14,16 @@
 
     <link href="~/admin/Templates/TBS5ADM001/css/Style.css" rel="stylesheet" />
     <link href="~/admin/item/css/floating.css" rel="stylesheet" />
-    <link href="~/admin/item/css/tablet-design.css" rel="stylesheet" />
+    <%--<link href="~/admin/item/css/tablet-design.css" rel="stylesheet" />--%>
-    <style>
-         @media print {
-            /*@page {
-                size: 398mm 216mm portrait;
-                margin: 0;
-            }*/
-            html, body, form, .full-home, #printArea, .canvas-area {
-                height: auto !important;
-                width: auto !important;
-                overflow: visible !important;  /*必須為 visible */
-                margin: 0 !important;
-                padding: 0 !important;
-/*                display: block !important;*/
-            }
-            .no-print, #customMenu {
-                display: none !important;
-            }
-
- 
-            
-        }
-
-    </style>
 </head>
 <body>
    
         <span class="btn btn-primary no-print" onclick="Printer.print()">列印</span>
         <select id="paperSizeSel" onchange="Printer.render()">
-            <option>紙張尺寸</option>
+            <!-- onchange="Printer.render()"-->
+            <option value="">紙張尺寸</option>
         </select>
-        <div class="d-flex  full-home" style="height: auto;width:100%;">
+        <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">
@@ -98,14 +76,20 @@
 <script src="<%=ResolveUrl("~/admin/Templates/TBS5ADM001/js/Script.js")%>"></script>
 <script src="<%=ResolveUrl("~/admin/item/jquery-ui/jquery-ui.min.js")%>"></script>
 <script>
+    // 建立 MutationObserver 實例，並傳入 callback 函式
+    
     const Printer = {
         selected: null,
         http_host: "",
+        pageStyle: "",
+        pSize:"",
         allStyle: [],
         allSize: [],
         allStyleDetails: [],
         printData: [],
         tabletElement: [],
+        observer: null,
+        isInit:true,
         bg: [
             { name: "黃1", path: "../../admin/print/html/tablet-1_new.svg" },
             { name: "黃2", path: "../../admin/print/html/tablet-1B_new.svg" },
@@ -116,14 +100,38 @@
         
             let HTTP_HOST = "<%=UrlHost()%>";
             this.http_host = HTTP_HOST;
-            await Promise.all([
+            //
+            Promise.all([
+                this.getActItem(),
                 this.getPaperSize(),
+            ]).then(() => { 
+            Promise.all([
                     this.getTabletElement(),
                     this.getTabletStyles(),
-                this.getAllStyleDetails()
+                    this.getAllStyleDetails(),
-            ]);
+                    this.getData(),
-            this.getData();
                 
+            ]).then(() => {
+                this.render();
+            })
+            })
+        },
+        async getActItem() {
+            axios
+                .post('/api/tablet/GetActItem', { itemNum: localStorage.getItem("item") })
+                .then(response => {
+                    if (response.data.result == "Y" && response.data.data) {
+                        this.pSize = response.data.data.printSize;
+                        $("#paperSizeSel").val(this.pSize);
+                    } else {
+                        $("#paperSizeSel").val("0001");
+                    }
+                    //$("#paperSizeSel").trigger('change');
+                    //this.render();
+                    //this.print();
+                    //this.isInit = false;
+                }
+                );
         },
         async getAllStyleDetails() {
             await axios
@@ -134,7 +142,7 @@
                         if (data.result == "Y") {
                             let details = data.data;
                             this.allStyleDetails = details;
-                            console.log(data.data);
+                            //console.log(data.data);
                         }
                     }
                 }
@@ -149,13 +157,20 @@
                     if (response.status == "200") {
                         let data = response.data;
                         this.allSize = data.data;
+                        //console.log(this.allSize);
+                        if (this.allSize) {
                              this.allSize.forEach(x => {
                                 $("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`);
-                            
                             })
-                        $("#paperSizeSel").val("0003")
+                            //if (this.printSize) {
+                            //    $("#paperSizeSel").val(this.printSize);
+                            //} else {
+                            //    $("#paperSizeSel").val("0003")
+                            //}
                         }
                     }
+                    //$("#paperSizeSel").val("0003");
+                }
                 )
         },
         async getTabletElement() {
@@ -166,23 +181,18 @@
                     if (response.status == "200") {
                         let data = response.data;
                         this.tabletElement = data.data;
-
                     }
-                }
+                });
-                );
         },
         async getTabletStyles() {
             await axios
                 .post(this.http_host + 'api/tablet/GetStyleData', {})
                 .then(response => {
-                    //if (response.result=="Y") {
                     if (response.status == "200") {
                         let data = response.data;
                         this.allStyle = data.data;
-
                     }
-                }
+                });
-                );
         },
         async getData() {
             let list = localStorage.getItem("list")
@@ -198,40 +208,49 @@
                     if (response.status == 200) {
                         this.printData = response.data;
                        
-                        this.render();
+                        //this.render();
-
+                        //this.print();
-                        this.print();
                     }
                 });
         },
         render() {
+            //console.log(this.pSize)
+            //if (this.isInit) {
+            //    return false;
+            //}
             $("#printArea").empty();
             let self = this;
             let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
             let nowPageWidth = 0;
             let tabletpaper;
             this.printData.forEach(x => {
+                        if ($("#paperSizeSel").val() == "") {
+                    if (this.pSize&&this.pSize!=undefined) {
+                        $("#paperSizeSel").val(this.pSize);
+                    } else {
+                        $("#paperSizeSel").val("0003");
+                    }
+                }
                 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);
-                console.log("size:",size);
+                if ((nowPageWidth + parseFloat(printSize.width)) > pageSize.width) {
-                if ((nowPageWidth + parseFloat(size.width)) > pageSize.width) {
+                    //$(canvas).css("width", printSize.width + "mm");
-                    $(canvas).css("width", printSize.width + "mm");
+                    //$(canvas).css("height", printSize.height + "mm");
-                    $(canvas).css("height", printSize.height + "mm");
+                    //$(canvas).css("justify-content", "center");
-                    $(canvas).css("justify-content", "center");
+                    //$(canvas).css("break-after", "page");
-                    $(canvas).css("break-after", "page");
+                    //$(canvas).css("page-break-after", "always");
-                    $(canvas).css("page-break-after", "always");
                     $(canvas).append(tabletpaper);
                     $("#printArea").append(canvas);
                     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(size.width);
+                nowPageWidth = nowPageWidth + parseFloat(printSize.width);
                 tabletpaper = $(` <div class="tablet-paper">
                 </div>`)
                 let img = self.bg.find(y => y.name == style.backendImg);
-                tabletpaper.css({
+                /*tabletpaper.css({
                     "background-color": "white",
                     width: size.width + 'mm',
                     height: size.height + 'mm',
@@ -239,9 +258,9 @@
                     "margin-bottom": "0",
                     "background-image": `url(${img.path})`,
                     'background-size': '100% 100%',
-                    //"break-after": "page",
+                    "break-after": "page",
-                    //"page-break-after": "always"
+                    "page-break-after": "always"
-                });
+                });*/
                 let tablet = JSON.parse(x.f_num_tablet);
 
                 let mid_items = tablet.mid_items;
@@ -261,9 +280,6 @@
 
                 details.forEach(d => {
                     if (d.isActive != "hidden") {
-                        //console.log(d);
-                        //let { newFontSize, newTxtWidth } = self.scaleFontSize(mid, style, d)
-           
                         let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
           
                         let html = "";
@@ -314,34 +330,9 @@
 
                             html = $namelist;
                         } else if (d.elementID === "alive") {
-                            //陽上
-                            //d.startX
-                            //yang = $("<div class='yang'></div>").css({
-                            //    height: "36px","font-size": "12px"
-                            //});
-                            //$(yang).append("<span>陽上</span>")
                             html = self.renderLiveList(left, d);
 
-                            //拜薦
-                            //bi = $("<div class='bi'></div>")
-                            //$(bi).append("<span>拜薦</span>").css({
-                            //    height: "36px","font-size":"12px"
-                            //});
-                            //alive = $("<div class='yangshang-wrapper'></div>").css({
-                            //    //"font-size": d.fontSize+"px",
-                            //    display: "flex ",
-                            //    "flex-direction": "row", /* 垂直堆疊 */
-                            //    "justify-content": "space-between ", /* 陽上與拜薦各據頂底 */
-                            //    "align-items": "center", /* 水平方向置中 */
-                            //    "height": "100%",//"100% !important",
-                            //    "width": "100% ",
-                            //    "writing-mode": "vertical-rl", /* 確保內部文字均為垂直書寫 */
-                            //    "text-orientation": "upright", /* 確保文字方向轉正 */
-                            //    "gap": "1px"
-                            //})
-
                             newFontSize = d.fontSize;
-                            //html=$(alive).append(yang).append(html).append(bi);
                         }
 
                         let content = $(`<div class="tablet-element vertical-text "></div>`)
@@ -349,15 +340,10 @@
                                 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"
-                                //"text-align": "justify","text-align-last": "justify",
+                                
-                                //position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.isActive
                             })
                             .html(html);
-                        //if (d.elementID == "alive") {
-                        //    tabletpaper.append( $(alive).append(yang).append(content).append(bi));
-                        //} else {
                             tabletpaper.append(content);
-                       //}
                         html = "";
                         alive = "";
                         yang = "";
@@ -366,273 +352,39 @@
 
                 })
 
-                let pageStyle = `<style id="pageStyle">
+                self.pageStyle = `<style id="pageStyle">
+                {
+                    -webkit-print-color-adjust: exact !important;
+                    print-color-adjust: exact !important;
+                    color-adjust: exact !important;
+                }
+                .vertical-text {
+                    writing-mode: vertical-rl !important;
+                    -webkit-writing-mode: vertical-rl !important;
+                    text-orientation: mixed !important;
+                }
                 @media print{
                     :host {
                         width:auto !important;
                         height:auto !important;
                     }
                     @page {
-                            size:${pageSize.width}mm 393mm   !important;
+                        size:${pageSize.width}mm ${pageSize.height}mm   !important;
                         margin:0;
                     }
- 
-                    }
-                    </style>
-                `
-                console.log("pageSize:",pageSize);
-                $("#pageStyle").remove();
-                $("head").append(pageStyle);
-
-                $(canvas).append(tabletpaper);
-                $(canvas).css("width", printSize.width + "mm");
-                $(canvas).css("height", printSize.height + "mm");
-                $(canvas).css("justify-content", "center");
-                $("#printArea").append(canvas);
-                //this.bindKeyEvent();
-            });
-            $(".tablet-element").draggable({
-                start(e, ui) {
-                    //console.log("gogogogo");
-                },
-                stop(e, ui) {
-                    //console.log(ui.position.left, ui.position.top);
-                }
-            });
-
-            $(".tablet-element").on("click", function (e) {
-                e.preventDefault();
-                self.selected = $(this);
-                let fontSize = $(this).css("fontSize");
-                let fontFamily = $(this).css("fontFamily");
-                let left = $(this).css("left");
-                let top = $(this).css("top");
-            });
-
-            $(".tablet-element").on("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 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();
-            });
-        },
-        fix2(val) {
-            return Number.parseFloat(val).toFixed(2);
-        },
-        renderLiveList(names, el) {
-            let $namelist = $(`<div class='liveList'></div>`).css({
-                "writing-mode": "vertical rl",
-                display: "flex",
-                "flex-direction": "row",
-                "flex-wrap": "wrap",
-                margin: "auto",
-                width: `${el.width}px`,
-                height: `${el.height}px`,
-                border: "0px solid #ccc",
-                padding: "1px",
-                "font-family": el.fontFamily,
-                "letter-spacing": "0.1em",
-                "column-gap": "1px",
-                "row-gap": "1px",
-                "align-items": "center",
-            });
-            let self = this;
-            //$namelist.append("陽上");
-            names.forEach(n => {
-                $namelist.append(self.renderLiveSpan(n, el))
-            })
-            //$namelist.append("拜薦");
-            return $namelist;
-        },
-        renderLiveSpan(name, el) {
-            return $(`<span>${name}</span>`).css({
-                display: "block",
-                "min-height": `${el.textHeight}px`,
-                "max-height": `${el.height}px`,
-                width: `${el.textWidth}px`,
-                height: `${el.textHeight}px`,
-                "text-align": "justify",
-                "text-align-last": "justify",
-                "margin-bottom": "15px",
-                //"margin-left": "5px",
-                "text-justify": "inter-character",
-            });
-        },
-        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) {
-            const canvas = document.createElement("canvas");
-            const context = canvas.getContext("2d");
-            context.font = font;
-            const metrics = context.measureText(text);
-          
-            return metrics;
-        },
-        getTextSize(txt, fontsize) {
-            let span = document.createElement("span");
-            span.style.visibility = "hidden";
-            span.style.position = "absolute";
-            span.style.fontSize = fontsize + "px";
-            span.style.fontFamily = "";
-            span.innerText = txt;
-            document.body.appendChild(span);
-            let result = {
-                width: span.offsetWidth,
-                height: span.offsetHeight
-            }
-            //console.log("result:",result);
-            document.body.removeChild(span);
-            return result;
-        },
-         scaleFontSize(txtContent, fontSize,elementWidth) {
-
-             let font = this.getTextSize("講", parseInt(fontSize));
-             console.log("scaleFontSize:", fontSize, " A:", font, " B:", Math.ceil((txtContent.length) / 2), " C:", font.width, elementWidth, (Math.ceil(txtContent.length / 2) * font.width)*2)
-            //console.log(newFontSize, newTxtWidth)
-            //自動判斷縮小字型的規則,要同時縮小間距
-           // console.log("A:", dStyle, dStyle.fontSize)
-             //if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
-             if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) {
-                 let newfontSize = parseInt(fontSize) - 1;
-                 //console.log("newfontSize:",newfontSize)
-                 return this.scaleFontSize(txtContent, newfontSize,elementWidth);
-                }    
-            //}
-            //console.log(txtContent,style,dStyle)
-            //console.log(newFontSize,newTxtWidth)
-             return fontSize;
-        },
-        breakWord(txtContent, style, dStyle) {
-            //自動判斷斷字
-            //1. by 特定字 2.by長度
-
-        },
-        async changeLocation() {
-            $(this.selected).css("left", $("#textX").val() + "mm");
-            $(this.selected).css("top", $("#textY").val() + "mm");
-        },
-        async changeSize() {
-            $(this.selected).css("font-size", $("#fontSize").val())
-        },
-        async changeWidth() {
-            let nameList = $(this.selected).find(".nameList").first();
-
-            if (nameList) {
-                let spans = $(nameList).find("span");
-                if (spans) {
-                    spans.each(function (index, x) {
-                        $(x).css("width", $("#textWidth").val())
-                    });
-
-                }
-            }
-            let liveList = $(this.selected).find(".liveList").first();
-            if (liveList) {
-                let spans = $(liveList).find("span");
-                if (spans) {
-                    spans.each(function (index, x) {
-                        $(x).css("width", $("#textWidth").val())
-                    });
-
-                }
-            }
-        },
-        print() {
-
-            //setTimeout(() => { window.print(); }, 1000); 
-            //let s = this.allStyle.find(x => x.styleID == this.style)
-            //let size = this.allSize.find(x => x.paperID == s.paperSize)
-            let pageSize = this.allSize.find(x => x.paperID == $("#paperSizeSel").val());
-            let printSize = this.allSize.find(x => x.paperID == $("#paperSizeSel").val());
-            //console.log("a:",pageSize," b:",printSize);
-            let w = window.open('', '_blank');
-            if (!w) {
-                alert("請允許瀏覽器開啟彈出式視窗！");
-                return;
-            }
-
-            // 1. 抓取您原本網頁定義的 HTTP_HOST (您的全域變數)，如果沒有則抓取當前網址
-            let hostUrl = typeof this.http_host !== 'undefined' ? this.http_host : (window.location.protocol + "//" + window.location.host);
-            if (!hostUrl.endsWith('/')) hostUrl += '/';
-
-            // 2. 抓出畫布完整的 HTML
-            let canvasHtml = $("#printArea").html();
-
-            // 3. 【關鍵修復】把所有的 "../../" 替換成完整的網址，解決底圖破圖問題！
-            canvasHtml = canvasHtml.replace(/\.\.\/\.\.\//g, hostUrl);
-
-            // 4. 組合列印視窗的 HTML
-            let htmlContent = `
-            <!DOCTYPE html>
-            <html>
-            <head>
-                <title>預覽列印 - 牌位設計</title>
-                <meta charset="utf-8">
-               
-               
-                   <style>
-        /* 基礎變數與強制背景列印 */
-        * {
-            -webkit-print-color-adjust: exact !important;
-            print-color-adjust: exact !important;
-            color-adjust: exact !important;
-        }
-
-        /* 螢幕預覽樣式 */
-        @media screen {
-            body {
-                background-color: #525659;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                padding: 20px 0;
-            }
-            #printArea {
-                width: auto !important;
-                height: auto !important; /* 移除 100vh 限制 */
-            }
-            .tablet-paper {
-                margin-bottom: 30px;
-                box-shadow: 0 0 10px rgba(0,0,0,0.5);
-                background-color: white;
-                text-align:justify;
-            }
-        }
-
-        /* 關鍵：修正 Ctrl+P 空白問題 */
-        @media print {
-            @page {
-                size: ${printSize.width}mm 393mm !important;
-                margin: 0;
-            }
                         html, body, form, .full-home, #printArea, .canvas-area {
                         height: auto !important;
                         width: auto !important;
-                overflow: visible !important; /* 必須為 visible */
+                        overflow: visible !important;  /*必須為 visible */
                         margin: 0 !important;
                         padding: 0 !important;  
                         display: block !important;
                     }
+                    .no-print, #customMenu {
+                        display: none !important;
+                    }
+
+
                     .canvas-area{
                         display:flex !important;
                         flex-direction: row !important;
@@ -655,19 +407,8 @@
                         position: absolute !important;
                         white-space: normal;
                         color: black !important; /* 確保文字是黑色的 */
-           }
                     }
                       
-            /* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
-            .tablet-paper {
-                width: var(--page-w);
-                height: var(--page-h);
-            }
-                
-            .vertical-text {
-                writing-mode: vertical-rl !important;
-                -webkit-writing-mode: vertical-rl !important;
-                    text-orientation: mixed !important;
                 }
 
                 /* 名單金字塔佈局容器 */
@@ -714,10 +455,6 @@
                     print-color-adjust: exact !important;
                     color-adjust: exact !important;
                 }
-
-
-
-
                  .ancestor-wrapper {
                     /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
                     writing-mode: horizontal-tb;
@@ -741,7 +478,233 @@
                     writing-mode:vertical-rl
                 }
 
+                .canvas-area{
+                    width: ${printSize.width}mm;
+                    height: ${printSize.height}mm;
+                    justify-content: center;
+                    break-after: page;
+                    page-break-after: always;
+                }
+                .tablet-paper{
+                    background-color: white;
+                    width: ${size.width}mm !important;
+                    height: ${ size.height }mm !important;
+                    position: relative;
+                    margin-bottom: 0;
+                    background-image: url(${ img.path });
+                    background-size: 100% 100%;
+                    break-after: page;
+                    page-break-after: always;
+                }
+                .tablet-element {
+                  cursor: move;
+                  padding: 4px;
+                  color: black !important; /* 強制墨水為黑色 */
+                  border: 1px solid transparent;
+                  transition: writing-mode 0.3s, transform 0.2s;
+                }
+                .tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
+                .tablet-paper:last-child { page-break-after: auto; }
                 </style>
+                `
+                $("#pageStyle").remove();
+                $("head").append(self.pageStyle);
+                $(canvas).append(tabletpaper);
+                //$(canvas).css("width", printSize.width + "mm");
+                //$(canvas).css("height", printSize.height + "mm");
+                //$(canvas).css("justify-content", "center");
+                $("#printArea").append(canvas);
+            });
+            $(".tablet-element").draggable({
+                start(e, ui) {
+                    //console.log("gogogogo");
+                },
+                stop(e, ui) {
+                    //console.log(ui.position.left, ui.position.top);
+                }
+            });
+
+            $(".tablet-element").on("click", function (e) {
+                e.preventDefault();
+                self.selected = $(this);
+                let fontSize = $(this).css("fontSize");
+                let fontFamily = $(this).css("fontFamily");
+                let left = $(this).css("left");
+                let top = $(this).css("top");
+            });
+
+            $(".tablet-element").on("contextmenu", function (e) {
+                e.preventDefault();
+                self.selected = $(this);
+                let fontSize = $(this).css("font-size");
+                let fontFamily = $(this).css("font-family");
+                console.log($(this).css("font-size"));
+                let textWidth = $(this).find("span").first().css("width");
+                let 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();
+            });
+
+            
+        },
+        fix2(val) {
+            return Number.parseFloat(val).toFixed(2);
+        },
+        renderLiveList(names, el) {
+            let $namelist = $(`<div class='liveList'></div>`).css({
+                "writing-mode": "vertical rl",
+                display: "flex",
+                "flex-direction": "row",
+                "flex-wrap": "wrap",
+                margin: "auto",
+                width: `${el.width}px`,
+                height: `${el.height}px`,
+                border: "0px solid #ccc",
+                padding: "1px",
+                "font-family": el.fontFamily,
+                "letter-spacing": "0.1em",
+                "column-gap": "1px",
+                "row-gap": "1px",
+                "align-items": "center",
+            });
+            let self = this;
+            names.forEach(n => {
+                $namelist.append(self.renderLiveSpan(n, el))
+            })
+            return $namelist;
+        },
+        renderLiveSpan(name, el) {
+            return $(`<span>${name}</span>`).css({
+                display: "block",
+                "min-height": `${el.textHeight}px`,
+                "max-height": `${el.height}px`,
+                width: `${el.textWidth}px`,
+                height: `${el.textHeight}px`,
+                "text-align": "justify",
+                "text-align-last": "justify",
+                "margin-bottom": "15px",
+                "text-justify": "inter-character",
+            });
+        },
+        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) {
+            const canvas = document.createElement("canvas");
+            const context = canvas.getContext("2d");
+            context.font = font;
+            const metrics = context.measureText(text);
+          
+            return metrics;
+        },
+        getTextSize(txt, fontsize) {
+            let span = document.createElement("span");
+            span.style.visibility = "hidden";
+            span.style.position = "absolute";
+            span.style.fontSize = fontsize + "px";
+            span.style.fontFamily = "";
+            span.innerText = txt;
+            document.body.appendChild(span);
+            let result = {
+                width: span.offsetWidth,
+                height: span.offsetHeight
+            }
+            document.body.removeChild(span);
+            return result;
+        },
+         scaleFontSize(txtContent, fontSize,elementWidth) {
+
+             let font = this.getTextSize("講", parseInt(fontSize));
+            //自動判斷縮小字型的規則,要同時縮小間距
+
+             //if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
+             if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) {
+                 let newfontSize = parseInt(fontSize) - 1;
+                 //console.log("newfontSize:",newfontSize)
+                 return this.scaleFontSize(txtContent, newfontSize,elementWidth);
+                }    
+             return fontSize;
+        },
+        breakWord(txtContent, style, dStyle) {
+            //自動判斷斷字
+            //1. by 特定字 2.by長度
+
+        },
+        async changeLocation() {
+            $(this.selected).css("left", $("#textX").val() + "mm");
+            $(this.selected).css("top", $("#textY").val() + "mm");
+        },
+        async changeSize() {
+            $(this.selected).css("font-size", $("#fontSize").val())
+        },
+        async changeWidth() {
+            let nameList = $(this.selected).find(".nameList").first();
+
+            if (nameList) {
+                let spans = $(nameList).find("span");
+                if (spans) {
+                    spans.each(function (index, x) {
+                        $(x).css("width", $("#textWidth").val())
+                    });
+
+                }
+            }
+            let liveList = $(this.selected).find(".liveList").first();
+            if (liveList) {
+                let spans = $(liveList).find("span");
+                if (spans) {
+                    spans.each(function (index, x) {
+                        $(x).css("width", $("#textWidth").val())
+                    });
+
+                }
+            }
+        },
+        print() {
+
+            //let pageSize = this.allSize.find(x => x.paperID == $("#paperSizeSel").val());
+            //let printSize = this.allSize.find(x => x.paperID == $("#paperSizeSel").val());
+            //console.log("a:",pageSize," b:",printSize);
+            let w = window.open('', '_blank');
+            if (!w) {
+                alert("請允許瀏覽器開啟彈出式視窗！");
+                return;
+            }
+
+            // 1. 抓取您原本網頁定義的 HTTP_HOST (您的全域變數)，如果沒有則抓取當前網址
+            let hostUrl = typeof this.http_host !== 'undefined' ? this.http_host : (window.location.protocol + "//" + window.location.host);
+            if (!hostUrl.endsWith('/')) hostUrl += '/';
+
+            // 2. 抓出畫布完整的 HTML
+            let canvasHtml = $("#printArea").html();
+
+            // 3. 【關鍵修復】把所有的 "../../" 替換成完整的網址，解決底圖破圖問題！
+            canvasHtml = canvasHtml.replace(/\.\.\/\.\.\//g, hostUrl);
+
+            // 4. 組合列印視窗的 HTML
+            let htmlContent = `
+            <!DOCTYPE html>
+            <html>
+            <head>
+                <title>預覽列印 - 牌位設計</title>
+                <meta charset="utf-8">
+               ${this.pageStyle}
+               
+             
             </head>
             <body>
                 ${canvasHtml}
@@ -758,28 +721,6 @@
                 w.print();
             }, 1200);
         },
-        //bindKeyEvent() {
-        //    let element = document.querySelectorAll(".tablet-element");
-        //    element.forEach(y => {
-        //        console.log("QQ:",y);
-        //        $(y).on("keydown", (e) => {
-        //            console.log(e.key);
-        //            e.preventDefault();
-        //            let top = parseInt(y.style.top);
-        //            let left = parseInt(y.style.left);
-
-        //            switch (e.key) {
-        //                case 'ArrowUp': top = top - 10; break;
-        //                case 'ArrowDown': top = top + 10; break;
-        //                case 'ArrowLeft': left = left - 10; break;
-        //                case 'ArrowRight': left = left + 10; break;
-        //            }
-
-        //            y.style.top = top + 'px';
-        //            y.style.left = left + 'px';
-        //        })
-        //    })
-        //}
     }
     $(document).click(function (e) {
         if (!$("#customMenu").is(e.target) && $("#customMenu").has(e.target).length === 0) {

web/admin/print/tablet_edit/editornew.html

@@ -80,7 +80,7 @@
             top: -2px;
         }
         .equal-card {
-            min-height: 260px;
+            min-height: 280px;
         }
         .checkbox-narrow {
             min-width: 32px;
@@ -402,6 +402,8 @@
                     selected: {
                         style:""
                     },
+                    actitem: "",
+                    pageSize:"",
                     isAllSelected: false,
                     dialog: false,
                     addDialog: false,        // 新增項目對話框
@@ -440,6 +442,12 @@
                         }
                     },
                     deep: true
+                },
+                actitem: {
+                    handler() {
+                        this.getActItem();
+                    },
+                    deep: true
                 }
             },
             computed: {
@@ -524,6 +532,9 @@
                             } else {
                                 this.selected.style = "";
                             }
+
+                            this.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 {
@@ -570,11 +581,26 @@
 
                         }
                     }
+                    //this.getActItem();
+
                 });
 
-                this.getStyle();
+                
             },
             methods: {
+                getActItem() {
+                    axios
+                        .post('/api/tablet/GetActItem', { itemNum: this.actitem })
+                        .then(response => {
+                            console.log(response);
+                            if (response.data.result == "Y" && response.data.data) {
+                                this.pageSize = response.data.data.pageSize;
+                                this.getStyle();
+                            }
+                        }
+                    );
+                   
+                },
                 getStyle() {
                     axios
                         .post('/api/tablet/GetStyleData', {}, {})
@@ -583,14 +609,13 @@
                             if (response.data.data) {
                                 response.data.data.forEach(x => {
                                     if (x.styleID != "000001") {
+                                        console.log(this.pageSize, x.paperSize);
+                                        if (this.pageSize&&this.pageSize==x.paperSize) {
                                             this.code.style.push(x)
                                         }
+                                    }
                                 })
                             }
-                            //this.code.style = response.data.data;
-                            //this.detail_table.list = response.data.list
-                            //this.detail_table.count = response.data.count;
-                            //this.detail_table.loading = false
                         })
                         .catch(error => console.log(error))
                 },