UI_Sản phẩm
Giới thiệu & tài liệu liên quan
Đặc tả giao diện cho module Sản phẩm (CORE-05). Xem thêm Tổng quan module · UC · SRS.
Quy tắc tạo liền mạch
Một sản phẩm, biến thể, bộ fare, fares và định danh được tạo trong một thao tác liền mạch — mọi lỗi ở bước con sẽ quay lui toàn bộ, không lưu gì dở dang.
Trạng thái ảnh chụp
Pickleball hiện chưa có ứng dụng/màn hình thật trong workspace nên các ảnh chụp dưới đây ⏳ chờ chụp thực tế. Các bảng hạng mục được mô tả từ năng lực đã chốt ở Tổng quan module và URD; cần cập nhật ảnh khi có môi trường dev.
1/ Danh sách màn hình
| Mã | Màn hình | Mô tả |
|---|---|---|
| MH1 | Danh sách sản phẩm | Tìm kiếm + lọc nhóm hàng / trạng thái; dòng có ảnh, tên, nhóm hàng, trạng thái |
| MH2 | Form sản phẩm | Tên & mô tả đa ngôn ngữ, nhóm hàng, ảnh, kênh bán, danh sách biến thể |
| MH3 | Form biến thể & fares | Loại biến thể, đơn vị, định danh, bundle, bộ fare (mặc định + theo bậc) |
| MH4 | Quản lý nhóm hàng | Cây nhóm hàng đa ngôn ngữ; biểu tượng/màu; discrimination type (add-on) |
| MH5 | Tra cứu tại quầy | Quét mã / tìm kiếm; hiển thị biến thể + giá đã giải quyết |
2/ Luồng di chuyển màn hình
3/ Mô tả màn hình
MH1 — Danh sách sản phẩm ⏳ chờ chụp thực tế
Thanh công cụ có ô tìm kiếm, bộ lọc và nút thêm; lưới/danh sách sản phẩm; mỗi dòng có ảnh, tên, nhóm hàng và trạng thái.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Ô tìm kiếm | Textbox | Text | - | ≤ 120 | Mục đích: tìm theo tên hoặc định danh sản phẩm |
| 2 | Lọc nhóm hàng | List | Select | Không | - | Hành vi: lọc danh sách theo nhóm hàng |
| 3 | Lọc trạng thái | List | Select | Không | - | Hành vi: lọc theo Hoạt động / Vô hiệu hóa / Lưu trữ |
| 4 | Nút Thêm sản phẩm | Button | Click | - | - | Hành vi: mở form tạo mới (MH2) |
| 5 | Nút Quản lý nhóm hàng | Button | Click | - | - | Hành vi: mở MH4 |
| 6 | Dòng sản phẩm | List | Click | - | - | Hành vi: mở form sản phẩm (MH2) |
| 7 | Badge trạng thái | Label | ReadOnly | - | - | Mục đích: hiển thị Hoạt động / Vô hiệu hóa / Lưu trữ |
MH2 — Form sản phẩm ⏳ chờ chụp thực tế
Form có khối thông tin sản phẩm (đa ngôn ngữ), khối nhóm hàng & kênh bán, khu vực tải ảnh và danh sách biến thể.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Tên sản phẩm (đa ngôn ngữ) | Textbox | Text | Có | ≤ 200 | Ràng buộc: không để trống ở ngôn ngữ mặc định |
| 2 | Mô tả (đa ngôn ngữ) | Textarea | Text | Không | ≤ 2000 | Mục đích: mô tả chi tiết theo từng ngôn ngữ |
| 3 | Nhóm hàng | List | Select | Không | - | Hành vi: gán một hoặc nhiều nhóm hàng |
| 4 | Kênh bán hiển thị | Checkbox | Check | Không | - | Hành vi: chọn kênh sản phẩm hiển thị (quầy, online) |
| 5 | Ảnh sản phẩm | Button (upload) | Click | Không | - | Hành vi: kéo-thả hoặc chọn ảnh tải lên |
| 6 | Danh sách biến thể | List | Click | Có | - | Mục đích: ít nhất một biến thể mặc định; mở MH3 để thêm/sửa |
| 7 | Nút Thêm biến thể | Button | Click | - | - | Hành vi: mở form biến thể (MH3) |
| 8 | Nút Lưu sản phẩm | Button | Click | - | - | Hành vi: kiểm tra hợp lệ, lưu liền mạch, quay về MH1 |
MH3 — Form biến thể & fares ⏳ chờ chụp thực tế
Form khai báo biến thể: thuộc tính bán, định danh, bundle và khối bộ fare gồm giá mặc định cùng các fare theo bậc.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Tên biến thể (đa ngôn ngữ) | Textbox | Text | Có | ≤ 200 | Ràng buộc: không để trống ở ngôn ngữ mặc định |
| 2 | Loại biến thể | List | Select | Có | - | Mục đích: STORABLE / CONSUMABLE / SERVICE / KIT / COMBO / MANUFACTURED |
| 3 | Đơn vị bán | List | Select | Có | - | Mục đích: đơn vị cơ sở / mua / bán |
| 4 | Định danh SKU/BARCODE/QRCODE | Textbox | Text | Không | ≤ 64 | Ràng buộc: duy nhất theo từng lược đồ trong sân |
| 5 | Khoảng thời gian hiệu lực | Textbox (ngày) | Select | Không | - | Mục đích: giới hạn cửa sổ khả dụng của biến thể |
| 6 | Giá mặc định (bộ fare) | Textbox (số) | Text | Có | - | Ràng buộc: số bằng 0 hoặc lớn hơn |
| 7 | Fare theo bậc | List | Select/Text | Không | - | Hành vi: override / discount theo ngày, số lượng, kênh |
| 8 | Quan hệ bundle | List | Select | Không | - | Hành vi: combo / add-on / mua-kèm-thường-xuyên với biến thể khác |
| 9 | Nút Lưu biến thể | Button | Click | - | - | Hành vi: lưu liền mạch biến thể + bộ fare + định danh, quay về MH2 |
MH4 — Quản lý nhóm hàng ⏳ chờ chụp thực tế
Cây nhóm hàng bên trái, form nhóm hàng bên phải với bộ chọn biểu tượng/màu và discrimination type.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Tên nhóm hàng (đa ngôn ngữ) | Textbox | Text | Có | ≤ 120 | Ràng buộc: không để trống ở ngôn ngữ mặc định |
| 2 | Nhóm hàng cha | List | Select | Không | - | Ràng buộc: cùng sân, không tạo chu trình |
| 3 | Biểu tượng & màu | Button | Click | Không | - | Mục đích: nhận diện nhóm hàng trực quan |
| 4 | Discrimination type | List | Select | Không | - | Hành vi: đánh dấu nhóm kiểu add-on |
| 5 | Cây nhóm hàng | List | Click | - | - | Hành vi: chọn nhóm để sửa / re-parent |
| 6 | Nút Lưu nhóm hàng | Button | Click | - | - | Hành vi: lưu nhóm hàng giới hạn theo sân |
MH5 — Tra cứu tại quầy ⏳ chờ chụp thực tế
Ô quét mã / tìm kiếm ở trên; kết quả hiển thị biến thể kèm giá đã giải quyết và nút thêm vào giỏ.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Ô quét mã / tìm kiếm | Textbox | Text | Có | ≤ 120 | Mục đích: quét hoặc nhập SKU/BARCODE/QRCODE hoặc tên |
| 2 | Kết quả biến thể | List | Click | - | - | Mục đích: hiển thị biến thể khớp kèm thông tin |
| 3 | Giá đã giải quyết | Label | ReadOnly | - | - | Mục đích: hiển thị giá (override → discount → mặc định) |
| 4 | Trạng thái khả dụng | Label | ReadOnly | - | - | Mục đích: báo khả dụng theo kênh & cửa sổ hiệu lực |
| 5 | Nút Thêm vào giỏ | Button | Click | - | - | Hành vi: thêm biến thể vào giỏ; combo bung thành phần |