mirror of
https://github.com/henry4682/finance_app.git
synced 2026-07-16 00:10:00 +00:00
72 lines
2.4 KiB
Vue
72 lines
2.4 KiB
Vue
<script setup>
|
||
import { useForm, usePage } from "@inertiajs/vue3";
|
||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
|
||
import { computed } from "vue";
|
||
|
||
const form = useForm({
|
||
file: null,
|
||
});
|
||
|
||
const flash = computed(() => usePage().props.flash);
|
||
|
||
const submit = () => {
|
||
form.post(route("expenses.import.store"), {
|
||
forceFormData: true,
|
||
});
|
||
};
|
||
</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="flash?.message"
|
||
class="mb-4 p-4 bg-green-50 text-green-700 rounded"
|
||
>
|
||
{{ flash.message }}
|
||
</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>
|