แก้ไข ui form การลา
This commit is contained in:
AnandaTon
parent
17d80c773a
commit
f8a95f61fa
7 changed files with 175 additions and 173 deletions
|
|
@ -257,82 +257,82 @@ function onSubmit() {
|
|||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
|
||||
<div class="col-12">
|
||||
<q-radio v-model="formData.monk" val="ever" label="เคยบวช" checked-icon="task_alt" />
|
||||
<q-radio v-model="formData.monk" val="never" label="ไม่เคยบวช" checked-icon="task_alt" />
|
||||
<q-radio v-model="formData.monk" val="ever" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
|
||||
<q-radio v-model="formData.monk" val="never" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
|
||||
</div>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่บวช</div>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.dateOrdination"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.dateOrdination"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
full-width
|
||||
borderless
|
||||
hide-bottom-space
|
||||
: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
|
||||
ref="dateOrdinationRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="formData.dateOrdination != null ? date2Thai(formData.dateOrdination) : null"
|
||||
:label="`${'วันอุปสมบท'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="dateOrdinationRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="formData.dateOrdination != null ? date2Thai(formData.dateOrdination) : 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 col-sm-6 col-md-4"
|
||||
dense
|
||||
hide-bottom-space
|
||||
ref="measureLocationNameRef"
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formData.measureLocationName"
|
||||
label="ชื่อวัด"
|
||||
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
ref="telRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formData.tel"
|
||||
bg-color="white"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
label="หมายเลขโทรศัพท์"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 q-mt-sm"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
hide-bottom-space
|
||||
ref="measureLocationNameRef"
|
||||
bg-color="white"
|
||||
outlined
|
||||
full-width
|
||||
v-model="formData.measureLocationName"
|
||||
label="ชื่อวัด"
|
||||
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
ref="telRef"
|
||||
dense
|
||||
full-width
|
||||
outlined
|
||||
v-model="formData.tel"
|
||||
bg-color="white"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
label="หมายเลขโทรศัพท์"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
ref="addressMeasureRef"
|
||||
bg-color="white"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
v-model="formData.addressMeasure"
|
||||
label="ที่อยู่"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
|
||||
|
|
|
|||
|
|
@ -247,7 +247,7 @@ function onSubmit() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<q-input class="col-12 q-mt-sm" dense bg-color="white" outlined v-model="formData.info" type="textarea" label="รายละเอียด" />
|
||||
<q-input class="col-12 col-md-12 col-sm-12" dense bg-color="white" outlined v-model="formData.info" type="textarea" label="รายละเอียด" />
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file v-model="formData.file" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space>
|
||||
|
|
|
|||
|
|
@ -389,7 +389,7 @@ const formattedSalary = computed(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||
<q-input v-model="formData.info" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
|
||||
|
|
|
|||
|
|
@ -360,7 +360,7 @@ const formattedSalary = computed(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||
<q-input v-model="formData.info" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
|
||||
|
|
|
|||
|
|
@ -269,8 +269,10 @@ function onSubmit() {
|
|||
</q-card>
|
||||
|
||||
<div v-if="isSave" class="q-mt-md">
|
||||
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
|
||||
</div>
|
||||
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
|
||||
|
|
|
|||
|
|
@ -313,105 +313,103 @@ function onValidate() {
|
|||
:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<div class="col-md-12 col-sm-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.followHistoryStart"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="followHistoryStartRef"
|
||||
for="followHistoryStartRef"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formData.followHistoryStart != null ? date2Thai(formData.followHistoryStart) : 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-12 col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.followHistoryEnd"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="followHistoryEndRef"
|
||||
for="followHistoryEndRef"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formData.followHistoryEnd != null ? date2Thai(formData.followHistoryEnd) : 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 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="followHistoryCountryRef"
|
||||
for="followHistoryCountryRef"
|
||||
v-model="formData.followHistoryCountry"
|
||||
label="ประเทศ"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="followHistoryTimeRef"
|
||||
for="followHistoryTimeRef"
|
||||
v-model="formData.followHistoryTime"
|
||||
label="เป็นเวลา"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกเวลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-weight-bold text-dark col-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.followHistoryStart"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="followHistoryStartRef"
|
||||
for="followHistoryStartRef"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formData.followHistoryStart != null ? date2Thai(formData.followHistoryStart) : 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-12 col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.followHistoryEnd"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="followHistoryEndRef"
|
||||
for="followHistoryEndRef"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formData.followHistoryEnd != null ? date2Thai(formData.followHistoryEnd) : 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 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="followHistoryCountryRef"
|
||||
for="followHistoryCountryRef"
|
||||
v-model="formData.followHistoryCountry"
|
||||
label="ประเทศ"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
ref="followHistoryTimeRef"
|
||||
for="followHistoryTimeRef"
|
||||
v-model="formData.followHistoryTime"
|
||||
label="เป็นเวลา"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกเวลา'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ function upLoadFile() {
|
|||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||
<q-input v-model="formData.info" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
|
||||
|
|
@ -203,8 +203,10 @@ function upLoadFile() {
|
|||
</q-card>
|
||||
|
||||
<div v-if="isSave" class="q-mt-md">
|
||||
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
|
||||
</div>
|
||||
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue