增加信眾牌位範本及疏文

web/admin/activity/reg.aspx

@@ -1363,7 +1363,7 @@
                       <div class="tab-pane fade" id="sec2-page5" role="tabpanel" aria-labelledby="sec2-tab5" v-if="this_id!=''">
                          <v-card class="mx-auto" outlined >
                            <keep-alive>
-                               <component :is="currentView">
+                               <component :is="currentView" :num="this_id">
                                </component>
                             </keep-alive>  
                          </v-card>

web/admin/activity/shuwen02.vue

@@ -10,9 +10,18 @@
       <div id="control-panel">
         <!-- panel-inner 用於固定內容寬度，避免收合時文字因為寬度變小而折行 -->
           <div class="panel-inner">
+              <div class="control-group">
+                  <label>疏文類型</label>
+                  <select v-model="shuwenType" @change="changeShuwenType">
+                      <option value="">請選擇</option>
+                      <option value="01">消災</option>
+                      <option value="02">超薦</option>
+                  </select>
+              </div>
               <div class="control-group">
                   <label>疏文樣板</label>
                   <select v-model="defaultTemplate" @change="changeTemplate">
+                      <option value="">請選擇</option>
                       <option v-for="item in shuwenList" :key="item.num" :value="item.num">{{ item.name }}</option>
                   </select>
               </div>
@@ -73,13 +82,14 @@
     </div>
 
     <!-- 預覽區塊 -->
-    <div id="preview-container" @click.prevent="hideFloatingMenu">
+    <div id="preview-container" @click="hideFloatingMenu">
       <div id="paper-preview" :style="paperStyle">
         <div
           id="editor"
           contenteditable="true"
           ref="editorRef"
-          @contextmenu.prevent="rightClickLineTrack"
+          @contextmenu="rightClickLineTrack"
+             @keydown.enter.prevent="newLine"
         >
           <div style="font-size: 28px; font-weight: bold; align-items: center; margin-left: 25px;">中元普渡祈福文疏</div>
           <div></div>
@@ -170,8 +180,11 @@
 <script>
 module.exports = {
   name: 'Shuwen02',
-  
-  data() {
+    props: {
+        num: { type: String }
+    },
+    data() {
+
     return {
       isPanelCollapsed: false, // 控制面板收合狀態
       paperSize: 'A4',
@@ -194,7 +207,8 @@ module.exports = {
         alignItems: 'flex-start'
         },
       shuwenList: [],
-      defaultTemplate: {}
+        defaultTemplate: {},
+      shuwenType:""
     };
   },
 
@@ -211,7 +225,24 @@ module.exports = {
     this.startY = 0;
   },
 
-  methods: {
+    methods: {
+        changeShuwenType() {
+            console.log("changeShuwenType:", this.shuwenType)
+            //去資料庫抓回他的消災或超薦的總疏文
+            axios.post(HTTP_HOST + 'api/shuwens/GetActShuwen', { act_num: Number(this.num), shuwen_type: this.shuwenType })
+                .then(response => {
+                    console.log(response)
+                    if (response && response.data && response.data.data) {
+                        let shuwenContent = response.data.data.contents
+                        document.getElementById("editor").innerHTML = `${shuwenContent}`;
+                    }
+
+                })
+                .catch(error => console.log(error))
+        },
+        newLine() {
+            document.execCommand('insertParagraph',false);
+        },
     updateLayout() {
       const sizes = {
         'A4': { w: 210, h: 297 },
@@ -232,7 +263,11 @@ module.exports = {
           this.initData();
     },
       changeTemplate() {
-         // console.log("changeTemplate:", this.defaultTemplate)
+          // console.log("changeTemplate:", this.defaultTemplate)
+          if (this.defaultTemplate === "") {
+              this.clearContent();
+              return
+          }
           let temp = this.shuwenList.find((x) => x.num === this.defaultTemplate);
           if (temp) {
               document.getElementById("editor").innerHTML = temp.contents;
@@ -322,7 +357,8 @@ module.exports = {
       this.isMenuVisible = false;
       if (this.currentTargetLine) {
         this.currentTargetLine.classList.remove('selected-line');
-      }
+        }
+        console.log(this.num, this.shuwenType, this.defaultTemplate);
       const editor = this.$refs.editorRef;
       if (editor) {
         console.log(editor.innerHTML);
@@ -367,9 +403,7 @@ module.exports = {
       document.removeEventListener('mouseup', this.stopDrag);
     },
     initData() {
-        axios
-           
-            .post(HTTP_HOST + 'api/shuwens/ListShuwenTemplate')
+        axios.post(HTTP_HOST + 'api/shuwens/ListShuwenTemplate')
             .then(response => {
                 console.log(response)
                 this.shuwenList = response.data.data
@@ -379,7 +413,7 @@ module.exports = {
       },
       clearContent() {
           document.getElementById("editor").innerHTML = `
-          <div style="font-size: 28px; font-weight: bold; align-items: flex-start; margin-left: 5px; letter-spacing: 16px;" class="">
+          <div class="selected-line">
           &nbsp; &nbsp;</div>
           `;
       },
@@ -607,7 +641,8 @@ module.exports = {
 
   mounted() {
     this.updateLayout();
-    this.bindEvents();
+      this.bindEvents();
+      document.execCommand("defaultParagraphSeparator",false,'div');
   },
 
   beforeDestroy() {
@@ -625,7 +660,7 @@ module.exports = {
 };
 </script>
 
-<style scoped>
+<style>
 /* 基礎排版與重設 */
 .print-preview-app {
   font-family: "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;