173 lines
7.7 KiB
HTML
173 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>領據管理系統說明 - 領據資料查詢登錄</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
background: #eef2f5;
|
|
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
|
|
padding: 40px 24px;
|
|
color: #1e2a3e;
|
|
}
|
|
.doc {
|
|
max-width: 1300px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 28px;
|
|
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
|
|
overflow: hidden;
|
|
}
|
|
.header {
|
|
background: linear-gradient(135deg, #0c2e4e, #1a4a6f);
|
|
color: white;
|
|
padding: 28px 32px;
|
|
}
|
|
.header h1 {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
.header p {
|
|
font-size: 15px;
|
|
opacity: 0.85;
|
|
}
|
|
.content {
|
|
padding: 32px 36px;
|
|
}
|
|
.function-block {
|
|
margin-bottom: 56px;
|
|
border-bottom: 1px solid #e4e9f0;
|
|
padding-bottom: 32px;
|
|
}
|
|
.function-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
padding-left: 12px;
|
|
border-left: 5px solid #2c7da0;
|
|
color: #1e4663;
|
|
}
|
|
.screenshot {
|
|
margin-bottom: 24px;
|
|
border: 1px solid #dce5ec;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
background: #f8fafc;
|
|
text-align: center;
|
|
}
|
|
.screenshot img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
.desc-box {
|
|
background: #f0f6fa;
|
|
padding: 20px 26px;
|
|
border-radius: 18px;
|
|
color: #1f3b4c;
|
|
line-height: 1.55;
|
|
font-size: 15px;
|
|
}
|
|
.desc-box p {
|
|
margin: 8px 0;
|
|
}
|
|
.desc-box ul, .desc-box ol {
|
|
margin-left: 22px;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.desc-box li {
|
|
margin: 6px 0;
|
|
}
|
|
.step-note {
|
|
background: #fff6e0;
|
|
border-left: 4px solid #f5b042;
|
|
padding: 12px 18px;
|
|
border-radius: 14px;
|
|
margin-top: 14px;
|
|
}
|
|
@media (max-width: 760px) {
|
|
.content { padding: 20px; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="doc">
|
|
<div class="header">
|
|
<h1>📋 領據管理系統 · 領據資料查詢登錄</h1>
|
|
<p>操作說明書｜查詢 · 處理 · 匯入作業</p>
|
|
</div>
|
|
<div class="content">
|
|
<!-- 1. 查詢功能 -->
|
|
<div class="function-block">
|
|
<div class="function-title">🔍 查詢領據資料</div>
|
|
<div class="screenshot">
|
|
<img src="./領據資料查詢.png" alt="查詢功能畫面 - 包含計費代號、身分別查詢條件、查詢按鈕、新增領據、列印領據、匯出領據，以及下方領據資料列表表格">
|
|
</div>
|
|
<div class="desc-box">
|
|
<p>✅ <strong>查詢操作說明</strong></p>
|
|
<ul>
|
|
<li>可輸入畫面上列出的各種查詢條件進行篩選，點擊「清除查詢」可重置條件。</li>
|
|
<li>「新增領據」進入新增模式；「列印領據」批次印出所選項目，「匯出領據」可下載 Excel 報表。</li>
|
|
<li>按下下方表格區的「表單編號」可以查看領據詳情，並可以做更正、列印、作廢等操作</li>
|
|
<li>下方資料表格支援分頁瀏覽，可點擊「第一頁／上一頁／下一頁／最後頁」切換頁面。</li>
|
|
<li>每頁顯示筆數可調整（預設每頁 20 筆）。</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. 處理功能 (新增/更正/作廢) -->
|
|
<div class="function-block">
|
|
<div class="function-title">✏️ 處理領據 · 新增/更正/作廢</div>
|
|
<div class="screenshot">
|
|
<img src="./領據資料新增.png" alt="處理功能畫面 - 包含新增、更正、儲存、取消、作廢領據、列印、返回查詢按鈕，以及領據資料表單（表單編號、活動日期、身分別、領款人姓名、身分證字號、憑證類別、計畫代號、計畫名稱、活動地點、活動類別、付款方式），下方為講師/勞務費區塊（費用別、扣繳類別、單價、數量、單位、合計金額、應扣繳稅額、服務費）">
|
|
</div>
|
|
<div class="desc-box">
|
|
<p>🛠️ <strong>處理操作指引</strong></p>
|
|
<ul>
|
|
<li><strong>新增領據</strong>：點選「新增」，填寫領據資料、講師／勞務費及差旅費後按「儲存」。</li>
|
|
<li><strong>更正</strong>：選取既有的領據，修改欄位後儲存。</li>
|
|
<li><strong>作廢領據</strong>：僅能在未關帳前執行，作廢後不可復原。</li>
|
|
<li><strong>列印</strong>：提供單張領據憑證，若「憑證類別」不是「領據」僅會出現編號表示確認要入帳，不會輸出領據檔案。</li>
|
|
<li><strong>返回查詢</strong>：可回到查詢列表畫面</li>
|
|
<li><strong>計畫代號</strong>：可輸入已於人派系統建檔之計畫代號或名稱，符合條件的會帶出供選擇；也可以自行輸入計畫代號與計畫名稱</li>
|
|
<li><strong>片語</strong>：新增、更正領據時可用，點擊會列出可用片語；至「基本資料→片語」來設定可選擇的片語內容</li>
|
|
</ul>
|
|
<br />
|
|
<p>🛠️ <strong>講師/勞務費與差旅費注意事項</strong></p>
|
|
<ul>
|
|
<li>講師/勞務費：單價、數量、服務費均為 0 或未輸入者將不會儲存</li>
|
|
<li>差旅費：所以費用欄位均為 0 或未輸入者將不會儲存</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. 匯入功能 -->
|
|
<div class="function-block">
|
|
<div class="function-title">📂 批次匯入領據 (Excel)</div>
|
|
<div class="screenshot">
|
|
<img src="./領據匯入.png" alt="匯入功能畫面 - 顯示下載匯入範本按鈕、選擇檔案按鈕、未選擇任何檔案提示、支援 .xls 或 .xlsx 格式說明、上傳並檢查按鈕">
|
|
</div>
|
|
<div class="desc-box">
|
|
<p>📎 <strong>匯入完整步驟（請依序操作）</strong></p>
|
|
<ol>
|
|
<li>點擊「<strong>下載匯入範本</strong>」，取得 Excel 格式之領據匯入樣板。</li>
|
|
<li>依照範本欄位填寫領據資料（計費代號、活動日期、領款人、費用明細等）。</li>
|
|
<li>點選「選擇檔案」上傳已填寫完成之 .xls 或 .xlsx 檔案。</li>
|
|
<li>按下「<strong>上傳並檢查</strong>」，系統將驗證資料格式，若有錯誤會逐條列出。</li>
|
|
<li>若無誤則按下「<strong>開始匯入</strong>」批次匯入領據清單。</li>
|
|
</ol>
|
|
<div class="step-note">💡 提醒：匯入前請確認活動日期、身分別及金額正確，避免後續更正作業。</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |