280 lines
13 KiB
Plaintext
280 lines
13 KiB
Plaintext
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="付款設定.ascx.cs" Inherits="Education.付款設定" %>
|
||
|
||
<div id="PaymentSettingAPP" style="padding: 1rem 0">
|
||
<!-- 訊息浮動提示 -->
|
||
<transition name="toast">
|
||
<div v-show="ShowMessage" :class="['toast-message', 'toast-' + MessageType]">
|
||
<span class="toast-icon">
|
||
<template v-if="MessageType === 'success'">✓</template>
|
||
<template v-else-if="MessageType === 'error'">✕</template>
|
||
<template v-else-if="MessageType === 'warning'">⚠</template>
|
||
<template v-else>ℹ</template>
|
||
</span>
|
||
<span class="toast-text">{{MessageText}}</span>
|
||
</div>
|
||
</transition>
|
||
|
||
<b>[{{講師編號}} {{講師姓名}}] 付款設定</b>
|
||
|
||
<button type="button" class="button blue80" v-on:click="Append" v-show="!(Appending || Editing)">新增</button>
|
||
<table style="table-layout:fixed">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 6rem">操作</th>
|
||
<th style="width: 8rem">生效日期</th>
|
||
<th style="width: auto">憑證類別</th>
|
||
<th style="width: auto">扣繳類別</th>
|
||
<th style="width: auto">銀行分行</th>
|
||
<th style="width: auto">戶名帳號</th>
|
||
<th style="width: auto">備註</th>
|
||
<th style="width: 8rem">建檔日期人員</th>
|
||
<th style="width: 8rem">更新日期人員</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- 新增列 -->
|
||
<tr v-show="Appending">
|
||
<td>
|
||
<button type="button" class="button green40" v-on:click="Save">儲存</button>
|
||
<button type="button" class="button gray40" v-on:click="Cancel">取消</button>
|
||
</td>
|
||
<td>
|
||
<input type="date" v-model="EditingItem.生效日期" class="inputFull"/>
|
||
<div v-show="EditErrorMessages.生效日期" class="error-message">{{EditErrorMessages.生效日期}}</div>
|
||
</td>
|
||
<td>
|
||
<select v-model="EditingItem.憑證類別" class="inputFull">
|
||
<option v-for="voucher in 憑證類別Options" :key="voucher.Value" :value="voucher.Value">{{voucher.Name}}</option>
|
||
</select>
|
||
<div v-show="EditErrorMessages.憑證類別" class="error-message">{{EditErrorMessages.憑證類別}}</div>
|
||
</td>
|
||
<td>
|
||
<select v-model="EditingItem.扣繳類別" class="inputFull">
|
||
<option v-for="withholding in 扣繳類別Options" :key="withholding.Value" :value="withholding.Value">{{withholding.Name}}</option>
|
||
</select>
|
||
<div v-show="EditErrorMessages.扣繳類別" class="error-message">{{EditErrorMessages.扣繳類別}}</div>
|
||
</td>
|
||
<td style="position: relative;">
|
||
<input type="text"
|
||
v-model="EditingItem.銀行分行代碼"
|
||
v-on:input="FilterBankBranch"
|
||
v-on:focus="ShowBankBranchList"
|
||
v-on:blur="HideBankBranchList"
|
||
placeholder="輸入代碼或名稱搜尋"
|
||
autocomplete="off"
|
||
class="inputFull"/>
|
||
<div v-show="EditErrorMessages.銀行分行代碼" class="error-message">{{EditErrorMessages.銀行分行代碼}}</div>
|
||
<input type="text"
|
||
v-model="EditingItem.銀行分行"
|
||
placeholder="銀行分行名稱"
|
||
readonly
|
||
class="inputFull"/>
|
||
<div v-show="EditErrorMessages.銀行分行" class="error-message">{{EditErrorMessages.銀行分行}}</div>
|
||
|
||
<!-- 浮動選單 -->
|
||
<div class="bank-branch-dropdown" v-show="ShowBankDropdown && FilteredBankBranches.length > 0">
|
||
<div class="bank-branch-item"
|
||
v-for="(branch, bIdx) in FilteredBankBranches"
|
||
:key="bIdx"
|
||
v-on:mousedown="SelectBankBranch(branch)">
|
||
<span class="branch-code">{{branch.Value}}</span>
|
||
<span class="branch-name">{{branch.Name}}</span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<input type="text" v-model="EditingItem.匯款戶名" placeholder="戶名" class="inputFull"/>
|
||
<div v-show="EditErrorMessages.匯款戶名" class="error-message">{{EditErrorMessages.匯款戶名}}</div>
|
||
<input type="text" v-model="EditingItem.匯款帳號" placeholder="帳號" class="inputFull"/>
|
||
<div v-show="EditErrorMessages.匯款帳號" class="error-message">{{EditErrorMessages.匯款帳號}}</div>
|
||
</td>
|
||
<td>
|
||
<textarea v-model="EditingItem.備註" rows="3" class="inputFullBlock" placeholder="更新資料內容、更新日期、更新人員姓名"></textarea>
|
||
<div v-show="EditErrorMessages.備註" class="error-message">{{EditErrorMessages.備註}}</div>
|
||
</td>
|
||
<td>(自動填入)</td>
|
||
<td>(自動填入)</td>
|
||
</tr>
|
||
|
||
<!-- 資料列 -->
|
||
<tr v-for="(dataItem, rowIndex) in Items" :key="rowIndex" v-show="!Appending">
|
||
<td>
|
||
<!-- 編輯模式 -->
|
||
<template v-if="Editing && EditingItem.Index === rowIndex">
|
||
<button type="button" class="button green40" v-on:click="Save">儲存</button>
|
||
<button type="button" class="button gray40" v-on:click="Cancel">取消</button>
|
||
</template>
|
||
<!-- 檢視模式 -->
|
||
<template v-else>
|
||
<button type="button" class="button blue40" v-on:click="Edit(dataItem, rowIndex)" v-show="!Editing">更正</button>
|
||
<button type="button" class="button red40" v-on:click="Delete(dataItem, rowIndex)" v-show="!Editing">刪除</button>
|
||
</template>
|
||
</td>
|
||
|
||
<!-- 編輯模式的輸入欄位 -->
|
||
<template v-if="Editing && EditingItem.Index === rowIndex">
|
||
<td>
|
||
<input type="date" v-model="EditingItem.生效日期" class="inputFull"/>
|
||
<div v-show="EditErrorMessages.生效日期" class="error-message">{{EditErrorMessages.生效日期}}</div>
|
||
</td>
|
||
<td>
|
||
<select v-model="EditingItem.憑證類別" class="inputFull">
|
||
<option v-for="voucher in 憑證類別Options" :key="voucher.Value" :value="voucher.Value">{{voucher.Name}}</option>
|
||
</select>
|
||
<div v-show="EditErrorMessages.憑證類別" class="error-message">{{EditErrorMessages.憑證類別}}</div>
|
||
</td>
|
||
<td>
|
||
<select v-model="EditingItem.扣繳類別" class="inputFull">
|
||
<option v-for="withholding in 扣繳類別Options" :key="withholding.Value" :value="withholding.Value">{{withholding.Name}}</option>
|
||
</select>
|
||
<div v-show="EditErrorMessages.扣繳類別" class="error-message">{{EditErrorMessages.扣繳類別}}</div>
|
||
</td>
|
||
<td style="position: relative;">
|
||
<input type="text"
|
||
v-model="EditingItem.銀行分行代碼"
|
||
v-on:input="FilterBankBranch"
|
||
v-on:focus="ShowBankBranchList"
|
||
v-on:blur="HideBankBranchList"
|
||
placeholder="輸入代碼或名稱搜尋"
|
||
autocomplete="off"
|
||
class="inputFull"/>
|
||
<div v-show="EditErrorMessages.銀行分行代碼" class="error-message">{{EditErrorMessages.銀行分行代碼}}</div>
|
||
<input type="text"
|
||
v-model="EditingItem.銀行分行"
|
||
placeholder="銀行分行名稱"
|
||
readonly
|
||
class="inputFull"/>
|
||
<div v-show="EditErrorMessages.銀行分行" class="error-message">{{EditErrorMessages.銀行分行}}</div>
|
||
|
||
<!-- 浮動選單 -->
|
||
<div class="bank-branch-dropdown" v-show="ShowBankDropdown && FilteredBankBranches.length > 0">
|
||
<div class="bank-branch-item"
|
||
v-for="(branch, bIdx) in FilteredBankBranches"
|
||
:key="bIdx"
|
||
v-on:mousedown="SelectBankBranch(branch)">
|
||
<span class="branch-code">{{branch.Value}}</span>
|
||
<span class="branch-name">{{branch.Name}}</span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<input type="text" v-model="EditingItem.匯款戶名" placeholder="戶名" class="inputFull"/>
|
||
<div v-show="EditErrorMessages.匯款戶名" class="error-message">{{EditErrorMessages.匯款戶名}}</div>
|
||
<input type="text" v-model="EditingItem.匯款帳號" placeholder="帳號" class="inputFull"/>
|
||
<div v-show="EditErrorMessages.匯款帳號" class="error-message">{{EditErrorMessages.匯款帳號}}</div>
|
||
</td>
|
||
<td>
|
||
<textarea v-model="EditingItem.備註" rows="3" class="inputFullBlock" placeholder="更新資料內容"></textarea>
|
||
<div v-show="EditErrorMessages.備註" class="error-message">{{EditErrorMessages.備註}}</div>
|
||
</td>
|
||
<td>{{EditingItem.DB_CRDAT}}<br>{{EditingItem.DB_CRUSR_NAME}}</td>
|
||
<td>(自動填入)</td>
|
||
</template>
|
||
|
||
<!-- 檢視模式的顯示欄位 -->
|
||
<template v-else>
|
||
<td class="ta-center">{{dataItem.生效日期}}</td>
|
||
<td class="ta-center">{{GetOptionName(憑證類別Options, dataItem.憑證類別)}}</td>
|
||
<td>{{GetOptionName(扣繳類別Options, dataItem.扣繳類別)}}</td>
|
||
<td>{{dataItem.銀行分行代碼}} {{dataItem.銀行分行}}</td>
|
||
<td>{{dataItem.匯款戶名}} {{dataItem.匯款帳號}}</td>
|
||
<td>{{dataItem.備註}}</td>
|
||
<td>{{dataItem.DB_CRDAT}}<br>{{dataItem.DB_CRUSR_NAME}}</td>
|
||
<td>{{dataItem.DB_TRDAT > '0001-01-01' ? dataItem.DB_TRDAT : ''}}<br>{{dataItem.DB_TRUSR_NAME}}</td>
|
||
</template>
|
||
</tr>
|
||
|
||
<!-- 無資料提示 -->
|
||
<tr v-show="Items.length === 0 && !Appending">
|
||
<td colspan="9" style="text-align: center; padding: 2rem; color: #999;">
|
||
尚無付款設定資料
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<style>
|
||
#APP table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
#APP th,
|
||
#APP td {
|
||
border: 1px solid #ddd;
|
||
padding: 8px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
#APP th {
|
||
background-color: #f5f5f5;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
#APP input[type="text"],
|
||
#APP input[type="date"],
|
||
#APP select,
|
||
#APP textarea {
|
||
padding: 4px 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
#APP button {
|
||
margin: 2px;
|
||
}
|
||
|
||
.error-message {
|
||
color: #d32f2f;
|
||
font-size: 10px;
|
||
margin-top: 4px;
|
||
min-height: 16px;
|
||
}
|
||
|
||
.bank-branch-dropdown {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
background: white;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
z-index: 1000;
|
||
min-width: 400px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.bank-branch-item {
|
||
padding: 8px 12px;
|
||
cursor: pointer;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.bank-branch-item:hover {
|
||
background-color: #e6f7ff;
|
||
}
|
||
|
||
.branch-code {
|
||
font-weight: bold;
|
||
color: #1890ff;
|
||
margin-right: 12px;
|
||
min-width: 80px;
|
||
}
|
||
|
||
.branch-name {
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
|
||
.bank-branch-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
</style> |