hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ ui การลา

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-10-10 13:47:11 +07:00
parent e83cec126f
commit 18733051d6
3 changed files with 223 additions and 205 deletions
Download patch file Download diff file Expand all files Collapse all files

216
src/modules/09_leave/components/1_Work/DialogDetail.vue
View file

@ -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>

153
src/modules/09_leave/components/2_Leave/DetailLeave.vue
View file

@ -20,7 +20,7 @@ const paramsId = route.params.id;
/>
รายละเอียดการลาของ {{ paramsId }}
</div>
<div class="q-ml-xl">
<div>
<q-btn
icon="mdi-download"
unelevated
@ -48,21 +48,20 @@ const paramsId = route.params.id;
<q-banner inline-actions rounded class="bg-grey-2">
<div class="row q-gutter-md">
<div class="col">
<q-list>
<q-item>
<q-item-section avatar class="text-grey-6"
>ประเภทการลา</q-item-section
>
<q-item-section class="text-primary"> ลาป่วย </q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="text-grey-6">
ชื่อ - นามสกุล</q-item-section
>
<q-item-section> {{ paramsId }} </q-item-section>
</q-item>
</q-list>
<div class="column justify-center" style="height: 80px">
<div class="col-4">
<div class="row">
<div class="col-2 text-grey-5">ประเภทการลา</div>
<div class="col text-primary">ลาป่วย</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col-2 text-grey-5">ชื่อ - นามสกุล</div>
<div class="col">{{ paramsId }}</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row q-gutter-md">
@ -100,80 +99,60 @@ const paramsId = route.params.id;
<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> บ้าน </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-item>
<q-item-section class="text-grey-5">เขียนที่</q-item-section>
<q-item-section> บ้าน </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-item>
<q-item-section class="text-grey-5">
วัน เดือน ปีเริ่มต้น</q-item-section
>
<q-item-section> 14 ก.ค. 2556 </q-item-section>
</q-item>
<q-item>
<q-item-section class="text-grey-5">
วัน เดือน ปีเริ่มสิ้นสุด</q-item-section
>
<q-item-section> 15 ก.ค. 2556 </q-item-section>
</q-item>
</q-list>
<div class="q-pa-md q-gutter-md">
<div class="row">
<div class="col text-grey-5">เขียนที่</div>
<div class="col">บ้าน</div>
</div>
<div class="row">
<div class="col text-grey-5">รับเงินเดือน</div>
<div class="col">รับเงินเดือน</div>
</div>
<div class="row">
<div class="col text-grey-5">เขียนที่</div>
<div class="col">บ้าน</div>
</div>
<div class="row">
<div class="col text-grey-5">รับเงินเดือน</div>
<div class="col">รับเงินเดือน</div>
</div>
<div class="row">
<div class="col text-grey-5">วัน เดือน ปีเริ่มต้น</div>
<div class="col">14 ก.ค. 2556</div>
</div>
<div class="row">
<div class="col text-grey-5">วัน เดือน ปีเริ่มสิ้นสุด</div>
<div class="col">15 ก.ค. 2556</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> 1 </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-item>
<q-item-section class="text-grey-5"
>หมายเลขที่ติดต่อขณะลา</q-item-section
>
<q-item-section> หมายเลขที่ติดต่อขณะลา </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-item>
<q-item-section class="text-h5"> เอกสารแบบ</q-item-section>
</q-item>
<q-item>
<q-item-section class="text-grey-5">
ไม่พบเอกสาร</q-item-section
>
</q-item>
</q-list>
<div class="q-pa-md q-gutter-md">
<div class="row">
<div class="col text-grey-5">จำนวนวันที่ลา</div>
<div class="col">1</div>
</div>
<div class="row">
<div class="col text-grey-5">สถานที่ติดต่อขณะลา</div>
<div class="col">สถานที่ติดต่อขณะลา</div>
</div>
<div class="row">
<div class="col text-grey-5">หมายเลขที่ติดต่อขณะลา</div>
<div class="col">095-123467</div>
</div>
<div class="row">
<div class="col text-grey-5">สถานะการพิจารณา</div>
<div class="col">ขอยกเลิก</div>
</div>
<div class="row">
<div class="col-12 font-size">เอกสารแบบ</div>
<div class="col-12 q-mt-sm text-grey-5">ไม่พบเอกสาร</div>
</div>
</div>
</q-card-section>
</q-card>
</div>
@ -191,4 +170,8 @@ const paramsId = route.params.id;
</q-card>
</template>
<style lang="sass" scoped></style>
<style lang="scss" scoped>
.font-size {
font-size: 1.2rem;
}
</style>