ปรับ ui เมนูการลา

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

View file

@ -278,7 +278,7 @@ const openModalCalendar = (rows: any) => {
<div class="row col-12">
<div class="row col-12 q-col-gutter-sm">
<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>
<q-space />
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined

View file

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

View file

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