庫存管理系統

一個全面的庫存管理系統，支持暗黑模式/亮色模式及英語/中文語系。前端使用 Vite 和 Vue3 結合 Ant Design 和 Tabulator-table 構建，後端採用 Python Django REST 框架配合 MySQL 和 Django ORM。確保資料庫交易遵循 ACID 屬性。

功能

  • 暗黑模式 / 亮色模式：用戶可切換暗黑和亮色主題，以提升使用體驗。
  • 英語 / 中文語系：支持多種語言，包括英語和繁體中文。
  • 庫存摘要圖表和表格：以視覺化和表格形式展示庫存數據摘要。
  • 進貨 / 出貨 / 轉移 / 折舊操作：高效管理庫存動態。
  • 帶歷史記錄的庫存表格：跟蹤庫存隨時間的變化。
  • 使用 Django 批量導入的 Excel 匯入：利用 Django 的批量導入功能快速上傳大量數據。
  • 多圖像支持的產品表格：管理具有多張圖片的產品。
  • 詳細表格（位置、分類、材質、顏色等）：使用附加細節組織庫存。
  • 盤點頁面和盤點後調整：執行庫存盤點並相應調整庫存。
  • 系統設置：包括用戶帳戶管理、權限設置和系統日誌。
  • 標籤打印支持：整合第三方工具如 QZ-Tray，使用 ZPL 直接從網頁界面選擇產品並點擊按鈕打印標籤。

技術

  • 前端：Vite、Vue3、Ant Design、Tabulator-table
  • 後端：Python Django REST 框架、MySQL、Django ORM
  • 資料庫：使用 Django ORM 的 MySQL，確保 ACID 合規性
  • 標籤打印：使用 QZ-Tray 直接打印 ZPL 標籤

開發見解

  • 資料庫中的 i18n 翻譯連結：更新 JSON 文件中的 i18n 翻譯需要耗費大量時間。修改後，還需要重新構建項目並將新的輸出上傳到伺服器。如果沒有 GitHub Actions，這個過程會更加耗時。為了提高效率，我修改了代碼，將翻譯數據存儲在資料庫中，並讓後端處理翻譯並以 JSON 格式返回。這樣，只需通過 API 更新翻譯，刷新網頁即可獲取最新的翻譯文字。這種方法對開發者和客戶來說都更加簡單，他們可以輕鬆地自行修改翻譯內容，無需經過複雜的操作。
class LocaleRegion(models.Model):
    name = models.CharField(max_length=255)
    # HK,ZH,EN
    code = models.CharField(max_length=255)
    value = models.IntegerField()

    class Meta:
        db_table = "system_locale_region"


class LocaleData(models.Model):
    key_word = models.CharField(max_length=254, unique=True)
    value1 = models.CharField(max_length=255)
    value2 = models.CharField(max_length=255)

    class Meta:
        db_table = "system_locale_data"

# /api/v1/locales/?lang=en
class LocalesProcessor(generics.GenericAPIView):
    def get(self, request):
        getLanguageCode = request.GET.get("lang", None)

        locales = {}
        languageModel = LocaleRegion.objects.get(code="en-US")
        # Check if request language code exist in Locales
        if LocaleRegion.objects.filter(code=getLanguageCode).exists():
            # Get the language code
            languageModel = LocaleRegion.objects.get(code=getLanguageCode)

        # Get all the LocalesWords
        for o in LocaleData.objects.all():
            # Get the language code
            keyName = "value" + str(languageModel.value)
            locales[o.key_word] = getattr(o, keyName)

        return Response(data={"details": locales})

  • Excel 匯入優化：最初使用 pandas 循環處理 Excel 數據，由於序列化器驗證，速度較慢。通過使用 Django ORM 的批量上傳，將所有 Excel 數據在一次循環中處理，將特徵（如分類、材質）提取到 set() 中先進行更新，並通過 ID 匹配回主數據，顯著提升了數據處理速度。

    • 通過最小化序列化器檢查並利用批量操作提高效率。

  • 出貨頁面性能優化：使用 Ant Design 表單在低規格的移動掃描器上導致高 RAM 使用，頁面卡頓。了解到在循環組件中應使用簡單元素而非重型 UI 框架組件以減少開銷。實施 TypeScript 檢查以在移動屏幕上渲染簡單的 HTML 元素，並在較大屏幕上渲染 Ant Design 豐富頁面。這一經驗促使開始探索更輕量級的 UI 框架，如 TailwindCSS。

    • 通過減少組件複雜度提高移動設備上的性能。
GitHub
LinkedIn