349 lines
10 KiB
Vue
349 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch, onMounted, reactive } 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, DataCheckIn } from '@/interface/index/Main'
|
|
import type { FormTimeStemp } from '@/interface/response/checkin'
|
|
|
|
import MapCheck from '@/components/AscGISMapTime.vue'
|
|
|
|
const $q = useQuasar()
|
|
const {
|
|
date2Thai,
|
|
success,
|
|
dialogConfirm,
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
convertDateToAPI,
|
|
} = useCounterMixin()
|
|
|
|
/**
|
|
* props จาก components Popup
|
|
*/
|
|
const props = defineProps({
|
|
dataById: {
|
|
type: Object as PropType<DataCheckIn>,
|
|
default: null,
|
|
},
|
|
closePopup: {
|
|
type: Function,
|
|
required: true,
|
|
},
|
|
fetchData: {
|
|
type: Function,
|
|
require: true,
|
|
default: () => {
|
|
console.log('fetchData func')
|
|
},
|
|
},
|
|
action: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
const dataByIdVal = ref<DataCheckIn>() //ข้อมูลประวัติการลงเวลา
|
|
const date = ref<Date | string | null>(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) //สถานะการเลือกเวลาเข้า,ออก
|
|
const formLocation = reactive({
|
|
lat: 0, //พิกัดละติจูด
|
|
lng: 0, //พิกัดลองจิจูด
|
|
POI: '', //ชื่อสถานที่
|
|
})
|
|
|
|
/**
|
|
* ฟังก์ชันอัปเดตเวลา
|
|
*/
|
|
function updateClock() {
|
|
const date = Date.now()
|
|
const hh = moment(date).format('HH')
|
|
const mm = moment(date).format('mm')
|
|
timeNoew.value = `${hh}:${mm} น.`
|
|
}
|
|
|
|
/**
|
|
* function checkValidate
|
|
*/
|
|
function onCkickSave() {
|
|
const hasError = []
|
|
for (const key in objectRef) {
|
|
if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
|
|
const property = objectRef[key]
|
|
if (property.value && typeof property.value.validate === 'function') {
|
|
const isValid = property.value.validate()
|
|
hasError.push(isValid)
|
|
}
|
|
}
|
|
}
|
|
|
|
// ลงเวลาพิเศษบังคับให้แก้ทั้งเข้าและออก
|
|
if (props.action === 'special') {
|
|
checkboxIn.value = true
|
|
checkboxOut.value = true
|
|
}
|
|
|
|
if (checkboxIn.value === false && checkboxOut.value === false) {
|
|
checkstatusBox.value = true
|
|
}
|
|
if (
|
|
hasError.every(
|
|
(result) => result === true && checkstatusBox.value === false
|
|
)
|
|
) {
|
|
dialogConfirm($q, async () => {
|
|
const data: FormTimeStemp = {
|
|
checkDate: convertDateToAPI(date.value as Date),
|
|
checkInEdit: checkboxIn.value,
|
|
checkOutEdit: checkboxOut.value,
|
|
description: reason.value,
|
|
latitude: formLocation.lat.toString(),
|
|
longitude: formLocation.lng.toString(),
|
|
POI: formLocation.POI,
|
|
}
|
|
|
|
createListTime(data)
|
|
})
|
|
}
|
|
}
|
|
|
|
/**
|
|
* function เพิ่มลงเวลากรณีพิเศษ
|
|
* @param data body Request
|
|
*/
|
|
async function createListTime(data: FormTimeStemp) {
|
|
showLoader()
|
|
await http
|
|
.post(config.API.createTimeStamp(), data)
|
|
.then(async () => {
|
|
// เรียก function fetch รายการประวัติการลงเวลา
|
|
await props.fetchData()
|
|
await success($q, 'บันทึกข้อมูลสำเร็จ')
|
|
props.closePopup?.()
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err)
|
|
})
|
|
.finally(() => {
|
|
hideLoader()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* funciton เรียกพิกัดละติจูด พิกัดลองติจูด
|
|
* @param location พิกัดละติจูด พิกัดลองติจูด
|
|
* @param namePOI ชื่อสถานที่ ได้มาจากระบบ ArcGis ของกองสารสนเทศภูมิศาสตร์
|
|
*/
|
|
async function updateLocation(
|
|
latitude: number,
|
|
longitude: number,
|
|
namePOI: string
|
|
) {
|
|
formLocation.lat = latitude
|
|
formLocation.lng = longitude
|
|
formLocation.POI = namePOI
|
|
}
|
|
|
|
/**
|
|
* 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
|
|
|
|
if (dataByIdVal.value == null) {
|
|
statusAction.value = true
|
|
} else {
|
|
date.value = convertDateToAPI(new Date(dataByIdVal.value.checkInDateTime))
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<q-card-section
|
|
:horizontal="$q.screen.gt.md"
|
|
style="max-height: 65vh; padding: 0px"
|
|
class="scroll"
|
|
>
|
|
<div class="col-12">
|
|
<div class="row q-col-q-gutter-sm">
|
|
<div class="q-pa-md col-md-5 col-xs-12">
|
|
<q-card
|
|
flat
|
|
bordered
|
|
:class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
|
|
>
|
|
<q-card-section class="bg-primary text-white q-pa-sm">
|
|
<div class="text-center text-bold">เวลาปัจจุบัน</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section class="text-center q-pa-sm">
|
|
<div class="row q-gutter-md">
|
|
<div class="col">{{ date2Thai(dateNow) }}</div>
|
|
<div class="col">{{ timeNoew }}</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
<q-card flat bordered class="col-12 q-mt-sm">
|
|
<div class="q-pa-sm">
|
|
<datepicker
|
|
:readonly="!statusAction"
|
|
v-model="date"
|
|
:locale="'th'"
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
autoApply
|
|
outlined
|
|
lazy-rules
|
|
:max-date="dateNow"
|
|
:teleport="true"
|
|
>
|
|
<template #year="{ year }">
|
|
{{ year + 543 }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ parseInt(value + 543) }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
:readonly="!statusAction"
|
|
ref="dateRef"
|
|
outlined
|
|
dense
|
|
:model-value="
|
|
date !== null ? date2Thai(new Date(date)) : null
|
|
"
|
|
:label="`${
|
|
action === 'edit'
|
|
? 'วันที่ขอแก้ไข'
|
|
: 'วันที่ขอลงเวลากรณีพิเศษ'
|
|
}`"
|
|
format-header="YYYY-MM-DD"
|
|
lazy-rules
|
|
:rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
|
|
hide-bottom-space
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon
|
|
name="event"
|
|
class="cursor-pointer"
|
|
style="color: var(--q-primary)"
|
|
>
|
|
</q-icon>
|
|
</template>
|
|
</q-input> </template
|
|
></datepicker>
|
|
</div>
|
|
</q-card>
|
|
|
|
<q-card
|
|
v-if="action === 'edit'"
|
|
flat
|
|
bordered
|
|
class="q-pa-sm col-12 q-mt-sm"
|
|
:style="{
|
|
borderColor: checkstatusBox ? '#B22222' : '',
|
|
borderWidth: checkstatusBox ? '2px' : '',
|
|
}"
|
|
>
|
|
<div class="row q-gutter-xs">
|
|
<div class="col-12">
|
|
<q-checkbox
|
|
keep-color
|
|
color="primary"
|
|
v-model="checkboxIn"
|
|
label="ขอแก้ไขเวลาเข้างาน"
|
|
/>
|
|
</div>
|
|
<div class="col-12">
|
|
<q-checkbox
|
|
keep-color
|
|
v-model="checkboxOut"
|
|
color="primary"
|
|
label="ขอแก้ไขเวลาออกงาน"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
|
|
<div
|
|
v-if="checkstatusBox"
|
|
class="text-red-9 q-pa-sm"
|
|
style="font-size: 10px"
|
|
>
|
|
กรุณาเลือก
|
|
</div>
|
|
<!-- :style="action == 'special' ? 'margin-bottom: 150px' : ''" -->
|
|
<q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
|
|
<q-input
|
|
ref="reasonRef"
|
|
dense
|
|
outlined
|
|
v-model="reason"
|
|
label="เหตุผล"
|
|
type="textarea"
|
|
:rows="4"
|
|
label-color="grey-5"
|
|
:rules="[(val:string) => !!val || 'กรุณากรอกเหตุผล']"
|
|
lazy-rules
|
|
hide-bottom-space
|
|
class="custom-aqua-border"
|
|
/>
|
|
</q-card>
|
|
</div>
|
|
<q-separator vertical />
|
|
|
|
<div
|
|
class="q-pa-md col"
|
|
:style="!$q.screen.gt.sm ? 'padding-top: 0;' : ''"
|
|
>
|
|
<q-card flat bordered class="col-12">
|
|
<MapCheck @update:location="updateLocation" />
|
|
</q-card>
|
|
</div>
|
|
|
|
<!-- :style="action == 'special' ? 'margin-bottom: 120px' : ''" -->
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
<q-card-actions align="right">
|
|
<q-btn color="secondary" label="บันทึก" @click="onCkickSave" />
|
|
</q-card-actions>
|
|
</template>
|
|
|
|
<style scoped></style>
|