chore: 首次簽入 Thinkyu ASP.NET 專案
- 加入 Visual Studio / ASP.NET .gitignore - 排除建置輸出、IDE 設定、NuGet packages、大型 MSI 安裝檔
This commit is contained in:
@@ -0,0 +1,225 @@
|
||||
<%@ 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>
|
||||
Reference in New Issue
Block a user