thinkyu/報到系統/Forms/SignUpExport.aspx

<%@ Page Title="匯出參加人員" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="SignUpExport.aspx.cs" Inherits="報到系統.Forms.SignUpExport" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="<%= ResolveUrlWithSysVer("~/Content/SignUpExport.css") %>" rel="stylesheet" type="text/css" />
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="signUpExportApp" class="page-container">
        <div class="page-header">
            <h1 class="page-title">匯出參加人員</h1>
        </div>

        <!-- 課程選擇面板 -->
        <div class="search-panel">
            <div class="search-row">
                <div class="search-field-inline w-6">
                    <div class="search-input-group">
                        <label class="search-label-inline required">選擇課程</label>
                        <select v-model="selectedCourseID" class="search-input">
                            <option value="">-- 請選擇要匯出的課程 --</option>
                            <option v-for="course in courses" :key="course.ID" :value="course.ID">
                                {{ course.CourseName }} ({{ $format.date(course.CourseDate) }})
                            </option>
                        </select>
                        <label class="search-checkbox-label">
                            <input type="checkbox" v-model="includeClosed"> 包含已結案
                        </label>
                    </div>
                </div>
                <div class="search-field-inline w-3">
                    <label class="search-label-inline">簽到退時間格式</label>
                    <select v-model="timeFormat" class="search-input">
                        <option value="datetime">年月日時分秒</option>
                        <option value="time">時分</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 預覽與匯出面板 -->
        <div class="export-panel" v-if="selectedCourseID">
            <div class="preview-section" v-if="signupData">
                <h3 class="section-title">準備匯出</h3>
                
                <div class="course-info">
                    <div class="info-row">
                        <span class="info-label">匯出檔案：</span>
                        <span class="info-value">{{ signupData.FileName }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">參加人員數：</span>
                        <span class="info-value">{{ signupData.DataCount }} 人</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">檔案大小：</span>
                        <span class="info-value">{{ formatFileSize(signupData.FileSize) }}</span>
                    </div>
                </div>
            </div>

            <!-- 匯出按鈕 -->
            <div class="export-actions">
                <button class="btn btn-success" @click="executeExport" :disabled="!signupData || exporting">
                    <span v-if="!exporting">📥 匯出為 Excel 檔案</span>
                    <span v-else>匯出中...</span>
                </button>
                <button class="btn btn-secondary" @click="clearSelection">清除選擇</button>
            </div>

            <!-- 匯出結果訊息 -->
            <div class="result-section" v-if="exportMessage">
                <div class="message-box" :class="{ success: exportSuccess, error: !exportSuccess }">
                    <span v-if="exportSuccess">✓ {{ exportMessage }}</span>
                    <span v-else>✗ {{ exportMessage }}</span>
                </div>
            </div>
        </div>

        <div class="empty-message" v-else style="padding: 40px;">
            請先選擇要匯出的課程
        </div>
    </div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="script" runat="server">
    <script src="<%= ResolveUrlWithSysVer("~/Scripts/SignUpExport.js") %>"></script>
</asp:Content>