客堂登記報名

web/admin/order/pre_order.vue

@@ -10,13 +10,13 @@
                       :server-items-length="data_table.count"
                       :loading="data_table.loading"
                       :single-select="data_table.singleSelect"
-                      show-select
                       hide-default-footer
                       :page.sync="data_table.page"
                       :items-per-page.sync="data_table.pageSize"
                       class="elevation-1">
 
             <template #item.slot_btn="{ item }">
+                <a @click.prevent="openReceipt" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-receipt-text"></i>開立收據</a>
                 <!--<a :href="'reg.aspx?order_no='+item.order_no" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-pencil-box-outline"></i>編輯</a>
             <a @click="deleteItem(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-trash-can"></i>刪除</a>-->
             </template>
@@ -42,16 +42,42 @@
                 </v-col>
             </v-row>
         </v-container>
+
+
+
+
+        <div v-if="isModalOpen" class="modal-backdrop" @click.self="closeModal">
+
+            <!-- Modal Window Box -->
+            <div class="modal-window">
+                <header class="modal-header">
+                    <!--<h2>Modal Title</h2>-->
+                    <button @click="closeModal" class="close-btn">&times;</button>
+                </header>
+
+                <main class="modal-body" style="overflow-y:auto;">
+                    <!-- Async component loaded dynamically via v-if -->
+                    <receipt-component :form-data="formData" @close-dialog="closeModal" />
+                </main>
+            </div>
+
+        </div>
     </div>
 </template>
 
 <script>
     module.exports = {
         props: ['formData'],
+        name:"ParentComponent",
+        components: {
+            // Add .then(m => m.default || m) to safely handle module.exports
+            'ReceiptComponent': httpVueLoader('../receipt/receipt.vue'),
+        },
         data() {
             return {
                 options: { multiSort: false },
                 search_options: { multiSort: false },
+                isModalOpen: false,
                 search: {},
                 data_table: {
                     loading: true,
@@ -62,10 +88,10 @@
                     page: 1,
                     pageSize: 10,
                     header: [
-                        { text: '信眾', value: 'f_num' },
+                        { text: '信眾', value: 'f_name' },
                         { text: '報名單號', value: 'order_no' },
                         { text: '收據號碼', value: 'receipt_num' },
-                        { text: '活動', value: 'act_num'},
+                        { text: '活動', value: 'act_name'},
                         { text: '功德項目數量', value: 'item_count' },
                         { text: '總金額', value: 'total_amt' },
                         { text: '登錄人員', value: 'admin_num' },
@@ -83,6 +109,18 @@
             this.loadData()
         },
         methods: {
+            openModal() {
+                this.isModalOpen = true;
+            },
+            closeModal(param="") {
+                this.isModalOpen = false;
+                if (param=="reload") {
+                    this.loadData()
+                }
+            },
+            openReceipt() {///開收據
+                this.openModal();
+            },
             gotoAdd() {
                 this.$emit('custom-event', { action: 'add' });
             },
@@ -91,7 +129,7 @@
                 //page = this.data_table.page;
                 let search = {}
                 const params = {
-                    sortBy: sortBy[0], sortDesc: sortDesc[0],
+                    sortBy: "", sortDesc: false,
                     page: clearpage ? '1' : page, pageSize: itemsPerPage
                 };
                 this.data_table.loading = true
@@ -124,4 +162,41 @@
             },
         }
     };
-</script>
+</script>
+
+<style scoped>
+    /* Basic Modal Styles */
+    .modal-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 10001;
+    }
+
+    .modal-window {
+        background: white;
+        padding: 20px;
+        border-radius: 8px;
+        min-width: 300px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+    }
+
+    .modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .close-btn {
+        background: none;
+        border: none;
+        font-size: 1.5rem;
+        cursor: pointer;
+    }
+</style>