1122 lines
56 KiB
HTML
1122 lines
56 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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" />
|
|
<script src="../../../js/vue.min.js"></script>
|
|
<script src="../../../js/vuetify.min.js"></script>
|
|
<script src="../../../js/axios.min.js"></script>
|
|
<script src="../../../js/bootstrap5/js/bootstrap.bundle.min.js"></script>
|
|
<script src="../../../js/jquery-4.0.0.min.js"></script>
|
|
<script src="../../item/jquery-ui/jquery-ui.min.js"></script>
|
|
<style>
|
|
.div_border {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.work_space {
|
|
min-height: 80vh;
|
|
min-width: 80vw;
|
|
}
|
|
|
|
body {
|
|
width: 90vw;
|
|
height: 90vh
|
|
}
|
|
|
|
li {
|
|
font-size: 16px;
|
|
list-style: none;
|
|
margin-top: 1rem;
|
|
}
|
|
</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="row mt-2">
|
|
<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" 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>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
const designer = {
|
|
code: {
|
|
style: []
|
|
},
|
|
selected: {
|
|
style: ""
|
|
},
|
|
actitem: "",
|
|
pageSize: "",
|
|
defaultStyle: "",
|
|
isAllSelected: false,
|
|
dialog: false,
|
|
addDialog: false, // 新增項目對話框
|
|
addDialogType: '', // 'Y' 或 'N'
|
|
newItemText: '', // 新增項目的文字
|
|
noSpace: true, // 不加空格 checkbox（預設勾選）
|
|
deleteDialog: false, // 確認刪除對話框
|
|
deleteIndex: -1, // 要刪除的 index
|
|
deleteType: '', // 'Y' 或 'N'
|
|
deleteMemberName: '', // 要刪除的名稱（顯示用）
|
|
phrases: [], // 常用片語
|
|
familyMembers: [], // 親友名單
|
|
tabletItem: {}, // 傳入的資料(信眾/牌位資訊)
|
|
item: {},
|
|
family_deceased_Y_selected: [], // 超渡/超薦/超冤名單
|
|
family_deceased_N_selected: [], // 消災/陽上名單
|
|
allStyle: [],
|
|
allStyleDetails: [],
|
|
allSize: [],
|
|
tabletElement: [],
|
|
http_host: "",
|
|
printData: [],
|
|
selectedElement: {},
|
|
selectStyle: {},
|
|
properTitle: [],//正名
|
|
leftProperTitle: [],//左正名
|
|
rightProperTitle: [],//右正名
|
|
address: "",//地址
|
|
alive: [],//陽上
|
|
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" }
|
|
],
|
|
async init() {
|
|
// 載入常用片語
|
|
fetch('phrases.json')
|
|
.then(res => res.json())
|
|
.then(data => { this.phrases = data; })
|
|
.catch(err => console.error('載入 phrases.json 失敗:', err));
|
|
},
|
|
async getActItem() {
|
|
axios
|
|
.post('/api/tablet/GetActItem', { itemNum: this.actitem })
|
|
.then(response => {
|
|
|
|
if (response.data.result == "Y" && response.data.data) {
|
|
this.pageSize = response.data.data.pageSize;
|
|
this.defaultStyle = response.data.data.defaultStyle;
|
|
this.selected.style = response.data.data.defaultStyle;
|
|
$("#styleSel").val(this.defaultStyle);
|
|
|
|
//this.getStyle();
|
|
}
|
|
}
|
|
);
|
|
|
|
},
|
|
async getAllStyleDetails() {
|
|
await axios
|
|
.post('/api/tablet/GetStyleDetailData', {})
|
|
.then(response => {
|
|
if (response.status == "200") {
|
|
let data = response.data;
|
|
if (data.result == "Y") {
|
|
let details = data.data;
|
|
this.allStyleDetails = details;
|
|
//console.log(data.data);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
},
|
|
async getPaperSize() {
|
|
let self = this
|
|
await axios
|
|
.post('/api/tablet/GetPaperSize', {})
|
|
.then(response => {
|
|
//if (response.result=="Y") {
|
|
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() {
|
|
await axios
|
|
.post('/api/tablet/GetTabletElement', {})
|
|
.then(response => {
|
|
//if (response.result=="Y") {
|
|
if (response.status == "200") {
|
|
let data = response.data;
|
|
this.tabletElement = data.data;
|
|
}
|
|
});
|
|
},
|
|
async getTabletStyles() {
|
|
await axios
|
|
.post('/api/tablet/GetStyleData', {})
|
|
.then(response => {
|
|
if (response.status == "200") {
|
|
let data = response.data;
|
|
if (data.data) {
|
|
data.data.forEach(x => {
|
|
if (x.styleID !== "00001") {
|
|
this.allStyle.push(x);
|
|
$("#styleSel").append(`<option value="${x.styleID}">${x.name}</option`);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
});
|
|
},
|
|
async getData() {
|
|
console.log("getData:", this.tabletItem)
|
|
this.printData.length = 0;
|
|
this.properTitle.length = 0
|
|
this.alive.length = 0;
|
|
//let list = localStorage.getItem("list")
|
|
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 => {
|
|
|
|
if (response.status == 200) {
|
|
self.printData = response.data;
|
|
self.printData.forEach(x => {
|
|
self.selectStyle = x;
|
|
let tablet = JSON.parse(x.f_num_tablet);
|
|
|
|
let mid_items = tablet.mid_items;
|
|
let left_items = tablet.left_items;
|
|
//let mid = [];
|
|
mid_items.forEach(y => {
|
|
self.properTitle.push(y.fam_name);
|
|
});
|
|
//let left = []
|
|
if (left_items) {
|
|
left_items.forEach(y => {
|
|
self.alive.push(y.fam_name);
|
|
});
|
|
}
|
|
});
|
|
this.render();
|
|
}
|
|
});
|
|
},
|
|
async render() {
|
|
$("#printArea").empty();
|
|
let self = this;
|
|
let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
|
|
let nowPageWidth = 0;
|
|
let tabletpaper;
|
|
//列印紙張的尺寸
|
|
;
|
|
let mid = [];
|
|
Object.assign(mid, self.properTitle);
|
|
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);
|
|
|
|
tabletpaper = $(` <div class="tablet-paper"></div>`)
|
|
let img = self.bg.find(y => y.name == style.backendImg);
|
|
let details = this.allStyleDetails.filter(y => y.styleID == x.style);
|
|
console.log("details:", details);
|
|
let ancestorFontSize = 16;
|
|
details.forEach(d => {
|
|
if (d.isActive != "hidden") {
|
|
let element = self.tabletElement.find(y => y.elementID == d.elementID);
|
|
//let newFontSize = self.scaleFontSize(d.sampleContent, d.fontSize, d.width);
|
|
let newFontSize = 16;
|
|
let html = "";
|
|
let alive = "";
|
|
let yang = "";
|
|
let bi = "";
|
|
|
|
if (d.elementID === 'title1') {
|
|
/* 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);
|
|
});
|
|
|
|
html = $namelist;*/
|
|
html = self.renderNameList(mid, d, newFontSize,style);
|
|
} else if (d.elementID === "alive") {
|
|
html = self.renderLiveList(left, d);
|
|
|
|
newFontSize = d.fontSize;
|
|
} else if (d.elementID === "titletriangle") {
|
|
html = self.renderRoster(mid, d)
|
|
} else if (d.elementID === "combined") {
|
|
ancestorFontSize = d.fontSize;
|
|
newFontSize = d.fontSize;
|
|
const parts = mid.join("\n").split('\n');
|
|
html = `<div class="ancestor-wrapper" style="width:${d.width}px !important;height:${d.height}px !important;" >
|
|
<span class="main-name" >${parts[0] || ''}</span>
|
|
<span class="sub-text">${parts[1] || ''}</span>
|
|
</div>`;
|
|
}
|
|
if (newFontSize < 10) {
|
|
newFontSize = 10;
|
|
}
|
|
let content = $(`<div class="tablet-element vertical-text ">${element.sampleContent}</div>`)
|
|
.css({
|
|
position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'px',
|
|
fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
|
|
"align-items": "center"
|
|
|
|
})
|
|
.html(html);
|
|
tabletpaper.append(content);
|
|
html = "";
|
|
alive = "";
|
|
yang = "";
|
|
bi = "";
|
|
|
|
|
|
}
|
|
});
|
|
self.pageStyle = `<style id="pageStyle">
|
|
{
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
color-adjust: exact !important;
|
|
}
|
|
.vertical-text {
|
|
writing-mode: vertical-rl !important;
|
|
-webkit-writing-mode: vertical-rl !important;
|
|
text-orientation: mixed !important;
|
|
}
|
|
body{
|
|
overflow: visible !important;
|
|
}
|
|
|
|
@media print{
|
|
:host {
|
|
width:auto !important;
|
|
height:auto !important;
|
|
}
|
|
@page {
|
|
size:${pageSize.width}mm ${pageSize.height}mm !important;
|
|
margin:0;
|
|
}
|
|
html, body, form, .full-home, #printArea, .canvas-area {
|
|
height: auto !important;
|
|
width: auto !important;
|
|
overflow: visible !important; /*必須為 visible */
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
display: block !important;
|
|
}
|
|
.no-print, #customMenu {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
.canvas-area{
|
|
display:flex !important;
|
|
|
|
flex-direction: row !important;
|
|
justify-content:center !important;
|
|
align-items:center !important;
|
|
|
|
}
|
|
|
|
.tablet-paper {
|
|
position: relative !important;
|
|
display: block !important;
|
|
break-inline:avoid;
|
|
page-break-inline:avoid;
|
|
break-after: page !important;
|
|
page-break-after: always !important;
|
|
margin: 0 !important;
|
|
border: none !important;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.tablet-element {
|
|
position: absolute !important;
|
|
white-space: normal;
|
|
color: black !important; /* 確保文字是黑色的 */
|
|
}
|
|
|
|
}
|
|
|
|
/* 名單金字塔佈局容器 */
|
|
.roster-container {
|
|
width: 100%; height: 100%;
|
|
writing-mode: vertical-rl; /* 直書 */
|
|
display: flex;
|
|
/*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
|
|
flex-direction: row; /* 上下分層 (Top / Bottom) */
|
|
align-items: center; /* 左右置中對齊 */
|
|
justify-content: center;
|
|
gap: 20px; /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
|
|
}
|
|
|
|
.roster-row {
|
|
display: flex;
|
|
flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
|
|
justify-content: center;
|
|
gap: 8px; /* 名字之間的間距 */
|
|
margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
|
|
}
|
|
|
|
.name-group {
|
|
display: flex;
|
|
flex-direction: column; /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* gap 由 HTML 動態綁定 */
|
|
}
|
|
|
|
.roster-name {
|
|
text-orientation: upright;
|
|
/*font-weight: bold;*/
|
|
white-space: normal;
|
|
line-height: 1.2;
|
|
font-family: DFKai-sb;
|
|
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
|
|
width: fit-content;
|
|
}
|
|
|
|
/* 【修復底圖沒出現】強制印出背景設定 */
|
|
* {
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
color-adjust: exact !important;
|
|
}
|
|
.ancestor-wrapper {
|
|
/* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
|
|
writing-mode: horizontal-tb;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* 水平置中 */
|
|
justify-content: felx-start;
|
|
width: fit-content;
|
|
}
|
|
|
|
.main-name {
|
|
line-height: 1.2;
|
|
/* 保持大字 */
|
|
}
|
|
|
|
.sub-text {
|
|
font-size: ${ancestorFontSize}px ;/*0.8em;*/ /* 縮小字體 */
|
|
line-height: 1.2;
|
|
margin-top: 4px; /* 與上方林張的間距 */
|
|
white-space: normal; /* 避免自動換行 */
|
|
writing-mode:vertical-rl
|
|
}
|
|
|
|
.canvas-area{
|
|
width: ${pageSize.width}mm;
|
|
height: ${pageSize.height}mm;
|
|
break-after: page;
|
|
page-break-after: always;
|
|
display:flex !important;
|
|
justify-content:center;
|
|
|
|
}
|
|
|
|
.tablet-paper{
|
|
background-color: white;
|
|
display: inline-block;
|
|
width: ${size.width}mm !important;
|
|
height: ${size.height}mm !important;
|
|
position: relative;
|
|
margin-bottom: 0;
|
|
background-image: url(${img.path});
|
|
background-size: 100% 100%;
|
|
break-inline:avoid;
|
|
page-break-inline:avoid;
|
|
}
|
|
.tablet-element {
|
|
cursor: move;
|
|
padding: 4px;
|
|
color: black !important; /* 強制墨水為黑色 */
|
|
border: 1px solid transparent;
|
|
transition: writing-mode 0.3s, transform 0.2s;
|
|
}
|
|
.tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
|
|
.tablet-paper:last-child { page-break-after: auto; }
|
|
|
|
.tablet-element span{
|
|
z-index: 999;
|
|
}
|
|
</style>
|
|
`
|
|
$("#pageStyle").remove();
|
|
$("head").append(self.pageStyle);
|
|
$(canvas).append(tabletpaper);
|
|
$(".printArea").append(canvas);
|
|
//});
|
|
|
|
$(".tablet-element").on("click", function (e) {
|
|
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;" >−</span>
|
|
<span class="itemUp" style="float:right ;margin-left:2rem;cursor:pointer;">↑</span>
|
|
<span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">↓</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;">+<span></li>`);
|
|
});
|
|
|
|
} else if (element.hasClass("address")) {//地址
|
|
|
|
} else {//其他都是正名
|
|
|
|
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;" >−</span>
|
|
<span class="itemUp" style="float:right ;margin-left:2rem;cursor:pointer;">↑</span>
|
|
<span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">↓</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;">+<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 = {};
|
|
// await axios
|
|
// .post('/api/familymembers/follower', { param: param })
|
|
// .then(response => { });
|
|
|
|
//},
|
|
changeStyle() {
|
|
|
|
},
|
|
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",
|
|
display: "flex",
|
|
"flex-direction": "row",
|
|
"flex-wrap": "wrap",
|
|
margin: "auto",
|
|
width: `${el.width}px`,
|
|
height: `${el.height}px`,
|
|
border: "0px solid #ccc",
|
|
padding: "1px",
|
|
"font-family": el.fontFamily,
|
|
"letter-spacing": "0.1em",
|
|
"column-gap": "1px",
|
|
"row-gap": "1px",
|
|
"align-items": "center",
|
|
});
|
|
let self = this;
|
|
names.forEach(n => {
|
|
$namelist.append(self.renderLiveSpan(n, el))
|
|
})
|
|
return $namelist;
|
|
},
|
|
renderLiveSpan(name, el) {
|
|
return $(`<span class="liveSpan">${name}</span>`).css({
|
|
display: "block",
|
|
"min-height": `${el.textHeight}px`,
|
|
"max-height": `${el.height}px`,
|
|
width: `${el.textWidth}px`,
|
|
height: `${el.textHeight}px`,
|
|
"text-align": "justify",
|
|
"text-align-last": "justify",
|
|
"margin-bottom": "10px",
|
|
"text-justify": "inter-character",
|
|
"white-space": "pre-line"
|
|
});
|
|
},
|
|
// 品字佈局邏輯：一上二下
|
|
renderRoster(names, el) {
|
|
if (!names.length) return '';
|
|
const mid = names.length === 1 ? 1 : Math.floor(names.length / 2);
|
|
const top = names.slice(0, mid);
|
|
const bot = names.slice(mid);
|
|
const size = this.autoScale(names, el.fontSize);
|
|
|
|
let h = $(`<div class="rosterList"></div>`).css(
|
|
{
|
|
width: el.width, height: el.height,
|
|
"writing-mode": "vertical-rl", /* 直書 */
|
|
display: "flex",
|
|
"flex-direction": "row", /* 上下分層 (Top / Bottom) */
|
|
"align-items": "center", /* 左右置中對齊 */
|
|
"justify-content": "start",
|
|
gap: "20px",
|
|
});
|
|
h.append(this.renderNameGroups(top, el));
|
|
if (bot.length) h.append(this.renderNameGroups(bot, el));
|
|
return h
|
|
},
|
|
renderNameGroups(items, el) {
|
|
let g = $(`<div class="rosterspan"></div>`).css({
|
|
"display": "flex",
|
|
"flex-direction": "column",
|
|
"justify-content": "center",
|
|
"height": el.textHeight,
|
|
"white-space": "pre-line"
|
|
})
|
|
items.forEach(x => {
|
|
g.append($(`<div class="" style="font-size:${el.fontSize}pt;letter-spacing: 10px;">${x}</div>`))
|
|
})
|
|
return g;
|
|
},
|
|
async autoScale(names, base) {
|
|
const max = Math.max(...names.map(n => n.length), 0);
|
|
return max > 5 ? Math.max(base * (5 / max), base * 0.6) : base;
|
|
},
|
|
scaleFontSize(txtContent, fontSize, elementWidth) {
|
|
|
|
let font = this.getTextSize("講", parseInt(fontSize));
|
|
//自動判斷縮小字型的規則,要同時縮小間距
|
|
|
|
//if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
|
|
if ((Math.ceil(txtContent.length / 2) * font.width) * 2 > parseFloat(elementWidth)) {
|
|
let newfontSize = parseInt(fontSize) - 1;
|
|
if (newfontSize <= 8) {
|
|
return newfontSize;
|
|
}
|
|
//console.log("newfontSize:",newfontSize)
|
|
return this.scaleFontSize(txtContent, newfontSize, elementWidth);
|
|
}
|
|
return fontSize;
|
|
},
|
|
getTextInfo(text, font) {
|
|
const canvas = document.createElement("canvas");
|
|
const context = canvas.getContext("2d");
|
|
context.font = font;
|
|
const metrics = context.measureText(text);
|
|
return metrics
|
|
},
|
|
getTextWidth(text, font) {
|
|
const canvas = document.createElement("canvas");
|
|
const context = canvas.getContext("2d");
|
|
context.font = font;
|
|
const metrics = context.measureText(text);
|
|
|
|
return metrics;
|
|
},
|
|
getTextSize(txt, fontsize) {
|
|
let span = document.createElement("span");
|
|
span.style.visibility = "hidden";
|
|
span.style.position = "absolute";
|
|
span.style.fontSize = fontsize + "px";
|
|
span.style.fontFamily = "";
|
|
span.innerText = txt;
|
|
document.body.appendChild(span);
|
|
let result = {
|
|
width: span.offsetWidth,
|
|
height: span.offsetHeight
|
|
}
|
|
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');
|
|
//console.log('editor.html - received data:', event.data);
|
|
const receivedData = e.data;
|
|
designer.family_deceased_Y_selected = [];
|
|
designer.family_deceased_N_selected = [];
|
|
|
|
if (receivedData.tabletItem) {
|
|
//console.log('editor.html - updating tabletItem:', receivedData.tabletItem);
|
|
designer.tabletItem = receivedData.tabletItem;
|
|
if (receivedData.familyMembers) {
|
|
designer.familyMembers = receivedData.familyMembers; // 更新 familyMembers
|
|
//console.log("app mounted, window message: ", this.familyMembers, receivedData);
|
|
}
|
|
if (receivedData.tabletItem) {
|
|
designer.tabletItem = receivedData.tabletItem;
|
|
}
|
|
//console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
|
|
console.log("receivedData::", receivedData);
|
|
if (receivedData.tabletItem.style) {
|
|
designer.selected.style = receivedData.tabletItem.style;
|
|
} else {
|
|
designer.selected.style = "";
|
|
}
|
|
console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
|
|
designer.actitem = receivedData.tabletItem.actitem_num_selected.val;
|
|
//console.log("actitem:",receivedData.tabletItem.actitem_num_selected.val);
|
|
// 處理 f_num_tablet 資料
|
|
if (designer.tabletItem.f_num_tablet) {
|
|
try {
|
|
const data = JSON.parse(designer.tabletItem.f_num_tablet);
|
|
|
|
if (designer.item_type === 'B') {
|
|
// B類型：超渡、超薦等
|
|
designer.family_deceased_Y_selected = data.mid_items || [];
|
|
designer.family_deceased_N_selected = data.left_items || [];
|
|
|
|
designer.family_deceased_Y_selected.forEach(item => {
|
|
if (item.IsShuWen === undefined) {
|
|
//Vue.set(item, 'IsShuWen', false);
|
|
}
|
|
});
|
|
if (designer.family_deceased_Y_selected.length > 0) {
|
|
designer.isAllSelected = this.family_deceased_Y_selected.every(member => member.IsShuWen === true);
|
|
} else {
|
|
designer.isAllSelected = false;
|
|
}
|
|
|
|
} else {
|
|
// A類型：消災、陽上等
|
|
designer.family_deceased_Y_selected = [];
|
|
designer.family_deceased_N_selected = data.mid_items || [];
|
|
|
|
designer.family_deceased_N_selected.forEach(item => {
|
|
if (item.IsShuWen === undefined) {
|
|
//Vue.set(item, 'IsShuWen', false);
|
|
}
|
|
});
|
|
if (designer.family_deceased_Y_selected.length > 0) {
|
|
designer.isAllSelected = designer.family_deceased_N_selected.every(member => member.IsShuWen === true);
|
|
|
|
} else {
|
|
designer.isAllSelected = false;
|
|
}
|
|
//console.log(this.family_deceased_N_selected)
|
|
}
|
|
} catch (e) {
|
|
console.error('解析牌位資料時發生錯誤:', e);
|
|
}
|
|
}
|
|
|
|
designer.getActItem();
|
|
designer.getData();
|
|
}
|
|
}
|
|
console.log(e.origin, window.parent.location.origin)
|
|
})
|
|
)
|
|
|
|
$(() => designer.init().then(() => designer.getTabletElement().
|
|
then(() => designer.getPaperSize().
|
|
then(() => designer.getTabletStyles().
|
|
then(designer.getAllStyleDetails())))));
|
|
</script>
|
|
</body>
|
|
|
|
</html> |