359 lines
13 KiB
Vue
359 lines
13 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive, watch } from "vue";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useQuasar } from "quasar";
|
|
|
|
/** import Type*/
|
|
import type { FormDetail } from "@/modules/09_leave/interface/response/work";
|
|
|
|
/** importComponents*/
|
|
import Map from "@/modules/09_leave/components/1_Work/DialogMap.vue";
|
|
|
|
/** importStores */
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
|
|
|
|
/** useStore */
|
|
const mixin = useCounterMixin();
|
|
const stores = useWorklistDataStore();
|
|
const { date2Thai, showLoader, hideLoader, messageError } = mixin;
|
|
const { convertSatatus } = stores;
|
|
|
|
const $q = useQuasar(); //ใช้ noti quasar
|
|
|
|
/** props จาก TableList */
|
|
const props = defineProps({
|
|
modal: {
|
|
type: Boolean,
|
|
require: true,
|
|
},
|
|
typeTab: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
detail: {
|
|
type: Object,
|
|
require: true,
|
|
},
|
|
close: {
|
|
type: Function,
|
|
require: true,
|
|
},
|
|
});
|
|
|
|
/** รายละเอียดข้อมูล */
|
|
const formData = reactive<FormDetail>({
|
|
checkInDate: null,
|
|
checkInImg: "",
|
|
checkInLat: null,
|
|
checkInLon: null,
|
|
checkInLocation: "",
|
|
checkInTime: "",
|
|
checkInStatus: "",
|
|
checkInDescription: "",
|
|
checkOutDate: null,
|
|
checkOutImg: "",
|
|
checkOutLat: null,
|
|
checkOutLon: null,
|
|
checkOutLocation: "",
|
|
checkOutTime: "",
|
|
checkOutStatus: "",
|
|
fullName: "",
|
|
checkOutDescription: "",
|
|
isLocationCheckIn: false,
|
|
checkInLocationName: "",
|
|
isLocationCheckOut: false,
|
|
checkOutLocationName: "",
|
|
});
|
|
|
|
/**
|
|
* function เรียกรายการลงเวลาตาม
|
|
* @param id รายการลงเวลาปฏิบัติงาน
|
|
*/
|
|
async function fetchDetailByid(id: string, type: string) {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.recordById(id, type))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
formData.checkInDate = data.checkInDate && date2Thai(data.checkInDate);
|
|
formData.checkInImg = data.checkInImg;
|
|
formData.checkInLat = data.checkInLat ? data.checkInLat : "";
|
|
formData.checkInLon = data.checkInLon ? data.checkInLon : "";
|
|
formData.checkInLocation = data.checkInPOI ? data.checkInPOI : "-";
|
|
formData.checkInTime = data.checkInTime ? data.checkInTime : "-";
|
|
formData.checkOutDate = data.checkOutDate && date2Thai(data.checkOutDate);
|
|
formData.checkOutImg = data.checkOutImg;
|
|
formData.checkOutLat = data.checkOutLat ? data.checkOutLat : "";
|
|
formData.checkOutLon = data.checkOutLon ? data.checkOutLon : "";
|
|
formData.checkOutLocation = data.checkOutLocation
|
|
? data.checkOutLocation
|
|
: "-";
|
|
formData.checkOutTime = data.checkOutTime ? data.checkOutTime : "-";
|
|
formData.fullName = data.fullName;
|
|
formData.checkOutLocation = data.checkOutPOI ? data.checkOutPOI : "-";
|
|
formData.checkInDescription = data.checkInDescription
|
|
? data.checkInDescription
|
|
: "-";
|
|
formData.checkOutDescription = data.checkOutDescription
|
|
? data.checkOutDescription
|
|
: "-";
|
|
formData.checkInStatus = data.checkInStatus
|
|
? convertSatatus(data.checkInStatus)
|
|
: "-";
|
|
formData.checkOutStatus = data.checkOutStatus
|
|
? convertSatatus(data.checkOutStatus)
|
|
: "-";
|
|
|
|
formData.isLocationCheckIn = data.isLocationCheckIn;
|
|
formData.checkInLocationName = data.checkInLocationName;
|
|
formData.isLocationCheckOut = data.isLocationCheckOut;
|
|
formData.checkOutLocationName = data.checkOutLocationName;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
closePopup();
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** Function ปิด popup */
|
|
function closePopup() {
|
|
props.close ? props.close() : false;
|
|
}
|
|
|
|
const modalMap = ref<boolean>(false);
|
|
const titleMap = ref<string>("");
|
|
function onClickMap(title: string) {
|
|
titleMap.value = title;
|
|
modalMap.value = !modalMap.value;
|
|
}
|
|
|
|
watch(
|
|
() => props.modal,
|
|
() => {
|
|
props.modal === true &&
|
|
props.detail &&
|
|
fetchDetailByid(props.detail.id, props.typeTab as string);
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog v-model="props.modal">
|
|
<q-card style="width: 950px; max-width: 80vw">
|
|
<q-toolbar>
|
|
<q-toolbar-title class="text-subtitle1 text-weight-bold">
|
|
<span style="margin-right: 0"> รายละเอียดการลงเวลาของ</span>
|
|
<span class="text-primary">{{ formData.fullName }}</span>
|
|
</q-toolbar-title>
|
|
<q-btn
|
|
for="closeDialog"
|
|
icon="close"
|
|
unelevated
|
|
round
|
|
dense
|
|
style="color: #eb0505; background-color: #ffdede"
|
|
@click="closePopup"
|
|
/>
|
|
</q-toolbar>
|
|
<q-separator />
|
|
<q-card-section class="q-pa-none">
|
|
<div class="q-pa-md">
|
|
<q-card bordered class="q-pa-sm bg-grey-1">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<q-list>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label class="text-grey-8"
|
|
>ชื่อ-นามสกุล</q-item-label
|
|
>
|
|
<q-item-label>{{ formData.fullName }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
<div class="col-4">
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label class="text-grey-8">
|
|
วันที่เข้างาน</q-item-label
|
|
>
|
|
<q-item-label>{{ formData.checkInDate }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
<div class="col-2" v-if="props.typeTab === 'time-record'">
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label class="text-grey-8"
|
|
>สถานะช่วงเช้า
|
|
</q-item-label>
|
|
<q-item-label>{{ formData.checkInStatus }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
<div class="col-2" v-if="props.typeTab === 'time-record'">
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label class="text-grey-8"
|
|
>สถานะช่วงบ่าย</q-item-label
|
|
>
|
|
<q-item-label>{{ formData.checkOutStatus }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
<div class="row q-gutter-md q-pt-md">
|
|
<div class="col">
|
|
<q-card flat bordered>
|
|
<div class="q-pa-md q-gutter-md">
|
|
<div class="row">
|
|
<div class="col text-grey-8">เวลาเข้างาน</div>
|
|
<div class="col">{{ formData.checkInTime }}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-grey-8">สถานที่ทำงาน</div>
|
|
<div class="col" v-if="formData.isLocationCheckIn">
|
|
ในสถานที่
|
|
</div>
|
|
<div class="col" v-else>
|
|
นอกสถานที่ ({{ formData.checkInLocationName }})
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-grey-8">พิกัด</div>
|
|
<div class="col">
|
|
{{ formData.checkInLocation }}
|
|
<div class="text-grey-6" v-if="formData.checkInLat">
|
|
({{ formData.checkInLat }}, {{ formData.checkInLon }})
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
color="primary"
|
|
icon="map"
|
|
@click="onClickMap('พิกัดสถานที่เข้างาน')"
|
|
><q-tooltip>พิกัดสถานที่เข้างาน</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6 text-grey-8">รูปภาพ</div>
|
|
<div class="col-5">
|
|
<q-img
|
|
v-if="formData.checkInImg"
|
|
style="
|
|
height: 120px;
|
|
max-width: 150px;
|
|
border-radius: 10px;
|
|
"
|
|
:src="formData.checkInImg"
|
|
/>
|
|
<q-img
|
|
v-else
|
|
src="@/assets/avatar_user.jpg"
|
|
style="
|
|
height: 120px;
|
|
max-width: 150px;
|
|
border-radius: 10px;
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-grey-8">หมายเหตุ</div>
|
|
<div class="col">{{ formData.checkInDescription }}</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
<div class="col">
|
|
<q-card flat bordered>
|
|
<div class="q-pa-md q-gutter-md">
|
|
<div class="row">
|
|
<div class="col text-grey-8">เวลาออกงาน</div>
|
|
<div class="col">{{ formData.checkOutTime }}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-grey-8">สถานที่ทำงาน</div>
|
|
<div class="col" v-if="formData.isLocationCheckOut">
|
|
ในสถานที่
|
|
</div>
|
|
<div class="col" v-else>
|
|
นอกสถานที่ ({{ formData.checkOutLocationName }})
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-grey-8">พิกัด</div>
|
|
<div class="col">
|
|
{{ formData.checkOutLocation }}
|
|
<div class="text-grey-6" v-if="formData.checkOutLat">
|
|
({{ formData.checkOutLat }},
|
|
{{ formData.checkOutLon }})<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
color="primary"
|
|
icon="map"
|
|
@click="onClickMap('พิกัดสถานที่ออกงาน')"
|
|
><q-tooltip>พิกัดสถานที่ออกงาน</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6 text-grey-8">รูปภาพ</div>
|
|
<div class="col-5">
|
|
<q-img
|
|
v-if="formData.checkOutImg"
|
|
style="
|
|
height: 120px;
|
|
max-width: 150px;
|
|
border-radius: 10px;
|
|
"
|
|
:src="formData.checkOutImg"
|
|
/>
|
|
<q-img
|
|
v-else
|
|
src="@/assets/avatar_user.jpg"
|
|
style="
|
|
height: 120px;
|
|
max-width: 150px;
|
|
border-radius: 10px;
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-grey-8">หมายเหตุ</div>
|
|
<div class="col">{{ formData.checkOutDescription }}</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<Map
|
|
:modal="modalMap"
|
|
:title="titleMap"
|
|
:close="onClickMap"
|
|
:data="props.detail"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped></style>
|