แก้ไขตาม task
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
bf8fb777cf
commit
90a47d43ad
26 changed files with 2652 additions and 228 deletions
192
src/modules/09_leave/components/1_Work/DialogDetail.vue
Normal file
192
src/modules/09_leave/components/1_Work/DialogDetail.vue
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
<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;
|
||||
}
|
||||
}
|
||||
});
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue