ปรับ ui การลา
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
e83cec126f
commit
18733051d6
3 changed files with 223 additions and 205 deletions
|
|
@ -11,7 +11,8 @@ const props = defineProps({
|
|||
type: Function,
|
||||
},
|
||||
});
|
||||
// รายละเอียดข้อมูง
|
||||
const statusEdit = ref<boolean>(false);
|
||||
// รายละเอียดข้อมูล
|
||||
const titlename = ref<string>("");
|
||||
const timeIn = ref<string>("");
|
||||
const timeOut = ref<string>("");
|
||||
|
|
@ -52,7 +53,7 @@ function colsePopup() {
|
|||
unelevated
|
||||
round
|
||||
dense
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
style="color: #eb0505; background-color: #ffdede"
|
||||
@click="colsePopup"
|
||||
/>
|
||||
</q-toolbar>
|
||||
|
|
@ -64,52 +65,77 @@ function colsePopup() {
|
|||
inline-actions
|
||||
rounded
|
||||
class="bg-grey-2"
|
||||
style="border: 2px solid rgb(215, 212, 212)"
|
||||
style="border: 2px solid rgb(239, 236, 236)"
|
||||
>
|
||||
<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">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<q-list>
|
||||
<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-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>
|
||||
|
|
@ -118,64 +144,66 @@ function colsePopup() {
|
|||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue