調整
This commit is contained in:
@@ -0,0 +1,419 @@
|
||||
<%@ 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-pencil-box-outline"></i>明細</a>
|
||||
<a @click.prevent="editReceipt(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-printer"></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>
|
||||
<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">
|
||||
</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: 'receipt_date' },
|
||||
{ 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: '',
|
||||
},
|
||||
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.currentView = "";
|
||||
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.isSearched = true;
|
||||
|
||||
this.search.activity_num = '';
|
||||
|
||||
this.getDefault(true)
|
||||
bootstrap.Offcanvas.getInstance(document.getElementById("offcanvasRight")).hide()
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
pageCount() {
|
||||
return Math.ceil(this.data_table.count / this.data_table.pageSize)
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</asp:Content>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Web;
|
||||
using System.Web.UI;
|
||||
using System.Web.UI.WebControls;
|
||||
|
||||
public partial class admin_receipt_index : MyWeb.config
|
||||
{
|
||||
protected void Page_Load(object sender, EventArgs e)
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,539 @@
|
||||
<template>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-10 col-lg-10">
|
||||
<div class="card shadow">
|
||||
<div class="card-header bg-primary text-white text-center">
|
||||
<h4 class="mb-0">收款收據開立作業</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="mb-3 col-12 col-md-6">
|
||||
<label for="source" class="form-label">來源 <span class="text-danger">*</span></label>
|
||||
<select class="form-select" id="source" v-model="formData.source" required :disabled="mode=='view'||mode=='edit'">
|
||||
<option value="">請選擇</option>
|
||||
<option v-for="(desc, value) in sources" :key="value" :value="value">
|
||||
{{desc}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3 col-12 col-md-6">
|
||||
<!--source=1 就要有-->
|
||||
<label for="order_no" class="form-label">報名單號 <span class="text-danger" v-show="order_no_need">*</span></label>
|
||||
<div class="input-group mb-3"
|
||||
@click.prevent="showPickOrder" :disabled="mode=='view'||mode=='edit'">
|
||||
<input class="form-control search-text" type="text" readonly
|
||||
id="order_no" runat="server" placeholder="報名單號" v-model="formData.order_no">
|
||||
<button class="btn btn-outline-secondary" type="button">
|
||||
<i class="mdi mdi-view-list-outline"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 col-12 col-md-6">
|
||||
<label for="" class="form-label">開立日期 <span class="text-danger">*</span></label>
|
||||
<v-menu ref="menu"
|
||||
v-model="menu"
|
||||
:close-on-content-click="false"
|
||||
:return-value.sync="formData.receipt_date"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
min-width="auto"
|
||||
:disabled="mode=='view'||mode=='edit'">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-text-field v-model="formData.receipt_date"
|
||||
prepend-icon="mdi-calendar"
|
||||
readonly
|
||||
v-bind="attrs"
|
||||
v-on="on"></v-text-field>
|
||||
</template>
|
||||
<v-date-picker v-model="formData.receipt_date"
|
||||
:active-picker.sync="activePicker"
|
||||
:max="(new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substring(0, 10)"
|
||||
min="1950-01-01">
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn text
|
||||
color="primary"
|
||||
@click.prevent="menu = false">
|
||||
Cancel
|
||||
</v-btn>
|
||||
<v-btn text
|
||||
color="primary"
|
||||
@click.prevent="$refs.menu.save(formData.receipt_date)">
|
||||
OK
|
||||
</v-btn>
|
||||
</v-date-picker>
|
||||
</v-menu>
|
||||
</div>
|
||||
<div class="mb-3 col-12 col-md-6">
|
||||
<label for="receiptStyle" class="form-label">收據格式 <span class="text-danger">*</span></label>
|
||||
<select class="form-select" id="receiptStyle" v-model="formData.style_num" required
|
||||
:disabled="mode=='view'||mode=='edit'">
|
||||
<option value="">請選擇</option>
|
||||
<option v-for="r in receiptStyles" :key="r.num" :value="r.num">
|
||||
{{r.name}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3 col-12 col-md-6">
|
||||
<v-text-field v-model="formData.total_amt" label="應收總金額"
|
||||
:disabled="mode=='view'||mode=='edit'||formData.source=='1'"></v-text-field><!--從報名來的不能改總金額-->
|
||||
</div>
|
||||
<div class="mb-3 col-12 col-md-6">
|
||||
<v-text-field v-model="alreadyAmt" label="已收總金額"
|
||||
:disabled="mode=='view'||mode=='edit'||formData.source=='1'"></v-text-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title bg-primary text-white">
|
||||
<h4>收據明細</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row" v-show="mode!='view'">
|
||||
<!--<div class="col-12 col-md-2">
|
||||
<v-text-field v-model="newDetail.receipt_no" label="編號" :readonly="true"></v-text-field>
|
||||
</div>-->
|
||||
<div class="col-12 col-md-2">
|
||||
<v-text-field v-model="newDetail.title" label="抬頭"></v-text-field>
|
||||
</div>
|
||||
<div class="col-12 col-md-2">
|
||||
<v-text-field v-model="newDetail.amt" label="金額"></v-text-field>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<v-text-field v-model="newDetail.addr" label="地址"></v-text-field>
|
||||
</div>
|
||||
<div class="col-12 col-md-2">
|
||||
<v-text-field v-model="newDetail.caseofficer" label="經手人"></v-text-field>
|
||||
</div>
|
||||
<div class="col-12 col-md-2">
|
||||
<button class="btn btn-info" @click.prevent="addDetail">新增</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-for="d in formDetail">
|
||||
<div class="row">
|
||||
<!--<div class="col-12 col-md-2">
|
||||
<v-text-field v-model="d.receipt_no" label="編號"></v-text-field>
|
||||
</div>-->
|
||||
<div class="col-12 col-md-2">
|
||||
<v-text-field v-model="d.title" label="抬頭" :disabled="mode=='view'"></v-text-field>
|
||||
</div>
|
||||
<div class="col-12 col-md-2">
|
||||
<v-text-field v-model="d.amt" label="金額" :disabled="mode=='view'"></v-text-field>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<v-text-field v-model="d.addr" label="地址" :disabled="mode=='view'"></v-text-field>
|
||||
</div>
|
||||
<div class="col-12 col-md-2">
|
||||
<v-text-field v-model="d.caseofficer" label="經手人" :disabled="mode=='view'"></v-text-field>
|
||||
</div>
|
||||
<div class="col-12 col-md-2">
|
||||
<v-text-field v-model="d.receipt_no" label="收據編號" v-show="mode=='view'" :disabled="mode=='view'"></v-text-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-2">
|
||||
收據已開立總金額 {{ countReceiptTotal() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-primary" @click.prevent="saveReceipt" v-show="mode!='view'">存檔</button>
|
||||
<button class="btn btn-primary" @click.prevent="printReceipt" v-show="mode=='view'">列印</button>
|
||||
<button class="btn btn-primary" @click.prevent="closeWindow('')">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<v-dialog v-model="order_dialog.show" max-width="800px">
|
||||
<v-card>
|
||||
<v-card-title class="grey lighten-2">
|
||||
選擇報名表
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon @click.prevent="order_dialog.show = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="pt-4">
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field v-model="order_dialog.search"
|
||||
label="依法會名稱搜尋報名表 (按 Enter 搜尋)"
|
||||
prepend-icon="mdi-magnify"
|
||||
@keydown.enter.prevent="searchOrders"
|
||||
clearable></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-data-table :headers="order_dialog.headers"
|
||||
:items="order_dialog.list"
|
||||
:loading="order_dialog.loading"
|
||||
item-key="num"
|
||||
:server-items-length="order_dialog.count"
|
||||
:page.sync="order_dialog.page"
|
||||
:items-per-page.sync="order_dialog.pageSize"
|
||||
:options.sync="options"
|
||||
class="elevation-1"
|
||||
@click:row="selectOrder">
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-btn small color="primary" @click.stop="selectOrder(item)">
|
||||
選擇
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar v-model="snackbar.show" :timeout="3000" top color="error">
|
||||
{{ snackbar.text }}
|
||||
<template v-slot:action="{ attrs }">
|
||||
<v-btn dark text v-bind="attrs" @click="snackbar.show = false">關閉</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
props: {
|
||||
num: {
|
||||
type: Number // num
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: {
|
||||
show: false,
|
||||
text: ''
|
||||
},
|
||||
options: { multiSort: false },
|
||||
formData: {
|
||||
source: '',
|
||||
order_no: '',
|
||||
receipt_date: null,
|
||||
receipt_style: "",
|
||||
total_amt: 0,
|
||||
style_num: 0,
|
||||
num:0
|
||||
},
|
||||
alreadyAmt:0,
|
||||
order_no_need:false,
|
||||
newDetail: {
|
||||
num:0,
|
||||
receipt_no: "",
|
||||
title: "",
|
||||
addr: "",
|
||||
amt: 0,
|
||||
caseofficer: ""
|
||||
},
|
||||
formDetail: [
|
||||
],
|
||||
sources: {
|
||||
'1': '活動/法會',
|
||||
'2':'其他'
|
||||
},
|
||||
orders: [],
|
||||
receiptStyles:[],
|
||||
activePicker: null,
|
||||
date: null,
|
||||
menu: false,
|
||||
order_dialog: {
|
||||
show: false,
|
||||
search: '',
|
||||
headers: [
|
||||
{ text: '活動/法會', value: 'subject' },
|
||||
{ text: '單號', value: 'order_no' },
|
||||
{ text: '姓名', value: 'u_name' },
|
||||
],
|
||||
loading: false,
|
||||
items: [],
|
||||
list: [],
|
||||
count: 0,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
options: { multiSort: false },
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options: {
|
||||
handler() {
|
||||
this.searchOrders()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
formData: {
|
||||
handler(newVal) {
|
||||
if (newVal.source === "1") {
|
||||
this.order_no_need = true;
|
||||
} else {
|
||||
this.order_no_need = false;
|
||||
}
|
||||
},
|
||||
deep:true,
|
||||
},
|
||||
num: {
|
||||
handler() {
|
||||
this.formData = {
|
||||
source: '',
|
||||
order_no: '',
|
||||
receipt_date: null,
|
||||
receipt_style: "",
|
||||
total_amt: 0,
|
||||
style_num: 0,
|
||||
num: 0
|
||||
}
|
||||
if (this.mode == "view"||this.mode=="edit") {
|
||||
this.getReceipt();
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPickOrder() {
|
||||
this.order_dialog.show = true;
|
||||
},
|
||||
selectOrder(item) {
|
||||
//console.log(item)
|
||||
this.formData.order_no = item.order_no
|
||||
this.formData.total_amt = item.amt
|
||||
this.order_dialog.show=false
|
||||
},
|
||||
searchOrders() {
|
||||
const { sortBy, sortDesc, page, itemsPerPage } = this.options
|
||||
//page = this.data_table.page;
|
||||
let self = this;
|
||||
const params = {
|
||||
page: page == null ? 1 : page, pageSize: itemsPerPage == null ? 10 : itemsPerPage,
|
||||
sortBy: sortBy[0], sortDesc: sortDesc[0],
|
||||
};
|
||||
this.order_dialog.loading = true
|
||||
let search = { subject: this.order_dialog.search }
|
||||
//sessionStorage.setItem('orderpage', clearpage ? '1' : page);
|
||||
axios
|
||||
.post(HTTP_HOST + 'api/order/GetList', search, { params: params })
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
self.order_dialog.list = response.data.list
|
||||
self.order_dialog.count = response.data.count;
|
||||
self.order_dialog.loading = false
|
||||
|
||||
//sessionStorage.setItem("order_list_cache", dataToStore);
|
||||
})
|
||||
.catch(error => console.log(error))
|
||||
},
|
||||
getReceiptStyles() {
|
||||
axios
|
||||
.post(HTTP_HOST + 'api/receipt/GetAllStyle')
|
||||
.then(response => {
|
||||
let data = response.data.list;
|
||||
this.receiptStyles = data;
|
||||
});
|
||||
},
|
||||
getOrders() {
|
||||
|
||||
},
|
||||
getReceipt() {
|
||||
let search = { num: this.num }
|
||||
axios
|
||||
.post(HTTP_HOST + 'api/receipt/GetData', search)
|
||||
.then(response => {
|
||||
let data = response.data.data;
|
||||
this.formData = {
|
||||
source: data.source,
|
||||
order_no: data.order_no,
|
||||
receipt_date: data.receipt_date,
|
||||
style_num: data.style_num,
|
||||
total_amt: data.total_amt,
|
||||
num: data.num
|
||||
}
|
||||
data.orderdetails.forEach(x => {
|
||||
x.records.forEach(y => {
|
||||
this.alreadyAmt = Number(this.alreadyAmt) + (isNaN(y.price) ? 0 : Number(y.price))
|
||||
})
|
||||
})
|
||||
|
||||
this.formDetail=[...data.receipt_detail]
|
||||
})
|
||||
.catch(error => console.log(error))
|
||||
},
|
||||
addDetail() {
|
||||
this.formDetail.push({ ...this.newDetail })
|
||||
this.newDetail = {
|
||||
receipt_no: "",
|
||||
title: "",
|
||||
addr: "",
|
||||
amt: 0,
|
||||
caseofficer: "",
|
||||
num: 0,
|
||||
receipt_num:0
|
||||
|
||||
}
|
||||
},
|
||||
showSnack(message) {
|
||||
this.snackbar.text = message;
|
||||
this.snackbar.show = true;
|
||||
|
||||
},
|
||||
saveReceipt() {
|
||||
if (this.formDetail.length === 0) {
|
||||
this.showSnack("沒有明細資料");
|
||||
return false;
|
||||
}
|
||||
if (this.formData.source == "") {
|
||||
this.showSnack("請選擇來源");
|
||||
return false;
|
||||
}
|
||||
if (this.formData.source === "1" && this.formData.order_no== "") {
|
||||
this.showSnack("請選擇活動/法會");
|
||||
return false;
|
||||
}
|
||||
if (this.formData.receipt_date == "") {
|
||||
this.showSnack("請選擇開立日期");
|
||||
return false;
|
||||
}
|
||||
if (this.formData.style_num==0) {
|
||||
this.showSnack("請選擇收據格式");
|
||||
return false;
|
||||
}
|
||||
if (this.formData.total_amt == 0) {
|
||||
this.showSnack("總金額不可為0");
|
||||
return false;
|
||||
}
|
||||
let total=0
|
||||
let detail = []
|
||||
this.formDetail.forEach(x => {
|
||||
detail.push({ ...x })
|
||||
total=total+Number(x.amt)
|
||||
})
|
||||
if (total > this.formData.total_amt) {
|
||||
this.showSnack("收據總金額超過應收總金額!!!");
|
||||
return false
|
||||
}
|
||||
let master = {
|
||||
...this.formData, list: detail
|
||||
}
|
||||
let targetUrl = "SaveReceiptWithDetail";
|
||||
if (this.mode === "edit")
|
||||
targetUrl = "UpdateReceiptWithDetail";
|
||||
axios
|
||||
.post(HTTP_HOST + `api/receipt/${targetUrl}`, master)
|
||||
.then(response => {
|
||||
this.snackbar.text = response.data.message;
|
||||
this.snackbar.show = true;
|
||||
if (response.data.result == "Y") {
|
||||
this.closeWindow('reload');
|
||||
}
|
||||
})
|
||||
.catch(error => console.log(error))
|
||||
},
|
||||
closeWindow(param) {
|
||||
this.formDetail.length = 0
|
||||
this.formData = {
|
||||
source: '',
|
||||
order_no: '',
|
||||
receipt_date: null,
|
||||
receipt_style: "",
|
||||
total_amt: 0,
|
||||
style_num: 0,
|
||||
num: 0
|
||||
}
|
||||
this.$emit('close-dialog', param);
|
||||
},
|
||||
printReceipt() {
|
||||
try {
|
||||
let searchData = {num:this.formData.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) {
|
||||
console.error('Error downloading the file:', error);
|
||||
//alert('Failed to download file.');
|
||||
this.showSnack('Failed to download file.');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
countReceiptTotal() {
|
||||
let total=0
|
||||
this.formDetail.forEach(x => {
|
||||
total=Number(total)+Number(x.amt)
|
||||
})
|
||||
return total
|
||||
}
|
||||
},
|
||||
deactivated() {
|
||||
this.formData = {
|
||||
source: '',
|
||||
order_no: '',
|
||||
receipt_date: null,
|
||||
receipt_style: "",
|
||||
total_amt: 0,
|
||||
style_num: 0,
|
||||
num: 0
|
||||
}
|
||||
this.formDetail.length = 0;
|
||||
this.alreadyAmt = 0;
|
||||
|
||||
},
|
||||
activated() {
|
||||
this.getReceiptStyles();
|
||||
this.formData = {
|
||||
source: '',
|
||||
order_no: '',
|
||||
receipt_date: null,
|
||||
receipt_style: "",
|
||||
total_amt: 0,
|
||||
style_num: 0,
|
||||
num: 0
|
||||
}
|
||||
this.formDetail.length = 0;
|
||||
this.alreadyAmt = 0;
|
||||
},
|
||||
mounted() {
|
||||
//this.formDetail.push()
|
||||
|
||||
},
|
||||
computed: {
|
||||
pageCount() {
|
||||
return Math.ceil(this.order_dialog.count / (this.options.itemsPerPage??10))
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user