diff --git a/web/admin/print/tablet_edit/editorNewOne.html b/web/admin/print/tablet_edit/editorNewOne.html index a7161f5..66b3ecd 100644 --- a/web/admin/print/tablet_edit/editorNewOne.html +++ b/web/admin/print/tablet_edit/editorNewOne.html @@ -5,6 +5,7 @@ Document + @@ -15,12 +16,24 @@ @@ -28,15 +41,34 @@
-
版型設定: +
+ 版型設定:
+
+ +
-
+
+
+
+

已選

+
    +
+
+
+
+
+

可選

+
    +
+
+
+
@@ -81,7 +113,7 @@ leftProperTitle: [],//左正名 rightProperTitle: [],//右正名 address: "",//地址 - alive:[],//陽上 + alive: [],//陽上 bg: [ { name: "黃1", path: "../../../admin/print/html/tablet-1_new.svg" }, { name: "黃2", path: "../../../admin/print/html/tablet-1B_new.svg" }, @@ -94,104 +126,18 @@ .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 .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(); } } @@ -200,7 +146,7 @@ }, async getAllStyleDetails() { await axios - .post( '/api/tablet/GetStyleDetailData', {}) + .post('/api/tablet/GetStyleDetailData', {}) .then(response => { if (response.status == "200") { let data = response.data; @@ -227,7 +173,7 @@ // this.allSize.forEach(x => { // $("#paperSizeSel").append(``); // }) - + //} } //$("#paperSizeSel").val("0003"); @@ -305,308 +251,504 @@ let nowPageWidth = 0; let tabletpaper; //列印紙張的尺寸 - - console.log("printData:", this.printData); + ; 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); + 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 = $(`
`) - 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 = ""; + tabletpaper = $(`
`) + 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 = $(`
`).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", + if (d.elementID === 'title1') { + /* let $namelist = $(`
`).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 = $(`${z}`).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); + }); - 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 = $(`${z}`).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; - } 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 = `
- ${parts[0] || ''} - ${parts[1] || ''} -
`; - } - if (newFontSize < 10) { - newFontSize = 10; - } - let content = $(`
${element.sampleContent}
`) - .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 = ""; - + 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 = `
+ ${parts[0] || ''} + ${parts[1] || ''} +
`; } - }); - self.pageStyle = ` - ` - $("#pageStyle").remove(); - $("head").append(self.pageStyle); - $(canvas).append(tabletpaper); - $(".printArea").append(canvas); + .tablet-element span{ + z-index: 999; + } + + ` + $("#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(); - if (element.hasClass("liveList")) {//陽上 - //抓往生的人出來 - //self.familyMembers; - } else if (element.hasClass("address")) {//地址 - - } else {//其他都是正名 - //抓未往生的人出來 - - } - //console.log(this); + 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(`
  • + ${x} + + +
  • `); + }); + 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(`
  • ${yy}+
  • `); + }); + + } else if (element.hasClass("address")) {//地址 + + } else {//其他都是正名 + + if (element.hasClass("ancestor-wrapper")) {//多姓氏合併,只允許用打的 + self.properTitle.forEach(y => { + $(".selectedItem").append(`
  • ${y}
  • `) + }); + } else if (element.hasClass("nameList")) {// + self.properTitle.forEach(y => { + $(".selectedItem").append(`
  • + ${y} + + +
  • `); + }) + 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(`
  • ${yy}+
  • `); + }); + } + } + + 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 @@ -620,6 +762,51 @@ fix2(val) { return Number.parseFloat(val).toFixed(2); }, + renderNameList(mid,d,newFontSize,style) { + let self = this; + let $namelist = $(`
    `).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 = $(`${z}`).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 = $(`
    `).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'); @@ -826,9 +1113,9 @@ ) $(() => designer.init().then(() => designer.getTabletElement(). - then(() => designer.getPaperSize(). - then(() => designer.getTabletStyles(). - then(designer.getAllStyleDetails()))))); + then(() => designer.getPaperSize(). + then(() => designer.getTabletStyles(). + then(designer.getAllStyleDetails())))));