---
# System prepended metadata

title: 'GSI 後台:'

---

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中
![image](https://hackmd.io/_uploads/ByyoQx4da.png)

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

