226 lines
8.4 KiB
Plaintext
226 lines
8.4 KiB
Plaintext
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="火車票價匯出匯入.ascx.cs" Inherits="Education.Forms.領據系統.火車票價匯出匯入" %>
|
||
|
||
<div id="TrainFareImportExportAPP" 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>
|
||
|
||
<!-- Tab 切換 -->
|
||
<div style="margin-bottom: 1rem; border-bottom: 1px solid #ddd;">
|
||
<button type="button"
|
||
@click="activeTab = 'export'"
|
||
:class="['tab-button', {active: activeTab === 'export'}]">
|
||
匯出
|
||
</button>
|
||
<button type="button"
|
||
@click="activeTab = 'import'"
|
||
:class="['tab-button', {active: activeTab === 'import'}]">
|
||
匯入
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 匯出頁籤 -->
|
||
<div v-if="activeTab === 'export'" style="margin-top: 1rem;">
|
||
<div style="margin-bottom: 1rem;">
|
||
<label>選擇要匯出的版本：</label>
|
||
<select v-model="exportVersionId" class="inputFull" style="margin-top: 0.5rem;">
|
||
<option value="">請選擇版本...</option>
|
||
<option v-for="version in versions" :key="version.Value" :value="version.Value">
|
||
{{version.Name}}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 1rem;">
|
||
<button type="button" class="button blue120" @click="DownloadTemplate" style="margin-right: 1rem;">
|
||
下載匯入範本
|
||
</button>
|
||
<button type="button" class="button green120" @click="ExportData" v-if="exportVersionId">
|
||
匯出為 Excel
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 預覽表格 -->
|
||
<div v-if="exportVersionId && exportResponse && Object.keys(exportData).length > 0" style="margin-top: 1rem;">
|
||
<h4>預覽資料：</h4>
|
||
<table style="table-layout: fixed;">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 80px;">訖站\起站</th>
|
||
<th v-for="originStation in exportOriginStations" :key="originStation" style="width: 60px;">
|
||
{{originStation}}
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="destStation in exportDestStations" :key="destStation">
|
||
<th style="text-align: center; background-color: #f5f5f5;">{{destStation}}</th>
|
||
<td v-for="originStation in exportOriginStations" :key="originStation"
|
||
:style="originStation === destStation ? {backgroundColor: '#f0f0f0'} : {}"
|
||
style="text-align: right; padding: 8px;">
|
||
<template v-if="originStation === destStation">
|
||
-
|
||
</template>
|
||
<template v-else>
|
||
{{GetExportFare(originStation, destStation)}}
|
||
</template>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 匯入頁籤 -->
|
||
<div v-if="activeTab === 'import'" style="margin-top: 1rem;">
|
||
<div style="margin-bottom: 1rem;">
|
||
<p style="color: #666; margin-bottom: 1rem;">
|
||
<strong>說明：</strong>每次匯入都將建立為新版本，版本號自動遞增。
|
||
</p>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 1rem;">
|
||
<label>選擇 Excel 檔案：</label>
|
||
<input type="file" @change="OnFileSelected" accept=".xlsx,.xls" style="margin-top: 0.5rem;" />
|
||
<div style="color: #999; font-size: 12px; margin-top: 0.5rem;">
|
||
支援 .xlsx 和 .xls 格式
|
||
</div>
|
||
</div>
|
||
|
||
<button type="button" class="button blue80" @click="ImportData"
|
||
:disabled="isImportButtonDisabled"
|
||
:style="isImportButtonDisabled ? {opacity: 0.5, cursor: 'not-allowed'} : {}"
|
||
v-if="selectedFile" style="margin-right: 1rem;">
|
||
匯入
|
||
</button>
|
||
<button type="button" class="button gray40" @click="CancelImport" v-if="selectedFile">
|
||
取消
|
||
</button>
|
||
|
||
<!-- 檢查結果 -->
|
||
<div v-if="checkResult" style="margin-top: 1rem; padding: 1rem; border: 1px solid #ddd; border-radius: 4px;">
|
||
<div v-if="checkResult.success" style="color: #4caf50; background-color: #f1f8e9; padding: 1rem; border-radius: 4px;">
|
||
<strong>檢查成功</strong><br/>
|
||
請點擊「匯入」按鈕執行匯入。
|
||
</div>
|
||
<div v-else style="color: #f44336; background-color: #ffebee; padding: 1rem; border-radius: 4px;">
|
||
<strong>檢查失敗</strong><br/>
|
||
<div v-for="(error, idx) in checkResult.errors" :key="idx">
|
||
{{error}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 預覽表格 -->
|
||
<div v-if="checkResult && checkResult.success && Object.keys(importPreviewData).length > 0" style="margin-top: 1rem;">
|
||
<h4>預覽資料：</h4>
|
||
<table style="table-layout: fixed;">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 80px;">訖站\起站</th>
|
||
<th v-for="originStation in importOriginStations" :key="originStation" style="width: 60px;">
|
||
{{originStation}}
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="destStation in importDestStations" :key="destStation">
|
||
<th style="text-align: center; background-color: #f5f5f5;">{{destStation}}</th>
|
||
<td v-for="originStation in importOriginStations" :key="originStation"
|
||
:style="originStation === destStation ? {backgroundColor: '#f0f0f0'} : {}"
|
||
style="text-align: right; padding: 8px;">
|
||
<template v-if="originStation === destStation">
|
||
-
|
||
</template>
|
||
<template v-else>
|
||
{{GetImportFare(originStation, destStation)}}
|
||
</template>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
#TrainFareImportExportAPP table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
#TrainFareImportExportAPP th,
|
||
#TrainFareImportExportAPP td {
|
||
border: 1px solid #ddd;
|
||
padding: 8px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
#TrainFareImportExportAPP th {
|
||
background-color: #f5f5f5;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
.tab-button {
|
||
padding: 10px 20px;
|
||
border: none;
|
||
background-color: transparent;
|
||
cursor: pointer;
|
||
border-bottom: 3px solid transparent;
|
||
margin-right: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.tab-button.active {
|
||
border-bottom-color: #1890ff;
|
||
color: #1890ff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tab-button:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.inputFull {
|
||
width: 100%;
|
||
padding: 4px 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
#TrainFareImportExportAPP button {
|
||
margin: 2px;
|
||
}
|
||
|
||
/* 訊息浮動提示圖示與文字樣式 */
|
||
.toast-message {
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 300px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.toast-icon {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
margin-right: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.toast-text {
|
||
flex: 1;
|
||
word-break: break-word;
|
||
}
|
||
</style>
|