-Vite

Vite出勤行事曆

Fullcalendar官網Vue3

安裝fullcalendar/vue3@6.1.10

1
2
npm install @fullcalendar/vue3@6.1.10
npm install --save @fullcalendar/core@6.1.10 @fullcalendar/daygrid@6.1.10 @fullcalendar/interaction@6.1.10 @fullcalendar/timegrid@6.1.10 @fullcalendar/list@6.1.10

模糊搜尋

定義checkWorkDataCalendarSearch， 利用vue input 表單雙向綁定 v-model=”checkWorkDataCalendarSearch”
引入computed
邏輯：
定義一個object就是獲得的陣列＝>
如果 雙向綁定的 搜尋input（checkWorkDataCalendarSearch.value）沒有值，return 定義的這個object
＝>否則 filter 如果 title indexOf !=-1 (=-1就是沒有找到) return 過濾的 item; 否則 return 定義的這個object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const filterCheckWorkDataCalendar = computed(() =>{
    let postList_array = scheduleCalendarLists.value;
    console.log('scheduleCalendarLists.value',scheduleCalendarLists.value)
    if(checkWorkDataCalendarSearch.value === '') {
        return postList_array; 
    }
    checkWorkDataCalendarSearch.value = checkWorkDataCalendarSearch.value.trim().toLowerCase();
    postList_array = postList_array.filter(function (opt) {
    if ( opt.title.toLowerCase().indexOf(checkWorkDataCalendarSearch.value) !== -1  )
            {
            return opt;
            }
    })
    return  postList_array;
});

完整程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<template>
    <ul class="set_work_check">
        <li v-for="(item,id) in setCheckModesMainMenu" :key="id">
            <router-link 
            :to="item.href" 
            :class="{activePage: item.title===pageName}"> {{item.title}}</router-link>
        </li>
    </ul> 
    <div class="checkCalendar">
        <!--搜尋-->
        <div class="checkWorkData_means">
          <div class="btns_group">
            
              <!---模糊搜尋 綁定-->
              <input v-model="checkWorkDataCalendarSearch" 
              placeholder="search" />
              <i class="icon-ym icon-ym-search"></i>
            
          </div>
        </div> 
        <FullCalendar  :options="calendarOptions"></FullCalendar>  
    </div> 
</template>

<route lang="yaml">
    meta:
      layout: LayoutBack 
      requireAutd: true   
</route>

<script setup lang="ts">
import axios from "axios";
import {ref,onMounted,computed} from 'vue';
import FullCalendar from '@fullcalendar/vue3';
import { CalendarOptions , EventClickArg } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
    const getToken =localStorage.getItem("token");
    const headers = {"Authorization": 'Bearer '+getToken};
    const pageName=ref<string>('出勤行事曆');
    interface menuType{
      id:string,
      title:string,
      href:string,
    }
    const setCheckModesMainMenu=ref<menuType[]>([
        { id: 'setWorkCheckList', title: '出勤設定列表', href: '/admin/set_work_check' },
        { id: 'checkWorkCheck', title: '出勤打卡', href: '/admin/checkWorkCheck' },
        { id: 'checkWorkLists', title: '出勤列表', href: '/admin/checkWorkLists' },
        { id: 'checkCalendar', title: '出勤行事曆', href: '/admin/calendar' },
    ])
    const checkWorkDataCalendarSearch =ref<string>('');
     interface workCheckType{
      _id:string,
      workCheck_Id:string,
      userId:string,
      userName: string,
      start: string,
      onWorkStatus: true,
      offWorkStatus: false,
      title: string,
      borderColor: string,
      ip: string,
      lat: number,
      lng: number,
    }
    const scheduleCalendarLists=ref<workCheckType[]>([]);
   
      //獲取數據
    const getCalendar = async () => {
        try{
            const api=`${import.meta.env.VITE_API_URL}/auth/workChecks`;
            const res = await axios.get(api,{ headers });
            if(res.status===200){
                /*重點 res.data.reverse()*/
              if(localStorage.getItem('userName')==='user'){
                scheduleCalendarLists.value = res.data;
                 calendarOptions.value.events=filterCheckWorkDataCalendar;
              }else{
                scheduleCalendarLists.value = res.data.filter(function (item: workCheckType) {
                   console.log(item,item.userName,item.userName===localStorage.getItem('userName'))
                  if (item.userName===localStorage.getItem('userName')){
                      return item;
                  }
                });
                calendarOptions.value.events=filterCheckWorkDataCalendar;
              }
             
              
            }
        }
        catch(err){
            console.log(err)
        }
    };
    //模糊搜尋
    const filterCheckWorkDataCalendar = computed(() =>{
        let postList_array = scheduleCalendarLists.value;
        console.log('scheduleCalendarLists.value',scheduleCalendarLists.value)
        if(checkWorkDataCalendarSearch.value === '') {
            return postList_array; 
        }
        checkWorkDataCalendarSearch.value = checkWorkDataCalendarSearch.value.trim().toLowerCase();
        postList_array = postList_array.filter(function (opt) {
        if ( opt.title.toLowerCase().indexOf(checkWorkDataCalendarSearch.value) !== -1  )
                {
                return opt;
                }
        })
        return  postList_array;
    });
   interface headerToolbarType{
       left:string,
      center:string,
      right:string,
    }
// web  headerToolbar顯示方式
  const webDisableHeaderToolbar=ref<headerToolbarType>({
    left: 'prev',
    center: 'title,dayGridMonth,timeGridWeek,timeGridDay',
    right: 'next'
  })
  // mobile  headerToolbar顯示方式
  const mobileDisableHeaderToolbar=ref<headerToolbarType>({
    left: 'prev',
    center: 'title,dayGridMonth,listWeek,timeGridDay',
    right: 'next'
  })
  // 
  const calendarOptions = ref<CalendarOptions>({
      timeZone: 'Asia/Taipei',
      locale:'zh-TW',
      plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin,listPlugin],
      headerToolbar:window.screen.width < 767?mobileDisableHeaderToolbar:webDisableHeaderToolbar ,
      //螢幕尺寸767以下顯示
      initialView: window.screen.width < 767 ? 'listWeek' : 'dayGridMonth',
      //高度設置
      height: window.screen.width < 767 ? 800 : 800,
      //*****初始化，新增事件初始化改為空值陣列，
     // initialEvents: scheduleCalendarList.value, 
      events: [], 
       //時間設置
      eventTimeFormat: {
          hour: '2-digit',
          minute: '2-digit',
          hour12: false
      },
     //刪除事件
     // eventClick: openDeleteEvent,
      //新增事件
     // select: addSchedule,
      editable: false,//允許拖拉縮放
      droppable: true, //允許將事情放到日曆上
      selectable: true, //允許選擇
      selectMirror: true,//允許選擇鏡像
      dayMaxEvents: true,//允許一天最多事件時就顯示彈出窗口
      weekends: true,//顯示週末
      //eventsSet:handleEvents,
     // drop: dropEvents;
      // 更新遠程數據庫
      // eventAdd:
      // eventChange:
      // eventRemove:
    });
    onMounted(()=>{
        getCalendar();
    }) 
</script>
Vue

js定位與範圍內 & Vue語法糖寫法 定位與使用套件

取得使用者定位

參考資料
Geolocation地理位置地理座標
通過調用navigator.geolocation對象來訪問Geolocation API，授予設備訪問權

  1. getCurrentPosition：返回設備當前位置
  2. watchPosition：設備位置改變時自動調用處裡的函式
  • success 回調（必需）
  • error 回調（可選）
  • options 對象（可選）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
navigator.geolocation.getCurrentPosition(success[, error[, options]])

//js取得裝置是否同意被取得所在位置座標
if ("geolocation" in navigator) {
    try {  
        navigator.geolocation.getCurrentPosition((position) => {
            //success
            const { latitude, longitude } = position.coords;
        })
    } 
    catch (error: any) {
        //success
        switch (error.code) {
            case error.PERMISSION_DENIED: alert("使用者拒絕了地理定位請求。");
            break;
            case error.POSITION_UNAVAILABLE: alert("位置資訊不可用。");
            break;
            case error.TIMEOUT: alert("取得用戶位置的請求逾時。");
            break;
            case error.UNKNOWN_ERROR: alert("出現未知錯誤。");
            break;
        }
    }
} else {
    alert("Sorry, 你的裝置不支援地理位置功能。")
  /* geolocation IS NOT available */
}

指定定位範圍內函式(Math.PI圓周直徑的比例)

Math.PI=3.14159

1
2
3
4
5
6
7
8
9
//js
function radius(d){
    return d * Math.PI / 180.0;
}
//Vue setup ts 語法
const radius = (p: number) => {
    return p * Math.PI / 180.0;
}

參考資料

計算距離函式

Math.asin() 方法返回一個數值的反正弦（單位為弧度）
Math.sqrt() 方法返回一個數值的平方根
Math.pow() 返回基數（base）指數
Math.cos() 返回一個數值的餘弦值
Math.round() 函數回傳四捨五入後的近似值
toFixed() 方法會使用定點小數表示法（fixed-point notation）來格式化數字。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//js
function getDistance(lat1,lng1,lat2,lng2){
    var radLat1 = radius(lat1);
    var radLat2 = radius(lat2);
    var a = radLat1 - radLat2;
    var  b = radius(lng1) - radius(lng2);
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
         Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
    s = s *6378.137 ;// EARTH_RADIUS;
    s = Math.round(s * 10000) / 10000; //輸出爲公里
    //s=s.toFixed(4);
    return s;
}

//Vue setup ts 語法
//參數分別爲第一點的緯度，經度；第二點的緯度，經度
const getDistance = (lat1: number, lng1: number, lat2: number, lng2: number) => {
    const radLat1 = radius(lat1);
    const radLat2 = radius(lat2);
    //緯度距離
    const a = radLat1 - radLat2;
    const b = radius(lng1) - radius(lng2);
    let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
        Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
    s = s * 6378.137;// 地球半徑;
    s = Math.round(s * 10000) / 10000; //輸出爲公里
    return s;
}
參考資料

Vue 語法糖寫法使用

安裝vue-google-maps-ui套件

Vue Google Maps UI

1
2
3
4
5
6
7
8
9
10
npm install vue-google-maps-ui --save 或 
yarn add vue-google-maps-ui 或 
pnpm add vue-google-maps-ui --save
載入方法
//全局載入 main.ts
import GoogleMap from 'vue-google-maps-ui'
app.use(GoogleMap)
//頁面載入
import GoogleMap from 'vue-google-maps-ui'

Vue setup ts 寫法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<template>
    <GoogleMap class="map" 
        :api-key="googleMapKey"  
        :drawingManagerOptions="{ isSingle: true }"
        :zoom="25" 
        width="100%"
        height="100vh"
        
        :options='{ fullscreenControl: false, mapTypeControl: false }'
        language="zh-Tw"
        :current-address="{
            geometry: {
                location: { lat: lat, lng: lng }
            },
            formatted_address: addresss
        }"   
    />
</template>


<script setup lang="ts">
import { ref, onMounted } from 'vue';
import GoogleMap from 'vue-google-maps-ui';
//googleMapKey金鑰寫在環境變數
const googleMapKey = ref<any>(`${import.meta.env.VITE_GOOGLE_MAPS_KEY}`);
const lat = ref<number>(24.1487354);
const lng = ref<number>(120.6544864);
const addresss = ref<string>('');
//算出圓周
const radius = (p: number) => {
    console.log('算出圓周',p * Math.PI / 180.0)//2.1058120410500933
    return p * Math.PI / 180.0;
}
//計算距離，參數分別爲第一點的緯度，經度；第二點的緯度，經度
const getDistance = (lat1: number, lng1: number, lat2: number, lng2: number) => {
    const radLat1 = radius(lat1);
    const radLat2 = radius(lat2);
    //緯度距離
    const a = radLat1 - radLat2;
    const b = radius(lng1) - radius(lng2);
    let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
        Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));


    s = s * 6378.137;// 地球半徑;
    s = Math.round(s * 10000) / 10000; //單位為 km
    return s;
}
//定位
const position = () => {
    if ("geolocation" in navigator) {
         try {
            setTimeout(() =>{
                    // 獲取當前位置
                navigator.geolocation.getCurrentPosition((position) => {
                        // 解構方式獲取
                    const { latitude, longitude } = position.coords;
                    latNow.value=latitude;
                    lngNow.value=longitude;   
                    if(setMap.value.length===0){
                            alert('定位不成功!');
                    }
                    else{
                            // b單位為 km
                        let dis = getDistance(Number(lat.value) ,Number(lng.value),latitude,longitude);
                            // 距離公尺
                        let removing =dis * 100;
                            // 距離公尺<圓周距離限制
                        if(removing<distance.value){
                            showMap.value=true;
                        }
                        else{
                            alert('你不在打卡範圍內,請檢查定位設定並重新登入!')
                        }
                    }
                })
            }, 5000)
        } 
        catch (error: any) {
            //success
            switch (error.code) {
                case error.PERMISSION_DENIED: alert("使用者拒絕了地理定位請求。");
                break;
                case error.POSITION_UNAVAILABLE: alert("位置資訊不可用。");
                break;
                case error.TIMEOUT: alert("取得用戶位置的請求逾時。");
                break;
                case error.UNKNOWN_ERROR: alert("出現未知錯誤。");
                break;
            }
        }
    } else {
        alert("Sorry, 你的裝置不支援地理位置功能。")
    /* geolocation IS NOT available */
    }
    interface  checkSetingListType {
        _id:string,
        mode:number,//模式
        name:string,//地點
        url:string,//地圖
        flexibleTime:string,//彈性上班
        flexibleHour:string,//工時
        distance:number,//圓周
        lat:string,//經度
        lng:string,//緯度
        personGroup:Object,//群組
        buildDate:number,
        updataDate:number,
    }
    const checkSetingList=ref<checkSetingListType[]>([]);
    const flexibleTime=ref<number | any >(null);
    const setMap=ref<string>('');
    const office=ref<string>('');
    const flexibleHour =ref<string>('');
    // 獲得出勤設定
    const getSetMode = async() =>{
      try {
        const api=`${import.meta.env.VITE_API_URL}/auth/setCheckModes`;
        const res = await axios.get(api, { headers });
        if (res.status === 200) {  
            setTimeout(() =>{
                checkSetingList.value=res.data.filter((element:any)=>{
                    if(element.name==='台中大墩11街'){
                        return element
                    }else if (element.name!='台中大墩11街'){
                        return element
                    }
                })
                console.log('台中辦公室',checkSetingList.value);
                lat.value=checkSetingList.value[0].lat;
                lng.value=checkSetingList.value[0].lng;
                flexibleTime.value=checkSetingList.value[0].flexibleTime;
                setMap.value=checkSetingList.value[0].url;
                console.log(setMap.value)
                distance.value=checkSetingList.value[0].distance;
                office.value=checkSetingList.value[0].name;
                flexibleHour.value=checkSetingList.value[0].flexibleHour;
                // 將彈性時間改為時間搓
                formatFlexibleTime(flexibleTime.value);        
            }, 3000)
            position()
        } 
      }
      catch(err){
        console.log('err',err)
      } 
    }

 const changeFlexibleTime =ref<any>('');
 const timeStamp=ref<any>(null);
 const endTimeStamp=ref<any>(null);//下班的時間搓
 // 將彈性時間改為時間搓 塞入timeStamp 1.獲取flexibleTime
  const formatFlexibleTime =(flexibleTime:any) =>{
    let now = new Date();
    // 原生時間表單表單type 取得的 time 為 '10:00'
    const hourMinute = flexibleTime;
    //split() 方法可以用來根據你指定的分隔符號，將字串切割成一個字串陣列。
    var [hour, minute] = hourMinute.split(':');
    // 設定日期的小時、分鐘、秒和毫秒
    now.setHours(hour) ;//setHours()方法依據本地時間來設定日期物件中的小時
    now.setMinutes(minute);//setMinutes()方法依據本地時間來設定日期物件中的分鐘
    now.setSeconds(0);//setMinutes()方法用於設定日期物件的秒字段
    now.setMilliseconds(0);//方法用於指定時間的毫秒字段
    changeFlexibleTime.value =  now;
    // console.log('changeFlexibleTime',changeFlexibleTime.value);
    // Sat Apr 20 2024 10:00:00 GMT+0800 (台北標準時間);
    const changeFormat =dayjs(changeFlexibleTime.value).format('YYYY-MM-DD HH:mm:ss');
    console.log('changeFormat',changeFormat);
    timeStamp.value=now.getTime()// 
      console.log('timeStamp.value',timeStamp.value);
    //算出下班時間
    if(changeFormat!=''){
        const endTmeFormat =dayjs(changeFormat).add(Number(flexibleHour.value), 'hours').format('YYYY-MM-DD HH:mm:ss');
        console.log('下班時間',endTmeFormat);
        const endTime=dayjs(endTmeFormat,'YYYY-MM-DD HH:mm:ss');
       // console.log('endTime',endTime);
        endTimeStamp.value=endTime.valueOf();
        console.log('endTimeStamp.value',endTimeStamp.value);
    }
   // console.log('changeFormat',changeFormat);
    const time = dayjs(changeFormat,'YYYY-MM-DD HH:mm:ss');
    //**valueOf() 方法傳回字串的原始值。
    timeStamp.value=time.valueOf(); 
    //console.log('timeStamp.value',timeStamp.value);
  }
};
onMounted( () => {
    getSetMode(); // 出勤設定
});
定位不準確的問題
Vue

Vite 分頁邏輯與搜尋功能(語法糖)

// 註解Ａ:在迭代物件屬性時，使用 for…in 迭代物件屬性 參考

  • A搜尋功能: 綁定搜尋表單，使用computed（計算功能）如果搜尋表單沒有值＝>返回獲取到的陣列;如果有那就搜尋表單去除空白與大小寫 indexOf !==-1，返回它 並返回陣列
    filter() js 過濾功能 filter() js
    indexOf 找出元素索引值的陣列 indexOf js
  • B分頁總數:過濾的總筆數除以每頁筆數，「無條件進位」＝>Math.ceil()：公式：Math.ceil（過濾的總筆÷每頁筆數）
    Math.ceil 無條件進位 javaScript 浮點數計算
  • C分頁項目
    1.計算出每一頁的第一個索引數（使用computed（計算功能））＝>當前頁面乘以每一頁減去每一頁=>最少都會在第一頁
    2.返回 => 搜尋後（過濾後）=>arr.slice([begin[, end]])回傳一個新陣列物件
    slice() js 給予開始或是結束索引，回傳一個新陣列物件 參閱slice() js
  • 選擇每頁顯示幾筆數據 v-model="pageValue" 綁定表單 ，函式 ＝> @change="changeItemsPerPage($event)"

以下是程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<template>
<div class="checkWork_area"> 
    <div class="search_bar_group">
        <button class="el-button el-button--primary"> 導出Excel</button>
        <!--綁定input  v-model="searchQuery"-->
        <input class="el-input__inner" 
        v-model="searchQuery" placeholder="search"/>
        <i class="icon-search"></i>
    </div>
    <!----table-->
    <div class="check_table_area">
        <tr>
             <th v-for="(item,thid) in tableHeader" :key="thid">
                {{item.subject}}
            </th>
        </tr>
        <tbody>
            <!--過濾以後才開始分頁排列-->
            <tr v-for="(item,index) in paginatedItems" :key="index">
    			<td>{{ Number(index+1 + startIndexValue) }}</td>
    			<td>{{ item.title }}</td>
    			<td>{{item.sourceWebName}}</td>
    			<td>{{ item.startDate}}</td>
            </tr>
    </tbody>
    </div>

    <!--＊分頁-->
    <ul class="pagination">
        <!--如果在第一頁時 上一頁就是disabled-->
    	<li :class="{ 'disabled': currentPage === 1 }" > 
            <a @click="prevPage">
                <i class="icon-chevron-left-solid"></i>
            </a>
        </li>
        <!--總頁數遍歷 ＝>如果當頁的點擊的 page就是active -->
    	<li v-for="(n,index ) in totalPages" :key="index" @click="itActive(n)" 
        :class="{ 'active': n === currentPage }" >
            <a>{{ n }}</a>
        </li>
         <!--如果在當前頁面等於總頁數就是disabled-->
    	<li 
        :class="{ 'disabled': currentPage === totalPages }" >   
            <a @click="nextPage">
            <i class="icon-chevron-right-solid"></i></a>
        </li>
         <li>共{{ paginatedItems.length }}筆</li>
            <li>
                <el-select
                    v-model="pageValue"
                    class="m-2"
                    placeholder="Select"
                    style="width: 240px"
                    @change="changeItemsPerPage($event)"
                >
                <el-option
                v-for="item in pagePerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
                </el-select>
            </li>
    </ul>
</div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, onMounted, computed } from 'vue';
// 搜尋表單綁定
const searchQuery = ref<string>('');
// 當前頁面
const currentPage = ref<number>(1);
// 每頁幾筆
const itemsPerPage = ref<number>(10);
//選擇每頁顯示幾筆
const changeItemsPerPage = (event: number) => {
    itemsPerPage.value = event;
}
const pagePerOptions = [
    { value: '10', label: '10筆' },
    { value: '15', label: '15筆' },
    { value: '20', label: '20筆' },
    { value: '30', label: '30筆' },
    { value: '40', label: '40筆' },
    { value: '50', label: '50筆' },
]
const pageValue = ref<string>('10筆');
interface tableHeaderType {
    subject?: string;
    thid?: string;
}
const tableHeader = ref<tableHeaderType[]>([
    { subject: '項目', thid: 'item' },
    { subject: '主題', thid: 'title' },
    { subject: '來源', thid: 'orange' },
    { subject: '開始時間', thid: 'startTime' }
])
// listType屬性
interface listsType {
    UID?: string;
    version?: string;
    category?: string;
    comment?: string;
    descriptionFilterHtml?: string;
    discountInfo?: string;
    editModifyDate?: string;
    hitRate?: number;
    imageUrl?: string;
    masterUnit?: object;
    title?: string | any;
    sourceWebName?: string | any;
    startDate?: string | any;
}
// 表格數據
const lists = ref<listsType[]>([]);
// A搜尋功能過濾:綁定搜尋表單，使用computed（計算功能）如果搜尋表單沒有值＝>返回獲取到的陣列;如果有那就搜尋表單去除空白與大小寫 indexOf !==-1，返回它 並返回陣列
const filteredItems = computed(() => {
    let filteredItems = lists.value;
    if (searchQuery.value === '') {
        return filteredItems;
    }
    searchQuery.value = searchQuery.value.trim().toLowerCase();
    filteredItems = filteredItems.filter(function (opt: listsType) {
        // indexOf !==-1 =>
        if (opt.title.toLowerCase().indexOf(searchQuery.value) !== -1 || opt.sourceWebName.toLowerCase().indexOf(searchQuery.value) !== -1) {
            return opt;
        }
    })
    return filteredItems;
})
// 索引數字
const startIndexValue = ref<number>(1);

// 總頁數
const totalPages = computed(() => {
    // B分頁總數=>過濾的總筆數除以每頁筆數，「無條件進位」＝>Math.ceil()：公式：Math.ceil（過濾的總筆÷每頁筆數）
    return Math.ceil(filteredItems.value.length / itemsPerPage.value);
})
// 分頁項目
const paginatedItems = computed(() => {
    // 當前頁面乘以每一頁減去每一頁
    const startIndex = currentPage.value * itemsPerPage.value - itemsPerPage.value;
    startIndexValue.value = startIndex;
    // 返回 => 搜尋後（過濾後）=>arr.slice([begin[, end]])回傳一個新陣列物件
    return filteredItems.value.slice(startIndex, startIndex + itemsPerPage.value);
})
// 上一頁
const prevPage = () => {
    // 如果當前頁面小於 < 1
    if (currentPage.value > 1) {
        currentPage.value--;
    }
}
// 下一頁
const nextPage = () => {
    // 如果當前頁面小於 < 全部頁面 ＝。那當前頁就能＋＋
    if (currentPage.value < totalPages.value) {
        currentPage.value++;
    }
}
// 點擊獲得第幾頁塞入當前頁面
const itActive = (page: number) => {
    // 如果當前頁面是null那當前頁面是第一頁,否則是點擊頁面
    page === null ? currentPage.value = 1 : currentPage.value = page;
}
// 獲取數據
const getItems = async () => {
    try {
        const api = 'https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=200';
        const res = await axios.get(api);
        lists.value = res.data;
    }
    catch (err) {
        console.log('err', err);
    }
}
onMounted(() => {
    getItems();
    console.log(typeof pagePerOptions)
})
</script>

github 分頁邏輯說明

父傳子到子分頁

組件
v-model 的參數語法不會直接修改 props 的值 ， 修改＝>使用父組件 pageValue 父傳給子，@update:pageValue=”pageValue = $event”， 當 Pagination 组件觸發 update:pageValue 事件時，子組件会觸發 update:pageValue 的自定義事件，並將新值作為参数傳遞給父組件

父組件
引入Pagination.vue 子組件

<Pagination
:currentPage=”currentPage”
:totalPages=”totalPages”
:totoItem=”filteredItems.length”
:pagePerOptions=”pagePerOptions”
:pageValue=”pageValue”
@update:pageValue=”pageValue = $event”
@sendprevPage=”prevPage”
@sendNextPage=”nextPage”
@sendItActive=”itActive”
@sendOnChange=”changeItemsPerPage”
/>
傳值與接收子組件的通訊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<template>
<div class="checkWork_area"> 
    <div class="search_bar_group">
        <button class="el-button el-button--primary"> 導出Excel</button>
        <!--綁定input  v-model="searchQuery"-->
        <input class="el-input__inner" 
        v-model="searchQuery" placeholder="search"/>
        <i class="icon-search"></i>
    </div>
    <!----table-->
    <div class="check_table_area">
        <tr>
             <th v-for="(item,thid) in tableHeader" :key="thid">
                {{item.subject}}
            </th>
        </tr>
        <tbody>
            <!--過濾以後才開始分頁排列-->
            <tr v-for="(item,index) in paginatedItems" :key="index">
    			<td>{{ Number(index+1 + startIndexValue) }}</td>
    			<td>{{ item.title }}</td>
    			<td>{{item.sourceWebName}}</td>
    			<td>{{ item.startDate}}</td>
                
            </tr>
        </tbody>
    </div>

<!--子組件Pagination -->
    <Pagination 
        :currentPage="currentPage" 
        :totalPages="totalPages" 
        :totoItem="filteredItems.length"
        :pagePerOptions="pagePerOptions"
        :pageValue="pageValue"
        @update:pageValue="pageValue = $event"
        @sendprevPage="prevPage" 
        @sendNextPage="nextPage"
        @sendItActive="itActive"
        @sendOnChange="changeItemsPerPage"
    />
</div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, onMounted, computed } from 'vue';
import Pagination from '../components/Pagination.vue';
// 搜尋表單綁定
const searchQuery = ref<string>('');
// 當前頁面
const currentPage = ref<number>(1);
// 每頁幾筆
const itemsPerPage = ref<number>(10);
const changeItemsPerPage = (event: number) => {
    itemsPerPage.value = event;
}
const pagePerOptions = [
    { value: '10', label: '10筆' },
    { value: '15', label: '15筆' },
    { value: '20', label: '20筆' },
    { value: '30', label: '30筆' },
    { value: '40', label: '40筆' },
    { value: '50', label: '50筆' },
]
const pageValue = ref<string>('10筆');
interface tableHeaderType {
    subject?: string;
    thid?: string;
}
const tableHeader = ref<tableHeaderType[]>([
    { subject: '項目', thid: 'item' },
    { subject: '主題', thid: 'title' },
    { subject: '來源', thid: 'orange' },
    { subject: '開始時間', thid: 'startTime' }
])
// listType屬性
interface listsType {
    UID?: string;
    version?: string;
    category?: string;
    comment?: string;
    descriptionFilterHtml?: string;
    discountInfo?: string;
    editModifyDate?: string;
    hitRate?: number;
    imageUrl?: string;
    masterUnit?: object;
    title?: string | any;
    sourceWebName?: string | any;
    startDate?: string | any;
}
// 表格數據
const lists = ref<listsType[]>([]);
// A搜尋功能過濾:綁定搜尋表單，使用computed（計算功能）如果搜尋表單沒有值＝>返回獲取到的陣列;如果有那就搜尋表單去除空白與大小寫 indexOf !==-1，返回它 並返回陣列
const filteredItems = computed(() => {
    let filteredItems = lists.value;
    if (searchQuery.value === '') {
        return filteredItems;
    }
    searchQuery.value = searchQuery.value.trim().toLowerCase();
    filteredItems = filteredItems.filter(function (opt: listsType) {
        // indexOf !==-1 =>
        if (opt.title.toLowerCase().indexOf(searchQuery.value) !== -1 || opt.sourceWebName.toLowerCase().indexOf(searchQuery.value) !== -1) {
            return opt;
        }
    })
    return filteredItems;
})
// 索引數字
const startIndexValue = ref<number>(1);

// 總頁數
const totalPages = computed(() => {
    // B分頁總數=>過濾的總筆數除以每頁筆數，「無條件進位」＝>Math.ceil()：公式：Math.ceil（過濾的總筆÷每頁筆數）
    return Math.ceil(filteredItems.value.length / itemsPerPage.value);
})
// 分頁項目
const paginatedItems = computed(() => {
    // 當前頁面乘以每一頁減去每一頁
    const startIndex = currentPage.value * itemsPerPage.value - itemsPerPage.value;
    startIndexValue.value = startIndex;
    // 返回 => 搜尋後（過濾後）=>arr.slice([begin[, end]])回傳一個新陣列物件
    return filteredItems.value.slice(startIndex, startIndex + itemsPerPage.value);
})
// 上一頁
const prevPage = () => {
    // 如果當前頁面小於 < 1
    if (currentPage.value > 1) {
        currentPage.value--;
    }
}
// 下一頁
const nextPage = () => {
    // 如果當前頁面小於 < 全部頁面 ＝。那當前頁就能＋＋
    if (currentPage.value < totalPages.value) {
        currentPage.value++;
    }
}
// 點擊獲得第幾頁塞入當前頁面
const itActive = (page: number) => {
    // 如果當前頁面是null那當前頁面是第一頁,否則是點擊頁面
    page === null ? currentPage.value = 1 : currentPage.value = page;
}
// 獲取數據
const getItems = async () => {
    try {
        const api = 'https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=200';
        const res = await axios.get(api);
        lists.value = res.data;
    }
    catch (err) {
        console.log('err', err);
    }
}
onMounted(() => {
    getItems();
    console.log(typeof pagePerOptions)
})
</script>

分頁的父傳子

新增Pagination.vue 子組件
使用＝>import { defineProps } from ‘vue’;
// prop 接收物件設定type
const props = defineProps({
currentPage: { type: Number },
totalPages: { type: Number },
totoItem: { type: Number },
pagePerOptions: Object,
pageValue: { type: String },
})
// 父對子傳值
const emits = defineEmits([‘sendprevPage’, ‘sendNextPage’, ‘sendItActive’, ‘sendOnChange’]);
const sendprevPage = () => {
emits(‘sendprevPage’,)
}
const sendNextPage = () => {
emits(‘sendNextPage’,)
}
const sendItActive = (page: number) => {
emits(‘sendItActive’, page)
}
const sendOnChange = (event: number) => {
emits(‘sendOnChange’, event)
}

子組件=>Pagination.vue 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<template>
    <ul class="pagination">
        <li :disabled="currentPage === 1">
            <a @click="sendprevPage"><i class="icon-chevron-left-solid"></i></a>
        </li>
        <li v-for="(n, index ) in totalPages" :key="index" @click="sendItActive(n)"
            :class="{ 'active': n === currentPage }">
            <a> {{ n }}</a>
        </li>
        <li :disabled="currentPage === totalPages">
            <a @click="sendNextPage">
                <i class="icon-chevron-right-solid"></i>
            </a>
        </li>
        <li>共{{ totoItem }}筆</li>
        <li>
            <el-select 
            :model-value="pageValue"
            @update:model-value="$emit('update:pageValue', $event)"
             class="m-2" 
             placeholder="Select" 
             style="width: 240px"
                @change="sendOnChange($event)">
                <el-option v-for="item in pagePerOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </li>
    </ul>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { defineProps } from 'vue'
const props = defineProps({
    currentPage: { type: Number },
    totalPages: { type: Number },
    totoItem: { type: Number },
    pagePerOptions: Object,
    pageValue: { type: String },

})


const emits = defineEmits(['sendprevPage', 'sendNextPage', 'sendItActive', 'sendOnChange']);
const sendprevPage = () => {
    emits('sendprevPage',)
}
const sendNextPage = () => {
    emits('sendNextPage',)
}
const sendItActive = (page: number) => {
    emits('sendItActive', page)
}
const sendOnChange = (event: number) => {
    emits('sendOnChange', event)
}
</script>
github 分頁邏輯，分頁可選每頁頁數與搜尋功能，父子間的通訊 父子間的通訊

GitHub 說明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<style lang="scss" scoped>
.active {
    a {
        color: red;
        border-bottom:2px solid #3333;
    }
}
.pagination{
    display: flex;
    justify-content: center;
    list-style-type:none;
    > li {
        margin: auto 10px;
        list-style-type:none;
        a{
            background-color: #b0cbfb;
            border: 2px solid #3f51b5;
            border-radius: 9999rem;
            color:#3f51b5;
            display: block;
            height: 30px;
            line-height: 30px;
            text-align: center;
            width: 30px;
            &:hover{
                background-color: #3f51b5;
                border: 2px solid #3f51b5;
                color:#ffff;
            }
        }
        &.disabled{
            color:#ddd;
            cursor: not-allowed;
            a{
                background-color: #dddddd;
                border: 2px solid #b0cbfb;
                border-radius: 9999rem;
                color:#c9c2c2;
                display: block;
                height: 30px;
                line-height: 30px;
                text-align: center;
                width: 30px;
            }
        }
    }
}
</style>
Vue,Vue Cli,VueCli Event Bus

VueCli Event Bus

創建bus.js文件

新增utils資料夾，新增 bus.js
bus.js內容如下
引入Vue導出EventBus

1
2
import Vue from "vue";
export const EventBus = new Vue();

1.傳送:在發送組件的組件調用$emit發送數據的方法

import { EventBus } from “../utils/bus.js”
EventBus.$emit(‘定義一個名字’, 參數2：’要發送的數據’)

2.接收:數據的組件中調用$on方法監聽mounted

import { EventBus } from “../utils/bus.js”

// 接收數據
EventBus.$on(‘定義一個名字’, 參數2：’(value)=>{
// value是接收的數據
this.message=value;
}’)

3.銷毀監聽

beforeDestroy() {
// 銷毁監聽
EventBus.$off(“clickSendMsg”);
EventBus.$off(“clickToMsg”);
},

Vue,Vue Cli,VueCli build,VueCli 打包

VueCli 安裝 jquery

VueCli 安裝 jquery

執行指令

1
2
npm install jquery --save

在build/webpack.base.conf文件當中引入jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
        // 引入jquery
      'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery')
    }
  },
  ...
}

Vue,Vue Cli,VueCli Prop 父傳子

VueCli Prop

VueCli Prop 父傳子

新增Child.vue

父為Home.vue
1.引入Child.vue
註冊
2.components: {
Child
},
3.在template 下新增
4.子組件prop寫好後，到父組往下傳值 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//Home.vue
<template>
  <div class="home">
    <Child  :interest="interest" :lists="lists"/>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  name: 'Home',
  components: {
    Child
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      interest:'游泳',
      lists:[
        {id:'001',todo:'去旅行'},
        {id:'002',todo:'寫部落格'}
      ]
    }
  }
}
</script>

子組件 Child.vue

script新增
props : {
interest : {
type : String,
require : true
},
lists:{
type : Object,
require : true
}
}
template新增

1
2
3
4
5
6
<h2>興趣：{{ interest }}</h2>
<ul>
      <li v-for="item in lists" :key="item">
        {{item.todo}}
      </li>
</ul>

子組件完整組件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//Child.vue
<template>
  <div class="home">
    <h2>興趣：{{ interest }}</h2>
    <ul>
      <li v-for="item in lists" :key="item">
        {{item.todo}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  props : {
    interest : {
        type : String,
        require : true
    },
    lists:{
      type : Object,
      require : true
    }
  }
}
</script>

GitHub VueCli prop 父傳子

參考資料
VueCli（Vue2） prop 父傳子

Vue,Vue Cli,VueCli Unit Test

VueCli（Vue2） 單元測試

jest 官網
Jest 是一個由Facebook 開發的 test runner，它提供許多豐富的功能，例如：斷言、分析測試涵蓋率、 mock 功能與良好的錯誤提示訊息等。
Vue Test Utils

1
2
3
4
5
6
nvm use 14.17.0
//安裝vue/cli
npm install -g @vue/cli
//vue檢查版本號
vue --version
//@vue/cli 5.0.8

創建專案

1
2
3
4
5
6
7
8
9
10
11
12
13

vue create 專案名稱 -m npm

Vue CLI v5.0.8
? Please pick a preset: 
  te ([Vue 3] babel, router) 
  vue3 ([Vue 3] babel, eslint) 
  element-plus ([Vue 3] dart-sass, babel, router, vuex, unit-jest) 
  Default ([Vue 3] babel, eslint) 
❯ Default ([Vue 2] babel, eslint) 
  Manually select features 

Creating project in /Users/larahuang/vuecli_5.0.8_2.

如果您使用 Vue CLI 建立項目，則可以使用該插件運行 Jest 測試。
unit-jest

1
2
cd 專案名稱
vue add unit-jest
運行 
1
npm run test:unit