ผูก API รายละเอียดการลงเวลา
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
64af4fec67
commit
dd9d4de08a
5 changed files with 122 additions and 74 deletions
|
|
@ -1,5 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { FormDetail } from "@/modules/09_leave/interface/response/work";
|
||||
|
||||
/** importStores */
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** useStore */
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, showLoader, hideLoader } = mixin;
|
||||
|
||||
/** props จาก TableList */
|
||||
const props = defineProps({
|
||||
|
|
@ -16,30 +27,74 @@ const props = defineProps({
|
|||
require: true,
|
||||
},
|
||||
});
|
||||
const statusEdit = ref<boolean>(false);
|
||||
|
||||
/** รายละเอียดข้อมูล */
|
||||
const titlename = ref<string>("");
|
||||
const timeIn = ref<string>("");
|
||||
const timeOut = ref<string>("");
|
||||
const coordinatesIn = ref<string>("");
|
||||
const coordinatesOut = ref<string>("");
|
||||
const status = ref<string>("");
|
||||
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: "",
|
||||
});
|
||||
watch(props, () => {
|
||||
if (props.modal) {
|
||||
if (props.detail) {
|
||||
console.log(props.detail);
|
||||
let data = props.detail;
|
||||
titlename.value = data.fullName;
|
||||
timeIn.value = data.timeIn;
|
||||
timeOut.value = data.timeOut;
|
||||
coordinatesIn.value = data.coordinatesIn;
|
||||
coordinatesOut.value = data.coordinatesOut;
|
||||
status.value = data.status;
|
||||
fetchDetailByid(props.detail.id);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* function เรียกรายการลงเวลาตาม
|
||||
* @param id รายการลงเวลาปฏิบัติงาน
|
||||
*/
|
||||
async function fetchDetailByid(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.timeRecordById(id))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
formData.checkInDate = data.checkInDate && date2Thai(data.checkInDate);
|
||||
formData.checkInImg = data.checkInImg;
|
||||
formData.checkInLat = data.checkInLat;
|
||||
formData.checkInLon = data.checkInLon;
|
||||
formData.checkInLocation = data.checkInLocation;
|
||||
formData.checkInTime = data.checkInTime;
|
||||
formData.checkOutDate = data.checkOutDate && date2Thai(data.checkOutDate);
|
||||
formData.checkOutImg = data.checkOutImg;
|
||||
formData.checkOutLat = data.checkOutLat;
|
||||
formData.checkOutLon = data.checkOutLon;
|
||||
formData.checkOutLocation = data.checkOutLocation;
|
||||
formData.checkOutTime = data.checkOutTime;
|
||||
formData.fullName = data.fullName;
|
||||
formData.checkOutLocation = data.checkOutLocation;
|
||||
formData.checkInDescription = data.checkInDescription
|
||||
? data.checkInDescription
|
||||
: "-";
|
||||
formData.checkOutDescription = data.checkOutDescription
|
||||
? data.checkOutDescription
|
||||
: "-";
|
||||
formData.checkInStatus = data.checkInStatus;
|
||||
formData.checkOutStatus = data.checkOutStatus;
|
||||
})
|
||||
.catch((err) => {})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** Function ปิด popup */
|
||||
function colsePopup() {
|
||||
props.colse ? props.colse() : false;
|
||||
|
|
@ -52,7 +107,7 @@ function colsePopup() {
|
|||
<q-toolbar>
|
||||
<q-toolbar-title class="text-subtitle1 text-weight-bold">
|
||||
<span style="margin-right: 0"> รายละเอียดการลงเวลาของ</span>
|
||||
<span class="text-primary">{{ titlename }}</span>
|
||||
<span class="text-primary">{{ formData.fullName }}</span>
|
||||
</q-toolbar-title>
|
||||
<q-btn
|
||||
for="closeDialog"
|
||||
|
|
@ -76,7 +131,7 @@ function colsePopup() {
|
|||
<q-item-label class="text-grey-8"
|
||||
>ชื่อ-นามสกุล</q-item-label
|
||||
>
|
||||
<q-item-label>{{ titlename }}</q-item-label>
|
||||
<q-item-label>{{ formData.fullName }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
@ -87,7 +142,7 @@ function colsePopup() {
|
|||
<q-item-label class="text-grey-8">
|
||||
วันที่เข้างาน</q-item-label
|
||||
>
|
||||
<q-item-label>05 ต.ค. 56</q-item-label>
|
||||
<q-item-label>{{ formData.checkInDate }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
|
|
@ -95,51 +150,10 @@ function colsePopup() {
|
|||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-grey-8">สถานะ</q-item-label>
|
||||
<q-item-label>{{ status }}</q-item-label>
|
||||
<q-item-label>{{ formData.checkInStatus }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<!-- <div class="col row items-center">
|
||||
<q-btn
|
||||
v-if="!statusEdit"
|
||||
for="editDialog"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="mdi-pencil"
|
||||
size="12px"
|
||||
@click="statusEdit = true"
|
||||
>
|
||||
<q-tooltip>แก้ไข</q-tooltip>
|
||||
</q-btn>
|
||||
<div v-if="statusEdit">
|
||||
<q-btn
|
||||
for="undoDialog"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
icon="mdi-undo"
|
||||
size="12px"
|
||||
@click="statusEdit = false"
|
||||
>
|
||||
<q-tooltip>ยกเลิก</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
for="saveDialog"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="secondary"
|
||||
icon="save"
|
||||
size="12px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</q-card>
|
||||
<div class="row q-gutter-md q-pt-md">
|
||||
|
|
@ -148,11 +162,16 @@ function colsePopup() {
|
|||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เวลาเข้างาน</div>
|
||||
<div class="col">{{ timeIn }}</div>
|
||||
<div class="col">{{ formData.checkInTime }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">พิกัด</div>
|
||||
<div class="col">{{ coordinatesIn }}</div>
|
||||
<div class="col">
|
||||
{{ formData.checkInLocation }}
|
||||
<div class="text-grey-6" v-if="formData.checkInLat">
|
||||
({{ formData.checkInLat }}, {{ formData.checkInLon }})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 text-grey-8">รูปภาพ</div>
|
||||
|
|
@ -163,13 +182,13 @@ function colsePopup() {
|
|||
max-width: 150px;
|
||||
border-radius: 10px;
|
||||
"
|
||||
src="https://picsum.photos/500/500"
|
||||
:src="formData.checkInImg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเหตุ</div>
|
||||
<div class="col">-</div>
|
||||
<div class="col">{{ formData.checkInDescription }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
@ -179,11 +198,16 @@ function colsePopup() {
|
|||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เวลาออกงาน</div>
|
||||
<div class="col">{{ timeOut }}</div>
|
||||
<div class="col">{{ formData.checkOutTime }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">พิกัด</div>
|
||||
<div class="col">{{ coordinatesOut }}</div>
|
||||
<div class="col">
|
||||
{{ formData.checkOutLocation }}
|
||||
<div class="text-grey-6" v-if="formData.checkOutLat">
|
||||
({{ formData.checkOutLat }}, {{ formData.checkOutLon }})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 text-grey-8">รูปภาพ</div>
|
||||
|
|
@ -194,13 +218,13 @@ function colsePopup() {
|
|||
max-width: 150px;
|
||||
border-radius: 10px;
|
||||
"
|
||||
src="https://picsum.photos/500/500"
|
||||
:src="formData.checkOutImg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเหตุ</div>
|
||||
<div class="col">-</div>
|
||||
<div class="col">{{ formData.checkOutDescription }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
|
|||
|
|
@ -152,6 +152,7 @@ async function fetchListTimeRecord() {
|
|||
];
|
||||
|
||||
const date = new Date(workStore.selectDate as string | Date);
|
||||
const querySting = {
|
||||
startDate: dateToISO(date), //*วันที่เริ่ม
|
||||
endDate: dateToISO(date), //*วันที่สิ้นสุด
|
||||
status: filetStatus.value, //*สถานะ
|
||||
|
|
|
|||
|
|
@ -113,15 +113,16 @@ async function fetchListLogRecord() {
|
|||
let datalist: TableRows[] = res.data.result.data.map((e: DataResLog) => ({
|
||||
id: e.id,
|
||||
fullName: e.fullName,
|
||||
checkDate: e.checkDate && date2Thai(e.checkDate),
|
||||
checkInDate: e.checkInDate && date2Thai(e.checkInDate),
|
||||
checkInTime: e.checkInTime,
|
||||
checkInLocation: e.checkInLocation,
|
||||
checkInLat: e.checkInLat,
|
||||
checkInLon: e.checkInLon,
|
||||
checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
|
||||
checkOutLocation: e.checkOutLocation,
|
||||
checkOutTime: e.checkOutTime,
|
||||
checkOutLat: e.checkOutLat,
|
||||
checkOutLon: e.checkOutLon,
|
||||
checkOutLat: e.checkOutLat ? e.checkOutLat : "",
|
||||
checkOutLon: e.checkOutLon ? e.checkOutLon : "",
|
||||
}));
|
||||
rows.value = datalist;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -47,14 +47,35 @@ interface DataResTime {
|
|||
interface DataResLog {
|
||||
id: string; //id รายการลงเวลาปฏิบัติงาน
|
||||
fullName: String; //ชื่อ-นามสกุล
|
||||
checkDate: Date | null; //วันที่เข้างาน
|
||||
checkInDate: Date | null; //วันที่เข้างาน
|
||||
checkInTime: string; //เวลาเข้างาน
|
||||
checkInLocation: String; //พิกัดเข้างาน
|
||||
checkInLat: String; //อัลติจูดเข้างาน
|
||||
checkInLon: String; //ละติจูดเข้างาน
|
||||
checkOutDate: Date | null; //วันที่เข้างาน
|
||||
checkOutLocation: String; //พิกัดออกงาน
|
||||
checkOutTime: string; //เวลาออกงาน
|
||||
checkOutLat: String; //อัลติจูดออกงาน
|
||||
checkOutLon: String; //ละติจูดออกงาน
|
||||
}
|
||||
export type { TableRows, DataResLog, DataResTime, TableRowsTime };
|
||||
|
||||
interface FormDetail {
|
||||
fullName: string; //ชื่อ-นามสกุล
|
||||
checkInDate: Date | null; //วันที่เข้างาน
|
||||
checkInStatus: String; //สถานะการลงเวลาเข้างาน
|
||||
checkInTime: string; //เวลาเข้างาน
|
||||
checkInLocation: string; //ชื่อสถานที่เข้างาน
|
||||
checkInLat: number | null; //พิกัด Lat เข้างาน
|
||||
checkInLon: number | null; //พิกัด Lon เข้างาน
|
||||
checkInImg: string; //รูปถ่ายเข้างาน
|
||||
checkInDescription: string; //หมายเหตุเข้างาน
|
||||
checkOutDate: Date | null; //วันที่ออกงาน
|
||||
checkOutStatus: string; //สถานะการลงเวลาออกงาน
|
||||
checkOutTime: string; //เวลาออกงาน
|
||||
checkOutLocation: string; //ชื่อสถานที่ออกงาน
|
||||
checkOutLat: number | null; //พิกัด Lat ออกงาน
|
||||
checkOutLon: number | null; //พิกัด Lon ออกงาน
|
||||
checkOutImg: string; //รูปถ่ายออกงาน
|
||||
checkOutDescription: string; //หมายเหตุออกงาน
|
||||
}
|
||||
export type { TableRows, DataResLog, DataResTime, TableRowsTime, FormDetail };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue