finance_app/resources/js/Pages/Expenses/Import.vue

<script setup>
import { ref, reactive } from "vue";
import axios from "axios";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";

const form = reactive({
    file: null,
});

const flashMessage = ref("");

const submit = async () => {
    // 因為有檔案，必須使用 FormData
    const formData = new FormData();
    formData.append('file', form.file);

    try {
        const response = await axios.post("/api/expenses/import", formData, {
            headers: {
                "Content-Type": "multipart/form-data",
            },
        });
        
        // 成功後的處理 (例如顯示成功訊息)
        console.log("上傳成功", response.data);
        flashMessage.value = "匯入成功！";
    } catch (error) {
        // 錯誤處理
        console.error("上傳失敗", error.response?.data);
    }
};
</script>

<template>
    <AuthenticatedLayout>
        <template #header>
            <h2 class="text-xl font-semibold">匯入發票</h2>
        </template>

        <div class="py-8 max-w-xl mx-auto px-4">
            <div class="bg-white rounded-lg shadow p-6">
                <!-- 成功訊息 -->
                <div
                    v-if="flashMessage"
                    class="mb-4 p-4 bg-green-50 text-green-700 rounded"
                >
                    {{ flashMessage }}
                </div>

                <h3 class="text-lg font-medium mb-2">上傳財政部發票 CSV</h3>
                <p class="text-sm text-gray-500 mb-6">
                    請上傳從財政部電子發票平台下載的 CSV
                    檔案，重複的發票號碼會自動略過。
                </p>

                <form @submit.prevent="submit" class="space-y-4">
                    <div>
                        <label class="block text-sm text-gray-600 mb-1"
                            >選擇檔案</label
                        >
                        <input
                            type="file"
                            accept=".csv"
                            @change="form.file = $event.target.files[0]"
                            class="w-full border rounded px-3 py-2 text-sm"
                        />
                        <p
                            v-if="form.errors.file"
                            class="text-red-500 text-sm mt-1"
                        >
                            {{ form.errors.file }}
                        </p>
                    </div>

                    <button
                        type="submit"
                        :disabled="!form.file || form.processing"
                        class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        {{ form.processing ? "匯入中..." : "匯入" }}
                    </button>
                </form>
            </div>
        </div>
    </AuthenticatedLayout>
</template>