3-3. 查詢頁面實作練習

建立練習專案

1. 使用課程part2第一個章節內練習建立的專案
2. 安裝Mock.js

npm install mockjs

3. 安裝axios

npm install axios

4. 將以下連結內的所有資料夾複製到專案的src資料夾內
5. 安裝套件moment、js-xlsx、script-loader、file-saver

npm install moment xlsx script-loader file-saver

練習製作查詢頁面

1. 查詢選單：

   1. 學校（下拉選單。開啟頁面時使用api/index.js裡的函式schoolGet取得學校選單資料）
   2. 帳號（文字輸入框）
   3. 姓名（文字輸入框）
   4. 開始日期（datetime-picker）
   5. 結束日期（datetime-picker）

2. 製作查詢按鈕，查詢函式為api/index.js裡的函式userGet

3. 查詢資料時，使用router.push將參數放入query，並使用watch監聽route.query來取得查詢參數

4. 開啟頁面時使用預設查詢本月資料

5. 使用element-ui的table來呈現查詢列表，使用pagger來製作分頁

6. data/searchRecordFormat.js的資料為資料列表所需的欄位資訊

7. Table上使用v-loading屬性來呈現loading圖示

練習製作匯出功能

使用以下函式來製作功能：

exportExcel () {
  import('@/vendor/Export2Excel.js').then(excel => {
    if (!this.tableData.length) {
      return
    }
    const data = this.tableData.map(d => {
      return this.searchRecordFormat.map(f => d[f.index] || '')
    })
    const header = this.searchRecordFormat.map(f => f.title)
    const dateString = moment().format('YYYY-MM-DD')
     excel.export_json_to_excel({
      header, // 表頭
      data, // 資料
      filename: `document_${dateString}`, // 非必填
      autoWidth: true, // 非必填
      bookType: 'xlsx' // 非必填
    })
  })
}
 

完成範例