GSI 後台:

1. 搜尋欄位中: 字數過長時, 會爆版 (Member management)
3. i18n 改成全域(因為原本馬來團隊都是用區域引入方式, 並非全域)

  const i18n = createI18n({
    locale: languageStore.currentLanguage,
    legacy: false,
    messages,
    sync: true,
    silentTranslationWarn: true,
    missingWarn: false,
    silentFallbackWarn: true,
    globalInjection: true
  })

5. 時間工具: 原生js 可以優化改成moment()

      function updateDateTime() {
        const now = new Date()
        const dateOptions: Intl.DateTimeFormatOptions = {
          weekday: "long",
          year: "numeric",
          month: "long",
          day: "numeric"
        }
        const timeOptions: Intl.DateTimeFormatOptions = {
          hour: "numeric",
          minute: "numeric",
          second: "numeric"
        }
        const datePart = new Intl.DateTimeFormat("en-US", dateOptions).format(now)
        const timePart = new Intl.DateTimeFormat("en-US", timeOptions).format(now)
        const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
        formattedDateTime.value = `${datePart} ${timePart} [${timeZone}]`
      }

*討論後, 預計會換成這個套件

https://date-fns.org/

6. 有加上alias @/ (quasar 本身也有提供一樣路徑 /src/)
7. List.vue

              <!-- 啟/停用 -->
              <q-td key="enable_or_disable" :props="props">
                <q-toggle
                  v-model="props.row.enable_or_disable"
                  color="green"
                  disable
                  :false-value="0"
                  :true-value="1"
                  keep-color
                />
              </q-td>

- 建議props.row.enable_or_disable 不該直接emit改props 的值

8. 在共用檔中, query 中 判斷是否帶分頁資料的內容

    const _pagination = props.configs.usePagination
      ? {
          page: pagination.page,
          perPage: pagination.perPage
        }
      : undefined

- 目前後端都是offset 與size , 已告知偉恩, 後續會調整

9. 在List.vue 中 使用useDialog()時

  const { isOpen } = useDialog()
  const onAction = (row: MemberItem) => {
    console.log(row)
  }

  function onAdd() {
    isOpen.value = true
  }

盡量使用內部的事件去改動"變數"
- useDialog.ts

import { ref } from "vue"

export function useDialog() {
  const isOpen = ref(false)

  const openDialog = (tableData?: any) => {
    isOpen.value = true
    console.log("Opening dialog", tableData)
  }

  return {
    isOpen,
    openDialog
  }
}

可利用openDialog 去改變isOpen

10. cash report中

因為當初需求畫面中搜尋器不想太大, 導致資料會被蓋到