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

1

Browse Source
This commit is contained in:
minom
2026-03-12 11:22:28 +08:00
parent f900649724
commit d81b99fd7d
1 changed files with 70 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,8 +3,6 @@
<%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %> <%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server"> <asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
</asp:Content> </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
@@ -28,23 +26,23 @@
</select> </select>
<label for="paperSize" style="color: black">尺寸</label> <label for="paperSize" style="color: black">尺寸</label>
</div> </div>
<div id="sizeDiv" style="display:none;"> <div id="sizeDiv" style="display: none;">
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<input type="text" class="form-control form-select-sm mb-2 " id="paperName" /> <input type="text" class="form-control form-select-sm mb-2 " id="paperName" />
<label for="paperName" style="color: black">名稱</label> <label for="paperName" style="color: black">名稱</label>
</div> </div>
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<input type="text" class="form-control form-select-sm mb-2 " id="paperWidth" /> <input type="text" class="form-control form-select-sm mb-2 " id="paperWidth" />
<label for="paperWidth" style="color: black">寬度</label> <label for="paperWidth" style="color: black">寬度</label>
</div> </div>
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<input type="text" class="form-control form-select-sm mb-2 " id="paperHeight" /> <input type="text" class="form-control form-select-sm mb-2 " id="paperHeight" />
<label for="paperHeight" style="color: black">高度</label> <label for="paperHeight" style="color: black">高度</label>
</div> </div>
<div class="row"> <div class="row">
<span class="btn btn-info" onclick="Designer.savePaperSize()">儲存</span> <span class="btn btn-info" onclick="Designer.savePaperSize()">儲存</span>
</div> </div>
@@ -52,14 +50,26 @@
<div id="paperOrientation" onclick="Designer.changeOrientation()" class="mb-2"> <div id="paperOrientation" onclick="Designer.changeOrientation()" class="mb-2">
<span></span> <span></span>
</div> </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"> <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) <i class="bi bi-upload me-1"></i>上傳自訂底圖 (PNG/JPG)
@@ -95,17 +105,17 @@
<span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.saveStyle()">存檔</span> <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.saveStyle()">存檔</span>
</div> </div>
<div class="col-6"> <div class="col-6">
<span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.print()">預覽列印</span> <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.print()">預覽列印</span>
</div> </div>
</div> </div>
</div> </div>
<div id="printArea" style="width:100vw;height:100vh"> <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="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-paper">
<%--<div class="tablet-element vertical-text">嘿嘿</div>--%> <%--<div class="tablet-element vertical-text">嘿嘿</div>--%>
</div>
</div> </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 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"> <div class="form-floating mb-3">
<textarea id="inp-text" class="form-control form-control-sm mb-2" rows="5"></textarea> <textarea id="inp-text" class="form-control form-control-sm mb-2" rows="5"></textarea>
@@ -196,37 +206,6 @@
</asp:Content> </asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="footer_script" runat="Server"> <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> <script>
const Designer = { const Designer = {
elements: [], elements: [],
@@ -235,10 +214,6 @@
paper: { width: "100", height: "272" }, paper: { width: "100", height: "272" },
rosterLimit: 8, rosterLimit: 8,
allSize: [ 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: [ bg: [
{ name: "黃1", path: "../../admin/print/html/tablet-1.svg" }, { name: "黃1", path: "../../admin/print/html/tablet-1.svg" },
@@ -257,7 +232,6 @@
this.getElements(); this.getElements();
this.getStyles(); this.getStyles();
this.bindEvents(); this.bindEvents();
//this.loadConfig();
this.bindBackend(); this.bindBackend();
this.bg.forEach(x => { this.bg.forEach(x => {
@@ -265,44 +239,9 @@
}); });
$("#paperOrientation").html("<span>直向</span>") $("#paperOrientation").html("<span>直向</span>")
}, },
exportPDF() {
// 1. 抓取您要轉成 PDF 的目標區塊 (這裡我們抓取整張牌位)
// 注意：如果有分頁，您可能需要抓取包住所有 .tablet-paper 的外層容器
const element = document.querySelector('.tablet-paper');
// 如果畫面上有隱藏的滾動條或超出邊界的元素，可以先把它們推到最左上角
// 確保截圖時不會被切到
window.scrollTo(0, 0);
// 2. 設定 PDF 參數
const opt = {
margin: 0,
filename: '牌位設計.pdf',
// 設定截圖的品質
image: { type: 'jpeg', quality: 1 },
// scale: 2 可以讓截圖解析度變高，印出來的文字不會糊糊的
// useCORS: true 確保您的 SVG 底圖可以被正確讀取，不會因為跨域問題破圖
html2canvas: { scale: 2, useCORS: true, logging: false },
// 將 PDF 尺寸設定為您系統中的動態寬高
jsPDF: {
unit: 'mm',
format: [this.paper.width, this.paper.height],
orientation: 'portrait'
}
};
// 3. 呼叫 html2pdf 執行轉換並下載
html2pdf().set(opt).from(element).save().then(() => {
console.log("PDF 匯出成功！");
}).catch(err => {
console.error("PDF 匯出失敗：", err);
});
},
print() { print() {
let s = this.allStyle.find(x => x.styleID == this.styleID) let s = this.allStyle.find(x => x.styleID == this.styleID)
let size = this.allSize.find(x=>x.id=s.paperSize) let size = this.allSize.find(x => x.id = s.paperSize)
let w = window.open('', '_blank'); let w = window.open('', '_blank');
if (!w) { if (!w) {
alert("請允許瀏覽器開啟彈出式視窗！"); alert("請允許瀏覽器開啟彈出式視窗！");
@@ -474,7 +413,7 @@
$("#paperSize").append("<option value='newsize' >新增尺寸</option>") $("#paperSize").append("<option value='newsize' >新增尺寸</option>")
this.allSize.forEach(x => { this.allSize.forEach(x => {
$("#paperSize").append("<option value='" + x.id + "'>" + x.name + "(" + x.width + "*" + x.height + ")</option>") $("#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>"); $("#printSize").append("<option value='" + x.id + "'>" + x.name + "(" + x.width + "*" + x.height + ")</option>");
}) })
}, },
async getElements() { async getElements() {
@@ -553,8 +492,8 @@
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%',
width: (size?size.width:self.paper.width) + "mm", width: (size ? size.width : self.paper.width) + "mm",
height: (size?size.height:self.paper.height) + "mm", height: (size ? size.height : self.paper.height) + "mm",
}) })
await axios await axios
.post(HTTP_HOST + 'api/tablet/GetStyleDetailData', { styleID: id }) .post(HTTP_HOST + 'api/tablet/GetStyleDetailData', { styleID: id })
@@ -610,14 +549,14 @@
let paperSize = $("#paperSize").val() let paperSize = $("#paperSize").val()
let self = this; let self = this;
if (paperSize == "newsize") { if (paperSize == "newsize") {
$("#sizeDiv").attr("style","display:"); $("#sizeDiv").attr("style", "display:");
} else { } else {
console.log("paperSize:",paperSize); console.log("paperSize:", paperSize);
let size = this.allSize.find(x => x.id == paperSize) let size = this.allSize.find(x => x.id == paperSize)
$(".tablet-paper").css({ $(".tablet-paper").css({
"background-color": "white", "background-color": "white",
width: (size?size.width:self.paper.width) + "mm", width: (size ? size.width : self.paper.width) + "mm",
height: (size?size.height:self.paper.height) + "mm", height: (size ? size.height : self.paper.height) + "mm",
}); });
} }
}, },
@@ -675,8 +614,8 @@
const names = roster ? roster.text.split('\n').filter(s => s.trim()) : []; const names = roster ? roster.text.split('\n').filter(s => s.trim()) : [];
const pages = Math.max(1, Math.ceil(names.length / this.rosterLimit)); const pages = Math.max(1, Math.ceil(names.length / this.rosterLimit));
let style = this.allStyle.find(x => x.styleID == this.styleID); let style = this.allStyle.find(x => x.styleID == this.styleID);
let size = this.allSize.find(x=>x.id==style.paperSize); let size = this.allSize.find(x => x.id == style.paperSize);
console.log(this.paper,size); console.log(this.paper, size);
//for (let p = 0; p < pages; p++) { //for (let p = 0; p < pages; p++) {
// const $paper = $('<div class="tablet-paper"></div>') // const $paper = $('<div class="tablet-paper"></div>')
// .css({ "background-color": "red", width: this.paper.width + 'mm', height: this.paper.height + 'mm' }); // .css({ "background-color": "red", width: this.paper.width + 'mm', height: this.paper.height + 'mm' });
@@ -780,10 +719,24 @@
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" style="gap:${el.style.itemSpacing || 20}px">`; let h = $(`<div class="roster-container"></div>`).css(
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>`; width: "100%", height: "600px",
return h + `</div>`; "writing-mode": "vertical-rl", /* 直書 */
display: "flex",
"flex-direction": "row", /* 上下分層 (Top / Bottom) */
"align-items": "center", /* 左右置中對齊 */
"justify-content": "center",
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>`;
return h.html()
}, },
autoScale(names, base) { autoScale(names, base) {
@@ -960,7 +913,7 @@
}); });
let sID = this.styleID let sID = this.styleID
if (sID == "20260310100234") { if (sID == "20260310100234") {
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(),