refector code
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
067ac5f173
commit
23d6801f80
9 changed files with 338 additions and 217 deletions
|
|
@ -1,39 +1,28 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
|
||||
import { useRouter } from 'vue-router'
|
||||
import http from '@/plugins/http'
|
||||
import config from '@/app.config'
|
||||
|
||||
/**
|
||||
* import Components
|
||||
*/
|
||||
import TableHistory from '@/components/TableHistory.vue'
|
||||
import ToolBar from '@/components/ToolBar.vue'
|
||||
|
||||
/**
|
||||
* importStores
|
||||
*/
|
||||
import { useChekIn } from '@/stores/chekin'
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const mixin = useCounterMixin()
|
||||
import TableHistory from '@/components/TableHistory.vue' //ตารางประวัติการลงเวลา
|
||||
import ToolBar from '@/components/ToolBar.vue' // เมนู Herder
|
||||
|
||||
const $q = useQuasar() //ใช้ noti quasar
|
||||
const router = useRouter()
|
||||
const stores = useChekIn()
|
||||
const { showLoader, hideLoader, messageError } = mixin
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin()
|
||||
const { fetchHistoryList } = stores
|
||||
const $q = useQuasar() //ใช้ noti quasar
|
||||
|
||||
// paging
|
||||
const page = ref<number>(1)
|
||||
const year = ref<number>(new Date().getFullYear())
|
||||
const month = ref<number>(new Date().getMonth())
|
||||
const pageSize = ref<number>(10)
|
||||
const total = ref<number>(0)
|
||||
const maxPage = ref<number>(1)
|
||||
const year = ref<number>(new Date().getFullYear()) // ปีงบปรมาณ
|
||||
const month = ref<number>(new Date().getMonth()) // เดือน
|
||||
const page = ref<number>(1) // หน้าปัจจุบัน
|
||||
const pageSize = ref<number>(10) // จำนวนแถวต่อหน้า
|
||||
const total = ref<number>(0) // จำนวนทั้งหมด
|
||||
const maxPage = ref<number>(1) // จำนวนวหน้าทั้งหมด
|
||||
const filter = ref<string>('') //search data table
|
||||
|
||||
/**
|
||||
|
|
@ -43,17 +32,22 @@ const filter = ref<string>('') //search data table
|
|||
*
|
||||
*/
|
||||
async function changePage(pageVal: number, pageSizeVal: number, key: string) {
|
||||
page.value = await pageVal
|
||||
pageSize.value = await pageSizeVal
|
||||
filter.value = await key
|
||||
functionFetch()
|
||||
page.value = pageVal
|
||||
pageSize.value = pageSizeVal
|
||||
filter.value = key
|
||||
await functionFetch()
|
||||
}
|
||||
|
||||
function functionFetch() {
|
||||
stores.tab === 'history' ? fetchlistHistory() : fetchlistTime()
|
||||
/**
|
||||
* ฟังก์ชันสำหรับดึงข้อมูลตามประเภทแท็บที่เลือก
|
||||
*/
|
||||
async function functionFetch() {
|
||||
stores.tab === 'history' ? await fetchlistHistory() : await fetchlistTime()
|
||||
}
|
||||
|
||||
/*** ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลาจาก api มาแสดง */
|
||||
/***
|
||||
* ฟังก์ชั่นดึงข้อมูลรายการประวัติการลงเวลา
|
||||
*/
|
||||
async function fetchlistHistory() {
|
||||
showLoader()
|
||||
await http
|
||||
|
|
@ -64,10 +58,14 @@ async function fetchlistHistory() {
|
|||
}&keyword=${filter.value ? filter.value : ''}`
|
||||
)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result.data
|
||||
total.value = res.data.result.total
|
||||
maxPage.value = await Math.ceil(total.value / pageSize.value)
|
||||
fetchHistoryList(data) // ปิดกรณีมี total
|
||||
// ดึงข้อมูลและจำนวนทั้งหมด
|
||||
const data = await res.data.result.data
|
||||
total.value = await res.data.result.total
|
||||
|
||||
// คำนวณจำนวนหน้า
|
||||
maxPage.value = Math.ceil(total.value / pageSize.value)
|
||||
|
||||
await fetchHistoryList(data)
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err)
|
||||
|
|
@ -77,7 +75,9 @@ async function fetchlistHistory() {
|
|||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นดึงรายการลงเวลากรณีพิเศษ */
|
||||
/**
|
||||
* ฟังก์ชั่นดึงรายการลงเวลากรณีพิเศษ
|
||||
*/
|
||||
async function fetchlistTime() {
|
||||
showLoader()
|
||||
await http
|
||||
|
|
@ -90,10 +90,14 @@ async function fetchlistTime() {
|
|||
}`
|
||||
)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result.data
|
||||
total.value = res.data.result.total
|
||||
maxPage.value = await Math.ceil(total.value / pageSize.value)
|
||||
fetchHistoryList(data) // ปิดกรณีมี total
|
||||
// ดึงข้อมูลและจำนวนทั้งหมด
|
||||
const data = await res.data.result.data
|
||||
total.value = await res.data.result.total
|
||||
|
||||
// คำนวณจำนวนหน้า
|
||||
maxPage.value = Math.ceil(total.value / pageSize.value)
|
||||
|
||||
await fetchHistoryList(data)
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err)
|
||||
|
|
@ -104,21 +108,22 @@ async function fetchlistTime() {
|
|||
}
|
||||
|
||||
/**
|
||||
* function updateYear
|
||||
* @param y ปีที่อัปเดท
|
||||
* ฟังก์ชันสำหรับอัปเดตปีและเดือน
|
||||
* @param y ปีที่ต้องการอัปเดต
|
||||
* @param m เดือนที่ต้องการอัปเดต
|
||||
*/
|
||||
async function updateYear(y: number, m: number) {
|
||||
year.value = y
|
||||
month.value = m
|
||||
stores.year = y
|
||||
functionFetch()
|
||||
await functionFetch() // เรียกใช้งานฟังก์ชัน functionFetch เพื่อดึงข้อมูลใหม่
|
||||
}
|
||||
|
||||
/** Hook*/
|
||||
onMounted(async () => {
|
||||
await functionFetch()
|
||||
})
|
||||
|
||||
/**
|
||||
* ดูการเปลี่ยนแปลงใน stores.tab เมื่อ stores.tab เปลี่ยนไป
|
||||
* จะรีเซ็ตค่า page , filter เป็นสถานะเริ่มต้น
|
||||
* แล้วเรียก functionFetch เพื่อดึงประวัติการลงเวลาใหม่
|
||||
*/
|
||||
watch(
|
||||
() => stores.tab,
|
||||
() => {
|
||||
|
|
@ -127,6 +132,12 @@ watch(
|
|||
functionFetch()
|
||||
}
|
||||
)
|
||||
/**
|
||||
* Hook
|
||||
*/
|
||||
onMounted(() => {
|
||||
functionFetch()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -168,12 +179,12 @@ watch(
|
|||
<q-tab-panels v-model="stores.tab" animated>
|
||||
<q-tab-panel name="history">
|
||||
<ToolBar
|
||||
:fetchData="functionFetch"
|
||||
:fetch-data="functionFetch"
|
||||
@update:year="updateYear"
|
||||
:tab="stores.tab"
|
||||
/>
|
||||
<TableHistory
|
||||
:fetchData="functionFetch"
|
||||
:fetch-data="functionFetch"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
:page="page"
|
||||
|
|
@ -186,7 +197,7 @@ watch(
|
|||
|
||||
<q-tab-panel name="time">
|
||||
<ToolBar
|
||||
:fetchData="functionFetch"
|
||||
:fetch-data="functionFetch"
|
||||
@update:year="updateYear"
|
||||
:tab="stores.tab"
|
||||
/>
|
||||
|
|
@ -202,16 +213,6 @@ watch(
|
|||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
<!-- </q-card> -->
|
||||
<!-- <Table
|
||||
:fetchData="fetchlistHistory"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
:page="page"
|
||||
:paging="true"
|
||||
@update:change-page="changePage"
|
||||
:max-page="maxPage"
|
||||
/> -->
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,26 +3,31 @@ import { ref, reactive, onMounted } from 'vue'
|
|||
import { useQuasar } from 'quasar'
|
||||
import moment from 'moment'
|
||||
import Camera from 'simple-vue-camera'
|
||||
import http from '@/plugins/http'
|
||||
|
||||
import config from '@/app.config'
|
||||
import type { FormRef } from '@/interface/response/checkin'
|
||||
import MapCheck from '@/components/AscGISMap.vue'
|
||||
import http from '@/plugins/http'
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
|
||||
import type { FormRef } from '@/interface/response/checkin'
|
||||
|
||||
import MapCheck from '@/components/AscGISMap.vue'
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, showLoader, hideLoader, messageError } = mixin
|
||||
const $q = useQuasar()
|
||||
|
||||
const dialogTime = ref<boolean>(false)
|
||||
const stetusCheckin = ref<boolean>(true)
|
||||
const modalTime = ref<boolean>(false) // Dailog ลงเวลาเข้างานของคุณ
|
||||
const stetusCheckin = ref<boolean>(true) // สถานะเวลา เข้า,ออก
|
||||
|
||||
/** function เช็คเวลาต้องลงเวลาเข้าหรือออกงาน */
|
||||
/**
|
||||
* fetch เช็คเวลาต้องลงเวลาเข้าหรือออกงาน
|
||||
*/
|
||||
async function fetchCheckTime() {
|
||||
showLoader()
|
||||
await http
|
||||
.get(config.API.checkTime())
|
||||
.then((res) => {
|
||||
const data = res.data.result
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result
|
||||
stetusCheckin.value = data.checkInId ? false : true
|
||||
checkInId.value = data.checkInId ? data.checkInId : ''
|
||||
})
|
||||
|
|
@ -40,7 +45,10 @@ const Thai = ref<Date>(dateNow.value)
|
|||
const formattedS = ref()
|
||||
const formattedM = ref()
|
||||
const formattedH = ref()
|
||||
/** function อัพเดทเวลา*/
|
||||
|
||||
/**
|
||||
* function อัพเดทเวลา
|
||||
*/
|
||||
function updateClock() {
|
||||
const date = Date.now()
|
||||
const hh = moment(date).format('HH')
|
||||
|
|
@ -69,16 +77,19 @@ const checkInId = ref<string>('') //Id ลงเวลา check-in ล่าส
|
|||
* @param location พิกัดละติจูด พิกัดลองติจูด
|
||||
* @param namePOI ชื่อสถานที่ ได้มาจากระบบ ArcGis ของกองสารสนเทศภูมิศาสตร์
|
||||
*/
|
||||
async function updateLocation(latitude: any, longitude: any, namePOI: string) {
|
||||
async function updateLocation(
|
||||
latitude: number,
|
||||
longitude: number,
|
||||
namePOI: string
|
||||
) {
|
||||
formLocation.lat = latitude
|
||||
formLocation.lng = longitude
|
||||
formLocation.POI = namePOI
|
||||
}
|
||||
|
||||
//location
|
||||
const location = ref<string>('')
|
||||
// const coordinates = ref<string>('')
|
||||
const model = ref<string>('')
|
||||
const location = ref<string>('') // พื้นที่ใกล้เคียง
|
||||
const model = ref<string>('') // สถานที่ทำงาน
|
||||
// ตัวเลือกสถานที่ทำงาน
|
||||
const options = ref<string[]>([
|
||||
'ปฏิบัติงานที่บ้าน',
|
||||
'ลืมลงเวลาปฏิบัติงาน',
|
||||
|
|
@ -87,7 +98,9 @@ const options = ref<string[]>([
|
|||
'อื่นๆ',
|
||||
])
|
||||
|
||||
/** function เลือกสถานที่*/
|
||||
/**
|
||||
* function เลือกสถานที่
|
||||
*/
|
||||
function selectLocation() {
|
||||
if (model.value === 'อื่นๆ') {
|
||||
useLocation.value = ''
|
||||
|
|
@ -103,7 +116,9 @@ const img = ref<any>(undefined)
|
|||
const photoWidth = ref<number>(350)
|
||||
const photoHeight = ref<number>(350)
|
||||
|
||||
/** function เปิดกล้อง */
|
||||
/**
|
||||
* function เปิดกล้อง
|
||||
*/
|
||||
async function openCamera() {
|
||||
// change camera device
|
||||
if (cameraIsOn.value) {
|
||||
|
|
@ -115,14 +130,18 @@ async function openCamera() {
|
|||
cameraIsOn.value = !cameraIsOn.value
|
||||
}
|
||||
|
||||
/** change camera device */
|
||||
/**
|
||||
* change camera device
|
||||
*/
|
||||
async function changeCamera() {
|
||||
const devices: any = await camera.value?.devices(['videoinput'])
|
||||
const device = await devices[0]
|
||||
camera.value?.changeCamera(device.deviceId)
|
||||
}
|
||||
|
||||
/** function ถ่ายรูป*/
|
||||
/**
|
||||
* function ถ่ายรูป
|
||||
*/
|
||||
async function capturePhoto() {
|
||||
const imageBlob: any = await camera.value?.snapshot(
|
||||
{ width: photoWidth.value, height: photoHeight.value },
|
||||
|
|
@ -139,7 +158,9 @@ async function capturePhoto() {
|
|||
img.value = url
|
||||
}
|
||||
|
||||
/** function เปลี่ยนรูปภาพ*/
|
||||
/**
|
||||
* function เปลี่ยนรูปภาพ
|
||||
*/
|
||||
function refreshPhoto() {
|
||||
img.value = undefined
|
||||
camera.value?.start()
|
||||
|
|
@ -153,7 +174,9 @@ const objectRef: FormRef = {
|
|||
useLocation: useLocationRef,
|
||||
}
|
||||
|
||||
/** function ตรวจสอบค่าว่างของ input*/
|
||||
/**
|
||||
* function ตรวจสอบค่าว่างของ input
|
||||
*/
|
||||
function validateForm() {
|
||||
const hasError = []
|
||||
for (const key in objectRef) {
|
||||
|
|
@ -170,8 +193,11 @@ function validateForm() {
|
|||
}
|
||||
}
|
||||
|
||||
const timeChickin = ref<string>()
|
||||
/** function ยืนยันการลงเวลาเข้า - ออก*/
|
||||
const timeChickin = ref<string>('') //เวลาเข้างาน,เวลาออกงาน
|
||||
|
||||
/**
|
||||
* function ยืนยันการลงเวลาเข้า - ออก
|
||||
*/
|
||||
async function confirm() {
|
||||
showLoader()
|
||||
const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง
|
||||
|
|
@ -188,7 +214,7 @@ async function confirm() {
|
|||
await http
|
||||
.post(config.API.checkin(), formdata)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result
|
||||
const data = await res.data.result
|
||||
const dateObject = new Date(data.date)
|
||||
const options: Intl.DateTimeFormatOptions = {
|
||||
hour12: false,
|
||||
|
|
@ -199,8 +225,7 @@ async function confirm() {
|
|||
dateObject
|
||||
)
|
||||
timeChickin.value = timeString
|
||||
dialogTime.value = true
|
||||
// await fetchCheckTime()
|
||||
modalTime.value = true
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err)
|
||||
|
|
@ -210,19 +235,28 @@ async function confirm() {
|
|||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ปิด popup แสดงการลงเวลา
|
||||
*/
|
||||
async function onClickConfirm() {
|
||||
await fetchCheckTime()
|
||||
cameraIsOn.value = false
|
||||
img.value = undefined
|
||||
dialogTime.value = false
|
||||
modalTime.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* เลือกสถานที่ทำงาน
|
||||
*/
|
||||
function updateWorkplace() {
|
||||
useLocation.value = ''
|
||||
model.value = ''
|
||||
}
|
||||
|
||||
// class
|
||||
/**
|
||||
* รี้เทินร์ class สีพื้นหลัง
|
||||
* @param val ค่า stetusCheckin
|
||||
*/
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
'bg-primary text-white col-12 row items-center q-px-md q-py-sm': val,
|
||||
|
|
@ -230,7 +264,6 @@ const getClass = (val: boolean) => {
|
|||
}
|
||||
}
|
||||
|
||||
const fullName = ref<string>('')
|
||||
/** Hook*/
|
||||
onMounted(async () => {
|
||||
await fetchCheckTime()
|
||||
|
|
@ -426,6 +459,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 text-right">
|
||||
<q-separator />
|
||||
<div class="col-12 q-pa-md">
|
||||
|
|
@ -456,7 +490,8 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<q-dialog v-model="dialogTime" persistent>
|
||||
<!-- แสดงการลงเวลา -->
|
||||
<q-dialog v-model="modalTime" persistent>
|
||||
<q-card class="full-width cardNone">
|
||||
<div :class="getClass(stetusCheckin)">
|
||||
<div class="text-body1 text-center col-12 text-weight-bold">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue