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:
Tanyalak 2023-10-18 12:26:05 +07:00
parent 015d3cfb5b
commit 4c47b6cbab
3 changed files with 35 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/modules/06_retirement/components/ExitInterview/exitMain.vue
View file

@ -278,7 +278,7 @@ const openModalCalendar = (rows: any) => {
<div class="row col-12"> <div class="row col-12">
<div class="row col-12 q-col-gutter-sm"> <div class="row col-12 q-col-gutter-sm">
<div> <div>
<q-btn color="info" @click="$router.push('/exit-Interview/edit-question')">แก้ไขคำถาม</q-btn> <q-btn color="blue-9" icon="mdi-square-edit-outline" outline @click="$router.push('/exit-Interview/edit-question')"><span class="q-pl-sm">แก้ไขคำถาม</span></q-btn>
</div> </div>
<q-space /> <q-space />
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined

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

@ -42,9 +42,8 @@ function colsePopup() {
<template> <template>
<q-dialog v-model="props.modal"> <q-dialog v-model="props.modal">
<q-card style="width: 950px; max-width: 80vw"> <q-card style="width: 950px; max-width: 80vw">
<q-card-section>
<q-toolbar> <q-toolbar>
<q-toolbar-title> <q-toolbar-title class="text-subtitle1 text-weight-bold">
<span style="margin-right: 0"> รายละเอียดการลงเวลาของ</span> <span style="margin-right: 0"> รายละเอียดการลงเวลาของ</span>
<span class="text-primary">{{ titlename }}</span> <span class="text-primary">{{ titlename }}</span>
</q-toolbar-title> </q-toolbar-title>
@ -57,22 +56,19 @@ function colsePopup() {
@click="colsePopup" @click="colsePopup"
/> />
</q-toolbar> </q-toolbar>
</q-card-section>
<q-separator /> <q-separator />
<q-card-section class="q-pt-none"> <q-card-section class="q-pa-none">
<div class="q-pa-md"> <div class="q-pa-md">
<q-banner <q-card
inline-actions bordered
rounded class="q-pa-sm bg-grey-1"
class="bg-grey-2"
style="border: 2px solid rgb(239, 236, 236)"
> >
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<q-list> <q-list>
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label class="text-grey-5" <q-item-label class="text-grey-8"
>ชื่อ-นามสกุล</q-item-label >ชื่อ-นามสกุล</q-item-label
> >
<q-item-label>{{ titlename }}</q-item-label> <q-item-label>{{ titlename }}</q-item-label>
@ -83,7 +79,7 @@ function colsePopup() {
<div class="col-4"> <div class="col-4">
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label class="text-grey-5"> <q-item-label class="text-grey-8">
วันที่เข้างาน</q-item-label วันที่เข้างาน</q-item-label
> >
<q-item-label>05 ต.ค. 56</q-item-label> <q-item-label>05 ต.ค. 56</q-item-label>
@ -93,12 +89,12 @@ function colsePopup() {
<div class="col-3"> <div class="col-3">
<q-item> <q-item>
<q-item-section> <q-item-section>
<q-item-label class="text-grey-5">สถานะ</q-item-label> <q-item-label class="text-grey-8">สถานะ</q-item-label>
<q-item-label>{{ status }}</q-item-label> <q-item-label>{{ status }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</div> </div>
<div class="col"> <div class="col row items-center">
<q-btn <q-btn
v-if="!statusEdit" v-if="!statusEdit"
dense dense
@ -106,8 +102,7 @@ function colsePopup() {
round round
color="primary" color="primary"
icon="mdi-pencil" icon="mdi-pencil"
size="sm" size="12px"
class="q-mt-lg"
@click="statusEdit = true" @click="statusEdit = true"
> >
<q-tooltip>แก้ไข</q-tooltip> <q-tooltip>แก้ไข</q-tooltip>
@ -119,8 +114,7 @@ function colsePopup() {
round round
color="red" color="red"
icon="mdi-undo" icon="mdi-undo"
size="sm" size="12px"
class="q-mt-lg"
@click="statusEdit = false" @click="statusEdit = false"
> >
<q-tooltip>ยกเลิก</q-tooltip> <q-tooltip>ยกเลิก</q-tooltip>
@ -131,30 +125,29 @@ function colsePopup() {
round round
color="secondary" color="secondary"
icon="save" icon="save"
size="sm" size="12px"
class="q-mt-lg" class="q-ml-sm"
> >
<q-tooltip>บันทึกข้อมูล</q-tooltip> <q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn> </q-btn>
</div> </div>
</div> </div>
</div> </div>
</q-banner> </q-card>
<div class="row q-gutter-md q-mt-md"> <div class="row q-gutter-md q-pt-md">
<div class="col"> <div class="col">
<q-card flat bordered> <q-card flat bordered>
<q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-6">เวลาเข้างาน</div> <div class="col text-grey-8">เวลาเข้างาน</div>
<div class="col">{{ timeIn }}</div> <div class="col">{{ timeIn }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-6">พิกัด</div> <div class="col text-grey-8">พิกัด</div>
<div class="col">{{ coordinatesIn }}</div> <div class="col">{{ coordinatesIn }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-6 text-grey-6">รูปภาพ</div> <div class="col-6 text-grey-8">รูปภาพ</div>
<div class="col-5"> <div class="col-5">
<q-img <q-img
style=" style="
@ -167,27 +160,25 @@ function colsePopup() {
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-6">หมายเหตุ</div> <div class="col text-grey-8">หมายเหตุ</div>
<div class="col">-</div> <div class="col">-</div>
</div> </div>
</div> </div>
</q-card-section>
</q-card> </q-card>
</div> </div>
<div class="col"> <div class="col">
<q-card flat bordered> <q-card flat bordered>
<q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-6">เวลาออกงาน</div> <div class="col text-grey-8">เวลาออกงาน</div>
<div class="col">{{ timeOut }}</div> <div class="col">{{ timeOut }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-6">พิกัด</div> <div class="col text-grey-8">พิกัด</div>
<div class="col">{{ coordinatesOut }}</div> <div class="col">{{ coordinatesOut }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-6 text-grey-6">รูปภาพ</div> <div class="col-6 text-grey-8">รูปภาพ</div>
<div class="col-5"> <div class="col-5">
<q-img <q-img
style=" style="
@ -200,11 +191,10 @@ function colsePopup() {
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-6">หมายเหตุ</div> <div class="col text-grey-8">หมายเหตุ</div>
<div class="col">-</div> <div class="col">-</div>
</div> </div>
</div> </div>
</q-card-section>
</q-card> </q-card>
</div> </div>
</div> </div>

25
src/modules/09_leave/views/LeaveListMain.vue
View file

@ -51,28 +51,28 @@ function changTab() {
<div class="toptitle text-dark col-12 row items-center">รายการลา</div> <div class="toptitle text-dark col-12 row items-center">รายการลา</div>
<div> <div>
<!-- <q-card flat bordered class="col-12 q-mt-sm"> --> <!-- <q-card flat bordered class="col-12 q-mt-sm"> -->
<div class="q-pa-md"> <q-card bordered flat >
<q-tabs <q-tabs
v-model="leaveStore.tab" v-model="leaveStore.tab"
dense dense
align="left" align="left"
inline-label inline-label
class="bg-grey-4 rounded-borders" class="rounded-borders"
indicator-color="white" indicator-color="primary"
active-bg-color="teal-1"
active-class="text-primary"
> >
<q-tab <q-tab
@click="changTab" @click="changTab"
name="1" name="1"
label="รายการลาที่อยู่ระหว่างดำเนิดการ" label="รายการลาที่อยู่ระหว่างดำเนิดการ"
:class="
leaveStore.tab == '1' ? 'bg-white text-primary rounded-borders ' : ''
"
> >
<q-badge <q-badge
color="grey-4" color="grey-4"
:class=" :class="
leaveStore.tab == '1' leaveStore.tab == '1'
? 'q-px-sm text-weight-medium text-primary q-ml-xl' ? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
: 'q-px-sm text-weight-medium text-black q-ml-xl' : 'q-px-sm text-weight-medium text-black q-ml-xl'
" "
:label="leaveStore.amounttab1" :label="leaveStore.amounttab1"
@ -83,17 +83,13 @@ function changTab() {
@click="changTab" @click="changTab"
name="2" name="2"
label="รายการลาทั้งหมด" label="รายการลาทั้งหมด"
:class="
leaveStore.tab == '2'
? 'bg-white text-primary rounded rounded-borders '
: ''
"
> >
<q-badge <q-badge
color="grey-4" color="grey-4"
:class=" :class="
leaveStore.tab == '2' leaveStore.tab == '2'
? 'q-px-sm text-weight-medium text-primary q-ml-xl' ? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
: 'q-px-sm text-weight-medium text-black q-ml-xl' : 'q-px-sm text-weight-medium text-black q-ml-xl'
" "
:label="leaveStore.amounttab2" :label="leaveStore.amounttab2"
@ -101,6 +97,7 @@ function changTab() {
/> />
</q-tab> </q-tab>
</q-tabs> </q-tabs>
<q-separator />
<q-tab-panels v-model="leaveStore.tab" animated> <q-tab-panels v-model="leaveStore.tab" animated>
<q-tab-panel name="1"> <q-tab-panel name="1">
@ -113,8 +110,8 @@ function changTab() {
<TableList /> <TableList />
</q-tab-panel> </q-tab-panel>
</q-tab-panels> </q-tab-panels>
</div>
<!-- </q-card> --> <!-- </q-card> -->
</q-card>
</div> </div>
</template> </template>