排版

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>
@@ -724,7 +727,7 @@
           <Property Name="customize_data" Type="nvarchar(max)" />
           <Property Name="printed_files" Type="nvarchar(max)" />
           <Property Name="UpdateTime" Type="datetime2" Precision="7" />
-		  <Property Name="style" Type="varchar" MaxLength="50" />
+          <Property Name="style" Type="varchar" MaxLength="50" />
         </EntityType>
         <EntityType Name="pro_order_record">
           <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,
@@ -331,6 +333,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: {
             },
@@ -625,6 +675,36 @@
                                 <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>
                                 <label class="col-sm-2 col-form-label"></label>

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

@@ -640,12 +640,14 @@
                                 form.appendChild(hiddenField);
                             };
 
-                            // Add form fields
+                          // 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(),
-                this.getTabletElement(),
+            ]).then(() => { 
-                this.getTabletStyles(),
+            Promise.all([
-                this.getAllStyleDetails()
+                    this.getTabletElement(),
-            ]);
+                    this.getTabletStyles(),
-            this.getData();
+                    this.getAllStyleDetails(),
+                    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,12 +157,19 @@
                     if (response.status == "200") {
                         let data = response.data;
                         this.allSize = data.data;
-                        this.allSize.forEach(x => {
+                        //console.log(this.allSize);
-                            $("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`);
+                        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");
                 }
                 )
         },
@@ -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 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,30 +352,168 @@
 
                 })
 
-                let pageStyle = `<style id="pageStyle">
+                self.pageStyle = `<style id="pageStyle">
-                    @media print{
+                {
-                        :host {
+                    -webkit-print-color-adjust: exact !important;
-                            width:auto !important;
+                    print-color-adjust: exact !important;
-                            height:auto !important;
+                    color-adjust: exact !important;
-                        }
+                }
-                        @page {
+                .vertical-text {
-                            size:${pageSize.width}mm 393mm   !important;
+                    writing-mode: vertical-rl !important;
-                            margin:0;
+                    -webkit-writing-mode: vertical-rl !important;
-                        }
+                    text-orientation: mixed !important;
- 
+                }
+                @media print{
+                    :host {
+                        width:auto !important;
+                        height:auto !important;
+                    }
+                    @page {
+                        size:${pageSize.width}mm ${pageSize.height}mm   !important;
+                        margin:0;
+                    }
+                        html, body, form, .full-home, #printArea, .canvas-area {
+                        height: auto !important;
+                        width: auto !important;
+                        overflow: visible !important;  /*必須為 visible */
+                        margin: 0 !important;
+                        padding: 0 !important;  
+                        display: block !important;
+                    }
+                    .no-print, #customMenu {
+                        display: none !important;
                     }
-                    </style>
-                `
-                console.log("pageSize:",pageSize);
-                $("#pageStyle").remove();
-                $("head").append(pageStyle);
 
+
+                    .canvas-area{
+                        display:flex !important;
+                        flex-direction: row !important;
+                    }
+                    .no-print, #customMenu {
+                        display: none !important;
+                    }
+                    .tablet-paper {
+                        position: relative !important;
+                        display: block !important;
+                        break-after: page !important;
+                        page-break-after: always !important;
+                        margin: 0 !important;
+                        border: none !important;
+                        background-repeat: no-repeat;
+                        background-size: 100% 100%;
+                    }   
+
+                    .tablet-element {
+                        position: absolute !important;
+                        white-space: normal;
+                        color: black !important; /* 確保文字是黑色的 */
+                    }
+                      
+                }
+
+                /* 名單金字塔佈局容器 */
+                .roster-container {
+                    width: 100%; height: 100%;
+                    writing-mode: vertical-rl; /* 直書 */
+                    display: flex;
+                    /*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
+                    flex-direction: row;     /* 上下分層 (Top / Bottom) */
+                    align-items: center;    /* 左右置中對齊 */
+                    justify-content: center;
+                    gap: 20px;               /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
+                }
+
+                .roster-row {
+                    display: flex;
+                    flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
+                    justify-content: center;
+                    gap: 8px; /* 名字之間的間距 */
+                    margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
+                }
+
+                .name-group {
+                    display: flex;
+                    flex-direction: column;  /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
+                    justify-content: center;
+                    align-items: center;
+                    /* gap 由 HTML 動態綁定 */
+                }
+
+                .roster-name {
+                    text-orientation: upright;
+                    /*font-weight: bold;*/
+                    white-space: normal;
+                    line-height: 1.2;
+                    font-family: DFKai-sb;
+                    /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
+                    width: fit-content;
+                }
+
+                /* 【修復底圖沒出現】強制印出背景設定 */
+                * {
+                    -webkit-print-color-adjust: exact !important;
+                    print-color-adjust: exact !important;
+                    color-adjust: exact !important;
+                }
+                 .ancestor-wrapper {
+                    /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
+                    writing-mode: horizontal-tb;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center; /* 水平置中 */
+                    justify-content: center;
+                    width: fit-content;
+                }
+
+                .main-name {
+                    line-height: 1.2;
+                    /* 保持大字 */
+                }
+
+                .sub-text {
+                    font-size: 0.6em; /* 縮小字體 */
+                    line-height: 1.2;
+                    margin-top: 4px; /* 與上方林張的間距 */
+                    white-space: normal; /* 避免自動換行 */
+                    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("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");
                 $("#printArea").append(canvas);
-                //this.bindKeyEvent();
             });
             $(".tablet-element").draggable({
                 start(e, ui) {
@@ -430,6 +554,8 @@
                 $("#textWidth").val(textWidth);
                 $("#customMenu").show();
             });
+
+            
         },
         fix2(val) {
             return Number.parseFloat(val).toFixed(2);
@@ -452,11 +578,9 @@
                 "align-items": "center",
             });
             let self = this;
-            //$namelist.append("陽上");
             names.forEach(n => {
                 $namelist.append(self.renderLiveSpan(n, el))
             })
-            //$namelist.append("拜薦");
             return $namelist;
         },
         renderLiveSpan(name, el) {
@@ -469,7 +593,6 @@
                 "text-align": "justify",
                 "text-align-last": "justify",
                 "margin-bottom": "15px",
-                //"margin-left": "5px",
                 "text-justify": "inter-character",
             });
         },
@@ -500,26 +623,20 @@
                 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) {
@@ -559,11 +676,8 @@
         },
         print() {
 
-            //setTimeout(() => { window.print(); }, 1000); 
+            //let pageSize = this.allSize.find(x => x.paperID == $("#paperSizeSel").val());
-            //let s = this.allStyle.find(x => x.styleID == this.style)
+            //let printSize = this.allSize.find(x => x.paperID == $("#paperSizeSel").val());
-            //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) {
@@ -588,160 +702,9 @@
             <head>
                 <title>預覽列印 - 牌位設計</title>
                 <meta charset="utf-8">
+               ${this.pageStyle}
                
              
-                   <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 */
-                margin: 0 !important;
-                padding: 0 !important;
-                display: block !important;
-            }
-            .canvas-area{
-                display:flex !important;
-                flex-direction: row !important;
-            }
-            .no-print, #customMenu {
-                display: none !important;
-            }
-            .tablet-paper {
-                position: relative !important;
-                display: block !important;
-                break-after: page !important;
-                page-break-after: always !important;
-                margin: 0 !important;
-                border: none !important;
-                 background-repeat: no-repeat;
-                 background-size: 100% 100%;
-            }   
-
-            .tablet-element {
-                position: absolute !important;
-                white-space: normal;
-                 color: black !important; /* 確保文字是黑色的 */
-           }
-          }
-
-            /* 【修復排版沒照設定】覆寫原本 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;
-            }
-
-            /* 名單金字塔佈局容器 */
-            .roster-container {
-              width: 100%; height: 100%;
-              writing-mode: vertical-rl; /* 直書 */
-              display: flex;
-              /*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
-              flex-direction: row;     /* 上下分層 (Top / Bottom) */
-              align-items: center;    /* 左右置中對齊 */
-              justify-content: center;
-              gap: 20px;               /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
-            }
-
-            .roster-row {
-              display: flex;
-              flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
-              justify-content: center;
-              gap: 8px; /* 名字之間的間距 */
-              margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
-            }
-
-            .name-group {
-              display: flex;
-              flex-direction: column;  /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
-              justify-content: center;
-              align-items: center;
-              /* gap 由 HTML 動態綁定 */
-            }
-
-            .roster-name {
-              text-orientation: upright;
-             /*font-weight: bold;*/
-              white-space: normal;
-              line-height: 1.2;
-              font-family: DFKai-sb;
-              /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
-              width: fit-content;
-            }
-
-            /* 【修復底圖沒出現】強制印出背景設定 */
-            * {
-                -webkit-print-color-adjust: exact !important;
-                print-color-adjust: exact !important;
-                color-adjust: exact !important;
-            }
-
-
-
-
-         .ancestor-wrapper {
-            /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
-            writing-mode: horizontal-tb;
-            display: flex;
-            flex-direction: column;
-            align-items: center; /* 水平置中 */
-            justify-content: center;
-            width: fit-content;
-        }
-
-        .main-name {
-            line-height: 1.2;
-            /* 保持大字 */
-        }
-
-        .sub-text {
-            font-size: 0.6em; /* 縮小字體 */
-            line-height: 1.2;
-            margin-top: 4px; /* 與上方林張的間距 */
-            white-space: normal; /* 避免自動換行 */
-            writing-mode:vertical-rl
-        }
-
-        </style>
             </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") {
-                                        this.code.style.push(x)
+                                        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))
                 },