122 lines
4.5 KiB
Plaintext
122 lines
4.5 KiB
Plaintext
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="火車票價查詢修改.ascx.cs" Inherits="Education.Forms.領據系統.火車票價查詢修改" %>
|
||
|
||
<div id="TrainFareAPP" style="padding: 1rem 0">
|
||
<!-- Loading 指示器 -->
|
||
<div v-if="loading" class="loading-overlay">
|
||
<div class="loading-spinner">
|
||
<div class="spinner"></div>
|
||
<p>處理中...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 訊息浮動提示 -->
|
||
<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>
|
||
|
||
<!-- 查詢區塊 -->
|
||
<div style="margin-bottom: 2rem;">
|
||
<label>版本號/生效日期：</label>
|
||
<select v-model="selectedVersionId" @change="LoadFareTable" class="inputFull">
|
||
<option value="">請選擇版本...</option>
|
||
<option v-for="version in versions" :key="version.Value" :value="version.Value">
|
||
{{version.Name}}
|
||
</option>
|
||
</select>
|
||
|
||
<button type="button" class="button red120" @click="DeleteVersion" v-if="selectedVersionId" style="margin-top: 0.5rem;">
|
||
刪除此版本
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 票價編輯表格 -->
|
||
<div v-if="selectedVersionId" style="margin-top: 1rem;">
|
||
<button type="button" class="button blue80" @click="EnterEditMode" v-if="!isEditMode">進入修改</button>
|
||
<button type="button" class="button green80" @click="SaveChanges" v-if="isEditMode">儲存</button>
|
||
<button type="button" class="button gray80" @click="CancelEdit" v-if="isEditMode">取消</button>
|
||
|
||
<table style="table-layout: fixed; margin-top: 1rem;">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 80px;">訖站\起站</th>
|
||
<th v-for="originStation in originStations" :key="originStation" style="width: 60px;">
|
||
{{originStation}}
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="destStation in destStations" :key="destStation">
|
||
<th style="text-align: center; background-color: #f5f5f5;">{{destStation}}</th>
|
||
<td v-for="originStation in originStations" :key="originStation"
|
||
:style="originStation === destStation ? {backgroundColor: '#f0f0f0'} : {}"
|
||
style="text-align: right; padding: 8px;">
|
||
<template v-if="originStation === destStation">
|
||
-
|
||
</template>
|
||
<template v-else-if="!isEditMode">
|
||
{{GetFare(originStation, destStation)}}
|
||
</template>
|
||
<template v-else>
|
||
<input type="number"
|
||
:value="GetFareInput(originStation, destStation)"
|
||
@input="SetFareInput(originStation, destStation, $event.target.value)"
|
||
class="inputFull"
|
||
style="width: 100%; text-align: right;"/>
|
||
</template>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div v-else style="text-align: center; padding: 2rem; color: #999;">
|
||
請選擇要查看的版本
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
#TrainFareAPP table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
#TrainFareAPP th,
|
||
#TrainFareAPP td {
|
||
border: 1px solid #ddd;
|
||
padding: 8px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
#TrainFareAPP th {
|
||
background-color: #f5f5f5;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
#TrainFareAPP input[type="number"] {
|
||
padding: 4px 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
#TrainFareAPP button {
|
||
margin: 2px;
|
||
}
|
||
|
||
.inputFull {
|
||
width: 100%;
|
||
padding: 4px 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 2px;
|
||
}
|
||
</style>
|