yiming/17168ERP
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

go

Browse Source
This commit is contained in:
minom
2026-03-12 17:44:08 +08:00
parent d81b99fd7d
commit f92fa65133
4 changed files with 100 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/App_Code/DataAccess/StyleDataAccess.cs
View File

@@ -207,6 +207,7 @@ public class StyleDataAccess
new SqlParameter("@PrintMode",ts.PrintMode), new SqlParameter("@PrintMode",ts.PrintMode),
new SqlParameter("@Orientation",ts.Orientation), new SqlParameter("@Orientation",ts.Orientation),
new SqlParameter("@PrintPageCount",ts.PrintPageCount), new SqlParameter("@PrintPageCount",ts.PrintPageCount),
new SqlParameter("@RosterLimit",ts.RosterLimit),
new SqlParameter("@CUser",""), new SqlParameter("@CUser",""),
new SqlParameter("@CDate",""), new SqlParameter("@CDate",""),
new SqlParameter("@CTime",""), new SqlParameter("@CTime",""),
@@ -215,9 +216,9 @@ public class StyleDataAccess
new SqlParameter("@UTime",""), new SqlParameter("@UTime",""),
}; };
sb.Append("insert into TabletStyle (StyleID,Name,Descr,PaperSize,BackendImg,PrintSize,PrintMode,Orientation,PrintPageCount"); 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(",CUser,CDate,CTime,UUser,UDate,UTime ) ");
sb.Append("values(@StyleID,@Name,@Descr,@PaperSize,@BackendImg,@PrintSize,@PrintMode,@Orientation,@PrintPageCount"); sb.Append("values(@StyleID,@Name,@Descr,@PaperSize,@BackendImg,@PrintSize,@PrintMode,@Orientation,@PrintPageCount,@RosterLimit");
sb.Append(",@CUser,@CDate,@CTime,@UUser,@UDate,@UTime ) "); sb.Append(",@CUser,@CDate,@CTime,@UUser,@UDate,@UTime ) ");
context.Database.ExecuteSqlCommand(sb.ToString(), sp); context.Database.ExecuteSqlCommand(sb.ToString(), sp);
@@ -283,6 +284,7 @@ public class StyleDataAccess
new SqlParameter("@PrintMode",ts.PrintMode), new SqlParameter("@PrintMode",ts.PrintMode),
new SqlParameter("@Orientation",ts.Orientation), new SqlParameter("@Orientation",ts.Orientation),
new SqlParameter("@PrintPageCount",ts.PrintPageCount), new SqlParameter("@PrintPageCount",ts.PrintPageCount),
new SqlParameter("@RosterLimit",ts.RosterLimit),
new SqlParameter("@CUser",""), new SqlParameter("@CUser",""),
new SqlParameter("@CDate",""), new SqlParameter("@CDate",""),
new SqlParameter("@CTime",""), new SqlParameter("@CTime",""),
@@ -292,7 +294,7 @@ public class StyleDataAccess
}; };
sb.Append("update TabletStyle set Descr=@Descr,PaperSize=@PaperSize,BackendImg=@BackendImg,PrintSize=@PrintSize,"); sb.Append("update TabletStyle set Descr=@Descr,PaperSize=@PaperSize,BackendImg=@BackendImg,PrintSize=@PrintSize,");
sb.Append("PrintMode=@PrintMode,Orientation=@Orientation,PrintPageCount=@PrintPageCount,"); 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("CUser=@CUser,CDate=@CDate,CTime=@CTime,UUser=@UUSer,UDate=@UDate,UTime=@UTime ");
sb.Append("where StyleID=@StyleID "); sb.Append("where StyleID=@StyleID ");

1
web/App_Code/Entity/Style.cs
View File

@@ -24,6 +24,7 @@ public class TabletStyle
public string PrintMode { get; set; } public string PrintMode { get; set; }
public string Orientation { get; set; } public string Orientation { get; set; }
public string PrintPageCount { get; set; } public string PrintPageCount { get; set; }
public string RosterLimit { get; set; }
public string CUser { get; set; } public string CUser { get; set; }
public string CDate { get; set; } public string CDate { get; set; }
public string CTime { get; set; } public string CTime { get; set; }

1
web/App_Code/api/designerController.cs
View File

@@ -105,6 +105,7 @@ public class designerController : ApiController
ts.Orientation = (json == null || json.orientation == null) ? "" : (string)json.orientation; ts.Orientation = (json == null || json.orientation == null) ? "" : (string)json.orientation;
ts.PrintPageCount = (json == null || json.printPageCount == null) ? "" : (string)json.printPageCount; ts.PrintPageCount = (json == null || json.printPageCount == null) ? "" : (string)json.printPageCount;
ts.PrintMode = (json == null || json.printMode == null) ? "" : (string)json.printMode; 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>()) foreach (var item in json.detail.Children<JObject>())
{ {
TabletStyleDetail tsd = new TabletStyleDetail(); TabletStyleDetail tsd = new TabletStyleDetail();

194
web/admin/item/TabletDesigner.aspx
View File

@@ -7,7 +7,7 @@
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <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;"> <div class="p-2 bg-dark text-white floting-box" style="width: 250px; left: 20px; top: 80px;">
<h6 class="border-bottom pb-2">設計工具箱</h6> <h6 class="border-bottom pb-2">設計工具箱</h6>
<div class="input-group mb-3"> <div class="input-group mb-3">
@@ -15,7 +15,7 @@
data-bs-toggle="dropdown" aria-expanded="false"> data-bs-toggle="dropdown" aria-expanded="false">
版型</button> 版型</button>
<ul class="dropdown-menu style-menu"> <ul class="dropdown-menu style-menu">
<li><span class="dropdown-item" data-value="">選擇版型</span></li> <%--<li><span class="dropdown-item" data-value="">選擇版型</span></li>--%>
</ul> </ul>
<input type="text" id="styleName" class="form-control" aria-label="版型名稱"> <input type="text" id="styleName" class="form-control" aria-label="版型名稱">
</div> </div>
@@ -96,6 +96,10 @@
</select> </select>
<label for="printMode" style="color: black">列印模式</label> <label for="printMode" style="color: black">列印模式</label>
</div> </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"> <div class="form-floating mb-3">
<input type="number" id="perpage" class="form-control form-control-sm mb-2"> <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>
@@ -212,7 +216,7 @@
activeId: null, activeId: null,
styleID: null, styleID: null,
paper: { width: "100", height: "272" }, paper: { width: "100", height: "272" },
rosterLimit: 8, rosterLimit: 10,
allSize: [ allSize: [
], ],
bg: [ bg: [
@@ -270,77 +274,6 @@
<style> <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;
}
/* =======================================
暴力防護層：避免外部 CSS 載入失敗或被干擾
======================================= */
/* 【修復直書變橫書】強制寫入直書屬性 */
.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; /* 確保文字是黑色的 */
}
/* 列印時的紙張大小與頁面歸零 */ /* 列印時的紙張大小與頁面歸零 */
@media print { @media print {
@@ -482,13 +415,15 @@
let obj = this.elements let obj = this.elements
let s = this.allStyle.find(x => x.styleID == id) let s = this.allStyle.find(x => x.styleID == id)
let size = this.allSize.find(x => x.id == s.paperSize) let size = this.allSize.find(x => x.id == s.paperSize)
this.paper.width = size.width this.paper.width = size.width;
this.paper.height = size.height this.paper.height = size.height;
this.rosterLimit = s.rosterLimit;
$("#paperSize").val(s.paperSize); $("#paperSize").val(s.paperSize);
$("#backendInp").val(s.backendImg); $("#backendInp").val(s.backendImg);
$("#printSize").val(s.printSize); $("#printSize").val(s.printSize);
$("#printMode").val(s.printMode); $("#printMode").val(s.printMode);
$("#perPage").val(s.printPageCount); $("#perpage").val(s.printPageCount);
$("#rosterLimit").val(s.rosterLimit);
let img = this.bg.find(x => x.name == s.backendImg); let img = this.bg.find(x => x.name == s.backendImg);
$(".tablet-paper").css({ $(".tablet-paper").css({
'background-image': 'url(' + (img ? img.path : "") + ')', 'background-size': '100% 100%', 'background-image': 'url(' + (img ? img.path : "") + ')', 'background-size': '100% 100%',
@@ -575,11 +510,15 @@
}); });
}, },
changeRosterLimit() {
this.rosterLimit = parseInt($("#rosterLimit").val());
},
changePrintMode() { changePrintMode() {
}, },
bindEvents() { bindEvents() {
// 文字變更連動渲染 // 文字變更連動渲染
//$('#rosterLimit').on('input', (e) =>this.)
$('#inp-text').on('input', (e) => this.updateActive('text', $(e.target).val())); $('#inp-text').on('input', (e) => this.updateActive('text', $(e.target).val()));
$('#inp-size').on('input', (e) => this.updateActive('fontSize', $(e.target).val())); $('#inp-size').on('input', (e) => this.updateActive('fontSize', $(e.target).val()));
$('#width').on('input', (e) => this.updateActive('width', $(e.target).val())) $('#width').on('input', (e) => this.updateActive('width', $(e.target).val()))
@@ -628,7 +567,6 @@
//const slice = names.slice(p * this.rosterLimit, (p + 1) * this.rosterLimit); //const slice = names.slice(p * this.rosterLimit, (p + 1) * this.rosterLimit);
const slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit); const slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
this.elements.forEach(el => { this.elements.forEach(el => {
console.log("shit:", el);
$paper.append(this.createEl(el, slice)); $paper.append(this.createEl(el, slice));
}); });
//$canvas.append($paper); //$canvas.append($paper);
@@ -660,12 +598,14 @@
} }
else if (el.id === 'title1') { else if (el.id === 'title1') {
html = this.renderNameList(slice, el); html = this.renderNameList(slice, el);
console.log(html); }
else if (el.id === 'alive') {
html = this.renderLiveList(slice, el);
} }
else { else {
html = el.text; html = el.text;
} }
console.log("QQ:", el);
return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`) return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`)
.css({ .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.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
@@ -690,7 +630,6 @@
"row-gap": "1px", "row-gap": "1px",
"align-items": "center", "align-items": "center",
}); });
console.log("nameList:", $namelist)
let self = this; let self = this;
names.forEach(n => { names.forEach(n => {
$namelist.append(self.renderNameSpan(n, el)) $namelist.append(self.renderNameSpan(n, el))
@@ -710,7 +649,42 @@
"text-justify": "inter-character", "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) { renderRoster(names, el) {
if (!names.length) return ''; if (!names.length) return '';
@@ -719,24 +693,38 @@
const bot = names.slice(mid); const bot = names.slice(mid);
const size = this.autoScale(names, el.fontSize); const size = this.autoScale(names, el.fontSize);
let h = $(`<div class="roster-container"></div>`).css( let h = $(`<div class=""></div>`).css(
{ {
width: "100%", height: "600px", width: "100%", height: "600px",
"writing-mode": "vertical-rl", /* 直書 */ "writing-mode": "vertical-rl", /* 直書 */
display: "flex", display: "flex",
"flex-direction": "row", /* 上下分層 (Top / Bottom) */ "flex-direction": "row", /* 上下分層 (Top / Bottom) */
"align-items": "center", /* 左右置中對齊 */ "align-items": "center", /* 左右置中對齊 */
"justify-content": "center", "justify-content": "start",
gap: "20px", gap: "20px",
}); });
h.append( //h.append(
$(`<div class="name-group">${top.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`) // $(`<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>`) //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>`; //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>`; ///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>`; //return h + `</div>`;
return h.html() h.append(this.renderNameGroups(top));
if (bot.length) h.append(this.renderNameGroups(bot));
return h
},
renderNameGroups(items) {
let g = $(`<div ></div>`).css({
"display": "flex",
"flex-direction": "column",
"justify-content": "center",
"height": "200px",
})
items.forEach(x => {
g.append($(`<div class="" style="font-size:20pt;letter-spacing: 10px;">${x}</div>`))
})
return g;
}, },
autoScale(names, base) { autoScale(names, base) {
@@ -787,17 +775,19 @@
updateActive(key, val) { updateActive(key, val) {
const el = this.elements.find(x => x.id === this.activeId); const el = this.elements.find(x => x.id === this.activeId);
if (key === 'fontSize') el.fontSize = parseFloat(val); if (key === 'fontSize') el.style.fontSize = parseFloat(val);
else if (key === 'width') el.width = parseFloat(val); else if (key === 'width') el.width = parseFloat(val);
else if (key === 'breakLen') el.breakLen = parseInt(val); else if (key === 'breakLen') el.breakLen = parseInt(val);
else if (key === '2offset') el.twoOffset = parseFloat(val); else if (key === '2offset') el.twoOffset = parseFloat(val);
else if (key === '3offset') el.threeOffset = parseFloat(val); else if (key === '3offset') el.threeOffset = parseFloat(val);
else if (key === '4offset') el.fourOffset = parseFloat(val); else if (key === '4offset') el.fourOffset = parseFloat(val);
else el[key] = val; else el[key] = val;
console.log("activeId:",this.activeId)
if (el.type == "roster") { if (el.type == "roster") {
const names = el.text.split('\n').filter(s => s.trim()); const names = el.text.split('\n').filter(s => s.trim());
$(`.tablet-element[id="${this.activeId}"]`).css({ $(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
}).html(this.renderRoster(names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit), el)); }).html(this.renderRoster(names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit), el));
} else if (el.type == "combined-center") { } else if (el.type == "combined-center") {
const parts = el.text.split('\n'); const parts = el.text.split('\n');
@@ -806,20 +796,22 @@
<span class="sub-text">${parts[1] || ''}</span> <span class="sub-text">${parts[1] || ''}</span>
</div>`; </div>`;
$(`.tablet-element[id="${this.activeId}"]`).css({ $(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
}).html(html); }).html(html);
} else if (this.activeId === "title1") { } else if (this.activeId === "title1") {
let slice = el.text.split('\n').filter(s => s.trim()); let names = el.text.split('\n').filter(s => s.trim());
//html = "<div class='name-list'>"; let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
//console.log(slice);
//slice.forEach(x => {
// html = html + "<span>" + x + "</span>"
//});
//html = html + "</div>";
html = this.renderNameList(slice, el); html = this.renderNameList(slice, el);
$(`.tablet-element[id="${this.activeId}"]`).css({ $(`.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.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
}).html(html); }).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);
} else { } else {
$(`.tablet-element[id="${this.activeId}"]`).css({ $(`.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.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
@@ -912,13 +904,13 @@
}); });
}); });
let sID = this.styleID let sID = this.styleID
if (sID == "20260310100234") { if (sID == "A0000") {
this.styleID = "" this.styleID = ""
} }
let master = { let master = {
styleID: this.styleID, styleName: $("#styleName").val(), paperSize: $("#paperSize").val(), styleID: this.styleID, styleName: $("#styleName").val(), paperSize: $("#paperSize").val(),
backendImg: $("#backendInp").val(), printSize: $("#printSize").val(), printMode: $("#printMode").val(), backendImg: $("#backendInp").val(), printSize: $("#printSize").val(), printMode: $("#printMode").val(),
orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(), orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(), rosterLimit: $("rosterLimit").val(),
detail: detail detail: detail
} }
console.log(master); console.log(master);