202 lines
7.1 KiB
Vue
202 lines
7.1 KiB
Vue
<template>
|
|
<div id="content" class="container-fluid">
|
|
<v-btn @click.prevent="gotoAdd()" color="primary">新增</v-btn>
|
|
<v-data-table v-model="data_table.selected"
|
|
:items="data_table.list"
|
|
item-key="order_no"
|
|
:options.sync="options"
|
|
:headers="data_table.header"
|
|
:footer-props="data_table.footer"
|
|
:server-items-length="data_table.count"
|
|
:loading="data_table.loading"
|
|
:single-select="data_table.singleSelect"
|
|
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>
|
|
</v-data-table>
|
|
<v-container>
|
|
<v-row class="align-baseline" wrap>
|
|
<v-col cols="12" md="9">
|
|
<v-pagination v-model="data_table.page"
|
|
:length="pageCount">
|
|
</v-pagination>
|
|
</v-col>
|
|
<v-col class="text-truncate text-right" cols="12" md="2">
|
|
共 {{ data_table.count }} 筆, 頁數:
|
|
</v-col>
|
|
<v-col cols="6" md="1">
|
|
<v-text-field v-model="data_table.page"
|
|
type="number"
|
|
hide-details
|
|
dense
|
|
min="1"
|
|
:max="pageCount"
|
|
@input="data_table.page = parseInt($event, 10)"></v-text-field>
|
|
</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">×</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,
|
|
list: [],
|
|
selected: [],
|
|
singleSelect: false,
|
|
count: 0,
|
|
page: 1,
|
|
pageSize: 10,
|
|
header: [
|
|
{ text: '信眾', value: 'f_name' },
|
|
{ text: '報名單號', value: 'order_no' },
|
|
{ text: '收據號碼', value: 'receipt_num' },
|
|
{ text: '活動', value: 'act_name'},
|
|
{ text: '功德項目數量', value: 'item_count' },
|
|
{ text: '總金額', value: 'total_amt' },
|
|
{ text: '登錄人員', value: 'admin_num' },
|
|
{ text: '登錄時間', value: 'reg_time' },
|
|
{ text: '', value: 'slot_btn', sortable: false, align: 'end' }
|
|
],
|
|
footer: {
|
|
showFirstLastPage: true,
|
|
itemsPerPageOptions: [5, 10, 20, 30],
|
|
},
|
|
},
|
|
}
|
|
},
|
|
mounted() {
|
|
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' });
|
|
},
|
|
loadData(clearpage = false) {
|
|
const { sortBy, sortDesc, page, itemsPerPage } = this.options
|
|
//page = this.data_table.page;
|
|
let search = {}
|
|
const params = {
|
|
sortBy: "", sortDesc: false,
|
|
page: clearpage ? '1' : page, pageSize: itemsPerPage
|
|
};
|
|
this.data_table.loading = true
|
|
axios
|
|
.post(HTTP_HOST + 'api/preOrder/GetPreOrder', search, { params: params })
|
|
.then(response => {
|
|
console.log(response)
|
|
this.data_table.list = response.data.list
|
|
this.data_table.count = response.data.count;
|
|
this.data_table.loading = false
|
|
|
|
const dataToStore = JSON.stringify(this.data_table);
|
|
//sessionStorage.setItem("order_list_cache", dataToStore);
|
|
})
|
|
.catch(error => console.log(error))
|
|
},
|
|
search_headers() {
|
|
|
|
},
|
|
search_select() {
|
|
|
|
}
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
computed: {
|
|
pageCount() {
|
|
return Math.ceil(this.data_table.count / this.data_table.pageSize)
|
|
},
|
|
}
|
|
};
|
|
</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> |