diff --git a/web/admin/item/TabletDesigner.aspx b/web/admin/item/TabletDesigner.aspx
index 65819b5..e1ad193 100644
--- a/web/admin/item/TabletDesigner.aspx
+++ b/web/admin/item/TabletDesigner.aspx
@@ -232,7 +232,7 @@
elements: [],
activeId: null,
styleID: null,
- paper: { width: 100, height: 272 },
+ paper: { width: "100", height: "272" },
rosterLimit: 8,
allSize: [
//{ name: "A3", width: 297, height: 420, selected: "" },
@@ -301,6 +301,8 @@
},
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("請允許瀏覽器開啟彈出式視窗！");
@@ -319,73 +321,114 @@
// 4. 組合列印視窗的 HTML
let htmlContent = `
-
-
-
- 預覽列印 - 牌位設計
-
-
+
+
+
+ 預覽列印 - 牌位設計
+
+
-
-
-
- ${canvasHtml}
-
-
- `;
+ }
+ body{
+ --page-w: ${size.width}mm;
+ --page-h: ${size.height}mm;
+ --font-max: 22pt;
+ --bg-padding: 0;
+ }
+ }
+
+
+
+ ${canvasHtml}
+
+
+ `;
w.document.write(htmlContent);
w.document.close();
@@ -430,8 +473,8 @@
});
$("#paperSize").append("")
this.allSize.forEach(x => {
- $("#paperSize").append("")
- $("#printSize").append("");
+ $("#paperSize").append("")
+ $("#printSize").append("");
})
},
async getElements() {
@@ -499,13 +542,23 @@
this.elements.length = 0;
let obj = this.elements
let s = this.allStyle.find(x => x.styleID == id)
+ console.log("changeStyle:", s);
+ let size = this.allSize.find(x => x.id == s.paperSize)
+ this.paper.width = size.width
+ this.paper.height = size.height
+ console.log("changeStyle:", size);
+ console.log("changeStyle:", this.paper);
$("#paperSize").val(s.paperSize);
$("#backendInp").val(s.backendImg);
$("#printSize").val(s.printSize);
$("#printMode").val(s.printMode);
$("#perPage").val(s.printPageCount);
let img = this.bg.find(x => x.name == s.backendImg);
- $(".tablet-paper").css({ 'background-image': 'url(' + (img ? img.path : "") + ')', 'background-size': '100% 100%' })
+ $(".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 => {
@@ -559,16 +612,16 @@
},
changePaper() {
let paperSize = $("#paperSize").val()
- console.log(paperSize);
-
+ let self = this;
if (paperSize == "newsize") {
$("#sizeDiv").attr("style","display:");
} else {
- let size = this.allSize.find(x => x.name == paperSize)
+ console.log("paperSize:",paperSize);
+ let size = this.allSize.find(x => x.id == paperSize)
$(".tablet-paper").css({
"background-color": "white",
- width: size.width + "mm",
- height: size.height + "mm",
+ width: (size?size.width:self.paper.width) + "mm",
+ height: (size?size.height:self.paper.height) + "mm",
});
}
},
@@ -625,11 +678,18 @@
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 = $('')
// .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 => {
diff --git a/web/admin/item/css/tablet-design.css b/web/admin/item/css/tablet-design.css
index f35b4b5..07d3992 100644
--- a/web/admin/item/css/tablet-design.css
+++ b/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;
}