🌐 VI / EN VÀO HỆ THỐNG QUẢN TRỊ CiCC
098 905 1920 info@lean.vn
lean.vn — LeanERP và hệ sinh thái AI
📖 Wiki-6S-HuongDan CiCC LeanERP SOP 🎬 Có Video Hướng Dẫn (V04)

Các Modal/Dialog & Tính năng phụ trợ

Các modal/dialog: Profile, Settings, About, QR Scanner, Tree Picker, In thẻ, In nhãn tài sản

🎬 Video Hướng Dẫn Thực Hành: Quét mã QR Tài sản & In Nhãn Thiết bị / Thẻ 2 Liên V04 · 04:00 · Kỹ thuật viên · Trưởng khu vực

1. User Menu

Click vào avatar góc phải header → dropdown menu.

CODE
┌─────────────────────┐
│ [NV] Nguyễn Văn A   │
│   Đánh giá viên     │
│─────────────────────│
│ 👤 Hồ sơ cá nhân    │
│ ⚙️ Cài đặt          │
│ 🏠 Trang chủ        │
│ ℹ️ Về CiCC          │
│─────────────────────│
│ 🚪 Đăng xuất        │
└─────────────────────┘

Hàm: toggleUserMenu()

Close: Click ra ngoài menu

2. Profile (openProfile)

Modal hiển thị thông tin user:

CODE
┌──────────────────────────────┐
│                              │
│          [NV]                │
│      Nguyễn Văn A            │
│    ĐÁNH GIÁ VIÊN             │
│                              │
│ ┌──────────────────────────┐ │
│ │ 👤 Tên đăng nhập  danhgia│ │
│ │ 📧 Email        a@b.c    │ │
│ │ 📱 Điện thoại  090xxx    │ │
│ │ 🏢 Đơn vị      Hòa Thọ   │ │
│ │ 🔑 Mã vai trò  R07       │ │
│ └──────────────────────────┘ │
│                              │
│ [ĐÓNG]                       │
└──────────────────────────────┘

3. Settings (openSettings)

CODE
┌──────────────────────────────┐
│ ⚙️ Cài đặt                   │
│                              │
│ 🔔 Thông báo    [🔘]        │
│ 🌙 Chế độ tối   [🔘]        │
│ 🔄 Tự động sync [🔘]        │
│                              │
│ Phiên bản                   │
│ CiCC 6S Tagging v2.0        │
│ Build 2026.06               │
│                              │
│ [ĐÓNG]                       │
└──────────────────────────────┘

Các toggle:

  • Thông báo: toast('Bật/Tắt thông báo')
  • Dark mode: toast('Bật/Tắt dark mode') (UI toggle, chưa implement CSS)
  • Tự động sync: toast('Bật/Tắt auto sync')

4. About (openAbout)

CODE
┌──────────────────────────────┐
│         [CiCC icon]          │
│    CiCC 6S Tagging           │
│ Hệ thống quản lý 6S Kaizen   │
│                              │
│ 🏢 Thương hiệu  CiCC.com.vn │
│ 📋 Module       6S Kaizen   │
│ 📊 Đánh giá     Assessment →│
│ 📦 Phiên bản    v2.0        │
│ 🛠️ Nền tảng    LeanERP      │
│                              │
│ [ĐÓNG]                       │
└──────────────────────────────┘

Link:

  • CiCC.com.vn → mở tab mới
  • Assessment App → /lean.vn/appassessment/ (next-gen)

5. QR Scanner Overlay (qrScannerOverlay)

Fullscreen overlay, gọi từ nút "📷 Quét QR" ở tab Treo thẻ.

CODE
┌──────────────────────────────────────┐
│ 📷 Quét mã QR tài sản          [✕]   │
│──────────────────────────────────────│
│                                       │
│          ┌─────────────┐              │
│          │   ┌───┐     │              │
│          │   │ QR│     │              │
│          │   │   │     │  ← scan area │
│          │   └───┘     │              │
│          └─────────────┘              │
│                                       │
│    Đưa mã QR vào khung để quét       │
└──────────────────────────────────────┘

Công nghệ: html5-qrcode library (unpkg CDN)

  • Camera sau, độ phân giải 1280x720
  • FPS: 15, QR box: 250x250
  • Khi quét được → rung haptic → parse mã → đóng scanner

6. Tree Picker Overlay (treePickerOverlay)

Dùng chung cho Treo thẻ và Đánh giá, với 2 mode:

Mode Treo thẻ

  • Chỉ load locations của user + ancestors
  • Radio button (chọn 1)
  • Khi xác nhận → điền vào form treo thẻ

Mode Đánh giá

  • Self: locations của user
  • Cross/Expert: full tree (lấy theo tenant_id)
  • Radio button (chọn 1)
CODE
┌──────────────────────────────────────┐
│ 📍 Chọn khu vực đánh giá      [✕]    │
│──────────────────────────────────────│
│                                       │
│ 🏢 TCTY ĐỆT MAY HÒA THỌ              │
│   [-] 🏭 Khối Nhà máy May             │
│     [-] 🏘️ NM Hòa Thọ 1              │
│       [-] 🏘️ Xưởng May 2             │
│         ○ 🔧 C1 - Chuyền 1 (C1)      │
│         ○ 🔧 C2 - Chuyền 2 (C2)      │
│         ○ 🔧 C3 - Chuyền 3 (C3)      │
│       [+] 🏘️ Xưởng May 1             │
│   [+] 🏭 Khối Nhà máy Sợi            │
│                                       │
│──────────────────────────────────────│
│ [XÁC NHẬN]                            │
└──────────────────────────────────────┘

Các hàm:

  • openTreePicker(mode, preSelectId) → mở overlay
  • closeTreePicker() → đóng
  • loadTreePickerData() → tải dữ liệu cây
  • buildGenericTree(pid, depth) → render cây đệ quy
  • toggleGenericSubTree(id) → expand/collapse
  • onTreePickerSelect(id) → chọn node
  • expandAncestors(id) → expand ancestors của node đã chọn
  • confirmTreePicker() → xác nhận chọn

Chip hiển thị sau khi chọn:

CODE
📍 🏢 TCTY > 🏭 NM > 🏘️ XM2 > 🔧 C1 - Chuyền 1   [×]

7. In thẻ 2 liên (hienThiTheMoi)

Xuất hiện sau khi treo thẻ thành công.

CODE
┌──────────────────────────────────────┐
│       🟡 Y-2026-00001                │
│     Thẻ Vàng — S1 Sàng lọc           │
│──────────────────────────────────────│
│  ┌────────────────────────────────┐  │
│  │ LIÊN 1                        │  │
│  │ THẺ TREO 6S VÀNG              │  │
│  │────────────────────────────────│  │
│  │ SỐ THẺ: Y-2026-00001          │  │
│  │ NGÀY: 23/06/2026               │  │
│  │ BỘ PHẬN: ---                   │  │
│  │ VỊ TRÍ: Chuyền 1              │  │
│  │ NGƯỜI PHÁT HIỆN: Nguyễn A     │  │
│  │ MÔ TẢ: Máy mở túi bị rung     │  │
│  │ ĐIỂM KHÔNG PHÙ HỢP: S1-Sàn... │  │
│  │ [📸 ảnh before]               │  │
│  │ NGƯỜI XỬ LÝ: __________       │  │
│  │ KIỂM TRA: __________           │  │
│  │ HOÀN THÀNH: __/__/____         │  │
│  │ RÚT THẺ: ☐ OK  ☐ NG            │  │
│  │                                │  │
│  │ 📍 TREO TẠI VỊ TRÍ PHÁT HIỆN  │  │
│  └────────────────────────────────┘  │
│  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │
│  ┌────────────────────────────────┐  │
│  │ LIÊN 2 (giống Liên 1)         │  │
│  │ 📍 TREO TẠI BẢNG 6S           │  │
│  └────────────────────────────────┘  │
│──────────────────────────────────────│
│ [🖨️ In 2 liên]   [✅ Đã tạo]         │
│ 💡 In 2 liên: Liên 1 treo tại...     │
└──────────────────────────────────────┘

Nút In: window.print() — CSS print-friendly

8. In nhãn tài sản (printAssetLabel)

Từ QR preview, click "🖨️ Xem / In nhãn" → mở cửa sổ mới.

CODE
┌─────────────────────────────┐
│  ╔═══════════════════════╗  │
│  ║ [QR image 26mm]       ║  │
│  ║                        ║  │
│  ║ CiCC LeanERP           ║  │
│  ║ ASSET-MOTUI-001  [A]  ║  │
│  ║ Máy Mở Túi - Chuyền 1  ║  │
│  ║ 📍 Chuyền 1            ║  │
│  ║ ⚡ 220V · CiCC Std     ║  │
│  ║ 🆔 SN-2026-001         ║  │
│  ║ 📅 Lịch BT định kỳ:    ║  │
│  ║ Chi tiết xem CMMS      ║  │
│  ╚═══════════════════════╝  │
│                             │
│ [🖨️ IN NHÃN]                │
└─────────────────────────────┘

Kích thước nhãn: 70x40mm

9. Crop Modal (cropModal)

Dùng CropperJS để cắt ảnh trước khi treo thẻ.

CODE
┌──────────────────────────────────────┐
│ Cắt Ảnh                        [✕]  │
│──────────────────────────────────────│
│                                       │
│      ┌─────────────────────┐          │
│      │   [Image with       │          │
│      │   crop overlay]     │          │
│      │                     │          │
│      └─────────────────────┘          │
│                                       │
│──────────────────────────────────────│
│ [HỦY]                    [CẮT & LƯU] │
└──────────────────────────────────────┘

Cấu hình crop:

  • Aspect ratio: 4/3
  • Output: 1080x810, JPEG 0.7
  • View mode: 1 (crop trong canvas)

Audio thuyết minh

🖼️
Nghe hướng dẫnĐường dẫn minh họa: audio/09-modal.mp3

Click play để nghe hướng dẫn bằng giọng đọc.

Screenshots

User Menu dropdown
📸 User Menu dropdown (Bấm vào ảnh để phóng to)

Chú thích: Dropdown menu khi click avatar: Hồ sơ, Cài đặt, Đăng xuất

Modal Profile
📸 Modal Profile (Bấm vào ảnh để phóng to)

Chú thích: Modal Profile hiển thị avatar gradient, tên, vai trò, email, đơn vị

Modal Settings
📸 Modal Settings (Bấm vào ảnh để phóng to)

Chú thích: Modal Settings: Thông báo, Tự động sync, Phiên bản

Modal About
📸 Modal About (Bấm vào ảnh để phóng to)

Chú thích: Modal About: Thông tin CiCC, module 6S Tagging, liên kết app Assessment

🖼️
In nhãn tài sảnĐường dẫn minh họa: images/modal/05-in-nhan-ts.png

Chú thích: Popup in nhãn QR 70x40mm cho tài sản

<!-- Ảnh chưa chụp: QR Scanner, Tree Picker, Chips, In thẻ, Crop -->

CiCC LeanERP © 2026 — Trung tâm Tri thức, Từ điển & Tài liệu Hướng dẫn Chuẩn hóa