Luồng dữ liệu

1. Luồng dữ liệu trong 1 page

Trong hệ thống mỗi Page khi được tạo ra sẽ được tổ chức thành 3 file chính :

page.tsx
service.ts
store.ts

File	Vai trò
page.tsx	Khai báo giao diện, layout, component, form, bảng dữ liệu, nút thao tác
store.ts	Quản lý state và action của page bằng Zustand
service.ts	Kết nối API, kế thừaBaseService, gọi backend

1.1. Sơ đồ luồng dữ liệu

1.2. Page

page.tsx là nơi khai báo giao diện chính:

• Render layout
• Hiển thị form
• Hiển thị bảng dữ liệu
• Gắn sự kiện cho button
• Gọi action từ store
• Hiển thị lỗi validate

page.tsx không gọi API trực tiếp. Khi cần lấy dữ liệu, lưu dữ liệu hoặc xóa dữ liệu, page sẽ gọi action trong store.ts.

1.3. Store

store.tsx Quản lý các dữ liệu của page

• State của page
• Dữ liệu form
• Dữ liệu bảng
• Dữ liệu điều kiện lọc
• Các hàm nghiệp vụ
• Trạng thái loading
• Lỗi xử lý

1.4 Service

service.ts là lớp kết nối giữa store và backend.

File này không quản lý state, không render UI. Nó chỉ phụ trách khai báo gọi API.

1.5. Luồng dữ liệu

Luồng nhập liệu:

User nhập vào ô input
        ↓
Component trong page.tsx nhận sự kiện onChange
        ↓
Gọi updateField trong store.ts
        ↓
Zustand cập nhật dt_ct
        ↓
UI tự render lại theo state mới

Luồng lưu dữ liệu

User bấm Nhận
        ↓
ValidateProvider kiểm tra dữ liệu
        ↓
Nếu hợp lệ, gọi P_NH()
        ↓
store.ts gom dt_ct, dt_dk, dt_dkbs
        ↓
service.ts gọi API lưu dữ liệu
        ↓
Backend xử lý
        ↓
Trả kết quả
        ↓
store.ts cập nhật lại state hoặc hiển thị thông báo

2. Cách kết nối giữa các Page tiện ích

Các page Tiện ích được quản lý thông qua Workspace Manager.

Mỗi Page tiện ích được mở dưới dạng một tab trong Workspace Manager.

Workspace Manager
  ├── Tab 1: TienIchA
  ├── Tab 2: TienIchB
  ├── Tab 3: TienIchC
  └── Active Tab: TienIchB

Mỗi tab tương ứng với một page độc lập:

TienIchA/
  ├── page.tsx
  ├── store.ts
  └── service.ts

TienIchB/
  ├── page.tsx
  ├── store.ts
  └── service.ts

Workspace Manager chỉ quản lý tab, không xử lý nghiệp vụ của page.

Workspace Manager có các chức năng:

• Mở page tiện ích
• Đóng page tiện ích
• Chuyển đổi giữa các page tiện ích
• Lưu trạng thái của các page tiện ích

Page chính
  ↓
openTab({ key, title, params, onClose })
  ↓
Workspace Manager tạo tab tiện ích
  ↓
Page tiện ích xử lý nghiệp vụ
  ↓
Page tiện ích gọi closeTab(tabId, result)
  ↓
Workspace Manager đóng tab
  ↓
Workspace Manager gọi onClose(result)
  ↓
Page chính nhận dữ liệu
  ↓
Page chính cập nhật store/form/bảng

Ví dụ:

xe.page.tsx

openTab({
  key: 'timHD_xe',
  title: 'Tìm hợp đồng xe',
  params: {
    ma_dvi: dt_ct.ma_dvi,
  },
  onClose: (result) => {
    if (result?.selected) {
      updateField('ma_kh', result.selected.ma_kh)
      updateField('ten_kh', result.selected.ten_kh)
    }

    if (result?.reload) {
      P_LKE()
    }
  },
})

timHD_xe.page.tsx

closeTab(tabId, {
  selected: {
    ma_kh: 'KH001',
    ten_kh: 'Nguyễn Văn A',
  },
  reload: true,
})