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-04-08 17:54:28 +08:00
parent 83a7c67439
commit 8fe243356e
1 changed files with 656 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/admin/print/tablet_edit/editorNewOne.html
+385 -98
View File
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../../../js/bootstrap5/bootstrap.min.css" />
<link href="../../../js/fontawesome6/css/all.min.css" />
<link href="../../item/jquery-ui/jquery-ui.min.css" />
<link href="../../../js/vuetify.css" rel="stylesheet" />
<link href="../../../js/mdi-font/css/materialdesignicons.min.css" rel="stylesheet" />
@@ -18,9 +19,21 @@
.div_border {
border: 1px solid black;
}
.work_space {
min-height:90vh;
min-width:90vw;
min-height: 80vh;
min-width: 80vw;
}
body {
width: 90vw;
height: 90vh
}
li {
font-size: 16px;
list-style: none;
margin-top: 1rem;
}
</style>
</head>
@@ -28,15 +41,34 @@
<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="row mt-2">
<div class="col-3">版型設定:
<div class="col-3">
版型設定:
<select id="styleSel" onchange="designer.changeStyle()">
<option value="">請選擇版型</option>
</select>
</div>
<div class="col-2">
<button class="btn btn-primary" onclick="designer.save()">儲存牌位</button>
</div>
</div>
<div class="row work_space">
<div class="col-8 div_border printArea"></div>
<div class="col-4 div_border"></div>
<div class="col-4 div_border" style="font-size:12px;">
<div class="row" style="height: 50%; width: 100%; overflow: auto;">
<div style="display:inline-block;width:100%;height:30px;background-color:darkgray;">
<h1>已選</h1>
<ul class="selectedItem" style="margin-left:1rem;margin-right:1rem;">
</ul>
</div>
</div>
<div class="row" style="height: 50%; width: 100%; overflow: auto;">
<div style="display:inline-block;width:100%;height:30px;background-color:darkgray;">
<h1>可選</h1>
<ul class="canselectItem" style="margin-left: 1rem;margin-right:1rem;">
</ul>
</div>
</div>
</div>
</div>
</div>
@@ -94,92 +126,6 @@
.then(res => res.json())
.then(data => { this.phrases = data; })
.catch(err => console.error('載入 phrases.json 失敗:', err));
//// 監聽來自父頁面的消息
//window.addEventListener('message', (event) => {
// this.isAllSelected = false;
// //console.log('editor.html - received message event');
// //console.log('editor.html - event origin:', event.origin);
// //console.log('editor.html - parent origin:', window.parent.location.origin);
// if (event.origin === window.parent.location.origin) {
// //console.log('editor.html - origin check passed');
// //console.log('editor.html - received data:', event.data);
// const receivedData = event.data;
// this.family_deceased_Y_selected = [];
// this.family_deceased_N_selected = [];
// if (receivedData.tabletItem) {
// //console.log('editor.html - updating tabletItem:', receivedData.tabletItem);
// this.tabletItem = receivedData.tabletItem;
// if (receivedData.familyMembers) {
// this.familyMembers = receivedData.familyMembers; // 更新 familyMembers
// //console.log("app mounted, window message: ", this.familyMembers, receivedData);
// }
// if (receivedData.tabletItem) {
// this.tabletItem = receivedData.tabletItem;
// }
// //console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
// console.log("receivedData::", receivedData);
// if (receivedData.tabletItem.style) {
// this.selected.style = receivedData.tabletItem.style;
// } else {
// this.selected.style = "";
// }
// console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
// this.actitem = receivedData.tabletItem.actitem_num_selected.val;
// //console.log("actitem:",receivedData.tabletItem.actitem_num_selected.val);
// // 處理 f_num_tablet 資料
// if (this.tabletItem.f_num_tablet) {
// try {
// const data = JSON.parse(this.tabletItem.f_num_tablet);
// if (this.item_type === 'B') {
// // B類型：超渡、超薦等
// this.family_deceased_Y_selected = data.mid_items || [];
// this.family_deceased_N_selected = data.left_items || [];
// this.family_deceased_Y_selected.forEach(item => {
// if (item.IsShuWen === undefined) {
// //Vue.set(item, 'IsShuWen', false);
// }
// });
// if (this.family_deceased_Y_selected.length > 0) {
// this.isAllSelected = this.family_deceased_Y_selected.every(member => member.IsShuWen === true);
// } else {
// this.isAllSelected = false;
// }
// } else {
// // A類型：消災、陽上等
// this.family_deceased_Y_selected = [];
// this.family_deceased_N_selected = data.mid_items || [];
// this.family_deceased_N_selected.forEach(item => {
// if (item.IsShuWen === undefined) {
// //Vue.set(item, 'IsShuWen', false);
// }
// });
// if (this.family_deceased_Y_selected.length > 0) {
// this.isAllSelected = this.family_deceased_N_selected.every(member => member.IsShuWen === true);
// } else {
// this.isAllSelected = false;
// }
// //console.log(this.family_deceased_N_selected)
// }
// } catch (e) {
// console.error('解析牌位資料時發生錯誤:', e);
// }
// }
// }
// }
//});
//let HTTP_HOST = "<%=UrlHost()%>";
//this.http_host = HTTP_HOST;
},
async getActItem() {
axios
@@ -305,8 +251,7 @@
let nowPageWidth = 0;
let tabletpaper;
//列印紙張的尺寸
console.log("printData:", this.printData);
;
let mid = [];
Object.assign(mid, self.properTitle);
let left = []
@@ -336,7 +281,7 @@
let bi = "";
if (d.elementID === 'title1') {
let $namelist = $(`<div class='nameList'></div>`).css({
/* let $namelist = $(`<div class='nameList'></div>`).css({
"writing-mode": "vertical rl",
display: "flex",
"flex-direction": "row",
@@ -378,7 +323,8 @@
$namelist.append($span);
});
html = $namelist;
html = $namelist;*/
html = self.renderNameList(mid, d, newFontSize,style);
} else if (d.elementID === "alive") {
html = self.renderLiveList(left, d);
@@ -595,17 +541,213 @@
e.preventDefault();
self.selectedElement = $(this);
let element = $(this).children().first();
self.renderItem(element);
});
},
async renderItem(element) {
let self = this;
$(".selectedItem").empty();
$(".canselectItem").empty();
console.log(element);
if (element.hasClass("liveList")) {//陽上
//抓往生的人出來
//抓未往生的人出來
//self.familyMembers;
self.alive.forEach(x => {
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${x}</span>
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>
<span class="itemUp" style="float:right ;margin-left:2rem;cursor:pointer;">&#8593;</span>
<span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
});
let items = []
self.familyMembers.forEach(x => {
if (x.deceased == false)
items.push(x.fam_name);
});
let finalItem = items.filter(y => !self.alive.includes(y))
finalItem.forEach(yy => {
$(".canselectItem").append(`<li><span style="opacity:0.5">卍</span> <span class="unselect">${yy}</span><span class='itemAppend' style="float:right;cursor:pointer;">&#43;<span></li>`);
});
} else if (element.hasClass("address")) {//地址
} else {//其他都是正名
//抓未往生的人出來
}
//console.log(this);
if (element.hasClass("ancestor-wrapper")) {//多姓氏合併，只允許用打的
self.properTitle.forEach(y => {
$(".selectedItem").append(`<li>${y}</li>`)
});
} else if (element.hasClass("nameList")) {//
self.properTitle.forEach(y => {
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${y}</span>
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>
<span class="itemUp" style="float:right ;margin-left:2rem;cursor:pointer;">&#8593;</span>
<span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
})
let items = []
self.familyMembers.forEach(x => {
if (x.deceased == false)
items.push(x.fam_name);
});
let finalItem = items.filter(y => !self.properTitle.includes(y))
finalItem.forEach(yy => {
$(".canselectItem").append(`<li><span style="opacity:0.5">卍</span> <span class="unselect">${yy}</span><span class='itemAppend' style="float:right;cursor:pointer;">&#43;<span></li>`);
});
}
}
self.bindEvent();
},
async bindEvent() {
let self = this;
$(".itemAppend").off("click");
$(".itemRemove").off("click");
$(".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 ($(self.selectedElement).children().first().hasClass("liveList")) {
self.alive.push(target.fam_name);
let obj = {
IsShuWen: false,
deceased: false,
fam_gender: "",
fam_name: target.fam_name,
fam_file: "",
nospace: true,
num: target.num,
option_break: false
}
self.family_deceased_Y_selected.push(obj);
} else if ($(self.selectedElement).children().first().hasClass("nameList")) {
self.properTitle.push(target.fam_name);
let obj = {
IsShuWen: false,
deceased: false,
fam_gender: "",
fam_name: target.fam_name,
fam_file: "",
nospace: true,
num: target.num,
option_break: false
}
self.family_deceased_Y_selected.push(obj);
}
}
self.renderItem($(self.selectedElement).children().first())
self.rerenderPart();
});
$(".itemRemove").on("click", function (e) {
let curr = $(e.currentTarget.parentElement).find(".selected").first();
//let target = self.alive.find(x => x == curr.text());
if ($(self.selectedElement).children().first().hasClass("liveList")) {
self.alive = self.alive.filter(x => x !== curr.text());
self.family_deceased_Y_selected.filter(x => x.fam_name != curr.text());
} else if ($(self.selectedElement).children().first().hasClass("nameList")) {
self.properTitle = self.properTitle.filter(x => x !== curr.text());
self.family_deceased_Y_selected.filter(x => x.fam_name != curr.text());
}
self.renderItem($(self.selectedElement).children().first());
self.rerenderPart();
});
$(".itemUp").on("click", function (e) {
let curr = $(e.currentTarget.parentElement).find(".selected").first();
if ($(self.selectedElement).children().first().hasClass("liveList")) {
let index = self.alive.indexOf(curr.text());
if (index == 0) {
} else {
[self.alive[index - 1], self.alive[index]] = [self.alive[index], self.alive[index - 1]];
[self.family_deceased_Y_selected[index - 1], self.family_deceased_Y_selected[index]] =
[self.family_deceased_Y_selected[index], self.family_deceased_Y_selected[index - 1]];
}
} else if ($(self.selectedElement).children().first().hasClass("nameList")) {
let index = self.properTitle.indexOf(curr.text());
if (index == 0) {
} else {
[self.properTitle[index - 1], self.properTitle[index]] = [self.properTitle[index], self.alive[index - 1]];
[self.family_deceased_Y_selected[index - 1], self.family_deceased_Y_selected[index]] =
[self.family_deceased_Y_selected[index], self.family_deceased_Y_selected[index - 1]];
}
}
self.renderItem($(self.selectedElement).children().first());
self.rerenderPart();
});
$(".itemDown").on("click", function (e) {
let curr = $(e.currentTarget.parentElement).find(".selected").first();
if ($(self.selectedElement).children().first().hasClass("liveList")) {
let index = self.alive.indexOf(curr.text());
if (index == self.alive.length) {
} else {
[self.alive[index], self.alive[index + 1]] = [self.alive[index + 1], self.alive[index]];
[self.family_deceased_Y_selected[index], self.family_deceased_Y_selected[index + 1]] =
[self.family_deceased_Y_selected[index + 1], self.family_deceased_Y_selected[index]];
}
} else if ($(self.selectedElement).children().first().hasClass("nameList")) {
let index = self.properTitle.indexOf(curr.text());
if (index == self.properTitle.length) {
} else {
[self.properTitle[index], self.properTitle[index + 1]] = [self.properTitle[index + 1], self.properTitle[index]];
[self.family_deceased_Y_selected[index], self.family_deceased_Y_selected[index + 1]] =
[self.family_deceased_Y_selected[index + 1], self.family_deceased_Y_selected[index]];
}
}
self.renderItem($(self.selectedElement).children().first());
self.rerenderPart();
});
},
async rerenderPart() {
let self = this;
if ($(self.selectedElement).children().first().hasClass("liveList")) {
$(self.selectedElement).empty();
//要重新render陽上
let left = []
Object.assign(left, self.alive);
//this.printData.forEach(x => {
let x = self.selectStyle;
let style = self.allStyle.find(y => y.styleID == x.style);
//用來印內容的尺寸
let size = self.allSize.find(y => y.paperID == style.paperSize);
let pageSize = self.allSize.find(y => y.paperID == style.printSize);
//包含空白用來折的尺寸
let printSize = self.allSize.find(y => y.paperID == style.printSize);
let details = self.allStyleDetails.filter(y => y.styleID == x.style);
let d = details.find(y => y.elementID == "alive");
let html = self.renderLiveList(left, d);
$(self.selectedElement).append(html);
} else {
if ($(self.selectedElement).children().first().hasClass("nameList")) {
$(self.selectedElement).empty();
//要重新render陽上
let mid = []
Object.assign(mid, self.properTitle);
//this.printData.forEach(x => {
let x = self.selectStyle;
let style = self.allStyle.find(y => y.styleID == x.style);
//用來印內容的尺寸
let size = self.allSize.find(y => y.paperID == style.paperSize);
let pageSize = self.allSize.find(y => y.paperID == style.printSize);
//包含空白用來折的尺寸
let printSize = self.allSize.find(y => y.paperID == style.printSize);
let details = self.allStyleDetails.filter(y => y.styleID == x.style);
let d = details.find(y => y.elementID == "title1");
let html = self.renderNameList(mid, d, style.fontSize, style);
$(self.selectedElement).append(html);
}
}
},
async itemAppend(e) {
//console.log(e);
},
//async getFamily() {
// let param = {};
@@ -620,6 +762,51 @@
fix2(val) {
return Number.parseFloat(val).toFixed(2);
},
renderNameList(mid,d,newFontSize,style) {
let self = this;
let $namelist = $(`<div class='nameList'></div>`).css({
"writing-mode": "vertical rl",
display: "flex",
"flex-direction": "row",
"flex-wrap": "wrap",
margin: "auto",
width: `${d.width}px`,
height: `${d.height}px`,
border: "0px solid #ccc",
padding: "1px",
"font-family": style.fontFamily,
"letter-spacing": "0.1em",
"column-gap": "1px",
"row-gap": "1px",
"align-items": "center",
"justify-content": "space-between",
});
mid.forEach(z => {
let info = self.getTextInfo(z, newFontSize);
let spanWidth = mid.length > 1 ? newFontSize : d.width
let height = d.textHeight;
if (info.width >= d.textHeight) {
height = d.height;
}
let $span = $(`<span class="nameSpan">${z}</span>`).css({
display: "block",
"min-height": `${height}px`,
"max-height": `${d.height}px`,
"max-width": `${spanWidth}px`,
//width: `${newFontSize}px`,
"text-align": "justify",
"text-align-last": "justify",
"margin-bottom": "20px",
"margin-left": "5px",
"text-justify": "inter-character",
"white-space": "pre-line",
//"justify-content":"center"
});
$namelist.append($span);
});
return $namelist;
},
renderLiveList(names, el) {
let $namelist = $(`<div class='liveList'></div>`).css({
"writing-mode": "vertical rl",
@@ -742,9 +929,109 @@
document.body.removeChild(span);
return result;
},
async save() {
//console.log("tabletItem:", designer.tabletItem);
//拚牌位的內容
let self = this;
let target = self.familyMembers.filter(x => self.alive.includes(x.fam_name));
designer.family_deceased_Y_selected.length = 0;
self.alive.forEach(x => {
let t = target.find(y => y.fam_name == x);
let obj = {
IsShuWen: false,
deceased: false,
fam_gender: "",
fam_name: t.fam_name,
fam_file: "",
nospace: true,
num: t.num,
option_break: false
}
designer.family_deceased_Y_selected.push(obj);
});
//console.log(designer.family_deceased_Y_selected, designer.family_deceased_N_selected);
let tablet = { mid_items: designer.family_deceased_N_selected, left_items: designer.family_deceased_Y_selected, style: designer.selectStyle.style }
var pro_order_detail =
{
num: designer.tabletItem.num <= 0 ? null : designer.tabletItem.num,
order_no: designer.tabletItem.order_no,
parent_num: designer.tabletItem.parent_num,
actItem_num: designer.tabletItem.actitem_num_selected.val,
f_num: designer.tabletItem.f_num_selected.val,
f_num_tablet: JSON.stringify(tablet), //designer.tabletItem.f_num_tablet,//牌位內容
print_id: designer.tabletItem.print_id,
address: designer.tabletItem.address,
from_id: designer.tabletItem.from_id_selected.val,
from_id_tablet: designer.tabletItem.from_id_tablet,
start_date: designer.tabletItem.category == 1 ? designer.tabletItem.start_date : null,
due_date: designer.tabletItem.category == 1 ? designer.tabletItem.due_date : null,
extend_date: designer.tabletItem.category == 1 ? designer.tabletItem.extend_date : null,
price: designer.tabletItem.price,
qty: designer.tabletItem.qty,
//total: this.editedItem.total,
keyin1: designer.tabletItem.keyin1_selected.val,
demo: designer.tabletItem.demo,
pay: designer.tabletItem.pay,
pay_date: designer.tabletItem.pay_date,
customize_data: designer.tabletItem.customize_data,
style: designer.selectStyle.style
}
await axios
.post('/api/order/SaveDetailData', pro_order_detail)
.then(response => {
console.log(response);
});
//console.log("pro_order_detail:",pro_order_detail);
},
reset() {
designer.code = { style: [] };
designer.selected = {
style: ""
};
designer.actitem = "";
designer.pageSize = "";
designer.defaultStyle = "";
designer.isAllSelected = false;
designer.dialog = false;
designer.addDialog = false; // 新增項目對話框
designer.addDialogType = ''; // 'Y' 或 'N'
designer.newItemText = ''; // 新增項目的文字
designer.noSpace = true; // 不加空格 checkbox（預設勾選）
designer.deleteDialog = false; // 確認刪除對話框
designer.deleteIndex = -1; // 要刪除的 index
designer.deleteType = ''; // 'Y' 或 'N'
designer.deleteMemberName = ''; // 要刪除的名稱（顯示用）
designer.phrases = []; // 常用片語
designer.familyMembers = []; // 親友名單
designer.tabletItem = {}; // 傳入的資料(信眾/牌位資訊)
designer.item = {};
designer.family_deceased_Y_selected = []; // 超渡/超薦/超冤名單
designer.family_deceased_N_selected = []; // 消災/陽上名單
designer.allStyle = [];
designer.allStyleDetails = [];
designer.allSize = [];
designer.tabletElement = [];
designer.http_host = "";
designer.printData = [];
designer.selectedElement = {};
designer.selectStyle = {};
designer.properTitle = [];//正名
designer.leftProperTitle = [];//左正名
designer.rightProperTitle = [];//右正名
designer.address = "";//地址
designer.alive = [];//陽上
}
}
$(() => $(window).on("message", function (event) {
let e = event.originalEvent;
if (e.origin === window.parent.location.origin) {
//console.log('editor.html - origin check passed');