update format

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-09-02 13:40:15 +07:00
parent b44076d99d
commit 36b3eef7fd
10 changed files with 222 additions and 226 deletions

View file

@ -139,71 +139,71 @@ watch(
)
</script>
<template>
<div class="col-12 row">
<div class="row q-col-q-gutter-sm q-pa-md">
<q-card
flat
bordered
:class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
>
<q-card-section class="bg-primary text-white q-pa-sm">
<div class="text-center text-bold">เวลาปจจ</div>
</q-card-section>
<!-- <div class="q-pa-sm text-primary">เวลาปจจ</div> -->
<q-card-section class="text-center q-pa-sm">
<div class="row q-gutter-md">
<div class="col">{{ date2Thai(dateNow) }}</div>
<div class="col">{{ timeNoew }}</div>
<div class="col-12 row">
<div class="row q-col-q-gutter-sm q-pa-md">
<q-card
flat
bordered
:class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
>
<q-card-section class="bg-primary text-white q-pa-sm">
<div class="text-center text-bold">เวลาปจจ</div>
</q-card-section>
<!-- <div class="q-pa-sm text-primary">เวลาปจจ</div> -->
<q-card-section class="text-center q-pa-sm">
<div class="row q-gutter-md">
<div class="col">{{ date2Thai(dateNow) }}</div>
<div class="col">{{ timeNoew }}</div>
</div>
</q-card-section>
</q-card>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="q-pa-sm">
<datepicker
:readonly="!statusAction"
v-model="date"
:locale="'th'"
:enableTimePicker="false"
week-start="0"
autoApply
outlined
lazy-rules
:max-date="dateNow"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:readonly="!statusAction"
ref="dateRef"
outlined
dense
:model-value="date !== null ? date2Thai(new Date(date)) : null"
:label="`${'วันที่ขอแก้ไข'}`"
format-header="YYYY-MM-DD"
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input> </template
></datepicker>
</div>
</q-card-section>
</q-card>
</q-card>
<q-card flat bordered class="col-12 q-mt-sm">
<div class="q-pa-sm">
<datepicker
:readonly="!statusAction"
v-model="date"
:locale="'th'"
:enableTimePicker="false"
week-start="0"
autoApply
outlined
lazy-rules
:max-date="dateNow"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
:readonly="!statusAction"
ref="dateRef"
outlined
dense
:model-value="date !== null ? date2Thai(new Date(date)) : null"
:label="`${'วันที่ขอแก้ไข'}`"
format-header="YYYY-MM-DD"
lazy-rules
:rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input> </template
></datepicker>
</div>
</q-card>
<!-- <q-card flat bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm" v-else>
<!-- <q-card flat bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm" v-else>
<div class="row q-gutter-md text-grey-5">
<div class="col-1">
<q-icon color="grey-5" name="calendar_today" />
@ -212,66 +212,66 @@ watch(
</div>
</q-card> -->
<q-card
flat
bordered
class="q-pa-sm col-12 q-mt-sm"
:style="{
borderColor: checkstatusBox ? '#B22222' : '',
borderWidth: checkstatusBox ? '2px' : '',
}"
>
<div class="row q-gutter-xs">
<div class="col-12">
<q-checkbox
keep-color
color="primary"
v-model="checkboxIn"
label="ขอแก้ไขเวลาเข้างาน"
/>
</div>
<div class="col-12">
<q-checkbox
keep-color
v-model="checkboxOut"
color="primary"
label="ขอแก้ไขเวลาออกงาน"
/>
<q-card
flat
bordered
class="q-pa-sm col-12 q-mt-sm"
:style="{
borderColor: checkstatusBox ? '#B22222' : '',
borderWidth: checkstatusBox ? '2px' : '',
}"
>
<div class="row q-gutter-xs">
<div class="col-12">
<q-checkbox
keep-color
color="primary"
v-model="checkboxIn"
label="ขอแก้ไขเวลาเข้างาน"
/>
</div>
<div class="col-12">
<q-checkbox
keep-color
v-model="checkboxOut"
color="primary"
label="ขอแก้ไขเวลาออกงาน"
/>
</div>
</div>
</q-card>
<div
v-if="checkstatusBox"
class="text-red-9 q-pa-sm"
style="font-size: 10px"
>
กรณาเลอก
</div>
</q-card>
<div
v-if="checkstatusBox"
class="text-red-9 q-pa-sm"
style="font-size: 10px"
>
กรณาเลอก
<q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
<q-input
ref="reasonRef"
dense
outlined
v-model="reason"
label="เหตุผล"
type="textarea"
:rows="4"
label-color="grey-5"
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
lazy-rules
hide-bottom-space
class="custom-aqua-border"
/>
</q-card>
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn color="secondary" label="บันทึก" @click="onCkickSave" />
</div>
<q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
<q-input
ref="reasonRef"
dense
outlined
v-model="reason"
label="เหตุผล"
type="textarea"
:rows="4"
label-color="grey-5"
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
lazy-rules
hide-bottom-space
class="custom-aqua-border"
/>
</q-card>
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-sm">
<q-space/>
<q-btn color="secondary" label="บันทึก" @click="onCkickSave" />
</div>
</div>
</template>
<style scoped></style>

View file

@ -41,7 +41,7 @@ watch(
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card :style="$q.screen.lt.sm ? 'width: 100%;': 'width: 320px;'">
<q-card :style="$q.screen.lt.sm ? 'width: 100%;' : 'width: 320px;'">
<HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
<FormTime
:dataById="data"