牌位版型設計,增加刪除版型跟紙張尺寸

This commit is contained in:
2026-06-16 09:44:16 +08:00
parent c249e84240
commit 5f3ac3ec7f
4 changed files with 219 additions and 15 deletions
+110 -13
View File
@@ -22,15 +22,43 @@
<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="input-group mb-3">
<div class="row">
<div class="col-2">
<a class="" style="cursor:pointer;text-decoration: none;color:white;width:30px;height:30px;font-size:30px;"
title="增加版型" onclick="Designer.changeStyle('000001')">+</a></div>
<div class="col-8"> <input type="text" id="styleName" class="form-control" aria-label="版型名稱"></div>
<div class="col-2">
<a class="" style="cursor:pointer;text-decoration: none;color:white;width:30px;height:30px;font-size:30px;"
title="刪除版型" onclick="Designer.removeStyle()">-</a></div>
</div>
</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>
</div>
<div class="row">
<div class="col-2">
<a class="" style="cursor:pointer;text-decoration: none;color:white;width:30px;height:30px;font-size:30px;"
title="增加尺寸" onclick="Designer.changePaper1('newsize')">+</a>
</div>
<div class="col-8">
<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>
</div>
</div>
<div class="col-2">
<a class="" style="cursor:pointer;text-decoration: none;color:white;width:30px;height:30px;font-size:30px;"
title="刪除尺寸" onclick="Designer.removePaper()">-</a>
</div>
</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" />
@@ -52,9 +80,9 @@
<span class="btn btn-info" onclick="Designer.savePaperSize()">儲存</span>
</div>
</div>
<div id="paperOrientation" onclick="Designer.changeOrientation()" class="mb-2">
<%-- <div id="paperOrientation" onclick="Designer.changeOrientation()" class="mb-2">
<span></span>
</div>
</div>--%>
<div>
<ul class="navbar-nav">
<li class="nav-item dropdown">
@@ -259,7 +287,7 @@
this.bg.forEach(x => {
$("#backendInp").append("<option value='" + x.name + "'>" + x.name + "</option>")
});
$("#paperOrientation").html("<span>直向</span>")
//$("#paperOrientation").html("<span>直向</span>")
this.toast = new bootstrap.Toast($('#liveToast'));
},
print() {
@@ -440,6 +468,9 @@
},
async getPaperSize() {
let self = this
self.allSize.length = 0;
$("#paperSize").html("")
$("#printSize").html("")
await axios
.post(HTTP_HOST + 'api/tablet/GetPaperSize', {})
.then(response => {
@@ -476,6 +507,9 @@
});
},
async getStyles() {
let self = this
self.allSize.length = 0
$(".style-menu").html("")
await axios
.post(HTTP_HOST + 'api/tablet/GetStyleData', {})
.then(response => {
@@ -484,7 +518,7 @@
let data = response.data;
if (data.result == "Y") {
data.data.forEach(x => {
this.allStyle.push(x);
self.allStyle.push(x);
$(".style-menu").append("<li><span class='dropdown-item style-item' data-value='" + x.styleID + "'>" + x.name + "</span></li>");
});
@@ -597,6 +631,10 @@
el.y = $("#yPosition").val();
$(`.tablet-element[id="${this.activeId}"]`).css({ left: el.x + "mm", top: el.y + "mm" });
},
changePaper1(val) {
$("#paperSize").val(val)
this.changePaper()
},
changePaper() {
let paperSize = $("#paperSize").val()
let self = this;
@@ -613,13 +651,69 @@
});
}
},
async removePaper() {
let self = this;
let paperSize = $("#paperSize").val()
//console.log("paperSize:",paperSize);
if (paperSize == "newsize" || paperSize == "" || paperSize == null || paperSize==undefined) {
$("#toast_body").html("請選擇要刪除的尺寸")
self.toast.show();
return false
}
let ps = { paperSize: paperSize }
await axios
.post(HTTP_HOST + 'api/tablet/DelPaperSize', ps)
.then(response => {
if (response.status == "200") {
//if (response.data.result == "Y") {
$("#toast_body").html(`${response.data.message}`)
self.toast.show();
//}
if (response.data.result == "Y") {
self.getPaperSize()
$("#paperSize").val("")
this.changePaper()
}
}
});
},
async removeStyle() {
let self = this;
let sID = this.styleID
//console.log("styleID:", sID);
if (sID == "000001" || sID == null || sID == undefined) {
$("#toast_body").html("請選擇要刪除的版型")
self.toast.show();
return false
}
let ps = { styleID: sID }
await axios
.post(HTTP_HOST + 'api/tablet/DelTabletStyle', ps)
.then(response => {
if (response.status == "200") {
//if (response.data.result == "Y") {
$("#toast_body").html(`${response.data.message}`)
self.toast.show();
//}
if (response.data.result == "Y") {
self.getStyles()
}
}
});
},
async savePaperSize() {
let ps = {
paperName: $("#paperName").val(),
width: $("#paperWidth").val(),
height: $("#paperHeight").val()
}
console.log(ps);
let self = this;
//console.log(ps);
await axios
.post(HTTP_HOST + 'api/tablet/SavePaperSize', ps)
.then(response => {
@@ -628,6 +722,9 @@
$("#toast_body").html(`${"ok"}`)
self.toast.show();
self.getPaperSize()
$("#paperSize").val("")
self.changePaper()
}
}
});
@@ -642,7 +739,7 @@
bindEvents() {
// 文字變更連動渲染
//$('#rosterLimit').on('input', (e) =>this.)
console.log("OOQ");
//console.log("OOQ");
$('#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()))