447 lines
19 KiB
Plaintext
447 lines
19 KiB
Plaintext
<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="admin_receipt_index" %>
|
|
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server">
|
|
<script src="/js//httpVueLoader.js"></script>
|
|
<style>
|
|
.modify_modal{
|
|
width:80vw !important;
|
|
}
|
|
</style>
|
|
</asp:Content>
|
|
<asp:Content ID="Content2" ContentPlaceHolderID="page_nav" Runat="Server">
|
|
<div class="mb-2 mb-sm-0">
|
|
<a @click.prevent="newReceipt" class="btn btn-primary">
|
|
<i class="mdi mdi-plus"></i>新增
|
|
</a>
|
|
<%--<a @click="deleteAll" class="btn btn-outline-danger" title="刪除勾選的資料" ><i class="mdi mdi-trash-can"></i> 刪除勾選</a>--%>
|
|
</div>
|
|
</asp:Content>
|
|
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
|
|
<div id="content" class="container-fluid">
|
|
<v-data-table
|
|
v-model="data_table.selected"
|
|
:items="data_table.list"
|
|
:search-props="search"
|
|
item-key="num"
|
|
: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.source="{ item }">
|
|
{{ getSourceName(item.source) }}
|
|
</template>
|
|
<template #item.slot_btn="{ item }">
|
|
<a @click.prevent="viewReceipt(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-view-list-outline"></i>明細</a>
|
|
<a @click.prevent="editReceipt(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-pencil-box-outline"></i>編輯</a>
|
|
<a @click.prevent="printReceipt(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-printer"></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>
|
|
|
|
<v-dialog v-model="search_dialog.show" max-width="500px">
|
|
<v-card>
|
|
<v-card-title class="justify-space-between grey lighten-2">
|
|
查詢:{{search_dialog.current.title}}
|
|
<v-btn icon @click="search_dialog.show=false"><v-icon>mdi-close</v-icon></v-btn>
|
|
</v-card-title>
|
|
<v-card-text >
|
|
<v-row>
|
|
<v-col v-for="item in search_dialog.current.keys"
|
|
:cols="search_dialog.current.keys.length>1?6:12" v-bind:key="item.value">
|
|
<v-text-field v-model="item.value" :label="item.title" v-if="item.visible===undefined || item.visible==true "></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" class="text-end">
|
|
<v-btn color="primary" elevation="0" @click="search_get()">查詢</v-btn>
|
|
<v-btn elevation="0" @click="search_clear()">清除條件</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
<v-data-table
|
|
:headers="search_headers()"
|
|
:items="search_dialog.list"
|
|
:footer-props="search_dialog.footer"
|
|
:items-per-page="10"
|
|
:server-items-length="search_dialog.count"
|
|
:page.sync="search_dialog.page"
|
|
:options.sync="search_options"
|
|
@click:row="search_select"
|
|
></v-data-table>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
|
|
<v-dialog v-model="modify_dialog.show" class="modify_modal">
|
|
<template>
|
|
<keep-alive exclude="receipt_component" >
|
|
<component :is="currentView" :num="twoData" :mode="modify_dialog.mode" @close-dialog="changeModifyDialog($event)"></component>
|
|
</keep-alive>
|
|
|
|
</template>
|
|
</v-dialog>
|
|
</div>
|
|
</asp:Content>
|
|
<asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" Runat="Server">
|
|
<div id="search_panel" alt="查詢收據資料">
|
|
<div class="mb-3">
|
|
<label class="form-label">資料來源</label>
|
|
<v-select :items="sources_items" item-text="text" item-value="value" v-model="search.source">
|
|
|
|
</v-select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">報名單號</label>
|
|
<input type="text" v-model="search.order_no" class="form-control" placeholder="" id="s_order_no" runat="server">
|
|
</div>
|
|
<div class="mb-3 p-2 border-top">
|
|
<a @click="btn_search" class="btn btn-outline-primary"><i class="mdi mdi-filter"></i> 搜尋</a>
|
|
<a class="btn btn-outline-secondary" @click="btn_all"><i class="mdi mdi-filter-remove"></i> 所有資料</a>
|
|
</div>
|
|
</div>
|
|
</asp:Content>
|
|
<asp:Content ID="Content5" ContentPlaceHolderID="footer_script" Runat="Server">
|
|
<script>
|
|
let VueApp = new Vue({
|
|
el: '#app',
|
|
vuetify: new Vuetify(vuetify_options),
|
|
data() {
|
|
return {
|
|
options: { multiSort: false },
|
|
search_options: { multiSort: false },
|
|
twoData:0,
|
|
data_table: {
|
|
loading: true,
|
|
list: [],
|
|
selected: [],
|
|
singleSelect: false,
|
|
count: 0,
|
|
page: 1,
|
|
pageSize: 10,
|
|
header: [
|
|
{ text: '序號', value: 'num' },
|
|
{ text: '來源', value: 'source' },
|
|
{ text: '報名單號', value: 'order_no', align: 'start' },
|
|
{ text: '信眾', value: 'follower.u_name' },
|
|
{ text: '總金額', value: 'total_amt' },
|
|
{ text: '收據張數', value: 'receipt_count' },
|
|
{ text: '', value: 'slot_btn', sortable: false, align: 'end' }
|
|
],
|
|
footer: {
|
|
showFirstLastPage: true,
|
|
itemsPerPageOptions: [5, 10, 20, 30],
|
|
},
|
|
},
|
|
modify_dialog: {
|
|
show: false,
|
|
mode: ""
|
|
},
|
|
search_dialog: {
|
|
controls: {
|
|
search2: {
|
|
id: 'search2',
|
|
title: '報名活動',
|
|
text_prop: 'subject',
|
|
value_prop: 'num',
|
|
keys: [
|
|
{ id: 'subject', title: '活動名稱', value: '' },
|
|
{ id: 'kindTxt', title: '活動分類' },
|
|
],
|
|
api_url: HTTP_HOST + 'api/activity/GetList',
|
|
columns: [
|
|
{ id: 'subject', title: '活動名稱' },
|
|
{ id: 'kindTxt', title: '活動分類' },
|
|
],
|
|
selected: {},
|
|
select(item, t) {
|
|
t.print_search.select_act = item.num;
|
|
}
|
|
},
|
|
},
|
|
show: false,
|
|
current: {},
|
|
list: [],
|
|
count: 0,
|
|
page: 1,
|
|
loading: false,
|
|
footer: {
|
|
showFirstLastPage: true,
|
|
disableItemsPerPage: true,
|
|
itemsPerPageAllText: '',
|
|
itemsPerPageText: '',
|
|
},
|
|
},
|
|
search: {
|
|
source: '',
|
|
order_no: '',
|
|
},
|
|
sources_items: [
|
|
{ text: "法會/活動", value: "1" },
|
|
{text:"其他",value:"2"}
|
|
],
|
|
|
|
currentView: 'receipt-component'
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
|
|
},
|
|
components: {
|
|
'receipt-component': httpVueLoader('./receipt.vue'),
|
|
},
|
|
watch: {
|
|
options: {
|
|
handler() {
|
|
this.getDefault()
|
|
},
|
|
deep: true,
|
|
},
|
|
search_options: {
|
|
handler() {
|
|
this.search_get()
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
methods: {
|
|
changeModifyDialog(event) {
|
|
this.modify_dialog.show = false
|
|
this.modify_dialog.mode = ""
|
|
this.twoData = 0
|
|
this.currentView = "";
|
|
this.twoData = 0
|
|
if (event === "reload") {
|
|
this.getDefault()
|
|
|
|
}
|
|
},
|
|
getSourceName(id) {
|
|
return id=="1"?"活動/法會":"其他"
|
|
},
|
|
viewReceipt(item) {
|
|
this.twoData = item.num;
|
|
this.modify_dialog.show = true;
|
|
this.modify_dialog.mode = "view";
|
|
this.currentView = "receipt-component";
|
|
},
|
|
editReceipt(item) {
|
|
this.twoData = item.num;
|
|
this.modify_dialog.show = true;
|
|
this.modify_dialog.mode = "edit";
|
|
this.currentView = "receipt-component";
|
|
},
|
|
printReceipt(item) {
|
|
try {
|
|
let searchData = { num: item.num }
|
|
axios
|
|
.post(HTTP_HOST + 'api/receipt/PrintReceipt', searchData, { responseType: 'blob' })
|
|
.then(response => {
|
|
// 1. Create a dynamic URL object from the binary blob
|
|
const blob = new Blob([response.data], {
|
|
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
|
});
|
|
const fileUrl = window.URL.createObjectURL(blob);
|
|
|
|
// 2. Create a temporary 'a' element to trigger download
|
|
const link = document.createElement('a');
|
|
link.href = fileUrl;
|
|
|
|
// 3. Set desired file name
|
|
link.setAttribute('download', `${searchData.activity_num}_${searchData.mode}.docx`);
|
|
|
|
// 4. Append, click and cleanup
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
|
|
document.body.removeChild(link);
|
|
window.URL.revokeObjectURL(fileUrl); // Free up memory allocation
|
|
})
|
|
|
|
} catch (error) {
|
|
//alert('Failed to download file.');
|
|
this.showSnack('Failed to download file.');
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
newReceipt() {
|
|
this.modify_dialog.show = true;
|
|
this.modify_dialog.mode = "add";
|
|
this.twoData = 0;
|
|
this.currentView = "receipt-component";
|
|
},
|
|
search_show(curr) {
|
|
this.search_dialog.current = curr;
|
|
this.search_clear()
|
|
//this.search_get()//清除完自動會重抓, 故取消
|
|
this.search_dialog.show = true;
|
|
},
|
|
search_clear() {
|
|
if (!this.search_dialog.current.keys) return;
|
|
this.search_dialog.current.keys.forEach((t, i) => { t.value = '' })
|
|
this.search_get()
|
|
},
|
|
search_get() {
|
|
if (!this.search_dialog.current.keys) return;
|
|
let api_url = this.search_dialog.current.api_url;
|
|
let keys = this.search_dialog.current.keys;
|
|
//const { page, itemsPerPage } = this.options
|
|
//const { sortBy, sortDesc, page, itemsPerPage } = this.options
|
|
this.search_dialog.page = this.search_options.page ?? 1
|
|
let params = { page: this.search_dialog.page, pageSize: 10 };//url params
|
|
var search = {};//post body
|
|
keys.forEach((t, i) => {
|
|
search[t.id] = t.value;
|
|
});
|
|
//necessary parameter===
|
|
if (this.search_dialog.current.id == 'search2') {
|
|
params = { sortBy: 'startDate_solar', sortDesc: true, page: this.search_dialog.page, pageSize: 10 };//url params
|
|
}
|
|
|
|
this.search_dialog.loading = true
|
|
axios.post(api_url, search, { params: params })
|
|
.then(response => {
|
|
this.search_dialog.list = response.data.list
|
|
this.search_dialog.count = response.data.count
|
|
this.search_dialog.loading = false
|
|
})
|
|
.catch(error => {
|
|
this.search_dialog.list = []
|
|
this.search_dialog.count = 0
|
|
this.search_dialog.loading = false
|
|
this.snackbar.text = "錯誤:" + error
|
|
this.snackbar.show = true
|
|
})
|
|
},
|
|
search_headers() {
|
|
if (!this.search_dialog.current.columns) return;
|
|
r = [];
|
|
this.search_dialog.current.columns.forEach((t, i) => {
|
|
r.push({
|
|
text: t.title,
|
|
align: 'start',
|
|
sortable: false,
|
|
value: t.id,
|
|
})
|
|
})
|
|
return r
|
|
},
|
|
search_select(row) {
|
|
let curr = this.search_dialog.current;
|
|
let target = $(`[data-search-control=${curr.id}]`);
|
|
curr.selected = row;
|
|
target.children("input.search-text").val(curr.selected[curr.text_prop])//text
|
|
target.children("input:hidden").val(curr.selected[curr.value_prop])//value
|
|
if (curr.select instanceof Function) {
|
|
curr.select(row, this);
|
|
}
|
|
this.search_dialog.show = false;
|
|
//console.log(row, row["u_name"], row["f_number"], curr.id, target);
|
|
},
|
|
getDefault(clearpage = false) {
|
|
const { sortBy, sortDesc, page, itemsPerPage } = this.options
|
|
//page = this.data_table.page;
|
|
|
|
const params = {
|
|
sortBy: sortBy[0], sortDesc: sortDesc[0],
|
|
page: clearpage ? '1' : page, pageSize: itemsPerPage
|
|
};
|
|
this.data_table.loading = true
|
|
//sessionStorage.setItem('orderpage', clearpage ? '1' : page);
|
|
axios
|
|
.post(HTTP_HOST + 'api/receipt/GetList', this.search, { params: params })
|
|
.then(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))
|
|
},
|
|
editItem(item) {
|
|
console.log("edit", item);
|
|
},
|
|
deleteItem(item) {
|
|
if (confirm('是否確定刪除此筆資料?')) {
|
|
const index = this.data_table.list.indexOf(item)
|
|
if (index != -1) {
|
|
axios
|
|
.delete(HTTP_HOST + 'api/receipt/' + item.order_no)
|
|
.then(response => {
|
|
console.log("del", item);
|
|
this.data_table.list.splice(index, 1);
|
|
this.data_table.count = this.data_table.list.length
|
|
})
|
|
.catch(error => console.log(error))
|
|
}
|
|
}
|
|
},
|
|
deleteAll() {
|
|
if (confirm('是否確定刪除已勾選的資料?')) {
|
|
axios
|
|
.delete(HTTP_HOST + 'api/receipt/DeleteAll/' + this.data_table.selected.map(x => x.order_no))
|
|
.then(response => {
|
|
this.getDefault();
|
|
})
|
|
.catch(error => console.log(error))
|
|
}
|
|
},
|
|
btn_search() {
|
|
|
|
|
|
this.getDefault()
|
|
bootstrap.Offcanvas.getInstance(document.getElementById("offcanvasRight")).hide()
|
|
},
|
|
btn_all() {
|
|
this.search.source = "";
|
|
this.search.order_no = "";
|
|
clearObjProps(this.search);
|
|
this.btn_search();
|
|
},
|
|
},
|
|
computed: {
|
|
pageCount() {
|
|
return Math.ceil(this.data_table.count / this.data_table.pageSize)
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
</asp:Content>
|
|
|