Tạo xong vận đơn sẽ đến phần tạo các bao hàng. Mục tiêu của việc này là đưa các vận đơn vào một bao để xếp lên xe cho tiện vận chuyển và sắp xếp trong kho. Phần này cũng có một chút thú vị liên quan đến phần đa ngôn ngữ, đó là trong tiếng anh thì gọi chung là gói hàng (package), trong tiếng Trung thì là túi hàng, nhưng thực tế là các vận đơn được đưa vào các bao nên đành phải để tiếng việt là bao hàng, cá nhân mình thích từ gói hàng hơn.

Yêu cầu cho phần tạo bao hàng

  1. Có thể chọn một hoặc nhiều vận đơn để tạo bao.
  2. Khi chọn vận đơn thì mới hiển thị nút tạo bao hàng lên cho đỡ rối.
  3. Khi tạo bao hàng xong thì sẽ hiển thị lên tem in để in và gắn vào bao hàng.
  4. Có thể in lại tem cho bao hàng.

Các EzyPlatform đáp ứng yêu cầu

Để đáp ứng nhanh chóng các yêu cầu của khách hàng, EzyPlatform đã có sẵn những thành phần cần thiết.

Cho phép chọn một hoặc nhiều vận đơn để tạo bao hàng

Đây là tính năng yêu cầu sử dụng đến phân trang, và EzyPlatform đã có sẵn phần này. Các đơn hàng chưa được tạo bao sẽ được hiển thị thành các trang và có thể chọn được nhiều thông qua checkbox, và giao diện của phần này sẽ như sau:

Screenshot 2024-12-25 at 16.21.26.png

Dữ liệu được phân trang sử dụng kiểu con trỏ nên đảm bảo tốc độ tối đa dù có bao nhiêu đơn hàng đi chăng nữa.

Khi chọn vận đơn thì mới hiển thị nút tạo bao hàng lên cho đỡ rối

Phần này thì đơn giản là sử dụng javascript để kiểm tra xem có vận đơn nào được chọn không nếu có thì hiển thị nút tạo bao hàng còn không thì ẩn đi, giao diện sẽ thế này:

Screenshot 2024-12-25 at 16.21.52.png

Còn mã javascript thì thế này: 

ezydelivery.deliveryOrderIdChecksChangedCallbacks.push((checkedIds, checkedCount) => {
    if (checkedCount > 0) {
        $('#createDeliveryPackageButton').removeClass('d-none');
    } else {
        $('#createDeliveryPackageButton').addClass('d-none');
    }
});

Khi tạo bao hàng xong thì sẽ hiển thị lên tem in để in và gắn vào bao hàng

Vẫn sử dụng thư viện JsBarcode.all.min.js, sau khi người dùng nhấn nút tạo bao hàng các bước sau sẽ được thực hiện:

  1. Gọi API để tạo bao hàng.
  2. Khi gọi API tạo bao hàng thành công thì gọi lại API lấy danh sách vận đơn để làm mới danh sách, loại bỏ các vận đơn đã được tạo bao.
  3. Lấy thông tin bao hàng và hiển thị in.

Mã nguồn javascript sẽ thế này: 

ezydelivery.createDeliveryPackage = function() {
    var formData = {
      deliveryOrderIds: ezydelivery.checkedDeliveryOrderIds,
    };
    $.ajax({
        type: 'POST',
        url: '/ezydelivery/api/v1/product-package/create',
        data: JSON.stringify(formData),
        contentType: 'application/json',
        success: function (data) {
            ezydelivery.deliveryOrderIdChecks = {}
            $('#deliveryOrderCheckboxParent').prop('checked', false);
            ezydelivery.callDeliveryOrderIdChecksChangedCallbacks();
            ezydelivery.fetchDeliveryOrderList();
            ezydelivery.fetchAndPrintProductPackages([data.createdId]);
        },
        error: function (e) {
            ezyadmin.processUpdateApiErrors({}, e);
        }
    });
}

Còn tem in sẽ thế này:

Screenshot 2024-12-25 at 16.32.35.png

Có thể in lại tem cho bao hàng

Thi thoảng có vấn đề gì đó với tem đã in trước đó thì người dùng có thể in lại tem bao bằng cách vào lại danh sách các bao hàng đã được tạo:

Screenshot 2024-12-25 at 16.34.27.png

Và sau đó nhấn vào nút in để in lại tem cho bao hàng.

Tổng kết

Phần này nặng nhất là phân trang danh sách vận đơn và danh sách các bao hàng thì EzyPlatform đã có sẵn framework trong core rồi, còn phân in thì tận dùng lại của in tem cho vận đơn nên cũng chỉ mất vài tiếng là xong, trao đổi và chốt với khách hàng giao diện và UX hết khoảng một ngày.