469 lines
25 KiB
Plaintext
469 lines
25 KiB
Plaintext
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="領據處理.ascx.cs" Inherits="Education.Forms.領據系統.領據處理" %>
|
|
|
|
<link rel="stylesheet" href="<%= ResolveClientUrl("~/Styles/領據資料處理.css") %>" />
|
|
|
|
<div id="receiptEditApp">
|
|
|
|
<!-- Loading 指示器 -->
|
|
<div v-if="loading" class="loading-overlay">
|
|
<div class="loading-spinner">
|
|
<div class="spinner"></div>
|
|
<p>處理中...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast 訊息顯示容器 -->
|
|
<div v-if="ShowMessage" v-bind:class="['toast-message', 'toast-' + MessageType]">
|
|
{{ MessageText }}
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<button type="button" class="button blue80" v-on:click="addNew" v-bind:disabled="!canAddNew || loading">新增</button>
|
|
<button type="button" class="button blue80" v-on:click="edit" v-bind:disabled="編號 === 0 || !canEdit || loading || closed">更正</button>
|
|
<button type="button" class="button green80" v-on:click="save" v-bind:disabled="!canSave || loading || closed || (laborWarnings || []).length > 0">
|
|
<span v-if="loading">儲存中...</span>
|
|
<span v-else>儲存</span>
|
|
</button>
|
|
<button type="button" class="button red80" v-on:click="cancel" v-bind:disabled="!canCancel || loading">取消</button>
|
|
<button type="button" class="button red80" v-on:click="voidVoucher" v-bind:disabled="!canReturnToList || loading || closed">
|
|
{{ mainData.作廢 === 1 ? '取消作廢' : '作廢領據' }}
|
|
</button>
|
|
<button type="button" class="button gray80" v-on:click="print" v-bind:disabled="!canReturnToList || loading">列印</button>
|
|
<button type="button" class="button gray80" v-on:click="goPrev" v-bind:disabled="!hasPrev">上一筆</button>
|
|
<button type="button" class="button gray80" v-on:click="goNext" v-bind:disabled="!hasNext">下一筆</button>
|
|
<button type="button" class="button gray80" v-on:click="returnToList" v-bind:disabled="!canReturnToList || loading">返回查詢</button>
|
|
</div>
|
|
|
|
<div class="control-panel card mb-3">
|
|
<div class="card-header">
|
|
<div class="header-content">
|
|
領據資料
|
|
<span v-if="mainData.作廢 === 1" class="void-badge">已作廢</span>
|
|
<span v-if="closed" class="void-badge">已關帳</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">表單編號</label>
|
|
<input type="text" class="form-control" v-model="mainData.表單編號" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">活動日期</label>
|
|
<input type="date" class="form-control" v-model="mainData.活動日期" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">身分別 <span class="text-danger">*</span></label>
|
|
<select class="form-select" v-model="mainData.身分別" required v-bind:disabled="isViewMode">
|
|
<option v-for="item in dropdown.身分別" v-bind:key="item.Value" v-bind:value="item.Value">{{item.Name}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">領款人姓名 <span class="text-danger">*</span></label>
|
|
<div class="autocomplete-wrapper">
|
|
<input type="text" class="form-control" v-model="mainData.領款人姓名" v-on:input="searchRecipient" v-on:focus="showRecipientDropdown = true" v-on:blur="hideRecipientDropdown" required v-bind:disabled="isViewMode">
|
|
<ul v-show="showRecipientDropdown && recipientList.length > 0" class="autocomplete-dropdown">
|
|
<li v-for="recipient in recipientList" v-bind:key="recipient.Value" v-on:click="selectRecipient(recipient)" class="autocomplete-item">
|
|
<div class="item-name">{{recipient.Name}}</div>
|
|
<div class="item-id">{{recipient.IdNumber}}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">身分證字號</label>
|
|
<input type="text" class="form-control" v-model="mainData.身分證字號" readonly v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">憑證類別</label>
|
|
<select class="form-select" v-model="mainData.憑證類別" v-bind:disabled="isViewMode">
|
|
<option v-for="item in dropdown.憑證類別" v-bind:key="item.Value" v-bind:value="item.Value">{{item.Name}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">計畫代號 <span class="text-danger">*</span></label>
|
|
<div class="autocomplete-wrapper">
|
|
<input type="text" class="form-control" v-model="mainData.計畫代號" v-on:input="searchPlan" v-on:focus="showPlanDropdown = true" v-on:blur="hidePlanDropdown" required v-bind:disabled="isViewMode">
|
|
<ul v-show="showPlanDropdown && planList.length > 0" class="autocomplete-dropdown">
|
|
<li v-for="plan in planList" v-bind:key="plan.Value" v-on:click="selectPlan(plan)" class="autocomplete-item">
|
|
<div class="item-name">{{plan.Code}}</div>
|
|
<div class="item-id">{{plan.Name}}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">計畫名稱</label>
|
|
<input type="text" class="form-control" v-model="mainData.計畫名稱" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">活動地點</label>
|
|
<div class="input-with-button">
|
|
<button type="button" class="btn-phrase" v-on:click="toggleActivityLocationPhrase" v-bind:disabled="isViewMode">片語</button>
|
|
<input type="text" class="form-control" v-model="mainData.活動地點" v-bind:disabled="isViewMode" ref="活動地點Input">
|
|
<ul v-show="showActivityLocationPhrase" class="phrase-dropdown">
|
|
<li v-for="phrase in activityLocationPhrases" v-bind:key="phrase" v-on:click="insertPhrase('活動地點', phrase)" class="phrase-item">
|
|
{{phrase}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">活動類別</label>
|
|
<div class="input-with-button">
|
|
<button type="button" class="btn-phrase" v-on:click="toggleActivityCategoryPhrase" v-bind:disabled="isViewMode">片語</button>
|
|
<input type="text" class="form-control" v-model="mainData.活動類別" v-bind:disabled="isViewMode" ref="活動類別Input">
|
|
<ul v-show="showActivityCategoryPhrase" class="phrase-dropdown">
|
|
<li v-for="phrase in activityCategoryPhrases" v-bind:key="phrase" v-on:click="insertPhrase('活動類別', phrase)" class="phrase-item">
|
|
{{phrase}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">付款方式</label>
|
|
<select class="form-select" v-model="mainData.付款方式" v-bind:disabled="isViewMode">
|
|
<option v-for="item in dropdown.付款方式" v-bind:key="item.Value" v-bind:value="item.Value">{{item.Name}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-12">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">活動名稱/事由</label>
|
|
<input type="text" class="form-control" v-model="mainData.活動名稱事由" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">建檔人員日期</label>
|
|
<input type="text" class="form-control" readonly v-bind:value="`${mainData.DB_CRUSR} ${mainData.DB_CRUSR_NAME} ${mainData.DB_CRDAT}`" />
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">更正人員日期</label>
|
|
<input type="text" class="form-control" readonly v-bind:value="`${mainData.DB_TRUSR} ${mainData.DB_TRUSR_NAME} ${mainData.DB_TRDAT}`" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-panel card mb-3">
|
|
<div class="card-header">
|
|
<div class="header-content">
|
|
<span>講師 / 勞務費</span>
|
|
<span v-if="laborData.作廢 === 1" class="void-badge">已作廢</span>
|
|
</div>
|
|
<button type="button"
|
|
class="button blue120"
|
|
v-on:click="searchInstructorEvaluation"
|
|
v-bind:disabled="loading">
|
|
查詢講師評鑑
|
|
</button>
|
|
<button v-if="isViewMode && laborData.編號"
|
|
type="button"
|
|
class="button red120"
|
|
v-on:click="voidLaborFee"
|
|
v-bind:disabled="!canEdit || loading || closed"
|
|
>
|
|
{{ laborData.作廢 === 1 ? '取消作廢勞務費' : '作廢勞務費' }}
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<template v-if="laborWarnings.length > 0">
|
|
<div class="alert alert-warning mb-3">
|
|
<i class="icon-warning"></i>
|
|
<ul class="alert-list">
|
|
<li v-for="(warning, index) in laborWarnings" v-bind:key="index">{{warning}}</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<div class="row g-3">
|
|
<div class="col-md-2">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">領據編號</label>
|
|
<span><b>{{laborData.編號 || "無"}}</b></span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">費用別</label>
|
|
<select class="form-select" v-model="laborData.費用別" v-bind:disabled="isViewMode">
|
|
<option v-for="item in dropdown.勞務費_費用別" v-bind:key="item.Value" v-bind:value="item.Value">{{item.Name}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">扣繳類別</label>
|
|
<select class="form-select" v-model="laborData.扣繳類別" v-on:change="calculateTax" v-bind:disabled="isViewMode">
|
|
<option v-for="item in dropdown.扣繳類別" v-bind:key="item.Value" v-bind:value="item.Value">{{item.Name}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">單價</label>
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">數量</label>
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">單位</label>
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">合計金額</label>
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">應扣繳稅額</label>
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">服務費</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<input type="number" class="form-control" v-model.number="laborData.單價" v-on:input="calculateLaborTotal" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<input type="number" step="0.01" class="form-control" v-model.number="laborData.數量" v-on:input="calculateLaborTotal" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<select class="form-select" v-model="laborData.單位" v-bind:disabled="isViewMode">
|
|
<option v-for="item in dropdown.單位別" v-bind:key="item.Value" v-bind:value="item.Value">{{item.Name}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<input type="number" class="form-control" v-model.number="laborData.合計金額" readonly v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<input type="number" class="form-control" v-model.number="laborData.應扣繳稅額" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<input type="number" class="form-control" v-model.number="laborData.服務費" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-panel card mb-3">
|
|
<div class="card-header">
|
|
<div class="header-content">
|
|
<span>差旅費</span>
|
|
<span v-if="travelData.作廢 === 1" class="void-badge">已作廢</span>
|
|
</div>
|
|
<button v-if="isViewMode && travelData.編號"
|
|
type="button"
|
|
class="button red120"
|
|
v-on:click="voidTravelFee"
|
|
v-bind:disabled="!canEdit || loading || closed"
|
|
>
|
|
{{ travelData.作廢 === 1 ? '取消作廢差旅費' : '作廢差旅費' }}
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-2">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">領據編號</label>
|
|
<span><b>{{travelData.編號 || "無"}}</b></span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">票價資訊</label>
|
|
<div class="input-with-button">
|
|
<button type="button" class="btn-phrase" v-on:click="toggleTicketPricePhrase" v-bind:disabled="isViewMode">片語</button>
|
|
<input type="text" class="form-control" v-model="travelData.票價資訊" v-bind:disabled="isViewMode" ref="票價資訊Input">
|
|
<ul v-show="showTicketPricePhrase" class="phrase-dropdown">
|
|
<li v-for="phrase in ticketPricePhrases" v-bind:key="phrase" v-on:click="insertPhrase('票價資訊', phrase)" class="phrase-item">
|
|
{{phrase}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-3">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">費用別</label>
|
|
<select class="form-select" v-model="travelData.費用別" v-bind:disabled="isViewMode">
|
|
<option v-for="item in dropdown.差旅費_費用別" v-bind:key="item.Value" v-bind:value="item.Value">{{item.Name}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">起點</label>
|
|
<div class="autocomplete-wrapper">
|
|
<input type="text" class="form-control" v-model="travelData.起點" v-on:input="searchOriginStation" v-on:focus="showOriginDropdown = true" v-on:blur="hideOriginDropdown" v-bind:disabled="isViewMode">
|
|
<ul v-show="showOriginDropdown && originStations.length > 0" class="autocomplete-dropdown">
|
|
<li v-for="station in originStations" v-bind:key="station.Value" v-on:click="selectOriginStation(station)" class="autocomplete-item">
|
|
<div class="item-name">{{station.Name}}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">訖點</label>
|
|
<div class="autocomplete-wrapper">
|
|
<input type="text" class="form-control" v-model="travelData.訖點" v-on:input="searchDestStation" v-on:focus="showDestDropdown = true" v-on:blur="hideDestDropdown" v-bind:disabled="isViewMode">
|
|
<ul v-show="showDestDropdown && destStations.length > 0" class="autocomplete-dropdown">
|
|
<li v-for="station in destStations" v-bind:key="station.Value" v-on:click="selectDestStation(station)" class="autocomplete-item">
|
|
<div class="item-name">{{station.Name}}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">捷運/公車</label>
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">火車</label>
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">計程車</label>
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">高鐵/飛機</label>
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">自行開車</label>
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">過路費/停車費</label>
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">住宿費</label>
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<label class="form-label">合計金額</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<input type="number" class="form-control" v-model.number="travelData.捷運公車" v-on:input="calculateTravelTotal" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<input type="number" class="form-control" v-model.number="travelData.火車" v-on:input="calculateTravelTotal" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<input type="number" class="form-control" v-model.number="travelData.計程車" v-on:input="calculateTravelTotal" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<input type="number" class="form-control" v-model.number="travelData.高鐵飛機" v-on:input="calculateTravelTotal" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<input type="number" class="form-control" v-model.number="travelData.自行開車" v-on:input="calculateTravelTotal" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<input type="number" class="form-control" v-model.number="travelData.過路費停車費" v-on:input="calculateTravelTotal" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<input type="number" class="form-control" v-model.number="travelData.住宿費" v-on:input="calculateTravelTotal" v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
<div class="travel-fee-col">
|
|
<div class="field-wrapper">
|
|
<input type="number" class="form-control" v-model.number="travelData.合計" readonly v-bind:disabled="isViewMode">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|