Danh sách Sản phẩm
Menu: Sản phẩm → Danh sách sản phẩm
Route:/products/list
Quyền yêu cầu:products.view
Phiên bản: v1.0 — 2026-05-08
1. Giới thiệu
Trang Danh sách sản phẩm là trung tâm quản lý tất cả sản phẩm của doanh nghiệp. Tại đây bạn có thể xem, tìm kiếm, lọc, chỉnh sửa và xóa sản phẩm.
Hình 4.1 — Giao diện tổng quan trang danh sách sản phẩm
2. Điều kiện truy cập
| Điều kiện | Chi tiết |
|---|---|
| Quyền | products.view |
| Trạng thái tổ chức | Đã duyệt |
3. Giao diện
3.1 Thanh bộ lọc
Thanh bộ lọc nằm ở trên cùng của trang danh sách, cho phép bạn nhanh chóng tìm kiếm sản phẩm theo các tiêu chí khác nhau:
| Bộ lọc | Thao tác và Cơ chế hoạt động |
|---|---|
| Tìm kiếm | Nhập tên sản phẩm. Hệ thống sử dụng cơ chế Debounce 400ms tự động tìm kiếm ngay khi bạn dừng gõ mà không cần bấm nút "Bộ lọc". |
| Danh mục | Chọn danh mục từ danh sách thả xuống. Bạn có thể gõ từ khóa vào ô danh mục để tìm kiếm nhanh các danh mục liên quan. |
| Từ ngày — Đến ngày | Lọc theo ngày tạo sản phẩm sử dụng Flatpickr. Khi chọn "Từ ngày", ngày trong "Đến ngày" sẽ tự động bị giới hạn để không nhỏ hơn ngày bắt đầu. |
| Nút "Bộ lọc" (Áp dụng) | Gửi các tiêu chí danh mục và khoảng ngày lên server để cập nhật danh sách dữ liệu. |
| Nút "Xóa bộ lọc" (Clear) | Đặt lại toàn bộ tiêu chí tìm kiếm về rỗng và tải lại toàn bộ danh sách sản phẩm. |
3.2 Tabs trạng thái
| Tab | Mô tả |
|---|---|
| Tất cả | Hiển thị tất cả sản phẩm (kèm huy hiệu tổng số) |
| Hoạt động | Chỉ sản phẩm đang hoạt động |
| Ngừng hoạt động | Sản phẩm ngừng kinh doanh |
3.3 Bảng dữ liệu
| Cột | Mô tả |
|---|---|
| # | ô tích chọn (hỗ trợ xóa nhiều) |
| Sản phẩm | Tên, mã sản phẩm, danh mục — nhấn tên để xem chi tiết |
| Trạng thái | huy hiệu: Hoạt động (xanh), Ngừng hoạt động (xám), Bản nháp (vàng) |
| Đánh giá | Điểm trung bình từ đánh giá khách hàng (★ 0-5) |
| Ngày tạo | Thời gian tạo sản phẩm |
| Hành động | Menu danh sách thả xuống: Xem chi tiết, Sửa, Xóa |
3.4 Phân trang
- Chọn hiển thị: 20 / 50 / 100 dòng mỗi trang
- Nút điều hướng: Trước / Sau
- Hiển thị tổng số bản ghi
4. Hướng dẫn thao tác
4.1 Tìm kiếm và lọc sản phẩm
- Tìm kiếm nhanh theo tên: Nhập từ khóa (ví dụ:
Robusta) vào ô tìm kiếm. Danh sách sẽ tự động được lọc mà không cần tải lại trang. - Lọc theo danh mục hoặc ngày tháng: Chọn danh mục hoặc chọn mốc thời gian, sau đó nhấn nút "Bộ lọc" (nút màu xanh) để áp dụng.
- Xóa các bộ lọc: Để quay lại danh sách đầy đủ ban đầu, chỉ cần nhấn nút "Xóa bộ lọc" (nút màu xám nhạt).
Hình 4.2 — Kết quả lọc danh sách sản phẩm khi tìm kiếm từ khóa "Robusta"
4.2 Xem chi tiết sản phẩm
- Nhấn tên sản phẩm trên bảng → chuyển đến trang
/products/{id}/detail - Hoặc nhấn icon ⋮ → chọn "Xem chi tiết"
4.3 Chỉnh sửa sản phẩm
- Nhấn icon ⋮ → chọn "Sửa"
- Hệ thống chuyển đến trang
/products/{id}/edit
4.4 Xóa sản phẩm
Xóa đơn:
- Nhấn icon ⋮ → chọn "Xóa"
- hộp thoại xác nhận hiện ra → Nhấn "Xóa"
Xóa nhiều:
- Tick ô tích ☑ ở các sản phẩm cần xóa
- Thanh trạng thái hiển thị "Chọn X Result"
- Nhấn "Xóa đã chọn" → hộp thoại xác nhận → Nhấn "Xóa"
[!WARNING]
Xóa sản phẩm là hành động không thể hoàn tác. Các mẫu mã, bản sửa đổi và ảnh liên quan cũng sẽ bị ảnh hưởng.
5. Câu hỏi thường gặp (FAQ)
| Câu hỏi | Trả lời |
|---|---|
| Sản phẩm không hiện trên danh sách? | Kiểm tra tab trạng thái (Hoạt động/Ngừng hoạt động) hoặc bộ lọc đang áp dụng. |
| Đánh giá hiển thị "—"? | Sản phẩm chưa có đánh giá nào từ người tiêu dùng. |
| Không thể xóa sản phẩm? | Sản phẩm có thể đang liên kết với đợt mã QR hoạt động. |
Cập nhật lần cuối: 2026-05-08