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