....

web/App_Code/DataAccess/StyleDataAccess.cs

@@ -0,0 +1,351 @@
+using DocumentFormat.OpenXml.Office2010.Excel;
+using DocumentFormat.OpenXml.Wordprocessing;
+using MINOM.COM.Utility;
+using Model;
+using System;
+using System.Collections.Generic;
+using System.Data.SqlClient;
+using System.Linq;
+using System.Text;
+using System.Web;
+using System.Web.Http.ModelBinding;
+
+/// <summary>
+/// StyleDataAccess 的摘要描述
+/// </summary>
+public class StyleDataAccess
+{
+    LogUtility log=new LogUtility();
+    object[] obj = new object[] { "Y", "" ,null};
+    public StyleDataAccess()
+    {
+        //
+        // TODO: 在這裡新增建構函式邏輯
+        //
+    }
+
+    public object[] AddTabletPaper(TabletPaperSize tps)
+    {
+        try
+        {
+            using (var context = new ezEntities())
+            {
+                StringBuilder sb = new StringBuilder();
+                var sp = new List<SqlParameter>();
+                sb.Append("insert into TabletPaperSize (PaperID,PaperName,Width,Height,CUser,CDate,CTime,UUser,UDate,UTime ) ");
+                sb.Append("values (@PaperID,@PaperName,@Width,@Height,@CUser,@CDate,@CTime,@UUser,@UDate,@UTime )");
+                sp.Add(new SqlParameter("@PaperID",tps.PaperID));
+                sp.Add(new SqlParameter("@PaperName", tps.PaperName));
+                sp.Add(new SqlParameter("@Width", tps.Width));
+                sp.Add(new SqlParameter("@Height", tps.Height));
+                sp.Add(new SqlParameter("@CUser", tps.CUser));
+                sp.Add(new SqlParameter("@CDate", tps.CDate));
+                sp.Add(new SqlParameter("@CTime", tps.CTime));
+                sp.Add(new SqlParameter("@UUser", tps.UUser));
+                sp.Add(new SqlParameter("@UDate", tps.UDate));
+                sp.Add(new SqlParameter("@UTime", tps.UTime));
+                context.Database.ExecuteSqlCommand(sb.ToString(),sp.ToArray());
+            }
+        }
+        catch (Exception ex)
+        {
+            log.writeErrorPath("AddTabletPaper:" + ex.Message + ex.StackTrace);
+            obj[0] = "N";
+            obj[1] = ex.Message;
+        }
+        return obj;
+    }
+    public object[] GetTabletPaper(string paperID, string name)
+    {
+        try
+        {
+            using (var context = new ezEntities())
+            {
+                StringBuilder sb = new StringBuilder();
+                var sp = new List<SqlParameter>();
+
+                sb.Append("select * from TabletPaperSize where 1=1 ");
+                if (!string.IsNullOrEmpty(paperID))
+                {
+                    sb.Append("and PaperID=@PaperID ");
+                    sp.Add(new SqlParameter("@PaperID", paperID));
+                }
+                if (!string.IsNullOrEmpty(name))
+                {
+                    sb.Append("and Name=@Name ");
+                    sp.Add(new SqlParameter("@Name", name));
+                }
+                var data = context.Database.SqlQuery<TabletPaperSize>(sb.ToString(), sp.ToArray()).ToList();
+                obj[2] = data;
+            }
+        }
+        catch (Exception ex)
+        {
+            log.writeErrorPath("GetTabletElement:" + ex.Message + ex.StackTrace);
+            obj[0] = "N";
+            obj[1] = ex.Message;
+        }
+
+        return obj;
+    }
+
+
+    public object[] GetTabletElement(string elementID ,string name)
+    {
+        try
+        {
+            using (var context = new ezEntities())
+            {
+                StringBuilder sb = new StringBuilder();
+                var sp = new List<SqlParameter>();
+
+                sb.Append("select * from TabletElement where 1=1 ");
+                if (!string.IsNullOrEmpty(elementID))
+                {
+                    sb.Append("and ElementID=@ElementID ");
+                    sp.Add(new SqlParameter("@ElementID", elementID));
+                }
+                if (!string.IsNullOrEmpty(name))
+                {
+                    sb.Append("and Name=@Name ");
+                    sp.Add(new SqlParameter("@Name", name));
+                }
+                var data = context.Database.SqlQuery<TabletElement>(sb.ToString(), sp.ToArray()).ToList();
+                obj[2] = data;
+            }
+        }
+        catch (Exception ex)
+        {
+            log.writeErrorPath("GetTabletElement:" + ex.Message + ex.StackTrace);
+            obj[0] = "N";
+            obj[1] = ex.Message;
+        }
+
+        return obj;
+    }
+
+    public object[] GetStyleDetail(string styleID,string elementID)
+    {
+        try
+        {
+            using (var context = new ezEntities())
+            {
+                StringBuilder sb = new StringBuilder();
+                var sp = new List<SqlParameter>();
+
+                sb.Append("select * from TabletStyleDetail where 1=1 ");
+                if (!string.IsNullOrEmpty(styleID))
+                {
+                    sb.Append("and StyleID=@StyleID ");
+                    sp.Add(new SqlParameter("@StyleID", styleID));
+                }
+                if (!string.IsNullOrEmpty(elementID))
+                {
+                    sb.Append("and ElementID=@ElementID ");
+                    sp.Add(new SqlParameter("@ElementID", elementID));
+                }
+                var data = context.Database.SqlQuery<TabletStyleDetail>(sb.ToString(), sp.ToArray()).ToList();
+                obj[2] = data;
+            }
+        }
+        catch (Exception ex)
+        {
+            log.writeErrorPath("GetStyleDetail:" + ex.Message + ex.StackTrace);
+            obj[0] = "N";
+            obj[1] = ex.Message;
+        }
+
+        return obj;
+    }
+    public object[] GetStyle(string id,string name)
+    {
+        try
+        {
+            using (var context = new ezEntities())
+            {
+                StringBuilder sb = new StringBuilder();
+                var sp = new List<SqlParameter>();
+
+                sb.Append("select * from TabletStyle where 1=1 ");
+                if (!string.IsNullOrEmpty(id))
+                {
+                    sb.Append("and StyleID=@StyleID ");
+                    sp.Add(new SqlParameter( "@StyleID",id));
+                }
+                if (!string.IsNullOrEmpty(name))
+                {
+                    sb.Append("and Name=@Name ");
+                    sp.Add(new SqlParameter("@Name", name));
+                }
+               var data= context.Database.SqlQuery<TabletStyle>(sb.ToString(), sp.ToArray()).ToList();
+                obj[2]= data;
+            }
+        }
+        catch (Exception ex)
+        {
+            log.writeErrorPath("GetStyle:" + ex.Message + ex.StackTrace);
+            obj[0] = "N";
+            obj[1] = ex.Message;
+        }
+        return obj;
+    }
+
+    public object[] AddStyle(TabletStyle ts, List<TabletStyleDetail> list)
+    {
+        try
+        {
+            using (var context = new ezEntities())
+            {
+                StringBuilder sb = new StringBuilder();
+                SqlParameter[] sp = new SqlParameter[] {
+                new SqlParameter("@StyleID",ts.StyleID),
+                new SqlParameter("@Name",ts.Name),
+                new SqlParameter("@Descr",ts.Descr),
+                new SqlParameter("@PaperSize",ts.PaperSize),
+                new SqlParameter("@BackendImg",ts.BackendImg),
+                new SqlParameter("@PrintSize",ts.PrintSize),
+                new SqlParameter("@PrintMode",ts.PrintMode),
+                new SqlParameter("@Orientation",ts.Orientation),
+                new SqlParameter("@PrintPageCount",ts.PrintPageCount),
+                new SqlParameter("@RosterLimit",ts.RosterLimit),
+                new SqlParameter("@CUser",""),
+                new SqlParameter("@CDate",""),
+                new SqlParameter("@CTime",""),
+                new SqlParameter("@UUser",""),
+                new SqlParameter("@UDate",""),
+                new SqlParameter("@UTime",""),
+            };
+
+                sb.Append("insert into TabletStyle (StyleID,Name,Descr,PaperSize,BackendImg,PrintSize,PrintMode,Orientation,PrintPageCount,RosterLimit");
+                sb.Append(",CUser,CDate,CTime,UUser,UDate,UTime ) ");
+                sb.Append("values(@StyleID,@Name,@Descr,@PaperSize,@BackendImg,@PrintSize,@PrintMode,@Orientation,@PrintPageCount,@RosterLimit");
+                sb.Append(",@CUser,@CDate,@CTime,@UUser,@UDate,@UTime ) ");
+                context.Database.ExecuteSqlCommand(sb.ToString(), sp);
+
+                sb.Clear();
+                sb.Append("insert into TabletStyleDetail(StyleID,Name,Descr,ElementID,StartX,StartY,FontSize,BreakLen,FontFamily,TwoOffset,");
+                sb.Append("ThreeOffset,FourOffSet,IsActive,Width,Height,TextWidth,TextHeight,CUser,CDate,CTime,UUser,UDate,UTime) ");
+                sb.Append("values (@StyleID,@Name,@Descr,@ElementID,@StartX,@StartY,@FontSize,@BreakLen,@FontFamily,@TwoOffset,");
+                sb.Append("@ThreeOffset,@FourOffSet,@IsActive,@Width,@Height,@TextWidth,@TextHeight,@CUser,@CDate,@CTime,@UUser,@UDate,@UTime) ");
+                foreach (var item in list)
+                {
+                    SqlParameter[] sp1 = new SqlParameter[] {
+                new SqlParameter("@StyleID",item.StyleID),
+                new SqlParameter("@Name",item.Name),
+                new SqlParameter("@Descr",item.Descr),
+                new SqlParameter("@ElementID",item.ElementID),
+                new SqlParameter("@StartX",item.StartX),
+                new SqlParameter("@StartY",item.StartY),
+                new SqlParameter("@FontSize",item.FontSize),
+                new SqlParameter("@BreakLen",item.BreakLen),
+                new SqlParameter("@FontFamily",item.FontFamily),
+                new SqlParameter("@TwoOffset",item.TwoOffset),
+                new SqlParameter("@ThreeOffset",item.ThreeOffset),
+                new SqlParameter("@FourOffset",item.FourOffset),
+                new SqlParameter("@IsActive",item.IsActive),
+                new SqlParameter("@Width",item.Width),
+                new SqlParameter("@Height",item.Height),
+                new SqlParameter("@TextWidth",item.TextWidth),
+                new SqlParameter("@TextHeight",item.TextHeight),
+                new SqlParameter("@CUser",""),
+                new SqlParameter("@CDate",""),
+                new SqlParameter("@CTime",""),
+                new SqlParameter("@UUser",""),
+                new SqlParameter("@UDate",""),
+                new SqlParameter("@UTime",""),
+            };
+                    context.Database.ExecuteSqlCommand(sb.ToString(), sp1.ToArray());
+                }
+            }
+        }
+        catch (Exception ex)
+        {
+            log.writeErrorPath("AddStyle:" + ex.Message+ex.StackTrace);
+            obj[0] = "N";
+            obj[1] = ex.Message;
+        }
+        return obj;
+    }
+
+    public object[] UpdateStyle(TabletStyle ts, List<TabletStyleDetail> list)
+    {
+        try
+        {
+            using (var context = new ezEntities())
+            {
+                StringBuilder sb = new StringBuilder();
+                SqlParameter[] sp = new SqlParameter[] {
+                new SqlParameter("@StyleID",ts.StyleID),
+                new SqlParameter("@Name",ts.Name),
+                new SqlParameter("@Descr",ts.Descr),
+                new SqlParameter("@PaperSize",ts.PaperSize),
+                new SqlParameter("@BackendImg",ts.BackendImg),
+                new SqlParameter("@PrintSize",ts.PrintSize),
+                new SqlParameter("@PrintMode",ts.PrintMode),
+                new SqlParameter("@Orientation",ts.Orientation),
+                new SqlParameter("@PrintPageCount",ts.PrintPageCount),
+                new SqlParameter("@RosterLimit",ts.RosterLimit),
+                new SqlParameter("@CUser",""),
+                new SqlParameter("@CDate",""),
+                new SqlParameter("@CTime",""),
+                new SqlParameter("@UUser",""),
+                new SqlParameter("@UDate",""),
+                new SqlParameter("@UTime",""),
+            };
+
+                sb.Append("update TabletStyle set Descr=@Descr,PaperSize=@PaperSize,BackendImg=@BackendImg,PrintSize=@PrintSize,");
+                sb.Append("PrintMode=@PrintMode,Orientation=@Orientation,PrintPageCount=@PrintPageCount,RosterLimit=@RosterLimit,");
+                sb.Append("CUser=@CUser,CDate=@CDate,CTime=@CTime,UUser=@UUSer,UDate=@UDate,UTime=@UTime ");
+                sb.Append("where StyleID=@StyleID ");
+
+                context.Database.ExecuteSqlCommand(sb.ToString(), sp.ToArray());
+
+                sb.Clear();
+                sb.Append("update TabletStyleDetail set Descr=@Descr,StartX=@StartX,StartY=@StartY,FontSize=@FontSize,BreakLen=@BreakLen,");
+                sb.Append("FontFamily=@FontFamily,TwoOffset=@TwoOffset,ThreeOffset=@ThreeOffset,FourOffset=@FourOffset,IsActive=@IsActive,");
+                sb.Append("Width=@Width,Height=@Height,TextWidth=@TextWidth,TextHeight=@TextHeight,UUser=@UUser,UDate=@UDate,UTime=@UTime ");
+                sb.Append("where StyleID=@StyleID and ElementID=@ElementID ");
+                //sb.Append("insert into TabletStyleDetail(StyleID,Name,Descr,ElementID,StartX,StartY,FontSize,BreakLen,FontFamily,TwoOffset,");
+                //sb.Append("ThreeOffset,FourOffSet,IsActive,Width,Height,TextWidth,TextHeight,CUser,CDate,CTime,UUser,UDate,UTime) ");
+                //sb.Append("values (@StyleID,@Name,@Descr,@ElementID,@StartX,@StartY,@FontSize,@BreakLen,@FontFamily,@TwoOffset,");
+                //sb.Append("@ThreeOffset,@FourOffSet,@IsActive,@Width,@Height,@TextWidth,@TextHeight,@CUser,@CDate,@CTime,@UUser,@UDate,@UTime) ");
+                foreach (var item in list)
+                {
+                    SqlParameter[] sp1 = new SqlParameter[] {
+                new SqlParameter("@StyleID",item.StyleID),
+                new SqlParameter("@Name",item.Name),
+                new SqlParameter("@Descr",item.Descr),
+                new SqlParameter("@ElementID",item.ElementID),
+                new SqlParameter("@StartX",item.StartX),
+                new SqlParameter("@StartY",item.StartY),
+                new SqlParameter("@FontSize",item.FontSize),
+                new SqlParameter("@BreakLen",item.BreakLen),
+                new SqlParameter("@FontFamily",item.FontFamily),
+                new SqlParameter("@TwoOffset",item.TwoOffset),
+                new SqlParameter("@ThreeOffset",item.ThreeOffset),
+                new SqlParameter("@FourOffset",item.FourOffset),
+                new SqlParameter("@IsActive",item.IsActive),
+                new SqlParameter("@Width",item.Width),
+                new SqlParameter("@Height",item.Height),
+                new SqlParameter("@TextWidth",item.TextWidth),
+                new SqlParameter("@TextHeight",item.TextHeight),
+                new SqlParameter("@CUser",""),
+                new SqlParameter("@CDate",""),
+                new SqlParameter("@CTime",""),
+                new SqlParameter("@UUser",""),
+                new SqlParameter("@UDate",""),
+                new SqlParameter("@UTime",""),
+            };
+                    context.Database.ExecuteSqlCommand(sb.ToString(), sp1.ToArray());
+                }
+            }
+        }
+        catch (Exception ex)
+        {
+            log.writeErrorPath("UpdateStyle:" + ex.Message + ex.StackTrace);
+            obj[0] = "N";
+            obj[1] = ex.Message;
+        }
+        return obj;
+    }
+}

web/App_Code/Entity/Style.cs

@@ -0,0 +1,92 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+
+/// <summary>
+/// Style 的摘要描述
+/// </summary>
+public class TabletStyle
+{
+    public TabletStyle()
+    {
+        //
+        // TODO: 在這裡新增建構函式邏輯
+        //
+    }
+
+    public string StyleID { get; set; }
+    public string Name { get; set; }
+    public string Descr { get; set; }
+    public string PaperSize {  get; set; }
+    public string BackendImg    { get; set; }
+    public string PrintSize { get; set; }
+    public string PrintMode { get; set; }
+    public string Orientation { get; set; }
+    public string PrintPageCount { get; set; }
+    public string RosterLimit { get; set; }
+    public string CUser { get; set; }
+    public string CDate { get; set; }
+    public string CTime { get; set; }
+    public string UUser {  get; set; }
+    public string UDate { get; set; }
+    public string UTime { get; set; }
+}
+
+public class TabletStyleDetail
+{
+    public TabletStyleDetail() { }
+    public string StyleID { get; set; }
+    public string Name { get; set; }
+    public string Descr { get; set; }
+    public string ElementID { get; set; }
+    public string StartX { get; set; }
+    public string StartY { get; set; }
+    public string FontSize { get; set; }
+    public string FontFamily { get; set; }
+    public string TwoOffset { get; set; }
+    public string ThreeOffset { get; set; }
+    public string FourOffset { get; set; }
+    public string IsActive { get; set; }
+    public string Width { get; set; }
+    public string Height { get; set; }
+    public string TextWidth { get; set; }
+    public string TextHeight { get; set; }
+    public string BreakLen { get; set; }
+    public string CUser { get; set; }
+    public string CDate { get; set; }
+    public string CTime { get; set; }
+    public string UUser { get; set; }
+    public string UDate { get; set; }
+    public string UTime { get; set; }
+}
+
+public class TabletElement
+{
+    public TabletElement() { }
+    public string ElementID { get; set; }
+    public string Name { get; set; }
+    public string ElementType { get; set; }
+    public string SampleContent { get; set; }
+    public string CUser { get; set; }
+    public string CDate { get; set; }
+    public string CTime { get; set; }
+    public string UUser { get; set; }
+    public string UDate { get; set; }
+    public string UTime { get; set; }
+}
+
+public class TabletPaperSize
+{
+    public TabletPaperSize() { }
+    public string PaperID { get; set; }
+    public string PaperName { get; set; }
+    public string Width { get; set; }
+    public string Height { get; set; }
+    public string CUser { get; set; }
+    public string CDate { get; set; }
+    public string CTime { get; set; }
+    public string UUser { get; set; }
+    public string UDate { get; set; }
+    public string UTime { get; set; }
+}

web/App_Code/api/activityController.cs

@@ -282,6 +282,7 @@ public class activityController : ApiController
 
         var count = qry.Count(); //pageSize = count;//一次取回??
         var qryList = (pageSize > 0) ? qry.ToPagedList(page, pageSize).ToList() : qry.ToList();
+        
         var ret = new
         {
             list = qryList.Select(x => new
@@ -301,9 +302,10 @@ public class activityController : ApiController
                 startDate_lunar = x.startDate_lunar,
                 endDate_lunar = x.endDate_lunar,
                 dueDate = x.dueDate,
-
+               orderCounts= _db.pro_order.Where(y => y.activity_num == x.num).Count(),
     }),
-            count = count
+            count = count,
+            
 
     };
 

web/App_Code/api/designerController.cs

@@ -0,0 +1,245 @@
+using Microsoft.Ajax.Utilities;
+using MINOM.COM.Utility;
+using Newtonsoft.Json;
+using Newtonsoft.Json.Linq;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Net;
+using System.Web;
+using System.Web.Http;
+
+/// <summary>
+/// designerController 的摘要描述
+/// </summary>
+public class designerController : ApiController
+{
+    public designerController()
+    {
+        //
+        // TODO: 在這裡新增建構函式邏輯
+        //
+    }
+
+    [HttpPost]
+    [Route("api/tablet/GetTabletElement")]
+    public IHttpActionResult GetTabletElement([FromBody] dynamic data)
+    {
+        LogUtility log = new LogUtility();
+        var json = data;
+        string elementID = (json == null || json.elementID == null) ? "" : (string)json.elementID;
+        object[] obj = new StyleDataAccess().GetTabletElement(elementID, "");
+        if (obj[0].ToString() == "Y")
+        {
+            return Ok(new { result = "Y", data = obj[2] });
+        }
+        else
+        {
+            return Ok(new { result = "N", message = obj[1] });
+            //throw new HttpResponseException(HttpStatusCode.NotFound);
+        }
+        //return Ok(data);
+    }
+
+    [HttpPost]
+    [Route("api/tablet/GetStyleDetailData")]
+    public IHttpActionResult GetStyleDetailData([FromBody] dynamic data)
+    {
+        LogUtility log = new LogUtility();
+        var json = data;
+        string styleID = (json == null || json.styleID == null) ? "" : (string)json.styleID;
+        object[] obj = new StyleDataAccess().GetStyleDetail(styleID, "");
+        if (obj[0].ToString() == "Y")
+        {
+            return Ok(new { result = "Y", data = obj[2] });
+        }
+        else
+        {
+            return Ok(new { result = "N", message = obj[1] });
+            //throw new HttpResponseException(HttpStatusCode.NotFound);
+        }
+        //return Ok(data);
+    }
+
+    [HttpPost]
+    [Route("api/tablet/GetStyleData")]
+    public IHttpActionResult GetStyleData([FromBody] dynamic data)
+    {
+        LogUtility log = new LogUtility();
+
+        object[] obj = new StyleDataAccess().GetStyle("", "");
+        if (obj[0].ToString() == "Y")
+        {
+            return Ok(new { result = "Y", data = obj[2] });
+        }
+        else
+        {
+            return Ok(new { result = "N", message = obj[1] });
+            //throw new HttpResponseException(HttpStatusCode.NotFound);
+        }
+        //return Ok(data);
+    }
+
+    [HttpPost]
+    [Route("api/tablet/SavDegignerData")]
+    public IHttpActionResult SavDegignerData([FromBody] dynamic data)
+    {
+        LogUtility log = new LogUtility();
+        var json = data;
+        //json.detail.Children<JObject>()
+        log.writeLogPath((string)json.styleName);
+        TabletStyle ts = new TabletStyle();
+        List<TabletStyleDetail> list = new List<TabletStyleDetail>();
+        ts.StyleID = (json == null || json.styleID == null) ? "" : (string)json.styleID;
+        string mode = "edit";
+        if (string.IsNullOrEmpty(ts.StyleID))
+        {
+            ts.StyleID = DateTime.Now.ToString("yyyyMMddHHmmss");
+            mode = "add";
+        }
+        ts.Name = (json == null || json.styleName == null) ? "" : (string)json.styleName;
+        ts.Descr = (json == null || json.descr == null) ? "" : (string)json.descr;
+        ts.PaperSize = (json == null || json.paperSize == null) ? "" : (string)json.paperSize;
+        ts.BackendImg = (json == null || json.backendImg == null) ? "" : (string)json.backendImg;
+        ts.PrintSize = (json == null || json.printSize == null) ? "" : (string)json.printSize;
+        ts.Orientation = (json == null || json.orientation == null) ? "" : (string)json.orientation;
+        ts.PrintPageCount = (json == null || json.printPageCount == null) ? "" : (string)json.printPageCount;
+        ts.PrintMode = (json == null || json.printMode == null) ? "" : (string)json.printMode;
+        ts.RosterLimit=(json == null || json.rosterLimit == null) ? "" : (string)json.rosterLimit;
+        foreach (var item in json.detail.Children<JObject>())
+        {
+            TabletStyleDetail tsd = new TabletStyleDetail();
+            tsd.StyleID = ts.StyleID;
+            tsd.Name = item.name == null ? "" : (string)item.name;
+            tsd.Descr = item.descr == null ? "" : (string)item.descr;
+            tsd.ElementID = item.elementID == null ? "" : (string)item.elementID;
+            tsd.StartX = item.startX == null ? "" : (string)item.startX;
+            tsd.StartY = item.startY == null ? "" : (string)item.startY;
+            tsd.FontSize = item.fontSize == null ? "" : (string)item.fontSize;
+            tsd.FontFamily = item.fontFamily == null ? "" : (string)item.fontFamily;
+            tsd.BreakLen = item.breakLen == null ? "" : (string)item.breakLen;
+            tsd.Width = item.width == null ? "" : (string)item.width;
+            tsd.Height = item.height == null ? "" : (string)item.height;
+            tsd.TextWidth = item.textWidth == null ? "" : (string)item.textWidth;
+            tsd.TextHeight = item.textHeight == null ? "" : (string)item.textHeight;
+            tsd.TwoOffset = item.twoOffset == null ? "" : (string)item.twoOffset;
+            tsd.ThreeOffset = item.threeOffset == null ? "" : (string)item.threeOffset;
+            tsd.FourOffset = item.fourOffset == null ? "" : (string)item.fourOffset;
+            tsd.IsActive = item.isActive == null ? "" : (string)item.isActive;
+            list.Add(tsd);
+        }
+        if (mode == "add")
+        {
+            object[] obj = new StyleDataAccess().AddStyle(ts, list);
+        }
+        return Ok();
+    }
+
+
+
+    [HttpPost]
+    [Route("api/tablet/UpdateDegignerData")]
+    public IHttpActionResult UpdateDegignerData([FromBody] dynamic data)
+    {
+        LogUtility log = new LogUtility();
+        var json = data;
+        //json.detail.Children<JObject>()
+        log.writeLogPath((string)json.styleName);
+        TabletStyle ts = new TabletStyle();
+        List<TabletStyleDetail> list = new List<TabletStyleDetail>();
+        ts.StyleID = (json == null || json.styleID == null) ? "" : (string)json.styleID;
+        string mode = "edit";
+        if (string.IsNullOrEmpty(ts.StyleID))
+        {
+            ts.StyleID = DateTime.Now.ToString("yyyyMMddHHmmss");
+            mode = "add";
+        }
+        ts.Name = (json == null || json.styleName == null) ? "" : (string)json.styleName;
+        ts.Descr = (json == null || json.descr == null) ? "" : (string)json.descr;
+        ts.PaperSize = (json == null || json.paperSize == null) ? "" : (string)json.paperSize;
+        ts.BackendImg = (json == null || json.backendImg == null) ? "" : (string)json.backendImg;
+        ts.PrintSize = (json == null || json.printSize == null) ? "" : (string)json.printSize;
+        ts.Orientation = (json == null || json.orientation == null) ? "" : (string)json.orientation;
+        ts.PrintPageCount = (json == null || json.printPageCount == null) ? "" : (string)json.printPageCount;
+        ts.PrintMode = (json == null || json.printMode == null) ? "" : (string)json.printMode;
+        ts.RosterLimit = (json == null || json.rosterLimit == null) ? "" : (string)json.rosterLimit;
+        foreach (var item in json.detail.Children<JObject>())
+        {
+            TabletStyleDetail tsd = new TabletStyleDetail();
+            tsd.StyleID = ts.StyleID;
+            tsd.Name = item.name == null ? "" : (string)item.name;
+            tsd.Descr = item.descr == null ? "" : (string)item.descr;
+            tsd.ElementID = item.elementID == null ? "" : (string)item.elementID;
+            tsd.StartX = item.startX == null ? "" : (string)item.startX;
+            tsd.StartY = item.startY == null ? "" : (string)item.startY;
+            tsd.FontSize = item.fontSize == null ? "" : (string)item.fontSize;
+            tsd.FontFamily = item.fontFamily == null ? "" : (string)item.fontFamily;
+            tsd.BreakLen = item.breakLen == null ? "" : (string)item.breakLen;
+            tsd.Width = item.width == null ? "" : (string)item.width;
+            tsd.TwoOffset = item.twoOffset == null ? "" : (string)item.twoOffset;
+            tsd.ThreeOffset = item.threeOffset == null ? "" : (string)item.threeOffset;
+            tsd.FourOffset = item.fourOffset == null ? "" : (string)item.fourOffset;
+            tsd.IsActive = item.isActive == null ? "" : (string)item.isActive;
+            tsd.Width = item.width == null ? "" : (string)item.width;
+            tsd.Height = item.height == null ? "" : (string)item.height;
+            tsd.TextWidth = item.textWidth == null ? "" : (string)item.textWidth;
+            tsd.TextHeight = item.textHeight == null ? "" : (string)item.textHeight;
+            list.Add(tsd);
+        }
+
+        object[] obj = new StyleDataAccess().UpdateStyle(ts, list);
+
+        return Ok();
+    }
+
+
+    [HttpPost]
+    [Route("api/tablet/GetPaperSize")]
+    public IHttpActionResult GetPaperSize([FromBody] dynamic data)
+    {
+        LogUtility log = new LogUtility();
+
+        object[] obj = new StyleDataAccess().GetTabletPaper("", "");
+        if (obj[0].ToString() == "Y")
+        {
+            return Ok(new { result = "Y", data = obj[2] });
+        }
+        else
+        {
+            return Ok(new { result = "N", message = obj[1] });
+            //throw new HttpResponseException(HttpStatusCode.NotFound);
+        }
+        //return Ok(data);
+    }
+
+
+    [HttpPost]
+    [Route("api/tablet/SavePaperSize")]
+    public IHttpActionResult SavePaperSize([FromBody] dynamic data)
+    {
+        LogUtility log = new LogUtility();
+        var json = data;
+        //json.detail.Children<JObject>()
+        log.writeLogPath((string)json.styleName);
+        TabletPaperSize tps = new TabletPaperSize();
+        tps.PaperID = (json == null || json.paperID == null) ? "" : (string)json.paperID;
+        if (string.IsNullOrEmpty(tps.PaperID))
+        {
+            tps.PaperID = DateTime.Now.ToString("yyyyMMddHHmmss");
+        }
+        tps.PaperName = (json == null || json.paperName == null) ? "" : (string)json.paperName;
+        tps.Width = (json == null || json.width == null) ? "" : (string)json.width;
+        tps.Height = (json == null || json.height == null) ? "" : (string)json.height;
+        tps.CUser = "";
+        tps.CDate = DateTime.Now.ToString("yyyyMMdd");
+        tps.CTime = DateTime.Now.ToString("HHmmss");
+        tps.UUser = "";
+        tps.UDate = DateTime.Now.ToString("yyyyMMdd");
+        tps.UTime = DateTime.Now.ToString("HHmmss");
+
+        object[] obj = new StyleDataAccess().AddTabletPaper(tps);
+
+        return Ok();
+    }
+
+}

web/admin/item/TabletDesigner.aspx

@@ -3,63 +3,73 @@
 <%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
 
 <asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
-    <%--    <style type="text/css">
-        @import "css/styles.css";
-        @import "css/tablet-design.css";
-        @import "css/floating.css";
-    </style>--%>
 </asp:Content>
 
 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
 
-    <div class="d-flex overflow-hidden">
+    <div class="d-flex overflow-hidden" style="height:1920px">
         <div class="p-2 bg-dark text-white floting-box" style="width: 250px; left: 20px; top: 80px;">
             <h6 class="border-bottom pb-2">設計工具箱</h6>
             <div class="input-group mb-3">
                 <button class="btn btn-outline-secondary dropdown-toggle" type="button"
-                  data-bs-toggle="dropdown" aria-expanded="false">版型</button>
+                    data-bs-toggle="dropdown" aria-expanded="false">
-              <ul class="dropdown-menu">
+                    版型</button>
-                <li><span class="dropdown-item">選擇版型</span></li>
+                <ul class="dropdown-menu style-menu">
+                    <%--<li><span class="dropdown-item" data-value="">選擇版型</span></li>--%>
                 </ul>
                 <input type="text" id="styleName" class="form-control" aria-label="版型名稱">
             </div>
-                <%--<div class="row">
-                    <div class="col-6">
-                         <select class="form-select" id="styleID" aria-label="版型名稱">
-                             <option selected>選擇版型</option>
-                         </select>
-                    </div>
-                     <div class="col-6">
-                         <div class="form-floating mb-3">
-                            <input type="text" id="styleName" class="form-control form-control-sm mb-2"/>
-                            <label for="styleName" style="color:black">版型名稱</label>
-                        </div>
-                     </div>
-                </div>--%>
 
-             <%--<div class="form-floating mb-3">
-                 <select class="form-select form-select-sm mb-2 " onchange="Designer.changeStyle()" id="styleName">
-                     <option value="">請選擇</option>
-                 </select>
-                 <label for="styleName" style="color:black">版型名稱</label>
-             </div>--%>
             <div class="form-floating mb-3">
                 <select class="form-select form-select-sm mb-2 " onchange="Designer.changePaper()" id="paperSize">
                     <option value="">請選擇</option>
                 </select>
-                <label for="paperSize" style="color:black">尺寸</label>
+                <label for="paperSize" style="color: black">尺寸</label>
+            </div>
+            <div id="sizeDiv" style="display: none;">
+                <div class="form-floating mb-3">
+                    <input type="text" class="form-control form-select-sm mb-2 " id="paperName" />
+
+                    <label for="paperName" style="color: black">名稱</label>
+                </div>
+
+                <div class="form-floating mb-3">
+                    <input type="text" class="form-control form-select-sm mb-2 " id="paperWidth" />
+
+                    <label for="paperWidth" style="color: black">寬度</label>
+                </div>
+                <div class="form-floating mb-3">
+                    <input type="text" class="form-control form-select-sm mb-2 " id="paperHeight" />
+
+                    <label for="paperHeight" style="color: black">高度</label>
+                </div>
+                <div class="row">
+                    <span class="btn btn-info" onclick="Designer.savePaperSize()">儲存</span>
+                </div>
             </div>
             <div id="paperOrientation" onclick="Designer.changeOrientation()" class="mb-2">
                 <span></span>
             </div>
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('address')">地址欄</span>
+            <div>
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('title1')">牌位正名</span>
+                <ul class="navbar-nav">
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('lefttitle')">左正名</span>
+                    <li class="nav-item dropdown">
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('righttitle')">右正名</span>
+                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">顯示物件
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('titletriangle')">品字名單</span>
+          </a>
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('combined')">雙姓合併置中</span>
+                        <ul class="dropdown-menu">
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('tricombined')">三姓合併置中</span>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('address')">地址欄</span></li>
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('alive')">陽上報恩</span>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('title1')">牌位正名</span></li>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('lefttitle')">左正名</span></li>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('righttitle')">右正名</span></li>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('titletriangle')">品字名單</span></li>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('combined')">雙姓合併置中</span></li>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('tricombined')">三姓合併置中</span></li>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('alive')">陽上報恩</span></li>
+
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+
             <div class="form-floating mb-3">
                 <%--   <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.clickBackend()">
                     <i class="bi bi-upload me-1"></i>上傳自訂底圖 (PNG/JPG)
@@ -67,7 +77,7 @@
                 <select class="form-select form-select-sm mb-2 " onchange="Designer.changeBg()" id="backendInp">
                     <option value="">請選擇</option>
                 </select>
-                 <label for="backendInp" style="color:black">選用底圖</label>
+                <label for="backendInp" style="color: black">選用底圖</label>
                 <%--  <input id="backendInp" type="file" accept="image/png, image/jpeg,image/svg+xml" style="display: none">--%>
             </div>
 
@@ -76,7 +86,7 @@
                 <select class="form-select form-select-sm mb-2 " onchange="Designer.changePrintSize()" id="printSize">
                     <option value="">請選擇</option>
                 </select>
-                 <label for="printSize" style="color:black">列印尺寸</label>
+                <label for="printSize" style="color: black">列印尺寸</label>
             </div>
             <div class="form-floating mb-3">
                 <select class="form-select form-select-sm mb-2 " onchange="Designer.changePrintMode()" id="printMode">
@@ -84,27 +94,32 @@
                     <option value="combine">合併</option>
                     <option value="origin">原尺寸</option>
                 </select>
-                <label for="printMode" style="color:black">列印模式</label>
+                <label for="printMode" style="color: black">列印模式</label>
+            </div>
+             <div class="form-floating mb-3">
+                 <input type="number" id="rosterLimit" onchange="Designer.changeRosterLimit()" class="form-control form-control-sm mb-2">
+                 <label class="small" for="rosterLimit" style="color: black;">正名上限</label>
              </div>
             <div class="form-floating mb-3">
                 <input type="number" id="perpage" class="form-control form-control-sm mb-2">
-                <label class="small" for="perpage" style="color:black;">每頁列印筆數</label>
+                <label class="small" for="perpage" style="color: black;">每頁列印筆數</label>
             </div>
             <div class="row">
                 <div class="col-6">
                     <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.saveStyle()">存檔</span>
                 </div>
                 <div class="col-6">
-                  <%--  <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="">存檔</span>--%>
+                    <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.print()">預覽列印</span>
                 </div>
             </div>
         </div>
-
+        <div id="printArea" style="width: 100vw; height: 100vh">
             <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-column align-items-center position-relative" id="canvas">
                 <div class="tablet-paper">
                     <%--<div class="tablet-element vertical-text">嘿嘿</div>--%>
                 </div>
             </div>
+        </div>
         <div id="attr-box" class="d-none p-2 bg-dark text-whit  floting-box" style="top: 80px; right: 20px">
             <div class="form-floating mb-3">
                 <textarea id="inp-text" class="form-control form-control-sm mb-2" rows="5"></textarea>
@@ -159,25 +174,50 @@
                     </div>
                 </div>
             </div>
+            <div class="row">
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="number" id="width" class="form-control form-control-sm mb-2">
+                        <label class="small" for="width">寬度</label>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="number" id="height" class="form-control form-control-sm mb-2">
+                        <label class="small" for="height">高度</label>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="number" id="textWidth" class="form-control form-control-sm mb-2">
+                        <label class="small" for="textWidth">文字寬度</label>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="form-floating mb-3">
+                        <input type="number" id="textHeight" class="form-control form-control-sm mb-2">
+                        <label class="small" for="textHeight">文字高度</label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
 
-        </div>
-    </div>
 
 </asp:Content>
+
 <asp:Content ID="Content4" ContentPlaceHolderID="footer_script" runat="Server">
-    <%--      <script src="../../js/jquery-4.0.0.min.js"></script>
-    <script src="jquery-ui/jquery-ui.js"></script>--%>
     <script>
         const Designer = {
             elements: [],
             activeId: null,
-            paper: { width: 100, height: 272 },
+            styleID: null,
-            rosterLimit: 8,
+            paper: { width: "100", height: "272" },
+            rosterLimit: 10,
             allSize: [
-                { name: "A3", width: 297, height: 420, selected: "" },
-                { name: "A4", width: 210, height: 297, selected: "" },
-                { name: "B4", width: 257, height: 364, selected: "" },
-                { name: "red", width: 100, height: 272, selected: "selected" },
             ],
             bg: [
                 { name: "黃1", path: "../../admin/print/html/tablet-1.svg" },
@@ -185,70 +225,404 @@
                 { name: "紅1", path: "../../admin/print/html/tablet-2.svg" },
                 { name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
             ],
+            allStyle: [
+            ],
+            tabletElements: [
+            ],
             orientation: "portrait",
             init() {
                 //$(".tablet-element").draggable({});
+                this.getPaperSize();
+                this.getElements();
+                this.getStyles();
                 this.bindEvents();
-                this.loadConfig();
                 this.bindBackend();
-                this.allSize.forEach(x => {
+
-                    $("#paperSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.width + "*" + x.height + "</option>")
-                    $("#printSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.width + "*" + x.height + "</option>");
-                })
                 this.bg.forEach(x => {
                     $("#backendInp").append("<option value='" + x.name + "'>" + x.name + "</option>")
                 });
                 $("#paperOrientation").html("<span>直向</span>")
             },
+            print() {
+                let s = this.allStyle.find(x => x.styleID == this.styleID)
+                let size = this.allSize.find(x => x.id = s.paperSize)
+                let w = window.open('', '_blank');
+                if (!w) {
+                    alert("請允許瀏覽器開啟彈出式視窗！");
+                    return;
+                }
+
+                // 1. 抓取您原本網頁定義的 HTTP_HOST (您的全域變數)，如果沒有則抓取當前網址
+                let hostUrl = typeof HTTP_HOST !== 'undefined' ? 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>
+                        
+                    /* 名單金字塔佈局容器 */
+                    .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: nowrap;
+                      line-height: 1.2;
+                      font-family: 'Kaiti', serif;
+                      /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
+                      width: fit-content;
+                    }   
+                    .vertical-text {
+                        writing-mode: vertical-rl !important;
+                        -webkit-writing-mode: vertical-rl !important;
+                        text-orientation: mixed !important;
+                    }
+
+                    /* 【修復底圖沒出現】強制印出背景設定 */
+                    * {
+                        -webkit-print-color-adjust: exact !important;
+                        print-color-adjust: exact !important;
+                        color-adjust: exact !important;
+                    }
+
+
+                    /* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
+                    .tablet-paper {
+                        position: relative !important;
+                        margin: 0 auto !important;
+                        page-break-after: always !important;
+                        box-shadow: none !important;
+                        width: var(--page-w);
+                        height: var(--page-h);
+                    }
+
+                    .tablet-element {
+                        position: absolute !important; /* 絕對不能被 Bootstrap 覆蓋為 static */
+                        color: black !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: nowrap; /* 避免自動換行 */
+                    writing-mode:vertical-rl
+                }
+
+                /* 列印時的紙張大小與頁面歸零 */
+                            @media print {
+                                @page {
+                                    /* 動態套用您設定的紙張寬高 */
+                                    size: ${size.width}mm ${size.height}mm portrait; 
+                                    margin: 0;
+                                }
+                                body, html {
+                                    margin: 0 !important;
+                                    padding: 0 !important;
+                        
+                                }
+                                body{
+                                     --page-w: ${size.width}mm;
+                                     --page-h: ${size.height}mm;
+                                     --font-max: 22pt;
+                                     --bg-padding: 0;
+                                }
+                            }
+                        </style>
+                    </head>
+                    <body>
+                        ${canvasHtml}
+                    </body>
+                    </html>
+                `;
+
+                w.document.write(htmlContent);
+                w.document.close();
+
+                // 5. 將等待時間稍微拉長至 1.2 秒，確保大張的 SVG 底圖與外部字體(如標楷體)下載完畢
+                setTimeout(() => {
+                    w.focus();
+                    w.print();
+                }, 1200);
+            },
             changeOrientation() {
                 this.orientation = (this.orientation === "portrait" ? "land" : "portrait");
-                console.log(this.orientation);
                 $("#paperOrientation").empty();
                 let ori = this.orientation == "portrait" ? "直向" : "橫向";
-                console.log(this.orientation, ori)
                 $("#paperOrientation").html("<span>" + ori + "</span>");
                 let paperSize = $("#paperSize").val()
 
-
                 let size = this.allSize.find(x => x.name == paperSize)
-                console.log(paperSize, size);
                 this.paper.width = this.orientation == "portrait" ? size.width : size.height;
                 this.paper.height = this.orientation == "portrait" ? size.height : size.width;
                 $(".tablet-paper").css({
                     "background-color": "white",
                     width: this.paper.width + "mm",
                     height: this.paper.height + "mm",
+                    "background-repeat": "no-repeat!important",
                 });
             },
-            changeStyle() {//切換版型
+            async getPaperSize() {
+                let self = this
+                await axios
+                    .post(HTTP_HOST + 'api/tablet/GetPaperSize', {})
+                    .then(response => {
+                        //if (response.result=="Y") {
+                        if (response.status == "200") {
+                            let data = response.data;
+                            if (data.result == "Y") {
+                                data.data.forEach(x => {
+                                    self.allSize.push({ name: x.paperName, id: x.paperID, width: x.width, height: x.height })
+                                });
+                            }
+                        }
+                    });
+                $("#paperSize").append("<option value='newsize' >新增尺寸</option>")
+                this.allSize.forEach(x => {
+                    $("#paperSize").append("<option value='" + x.id + "'>" + x.name + "(" + x.width + "*" + x.height + ")</option>")
+                    $("#printSize").append("<option value='" + x.id + "'>" + x.name + "(" + x.width + "*" + x.height + ")</option>");
+                })
+            },
+            async getElements() {
+                let self = this
+                await axios
+                    .post(HTTP_HOST + 'api/tablet/GetTabletElement', {})
+                    .then(response => {
+                        //if (response.result=="Y") {
+                        if (response.status == "200") {
+                            let data = response.data;
+                            if (data.result == "Y") {
+                                data.data.forEach(x => {
+                                    self.tabletElements.push(x);
+                                });
+                            }
+                        }
+                    });
+            },
+            async getStyles() {
+                await axios
+                    .post(HTTP_HOST + 'api/tablet/GetStyleData', {})
+                    .then(response => {
+                        //if (response.result=="Y") {
+                        if (response.status == "200") {
+                            let data = response.data;
+                            if (data.result == "Y") {
+                                data.data.forEach(x => {
+                                    this.allStyle.push(x);
+                                    $(".style-menu").append("<li><span class='dropdown-item style-item' data-value='" + x.styleID + "'>" + x.name + "</span></li>");
+                                });
 
+                                this.bindDropdown();
+                            }
+                        }
+                        //}
+                    });
+            },
+            bindDropdown() {
+                let self = this;
+                $(".style-menu li").on("click", function (e) {
+                    $(".style-menu li").removeClass('active');
+                    $(this).addClass('active');
+                    $("#styleName").val(e.target.textContent);
+                    self.styleID = e.target.getAttribute("data-value")
+                    self.changeStyle(e.target.getAttribute("data-value"));
+                    let style = self.allStyle.find(x => x.styleID == e.target.getAttribute("data-value"));
+                    if (style) {
+                        let size = self.allSize.find(x => x.name == style.paperSize);
+                        if (size) {
+                            self.paper.width = size.width;
+                            self.paper.height = size.height;
+                        } else {
+                            self.paper.width = 100;
+                            self.paper.height = 272;
+                        }
+                    } else {
+                        self.paper.width = 100;
+                        self.paper.height = 272;
+                    }
+
+                });
+            },
+            async changeStyle(id) {//切換版型，抓回明細
+                let self = this;
+                this.elements.length = 0;
+                let obj = this.elements
+                let s = this.allStyle.find(x => x.styleID == id)
+                let size = this.allSize.find(x => x.id == s.paperSize)
+                this.paper.width = size.width;
+                this.paper.height = size.height;
+                this.rosterLimit = s.rosterLimit;
+                $("#paperSize").val(s.paperSize);
+                $("#backendInp").val(s.backendImg);
+                $("#printSize").val(s.printSize);
+                $("#printMode").val(s.printMode);
+                $("#perpage").val(s.printPageCount);
+                $("#rosterLimit").val(s.rosterLimit);
+                let img = this.bg.find(x => x.name == s.backendImg);
+                $(".tablet-paper").css({
+                    'background-image': 'url(' + (img ? img.path : "") + ')', 'background-size': '100% 100%',
+                    width: (size ? size.width : self.paper.width) + "mm",
+                    height: (size ? size.height : self.paper.height) + "mm",
+                })
+                await axios
+                    .post(HTTP_HOST + 'api/tablet/GetStyleDetailData', { styleID: id })
+                    .then(response => {
+                        if (response.status == "200") {
+                            let data = response.data;
+                            if (data.result == "Y") {
+                                let details = data.data;
+                                $(".tablet-paper").empty()
+                                details.forEach(el => {
+
+                                    let te = self.tabletElements.find(x => {
+                                        return x.elementID == el.elementID
+                                    });
+                                    let config = {
+                                        id: el.elementID,
+                                        type: te.elementType,
+                                        text: te.sampleContent.replaceAll("\\n", "\n"),
+                                        x: el.startX, y: el.startY,
+                                        style: {
+                                            fontSize: el.fontSize,
+                                            fontFamily: "Kaiti",
+                                            isVertical: true,
+                                            letterSpacing: 5, lineHeight: 1.5,
+                                            visibility: el.isActive,
+                                        },
+
+                                        width: el.width,
+                                        height: el.height,
+                                        textWidth: el.textWidth,
+                                        textHeight: el.textHeight,
+                                        breakLen: el.breakLen,
+                                        backendInp: el.backendImg
+                                    };
+
+                                    obj.push(config)
+
+                                })
+
+                                this.render();
+                            }
+                        }
+                    });
             },
             changeBg() {
                 let path = this.bg.find(el => el.name == $("#backendInp").val())
                 $(".tablet-paper").css({ 'background-image': 'url(' + path.path + ')', 'background-size': '100% 100%' })
+            },
+            changePrintSize() {
+
             },
             changePaper() {
                 let paperSize = $("#paperSize").val()
-                let size = this.allSize.find(x => x.name == paperSize)
+                let self = this;
+                if (paperSize == "newsize") {
+                    $("#sizeDiv").attr("style", "display:");
+                } else {
+                    console.log("paperSize:", paperSize);
+                    let size = this.allSize.find(x => x.id == paperSize)
                     $(".tablet-paper").css({
                         "background-color": "white",
-                    width: size.width + "mm",
+                        width: (size ? size.width : self.paper.width) + "mm",
-                    height: size.height + "mm",
+                        height: (size ? size.height : self.paper.height) + "mm",
                     });
+                }
+            },
+            async savePaperSize() {
+                let ps = {
+                    paperName: $("#paperName").val(),
+                    width: $("#paperWidth").val(),
+                    height: $("#paperHeight").val()
+                }
+                console.log(ps);
+                await axios
+                    .post(HTTP_HOST + 'api/tablet/SavePaperSize', ps)
+                    .then(response => {
+                        if (response.status == "200") {
+                        }
+                    });
+
+            },
+            changeRosterLimit() {
+                this.rosterLimit = parseInt($("#rosterLimit").val());
             },
             changePrintMode() {
 
             },
             bindEvents() {
                 // 文字變更連動渲染
+                //$('#rosterLimit').on('input', (e) =>this.)
                 $('#inp-text').on('input', (e) => this.updateActive('text', $(e.target).val()));
                 $('#inp-size').on('input', (e) => this.updateActive('fontSize', $(e.target).val()));
+                $('#width').on('input', (e) => this.updateActive('width', $(e.target).val()))
+                $('#2offset').on('input', (e) => this.updateActive('2offset', $(e.target).val()))
+                $('#3offset').on('input', (e) => this.updateActive('3offset', $(e.target).val()))
+                $('#4offset').on('input', (e) => this.updateActive('4offset', $(e.target).val()))
+                $('#breakLen').on('input', (e) => this.updateActive('breakLen', $(e.target).val()))
+                $('#width').on('input', (e) => this.updateActive('width', $(e.target).val()))
+                $('#height').on('input', (e) => this.updateActive('height', $(e.target).val()))
+                $('#textWidth').on('input', (e) => this.updateActive('textWidth', $(e.target).val()))
+                $('#textHeight').on('input', (e) => this.updateActive('textHeight', $(e.target).val()))
                 $(document).on('mousedown', '.tablet-element', (e) => {
                     e.stopPropagation();
                     this.select($(e.currentTarget).attr('id'));
                 });
             },
-
             loadConfig() {
                 $.ajax({
                     type: "POST", url: "TabletDesigner.aspx/GetConfig", contentType: "application/json",
@@ -259,18 +633,25 @@
                     }
                 });
             },
-
             // 處理分頁渲染邏輯
             render() {
+                $(".tablet-paper").empty();
                 //const $canvas = $('#canvas').empty();
                 const roster = this.elements.find(e => e.type === 'roster');
                 const names = roster ? roster.text.split('\n').filter(s => s.trim()) : [];
                 const pages = Math.max(1, Math.ceil(names.length / this.rosterLimit));
-
+                let style = this.allStyle.find(x => x.styleID == this.styleID);
+                let size = this.allSize.find(x => x.id == style.paperSize);
+                console.log(this.paper, size);
                 //for (let p = 0; p < pages; p++) {
                 //    const $paper = $('<div class="tablet-paper"></div>')
                 //        .css({ "background-color": "red", width: this.paper.width + 'mm', height: this.paper.height + 'mm' });
-                let $paper = $(".tablet-paper").css({ "background-color": "white", width: this.paper.width + 'mm', height: this.paper.height + 'mm', position: "absolute" });
+                let $paper = $(".tablet-paper").css({
+                    "background-color": "white",
+                    width: (size ? size.width : this.paper.width) + 'mm',
+                    height: (size ? size.height : this.paper.height) + 'mm',
+                    position: "absolute"
+                });
                 //const slice = names.slice(p * this.rosterLimit, (p + 1) * this.rosterLimit);
                 const slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
                 this.elements.forEach(el => {
@@ -278,6 +659,10 @@
                 });
                 //$canvas.append($paper);
                 //}
+
+                //let s = this.allStyle.find(x => x.styleID == this.styleID);
+                //let d = this.elements.filter(x => x.styleID == this.styleID);
+                //console.log(s,d);
                 this.makeDraggable();
             },
 
@@ -299,29 +684,136 @@
                 else if (el.id === 'address') {
                     html = el.text.replace(/(\d+)/g, '<span class="tate-chu-yoko">$1</span>');
                 }
+                else if (el.id === 'title1') {
+                    html = this.renderNameList(slice, el);
+                }
+                else if (el.id === 'alive') {
+                    html = this.renderLiveList(slice, el);
+                }
                 else {
                     html = el.text;
                 }
               
                 return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`)
                     .css({
-                        position: "absolute", left: this.getPosInMm(el.x) + "mm", top: this.getPosInMm(el.y) + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
+                        position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
+                        //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);
             },
-
+            renderNameList(names, el) {
+                let $namelist = $(`<div class='nameList'></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": "BiauKai",
+                    "letter-spacing": "0.1em",
+                    "column-gap": "1px",
+                    "row-gap": "1px",
+                    "align-items": "center",
+                });
+                let self = this;
+                names.forEach(n => {
+                    $namelist.append(self.renderNameSpan(n, el))
+                })
+                return $namelist;
+            },
+            renderNameSpan(name, el) {
+                return $(`<span>${name}</span>`).css({
+                    display: "block",
+                    "min-height": `${el.textHeight}px`,
+                    "max-height": `${el.height}px`,
+                    width: `${el.textWidth}px`,
+                    "text-align": "justify",
+                    "text-align-last": "justify",
+                    "margin-bottom": "40px",
+                    "margin-left": "5px",
+                    "text-justify": "inter-character",
+                });
+            },
+            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": "BiauKai",
+                    "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`,
+                    "text-align": "justify",
+                    "text-align-last": "justify",
+                    "margin-bottom": "15px",
+                    "margin-left": "5px",
+                    "text-justify": "inter-character",
+                });
+            },
             // 品字佈局邏輯：一上二下
             renderRoster(names, el) {
                 if (!names.length) return '';
                 const mid = names.length === 1 ? 1 : Math.floor(names.length / 2);
                 const top = names.slice(0, mid);
                 const bot = names.slice(mid);
-                const size = this.autoScale(names, el.style.fontSize);
+                const size = this.autoScale(names, el.fontSize);
                 
-                let h = `<div class="roster-container" style="gap:${el.style.itemSpacing || 20}px">`;
+
-                h += `<div class="name-group">${top.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
+                let h = $(`<div class=""></div>`).css(
-                if (bot.length) h += `<div class="name-group">${bot.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
+                    {
-                return h + `</div>`;
+                        width: el.width, height: el.height,
+                        "writing-mode": "vertical-rl", /* 直書 */
+                        display: "flex",
+                        "flex-direction": "row",     /* 上下分層 (Top / Bottom) */
+                        "align-items": "center",    /* 左右置中對齊 */
+                        "justify-content": "start",
+                        gap: "20px",
+                    });
+                //h.append(
+                //    $(`<div class="name-group">${top.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`)
+                //)
+                //if (bot.length) h.append(`<div class="name-group">${bot.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`)
+                //h += `<div class="name-group">${top.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
+                ///if (bot.length) h += `<div class="name-group">${bot.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
+                //return h + `</div>`;
+                h.append(this.renderNameGroups(top,el));
+                if (bot.length) h.append(this.renderNameGroups(bot,el));
+                return h
+            },
+            renderNameGroups(items,el) {
+                let g = $(`<div ></div>`).css({
+                    "display": "flex",
+                    "flex-direction": "column",
+                    "justify-content": "center",
+                    "height": el.textHeight,
+                })
+                items.forEach(x => {
+                    g.append($(`<div class="" style="font-size:${el.style.fontSize}pt;letter-spacing: 10px;">${x}</div>`))
+                })
+                return g;
             },
 
             autoScale(names, base) {
@@ -343,10 +835,8 @@
                         const el = self.elements.find(x => x.id === id);
                         el.x = self.getPosInMm(ui.position.left);
                         el.y = self.getPosInMm(ui.position.top);
-
-                        console.log(id, el)
                         //console.log(id,ui.position.left, ui.position.top,ui.offset.left,ui.offset.top);
-                        $(`.tablet-element[id="${id}"]`).css({ left: el.x + "mm", top: el.y + "mm" });
+                        $(`.tablet-element[id="${id}"]`).css({ left: el.startX + "mm", top: el.startY + "mm" });
                     }
                 });
             },
@@ -359,22 +849,34 @@
                 $('#inp-size').val(el.style.fontSize);
                 $('#xPosition').val(el.x);
                 $("#yPosition").val(el.y);
-                $('#TwoOffset').val(el.TwoOffset);
+                $('#2offset').val(el.twoOffset);
-                $("#ThreeOffset").val(el.ThreeOffset);
+                $("#3offset").val(el.threeOffset);
-                $("#FourOffset").val(el.FourOffset);
+                $("#4offset").val(el.fourOffset);
+                $("#breakLen").val(el.breakLen);
+                $("#width").val(el.width);
+                $("#height").val(el.height);
+                $("#textWidth").val(el.textWidth);
+                $("#textHeight").val(el.textHeight);
 
                 //this.render();
             },
 
             updateActive(key, val) {
                 const el = this.elements.find(x => x.id === this.activeId);
-                console.log(this.activeId, el)
+
                 if (key === 'fontSize') el.style.fontSize = parseFloat(val);
+                else if (key === 'width') el.width = parseFloat(val);
+                else if (key === 'breakLen') el.breakLen = parseInt(val);
+                else if (key === '2offset') el.twoOffset = parseFloat(val);
+                else if (key === '3offset') el.threeOffset = parseFloat(val);
+                else if (key === '4offset') el.fourOffset = parseFloat(val);
                 else el[key] = val;
+                console.log("activeId:",this.activeId)
                 if (el.type == "roster") {
                     const names = el.text.split('\n').filter(s => s.trim());
+
                     $(`.tablet-element[id="${this.activeId}"]`).css({
-                        position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
+                        position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
                     }).html(this.renderRoster(names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit), el));
                 } else if (el.type == "combined-center") {
                     const parts = el.text.split('\n');
@@ -382,6 +884,20 @@
                                 <span class="main-name" >${parts[0] || ''}</span>
                                 <span class="sub-text">${parts[1] || ''}</span>
                             </div>`;
+                    $(`.tablet-element[id="${this.activeId}"]`).css({
+                        position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
+                    }).html(html);
+                } else if (this.activeId === "title1") {
+                    let names = el.text.split('\n').filter(s => s.trim());
+                    let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
+                    html = this.renderNameList(slice, el);
+                    $(`.tablet-element[id="${this.activeId}"]`).css({
+                        position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
+                    }).html(html);
+                } else if (this.activeId === "alive") {
+                    let names = el.text.split('\n').filter(s => s.trim());
+                    let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
+                    html = this.renderLiveList(slice, el);
                     $(`.tablet-element[id="${this.activeId}"]`).css({
                         position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
                     }).html(html);
@@ -393,11 +909,8 @@
                 //this.render();
             },
             displayItem(id) {
-                console.log(id);
                 let el = this.elements.find(x => x.id === id);
-                console.log("before:", el);
                 el.style.visibility = el.style.visibility === "hidden" ? "" : "hidden";
-                console.log("after:", el, el.x, el.y);
                 $("#" + id).css({
                     position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
                 })
@@ -424,7 +937,7 @@
                 //this.render();
             },
             addElement() {
-                console.log("QQQ");
+                //console.log("QQQ");
             },
             wrapImageInSvg(imageBase64) {
                 // 建立一個簡單的 SVG 字串，將圖片鋪滿
@@ -445,10 +958,9 @@
             },
             bindBackend() {
                 $("#backendInp").on('change', function (e) {
-                    console.log($("#backendInp"))
+
                     const input = e.target;
                     if (input.files && input.files[0]) {
-                        console.log("file:", input.files[0]);
                         const file = input.files[0];
 
                         // 1. 先讀取檔案轉成 Base64
@@ -458,7 +970,6 @@
 
                             // 2. 將 Base64 PNG 包裝成 SVG
                             //const svgDataUri = this.wrapImageInSvg(base64Image);
-                            console.log(base64Image)
                             // 3. 設定到底圖
                             //this.service.setBackground(svgDataUri);
                             $(".tablet-paper").css({ 'background-image': 'url(' + base64Image + ')', 'background-size': '100% 100%' })
@@ -468,25 +979,39 @@
                     }
                 })
             },
-            saveStyle() {
+            async saveStyle() {
-                let master = {
+
-                    styleID: "", styleName: $("#styleName").val(), paperSize: $("#paperSize").val(),
-                    backendImg: $("#backendInp").val(), printSize: $("#printSize").val(), printMode: $("#printMode").val(),
-                    orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val()
-                }
                 let detail = [
 
                 ];
 
                 this.elements.forEach((el) => {
                     detail.push({
-                        elementID: el.id, startX: el.x, startY: el.y, fontSize: el.style.fontSize, fontFamily: el.style.fontFamily,
+                        elementID: el.id, startX: el.x.toString(), startY: el.y.toString(), fontSize: el.style.fontSize, fontFamily: el.style.fontFamily,
                         breakLen: el.breakLen, twoOffset: el.twoOffset, threeOffset: el.threeOffset, fourOffset: el.fourOffset,
-                        isActive: el.style.visibility
+                        isActive: el.style.visibility, width: el.width, height: el.height, textWidth: el.textWidth, textHeight: el.textHeight
                     });
                 });
-
+                let sID = this.styleID
-                console.log(master,detail);
+                if (sID == "000001") {
+                    this.styleID = ""
+                }
+                let master = {
+                    styleID: this.styleID, styleName: $("#styleName").val(), paperSize: $("#paperSize").val(),
+                    backendImg: $("#backendInp").val(), printSize: $("#printSize").val(), printMode: $("#printMode").val(),
+                    orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(), rosterLimit: $("#rosterLimit").val(),
+                    detail: detail
+                }
+                console.log(master);
+                let path = "SavDegignerData";
+                if (this.styleID != null && this.styleID != "") {
+                    path = "UpdateDegignerData"
+                }
+                await axios
+                    .post(HTTP_HOST + `api/tablet/${path}`, master)
+                    .then(response => {
+                        console.log(response);
+                    });
             }
         };
 

web/admin/item/TabletDesigner.aspx.cs

@@ -23,6 +23,10 @@ public class TabletElement
     public double? threeOffset { get; set; }
     public double? fourOffset { get; set; }
     public int? breakLen { get; set; }
+    public string backendInp { get; set; }
+    public double? textWidth { get; set; }
+    public double? textHeight { get; set; }
+ 
 }
 
 public class ElementStyle
@@ -43,7 +47,12 @@ public partial class admin_item_TabletDesigner :MyWeb.config
     {
 
     }
+    [WebMethod]
+    public static string SaveDesigner()
+    {
 
+        return "";
+    }
     [WebMethod]
     public static string GetConfig()
     {
@@ -52,12 +61,13 @@ public partial class admin_item_TabletDesigner :MyWeb.config
         {
             elements = new List<TabletElement> {
                 new TabletElement {
-                    id = "address", type = "address", text = "台中市潭子區中山路", x = 160, y = 80,
+                    id = "address", type = "address", text = "台中市潭子區中山路", x = 60, y = 80,
                     style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5,visibility="" }
                 },
                 new TabletElement {
-                    id = "title1", type = "ancestor", text = "牌位正名", x = 130, y = 80,
+                    id = "title1", type = "ancestor", text = "張一\n李二\n陳三\n吳四\n劉五\n趙六\n林七\n徐八", x = 50, y = 80,
-                    style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
+                     width=136,height=600,textWidth=20,textHeight=90,
+                    style = new ElementStyle { fontSize = 16, fontFamily = "Kaiti", isVertical = true, letterSpacing = 1, lineHeight = 1 ,visibility="" }
                 },
                 new TabletElement {
                     id = "lefttitle", type = "ancestor", text = "左正名", x = 10, y = 80,

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

@@ -67,10 +67,10 @@
 
 /* 名單金字塔佈局容器 */
 .roster-container {
-  width: 100%; height: 100%;
+  width: 100%; height: 600px;
   writing-mode: vertical-rl; /* 直書 */
   display: flex;
-  //flex-direction: column; /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
+  /*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
   flex-direction: row;     /* 上下分層 (Top / Bottom) */
   align-items: center;    /* 左右置中對齊 */
   justify-content: center;
@@ -95,12 +95,13 @@
 
 .roster-name {
   text-orientation: upright;
-  font-weight: bold;
+  /*font-weight: bold;*/
   white-space: nowrap;
   line-height: 1.2;
   font-family: 'Kaiti', serif;
   /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
-/*  width: fit-content;*/
+  width: fit-content;
+  height:200px;
 }
 
 

web/admin/order/detail.aspx

@@ -0,0 +1,13 @@
+<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="detail.aspx.cs" Inherits="admin_order_detail" %>
+
+<asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server">
+</asp:Content>
+<asp:Content ID="Content2" ContentPlaceHolderID="page_nav" Runat="Server">
+</asp:Content>
+<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
+</asp:Content>
+<asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" Runat="Server">
+</asp:Content>
+<asp:Content ID="Content5" ContentPlaceHolderID="footer_script" Runat="Server">
+</asp:Content>
+

web/admin/order/detail.aspx.cs

@@ -0,0 +1,14 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.UI;
+using System.Web.UI.WebControls;
+
+public partial class admin_order_detail : System.Web.UI.Page
+{
+    protected void Page_Load(object sender, EventArgs e)
+    {
+
+    }
+}

web/admin/order/index3.aspx

@@ -0,0 +1,708 @@
+<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="index3.aspx.cs" Inherits="admin_order_index3" %>
+<%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
+<asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
+</asp:Content>
+<asp:Content ID="Content2" ContentPlaceHolderID="page_nav" runat="Server">
+       
+</asp:Content>
+<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
+    <uc1:alert runat="server" ID="L_msg" Text="" />
+
+    <keep-alive>
+        <component
+            :is="currentView" :form-data="$data">
+
+        </component>
+    </keep-alive>  
+
+
+<div id="print_data">
+</div>        
+</asp:Content>
+<asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" runat="Server">
+        
+</asp:Content>
+<asp:Content ID="Content5" ContentPlaceHolderID="footer_script" runat="Server">
+       <script>
+           Vue.filter('timeString', function (value, myFormat) {
+               return value == null || value == "" ? "" : moment(value).format(myFormat || 'YYYY-MM-DD, HH:mm:ss');
+           });
+      
+
+           Vue.component('step-one', {
+               
+               template: `
+                    <div  class="container-fluid">
+                        <v-data-table 
+                            v-model="data_table.selected"
+                            :items="data_table.list"
+                            :search-props="search"
+                            item-key="order_no"
+                            :options.sync="options"
+                            :headers="data_table.header"
+                            :footer-props="data_table.footer"
+                            :server-items-length="data_table.count"
+                            :loading="data_table.loading"
+                            :single-select="data_table.singleSelect"
+                            show-select
+                            hide-default-footer
+                            :page.sync="data_table.page"
+                            :items-per-page.sync="data_table.pageSize"
+                            class="elevation-1">
+                            <template #item.up_time="{ item }" >
+                                 {{ item.up_time|timeString('YYYY/MM/DD') }} 
+                            </template>     
+                            <template #item.u_name="{ item }" >
+                                 <a v-if="item.f_num != null && item.activity_num != null" @click="checkInMsg(item)"  class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-account-check"></i>報到</a>
+                                 {{ item.u_name }} 
+                            </template> 
+                            <template #item.slot_btn="{ item }">
+                                <a :href="'reg.aspx?order_no='+item.order_no" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-pencil-box-outline"></i>修改</a>
+                                <a @click="$root.currentView='step-two';$root.selected_act=item.num" class="btn btn-outline-secondary btn-sm">明細</a>
+                                <a @click="deleteItem(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-trash-can"></i>刪除</a>         
+                            </template>
+                        </v-data-table> 
+                        <v-container>
+                            <v-row class="align-baseline" wrap>
+                                <v-col cols="12" md="9">
+                                    <v-pagination
+                                        v-model="data_table.page"
+                                        :length="pageCount">
+                                    </v-pagination>
+                                </v-col>
+                                <v-col class="text-truncate text-right" cols="12" md="2">
+                                    共 {{ data_table.count }} 筆, 頁數:
+                                </v-col>
+                                <v-col cols="6" md="1">
+                                    <v-text-field
+                                        v-model="data_table.page"
+                                        type="number"
+                                        hide-details
+                                        dense
+                                        min="1"
+                                        :max="pageCount"
+                                        @input="data_table.page = parseInt($event, 10)"
+                                    ></v-text-field>
+                                </v-col>                                
+                            </v-row>
+                        </v-container>
+                     </div>`,   
+               props: ['formData'],
+               data() {
+                   return {
+                       this_act: '<%= Request["act_id"]%>',
+                       options: { multiSort: false },
+                       search_options: { multiSort: false },
+
+                       data_table: {
+                           loading: true,
+                           list: [],
+                           selected: [],
+                           singleSelect: false,
+                           count: 0,
+                           page: 1,
+                           pageSize: 10,
+                           header: [
+                               { text: '活動分類', value: 'kindsTxt' },
+                               { text: '活動名稱', value: 'subject' },
+                               { text: '開始日期', value: 'startDate_solar' },
+                               { text: '結束日期', value: 'endDate_solar', align: 'start' },
+                               { text: '報名人數', value: 'orderCounts' },
+                               { text: '', value: 'slot_btn', sortable: false, align: 'end' }
+                           ],
+                           footer: {
+                               showFirstLastPage: true,
+                               itemsPerPageOptions: [5, 10, 20, 30],
+                           },
+                       },
+                       //列印管理報表
+                       print_conditions: 'yy',
+                       print_search: {
+                           year: '',
+                           month: '',
+                           season: '',
+                           chk_hasact: false,
+                           chk_noact: false,
+                           select_act: '',
+                           select_actitem: '',
+
+                       },
+                       select_act_list: [],
+                       select_items: {
+                           month: [{
+                               text: "請選擇",
+                               val: 0
+                           },],
+                           season: [{
+                               text: "請選擇",
+                               val: 0
+                           },],
+                       },
+                       print_dialog: {
+                           show: false,
+                       },
+                       search_dialog: {
+                           controls: {
+                               search1: {
+                                   id: 'search1',
+                                   title: '國籍',
+                                   text_prop: 'name_zh',
+                                   value_prop: 'id',
+                                   keys: [
+                                       { id: 'keyword', title: '關鍵字' },
+                                   ],
+                                   api_url: HTTP_HOST + 'api/country/GetList',
+                                   columns: [
+                                       { id: 'id', title: '代碼' },
+                                       { id: 'name_en', title: '英文短名稱' },
+                                       { id: 'name_zh', title: '中文名稱' },
+                                   ],
+                                   selected: {},
+                                   select(item, t) {
+                                       //console.log("select search1", t);
+                                       t.search.country = item.id;
+                                       t.search.country2 = '';
+                                   }
+                               },
+                               search2: {
+                                   id: 'search2',
+                                   title: '報名活動',
+                                   text_prop: 'subject',
+                                   value_prop: 'num',
+                                   keys: [
+                                       { id: 'subject', title: '活動名稱', value: '' },
+                                       { id: 'kindTxt', title: '活動分類' },
+                                   ],
+                                   api_url: HTTP_HOST + 'api/activity/GetList',
+                                   columns: [
+                                       { id: 'subject', title: '活動名稱' },
+                                       { id: 'kindTxt', title: '活動分類' },
+                                   ],
+                                   selected: {},
+                                   select(item, t) {
+                                       t.print_search.select_act = item.num;
+                                   }
+                               },
+                               search3: {
+                                   id: 'search3',
+                                   title: '活動品項',
+                                   text_prop: 'subject',
+                                   value_prop: 'num',
+                                   keys: [
+                                       { id: 'subject', title: '項目名稱', value: '' },
+                                       { id: 'kindTxt', title: '項目分類' },
+                                       { id: 'num', visible: false },
+                                   ],
+                                   api_url: HTTP_HOST + 'api/activity/GetOrderList',
+                                   columns: [
+                                       { id: 'subject', title: '項目名稱' },
+                                       { id: 'kindTxt', title: '項目分類' },
+                                   ],
+                                   selected: {},
+                                   select(item, t) {
+                                       t.print_search.select_actitem = item.num;
+                                   }
+                               }
+
+                           }, show: false,
+                           current: {},
+                           list: [],
+                           count: 0,
+                           page: 1,
+                           loading: false,
+                           footer: {
+                               showFirstLastPage: true,
+                               disableItemsPerPage: true,
+                               itemsPerPageAllText: '',
+                               itemsPerPageText: '',
+                           },
+                       },
+                       search: {
+                           keyin1: '',
+                           order_no: '',
+                           subject: '',
+                           u_name: '',
+                           up_time1: '',
+                           up_time2: '',
+                           actItemTxt: '',
+                           introducerTxt: '',
+                           activity_num: '',
+                           country: '',
+                           country2: '',
+                           hasPrice: '',
+                       }
+                       //報到
+                       , check_dialog: {
+                           show: false,
+                       },
+                       check_data: {
+                           f_num: 0,
+                           u_name: '',
+                           activity_num: 0,
+                           activity_name: '',
+                           qty: 1,
+                           status: {
+                               text: '',
+                               val: 1
+                           },
+                       },
+                       keyin1_items: [//狀態
+                           //{ 
+                           //text: "請選擇",
+                           //val: 0
+                           //},
+                       ],
+                   };
+               },
+               mounted() {
+                   this.detalKeyinArray();
+                   this.search_dialog.current = this.search_dialog.controls.search1 ///default
+                   if (this.this_act != '')
+                       this.search.activity_num = this.this_act;
+                   //this.initPrintSearch();
+                   //this.initActivity();
+                   const navEntries = performance.getEntriesByType("navigation");
+                   const isReload = navEntries.length > 0 && navEntries[0].type === "reload";
+                   if (isReload) {
+                       sessionStorage.removeItem("orderpage");
+                   }
+                   else {
+                       const savedPage = parseInt(sessionStorage.getItem('orderpage'));
+                       if (savedPage) {
+                           this.options.page = savedPage;
+                       }
+                   }
+               },
+               watch: {
+                   options: {
+                       handler() {
+                           this.getDefault()
+                       },
+                       deep: true,
+                   },
+                   search_options: {
+                       handler() {
+                           this.search_get()
+                       },
+                       deep: true,
+                   },
+               },
+               methods: {
+                   search_show(curr) {
+                       //console.log("btn_click:", curr, curr.api_url);
+                       this.search_dialog.current = curr;
+                       this.search_clear()
+                       //this.search_get()//清除完自動會重抓, 故取消
+                       this.search_dialog.show = true;
+                   },
+                   search_clear() {
+                       if (!this.search_dialog.current.keys) return;
+                       this.search_dialog.current.keys.forEach((t, i) => { t.value = '' })
+                       this.search_get()
+                   },
+                   search_get() {
+                       if (!this.search_dialog.current.keys) return;
+                       let api_url = this.search_dialog.current.api_url;
+                       let keys = this.search_dialog.current.keys;
+                       //const { page, itemsPerPage } = this.options
+                       //const { sortBy, sortDesc, page, itemsPerPage } = this.options
+                       this.search_dialog.page = this.search_options.page ?? 1
+                       let params = { page: this.search_dialog.page, pageSize: 10 };//url params
+                       var search = {};//post body
+                       keys.forEach((t, i) => {
+                           search[t.id] = t.value;
+                       });
+                       //necessary parameter===
+                       if (this.search_dialog.current.id == 'search2') {
+                           params = { sortBy: 'startDate_solar', sortDesc: true, page: this.search_dialog.page, pageSize: 10 };//url params
+                       }
+
+                       console.log("search_get", api_url, search, params, this.search_options);
+                       this.search_dialog.loading = true
+                       axios.post(api_url, search, { params: params })
+                           .then(response => {
+                               this.search_dialog.list = response.data.list
+                               this.search_dialog.count = response.data.count
+                               this.search_dialog.loading = false
+                           })
+                           .catch(error => {
+                               console.log(error)
+                               this.search_dialog.list = []
+                               this.search_dialog.count = 0
+                               this.search_dialog.loading = false
+                               this.snackbar.text = "錯誤:" + error
+                               this.snackbar.show = true
+                           })
+                   },
+                   search_headers() {
+                       if (!this.search_dialog.current.columns) return;
+                       r = [];
+                       this.search_dialog.current.columns.forEach((t, i) => {
+                           r.push({
+                               text: t.title,
+                               align: 'start',
+                               sortable: false,
+                               value: t.id,
+                           })
+                       })
+                       return r
+                   },
+                   search_select(row) {
+                       let curr = this.search_dialog.current;
+                       let target = $(`[data-search-control=${curr.id}]`);
+                       curr.selected = row;
+                       target.children("input.search-text").val(curr.selected[curr.text_prop])//text
+                       target.children("input:hidden").val(curr.selected[curr.value_prop])//value
+                       if (curr.select instanceof Function) {
+                           curr.select(row, this);
+                       }
+                       this.search_dialog.show = false;
+                       //console.log(row, row["u_name"], row["f_number"], curr.id, target);
+                   },
+                   getDetail(clearpage = false) {
+                       console.log("test");
+                       const { sortBy, sortDesc, page, itemsPerPage } = this.options
+                       const params = {
+                           sortBy: sortBy[0], sortDesc: sortDesc[0],
+                           page: clearpage ? '1' : page, pageSize: itemsPerPage
+                       };
+                       this.detail_table.loading = true
+                       sessionStorage.setItem('orderpage', clearpage ? '1' : page);
+                       axios
+                           //.post(HTTP_HOST + 'api/order/GetList', this.search, { params: params })
+                           .post(HTTP_HOST + 'api/order/GetList', this.search, { params: params })
+                           .then(response => {
+                               this.detail_table.list = response.data.list
+                               this.detail_table.count = response.data.count;
+                               this.detail_table.loading = false
+                           })
+                           .catch(error => console.log(error))
+                   },
+                   getDefault(clearpage = false) {
+                       const { sortBy, sortDesc, page, itemsPerPage } = this.options
+                       const params = {
+                           sortBy: sortBy[0], sortDesc: sortDesc[0],
+                           page: clearpage ? '1' : page, pageSize: itemsPerPage
+                       };
+                       this.data_table.loading = true
+                       sessionStorage.setItem('orderpage', clearpage ? '1' : page);
+                       axios
+                           //.post(HTTP_HOST + 'api/order/GetList', this.search, { params: params })
+                           .post(HTTP_HOST + 'api/activity/GetList', this.search, { params: params })
+                           .then(response => {
+                               this.data_table.list = response.data.list
+                               this.data_table.count = response.data.count;
+                               this.data_table.loading = false
+                           })
+                           .catch(error => console.log(error))
+                   },
+                   detalKeyinArray() {
+                       var getArray = <%=Newtonsoft.Json.JsonConvert.SerializeObject(_keyin1Item, Newtonsoft.Json.Formatting.Indented) %>;
+                       var keys = Object.keys(getArray);
+                       for (let i = 0; i < keys.length; i++) {
+                           //console.log(`${keys[i]}:${getArray[keys[i]]}`); //value : text
+                           var _tmp = {
+                               text: getArray[keys[i]],
+                               val: parseInt(keys[i]),
+                           }
+                           this.keyin1_items.push(_tmp);
+                       }
+
+                   },
+                   editItem(item) {
+                       console.log("edit", item);
+                   },
+                   deleteItem(item) {
+                       if (confirm('是否確定刪除此筆資料?')) {
+                           const index = this.data_table.list.indexOf(item)
+                           if (index != -1) {
+                               axios
+                                   .delete(HTTP_HOST + 'api/order/' + item.order_no)
+                                   .then(response => {
+                                       console.log("del", item);
+                                       this.data_table.list.splice(index, 1);
+                                       this.data_table.count = this.data_table.list.length
+                                   })
+                                   .catch(error => console.log(error))
+                           }
+                       }
+                   },
+                   deleteAll() {
+                       if (confirm('是否確定刪除已勾選的資料?')) {
+                           axios
+                               .delete(HTTP_HOST + 'api/order/DeleteAll/' + this.data_table.selected.map(x => x.order_no))
+                               .then(response => {
+                                   //console.log("delAll");
+
+                                   //for (var i = 0; i < this.data_table.selected.length; i++) {
+                                   //    const index = this.data_table.list.indexOf(this.data_table.selected[i]);
+                                   //    this.data_table.list.splice(index, 1);
+                                   //}
+                                   //this.data_table.selected = [];
+                                   //this.data_table.count = this.data_table.list.length
+                                   location.reload();
+                               })
+                               .catch(error => console.log(error))
+                       }
+                   },
+                   btn_search() {
+                       this.this_act = '';
+                       this.search.activity_num = '';
+
+                       this.getDefault(true)
+                   },
+                   btn_all() {
+                       this.this_act = '';
+                       this.search.activity_num = '';
+                       clearObjProps(this.search);
+                       this.btn_search()
+                   },
+                   checkInMsg(item) {
+                       this.check_data.f_num = item.f_num;
+                       this.check_data.u_name = item.u_name;
+                       this.check_data.activity_num = item.activity_num;
+                       this.check_data.activity_name = item.subject;
+                       this.check_dialog.show = true;
+                   },
+                   checkIn() {
+                       if (this.check_data.qty > 0 && this.check_data.status.val > 0) {
+                           var chechdata =
+                           {
+                               f_num: this.check_data.f_num,
+                               activity_num: this.check_data.activity_num,
+                               status: this.check_data.status.val,
+                               qty: this.check_data.qty,
+                           }
+                           axios
+                               .post(HTTP_HOST + 'api/activity/OrderCheckIn', chechdata)
+                               .then(response => {
+                                   //清空
+                                   this.check_data.f_num = 0;
+                                   this.check_data.u_name = '';
+                                   this.check_data.activity_num = 0;
+                                   this.check_data.activity_name = '';
+                                   this.check_data.qty = 1;
+                                   this.check_data.status.text = '';
+                                   this.check_data.status.val = 1;
+
+                                   this.check_dialog.show = false;
+                                   msgtop('簽到成功')
+                               })
+                               .catch(
+                                   error => {
+                                       console.log(error)
+                                       msgtop('簽到失敗', 'error')
+                                   }
+                               )
+                       } else {
+                           msgbox('報到資訊請填寫完整');
+                       }
+                   }, goPrint() {
+                       let _qry = "";
+                       Object.keys(this.search).forEach(key => {
+                           //console.log(`${key}: ${this.search[key]}`);
+                           if (this.search[key] != undefined && this.search[key] != null && this.search[key] != '') {
+                               _qry += (_qry != '' ? '&' : '?') + (key + '=' + this.search[key]);
+                           }
+                       });
+                       window.open("print.aspx" + _qry, '_blank');
+                   },
+                   countryChange() {
+                       this.search.country = '';
+                       $('#country_txt').val('')
+                   },
+                   //列印管理報表
+                   print_close() {
+                       this.print_dialog.show = false;
+                   }
+                   ,
+                   initPrintSearch() {
+                       //下拉選單
+                       for (let i = 1; i <= 12; i++) {
+                           var _tmp = {
+                               text: i,
+                               val: i,
+                           }
+                           this.select_items.month.push(_tmp);
+                       }
+                       for (let i = 1; i <= 4; i++) {
+                           var _tmp = {
+                               text: i,
+                               val: i,
+                           }
+                           this.select_items.season.push(_tmp);
+                       }
+
+                       //預設值
+                       const Today = new Date();//現在日期時間
+                       const first_date = new Date(Today.getFullYear(), Today.getMonth(), 1); //本月第一天
+                       const last_month_date = new Date(first_date - 1); //上個月最後一天
+
+                       this.print_search.year = last_month_date.getFullYear();
+                       this.print_search.month = last_month_date.getMonth() + 1 //預設上個月的年份
+
+                       let _season = 1;
+                       const _month = first_date.getMonth() + 1; //本月
+                       if (_month >= 1 && _month <= 3) {
+                           _season = 4;
+                       } else if (_month >= 4 && _month <= 6) {
+                           _season = 1;
+                       } else if (_month >= 7 && _month <= 9) {
+                           _season = 2;
+                       } else if (_month >= 10 && _month <= 12) {
+                           _season = 3;
+                       }
+                       this.print_search.season = _season; //預設上一季
+
+                   },
+                   goPrint2() {
+                       if (this.print_search.year != '') {
+                           if (this.print_search.chk_noact || this.print_search.chk_hasact) {
+                               let _qry = "";
+                               Object.keys(this.print_search).forEach(key => {
+                                   if (this.print_search[key] != undefined && this.print_search[key] != null && this.print_search[key] != '') {
+                                       if (key == 'month') {
+                                           if (this.print_conditions == 'mm') {
+                                               _qry += "&month=" + this.print_search.month;
+                                           }
+                                       } else if (key == 'season') {
+                                           if (this.print_conditions == 'ss') {
+                                               _qry += "&season=" + this.print_search.season;
+                                           }
+                                       }
+                                       else {
+                                           _qry += (_qry != '' ? '&' : '?') + (key + '=' + this.print_search[key]);
+                                       }
+                                   }
+                               });
+
+                               this.print_dialog.show = false;
+                               window.open("print.aspx" + _qry, '_blank');
+                           } else {
+                               msgbox('活動/非活動至少勾選一項');
+                           }
+
+
+                       } else {
+                           msgbox('請輸入年份');
+                       }
+
+                   }, chk_hasact_change() {
+                       if (!this.print_search.chk_hasact) {
+                           //$('#activity_num_txt').val('')
+                           //this.print_search.select_act = '';
+                           this.clear_select_act();
+                           $('#activity_num_txt').attr("placeholder", "可選擇單一活動(需先勾選活動報名)");
+                       } else {
+                           $('#activity_num_txt').attr("placeholder", "可選擇單一活動");
+                       }
+
+                   },
+                   clear_select_act() {
+                       $('#activity_num_txt').val('')
+                       this.print_search.select_act = '';
+                   }, clear_select_actitem() {
+                       $('#actItem_num_txt').val('')
+                       this.print_search.select_actitem = '';
+                   },
+                   initActivity() {
+                       axios.get(HTTP_HOST + 'api/activity')
+                           .then(response => {
+                               this.select_act_list = response.data
+                           })
+                           .catch(error => {
+                               console.log(error)
+                           })
+                   }
+               },
+               computed: {
+                   pageCount() {
+                       return Math.ceil(this.data_table.count / this.data_table.pageSize)
+                   },
+               }
+           
+           });
+
+           Vue.component('step-two', {
+               template: `
+                 <div  class="container-fluid">QOO</div>
+               `,
+               props: ['oneData'],
+               activated() {
+                   console.log("yes ,go go");
+                   this.getDetail();
+               },
+               data() {
+                   return {
+                       options: { multiSort: false },
+                       search_options: { multiSort: false },
+                       detail_table: {
+                           loading: true,
+                           list: [],
+                           selected: [],
+                           singleSelect: false,
+                           count: 0,
+                           page: 1,
+                           pageSize: 10,
+                           header: [
+                               { text: '單號', value: 'order_no' },
+                               { text: '姓名', value: 'u_name' },
+                               { text: '報名日期', value: 'up_time' },
+                               { text: '單據狀態', value: 'keyin1_txt', align: 'start' },
+                               { text: '', value: 'slot_btn', sortable: false, align: 'end' }
+                           ],
+                           footer: {
+                               showFirstLastPage: true,
+                               itemsPerPageOptions: [5, 10, 20, 30],
+                           },
+                       }
+                 };
+               },
+               watch: {
+                   options: {
+                       handler() {
+                           this.getDetail()
+                       },
+                       deep: true,
+                   },
+                   
+               },
+               methods: {
+                   getDetail() {
+                       const { sortBy, sortDesc, page, itemsPerPage } = this.options
+                       const params = {
+                           sortBy: sortBy[0], sortDesc: sortDesc[0],
+                           page: clearpage ? '1' : page, pageSize: itemsPerPage,
+                           activity_num: $root.selected_act
+                       };
+                       this.detail_table.loading = true
+                       sessionStorage.setItem('orderpage', clearpage ? '1' : page);
+                       axios
+                           .post(HTTP_HOST + 'api/order/GetList', this.search, { params: params })
+                           .then(response => {
+                               this.detail_table.list = response.data.list
+                               this.detail_table.count = response.data.count;
+                               this.detail_table.loading = false
+                           })
+                           .catch(error => console.log(error))
+                   },
+               }
+           });
+
+
+           let VueApp = new Vue({
+               el: '#app',
+               vuetify: new Vuetify(),
+               data() {
+                   return {
+                       currentView: 'step-one',
+                       selected_act:'',
+                   };
+               }
+           });
+
+
+
+       </script>   
+</asp:Content>
+

web/admin/order/index3.aspx.cs

@@ -0,0 +1,284 @@
+using DocumentFormat.OpenXml;
+using DocumentFormat.OpenXml.Packaging;
+using DocumentFormat.OpenXml.Spreadsheet;
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Web;
+using System.Web.UI;
+using System.Web.UI.WebControls;
+using static Model.activity_check;
+
+public partial class admin_order_index3 : MyWeb.config
+{
+    private Model.ezEntities _db = new Model.ezEntities();
+    public Dictionary<int, string> _keyin1Item = null;
+    protected void Page_Load(object sender, EventArgs e)
+    {
+        if (!IsPostBack)
+        {
+
+            Model.pro_order order = new Model.pro_order();
+            ArrayList options = order.keyin1_list();
+            foreach (Model.pro_order.keyin optionKey in options)
+            {
+                ListItem item = new ListItem(optionKey.Text, optionKey.Value);
+                item.Attributes.Add("style", "color:" + optionKey.Color);
+                //s_keyin1.Items.Add(item);
+            }
+
+            _keyin1Item = publicFun.enum_desc<Model.activity_check.keyin1>(); //狀態
+            BuildKind();
+
+        }
+    }
+
+    public void detailButton_click(object sender, EventArgs e)
+    {
+    }
+    public void BuildKind()
+    {
+        //國籍
+        //s_country.Items.Clear();
+        //s_country.Items.Add(new ListItem("請選擇", ""));
+        var qry = _db.countries.OrderBy(x => x.range).ThenBy(x => x.name_en).ToList();
+        if (qry.Count > 0)
+        {
+            //foreach (var x in qry)
+                //s_country.Items.Add(new ListItem(x.name_zh, x.ID));
+        }
+
+    }
+    protected void excel_Click(object sender, EventArgs e)
+    {
+
+        //var memoryStream = new MemoryStream();
+        //using (var doc = SpreadsheetDocument.Create(memoryStream, SpreadsheetDocumentType.Workbook))
+        //{
+        //    var wb = doc.AddWorkbookPart();
+        //    wb.Workbook = new Workbook();
+        //    var sheets = wb.Workbook.AppendChild(new Sheets());
+
+        //    //建立第一個頁籤
+        //    var ws = wb.AddNewPart<WorksheetPart>();
+        //    ws.Worksheet = new Worksheet();
+        //    sheets.Append(new Sheet()
+        //    {
+        //        Id = wb.GetIdOfPart(ws),
+        //        SheetId = 1,
+        //        Name = "報名"
+        //    });
+
+        //    //設定欄寬
+        //    var cu = new Columns();
+        //    cu.Append(
+        //        new Column { Min = 1, Max = 1, Width = 15, CustomWidth = true },
+        //        new Column { Min = 2, Max = 4, Width = 10, CustomWidth = true },
+        //        new Column { Min = 5, Max = 5, Width = 15, CustomWidth = true },
+        //        new Column { Min = 6, Max = 8, Width = 25, CustomWidth = true },
+        //        new Column { Min = 9, Max = 9, Width = 15, CustomWidth = true },
+        //        new Column { Min = 10, Max = 10, Width = 10, CustomWidth = true },
+        //        new Column { Min = 11, Max = 11, Width = 25, CustomWidth = true },
+        //        new Column { Min = 12, Max = 16, Width = 10, CustomWidth = true },
+        //        new Column { Min = 17, Max = 20, Width = 10, CustomWidth = true }
+        //    );
+        //    ws.Worksheet.Append(cu);
+
+        //    //建立資料頁
+        //    var sd = new SheetData();
+        //    ws.Worksheet.AppendChild(sd);
+
+        //    //第一列資料
+        //    var tr = new Row();
+        //    tr.Append(
+        //        new Cell() { CellValue = new CellValue("單號"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("報名日期"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("單據狀態"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("姓名/名稱"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("聯絡電話"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("報名活動"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("收件地址"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("備註"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("項目名稱"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("姓名"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("代表地址"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("陽上/報恩者"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("開始日期"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("期滿日期"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("應續約日"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("劃位狀態"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("預設金額"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("數量"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("小計"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("已收金額"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("未收金額"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("付款期限"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("報名狀態"), DataType = CellValues.String },
+        //        new Cell() { CellValue = new CellValue("狀態備註"), DataType = CellValues.String }
+        //    );
+        //    sd.AppendChild(tr);
+
+        //    //查詢要匯出的資料
+        //    // ❌ 錯誤寫法: var aIDt = _db.actItems.Where(f => f.subject.Contains(s_actItemTxt.Value.Trim())).Select(f => f.num.ToString());
+        //    // 改為整數陣列，避免後續查詢中使用 .ToString()
+        //    var aIDt = _db.actItems.Where(f => f.subject.Contains(s_actItemTxt.Value.Trim())).Select(f => f.num).ToArray();//品項
+        //    var qry = _db.pro_order.AsQueryable();
+
+        //    if (!isStrNull(s_order_no.Value))
+        //        qry = qry.Where(o => o.order_no.Contains(s_order_no.Value.Trim()));
+        //    if (!isStrNull(s_u_name.Value))
+        //        qry = qry.Where(o => o.f_num.HasValue && o.follower.u_name.Contains(s_u_name.Value.Trim()));
+        //    if (!isStrNull(s_introducerTxt.Value))
+        //        qry = qry.Where(o => o.f_num.HasValue && o.follower1.u_name.Contains(s_introducerTxt.Value.Trim()));
+        //    if (!isStrNull(s_subject.Value))
+        //        qry = qry.Where(o => o.activity_num.HasValue && o.activity.subject.Contains(s_subject.Value.Trim()));
+        //    if (!isStrNull(s_actItemTxt.Value))
+        //    {
+        //        // ❌ 錯誤寫法: qry = qry.Where(o => o.pro_order_detail.Where(f2 => f2.order_no == o.order_no && aIDt.ToArray().Contains(f2.actItem_num.ToString())).Count() > 0);
+        //        // ✅ 實際比較：僅在 actItem_num 有值時才與整數陣列比對
+        //        qry = qry.Where(o => o.pro_order_detail.Any(f2 =>
+        //            f2.order_no == o.order_no &&
+        //            f2.actItem_num.HasValue &&
+        //            aIDt.Contains(f2.actItem_num.Value)));
+        //    }
+        //    if (!isStrNull(s_keyin1.SelectedValue))
+        //        qry = qry.Where(o => o.keyin1 == s_keyin1.SelectedValue);
+
+        //    if (!isStrNull(s_up_time1.Value) && isDate(s_up_time1.Value))
+        //        qry = qry.Where(o => o.up_time >= ValDate(s_up_time1.Value));
+        //    if (!isStrNull(s_up_time2.Value) && isDate(s_up_time2.Value))
+        //        qry = qry.Where(o => o.up_time < Convert.ToDateTime(s_up_time2.Value).AddDays(1));
+
+        //    qry = qry.OrderByDescending(o => o.reg_time);
+
+        //    MyWeb.encrypt encrypt = new MyWeb.encrypt();
+        //    var tdesc = publicFun.enum_desc<Model.pro_order.detailKeyin1>();
+
+        //    var bedDt = _db.bed_order_detail.AsQueryable();//掛單明細
+
+
+        //    //left join 使用 GroupJoin
+        //    //var list = qry.Join
+        //    var list = qry.GroupJoin(
+        //        _db.pro_order_detail, o => o.order_no, p => p.order_no, (o, c) =>
+        //        new
+        //        {
+        //            //訂單資料
+        //            order_no = o.order_no,
+        //            up_time = o.up_time,
+        //            keyin1 = o.keyin1,
+        //            f_num = o.follower != null ? o.follower.u_name : "", //姓名/名稱
+        //            phone = o.phone,
+        //            activity_num = o.activity_num.HasValue ? o.activity.subject : "",
+        //            address = o.address,
+        //            demo = o.demo,
+        //            c
+        //        }).SelectMany(o => o.c.DefaultIfEmpty(), (o, d) => //SelectMany 展開
+        //        new
+        //        {
+        //            //訂單資料
+        //            order_no = o.order_no,
+        //            up_time = o.up_time,
+        //            keyin1 = o.keyin1,
+        //            f_num = o.f_num, //姓名/名稱
+        //            phone = o.phone,
+        //            activity_num = o.activity_num,
+        //            address = o.address,
+        //            demo = o.demo,
+
+        //            //訂單明細
+        //            //使用DefaultIfEmpty 因匿名型別無法輸出NULL(無法轉換成強型別)，需特別注意Null的處理
+        //            d_actItem_num = d == null ? "" : (d.actItem_num.HasValue ? d.actItem.subject : ""), //項目名稱
+        //            d_category = d == null ? "" : (d.actItem_num.HasValue ? d.actItem.category.ToString() : ""),
+        //            d_f_num = d == null ? "" : (d.f_num.HasValue ? d.follower.u_name : ""), //姓名
+        //            d_address = d == null ? "" : d.address,
+        //            d_from_id = d == null ? "" : (d.from_id.HasValue ? d.follower1.u_name : ""), //陽上/報恩者
+        //            d_start_date = d == null ? "" : (d.start_date.HasValue ? d.start_date.Value.ToString("yyyy/MM/dd") : ""), //開始日期
+        //            d_due_date = d == null ? "" : (d.due_date.HasValue ? d.due_date.Value.ToString("yyyy/MM/dd") : ""), //期滿日期
+        //            d_extend_date = d == null ? "" : (d.extend_date.HasValue ? d.extend_date.Value.ToString("yyyy/MM/dd") : ""), //應續約日
+        //            d_price = d == null ? "" : (d.price.HasValue ? d.price.Value.ToString() : "0"), //預設金額
+        //            d_qty = d == null ? "" : (d.qty.HasValue ? d.qty.Value.ToString() : "0"), //數量
+        //            d_writeBedQty = d == null ? 0 : bedDt.Where(b => (b.bed_order.o_detail_id.Value == d.num) && b.checkIn_date.HasValue && b.bed_kind_detail_id.HasValue).Count(), //已劃數量
+        //            d_notBedQty = d == null ? 0 : bedDt.Where(b => b.bed_order.o_detail_id.Value == d.num && (!b.checkIn_date.HasValue || !b.bed_kind_detail_id.HasValue)).Count(), //未劃數量
+        //            d_pay = d == null ? "" : (d.pay.HasValue ? d.pay.Value.ToString() : "0"), //已收金額
+        //            d_pay_date = d == null ? "" : (d.pay_date.HasValue ? d.pay_date.Value.ToString("yyyy/MM/dd") : ""), //付款期限
+        //            d_keyin1 = d == null ? "" : (d.keyin1.HasValue && d.keyin1.Value > 0 ? tdesc[d.keyin1 ?? 1] : ""), //報名狀態
+        //            d_demo = d == null ? "" : d.demo, //狀態備註
+        //        }).ToList();
+
+
+
+
+
+        //    if (list.Count > 0)
+        //    {
+        //        foreach (var item in list)
+        //        {
+        //            //新增資料列
+        //            tr = new Row();
+        //            tr.Append(
+        //                new Cell() { CellValue = new CellValue(item.order_no), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.up_time.Value.ToString("yyyy/MM/dd")), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(Model.pro_order.keyin1_value_to_text(item.keyin1)), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.f_num), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(encrypt.DecryptAutoKey(item.phone)), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.activity_num), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.address), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.demo), DataType = CellValues.String },
+
+        //                new Cell() { CellValue = new CellValue(item.d_actItem_num), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.d_f_num), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.d_address), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.d_from_id), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.d_start_date), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.d_due_date), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.d_extend_date), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue((Val(item.d_category) == (int)Model.activity.category.Order) ? (item.d_notBedQty + "/" + item.d_writeBedQty) : ""), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue("$" + ValMoney(item.d_price)), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.d_qty), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue("$" + ValMoney(ValFloat(item.d_price) * Val(item.d_qty))), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue("$" + ValMoney(item.d_pay)), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue("$" + ValMoney(ValFloat(item.d_price) * Val(item.d_qty) - ValFloat(item.d_pay))), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.d_pay_date), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.d_keyin1), DataType = CellValues.String },
+        //                new Cell() { CellValue = new CellValue(item.d_demo), DataType = CellValues.String }
+        //                );
+        //            sd.AppendChild(tr);
+        //        }
+
+
+        //        Model.admin_log admin_log = new Model.admin_log();
+        //        admin_log.writeLog(admin.info.u_id, (int)Model.admin_log.Systems.Order, (int)Model.admin_log.Status.Excel, admin_log.LogViewBtn(list.Select(x => x.order_no).ToList()));
+
+
+        //    }
+
+        //}
+
+        //HttpContext.Current.Response.Clear();
+        //HttpContext.Current.Response.AddHeader("content-disposition", "attachment;  filename=報名.xlsx");
+        //HttpContext.Current.Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+        //HttpContext.Current.Response.BinaryWrite(memoryStream.ToArray());
+        //HttpContext.Current.Response.End();
+
+
+    }
+
+    private string GetCellReference(int column, int row)
+    {
+        int dividend = column;
+        string cellReference = string.Empty;
+
+        while (dividend > 0)
+        {
+            int modulo = (dividend - 1) % 26;
+            char columnChar = (char)('A' + modulo);
+            cellReference = columnChar + cellReference;
+            dividend = (dividend - modulo) / 26;
+        }
+
+        return cellReference + row.ToString();
+    }
+}

web/web.config

@@ -42,11 +42,12 @@
     <add key="UseSearchKeywords" value="true" />
     <!--網站的簡稱，用來區別session和cookie-->
     <add key="SC" value="erp17168" />
+	<add key="LogPath" value="D:\\log\\" />
   </appSettings>
   <connectionStrings>
     <!--SQL用-->
-    <add name="shopConn" providerName="System.Data.SqlClient" connectionString="Data Source=192.168.5.21;Initial Catalog=17168erp_t;User ID=sa;Password=linux@mssql1234;Encrypt=False;TrustServerCertificate=True;Provider=SQLOLEDB;Connection Timeout=10;" />
+    <add name="shopConn" providerName="System.Data.SqlClient" connectionString="Data Source=192.168.5.16;Initial Catalog=17168erp_t;User ID=sa;Password=linux@mssql1234;Encrypt=False;TrustServerCertificate=True;Provider=SQLOLEDB;Connection Timeout=10;" />
-    <add name="ezEntities" providerName="System.Data.EntityClient" connectionString="metadata=res://*/App_Code.Model.Model.csdl|res://*/App_Code.Model.Model.ssdl|res://*/App_Code.Model.Model.msl;provider=System.Data.SqlClient;provider connection string=&quot;Data Source=192.168.5.21;Initial Catalog=17168erp_t;User ID=sa;Password=linux@mssql1234;Encrypt=False;TrustServerCertificate=True;Connection Timeout=10;&quot;" />
+    <add name="ezEntities" providerName="System.Data.EntityClient" connectionString="metadata=res://*/App_Code.Model.Model.csdl|res://*/App_Code.Model.Model.ssdl|res://*/App_Code.Model.Model.msl;provider=System.Data.SqlClient;provider connection string=&quot;Data Source=192.168.5.16;Initial Catalog=17168erp_t;User ID=sa;Password=linux@mssql1234;Encrypt=False;TrustServerCertificate=True;Connection Timeout=10;&quot;" />
     <!-- 
     -->
     <!--SQL用-->