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

增加紙張尺寸設定

Browse Source
This commit is contained in:
minom
2026-03-10 17:59:57 +08:00
parent bfd07ebe90
commit b66976b7c4
4 changed files with 411 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,6 @@
@import "css/tablet-design.css";
@import "css/floating.css";
</style>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
@@ -17,19 +16,41 @@
<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>
<ul class="dropdown-menu style-menu">
<li><span class="dropdown-item">選擇版型</span></li>
</ul>
<input type="text" id="styleName" class="form-control" aria-label="版型名稱">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">
版型</button>
<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="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>
@@ -43,41 +64,41 @@
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('tricombined')">三姓合併置中</span>
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('alive')">陽上報恩</span>
<div class="form-floating mb-3">
<%-- <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.clickBackend()">
<%-- <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)
</span>--%>
<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>
<%-- <input id="backendInp" type="file" accept="image/png, image/jpeg,image/svg+xml" style="display: none">--%>
<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>
<%-- <input id="backendInp" type="file" accept="image/png, image/jpeg,image/svg+xml" style="display: none">--%>
</div>
<hr>
<div class="form-floating mb-3">
<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>
</div>
<div class="form-floating mb-3">
<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>
</div>
<div class="form-floating mb-3">
<select class="form-select form-select-sm mb-2 " onchange="Designer.changePrintMode()" id="printMode">
<option value="">請選擇</option>
<option value="combine">合併</option>
<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="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="">存檔</span>--%>
</div>
</div>
</div>
@@ -142,51 +163,84 @@
</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 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="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 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>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="footer_script" runat="Server">
<%-- <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">紙張尺寸設定</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<input type="text" id="PaperName" />
</div>
<div class="col-12">
<input type="text" id="PaperWidth" />
</div>
<div class="col-12">
<input type="text" id="PaperHeight" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>--%>
<%-- <script src="../../js/jquery-4.0.0.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>--%>
<script>
const Designer = {
elements: [],
activeId: null,
styleID: null,
paper: { width: 100, height: 272 },
rosterLimit: 8,
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" },
//{ 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" },
@@ -201,15 +255,13 @@
orientation: "portrait",
init() {
//$(".tablet-element").draggable({});
this.getPaperSize();
this.getElements();
this.getStyles();
this.bindEvents();
this.loadConfig();
//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>")
});
@@ -231,8 +283,29 @@
height: this.paper.height + "mm",
});
},
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.name + "' " + x.selected + ">" + x.width + "*" + x.height + "</option>")
$("#printSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.width + "*" + x.height + "</option>");
})
},
async getElements() {
let self=this
let self = this
await axios
.post(HTTP_HOST + 'api/tablet/GetTabletElement', {})
.then(response => {
@@ -272,30 +345,29 @@
$(".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"));
let size = self.allSize.find(x => x.name == style.paperSize);
self.paper.width = size.width;
self.paper.height = size.height;
});
},
async changeStyle(id) {//切換版型，抓回明細
let self = this;
this.elements.length = 0;
let obj = this.elements
let s=this.allStyle.find(x=>x.styleID==id)
let s = this.allStyle.find(x => x.styleID == id)
$("#paperSize").val(s.paperSize);
$("#backendInp").val(s.backendImg);
$("#printSize").val(s.printSize);
$("#printMode").val(s.printMode);
$("#perPage").val(s.printPageCount);
console.log("s:",s);
let img = this.bg.find(x => x.name == s.backendImg);
console.log(img);
$(".tablet-paper").css({ 'background-image': 'url(' + img.path + ')', 'background-size': '100% 100%' })
$(".tablet-paper").css({ 'background-image': 'url(' + (img ? img.path : "") + ')', 'background-size': '100% 100%' })
await axios
.post(HTTP_HOST + 'api/tablet/GetStyleDetailData', {})
.post(HTTP_HOST + 'api/tablet/GetStyleDetailData', { styleID: id })
.then(response => {
if (response.status == "200") {
let data = response.data;
@@ -307,27 +379,29 @@
let te = self.tabletElements.find(x => {
return x.elementID == el.elementID
});
console.log("details:",el,te);
//console.log("details:",el,te);
let config = {
id: el.elementID,
type: te.elementType,
text: te.sampleContent,
text: te.sampleContent.replaceAll("\\n", "\n"),
x: el.startX, y: el.startY,
style: {
fontSize: 24,
fontFamily: "Kaiti", isVertical : true,
letterSpacing : 5, lineHeight : 1.5,
visibility: te.isActive
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,
textHeight: el.textHeight,
breakLen: el.breakLen,
backendInp: el.backendImg
};
obj.push(config)
obj.push(config)
})
@@ -342,12 +416,33 @@
},
changePaper() {
let paperSize = $("#paperSize").val()
let size = this.allSize.find(x => x.name == paperSize)
$(".tablet-paper").css({
"background-color": "white",
width: size.width + "mm",
height: size.height + "mm",
});
console.log(paperSize);
if (paperSize == "newsize") {
$("#sizeDiv").attr("style","display:");
} else {
let size = this.allSize.find(x => x.name == paperSize)
$(".tablet-paper").css({
"background-color": "white",
width: size.width + "mm",
height: size.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") {
}
});
},
changePrintMode() {
@@ -370,7 +465,6 @@
this.select($(e.currentTarget).attr('id'));
});
},
loadConfig() {
$.ajax({
type: "POST", url: "TabletDesigner.aspx/GetConfig", contentType: "application/json",
@@ -381,9 +475,9 @@
}
});
},
// 處理分頁渲染邏輯
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()) : [];
@@ -396,10 +490,15 @@
//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);
//}
//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();
},
@@ -422,27 +521,21 @@
html = el.text.replace(/(\d+)/g, '<span class="tate-chu-yoko">$1</span>');
}
else if (el.id === 'title1') {
//html = "<div class='name-list'>";
//console.log(slice);
//slice.forEach(x => {
// html=html+"<span>"+x+"</span>"
//});
//html = html + "</div>";
html = this.renderNameList(slice,el);
html = this.renderNameList(slice, el);
console.log(html);
}
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
//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) {
renderNameList(names, el) {
let $namelist = $(`<div class='nameList'></div>`).css({
"writing-mode": "vertical rl",
display: "flex",
@@ -462,11 +555,11 @@
console.log("nameList:", $namelist)
let self = this;
names.forEach(n => {
$namelist.append(self.renderNameSpan(n,el))
$namelist.append(self.renderNameSpan(n, el))
})
return $namelist;
},
renderNameSpan(name,el) {
renderNameSpan(name, el) {
return $(`<span>${name}</span>`).css({
display: "block",
"min-height": `${el.textHeight}px`,
@@ -486,7 +579,7 @@
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>`;
@@ -514,7 +607,7 @@
el.x = self.getPosInMm(ui.position.left);
el.y = self.getPosInMm(ui.position.top);
//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" });
}
});
},
@@ -541,7 +634,8 @@
updateActive(key, val) {
const el = this.elements.find(x => x.id === this.activeId);
if (key === 'fontSize') el.style.fontSize = parseFloat(val);
if (key === 'fontSize') el.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);
@@ -551,7 +645,7 @@
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.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');
@@ -560,7 +654,7 @@
<span class="sub-text">${parts[1] || ''}</span>
</div>`;
$(`.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.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());
@@ -631,7 +725,7 @@
},
bindBackend() {
$("#backendInp").on('change', function (e) {
const input = e.target;
if (input.files && input.files[0]) {
const file = input.files[0];
@@ -653,28 +747,32 @@
})
},
async saveStyle() {
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,width:el.width,height:el.height,textWidth:el.textWidth,textHeight:el.textHeight
isActive: el.style.visibility, width: el.width, height: el.height, textWidth: el.textWidth, textHeight: el.textHeight
});
});
let master = {
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(),
orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(),
detail: detail
}
console.log(master);
let path = "SavDegignerData";
if (this.styleID != null && this.styleID != "") {
path = "UpdateDegignerData"
}
await axios
.post(HTTP_HOST + 'api/tablet/SavDegignerData', master)
.post(HTTP_HOST + `api/tablet/${path}`, master)
.then(response => {
console.log(response);
});