[FEAT] 實作公共事業費附件上傳管理與更新 UI 協作規範防呆機制
All checks were successful
ERP-Deploy-Demo / deploy-demo (push) Successful in 55s
All checks were successful
ERP-Deploy-Demo / deploy-demo (push) Successful in 55s
This commit is contained in:
304
resources/js/Components/UtilityFee/AttachmentDialog.tsx
Normal file
304
resources/js/Components/UtilityFee/AttachmentDialog.tsx
Normal file
@@ -0,0 +1,304 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogDescription,
|
||||
DialogTitle,
|
||||
} from "@/Components/ui/dialog";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/Components/ui/alert-dialog";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import {
|
||||
FileText,
|
||||
Loader2,
|
||||
Trash2,
|
||||
Eye,
|
||||
Upload
|
||||
} from "lucide-react";
|
||||
import { UtilityFee } from "./UtilityFeeDialog";
|
||||
import { toast } from "sonner";
|
||||
import axios from "axios";
|
||||
|
||||
interface Attachment {
|
||||
id: number;
|
||||
url: string;
|
||||
original_name: string;
|
||||
mime_type: string;
|
||||
size: number;
|
||||
}
|
||||
|
||||
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
fee: UtilityFee | null;
|
||||
onAttachmentsChange?: () => void;
|
||||
}
|
||||
|
||||
export default function AttachmentDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
fee,
|
||||
onAttachmentsChange,
|
||||
}: Props) {
|
||||
const [attachments, setAttachments] = useState<Attachment[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [deleteId, setDeleteId] = useState<number | null>(null);
|
||||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && fee) {
|
||||
fetchAttachments();
|
||||
} else {
|
||||
setAttachments([]);
|
||||
}
|
||||
}, [open, fee]);
|
||||
|
||||
const fetchAttachments = async () => {
|
||||
if (!fee) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await axios.get(route("utility-fees.attachments", fee.id));
|
||||
setAttachments(response.data.attachments || []);
|
||||
} catch (error) {
|
||||
toast.error("取得附件失敗");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files;
|
||||
if (!files || files.length === 0 || !fee) return;
|
||||
|
||||
const file = files[0];
|
||||
|
||||
// 驗證檔案大小 (2MB)
|
||||
if (file.size > 2 * 1024 * 1024) {
|
||||
toast.error("檔案大小不能超過 2MB");
|
||||
return;
|
||||
}
|
||||
|
||||
// 驗證檔案類型
|
||||
const allowedTypes = ["image/jpeg", "image/png", "image/webp", "application/pdf"];
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
toast.error("僅支援 JPG, PNG, WebP 圖片及 PDF 文件");
|
||||
return;
|
||||
}
|
||||
|
||||
// 驗證數量限制 (3張)
|
||||
if (attachments.length >= 3) {
|
||||
toast.error("最多僅可上傳 3 個附件");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
setUploading(true);
|
||||
try {
|
||||
await axios.post(route("utility-fees.upload-attachment", fee.id), formData, {
|
||||
headers: { "Content-Type": "multipart/form-data" },
|
||||
});
|
||||
toast.success("上傳成功");
|
||||
fetchAttachments();
|
||||
onAttachmentsChange?.();
|
||||
} catch (error: any) {
|
||||
const errorMsg = error.response?.data?.message || Object.values(error.response?.data?.errors || {})[0] || "上傳失敗";
|
||||
toast.error(errorMsg as string);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
// 清空 input 讓同一個檔案可以重複觸發 onChange
|
||||
e.target.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDelete = (id: number) => {
|
||||
setDeleteId(id);
|
||||
setIsDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteId || !fee) return;
|
||||
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
await axios.delete(route("utility-fees.delete-attachment", [fee.id, deleteId]));
|
||||
toast.success("附件已刪除");
|
||||
setAttachments(attachments.filter((a) => a.id !== deleteId));
|
||||
onAttachmentsChange?.();
|
||||
} catch (error) {
|
||||
toast.error("刪除失敗");
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
setDeleteId(null);
|
||||
setIsDeleteDialogOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatSize = (bytes: number) => {
|
||||
if (bytes === 0) return "0 B";
|
||||
const k = 1024;
|
||||
const sizes = ["B", "KB", "MB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[550px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2 text-xl">
|
||||
<FileText className="h-6 w-6 text-primary-main" />
|
||||
附件管理
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
管理 {fee?.billing_month} {fee?.category_name} 的支援文件（對帳單、收據等）。
|
||||
最多可上傳 3 個檔案，單一檔案上限 2MB。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="py-4 space-y-6">
|
||||
{/* 上傳區塊 */}
|
||||
<div className="flex items-center justify-between p-4 bg-slate-50 rounded-xl border border-dashed border-slate-300">
|
||||
<div className="text-sm text-slate-500">
|
||||
{attachments.length < 3
|
||||
? `還可以上傳 ${3 - attachments.length} 個附件`
|
||||
: "已達到上傳數量上限"}
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
id="file-upload"
|
||||
className="hidden"
|
||||
onChange={handleUpload}
|
||||
disabled={uploading || attachments.length >= 3}
|
||||
accept=".jpg,.jpeg,.png,.webp,.pdf"
|
||||
/>
|
||||
<Button
|
||||
asChild
|
||||
disabled={uploading || attachments.length >= 3}
|
||||
className="button-filled-primary"
|
||||
>
|
||||
<label htmlFor="file-upload" className="cursor-pointer flex items-center">
|
||||
{uploading ? (
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
) : (
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
選擇檔案
|
||||
</label>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 附件列表 */}
|
||||
<div className="space-y-3">
|
||||
{loading ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-slate-400">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-2" />
|
||||
<p>載入中...</p>
|
||||
</div>
|
||||
) : attachments.length === 0 ? (
|
||||
<div className="text-center py-8 bg-slate-50 rounded-xl border border-slate-100">
|
||||
<p className="text-slate-400">目前尚無附件</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{attachments.map((file) => (
|
||||
<div
|
||||
key={file.id}
|
||||
className="group relative flex items-center justify-between p-3 bg-white rounded-xl border border-slate-200 hover:border-primary-light transition-all shadow-sm"
|
||||
>
|
||||
<div className="flex items-center gap-3 overflow-hidden">
|
||||
<div className="h-12 w-12 rounded-lg bg-slate-100 flex items-center justify-center overflow-hidden shrink-0 border border-slate-100">
|
||||
{file.mime_type.startsWith("image/") ? (
|
||||
<img
|
||||
src={file.url}
|
||||
alt={file.original_name}
|
||||
className="h-full w-full object-cover"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).src = "";
|
||||
(e.target as HTMLImageElement).className = "hidden";
|
||||
(e.target as HTMLImageElement).parentElement?.classList.add("bg-slate-200");
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<FileText className="h-6 w-6 text-blue-500" />
|
||||
)}
|
||||
</div>
|
||||
<div className="overflow-hidden">
|
||||
<p className="text-sm font-medium text-slate-900 truncate pr-2" title={file.original_name}>
|
||||
{file.original_name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
{formatSize(file.size)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="button-outlined-primary h-8 w-8 p-0"
|
||||
asChild
|
||||
title="另開分頁"
|
||||
>
|
||||
<a href={file.url} target="_blank" rel="noopener noreferrer">
|
||||
<Eye className="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="button-outlined-error h-8 w-8 p-0"
|
||||
onClick={() => confirmDelete(file.id)}
|
||||
disabled={isDeleting}
|
||||
title="刪除附件"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>確認刪除附件？</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
這將永久刪除此附件，此操作無法撤銷。
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDelete}
|
||||
className="bg-red-600 hover:bg-red-700 text-white"
|
||||
>
|
||||
確認刪除
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user