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

牌位設計功能調整

Browse Source
This commit is contained in:
minom
2026-05-26 17:55:36 +08:00
parent a58e6ac7ac
commit 669b29d183
2 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin/item/TabletDesigner.aspx
+31 -15
View File
@@ -93,14 +93,14 @@
</select> </select>
<label for="printSize" style="color: black">列印尺寸</label> <label for="printSize" style="color: black">列印尺寸</label>
</div> </div>
<div class="form-floating mb-3"> <%--<div class="form-floating mb-3">
<select class="form-select form-select-sm mb-2 " onchange="Designer.changePrintMode()" id="printMode"> <select class="form-select form-select-sm mb-2 " onchange="Designer.changePrintMode()" id="printMode">
<option value="">請選擇</option> <option value="">請選擇</option>
<option value="combine">合併</option> <option value="combine">合併</option>
<option value="origin">原尺寸</option> <option value="origin">原尺寸</option>
</select> </select>
<label for="printMode" style="color: black">列印模式</label> <label for="printMode" style="color: black">列印模式</label>
</div> </div>--%>
<%-- <div class="form-floating mb-3"> <%-- <div class="form-floating mb-3">
<input type="number" id="rosterLimit" onchange="Designer.changeRosterLimit()" class="form-control form-control-sm mb-2"> <input type="number" id="rosterLimit" onchange="Designer.changeRosterLimit()" class="form-control form-control-sm mb-2">
<label class="small" for="rosterLimit" style="color: black;">正名上限</label> <label class="small" for="rosterLimit" style="color: black;">正名上限</label>
@@ -114,7 +114,7 @@
<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>
@@ -237,10 +237,10 @@
allSize: [ allSize: [
], ],
bg: [ bg: [
{ name: "黃1", path: "../../admin/print/html/tablet-1_new.svg" }, { name: "超薦1", path: "../../admin/print/html/tablet-1_new.svg" },
{ name: "黃2", path: "../../admin/print/html/tablet-1B_new.svg" }, { name: "超薦2", path: "../../admin/print/html/tablet-1B_new.svg" },
{ name: "紅1", path: "../../admin/print/html/tablet-2.svg" }, { name: "消災1", path: "../../admin/print/html/tablet-2.svg" },
{ name: "紅2", path: "../../admin/print/html/tablet-2B.svg" } { name: "消災2", path: "../../admin/print/html/tablet-2B.svg" }
], ],
allStyle: [ allStyle: [
], ],
@@ -603,7 +603,8 @@
if (paperSize == "newsize") { if (paperSize == "newsize") {
$("#sizeDiv").attr("style", "display:"); $("#sizeDiv").attr("style", "display:");
} else { } else {
// console.log("paperSize:", paperSize); // console.log("paperSize:", paperSize);
$("#sizeDiv").attr("style", "display:none;");
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",
@@ -641,6 +642,7 @@
bindEvents() { bindEvents() {
// 文字變更連動渲染 // 文字變更連動渲染
//$('#rosterLimit').on('input', (e) =>this.) //$('#rosterLimit').on('input', (e) =>this.)
console.log("OOQ");
$('#inp-text').on('input', (e) => this.updateActive('text', $(e.target).val())); $('#inp-text').on('input', (e) => this.updateActive('text', $(e.target).val()));
$('#inp-size').on('input', (e) => this.updateActive('fontSize', $(e.target).val())); $('#inp-size').on('input', (e) => this.updateActive('fontSize', $(e.target).val()));
$('#width').on('input', (e) => this.updateActive('width', $(e.target).val())) $('#width').on('input', (e) => this.updateActive('width', $(e.target).val()))
@@ -671,12 +673,12 @@
render() { render() {
$(".tablet-paper").empty(); $(".tablet-paper").empty();
//const $canvas = $('#canvas').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()) : []; //const roster = this.elements.find(e => e.type === 'roster');
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' });
@@ -687,9 +689,14 @@
position: "absolute" position: "absolute"
}); });
//const slice = names.slice(p * this.rosterLimit, (p + 1) * this.rosterLimit); //const slice = names.slice(p * this.rosterLimit, (p + 1) * this.rosterLimit);
const slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit); //const roster = this.elements.find(e => e.id === this.styleID);
let self = this;
this.elements.forEach(el => { this.elements.forEach(el => {
$paper.append(this.createEl(el, slice)); const names = el.text.split('\n').filter(s => s.trim());
const pages = Math.max(1, Math.ceil(names.length / self.rosterLimit));
const slice = names.slice(0 * self.rosterLimit, (0 + 1) * self.rosterLimit);
$paper.append(self.createEl(el, slice));
}); });
//$canvas.append($paper); //$canvas.append($paper);
//} //}
@@ -722,6 +729,7 @@
html = this.renderNameList(slice, el); html = this.renderNameList(slice, el);
} }
else if (el.id === 'alive') { else if (el.id === 'alive') {
console.log("createEl:",slice,el)
html = this.renderLiveList(slice, el); html = this.renderLiveList(slice, el);
} }
else { else {
@@ -772,6 +780,8 @@
}); });
}, },
renderLiveList(names, el) { renderLiveList(names, el) {
console.log("renderLiveList:",names);
//$("#imp-text").updateActive("text",names)
let $namelist = $(`<div class='liveList'></div>`).css({ let $namelist = $(`<div class='liveList'></div>`).css({
"writing-mode": "vertical rl", "writing-mode": "vertical rl",
display: "flex", display: "flex",
@@ -795,6 +805,8 @@
return $namelist; return $namelist;
}, },
renderLiveSpan(name, el) { renderLiveSpan(name, el) {
console.log("renderLiveSpan:", name, el
);
return $(`<span>${name}</span>`).css({ return $(`<span>${name}</span>`).css({
display: "block", display: "block",
"min-height": `${el.textHeight}px`, "min-height": `${el.textHeight}px`,
@@ -869,8 +881,11 @@
}, },
select(id) { select(id) {
console.log("QQ:",id);
this.activeId = id; this.activeId = id;
console.log("QQ:",this.elements);
const el = this.elements.find(x => x.id === id); const el = this.elements.find(x => x.id === id);
const el1 = this.elements.find(x => x.id === "titletriangle");
$('#attr-box').removeClass('d-none'); $('#attr-box').removeClass('d-none');
$('#inp-text').val(el.text); $('#inp-text').val(el.text);
$('#inp-size').val(el.style.fontSize); $('#inp-size').val(el.style.fontSize);
@@ -889,6 +904,7 @@
}, },
updateActive(key, val) { updateActive(key, val) {
console.log("updateActive:",key, val)
const el = this.elements.find(x => x.id === this.activeId); const el = this.elements.find(x => x.id === this.activeId);
if (key === 'fontSize') el.style.fontSize = parseFloat(val); if (key === 'fontSize') el.style.fontSize = parseFloat(val);
@@ -1049,7 +1065,7 @@
let master = { let master = {
styleID: this.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(), backendImg: $("#backendInp").val(), printSize: $("#printSize").val(), printMode: $("#printMode").val(),
orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(), rosterLimit: $("#rosterLimit").val(), orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(), rosterLimit: 8,
detail: detail detail: detail
} }
console.log(master); console.log(master);
web/admin/print/tablet_edit/editorNewOne.html
+7 -6
View File
@@ -44,7 +44,8 @@
<div class="row mt-2"> <div class="row mt-2">
<div class="col-3"> <div class="col-3">
版型設定: 版型設定:
<select id="styleSel" onchange="designer.changeStyle()">
<select id="styleSel" onchange="designer.changeStyle()" class="form-select">
<option value="">請選擇版型</option> <option value="">請選擇版型</option>
</select> </select>
</div> </div>
@@ -211,10 +212,10 @@
toast: null, toast: null,
modal: null, modal: null,
bg: [ bg: [
{ name: "黃1", path: "../../../admin/print/html/tablet-1_new.svg" }, { name: "超薦1", path: "../../../admin/print/html/tablet-1_new.svg" },
{ name: "黃2", path: "../../../admin/print/html/tablet-1B_new.svg" }, { name: "超薦2", path: "../../../admin/print/html/tablet-1B_new.svg" },
{ name: "紅1", path: "../../../admin/print/html/tablet-2.svg" }, { name: "消災1", path: "../../../admin/print/html/tablet-2.svg" },
{ name: "紅2", path: "../../../admin/print/html/tablet-2B.svg" } { name: "消災2", path: "../../../admin/print/html/tablet-2B.svg" }
], ],
async init() { async init() {
// 載入常用片語 // 載入常用片語
@@ -303,7 +304,7 @@
let data = response.data; let data = response.data;
if (data.data) { if (data.data) {
data.data.forEach(x => { data.data.forEach(x => {
if (x.styleID !== "00001") { if (x.styleID !== "000001") {
this.allStyle.push(x); this.allStyle.push(x);
$("#styleSel").append(`<option value="${x.styleID}">${x.name}</option`); $("#styleSel").append(`<option value="${x.styleID}">${x.name}</option`);
} }