feat(商品): 調整商品代號顯示與會計報表樣式

2026-01-21 16:30:50 +08:00
parent af5f2f55ab
commit fc20c6d813
8 changed files with 101 additions and 25 deletions
--- a/resources/js/Components/ActivityLog/ActivityDetailDialog.tsx
+++ b/resources/js/Components/ActivityLog/ActivityDetailDialog.tsx
@@ -44,7 +44,7 @@ interface Props {
 // Field translation map
 const fieldLabels: Record<string, string> = {
    name: '名稱',
-    code: '代碼',
+    code: '商品代號',
    username: '登入帳號',
    description: '描述',
    price: '價格',
--- a/resources/js/Components/Product/BarcodeViewDialog.tsx
+++ b/resources/js/Components/Product/BarcodeViewDialog.tsx
@@ -78,7 +78,7 @@ export default function BarcodeViewDialog({
            <div class="barcode-container">
              <div class="product-info">
                <div class="product-name">${productName}</div>
-                <div class="product-code">商品編號: ${productCode}</div>
+                <div class="product-code">商品代號: ${productCode}</div>
              </div>
              <img src="${barcodePlaceholder}" alt="商品條碼" />
            </div>
--- a/resources/js/Components/Product/ProductDialog.tsx
+++ b/resources/js/Components/Product/ProductDialog.tsx
@@ -35,6 +35,7 @@ export default function ProductDialog({
  units,
 }: ProductDialogProps) {
  const { data, setData, post, put, processing, errors, reset, clearErrors } = useForm({
+    code: "",
    name: "",
    category_id: "",
    brand: "",
@@ -50,6 +51,7 @@ export default function ProductDialog({
      clearErrors();
      if (product) {
        setData({
+          code: product.code,
          name: product.name,
          category_id: product.category_id.toString(),
          brand: product.brand || "",
@@ -142,6 +144,21 @@ export default function ProductDialog({
                {errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
              </div>

+              <div className="space-y-2">
+                <Label htmlFor="code">
+                  商品代號 <span className="text-red-500">*</span>
+                </Label>
+                <Input
+                  id="code"
+                  value={data.code}
+                  onChange={(e) => setData("code", e.target.value)}
+                  placeholder="例：A1 (最多2碼)"
+                  maxLength={2}
+                  className={errors.code ? "border-red-500" : ""}
+                />
+                {errors.code && <p className="text-sm text-red-500">{errors.code}</p>}
+              </div>
+
              <div className="space-y-2">
                <Label htmlFor="brand">品牌</Label>
                <Input
--- a/resources/js/Components/Product/ProductTable.tsx
+++ b/resources/js/Components/Product/ProductTable.tsx
@@ -76,7 +76,7 @@ export default function ProductTable({
              <TableHead className="w-[50px] text-center">#</TableHead>
              <TableHead>
                <button onClick={() => onSort("code")} className="flex items-center hover:text-gray-900">
-                  商品編號 <SortIcon field="code" />
+                  商品代號 <SortIcon field="code" />
                </button>
              </TableHead>
              <TableHead>
--- a/resources/js/Pages/Accounting/Report.tsx
+++ b/resources/js/Pages/Accounting/Report.tsx
@@ -28,6 +28,7 @@ import { Badge } from "@/Components/ui/badge";
 import Pagination from "@/Components/shared/Pagination";
 import { SearchableSelect } from "@/Components/ui/searchable-select";
 import { Can } from "@/Components/Permission/Can";
+import { Checkbox } from "@/Components/ui/checkbox";

 interface Record {
    id: string;
@@ -71,6 +72,7 @@ export default function AccountingReport({ records, summary, filters }: PageProp
    const initialRangeType = (filters.date_start === today && filters.date_end === today) ? "today" : "custom";
    const [dateRangeType, setDateRangeType] = useState(initialRangeType);
    const [perPage, setPerPage] = useState(filters.per_page?.toString() || "10");
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);

    const handleDateRangeChange = (type: string) => {
        setDateRangeType(type);
@@ -111,14 +113,35 @@ export default function AccountingReport({ records, summary, filters }: PageProp
        setDateStart("");
        setDateEnd("");
        setPerPage("10");
+        setSelectedIds([]);
        router.get(route("accounting.report"), {}, { preserveState: false });
    };

+    const toggleSelectAll = () => {
+        if (selectedIds.length === records.data.length) {
+            setSelectedIds([]);
+        } else {
+            setSelectedIds(records.data.map(r => r.id));
+        }
+    };
+
+    const toggleSelect = (id: string) => {
+        setSelectedIds(prev =>
+            prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
+        );
+    };
+
    const handleExport = () => {
-        window.location.href = route("accounting.export", {
+        const query: any = {
            date_start: dateStart,
            date_end: dateEnd,
-        });
+        };
+
+        if (selectedIds.length > 0) {
+            query.selected_ids = selectedIds.join(',');
+        }
+
+        window.location.href = route("accounting.export", query);
    };

    return (
@@ -142,7 +165,8 @@ export default function AccountingReport({ records, summary, filters }: PageProp
                            variant="outline"
                            className="button-outlined-primary gap-2"
                        >
-                            <Download className="h-4 w-4" /> 匯出 CSV 報表
+                            <Download className="h-4 w-4" />
+                            {selectedIds.length > 0 ? `匯出已選 (${selectedIds.length})` : '匯出 CSV 報表'}
                        </Button>
                    </Can>
                </div>
@@ -265,6 +289,13 @@ export default function AccountingReport({ records, summary, filters }: PageProp
                    <Table>
                        <TableHeader className="bg-gray-50">
                            <TableRow>
+                                <TableHead className="w-[50px] text-center">
+                                    <Checkbox
+                                        checked={records.data.length > 0 && selectedIds.length === records.data.length}
+                                        onCheckedChange={toggleSelectAll}
+                                        aria-label="Select all"
+                                    />
+                                </TableHead>
                                <TableHead className="w-[140px] text-center">日期</TableHead>
                                <TableHead className="w-[120px] text-center">來源</TableHead>
                                <TableHead className="w-[140px] text-center">類別</TableHead>
@@ -275,7 +306,7 @@ export default function AccountingReport({ records, summary, filters }: PageProp
                        <TableBody>
                            {records.data.length === 0 ? (
                                <TableRow>
-                                    <TableCell colSpan={5}>
+                                    <TableCell colSpan={6}>
                                        <div className="flex flex-col items-center justify-center space-y-2 py-8 text-gray-400">
                                            <FileText className="h-10 w-10 opacity-20" />
                                            <p>此日期區間內無支出紀錄</p>
@@ -285,6 +316,13 @@ export default function AccountingReport({ records, summary, filters }: PageProp
                            ) : (
                                records.data.map((record) => (
                                    <TableRow key={record.id}>
+                                        <TableCell className="text-center">
+                                            <Checkbox
+                                                checked={selectedIds.includes(record.id)}
+                                                onCheckedChange={() => toggleSelect(record.id)}
+                                                aria-label={`Select record ${record.id}`}
+                                            />
+                                        </TableCell>
                                        <TableCell className="font-medium text-gray-700 text-center">
                                            {formatDateWithDayOfWeek(record.date)}
                                        </TableCell>
--- a/resources/js/Pages/Product/Index.tsx
+++ b/resources/js/Pages/Product/Index.tsx
@@ -191,7 +191,7 @@ export default function ProductManagement({ products, categories, units, filters
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
              <Input
-                placeholder="搜尋商品名稱、商品編號、品牌..."
+                placeholder="搜尋商品名稱、商品代號、品牌..."
                value={searchTerm}
                onChange={(e) => handleSearchChange(e.target.value)}
                className="pl-10 pr-10"