mama/star-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: 統一各單據詳情頁面標題與基本資訊排版

Browse Source
This commit is contained in:
sky121113
2026-02-25 14:56:15 +08:00
parent 299cf37054
commit 878b90e2ad
7 changed files with 173 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
resources/js/Pages/StoreRequisition/Show.tsx
View File

@@ -23,13 +23,7 @@ import {
DialogFooter,
DialogDescription,
} from "@/Components/ui/dialog";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import {
AlertDialog,
AlertDialogAction,
@@ -119,7 +113,7 @@ export default function Show({ requisition, warehouses }: Props) {
// 核准狀態
const [showApproveDialog, setShowApproveDialog] = useState(false);
const [supplyWarehouseId, setSupplyWarehouseId] = useState("");
const [approvedItems, setApprovedItems] = useState<{ id: number; approved_qty: string }[]>(
requisition.items.map((item) => ({
id: item.id,
@@ -235,22 +229,35 @@ export default function Show({ requisition, warehouses }: Props) {
</div>
{/* 頁面標題與操作 */}
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
<Store className="h-6 w-6 text-primary-main" />
{requisition.doc_no}
</h1>
<div className="flex items-center gap-2 mt-1">
<div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
<div className="space-y-2">
<div className="flex items-center gap-2">
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
<Store className="h-6 w-6 text-primary-main" />
門市叫貨單: {requisition.doc_no}
</h1>
{getStatusBadge(requisition.status)}
<span className="text-gray-500 text-sm">
{formatDate(requisition.created_at)}
</span>
</div>
<p className="text-sm text-gray-500 mt-1 font-medium flex items-center gap-2">
申請倉庫: {requisition.store_warehouse_name} <span className="mx-1">|</span>
建立者: {requisition.creator_name} <span className="mx-1">|</span>
時間: {formatDate(requisition.created_at)}
{requisition.transfer_order_id && (
<>
<span className="mx-1">|</span>
<Link
href={`${route("inventory.transfer.show", [requisition.transfer_order_id])}?from=requisition&from_id=${requisition.id}&from_doc=${encodeURIComponent(requisition.doc_no)}`}
className="text-primary-main hover:underline flex items-center gap-1"
>
關聯調撥單: {requisition.transfer_order_id}
</Link>
</>
)}
</p>
</div>
{/* 操作按鈕 */}
<div className="flex gap-2">
<div className="flex flex-wrap gap-2">
{isEditable && (
<>
<Can permission="store_requisitions.edit">
@@ -300,16 +307,10 @@ export default function Show({ requisition, warehouses }: Props) {
{/* 基本資訊 */}
<div className="bg-white rounded-lg shadow-sm border p-6 mb-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4">基本資訊</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<h2 className="text-lg font-semibold text-gray-800 mb-4 border-b pb-4">基本資訊</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
<div>
<span className="text-sm text-gray-500">申請倉庫</span>
<p className="font-medium text-gray-800 mt-1">
{requisition.store_warehouse_name}
</p>
</div>
<div>
<span className="text-sm text-gray-500">供貨倉庫</span>
<span className="text-sm text-gray-500 block mb-1">供貨倉庫</span>
<div className="mt-1">
{isPending && canApprove ? (
<SearchableSelect
@@ -332,16 +333,10 @@ export default function Show({ requisition, warehouses }: Props) {
)}
</div>
</div>
<div>
<span className="text-sm text-gray-500">申請人</span>
<p className="font-medium text-gray-800 mt-1">
{requisition.creator_name}
</p>
</div>
{requisition.submitted_at && (
<div>
<span className="text-sm text-gray-500">提交時間</span>
<p className="font-medium text-gray-800 mt-1">
<span className="text-sm text-gray-500 block mb-1">提交時間</span>
<p className="font-medium text-gray-800">
{formatDate(requisition.submitted_at)}
</p>
</div>
@@ -349,14 +344,14 @@ export default function Show({ requisition, warehouses }: Props) {
{requisition.approved_at && (
<>
<div>
<span className="text-sm text-gray-500">審核人</span>
<p className="font-medium text-gray-800 mt-1">
<span className="text-sm text-gray-500 block mb-1">審核人</span>
<p className="font-medium text-gray-800">
{requisition.approver_name}
</p>
</div>
<div>
<span className="text-sm text-gray-500">審核時間</span>
<p className="font-medium text-gray-800 mt-1">
<span className="text-sm text-gray-500 block mb-1">審核時間</span>
<p className="font-medium text-gray-800">
{formatDate(requisition.approved_at)}
</p>
</div>
@@ -364,8 +359,8 @@ export default function Show({ requisition, warehouses }: Props) {
)}
{requisition.remark && (
<div className="md:col-span-3">
<span className="text-sm text-gray-500">備註</span>
<p className="font-medium text-gray-800 mt-1">
<span className="text-sm text-gray-500 block mb-1">備註</span>
<p className="font-medium text-gray-800">
{requisition.remark}
</p>
</div>