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("@Orientation",ts.Orientation),
new SqlParameter("@PrintPageCount",ts.PrintPageCount),
new SqlParameter("@RosterLimit",ts.RosterLimit),
new SqlParameter("@CUser",""),
new SqlParameter("@CDate",""),
new SqlParameter("@CTime",""),
@@ -215,9 +216,9 @@ public class StyleDataAccess
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("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 ) ");
context.Database.ExecuteSqlCommand(sb.ToString(), sp);
@@ -283,6 +284,7 @@ public class StyleDataAccess
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",""),
@@ -292,7 +294,7 @@ public class StyleDataAccess
};
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("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 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; }

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.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();

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

@@ -7,7 +7,7 @@
<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">
@@ -15,7 +15,7 @@
data-bs-toggle="dropdown" aria-expanded="false">
版型</button>
<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>
<input type="text" id="styleName" class="form-control" aria-label="版型名稱">
</div>
@@ -96,6 +96,10 @@
</select>
<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>
@@ -212,7 +216,7 @@
activeId: null,
styleID: null,
paper: { width: "100", height: "272" },
rosterLimit: 8,
rosterLimit: 10,
allSize: [
],
bg: [
@@ -270,77 +274,6 @@
<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 {
@@ -482,13 +415,15 @@
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.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);
$("#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%',
@@ -575,11 +510,15 @@
});
},
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()))
@@ -628,7 +567,6 @@
//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 => {
console.log("shit:", el);
$paper.append(this.createEl(el, slice));
});
//$canvas.append($paper);
@@ -660,12 +598,14 @@
}
else if (el.id === 'title1') {
html = this.renderNameList(slice, el);
console.log(html);
}
else if (el.id === 'alive') {
html = this.renderLiveList(slice, el);
}
else {
html = el.text;
}
console.log("QQ:", el);
return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`)
.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
@@ -690,7 +630,6 @@
"row-gap": "1px",
"align-items": "center",
});
console.log("nameList:", $namelist)
let self = this;
names.forEach(n => {
$namelist.append(self.renderNameSpan(n, el))
@@ -710,7 +649,42 @@
"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 '';
@@ -719,24 +693,38 @@
const bot = names.slice(mid);
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",
"writing-mode": "vertical-rl", /* 直書 */
display: "flex",
"flex-direction": "row", /* 上下分層 (Top / Bottom) */
"align-items": "center", /* 左右置中對齊 */
"justify-content": "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.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>`;
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) {
@@ -787,17 +775,19 @@
updateActive(key, val) {
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 === '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.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));
} else if (el.type == "combined-center") {
const parts = el.text.split('\n');
@@ -806,20 +796,22 @@
<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.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
}).html(html);
} else if (this.activeId === "title1") {
let slice = el.text.split('\n').filter(s => s.trim());
//html = "<div class='name-list'>";
//console.log(slice);
//slice.forEach(x => {
// html = html + "<span>" + x + "</span>"
//});
//html = html + "</div>";
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);
} else {
$(`.tablet-element[id="${this.activeId}"]`).css({
position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
@@ -912,13 +904,13 @@
});
});
let sID = this.styleID
if (sID == "20260310100234") {
if (sID == "A0000") {
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(),
orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(), rosterLimit: $("rosterLimit").val(),
detail: detail
}
console.log(master);