新增親友

This commit is contained in:
2026-04-12 20:55:09 +08:00
parent 21a3ec6198
commit 1afb90f3ba
3 changed files with 349 additions and 257 deletions
+22
View File
@@ -76,6 +76,28 @@ public class designerController : ApiController
//return Ok(data); //return Ok(data);
} }
[HttpPost]
[Route("api/tablet/saveFamily")]
public IHttpActionResult saveFamily([FromBody] family_members familyMember)
{
LogUtility log = new LogUtility();
_db.family_members.Add(familyMember);
_db.SaveChanges();
return Ok(new { result = "Y", data= familyMember });
//object[] obj = new StyleDataAccess().GetStyle("", "");
//if (obj[0].ToString() == "Y")
//{
// return Ok(new { result = "Y", data = obj[2] });
//}
//else
//{
// return Ok(new { result = "N", message = obj[1] });
// //throw new HttpResponseException(HttpStatusCode.NotFound);
//}
//return Ok(data);
}
[HttpPost] [HttpPost]
[Route("api/tablet/GetStyleData")] [Route("api/tablet/GetStyleData")]
public IHttpActionResult GetStyleData([FromBody] dynamic data) public IHttpActionResult GetStyleData([FromBody] dynamic data)
+2 -1
View File
@@ -951,7 +951,8 @@
title: this.titleword() // 確保標題被包含 title: this.titleword() // 確保標題被包含
}, },
familyMembers: familyMembers, familyMembers: familyMembers,
host: HTTP_HOST host: HTTP_HOST,
follower_id:this.follower_id
}; };
iframe.contentWindow.postMessage(itemInfo, '*'); iframe.contentWindow.postMessage(itemInfo, '*');
+325 -256
View File
@@ -85,10 +85,15 @@
<div class="col-10"> <div class="col-10">
<div class="form-floating mb-3"> <div class="form-floating mb-3">
<input class="form-control" type="text" id="filter_txt" <input class="form-control" type="text" id="filter_txt"
onkeyup="designer.filterToSel()" placeholder="請輸入名稱" /> onkeyup="designer.filterToSel()" placeholder="篩選條件" />
<label for="filter_txt">請輸入名稱</label> <label for="filter_txt">篩選條件</label>
</div> </div>
</div> </div>
<div class="col-2">
<button type="button" data-bs-toggle="modal" data-bs-target="#familyModal" title="新增親友">
<i class="mdi mdi-account-multiple-plus" style="font-size:30px;"></i>
</button>
</div>
</div> </div>
<ul class="canselectItem" style="margin-left: 1rem;margin-right:1rem;"> <ul class="canselectItem" style="margin-left: 1rem;margin-right:1rem;">
</ul> </ul>
@@ -99,6 +104,41 @@
</div> </div>
</div> </div>
<div class="modal fade hide" id="familyModal" tabindex="-1" aria-labelledby="familyModalLabel" aria-hidden="true" style="z-index:10000 !important;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">新增親友</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<div class="form-floating mb-3">
<input class="form-control" type="text" id="family_txt"
placeholder="姓名" />
<label for="family_txt">姓名</label>
</div>
</div>
<div class="col-12">
<div class="form-floating mb-3">
<select class="form-select" id="deceased_sel"
placeholder="存歿">
<option value="False"></option>
<option value="True">歿</option>
</select>
<label for="deceased_sel">存歿</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary" onclick="designer.saveFamily()">存檔</button>
</div>
</div>
</div>
</div>
<script type="text/javascript"> <script type="text/javascript">
const designer = { const designer = {
code: { code: {
@@ -128,7 +168,7 @@
family_deceased_N_selected: [], // 消災/陽上名單 family_deceased_N_selected: [], // 消災/陽上名單
family_left_title: [], family_left_title: [],
family_right_title: [], family_right_title: [],
family_address:"", family_address: "",
allStyle: [], allStyle: [],
allStyleDetails: [], allStyleDetails: [],
allSize: [], allSize: [],
@@ -143,8 +183,10 @@
address: "",//地址 address: "",//地址
alive: [],//陽上 alive: [],//陽上
tabletType: "A", tabletType: "A",
http_host:"", http_host: "",
//toast:null, follower_id:"",
toast: 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" },
@@ -157,14 +199,15 @@
.then(res => res.json()) .then(res => res.json())
.then(data => { this.phrases = data; }) .then(data => { this.phrases = data; })
.catch(err => console.error('載入 phrases.json 失敗:', err)); .catch(err => console.error('載入 phrases.json 失敗:', err));
//this.toast = new bootstrap.Toast(document.querySelector(".toast")); //this.toast = new bootstrap.Toast($('#familyModal'));
this.modal = new bootstrap.Modal($('#familyModal'));
//this.toast.hide(); //this.toast.hide();
}, },
async getActItem() { async getActItem() {
axios axios
.post('/api/tablet/GetActItem', { itemNum: this.actitem }) .post('/api/tablet/GetActItem', { itemNum: this.actitem })
.then(response => { .then(response => {
if (response.data.result == "Y" && response.data.data) { if (response.data.result == "Y" && response.data.data) {
this.pageSize = response.data.data.pageSize; this.pageSize = response.data.data.pageSize;
this.defaultStyle = response.data.data.defaultStyle; this.defaultStyle = response.data.data.defaultStyle;
@@ -319,7 +362,7 @@
}); });
}, },
async render() { async render() {
$(".printArea").empty(); $(".printArea").empty();
$(".selectedItem").empty(); $(".selectedItem").empty();
$(".canselectItem").empty(); $(".canselectItem").empty();
@@ -329,7 +372,7 @@
let nowPageWidth = 0; let nowPageWidth = 0;
let tabletpaper; let tabletpaper;
//列印紙張的尺寸 //列印紙張的尺寸
let mid = []; let mid = [];
Object.assign(mid, self.properTitle); Object.assign(mid, self.properTitle);
let left = [] let left = []
@@ -340,7 +383,7 @@
let myAddress = []; let myAddress = [];
Object.assign(ltitle, self.leftProperTitle); Object.assign(ltitle, self.leftProperTitle);
Object.assign(rtitle, self.rightProperTitle); Object.assign(rtitle, self.rightProperTitle);
if (self.address!="") { if (self.address != "") {
myAddress.push(self.address) myAddress.push(self.address)
} }
@@ -349,12 +392,12 @@
let style = self.allStyle.find(y => y.styleID == (x.style ? x.style : $("#styleSel").val())); let style = self.allStyle.find(y => y.styleID == (x.style ? x.style : $("#styleSel").val()));
//console.log("style:",style) //console.log("style:",style)
if (x.style) { if (x.style) {
} else { } else {
self.selectStyle.style = style.styleID; self.selectStyle.style = style.styleID;
self.selected.style = style.styleID; self.selected.style = style.styleID;
} }
//用來印內容的尺寸 //用來印內容的尺寸
let size = self.allSize.find(y => y.paperID == style.paperSize); let size = self.allSize.find(y => y.paperID == style.paperSize);
let pageSize = self.allSize.find(y => y.paperID == style.printSize); let pageSize = self.allSize.find(y => y.paperID == style.printSize);
@@ -365,12 +408,12 @@
let img = self.bg.find(y => y.name == style.backendImg); let img = self.bg.find(y => y.name == style.backendImg);
let details = this.allStyleDetails.filter(y => y.styleID == style.styleID); let details = this.allStyleDetails.filter(y => y.styleID == style.styleID);
let ancestorFontSize = 16; let ancestorFontSize = 16;
details.forEach(d => { details.forEach(d => {
if (d.isActive != "hidden") { if (d.isActive != "hidden") {
let element = self.tabletElement.find(y => y.elementID == d.elementID); let element = self.tabletElement.find(y => y.elementID == d.elementID);
let newFontSize =self.scaleFontSize(mid, d.fontSize, d.width); let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
let html = ""; let html = "";
let alive = ""; let alive = "";
let yang = ""; let yang = "";
@@ -389,11 +432,11 @@
newFontSize = self.scaleFontSize(left, d.fontSize, d.Width); newFontSize = self.scaleFontSize(left, d.fontSize, d.Width);
//newFontSize = d.fontSize; //newFontSize = d.fontSize;
html = self.renderLiveList(left, d); html = self.renderLiveList(left, d);
} else if (d.elementID === "titletriangle") { } else if (d.elementID === "titletriangle") {
if (mid.length == 0) { if (mid.length == 0) {
mid.push("請選擇") mid.push("請選擇")
} }
html = self.renderRoster(mid, d) html = self.renderRoster(mid, d)
} else if (d.elementID === "combined" || d.elementID === "tricombined") { } else if (d.elementID === "combined" || d.elementID === "tricombined") {
ancestorFontSize = d.fontSize; ancestorFontSize = d.fontSize;
@@ -440,176 +483,176 @@
} }
}); });
self.pageStyle = `<style id="pageStyle"> self.pageStyle = `<style id="pageStyle">
{ {
-webkit-print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important; print-color-adjust: exact !important;
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 { .vertical-text {
size:${pageSize.width}mm ${pageSize.height}mm !important; writing-mode: vertical-rl !important;
margin:0; -webkit-writing-mode: vertical-rl !important;
text-orientation: mixed !important;
} }
html, body, form, .full-home, .printArea, .canvas-area { body{
height: auto !important; overflow: visible !important;
width: auto !important;
overflow: visible !important; /*必須為 visible */
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.no-print, #customMenu {
display: none !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{ .canvas-area{
width: ${pageSize.width}mm;
height: ${pageSize.height}mm;
break-after: page;
page-break-after: always;
display:flex !important; display:flex !important;
justify-content:center;
flex-direction: row !important;
justify-content:center !important;
align-items:center !important;
} }
.tablet-paper { .tablet-paper{
position: relative !important; background-color: white;
display: block !important; 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; break-inline:avoid;
page-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 { .tablet-element {
position: absolute !important; cursor: move;
white-space: normal; padding: 4px;
color: black !important; /* 確保文字是黑色 */ 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;
/* 名單金字塔佈局容器 */ }
.roster-container { </style>
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(); $("#pageStyle").remove();
$("head").append(self.pageStyle); $("head").append(self.pageStyle);
$(canvas).append(tabletpaper); $(canvas).append(tabletpaper);
@@ -626,16 +669,16 @@
let self = this; let self = this;
$(".selectedItem").empty(); $(".selectedItem").empty();
$(".canselectItem").empty(); $(".canselectItem").empty();
if (element.hasClass("liveList")) {//陽上 if (element.hasClass("liveList")) {//陽上
//抓未往生的人出來 //抓未往生的人出來
//self.familyMembers; //self.familyMembers;
self.alive.forEach(x => { self.alive.forEach(x => {
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span> $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${x}</span> <span class="selected">${x}</span>
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</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="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>`); <span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
}); });
let items = [] let items = []
self.familyMembers.forEach(x => { self.familyMembers.forEach(x => {
@@ -649,34 +692,34 @@
} else if (element.hasClass("address")) {//地址 } else if (element.hasClass("address")) {//地址
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span> $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${self.address}</span>027 <span class="selected">${self.address}</span>027
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`); <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
} else if (element.hasClass("lefttitle")) {//左正名 } else if (element.hasClass("lefttitle")) {//左正名
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span> $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${self.leftProperTitle.join("")}</span> <span class="selected">${self.leftProperTitle.join("")}</span>
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`); <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
} else if (element.hasClass("righttitle")) {//右正名 } else if (element.hasClass("righttitle")) {//右正名
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span> $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${self.rightProperTitle.join("")}</span> <span class="selected">${self.rightProperTitle.join("")}</span>
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`); <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
} else {//其他都是正名 } else {//其他都是正名
if (element.hasClass("ancestor-wrapper")) {//多姓氏合併,只允許用打的 if (element.hasClass("ancestor-wrapper")) {//多姓氏合併,只允許用打的
self.properTitle.forEach(y => { self.properTitle.forEach(y => {
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span> $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${y}</span> <span class="selected">${y}</span>
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</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="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>`); <span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
}); });
} else if (element.hasClass("nameList") || element.hasClass("rosterList")) {// } else if (element.hasClass("nameList") || element.hasClass("rosterList")) {//
self.properTitle.forEach(y => { self.properTitle.forEach(y => {
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span> $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
<span class="selected">${y}</span> <span class="selected">${y}</span>
<span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</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="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>`); <span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
}) })
let items = [] let items = []
self.familyMembers.forEach(x => { self.familyMembers.forEach(x => {
@@ -698,7 +741,7 @@
async addNewItem() { async addNewItem() {
let self = this; let self = this;
let target = $(self.selectedElement).children().first(); let target = $(self.selectedElement).children().first();
//let fam = self.familyMembers.find(x => x.fam_name == target.text()); //let fam = self.familyMembers.find(x => x.fam_name == target.text());
if (target.hasClass("liveList")) { if (target.hasClass("liveList")) {
self.alive.push($("#custom_txt").val()); self.alive.push($("#custom_txt").val());
@@ -761,7 +804,7 @@
option_break: false option_break: false
} }
self.family_left_title.push(obj); self.family_left_title.push(obj);
//self.family_deceased_N_selected.push(obj); //self.family_deceased_N_selected.push(obj);
//} //}
} else if (target.hasClass("righttitle")) { } else if (target.hasClass("righttitle")) {
//if (self.rightProperTitle.length >= 1) { //if (self.rightProperTitle.length >= 1) {
@@ -769,36 +812,36 @@
//} else { //} else {
self.rightProperTitle.length = 0; self.rightProperTitle.length = 0;
self.family_right_title.length = 0; self.family_right_title.length = 0;
self.rightProperTitle.push($("#custom_txt").val()); self.rightProperTitle.push($("#custom_txt").val());
let obj = { let obj = {
IsShuWen: false, IsShuWen: false,
deceased: false, deceased: false,
fam_gender: "", fam_gender: "",
fam_name: $("#custom_txt").val(), fam_name: $("#custom_txt").val(),
fam_file: "", fam_file: "",
nospace: true, nospace: true,
num: 0, num: 0,
option_break: false option_break: false
} }
self.family_right_title.push(obj); self.family_right_title.push(obj);
//self.family_deceased_N_selected.push(obj); //self.family_deceased_N_selected.push(obj);
//} //}
} else if (target.hasClass("address")) { } else if (target.hasClass("address")) {
self.address=($("#custom_txt").val()); self.address = ($("#custom_txt").val());
let obj = { let obj = {
IsShuWen: false, IsShuWen: false,
deceased: false, deceased: false,
fam_gender: "", fam_gender: "",
fam_name: $("#custom_txt").val(), fam_name: $("#custom_txt").val(),
fam_file: "", fam_file: "",
nospace: true, nospace: true,
num: 0, num: 0,
option_break: false option_break: false
} }
self.family_address=self.address self.family_address = self.address
//self.family_deceased_N_selected.push(obj); //self.family_deceased_N_selected.push(obj);
} }
$("#custom_txt").val(""); $("#custom_txt").val("");
self.renderItem($(self.selectedElement).children().first()); self.renderItem($(self.selectedElement).children().first());
@@ -895,7 +938,7 @@
[self.family_deceased_N_selected[index - 1], self.family_deceased_N_selected[index]] = [self.family_deceased_N_selected[index - 1], self.family_deceased_N_selected[index]] =
[self.family_deceased_N_selected[index], self.family_deceased_N_selected[index - 1]]; [self.family_deceased_N_selected[index], self.family_deceased_N_selected[index - 1]];
} }
} else if ($(self.selectedElement).children().first().hasClass("ancestor-wrapper") ) { } else if ($(self.selectedElement).children().first().hasClass("ancestor-wrapper")) {
let index = self.properTitle.indexOf(curr.text()); let index = self.properTitle.indexOf(curr.text());
if (index == 0) { if (index == 0) {
@@ -912,7 +955,7 @@
} else { } else {
[self.leftProperTitle[index - 1], self.leftProperTitle[index]] = [self.leftProperTitle[index], self.properTitle[index - 1]]; [self.leftProperTitle[index - 1], self.leftProperTitle[index]] = [self.leftProperTitle[index], self.properTitle[index - 1]];
} }
} else if ($(self.selectedElement).children().first().hasClass("righttitle")) { } else if ($(self.selectedElement).children().first().hasClass("righttitle")) {
let index = self.rightProperTitle.indexOf(curr.text()); let index = self.rightProperTitle.indexOf(curr.text());
@@ -920,7 +963,7 @@
} else { } else {
[self.rightProperTitle[index - 1], self.rightProperTitle[index]] = [self.rightProperTitle[index], self.properTitle[index - 1]]; [self.rightProperTitle[index - 1], self.rightProperTitle[index]] = [self.rightProperTitle[index], self.properTitle[index - 1]];
}; };
} }
self.renderItem($(self.selectedElement).children().first()); self.renderItem($(self.selectedElement).children().first());
@@ -930,7 +973,7 @@
let curr = $(e.currentTarget.parentElement).find(".selected").first(); let curr = $(e.currentTarget.parentElement).find(".selected").first();
if ($(self.selectedElement).children().first().hasClass("liveList")) { if ($(self.selectedElement).children().first().hasClass("liveList")) {
let index = self.alive.indexOf(curr.text()); let index = self.alive.indexOf(curr.text());
if (index == self.alive.length-1) { if (index == self.alive.length - 1) {
} else { } else {
[self.alive[index], self.alive[index + 1]] = [self.alive[index + 1], self.alive[index]]; [self.alive[index], self.alive[index + 1]] = [self.alive[index + 1], self.alive[index]];
@@ -940,7 +983,7 @@
} else if ($(self.selectedElement).children().first().hasClass("nameList") || } else if ($(self.selectedElement).children().first().hasClass("nameList") ||
$(self.selectedElement).children().first().hasClass("rosterList")) { $(self.selectedElement).children().first().hasClass("rosterList")) {
let index = self.properTitle.indexOf(curr.text()); let index = self.properTitle.indexOf(curr.text());
if (index == self.properTitle.length-1) { if (index == self.properTitle.length - 1) {
} else { } else {
[self.properTitle[index], self.properTitle[index + 1]] = [self.properTitle[index + 1], self.properTitle[index]]; [self.properTitle[index], self.properTitle[index + 1]] = [self.properTitle[index + 1], self.properTitle[index]];
@@ -949,7 +992,7 @@
} }
} else if ($(self.selectedElement).children().first().hasClass("ancestor-wrapper")) { } else if ($(self.selectedElement).children().first().hasClass("ancestor-wrapper")) {
let index = self.properTitle.indexOf(curr.text()); let index = self.properTitle.indexOf(curr.text());
if (index == self.properTitle.length-1) { if (index == self.properTitle.length - 1) {
} else { } else {
[self.properTitle[index], self.properTitle[index + 1]] = [self.properTitle[index + 1], self.properTitle[index]]; [self.properTitle[index], self.properTitle[index + 1]] = [self.properTitle[index + 1], self.properTitle[index]];
@@ -963,7 +1006,7 @@
if (index == 0) { if (index == 0) {
} else { } else {
[self.leftProperTitle[index], self.leftProperTitle[index+1]] = [self.leftProperTitle[index+1], self.properTitle[index]]; [self.leftProperTitle[index], self.leftProperTitle[index + 1]] = [self.leftProperTitle[index + 1], self.properTitle[index]];
} }
} else if ($(self.selectedElement).children().first().hasClass("righttitle")) { } else if ($(self.selectedElement).children().first().hasClass("righttitle")) {
@@ -971,7 +1014,7 @@
if (index == 0) { if (index == 0) {
} else { } else {
[self.rightProperTitle[index], self.rightProperTitle[index+1]] = [self.rightProperTitle[index+1], self.properTitle[index]]; [self.rightProperTitle[index], self.rightProperTitle[index + 1]] = [self.rightProperTitle[index + 1], self.properTitle[index]];
}; };
} }
@@ -1077,10 +1120,10 @@
return Number.parseFloat(val).toFixed(2); return Number.parseFloat(val).toFixed(2);
}, },
renderNormal(mid, d) { renderNormal(mid, d) {
console.log("renderNormal:",d) console.log("renderNormal:", d)
let self = this; let self = this;
let txt = $(`<div class='${d.elementID}'>${mid}</div>`).css({ let txt = $(`<div class='${d.elementID}'>${mid}</div>`).css({
"z-index": 9999, visibility: d.visibility, "z-index": 9999, visibility: d.visibility,
width: d.width, height: d.height width: d.width, height: d.height
}); });
return txt; return txt;
@@ -1189,15 +1232,15 @@
if (bot.length) h.append(this.renderNameGroups(bot, el)); if (bot.length) h.append(this.renderNameGroups(bot, el));
return h return h
}, },
renderCombined(mid,d) { renderCombined(mid, d) {
ancestorFontSize = d.fontSize; ancestorFontSize = d.fontSize;
newFontSize = d.fontSize; newFontSize = d.fontSize;
const parts = mid.join("\n").split('\n'); const parts = mid.join("\n").split('\n');
html = `<div class="ancestor-wrapper" style="width:${d.width}px !important;height:${d.height}px !important;" > 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="main-name" >${parts[0] || ''}</span>
<span class="sub-text">${parts[1] || ''}</span> <span class="sub-text">${parts[1] || ''}</span>
</div>`; </div>`;
return html return html
}, },
renderNameGroups(items, el) { renderNameGroups(items, el) {
let g = $(`<div class="rosterspan"></div>`).css({ let g = $(`<div class="rosterspan"></div>`).css({
@@ -1217,7 +1260,7 @@
return max > 5 ? Math.max(base * (5 / max), base * 0.6) : base; return max > 5 ? Math.max(base * (5 / max), base * 0.6) : base;
}, },
scaleFontSize(txtContent, fontSize, elementWidth) { scaleFontSize(txtContent, fontSize, elementWidth) {
let font = this.getTextSize("講", parseInt(fontSize)); let font = this.getTextSize("講", parseInt(fontSize));
//自動判斷縮小字型的規則,要同時縮小間距 //自動判斷縮小字型的規則,要同時縮小間距
@@ -1267,37 +1310,59 @@
let allList = document.querySelector(".canselectItem").querySelectorAll("li"); //$(".canselectItem").querySelectorAll("li"); let allList = document.querySelector(".canselectItem").querySelectorAll("li"); //$(".canselectItem").querySelectorAll("li");
allList.forEach(x => { allList.forEach(x => {
let curr = $(x).children().eq(1); let curr = $(x).children().eq(1);
x.setAttribute("style","display:none") x.setAttribute("style", "display:none")
$(x).css("style", "display:none") $(x).css("style", "display:none")
if (curr && curr.text().includes($("#filter_txt").val())) { if (curr && curr.text().includes($("#filter_txt").val())) {
x.setAttribute("style", "display:") x.setAttribute("style", "display:")
} else { } else {
} }
}); });
}, },
async saveFamily() {
let self = this;
if (this.follower_id == "") {
console.log("follower_id:", this.follower_id);
return false
}
let pro_order_detail =
{
// num: this.editedItem.num,//原先載入時的家人num
//f_num: this.editedItem.f_num_selected.val, //儲存時的家人num
//leader: this.follower_id,
//appellation_id: this.editedItem.appellation_id_selected.val, //儲存時的稱謂
follower_num: this.follower_id,
fam_name: $("#family_txt").val(),
deceased: $("#deceased_sel").val() == "False" ? false : true,
num:0
}
this.modal.toggle();
//$(this.modal).toggle();
//$(this.modal).addClass("hide");
//console.log(pro_order_detail);
//console.log(this.modal);
//$(this.modal).hide();
axios
.post('/api/tablet/saveFamily', pro_order_detail)
.then(response => {
console.log(response);
if (response.status == 200 && response.result == "Y") {
let data = response.data;
this.familyMembers.push(data);
alert("新增成功");
self.modal.toggle();
} else {
}
});
},
async save() { async save() {
//console.log("tabletItem:", designer.tabletItem); //console.log("tabletItem:", designer.tabletItem);
//拚牌位的內容 //拚牌位的內容
let self = this; 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 = { let tablet = {
mid_items: designer.family_deceased_N_selected, mid_items: designer.family_deceased_N_selected,
left_items: designer.family_deceased_Y_selected, left_items: designer.family_deceased_Y_selected,
@@ -1336,7 +1401,7 @@
await axios await axios
.post('/api/order/SaveDetailData', pro_order_detail) .post('/api/order/SaveDetailData', pro_order_detail)
.then(response => { .then(response => {
let tablet_data = { let tablet_data = {
mid_items: self.family_deceased_N_selected, mid_items: self.family_deceased_N_selected,
left_items: self.family_deceased_Y_selected, left_items: self.family_deceased_Y_selected,
@@ -1407,7 +1472,8 @@
designer.rightProperTitle = [];//右正名 designer.rightProperTitle = [];//右正名
designer.address = "";//地址 designer.address = "";//地址
designer.alive = [];//陽上 designer.alive = [];//陽上
designer.tabletType= "A"; designer.tabletType = "A";
designer.follower_id = "";
$(".printArea").empty(); $(".printArea").empty();
$(".selectItem").empty(); $(".selectItem").empty();
$(".canselectItem").empty(); $(".canselectItem").empty();
@@ -1430,6 +1496,8 @@
designer.family_deceased_Y_selected = []; designer.family_deceased_Y_selected = [];
designer.family_deceased_N_selected = []; designer.family_deceased_N_selected = [];
designer.http_host = receivedData.host; designer.http_host = receivedData.host;
designer.follower_id = receivedData.follower_id;
console.log("123:",receivedData);
if (receivedData.tabletItem) { if (receivedData.tabletItem) {
//console.log('editor.html - updating tabletItem:', receivedData.tabletItem); //console.log('editor.html - updating tabletItem:', receivedData.tabletItem);
designer.tabletItem = receivedData.tabletItem; designer.tabletItem = receivedData.tabletItem;
@@ -1449,12 +1517,13 @@
} }
designer.actitem = receivedData.tabletItem.actitem_num_selected.val; designer.actitem = receivedData.tabletItem.actitem_num_selected.val;
//console.log("actitem:",receivedData.tabletItem.actitem_num_selected.val); //console.log("actitem:",receivedData.tabletItem.actitem_num_selected.val);
// 處理 f_num_tablet 資料 // 處理 f_num_tablet 資料
if (designer.tabletItem.f_num_tablet) { if (designer.tabletItem.f_num_tablet) {
try { try {
const data = JSON.parse(designer.tabletItem.f_num_tablet); const data = JSON.parse(designer.tabletItem.f_num_tablet);
console.log("阿巫醫ㄟ喔:", data)
if (designer.item_type === 'B') { if (designer.item_type === 'B') {
// B類型:超渡、超薦等 // B類型:超渡、超薦等
designer.family_deceased_Y_selected = data.mid_items || []; designer.family_deceased_Y_selected = data.mid_items || [];