529 lines
20 KiB
Plaintext
529 lines
20 KiB
Plaintext
<%@ Page Title="個人-沖帳流程" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" EnableEventValidation="false" CodeFile="personal_reconcile.aspx.cs" Inherits="admin_transfer_personal_reconcile" %>
|
||
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
|
||
</asp:Content>
|
||
<asp:Content ID="Content3" ContentPlaceHolderID="page_nav" runat="Server">
|
||
<h5 class="mb-0">個人 - 沖帳流程</h5>
|
||
</asp:Content>
|
||
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
|
||
<div id="reconcile-app">
|
||
<v-app>
|
||
<v-container>
|
||
<v-card>
|
||
<v-card-title class="bg-primary white--text text-center">
|
||
<h5 class="mb-0">個人 - 沖帳流程</h5>
|
||
</v-card-title>
|
||
<v-card-text>
|
||
<v-data-table
|
||
:headers="headers"
|
||
:items="items"
|
||
:loading="loading"
|
||
loading-text="載入中..."
|
||
class="elevation-1"
|
||
item-key="id"
|
||
>
|
||
<template v-slot:item.follower="{ item }">
|
||
<span :title="item.f_num">{{ item.follower }}</span>
|
||
</template>
|
||
<template v-slot:item.acc_name="{ item }">
|
||
<span>
|
||
<span v-if="hasTransferDraft(item.draft)" style="margin-right: 4px;">📝</span>{{ item.acc_name }}
|
||
</span>
|
||
</template>
|
||
<template v-slot:item.check_date="{ item }">
|
||
<span>{{ item.check_date | date }}</span>
|
||
</template>
|
||
<template v-slot:item.check_memo="{ item }">
|
||
<span>{{ item.check_memo }}</span>
|
||
</template>
|
||
<template v-slot:item.check_status="{ item }">
|
||
<span>{{ item.check_status }}</span>
|
||
</template>
|
||
<template v-slot:item.verify_note="{ item }">
|
||
<span>{{ item.verify_note }}</span>
|
||
</template>
|
||
<template v-slot:item.actions="{ item }">
|
||
<v-btn
|
||
small
|
||
color="success"
|
||
@click="showReconcileDialog(item)"
|
||
>
|
||
沖帳
|
||
</v-btn>
|
||
</template>
|
||
</v-data-table>
|
||
</v-card-text>
|
||
</v-card>
|
||
</v-container>
|
||
|
||
<!-- 沖帳明細對話框 -->
|
||
<v-dialog v-model="dialog.show" max-width="960px">
|
||
<v-card>
|
||
<v-card-title class="grey lighten-2">
|
||
<span v-if="dialog.selected && hasTransferDraft(dialog.selected.draft)" style="margin-right: 8px;">📝</span>沖帳明細
|
||
<v-spacer></v-spacer>
|
||
<v-btn icon @click="dialog.show = false">
|
||
<v-icon>mdi-close</v-icon>
|
||
</v-btn>
|
||
</v-card-title>
|
||
|
||
<v-card-text class="mb-0 pb-0">
|
||
<div v-if="dialog.selected">
|
||
<div class="row my-2">
|
||
<h6 class="col">信眾：{{ dialog.selected.follower }}</h6>
|
||
<div class="col">
|
||
<span class="font-weight-bold">入帳金額：</span>
|
||
<span class="text-primary">{{ dialog.selected.check_amount | currency }}</span>
|
||
</div>
|
||
<div class="col">
|
||
<span class="font-weight-bold">已沖金額：</span>
|
||
<span :class="{'text-danger': isOverPaid, 'text-dark': !isOverPaid}">{{ sumReconcile | currency }}</span>
|
||
</div>
|
||
<div class="col">
|
||
<span class="font-weight-bold">未繳餘款：</span>
|
||
<span class="text-danger">{{ remainDue | currency }}</span>
|
||
</div>
|
||
<div class="col">
|
||
<span class="font-weight-bold">入帳後餘額：</span>
|
||
<span class="text-success">{{ overPaid | currency }}</span>
|
||
</div>
|
||
</div>
|
||
<v-data-table
|
||
:headers="dialog.headers"
|
||
:items="dialog.items"
|
||
class="elevation-1 mt-3"
|
||
hide-default-footer
|
||
:disable-pagination="true"
|
||
>
|
||
<template v-slot:item.activity_name="{ item }">
|
||
<div>
|
||
<div>{{ item.activity_name }}</div>
|
||
<div class="text-muted" style="font-size:12px;">{{ item.order_no }}</div>
|
||
</div>
|
||
</template>
|
||
<template v-slot:item.paid="{ item }">
|
||
<span>{{ item.paid | currency }}</span>
|
||
</template>
|
||
<template v-slot:item.due="{ item }">
|
||
<span>{{ item.due | currency }}</span>
|
||
</template>
|
||
<template v-slot:item.reg_time="{ item }">
|
||
<span>{{ item.reg_time | date }}</span>
|
||
</template>
|
||
<template v-slot:item.reconcile="{ item, index }">
|
||
<v-text-field
|
||
v-model="item.reconcile"
|
||
type="number"
|
||
dense
|
||
outlined
|
||
hide-details="auto"
|
||
:rules="[
|
||
v => !isNaN(Number(v)) || '請輸入數字',
|
||
v => Number(v) >= 0 || '不可小於 0',
|
||
v => Number(v) <= Number(item.due) || `不可大於待繳金額 ${item.due}`
|
||
]"
|
||
@blur="validateAndUpdateReconcile($event.target.value, item, index)"
|
||
></v-text-field>
|
||
</template>
|
||
</v-data-table>
|
||
</div>
|
||
</v-card-text>
|
||
<v-card-actions class="pa-4">
|
||
<div>
|
||
<div v-if="hasUnallocated && remainDue > 0" class="text-dark mb-2">
|
||
⚠️ 尚有未分配的入帳金額，請確認是否全部分配
|
||
</div>
|
||
<div v-if="hasUnallocated && remainDue === 0" class="text-info mb-2">
|
||
ℹ️ 已無未繳項目，剩餘入帳金額將成為餘額
|
||
</div>
|
||
<div v-if="!canConfirm && buttonErrorMessage" class="text-danger">
|
||
❌ {{ buttonErrorMessage }}
|
||
</div>
|
||
</div>
|
||
<v-spacer></v-spacer>
|
||
<v-btn color="info" @click="redistributeReconcile" class="mr-2">重新分配</v-btn>
|
||
<v-btn color="orange" @click="saveDraft" class="mr-2">暫存</v-btn>
|
||
<v-btn color="primary" @click="confirmReconcile" :disabled="!canConfirm">確認沖帳</v-btn>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
</v-app>
|
||
</div>
|
||
</asp:Content>
|
||
<asp:Content ID="Content5" ContentPlaceHolderID="footer_script" runat="Server">
|
||
<script src="draft-utils.js"></script>
|
||
<script>
|
||
// 確保 DraftUtils 已載入
|
||
if (typeof window.DraftUtils === 'undefined') {
|
||
console.warn('DraftUtils 未載入，使用備用方案');
|
||
window.DraftUtils = {
|
||
hasTransferDraft: function(draft) { return false; },
|
||
getDraftField: function(draft, field) { return null; },
|
||
updateDraftField: function(draft, field, value) {
|
||
return { [field]: value };
|
||
}
|
||
};
|
||
}
|
||
|
||
new Vue({
|
||
el: '#reconcile-app',
|
||
vuetify: new Vuetify(),
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
headers: [
|
||
//{ text: '信眾#', value: 'f_num' },
|
||
{ text: '信眾', value: 'follower' },
|
||
{ text: '入帳銀行/帳戶', value: 'acc_name' },
|
||
{ text: '入帳日期', value: 'check_date' },
|
||
{ text: '帳簿備註', value: 'check_memo' },
|
||
{ text: '入帳金額', value: 'check_amount' },
|
||
//{ text: '狀態', value: 'check_status' },
|
||
{ text: '核對記錄', value: 'verify_note' },
|
||
{ text: '沖帳', value: 'actions', sortable: false }
|
||
],
|
||
items: [],
|
||
dialog: {
|
||
show: false,
|
||
selected: null,
|
||
headers: [
|
||
{ text: '法會/報名單號', value: 'activity_name' },
|
||
{ text: '報名日期', value: 'reg_time' },
|
||
{ text: '項目', value: 'actitem_name' },
|
||
{ text: '應繳金額', value: 'price', sortable: false },
|
||
{ text: '已繳金額', value: 'paid', sortable: false },
|
||
{ text: '待繳金額', value: 'due', sortable: false },
|
||
{ text: '沖帳金額', value: 'reconcile', sortable: false }
|
||
],
|
||
items: [],
|
||
loading: false,
|
||
errorMessage: ''
|
||
},
|
||
hasUnallocated: false,
|
||
draftDataChanged: false
|
||
}
|
||
},
|
||
computed: {
|
||
sumReconcile() {
|
||
return this.dialog.items.reduce((sum, item) => sum + (Number(item.reconcile) || 0), 0);
|
||
},
|
||
remainDue() {
|
||
const totalDue = this.dialog.items.reduce((sum, item) => sum + (Number(item.due) || 0), 0);
|
||
return totalDue - this.sumReconcile;
|
||
},
|
||
overPaid() {
|
||
if (!this.dialog.selected) return 0;
|
||
return this.dialog.selected.check_amount - this.sumReconcile;
|
||
},
|
||
isOverPaid() {
|
||
if (!this.dialog.selected) return false;
|
||
return this.sumReconcile > this.dialog.selected.check_amount;
|
||
},
|
||
canConfirm() {
|
||
if (!this.dialog.selected) return false;
|
||
|
||
const hasReconcile = this.dialog.items.some(item => Number(item.reconcile) > 0);
|
||
if (!hasReconcile) return false;
|
||
|
||
const validAmounts = this.dialog.items.every(item => {
|
||
const amount = Number(item.reconcile) || 0;
|
||
return amount >= 0 && amount <= Number(item.due);
|
||
});
|
||
if (!validAmounts) return false;
|
||
|
||
if (this.sumReconcile > this.dialog.selected.check_amount) return false;
|
||
|
||
// 有未分配金額時，只有在還有未繳餘款的情況下才禁用按鈕
|
||
// 如果未繳餘款為 0，表示沒有更多項目可沖帳，應允許確認
|
||
if (this.hasUnallocated && this.remainDue > 0) return false;
|
||
|
||
return true;
|
||
},
|
||
buttonErrorMessage() {
|
||
if (!this.dialog.selected) return '';
|
||
|
||
const hasReconcile = this.dialog.items.some(item => Number(item.reconcile) > 0);
|
||
if (!hasReconcile) return '請至少輸入一筆沖帳金額';
|
||
|
||
const invalidItem = this.dialog.items.find(item => {
|
||
const amount = Number(item.reconcile) || 0;
|
||
return amount < 0 || amount > Number(item.due);
|
||
});
|
||
if (invalidItem) return '沖帳金額超出可沖帳範圍';
|
||
|
||
if (this.sumReconcile > this.dialog.selected.check_amount) {
|
||
return '已沖金額不可大於入帳金額';
|
||
}
|
||
|
||
if (this.hasUnallocated && this.remainDue > 0) {
|
||
return '尚有未繳項目，請將入帳金額完全分配';
|
||
}
|
||
|
||
return '';
|
||
}
|
||
},
|
||
mounted() {
|
||
this.loadTableData();
|
||
},
|
||
filters: {
|
||
currency(val) {
|
||
if (!val) return '0';
|
||
return Number(val).toLocaleString();
|
||
},
|
||
date(val) {
|
||
if (!val) return '';
|
||
const date = new Date(val);
|
||
return date.toLocaleDateString();
|
||
}
|
||
},
|
||
methods: {
|
||
// 檢查是否有 DraftUtils 可用
|
||
hasTransferDraft(draft) {
|
||
return window.DraftUtils && window.DraftUtils.hasTransferDraft && window.DraftUtils.hasTransferDraft(draft);
|
||
},
|
||
// 使用全域 DraftUtils 工具函數
|
||
showError(message) {
|
||
this.dialog.errorMessage = message;
|
||
},
|
||
clearError() {
|
||
this.dialog.errorMessage = '';
|
||
},
|
||
loadTableData() {
|
||
this.loading = true;
|
||
axios.get('../../api/transfer_register/personal_reconcile_list')
|
||
.then(res => {
|
||
this.items = res.data;
|
||
})
|
||
.catch(() => {
|
||
this.items = [];
|
||
})
|
||
.finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
showReconcileDialog(item) {
|
||
this.dialog.selected = item;
|
||
this.dialog.items = [];
|
||
this.dialog.show = true;
|
||
// 依 f_num 呼叫 API 取得訂單明細
|
||
if (item.f_num) {
|
||
axios.get('../../api/transfer_register/follower_orders', { params: { f_num: item.f_num } })
|
||
.then(res => {
|
||
this.dialog.items = res.data;
|
||
this.loadFromDraftOrAutoDistribute();
|
||
})
|
||
.catch(() => {
|
||
this.dialog.items = [];
|
||
this.updateSumReconcile();
|
||
});
|
||
} else {
|
||
this.dialog.items = [];
|
||
this.updateSumReconcile();
|
||
}
|
||
},
|
||
autoDistributeReconcile() {
|
||
// 先進先出分配沖帳金額
|
||
let remainAmount = this.dialog.selected ? this.dialog.selected.check_amount : 0;
|
||
|
||
// 先將所有項目的 reconcile 清為 0
|
||
this.dialog.items.forEach(item => {
|
||
this.$set(item, 'reconcile', 0);
|
||
});
|
||
|
||
// 依報名日期排序（先進先出）
|
||
const sortedItems = [...this.dialog.items].sort((a, b) =>
|
||
new Date(a.reg_time) - new Date(b.reg_time)
|
||
);
|
||
|
||
// 逐項分配
|
||
sortedItems.forEach(item => {
|
||
if (remainAmount > 0) {
|
||
const canPay = Math.min(item.due, remainAmount);
|
||
const originalItem = this.dialog.items.find(i => i === item);
|
||
if (originalItem) {
|
||
this.$set(originalItem, 'reconcile', canPay);
|
||
}
|
||
remainAmount -= canPay;
|
||
}
|
||
});
|
||
|
||
this.updateSumReconcile();
|
||
},
|
||
redistributeReconcile() {
|
||
// 重新依先進先出原則分配沖帳金額
|
||
this.autoDistributeReconcile();
|
||
},
|
||
updateSumReconcile() {
|
||
// 只更新 hasUnallocated 狀態
|
||
const maxTotal = this.dialog.selected ? (this.dialog.selected.check_amount || 0) : 0;
|
||
this.hasUnallocated = maxTotal > this.sumReconcile;
|
||
},
|
||
loadFromDraftOrAutoDistribute() {
|
||
const draft = this.dialog.selected ? this.dialog.selected.draft : null;
|
||
|
||
if (draft && draft.trim() && window.DraftUtils && window.DraftUtils.getDraftField) {
|
||
const transferDraft = window.DraftUtils.getDraftField(draft, 'transfer_draft');
|
||
if (transferDraft && Array.isArray(transferDraft)) {
|
||
this.loadFromDraft(transferDraft);
|
||
} else {
|
||
this.autoDistributeReconcile();
|
||
}
|
||
} else {
|
||
this.autoDistributeReconcile();
|
||
}
|
||
},
|
||
loadFromDraft(draftData) {
|
||
this.draftDataChanged = false;
|
||
|
||
// 先將所有項目的 reconcile 設為 0
|
||
this.dialog.items.forEach(item => {
|
||
this.$set(item, 'reconcile', 0);
|
||
});
|
||
|
||
// 從 draft 資料填入沖帳金額
|
||
draftData.forEach(draftItem => {
|
||
const matchedItem = this.dialog.items.find(item =>
|
||
item.num === draftItem.pro_order_detail_num
|
||
);
|
||
|
||
if (matchedItem) {
|
||
this.$set(matchedItem, 'reconcile', draftItem.reconcile || 0);
|
||
} else {
|
||
// 找不到對應的項目，標記資料已改動
|
||
this.draftDataChanged = true;
|
||
}
|
||
});
|
||
|
||
this.updateSumReconcile();
|
||
|
||
// 如果有資料改動，提醒用戶
|
||
if (this.draftDataChanged) {
|
||
setTimeout(() => {
|
||
alert('資料已改動，請注意金額一致性');
|
||
}, 100);
|
||
}
|
||
},
|
||
saveDraft() {
|
||
try {
|
||
// 組成新的 transfer_draft 資料
|
||
const transferDraftData = this.dialog.items
|
||
.filter(item => Number(item.reconcile) > 0)
|
||
.map(item => ({
|
||
pro_order_detail_num: item.num,
|
||
reconcile: Number(item.reconcile)
|
||
}));
|
||
|
||
// 使用工具函數安全地更新 draft 物件
|
||
const currentDraft = this.dialog.selected.draft || '';
|
||
let draftJson = '';
|
||
|
||
if (window.DraftUtils && window.DraftUtils.updateDraftField) {
|
||
const newDraftObj = window.DraftUtils.updateDraftField(currentDraft, 'transfer_draft', transferDraftData);
|
||
draftJson = JSON.stringify(newDraftObj);
|
||
} else {
|
||
// 如果 DraftUtils 不可用，使用簡單的格式
|
||
draftJson = JSON.stringify({ transfer_draft: transferDraftData });
|
||
}
|
||
|
||
// 更新 draft 欄位
|
||
const updateData = {
|
||
id: this.dialog.selected.id,
|
||
activity_num: this.dialog.selected.activity_num,
|
||
name: this.dialog.selected.name,
|
||
phone: this.dialog.selected.phone,
|
||
pay_type: this.dialog.selected.pay_type,
|
||
account_last5: this.dialog.selected.account_last5,
|
||
amount: this.dialog.selected.amount,
|
||
pay_mode: this.dialog.selected.pay_mode,
|
||
note: this.dialog.selected.note,
|
||
proof_img: this.dialog.selected.proof_img,
|
||
status: this.dialog.selected.status,
|
||
f_num_match: this.dialog.selected.f_num_match,
|
||
f_num: this.dialog.selected.f_num,
|
||
acc_num: this.dialog.selected.acc_num,
|
||
check_date: this.dialog.selected.check_date,
|
||
check_amount: this.dialog.selected.check_amount,
|
||
check_memo: this.dialog.selected.check_memo,
|
||
check_status: this.dialog.selected.check_status,
|
||
acc_kind: this.dialog.selected.acc_kind,
|
||
member_num: this.dialog.selected.member_num,
|
||
verify_time: this.dialog.selected.verify_time,
|
||
verify_note: this.dialog.selected.verify_note,
|
||
draft: draftJson // 更新 draft 欄位
|
||
};
|
||
|
||
axios.put(`../../api/transfer_register/${this.dialog.selected.id}`, updateData)
|
||
.then(() => {
|
||
alert('暫存成功！');
|
||
// 更新本地資料
|
||
this.dialog.selected.draft = draftJson;
|
||
})
|
||
.catch(err => {
|
||
alert('暫存失敗：' + (err.response?.data?.message || err.message));
|
||
});
|
||
|
||
} catch (e) {
|
||
alert('暫存失敗：資料格式錯誤');
|
||
}
|
||
},
|
||
confirmReconcile() {
|
||
if (!this.canConfirm) {
|
||
this.showError(this.buttonErrorMessage);
|
||
return;
|
||
}
|
||
|
||
this.dialog.loading = true;
|
||
const over_payment = this.dialog.selected.check_amount - this.sumReconcile;
|
||
const postData = {
|
||
transfer_register_id: this.dialog.selected.id,
|
||
details: this.dialog.items
|
||
.filter(item => item.reconcile > 0)
|
||
.map(item => ({
|
||
pro_order_detail_num: item.num,
|
||
amount: Number(item.reconcile),
|
||
reg_time: new Date().toISOString(),
|
||
demo: `${this.dialog.selected.check_memo || ''}`
|
||
})),
|
||
over_payment: over_payment
|
||
};
|
||
|
||
axios.post('../../api/transfer_register/reconcile', postData)
|
||
.then(res => {
|
||
// 顯示成功訊息
|
||
const message = res.data && res.data.message ? res.data.message : '沖帳完成';
|
||
msgtop(message, 'success');
|
||
|
||
this.dialog.show = false;
|
||
this.loadTableData(); // 重新載入清單
|
||
})
|
||
.catch(err => {
|
||
let errorMessage = '沖帳失敗，請聯繫系統管理員';
|
||
if (err.response && err.response.data) {
|
||
if (typeof err.response.data === 'string') {
|
||
errorMessage = err.response.data;
|
||
} else if (err.response.data.message) {
|
||
errorMessage = err.response.data.message;
|
||
if (err.response.data.exceptionMessage) {
|
||
errorMessage += `\\n${err.response.data.exceptionMessage}`;
|
||
}
|
||
}
|
||
}
|
||
alert(errorMessage);
|
||
})
|
||
.finally(() => {
|
||
this.dialog.loading = false;
|
||
});
|
||
},
|
||
validateAndUpdateReconcile(value, item, index) {
|
||
let numValue = Number(value);
|
||
if (isNaN(numValue)) {
|
||
numValue = 0;
|
||
}
|
||
numValue = Math.round(numValue);
|
||
|
||
this.$set(item, 'reconcile', numValue);
|
||
this.updateSumReconcile();
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</asp:Content> |