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
|
|
@ -2,17 +2,18 @@
|
|||
import { onMounted, ref } from 'vue'
|
||||
import { loadModules } from 'esri-loader'
|
||||
import axios from 'axios'
|
||||
|
||||
import type { LocationObject } from '@/interface/index/Main'
|
||||
|
||||
const emit = defineEmits(['update:location'])
|
||||
|
||||
function updateLocation(latitude: any, longitude: any, namePOI: string) {
|
||||
function updateLocation(latitude: number, longitude: number, namePOI: string) {
|
||||
// ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
|
||||
emit('update:location', latitude, longitude, namePOI)
|
||||
}
|
||||
|
||||
const currentPosition = ref<LocationObject>()
|
||||
const poiPlaceName = ref<string>('')
|
||||
const currentPosition = ref<LocationObject>() //ตำแหน่งปัจจุบัน
|
||||
const poiPlaceName = ref<string>('') // ชื่อพื้นที่ใกล้เคียง
|
||||
|
||||
// Replace ArcGIS api key
|
||||
const apiKey = ref<string>(
|
||||
|
|
@ -123,7 +124,7 @@ async function initializeMap() {
|
|||
}
|
||||
|
||||
onMounted(async () => {
|
||||
initializeMap()
|
||||
await initializeMap()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,32 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import { PropType } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
import moment from 'moment'
|
||||
|
||||
import http from '@/plugins/http'
|
||||
import config from '@/app.config'
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
|
||||
import type { FormRef } from '@/interface/index/Main'
|
||||
import type { FormRef, DataCheckIn } from '@/interface/index/Main'
|
||||
import type { FormTimeStemp } from '@/interface/response/checkin'
|
||||
|
||||
// importStores
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
// importType
|
||||
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, success, dialogConfirm, showLoader, hideLoader } = mixin
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
} = useCounterMixin()
|
||||
|
||||
/**
|
||||
* props จาก components Popup
|
||||
*/
|
||||
const props = defineProps({
|
||||
dataById: {
|
||||
type: Object,
|
||||
type: Object as PropType<DataCheckIn>,
|
||||
default: null,
|
||||
},
|
||||
closePopup: {
|
||||
|
|
@ -34,16 +42,25 @@ const props = defineProps({
|
|||
},
|
||||
})
|
||||
|
||||
const dataByIdVal = ref<any>([])
|
||||
const date = ref<Date | string>(new Date())
|
||||
const checkboxIn = ref<boolean>(false)
|
||||
const checkboxOut = ref<boolean>(false)
|
||||
const reason = ref<string>('')
|
||||
const statusAction = ref<boolean>(false)
|
||||
|
||||
const dateNow = ref<Date>(new Date())
|
||||
const timeNoew = ref<string>('')
|
||||
const dataByIdVal = ref<DataCheckIn>() //ข้อมูลประวัติการลงเวลา
|
||||
const date = ref<Date | string>(new Date()) //วันที่ข้อแก้ไข
|
||||
const checkboxIn = ref<boolean>(false) //ขอแก้ไขเวลาเข้างาน
|
||||
const checkboxOut = ref<boolean>(false) //ขอแก้ไขเวลาออกงาน
|
||||
const reason = ref<string>('') // เหตุผล
|
||||
const statusAction = ref<boolean>(false) //สถานะ เพิ่ม,แก้ไข
|
||||
const dateNow = ref<Date>(new Date()) // วันปัจจุบัน
|
||||
const timeNoew = ref<string>('') //เวลาปัจจุบัน
|
||||
const dateRef = ref<object | null>(null) //ref วันที่ข้อแก้ไข
|
||||
const reasonRef = ref<object | null>(null) //ref เหตุผล
|
||||
const objectRef: FormRef = {
|
||||
date: dateRef,
|
||||
reason: reasonRef,
|
||||
}
|
||||
const checkstatusBox = ref<boolean>(false) //สถานะการเลือกเวลาเข้า,ออก
|
||||
|
||||
/**
|
||||
* ฟังก์ชันอัปเดตเวลา
|
||||
*/
|
||||
function updateClock() {
|
||||
const date = Date.now()
|
||||
const hh = moment(date).format('HH')
|
||||
|
|
@ -51,16 +68,9 @@ function updateClock() {
|
|||
timeNoew.value = `${hh}:${mm} น.`
|
||||
}
|
||||
|
||||
const dateRef = ref<object | null>(null)
|
||||
const reasonRef = ref<object | null>(null)
|
||||
|
||||
const objectRef: FormRef = {
|
||||
date: dateRef,
|
||||
reason: reasonRef,
|
||||
}
|
||||
const checkstatusBox = ref<boolean>(false)
|
||||
|
||||
/** function checkValidate*/
|
||||
/**
|
||||
* function checkValidate
|
||||
*/
|
||||
function onCkickSave() {
|
||||
const hasError = []
|
||||
for (const key in objectRef) {
|
||||
|
|
@ -81,12 +91,13 @@ function onCkickSave() {
|
|||
)
|
||||
) {
|
||||
dialogConfirm($q, async () => {
|
||||
const data: FormTimeStemp = await {
|
||||
const data: FormTimeStemp = {
|
||||
checkDate: date.value,
|
||||
checkInEdit: checkboxIn.value,
|
||||
checkOutEdit: checkboxOut.value,
|
||||
description: reason.value,
|
||||
}
|
||||
|
||||
createListTime(data)
|
||||
})
|
||||
}
|
||||
|
|
@ -100,20 +111,37 @@ async function createListTime(data: FormTimeStemp) {
|
|||
showLoader()
|
||||
await http
|
||||
.post(config.API.createTimeStamp(), data)
|
||||
.then(() => {
|
||||
success($q, 'บันทึกข้อมูลสำเร็จ')
|
||||
.then(async () => {
|
||||
// เรียก function fetch รายการประวัติการลงเวลา
|
||||
await props.fetchData()
|
||||
await success($q, 'บันทึกข้อมูลสำเร็จ')
|
||||
props.closePopup?.()
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
messageError($q, err)
|
||||
})
|
||||
.finally(() => {
|
||||
props.closePopup?.()
|
||||
hideLoader()
|
||||
props.fetchData()
|
||||
})
|
||||
}
|
||||
|
||||
/** Hook */
|
||||
/**
|
||||
* watch การเปลี่ยนแปลงของ checkboxIn และ checkboxOut
|
||||
*/
|
||||
watch(
|
||||
[() => checkboxIn.value, () => checkboxOut.value],
|
||||
([newCheckboxIn, newCheckboxOut]) => {
|
||||
if (checkstatusBox.value) {
|
||||
if (newCheckboxIn || newCheckboxOut) {
|
||||
checkstatusBox.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* Hook
|
||||
*/
|
||||
onMounted(() => {
|
||||
updateClock()
|
||||
dataByIdVal.value = props.dataById
|
||||
|
|
@ -126,17 +154,6 @@ onMounted(() => {
|
|||
)
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
[() => checkboxIn.value, () => checkboxOut.value],
|
||||
([newCheckboxIn, newCheckboxOut]) => {
|
||||
if (checkstatusBox.value) {
|
||||
if (newCheckboxIn || newCheckboxOut) {
|
||||
checkstatusBox.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row">
|
||||
|
|
@ -149,7 +166,7 @@ watch(
|
|||
<q-card-section class="bg-primary text-white q-pa-sm">
|
||||
<div class="text-center text-bold">เวลาปัจจุบัน</div>
|
||||
</q-card-section>
|
||||
<!-- <div class="q-pa-sm text-primary">เวลาปัจจุบัน</div> -->
|
||||
|
||||
<q-card-section class="text-center q-pa-sm">
|
||||
<div class="row q-gutter-md">
|
||||
<div class="col">{{ date2Thai(dateNow) }}</div>
|
||||
|
|
@ -187,7 +204,7 @@ watch(
|
|||
:label="`${'วันที่ขอแก้ไข'}`"
|
||||
format-header="YYYY-MM-DD"
|
||||
lazy-rules
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
|
||||
:rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
|
|
@ -203,15 +220,6 @@ watch(
|
|||
</div>
|
||||
</q-card>
|
||||
|
||||
<!-- <q-card flat bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm" v-else>
|
||||
<div class="row q-gutter-md text-grey-5">
|
||||
<div class="col-1">
|
||||
<q-icon color="grey-5" name="calendar_today" />
|
||||
</div>
|
||||
<div class="col">{{ dataByIdVal.checkInDate }}</div>
|
||||
</div>
|
||||
</q-card> -->
|
||||
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
|
|
@ -259,7 +267,7 @@ watch(
|
|||
type="textarea"
|
||||
:rows="4"
|
||||
label-color="grey-5"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
|
||||
:rules="[(val:string) => !!val || 'กรุณากรอกเหตุผล']"
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
class="custom-aqua-border"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { PropType } from 'vue'
|
||||
|
||||
import HeaderPopup from '@/components/HeaderPopup.vue'
|
||||
import FormTime from '@/components/FormTime.vue'
|
||||
import type { DataCheckIn } from '@/interface/index/Main'
|
||||
|
||||
import HeaderPopup from '@/components/HeaderPopup.vue' // หัว popup
|
||||
import FormTime from '@/components/FormTime.vue' //
|
||||
|
||||
/**
|
||||
* props จาก components TableHistory
|
||||
*/
|
||||
const props = defineProps({
|
||||
modal: {
|
||||
type: Boolean,
|
||||
|
|
@ -18,7 +24,7 @@ const props = defineProps({
|
|||
default: null,
|
||||
},
|
||||
dataById: {
|
||||
type: Object,
|
||||
type: Object as PropType<DataCheckIn>,
|
||||
default: null,
|
||||
},
|
||||
fetchData: {
|
||||
|
|
@ -27,15 +33,25 @@ const props = defineProps({
|
|||
},
|
||||
})
|
||||
|
||||
const data = ref<any>()
|
||||
const data = ref<DataCheckIn>() // ข้อมูลลงเวลา
|
||||
|
||||
/**
|
||||
* ปิด popup
|
||||
* เรียกใช้ฟังก์ชัน props.clickClose()
|
||||
*/
|
||||
function clickClosePopup() {
|
||||
props.clickClose()
|
||||
}
|
||||
|
||||
/**
|
||||
* watch การเปลี่ยนแปลงของ props.modal
|
||||
*/
|
||||
watch(
|
||||
() => props.modal,
|
||||
() => {
|
||||
data.value = props.modal ? props.dataById : null
|
||||
if (props.modal) {
|
||||
data.value = props?.dataById
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
|
@ -43,10 +59,11 @@ watch(
|
|||
<q-dialog v-model="props.modal" persistent>
|
||||
<q-card :style="$q.screen.lt.sm ? 'width: 100%;' : 'width: 320px;'">
|
||||
<HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
|
||||
|
||||
<FormTime
|
||||
:dataById="data"
|
||||
:closePopup="clickClosePopup"
|
||||
:fetchData="props.fetchData"
|
||||
:data-byId="data"
|
||||
:close-popup="clickClosePopup"
|
||||
:fetch-data="props.fetchData"
|
||||
/>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import type { QTableProps } from 'quasar'
|
||||
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
|
||||
import { useChekIn } from '@/stores/chekin'
|
||||
import Popup from '@/components/PopUp.vue' // dialog เพิ่ม/ขอแก้ไขลงเวลากรณีพิเศษ
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai } = mixin
|
||||
import type { QTableProps } from 'quasar'
|
||||
import type { Pagination, DataCheckIn } from '@/interface/index/Main'
|
||||
|
||||
import Popup from '@/components/PopUp.vue' // dialog เพิ่ม/ขอแก้ไขลงเวลากรณีพิเศษ
|
||||
const { date2Thai } = useCounterMixin()
|
||||
|
||||
const stores = useChekIn()
|
||||
const selected = ref<string[]>([])
|
||||
|
||||
/** props from page */
|
||||
/**
|
||||
* props ข้อมูลจาก Components Page HistoryView
|
||||
*/
|
||||
const props = defineProps({
|
||||
paging: {
|
||||
type: Boolean,
|
||||
|
|
@ -48,13 +50,13 @@ const props = defineProps({
|
|||
default: () => console.log('not function'),
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:change-page'])
|
||||
|
||||
const keyword = ref<string>('')
|
||||
const tab = ref<string>(props.tab?.toString())
|
||||
const selected = ref<string[]>([])
|
||||
|
||||
const emit = defineEmits(['update:change-page'])
|
||||
|
||||
/** column history table */
|
||||
// column history table
|
||||
const columns = ref<QTableProps['columns']>(
|
||||
props.tab == 'history'
|
||||
? [
|
||||
|
|
@ -181,35 +183,23 @@ const visibleColumns = ref<string[]>([
|
|||
'checkOutStatus',
|
||||
])
|
||||
|
||||
const currentPage = ref<number>(1) //หน้าปัจจุบัน
|
||||
// Pagination - initial pagination
|
||||
const initialPagination = ref({
|
||||
const initialPagination = ref<Pagination>({
|
||||
sortBy: null,
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: props.pageSize, // set ตาม page หลักส่งมา
|
||||
})
|
||||
|
||||
// Pagination - page & change page & get new data
|
||||
const currentPage = ref<number>(1)
|
||||
watch(
|
||||
[() => currentPage.value, () => initialPagination.value.rowsPerPage],
|
||||
() => {
|
||||
emit(
|
||||
'update:change-page',
|
||||
currentPage.value,
|
||||
initialPagination.value.rowsPerPage,
|
||||
keyword.value
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
// Pagination - update rowsPerPage
|
||||
async function updatePagination(newPagination: any) {
|
||||
async function updatePagination(newPagination: Pagination) {
|
||||
initialPagination.value = newPagination
|
||||
currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
|
||||
}
|
||||
|
||||
async function filterFn() {
|
||||
// ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
|
||||
emit(
|
||||
'update:change-page',
|
||||
1,
|
||||
|
|
@ -217,24 +207,34 @@ async function filterFn() {
|
|||
keyword.value
|
||||
)
|
||||
}
|
||||
const modalPopup = ref<boolean>(false) // popup แก้ไขลงเวลา
|
||||
const titlePopup = ref<string>('') // หัวขข้อ popup แก้ไขลงเวลา
|
||||
const dataRow = ref<DataCheckIn>() // ข้อมูลการลงเวลา
|
||||
|
||||
// popup
|
||||
const modalPopup = ref<boolean>(false)
|
||||
const titlePopup = ref<string>('')
|
||||
const dataRow = ref<any>()
|
||||
function openPopup(data: any) {
|
||||
console.log(data)
|
||||
|
||||
/**
|
||||
* เปิด popup แก้ไขลงเวลา
|
||||
* กำหนดค่า titlePopup เป็น แก้ไขลงเวลา
|
||||
* @param data ข้อมูลการลงเวลา
|
||||
*/
|
||||
function openPopup(data: DataCheckIn) {
|
||||
const title = 'แก้ไขลงเวลา'
|
||||
modalPopup.value = true
|
||||
titlePopup.value = title
|
||||
dataRow.value = data
|
||||
}
|
||||
|
||||
/**
|
||||
* ปิด popup แก้ไขลงเวลา
|
||||
*/
|
||||
function closePopup() {
|
||||
modalPopup.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นสำหรับ convert ข้อความสถานะของการลงเวลา ปกติ, ขาดราชการ หรือสาย
|
||||
* @param status ฟิลด์สถานะ
|
||||
* @returns ข้อความสถานะ ปกติ, ขาดราชการ ,สาย หรือปฏิบัติงานไม่ครบตามกำหนดเวลา
|
||||
*/
|
||||
function classStatus(status: string) {
|
||||
switch (status) {
|
||||
case 'ขาดราชการ':
|
||||
|
|
@ -250,14 +250,35 @@ function classStatus(status: string) {
|
|||
}
|
||||
}
|
||||
|
||||
const modalReject = ref<boolean>(false)
|
||||
const reasonRejrct = ref<string>('')
|
||||
function onClickOpenPopupRejrct(data: any) {
|
||||
const modalReject = ref<boolean>(false) // modal popup หมายเหตุการไม่อนุมัติ
|
||||
const reasonRejrct = ref<string>('') // หมายเหตุการไม่อนุมัติ
|
||||
|
||||
/**
|
||||
* เปิด popup หมายเหตุการไม่อนุมัติ
|
||||
* @param data ข้อมูลการลงเวลา
|
||||
*/
|
||||
function onClickOpenPopupRejrct(data: DataCheckIn) {
|
||||
if (data.editStatus === 'ไม่อนุมัติ') {
|
||||
reasonRejrct.value = data.editReason
|
||||
modalReject.value = true
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* watch currentPage และ rowsPerPage
|
||||
*/
|
||||
watch(
|
||||
[() => currentPage.value, () => initialPagination.value.rowsPerPage],
|
||||
() => {
|
||||
// ส่งอีเวนต์ 'update:change-page' เมื่อหน้าเปลี่ยนแปลง
|
||||
emit(
|
||||
'update:change-page',
|
||||
currentPage.value,
|
||||
initialPagination.value.rowsPerPage,
|
||||
keyword.value
|
||||
)
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -295,6 +316,7 @@ function onClickOpenPopupRejrct(data: any) {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
|
|
@ -442,6 +464,7 @@ function onClickOpenPopupRejrct(data: any) {
|
|||
</template>
|
||||
</q-table>
|
||||
|
||||
<!-- หมายเหตุการไม่อนุมัติ -->
|
||||
<q-dialog v-model="modalReject">
|
||||
<q-card style="width: 35vw; max-width: 35vw">
|
||||
<q-toolbar>
|
||||
|
|
@ -466,12 +489,13 @@ function onClickOpenPopupRejrct(data: any) {
|
|||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- แก้ไขลงเวลา -->
|
||||
<Popup
|
||||
:fetchData="props.fetchData"
|
||||
:fetch-data="props.fetchData"
|
||||
:modal="modalPopup"
|
||||
:clickClose="closePopup"
|
||||
:click-close="closePopup"
|
||||
:title="titlePopup"
|
||||
:dataById="dataRow"
|
||||
:data-ById="dataRow"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
import { useChekIn } from '@/stores/chekin'
|
||||
|
||||
import type { DataDateMonthObject } from '@/interface/index/Main'
|
||||
|
||||
import Popup from '@/components/PopUp.vue'
|
||||
// import HeaderPopup from "@/components/HeaderPopup.vue";
|
||||
// import FormTime from "@/components/FormTime.vue";
|
||||
import { useCounterMixin } from '@/stores/mixin'
|
||||
import { useChekIn } from '@/stores/chekin'
|
||||
|
||||
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
|
||||
const stores = useChekIn()
|
||||
const { monthYear2Thai } = mixin
|
||||
const { monthYear2Thai } = useCounterMixin()
|
||||
|
||||
/**
|
||||
* props จาก components HistoryView
|
||||
*/
|
||||
const props = defineProps({
|
||||
fetchData: {
|
||||
type: Function,
|
||||
|
|
@ -25,37 +26,57 @@ const props = defineProps({
|
|||
})
|
||||
const emit = defineEmits(['update:year'])
|
||||
|
||||
const filterYear = ref<number>(stores.year)
|
||||
const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ')
|
||||
const filterYear = ref<number>(stores.year) //ปีงบประมาณ
|
||||
const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ') //หัว popup
|
||||
const dateMonth = ref<DataDateMonthObject>({
|
||||
month: new Date().getMonth(),
|
||||
year: stores.year,
|
||||
})
|
||||
const modalPopup = ref<boolean>(false) // modal เพิ่มรายการลงเวลากรณีพิเศษ
|
||||
|
||||
watch(
|
||||
() => stores.year,
|
||||
() => {
|
||||
dateMonth.value.year = stores.year
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* ฟังก์ชันอัปเดทปีงบประมาณ
|
||||
* @param type ประเภท year,mount
|
||||
*/
|
||||
function filterYearFn(type: string) {
|
||||
const year = type === 'year' ? filterYear.value : dateMonth.value.year
|
||||
//ส่งค่า ปีงบประมาณ กลับ
|
||||
emit('update:year', year, dateMonth.value.month)
|
||||
}
|
||||
|
||||
const modalPopup = ref<boolean>(false)
|
||||
/**
|
||||
* เปิด popup เพิ่มรายการลงเวลากรณีพิเศษ
|
||||
*/
|
||||
function onClickopen() {
|
||||
modalPopup.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* ปิด popup เพิ่มรายการลงเวลากรณีพิเศษ
|
||||
*/
|
||||
function onClickClose() {
|
||||
modalPopup.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* แปลงวันเดือนปีเป็นเดือนและปีในภาษาไทย
|
||||
* @param val วันเดือนปี
|
||||
* @returns เดือนและปีในภาษาไทย
|
||||
*/
|
||||
const monthYearThai = (val: DataDateMonthObject) => {
|
||||
if (val == null) return ''
|
||||
else return monthYear2Thai(val.month, val.year)
|
||||
}
|
||||
|
||||
/**
|
||||
* watch การเปลี่ยนแปลงของ stores.year
|
||||
*/
|
||||
watch(
|
||||
() => stores.year,
|
||||
(newYear) => {
|
||||
dateMonth.value.year = newYear
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="items-center col-12 row q-pb-sm">
|
||||
|
|
|
|||
|
|
@ -26,10 +26,24 @@ interface LocationObject {
|
|||
}
|
||||
|
||||
interface Pagination {
|
||||
sortBy: string
|
||||
sortBy: string | null
|
||||
descending: boolean
|
||||
page: number
|
||||
rowsPerPage: number
|
||||
rowsPerPage: number | undefined
|
||||
}
|
||||
interface DataCheckIn {
|
||||
checkInDate: string
|
||||
checkInDateTime: string
|
||||
checkInId: string
|
||||
checkInLocation: string
|
||||
checkInStatus: string
|
||||
checkInTime: string
|
||||
checkOutLocation: string
|
||||
checkOutStatus: string
|
||||
checkOutTime: string
|
||||
editReason: string
|
||||
editStatus: string
|
||||
isEdit: boolean
|
||||
}
|
||||
|
||||
export type {
|
||||
|
|
@ -39,4 +53,5 @@ export type {
|
|||
DataDateMonthObject,
|
||||
LocationObject,
|
||||
Pagination,
|
||||
DataCheckIn,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,8 +18,7 @@ export const useChekIn = defineStore('checkin', () => {
|
|||
*/
|
||||
async function fetchHistoryList(data: FormData[]) {
|
||||
rows.value = []
|
||||
|
||||
const dataList: Datalist[] = await data.map((e: FormData) => ({
|
||||
const dataList: Datalist[] = data.map((e: FormData) => ({
|
||||
checkInId: e.checkInId,
|
||||
checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : null,
|
||||
checkInDateTime: e.checkInDate ? e.checkInDate : e.checkOutDate,
|
||||
|
|
|
|||
|
|
@ -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