193 lines
6.5 KiB
Vue
193 lines
6.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
const props = defineProps({
|
|
modal: {
|
|
type: Boolean,
|
|
},
|
|
detail: {
|
|
type: Object,
|
|
},
|
|
colse: {
|
|
type: Function,
|
|
},
|
|
});
|
|
// รายละเอียดข้อมูง
|
|
const titlename = ref<string>("");
|
|
const timeIn = ref<string>("");
|
|
const timeOut = ref<string>("");
|
|
const coordinatesIn = ref<string>("");
|
|
const coordinatesOut = ref<string>("");
|
|
const status = ref<string>("");
|
|
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;
|
|
}
|
|
}
|
|
});
|
|
// ปิด popup
|
|
function colsePopup() {
|
|
props.colse ? props.colse() : false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog v-model="props.modal">
|
|
<q-card style="width: 950px; max-width: 80vw">
|
|
<q-card-section>
|
|
<q-toolbar>
|
|
<q-toolbar-title>
|
|
รายละเอียดการลงเวลาของ
|
|
<span class="text-primary">{{ titlename }}</span>
|
|
</q-toolbar-title>
|
|
<q-btn
|
|
icon="close"
|
|
unelevated
|
|
round
|
|
dense
|
|
style="color: #ff8080; background-color: #ffdede"
|
|
@click="colsePopup"
|
|
/>
|
|
</q-toolbar>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-section class="q-pt-none">
|
|
<div class="q-pa-md">
|
|
<q-banner
|
|
inline-actions
|
|
rounded
|
|
class="bg-grey-2"
|
|
style="border: 2px solid rgb(215, 212, 212)"
|
|
>
|
|
<div class="q-pa-md">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<q-list>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label overline>ชื่อ-นามสกุล</q-item-label>
|
|
<q-item-label>{{ titlename }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
<div class="col-4">
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label overline>วันที่เข้างาน</q-item-label>
|
|
<q-item-label>05 ต.ค. 56</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
<div class="col-3">
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label overline>สถานะ</q-item-label>
|
|
<q-item-label>{{ status }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
<div class="col">
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label
|
|
><q-btn
|
|
dense
|
|
flat
|
|
round
|
|
color="primary"
|
|
icon="mdi-pencil"
|
|
>
|
|
<q-tooltip>แก้ไข</q-tooltip>
|
|
</q-btn></q-item-label
|
|
>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-banner>
|
|
<div class="row q-gutter-md q-mt-md">
|
|
<div class="col">
|
|
<q-card flat bordered>
|
|
<q-card-section>
|
|
<q-list>
|
|
<q-item>
|
|
<q-item-section class="text-grey-5"
|
|
>เวลาเข้างาน</q-item-section
|
|
>
|
|
<q-item-section> {{ timeIn }} </q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section class="text-grey-5">พิกัด</q-item-section>
|
|
<q-item-section> {{ coordinatesIn }} </q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section top class="text-grey-5"
|
|
>รูปภาพ</q-item-section
|
|
>
|
|
<q-item-section>
|
|
<q-img src="https://picsum.photos/500/300" />
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section class="text-grey-5"
|
|
>หมายเหตุ</q-item-section
|
|
>
|
|
<q-item-section> - </q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
<div class="col">
|
|
<q-card flat bordered>
|
|
<q-card-section>
|
|
<q-list>
|
|
<q-item>
|
|
<q-item-section class="text-grey-5"
|
|
>เวลาออกงาน</q-item-section
|
|
>
|
|
<q-item-section> {{ timeOut }} </q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section class="text-grey-5">พิกัด</q-item-section>
|
|
<q-item-section> {{ coordinatesOut }} </q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section top class="text-grey-5"
|
|
>รูปภาพ</q-item-section
|
|
>
|
|
<q-item-section>
|
|
<q-img src="https://picsum.photos/500/300" />
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section class="text-grey-5"
|
|
>หมายเหตุ</q-item-section
|
|
>
|
|
<q-item-section> - </q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card-section>
|
|
</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>
|
|
</template>
|
|
|
|
<style scoped></style>
|