UI checkin

This commit is contained in:
Tanyalak 2023-08-21 15:56:12 +07:00
parent 94ef333bfc
commit 60bd88c4f5
8 changed files with 282 additions and 149 deletions

View file

@ -19,125 +19,117 @@
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<q-card bordered flat>
<div
class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input
class="col-8"
dense
outlined
v-model="tranferOrg"
label="สถานที่ยื่นขอลาออกจากราชการ"
:readonly="routeName != 'AddLeave'"
/>
<datepicker
class="col-2"
menu-class-name="modalfix"
v-model="dateCommand"
:locale="'th'"
autoApply
readonly
borderless
:enableTimePicker="false"
week-start="0"
>
ลาออก
</div>
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input
class="col-8"
dense
outlined
v-model="tranferOrg"
label="สถานที่ยื่นขอลาออกจากราชการ"
:readonly="routeName != 'AddLeave'"
/>
<datepicker
class="col-2"
menu-class-name="modalfix"
v-model="dateCommand"
:locale="'th'"
autoApply
readonly
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
readonly
dense
class="full-width datepicker"
:model-value="
dateCommand != null ? date2Thai(dateCommand) : null
"
:label="`${'วันที่ยื่นขอลาออกจากราชการ'}`"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกวันที่ยื่นขอลาออกจากราชการ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-2"
menu-class-name="modalfix"
v-model="dateLeave"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="routeName != 'AddLeave'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
:readonly="routeName != 'AddLeave'"
class="full-width datepicker"
:model-value="
dateLeave != null ? date2Thai(dateLeave) : null
"
:label="`${'วันที่ขอลาออกจากราชการ'}`"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12"
dense
outlined
v-model="noteReason"
label="เหตุผลที่ลาออกจากราชการ"
type="textarea"
:readonly="routeName != 'AddLeave'"
/>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
readonly
dense
class="full-width datepicker"
:model-value="
dateCommand != null ? date2Thai(dateCommand) : null
"
:label="`${'วันที่ยื่นขอลาออกจากราชการ'}`"
:rules="[
(val) =>
!!val ||
`${'กรุณาเลือกวันที่ยื่นขอลาออกจากราชการ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker
class="col-2"
menu-class-name="modalfix"
v-model="dateLeave"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="routeName != 'AddLeave'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
:readonly="routeName != 'AddLeave'"
class="full-width datepicker"
:model-value="
dateLeave != null ? date2Thai(dateLeave) : null
"
:label="`${'วันที่ขอลาออกจากราชการ'}`"
:rules="[
(val) =>
!!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-input
class="col-12"
dense
outlined
v-model="noteReason"
label="เหตุผลที่ลาออกจากราชการ"
type="textarea"
:readonly="routeName != 'AddLeave'"
/>
<q-separator />
</div>
</q-card>
</div>
</div>
</div>
<div class="row col-12 q-pa-sm" v-if="routeName == 'AddLeave'">
<q-separator v-if="routeName == 'AddLeave'"/>
<div class="row col-12 q-pa-md" v-if="routeName == 'AddLeave'">
<q-space />
<q-btn
unelevated