ปรับ ui เมนูการลา
This commit is contained in:
parent
015d3cfb5b
commit
4c47b6cbab
3 changed files with 35 additions and 48 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue