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

[FEAT] 銷售訂單管理：補齊欄位、即時搜尋、篩選與來源自動判定

Browse Source
This commit is contained in:
sky121113
2026-03-19 15:00:33 +08:00
parent 0b4aeacb55
commit 60f5f00a9e
11 changed files with 269 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
resources/js/Pages/Integration/SalesOrders/Index.tsx
View File

@@ -1,10 +1,12 @@
import { useState } from "react";
import { useState, useCallback } from "react";
import { debounce } from "lodash";
import { Head, Link, router } from "@inertiajs/react";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import {
Search,
TrendingUp,
Eye,
Trash2,
} from "lucide-react";
import {
Table,
@@ -26,9 +28,11 @@ import { Can } from "@/Components/Permission/Can";
interface SalesOrder {
id: number;
external_order_id: string;
name: string | null;
status: string;
payment_method: string;
total_amount: string;
total_qty: string;
sold_at: string;
created_at: string;
source: string;
@@ -54,6 +58,8 @@ interface Props {
search?: string;
per_page?: string;
source?: string;
status?: string;
payment_method?: string;
};
}
@@ -65,6 +71,14 @@ const sourceOptions = [
{ label: "手動匯入", value: "manual_import" },
];
const paymentMethodOptions = [
{ label: "全部付款方式", value: "" },
{ label: "現金", value: "cash" },
{ label: "信用卡", value: "credit_card" },
{ label: "Line Pay", value: "line_pay" },
{ label: "悠遊卡", value: "easycard" },
];
const getSourceLabel = (source: string): string => {
switch (source) {
case 'pos': return 'POS';
@@ -105,12 +119,32 @@ export default function SalesOrderIndex({ orders, filters }: Props) {
const [search, setSearch] = useState(filters.search || "");
const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
const handleSearch = () => {
router.get(
route("integration.sales-orders.index"),
{ ...filters, search, page: 1 },
{ preserveState: true, replace: true, preserveScroll: true }
);
const debouncedFilter = useCallback(
debounce((params: any) => {
router.get(route("integration.sales-orders.index"), params, {
preserveState: true,
replace: true,
preserveScroll: true,
});
}, 300),
[]
);
const handleSearchChange = (term: string) => {
setSearch(term);
debouncedFilter({
...filters,
search: term,
page: 1,
});
};
const handleFilterChange = (key: string, value: string) => {
debouncedFilter({
...filters,
[key]: value || undefined,
page: 1,
});
};
const handlePerPageChange = (value: string) => {
@@ -153,38 +187,40 @@ export default function SalesOrderIndex({ orders, filters }: Props) {
{/* 篩選列 */}
<div className="bg-white rounded-xl border border-gray-200 p-4 mb-4">
<div className="flex flex-wrap items-center gap-3">
<SearchableSelect
value={filters.source || ""}
onValueChange={(v) =>
router.get(
route("integration.sales-orders.index"),
{ ...filters, source: v || undefined, page: 1 },
{ preserveState: true, replace: true, preserveScroll: true }
)
}
options={sourceOptions}
className="w-[160px] h-9"
showSearch={false}
placeholder="篩選來源"
/>
<div className="flex items-center gap-2 flex-1 min-w-[300px]">
<div className="flex items-center gap-2 flex-1 min-w-[300px] relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
<Input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && handleSearch()}
placeholder="搜尋外部訂單號 (External Order ID)..."
className="h-9"
onChange={(e) => handleSearchChange(e.target.value)}
placeholder="搜尋訂單名稱或外部訂單號 (External Order ID)..."
className="pl-10 pr-10 h-9"
/>
<Button
variant="outline"
size="sm"
className="button-outlined-primary h-9"
onClick={handleSearch}
>
<Search className="h-4 w-4" />
</Button>
{search && (
<button
onClick={() => handleSearchChange("")}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
>
<Trash2 className="h-4 w-4" />
</button>
)}
</div>
<SearchableSelect
value={filters.source || ""}
onValueChange={(val) => handleFilterChange("source", val)}
options={sourceOptions}
className="w-[140px] h-9"
showSearch={false}
placeholder="篩選來源"
/>
<SearchableSelect
value={filters.payment_method || ""}
onValueChange={(val) => handleFilterChange("payment_method", val)}
options={paymentMethodOptions}
className="w-[160px] h-9"
showSearch={false}
placeholder="篩選付款方式"
/>
</div>
</div>
@@ -195,9 +231,11 @@ export default function SalesOrderIndex({ orders, filters }: Props) {
<TableRow>
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead>外部訂單號</TableHead>
<TableHead>名稱</TableHead>
<TableHead className="text-center">來源</TableHead>
<TableHead className="text-center">狀態</TableHead>
<TableHead>付款方式</TableHead>
<TableHead className="text-right">總數量</TableHead>
<TableHead className="text-right">總金額</TableHead>
<TableHead>銷售時間</TableHead>
<TableHead className="text-center">操作</TableHead>
@@ -206,7 +244,7 @@ export default function SalesOrderIndex({ orders, filters }: Props) {
<TableBody>
{orders.data.length === 0 ? (
<TableRow>
<TableCell colSpan={8} className="text-center py-8 text-gray-500">
<TableCell colSpan={10} className="text-center py-8 text-gray-500">
無符合條件的資料
</TableCell>
</TableRow>
@@ -219,6 +257,9 @@ export default function SalesOrderIndex({ orders, filters }: Props) {
<TableCell className="font-mono text-sm">
{order.external_order_id}
</TableCell>
<TableCell className="max-w-[150px] truncate" title={order.name || ""}>
{order.name || "—"}
</TableCell>
<TableCell className="text-center">
<StatusBadge variant={getSourceVariant(order.source)}>
{order.source_label || getSourceLabel(order.source)}
@@ -233,6 +274,9 @@ export default function SalesOrderIndex({ orders, filters }: Props) {
{order.payment_method || "—"}
</TableCell>
<TableCell className="text-right font-medium">
{formatNumber(parseFloat(order.total_qty))}
</TableCell>
<TableCell className="text-right font-bold text-primary-main">
${formatNumber(parseFloat(order.total_amount))}
</TableCell>
<TableCell className="text-gray-500 text-sm">

10
resources/js/Pages/Integration/SalesOrders/Show.tsx
View File

@@ -28,7 +28,9 @@ interface SalesOrder {
status: string;
payment_method: string;
total_amount: string;
total_qty: string;
sold_at: string;
name: string | null;
created_at: string;
raw_payload: any;
items: SalesOrderItem[];
@@ -103,6 +105,7 @@ export default function SalesOrderShow({ order }: Props) {
</div>
<p className="text-sm text-gray-500 font-medium flex flex-wrap items-center gap-2">
銷售時間: {formatDate(order.sold_at)} <span className="mx-1">|</span>
名稱: {order.name || "—"} <span className="mx-1">|</span>
付款方式: {order.payment_method || "—"} <span className="mx-1">|</span>
訂單來源: {getSourceDisplay(order.source, order.source_label)} <span className="mx-1">|</span>
同步時間: {formatDate(order.created_at as any)}
@@ -146,6 +149,13 @@ export default function SalesOrderShow({ order }: Props) {
</div>
<div className="mt-6 flex justify-end">
<div className="w-full max-w-sm bg-primary-lightest/30 px-6 py-4 rounded-xl border border-primary-light/20 flex flex-col gap-3">
<div className="flex justify-between items-center w-full">
<span className="text-sm text-gray-500 font-medium">訂單總數量</span>
<span className="text-lg font-bold text-gray-700">
{formatNumber(parseFloat(order.total_qty))}
</span>
</div>
<div className="border-t border-primary-light/10 my-1"></div>
<div className="flex justify-between items-end w-full">
<span className="text-sm text-gray-500 font-medium mb-1">訂單總金額</span>
<span className="text-2xl font-black text-primary-main">

12
resources/markdown/manual/api-integration.md
View File

@@ -231,8 +231,11 @@ Star ERP 系統提供外部整合 API (Integration API) 供電商前台、POS
| 欄位名稱 | 型態 | 必填 | 說明 |
| :--- | :--- | :---: | :--- |
| `external_order_id` | String | **是** | 第三方系統中的唯一訂單編號，不可重複 (Unique) |
| `name` | String | **是** | 訂單名稱或客戶名稱 (最多 255 字元) |
| `warehouse_code` | String | **是** | 指定扣除庫存的倉庫代碼 (例如：`api-test-01` 測試倉)。若找不到對應倉庫將直接拒絕請求 |
| `payment_method` | String | 否 | 付款方式，僅接受：`cash`, `credit_card`, `line_pay`, `ecpay`, `transfer`, `other`。預設為 `cash` |
| `total_amount` | Number | **是** | 整筆訂單的總交易金額 (例如：500) |
| `total_qty` | Number | **是** | 整筆訂單的商品總數量 (例如：5) |
| `sold_at` | String(Date) | 否 | 交易發生時間，預設為當下時間 (格式: YYYY-MM-DD HH:mm:ss) |
| `items` | Array | **是** | 訂單明細陣列，至少需包含一筆商品 |
@@ -250,10 +253,13 @@ Star ERP 系統提供外部整合 API (Integration API) 供電商前台、POS
**請求範例：**
```json
{
"external_order_id": "ORD-20240320-0001",
"warehouse_code": "api-test-01",
"external_order_id": "ORD-20231024-001",
"name": "陳小明-干貝醬訂購",
"warehouse_code": "STORE-01",
"payment_method": "credit_card",
"sold_at": "2024-03-20 14:30:00",
"total_amount": 1050,
"total_qty": 3,
"sold_at": "2023-10-24 15:30:00",
"items": [
{
"product_id": 15,