牌位設計功能調整
This commit is contained in:
@@ -93,14 +93,14 @@
|
||||
</select>
|
||||
<label for="printSize" style="color: black">列印尺寸</label>
|
||||
</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">
|
||||
<option value="">請選擇</option>
|
||||
<option value="combine">合併</option>
|
||||
<option value="origin">原尺寸</option>
|
||||
</select>
|
||||
<label for="printMode" style="color: black">列印模式</label>
|
||||
</div>
|
||||
</div>--%>
|
||||
<%-- <div class="form-floating mb-3">
|
||||
<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>
|
||||
@@ -114,7 +114,7 @@
|
||||
<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="Designer.print()">預覽列印</span>
|
||||
<%--<span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.print()">預覽列印</span>--%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -237,10 +237,10 @@
|
||||
allSize: [
|
||||
],
|
||||
bg: [
|
||||
{ name: "黃1", path: "../../admin/print/html/tablet-1_new.svg" },
|
||||
{ name: "黃2", path: "../../admin/print/html/tablet-1B_new.svg" },
|
||||
{ name: "紅1", path: "../../admin/print/html/tablet-2.svg" },
|
||||
{ name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
|
||||
{ name: "超薦1", path: "../../admin/print/html/tablet-1_new.svg" },
|
||||
{ name: "超薦2", path: "../../admin/print/html/tablet-1B_new.svg" },
|
||||
{ name: "消災1", path: "../../admin/print/html/tablet-2.svg" },
|
||||
{ name: "消災2", path: "../../admin/print/html/tablet-2B.svg" }
|
||||
],
|
||||
allStyle: [
|
||||
],
|
||||
@@ -603,7 +603,8 @@
|
||||
if (paperSize == "newsize") {
|
||||
$("#sizeDiv").attr("style", "display:");
|
||||
} else {
|
||||
// console.log("paperSize:", paperSize);
|
||||
// console.log("paperSize:", paperSize);
|
||||
$("#sizeDiv").attr("style", "display:none;");
|
||||
let size = this.allSize.find(x => x.id == paperSize)
|
||||
$(".tablet-paper").css({
|
||||
"background-color": "white",
|
||||
@@ -641,6 +642,7 @@
|
||||
bindEvents() {
|
||||
// 文字變更連動渲染
|
||||
//$('#rosterLimit').on('input', (e) =>this.)
|
||||
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()))
|
||||
@@ -671,12 +673,12 @@
|
||||
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()) : [];
|
||||
const pages = Math.max(1, Math.ceil(names.length / this.rosterLimit));
|
||||
|
||||
//const roster = this.elements.find(e => e.type === 'roster');
|
||||
|
||||
let style = this.allStyle.find(x => x.styleID == this.styleID);
|
||||
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++) {
|
||||
// const $paper = $('<div class="tablet-paper"></div>')
|
||||
// .css({ "background-color": "red", width: this.paper.width + 'mm', height: this.paper.height + 'mm' });
|
||||
@@ -687,9 +689,14 @@
|
||||
position: "absolute"
|
||||
});
|
||||
//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 => {
|
||||
$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);
|
||||
//}
|
||||
@@ -722,6 +729,7 @@
|
||||
html = this.renderNameList(slice, el);
|
||||
}
|
||||
else if (el.id === 'alive') {
|
||||
console.log("createEl:",slice,el)
|
||||
html = this.renderLiveList(slice, el);
|
||||
}
|
||||
else {
|
||||
@@ -772,6 +780,8 @@
|
||||
});
|
||||
},
|
||||
renderLiveList(names, el) {
|
||||
console.log("renderLiveList:",names);
|
||||
//$("#imp-text").updateActive("text",names)
|
||||
let $namelist = $(`<div class='liveList'></div>`).css({
|
||||
"writing-mode": "vertical rl",
|
||||
display: "flex",
|
||||
@@ -795,6 +805,8 @@
|
||||
return $namelist;
|
||||
},
|
||||
renderLiveSpan(name, el) {
|
||||
console.log("renderLiveSpan:", name, el
|
||||
);
|
||||
return $(`<span>${name}</span>`).css({
|
||||
display: "block",
|
||||
"min-height": `${el.textHeight}px`,
|
||||
@@ -869,8 +881,11 @@
|
||||
},
|
||||
|
||||
select(id) {
|
||||
console.log("QQ:",id);
|
||||
this.activeId = id;
|
||||
console.log("QQ:",this.elements);
|
||||
const el = this.elements.find(x => x.id === id);
|
||||
const el1 = this.elements.find(x => x.id === "titletriangle");
|
||||
$('#attr-box').removeClass('d-none');
|
||||
$('#inp-text').val(el.text);
|
||||
$('#inp-size').val(el.style.fontSize);
|
||||
@@ -889,6 +904,7 @@
|
||||
},
|
||||
|
||||
updateActive(key, val) {
|
||||
console.log("updateActive:",key, val)
|
||||
const el = this.elements.find(x => x.id === this.activeId);
|
||||
|
||||
if (key === 'fontSize') el.style.fontSize = parseFloat(val);
|
||||
@@ -1049,7 +1065,7 @@
|
||||
let master = {
|
||||
styleID: this.styleID, styleName: $("#styleName").val(), paperSize: $("#paperSize").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
|
||||
}
|
||||
console.log(master);
|
||||
|
||||
@@ -44,7 +44,8 @@
|
||||
<div class="row mt-2">
|
||||
<div class="col-3">
|
||||
版型設定:
|
||||
<select id="styleSel" onchange="designer.changeStyle()">
|
||||
|
||||
<select id="styleSel" onchange="designer.changeStyle()" class="form-select">
|
||||
<option value="">請選擇版型</option>
|
||||
</select>
|
||||
</div>
|
||||
@@ -211,10 +212,10 @@
|
||||
toast: null,
|
||||
modal: null,
|
||||
bg: [
|
||||
{ name: "黃1", path: "../../../admin/print/html/tablet-1_new.svg" },
|
||||
{ name: "黃2", path: "../../../admin/print/html/tablet-1B_new.svg" },
|
||||
{ name: "紅1", path: "../../../admin/print/html/tablet-2.svg" },
|
||||
{ name: "紅2", path: "../../../admin/print/html/tablet-2B.svg" }
|
||||
{ name: "超薦1", path: "../../../admin/print/html/tablet-1_new.svg" },
|
||||
{ name: "超薦2", path: "../../../admin/print/html/tablet-1B_new.svg" },
|
||||
{ name: "消災1", path: "../../../admin/print/html/tablet-2.svg" },
|
||||
{ name: "消災2", path: "../../../admin/print/html/tablet-2B.svg" }
|
||||
],
|
||||
async init() {
|
||||
// 載入常用片語
|
||||
@@ -303,7 +304,7 @@
|
||||
let data = response.data;
|
||||
if (data.data) {
|
||||
data.data.forEach(x => {
|
||||
if (x.styleID !== "00001") {
|
||||
if (x.styleID !== "000001") {
|
||||
this.allStyle.push(x);
|
||||
$("#styleSel").append(`<option value="${x.styleID}">${x.name}</option`);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user