牌位設定

web/admin/print/tablet_edit/editorNewOne.html

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