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-02 17:52:21 +08:00
parent e44bc74b90
commit 88e50525bd
2 changed files with 73 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,17 +15,28 @@
<div class="d-flex overflow-hidden">
<div class="p-2 bg-dark text-white floting-box" style="width: 250px; left: 20px; top: 80px;">
<h6 class="border-bottom pb-2">設計工具箱</h6>
<select class="form-select form-select-sm " onchange="Designer.changePaper()" id="paperSize">
<div class="form-floating mb-3">
<select class="form-select form-select-sm mb-2 " onchange="Designer.changePaper()" id="paperSize">
<option value="">請選擇</option>
</select>
<div id="paperOrientation" onclick="Designer.changeOrientation()">
<label for="paperSize">尺寸</label>
</div>
<div id="paperOrientation" onclick="Designer.changeOrientation()" class="mb-2">
<span></span>
</div>
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('address')">地址欄</span>
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('title1')">牌位正名</span>
<span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('titletriangle')">品字名單</span>
<span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.displayItem('combined')">正名合併置中</span>
<span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.displayItem()">陽上報恩</span>
<span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.displayItem('alive')">陽上報恩</span>
<div>
<span class="btn btn-sm btn-outline-secondary" onclick="Designer.clickBackend()">
<i class="bi bi-upload me-1"></i> 上傳自訂底圖 (PNG/JPG)
</span>
<input id="backendInp" type="file" accept="image/png, image/jpeg" style="display: none"
>
</div>
<hr>
</div>
@@ -91,24 +102,30 @@
//$(".tablet-element").draggable({});
this.bindEvents();
this.loadConfig();
this.bindBackend();
this.allSize.forEach(x => {
$("#paperSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.width + "*" + x.height + "</option>")
})
$("#paperOrientation").html("<span>直向</span>")
},
changeOrientation() {
this.orientation = this.orientation == "portrait" ? "land" : "portrait";
this.orientation = (this.orientation === "portrait" ? "land" : "portrait");
console.log(this.orientation);
$("#paperOrientation").empty();
$("#paperOrientation").html("<span>" + this.orientation == "portrait" ? "直向" : "橫向" + "</span>");
let ori = this.orientation == "portrait" ? "直向" : "橫向";
console.log(this.orientation,ori)
$("#paperOrientation").html("<span>" +ori + "</span>");
let paperSize = $("#paperSize").val()
let size = this.allSize.find(x => x.name == paperSize)
this.paper.width = size.width;
this.paper.height = size.height;
console.log(paperSize, size);
this.paper.width = this.orientation == "portrait" ? size.width : size.height;
this.paper.height = this.orientation == "portrait" ? size.height : size.width;
$(".tablet-paper").css({
"background-color": "red",
width: this.orientation == "portrait" ? size.width : size.height + "mm",
height: this.orientation == "portrait" ? size.height : size.width + "mm",
width: this.paper.width + "mm",
height: this.paper.height + "mm",
});
},
changePaper() {
@@ -277,8 +294,51 @@
},
addElement() {
console.log("QQQ");
},
wrapImageInSvg(imageBase64) {
// 建立一個簡單的 SVG 字串，將圖片鋪滿
// preserveAspectRatio="none" 確保圖片會拉伸填滿 SVG 容器
const svgString = `
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<image href="${imageBase64}" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" />
</svg>
`.trim();
// 轉成 Data URI 格式
// 注意：SVG 內容若包含特殊字元需編碼，但 base64 圖片通常是安全的
// 為了保險，我們使用 encodeURIComponent 對 svgString 編碼
return `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;
},
clickBackend() {
$("#backendInp").click();
},
bindBackend() {
$("#backendInp").on('change', function (e) {
console.log($("#backendInp"))
const input = e.target;
if (input.files && input.files[0]) {
console.log("file:", input.files[0]);
const file = input.files[0];
// 1. 先讀取檔案轉成 Base64
const reader = new FileReader();
reader.onload = (e) => {
const base64Image = e.target.result; // 這會是 data:image/png;base64,xxxx...
// 2. 將 Base64 PNG 包裝成 SVG
//const svgDataUri = this.wrapImageInSvg(base64Image);
console.log(base64Image)
// 3. 設定到底圖
//this.service.setBackground(svgDataUri);
$(".tablet-paper").css({ 'background-image': 'url(' + base64Image + ')','background-size':'100% 100%' })
};
reader.readAsDataURL(file);
}
})
}
};
$(() => Designer.init());
</script>