功能調整
This commit is contained in:
@@ -22,8 +22,10 @@
|
||||
}
|
||||
|
||||
.work_space {
|
||||
min-height: 80vh;
|
||||
min-width: 80vw;
|
||||
min-height: 40vh;
|
||||
min-width: 70vw;
|
||||
max-width: 90vw;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -39,8 +41,8 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="d-flex full-home no-print" style="height: 100%;width:100%;">
|
||||
<div id="designArea" class="designArea" style="width: auto; height: auto">
|
||||
<div class="d-flex full-home no-print" style="height: 100vh;width:100%;">
|
||||
<div id="designArea" class="designArea" style="width: 100%; height: auto">
|
||||
<div class="row mt-2">
|
||||
<div class="col-3">
|
||||
版型設定:
|
||||
@@ -52,13 +54,34 @@
|
||||
<div class="col-2">
|
||||
<button class="btn btn-primary" onclick="designer.save(event)">儲存牌位</button>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<!-- 原生縮放橫軸容器 -->
|
||||
<div style="display: flex; align-items: center; padding: 8px; background-color: #f5f5f5; border-radius: 4px; margin-bottom: 12px; font-family: sans-serif;">
|
||||
<span style="margin-right: 8px; font-size: 14px;" onclick="designer.minusZoomScalee()">➖</span>
|
||||
|
||||
<!-- 使用 input type="range"，綁定 zoomScale -->
|
||||
<!-- min="0.2" (20%), max="1.5" (150%), step="0.05" (每次滑動5%) -->
|
||||
<input type="range"
|
||||
v-model="designer.zoomScale"
|
||||
min="0.0"
|
||||
max="1.0"
|
||||
step="0.05"
|
||||
style="flex-grow: 1; cursor: pointer;" id="scaleSlider">
|
||||
|
||||
<span style="margin-left: 8px; font-size: 14px;" onclick="designer.plusZoomScalee()">➕</span>
|
||||
<!-- 顯示百分比數值 -->
|
||||
<span id="scaleSize" style="margin-left: 12px; min-width: 45px; font-weight: bold; font-size: 14px; text-align: right;">
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row work_space">
|
||||
<div class="col-8 div_border printArea"></div>
|
||||
<div class="col-4 div_border" style="font-size:12px;">
|
||||
<div class="row" style="height: 50%; overflow: auto;">
|
||||
<div class="col-7 div_border printArea" style="height:80vh;overflow-y:auto;"></div>
|
||||
<div class="col-5 div_border" style="font-size:12px;">
|
||||
<div class="row" style="height: 50%; overflow-y: auto;">
|
||||
<div style="display:inline-block;width:100%;height:30px;background-color:darkgray;">
|
||||
<div class="row">
|
||||
<div class="row" >
|
||||
<div class="col-12">
|
||||
<h3>已選</h3>
|
||||
</div>
|
||||
@@ -75,11 +98,10 @@
|
||||
<ul class="selectedItem" style="margin-left:1rem;margin-right:1rem;">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row" style="height: 50%; overflow: auto;">
|
||||
<div class="row" style="height:50%;overflow-y:auto;">
|
||||
<div style="display:inline-block;width:100%;height:30px;background-color:darkgray;">
|
||||
<div class="row">
|
||||
<div class="row" >
|
||||
<div class="col-12">
|
||||
<h3>可選</h3>
|
||||
</div>
|
||||
@@ -165,6 +187,7 @@
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const designer = {
|
||||
zoomScale:1,
|
||||
code: {
|
||||
style: []
|
||||
},
|
||||
@@ -228,8 +251,28 @@
|
||||
this.toast = new bootstrap.Toast($('#liveToast'));
|
||||
this.modal = new bootstrap.Modal($('#familyModal'));
|
||||
//this.toast.show();
|
||||
$("#scaleSize").html((this.zoomScale * 100) + "%")
|
||||
$("#scaleSlider").val(this.zoomScale)
|
||||
$("#scaleSlider").on("change", function () {
|
||||
this.zoomScale = $(this).val()
|
||||
$("#scaleSize").html(Math.floor(Number($(this).val()) * 100) + "%");
|
||||
$(".tablet-paper").css("transform",`scale(${Number($(this).val())})`);
|
||||
})
|
||||
},
|
||||
async minusZoomScalee() {
|
||||
this.zoomScale = this.zoomScale - 0.05
|
||||
$("#scaleSize").html(Math.floor(this.zoomScale * 100) + "%")
|
||||
$("#scaleSlider").val(this.zoomScale)
|
||||
$(".tablet-paper").css("transform", `scale(${Number(this.zoomScale)})`);
|
||||
},
|
||||
async plusZoomScalee() {
|
||||
this.zoomScale = this.zoomScale + 0.05
|
||||
$("#scaleSize").html(Math.floor(this.zoomScale * 100) + "%")
|
||||
$("#scaleSlider").val(this.zoomScale)
|
||||
$(".tablet-paper").css("transform", `scale(${Number(this.zoomScale)})`);
|
||||
}, //加撈activity_relating的資料，用來判斷是否有人數上限 activity_num actItem_num
|
||||
async getActItem() {
|
||||
//console.log(this.tabletItem.has_chao_limit, this.tabletItem.has_yang_limit, this.tabletItem.chao_limit_count, this.tabletItem.yang_limit_count)
|
||||
axios
|
||||
.post('/api/tablet/GetActItem', { itemNum: this.actitem })
|
||||
.then(response => {
|
||||
@@ -241,8 +284,6 @@
|
||||
this.selectStyle.style = response.data.data.defaultStyle;
|
||||
//console.log("GetActItem:",this.defaultStyle)
|
||||
$("#styleSel").val(this.defaultStyle);
|
||||
|
||||
//this.getStyle();
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -274,17 +315,9 @@
|
||||
if (response.status == "200") {
|
||||
let data = response.data;
|
||||
this.allSize = data.data;
|
||||
//console.log(this.allSize);
|
||||
//if (this.allSize) {
|
||||
// this.allSize.forEach(x => {
|
||||
// $("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`);
|
||||
// })
|
||||
|
||||
//}
|
||||
}
|
||||
//$("#paperSizeSel").val("0003");
|
||||
}
|
||||
)
|
||||
})
|
||||
},
|
||||
async getTabletElement() {
|
||||
this.tabletElement.length = 0;
|
||||
@@ -327,6 +360,8 @@
|
||||
let param = [];
|
||||
let self = this;
|
||||
param.push({ order_no: this.tabletItem.order_no, num: this.tabletItem.num })
|
||||
|
||||
|
||||
await axios
|
||||
.post('/api/orderdetail/GetDetailToPrint', { param: param })
|
||||
.then(response => {
|
||||
@@ -440,8 +475,13 @@
|
||||
let pageSize = self.allSize.find(y => y.paperID == style.paperSize);
|
||||
//包含空白用來折的尺寸
|
||||
let printSize = self.allSize.find(y => y.paperID == style.printSize);
|
||||
|
||||
tabletpaper = $(` <div class="tablet-paper"></div>`)
|
||||
//let scaleSize = 1
|
||||
//let documentHeight = document.documentElement.scrollHeight;
|
||||
//if ((Number(pageSize.height) / 0.265) >= (Number(documentHeight) * 0.8)) {
|
||||
// scaleSize = (Number(documentHeight) * 0.8) / (Number(pageSize.height) / 0.265)
|
||||
//}
|
||||
//$("#scaleSize").html((scaleSize * 100) + "%")
|
||||
tabletpaper = $(` <div class="tablet-paper" style="transform-origin:top left;transform:scale(${this.zoomScale})"></div>`)
|
||||
let img = self.bg.find(y => y.name == style.backendImg);
|
||||
let details = this.allStyleDetails.filter(y => y.styleID == style.styleID);
|
||||
let ancestorFontSize = 16;
|
||||
@@ -1049,8 +1089,15 @@
|
||||
$(".itemAppend").on("click", function (e) {
|
||||
let curr = $(e.currentTarget.parentElement).find(".unselect").first();
|
||||
let target = self.familyMembers.find(x => x.fam_name == curr.text());
|
||||
if (target) {
|
||||
if (target) {//liveList nameList rosterList 要判斷yang_limit_count chao_limit_count
|
||||
if ($(self.selectedElement).children().first().hasClass("liveList")) {
|
||||
if (self.tabletItem.has_yang_limit && self.tabletItem.yang_limit_count > 0) {
|
||||
if (self.alive.length + 1 > self.tabletItem.yang_limit_count) {
|
||||
$("#toast_body").html(`陽上人數不得超過${self.tabletItem.yang_limit_count}人`)
|
||||
self.toast.show();
|
||||
return
|
||||
}
|
||||
}
|
||||
self.alive.push(target.fam_name);
|
||||
let obj = {
|
||||
IsShuWen: false,
|
||||
@@ -1065,6 +1112,14 @@
|
||||
self.family_deceased_Y_selected.push(obj);
|
||||
} else if ($(self.selectedElement).children().first().hasClass("nameList") ||
|
||||
$(self.selectedElement).children().first().hasClass("rosterList")) {
|
||||
|
||||
if (self.tabletItem.has_chao_limit && self.tabletItem.chao_limit_count > 0) {
|
||||
if (self.properTitle.length + 1 > self.tabletItem.chao_limit_count) {
|
||||
$("#toast_body").html(`祈福或超渡人數不得超過${self.tabletItem.chao_limit_count}人`)
|
||||
self.toast.show();
|
||||
return
|
||||
}
|
||||
}
|
||||
self.properTitle.push(target.fam_name);
|
||||
|
||||
let obj = {
|
||||
@@ -1779,10 +1834,12 @@
|
||||
//designer.reset();
|
||||
let e = event.originalEvent;
|
||||
//console.log("QOO");
|
||||
//console.log("傳過來了");
|
||||
if (e.origin === window.parent.location.origin) {
|
||||
//console.log('editor.html - origin check passed');
|
||||
//console.log('editor.html - received data:', event.data);
|
||||
const receivedData = e.data;
|
||||
// console.log("receivedData:", receivedData)
|
||||
designer.family_deceased_Y_selected = [];
|
||||
designer.family_deceased_N_selected = [];
|
||||
designer.family_left_title = [];
|
||||
|
||||
Reference in New Issue
Block a user