100 lines
4.6 KiB
Plaintext
100 lines
4.6 KiB
Plaintext
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="領據匯出匯入.ascx.cs" Inherits="Education.Forms.領據系統.領據匯出匯入" %>
|
|
|
|
<div id="receiptImportApp">
|
|
<!-- Toast 訊息顯示容器 -->
|
|
<div v-if="ShowMessage" :class="['toast-message', 'toast-' + MessageType]">
|
|
{{ MessageText }}
|
|
</div>
|
|
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<div class="header-content">步驟 1: 上傳檔案</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3" style="display: flex; flex-wrap: wrap;">
|
|
<div class="col-md-8">
|
|
<input type="file" class="form-control" @change="onFileSelected" accept=".xls,.xlsx" :disabled="isProcessing" />
|
|
<small class="form-text text-muted">只支援 .xls 或 .xlsx 檔案</small>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button type="button" class="button blue120 w-100" @click="uploadFile" :disabled="!selectedFile || isProcessing">上傳並檢查</button>
|
|
<button type="button" class="button blue120" @click="downloadTemplate" :disabled="isProcessing">下載匯入範本</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
</div>
|
|
|
|
<div v-if="validationMessages.length > 0" class="card mb-3">
|
|
<div class="card-header">
|
|
<div class="header-content" :class="validationSuccess ? 'text-success' : 'text-danger'">
|
|
步驟 2: 檢查結果
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div v-if="validationSuccess" class="alert alert-success">
|
|
<strong>✓ 檢查完成</strong><br/>
|
|
共有 {{ validatedRowCount }} 列資料，欄位驗證和內容驗證均已通過，可以進行匯入
|
|
</div>
|
|
<div v-else class="alert alert-danger">
|
|
<strong>✗ 檢查失敗</strong><br/>
|
|
請修正以下錯誤後重新上傳：
|
|
</div>
|
|
<div class="validation-messages" style="max-height: 300px; overflow-y: auto;">
|
|
<div v-for="(msg, index) in validationMessages.slice(0, 100)" :key="index" class="validation-message">
|
|
{{ msg }}
|
|
</div>
|
|
<div v-if="validationMessages.length > 100" class="text-muted">
|
|
... 還有 {{ validationMessages.length - 100 }} 個訊息未顯示
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
</div>
|
|
|
|
<div v-if="validationSuccess && !importDone && importMessages.length === 0" class="card mb-3">
|
|
<div class="card-header">
|
|
<div class="header-content">步驟 3: 匯入資料</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<button type="button" class="button green80" @click="importData" :disabled="!validationSuccess || isProcessing || importDone">
|
|
<span v-if="isProcessing">匯入中...</span>
|
|
<span v-else>開始匯入</span>
|
|
</button>
|
|
</div>
|
|
<hr />
|
|
</div>
|
|
|
|
<div v-if="importDone || importMessages.length > 0" class="card mb-3">
|
|
<div class="card-header">
|
|
<div class="header-content" :class="importSuccess ? 'text-success' : 'text-danger'">
|
|
步驟 3: 匯入結果
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div v-if="importSuccess" class="alert alert-success">
|
|
<strong>✓ 匯入完成</strong><br/>
|
|
成功匯入：<span class="text-success font-weight-bold">{{ importSuccessCount }}</span> 筆<br/>
|
|
<span v-if="importFailCount > 0" class="text-danger">失敗匯入：{{ importFailCount }} 筆</span>
|
|
</div>
|
|
<div v-else class="alert alert-danger">
|
|
<strong>✗ 匯入失敗</strong>
|
|
</div>
|
|
|
|
<div v-if="importFailCount > 0" class="import-messages" style="max-height: 300px; overflow-y: auto;">
|
|
<h6>失敗詳情：</h6>
|
|
<div v-for="(msg, index) in importMessages.slice(0, 50)" :key="index" class="import-message text-danger">
|
|
{{ msg }}
|
|
</div>
|
|
<div v-if="importMessages.length > 50" class="text-muted">
|
|
... 還有 {{ importMessages.length - 50 }} 筆未顯示
|
|
</div>
|
|
</div>
|
|
<%--
|
|
<div class="mt-3">
|
|
<button type="button" class="button gray80" @click="resetImport" :disabled="isProcessing">重新匯入</button>
|
|
</div>
|
|
--%>
|
|
</div>
|
|
</div>
|
|
</div> |