221 lines
7.3 KiB
Vue
221 lines
7.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
const props = defineProps({
|
|
modal: {
|
|
type: Boolean,
|
|
},
|
|
detail: {
|
|
type: Object,
|
|
},
|
|
colse: {
|
|
type: Function,
|
|
},
|
|
});
|
|
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>("");
|
|
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 style="margin-right: 0"> รายละเอียดการลงเวลาของ</span>
|
|
<span class="text-primary">{{ titlename }}</span>
|
|
</q-toolbar-title>
|
|
<q-btn
|
|
icon="close"
|
|
unelevated
|
|
round
|
|
dense
|
|
style="color: #eb0505; 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(239, 236, 236)"
|
|
>
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<q-list>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label class="text-grey-5"
|
|
>ชื่อ-นามสกุล</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 class="text-grey-5">
|
|
วันที่เข้างาน</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 class="text-grey-5">สถานะ</q-item-label>
|
|
<q-item-label>{{ status }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</div>
|
|
<div class="col">
|
|
<q-btn
|
|
v-if="!statusEdit"
|
|
dense
|
|
flat
|
|
round
|
|
color="primary"
|
|
icon="mdi-pencil"
|
|
size="sm"
|
|
class="q-mt-lg"
|
|
@click="statusEdit = true"
|
|
>
|
|
<q-tooltip>แก้ไข</q-tooltip>
|
|
</q-btn>
|
|
<div v-if="statusEdit">
|
|
<q-btn
|
|
dense
|
|
flat
|
|
round
|
|
color="red"
|
|
icon="mdi-undo"
|
|
size="sm"
|
|
class="q-mt-lg"
|
|
@click="statusEdit = false"
|
|
>
|
|
<q-tooltip>ยกเลิก</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
dense
|
|
flat
|
|
round
|
|
color="secondary"
|
|
icon="save"
|
|
size="sm"
|
|
class="q-mt-lg"
|
|
>
|
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-banner>
|
|
<div class="row q-gutter-md q-mt-md">
|
|
<div class="col">
|
|
<q-card flat bordered>
|
|
<q-card-section>
|
|
<div class="q-pa-md q-gutter-md">
|
|
<div class="row">
|
|
<div class="col text-grey-6">เวลาเข้างาน</div>
|
|
<div class="col">{{ timeIn }}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-grey-6">พิกัด</div>
|
|
<div class="col">{{ coordinatesIn }}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6 text-grey-6">รูปภาพ</div>
|
|
<div class="col-5">
|
|
<q-img
|
|
style="
|
|
height: 120px;
|
|
max-width: 150px;
|
|
border-radius: 10px;
|
|
"
|
|
src="https://picsum.photos/500/500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-grey-6">หมายเหตุ</div>
|
|
<div class="col">-</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
<div class="col">
|
|
<q-card flat bordered>
|
|
<q-card-section>
|
|
<div class="q-pa-md q-gutter-md">
|
|
<div class="row">
|
|
<div class="col text-grey-6">เวลาออกงาน</div>
|
|
<div class="col">{{ timeOut }}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-grey-6">พิกัด</div>
|
|
<div class="col">{{ coordinatesOut }}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6 text-grey-6">รูปภาพ</div>
|
|
<div class="col-5">
|
|
<q-img
|
|
style="
|
|
height: 120px;
|
|
max-width: 150px;
|
|
border-radius: 10px;
|
|
"
|
|
src="https://picsum.photos/500/500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-grey-6">หมายเหตุ</div>
|
|
<div class="col">-</div>
|
|
</div>
|
|
</div>
|
|
</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>
|