แก้ไข ui form การลา

This commit is contained in:
AnandaTon 2023-11-16 15:16:16 +07:00
parent 17d80c773a
commit f8a95f61fa
7 changed files with 175 additions and 173 deletions

View file

@ -257,20 +257,20 @@ 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">
<div class="q-col-gutter-sm row">
<datepicker <datepicker
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formData.dateOrdination" v-model="formData.dateOrdination"
:locale="'th'" :locale="'th'"
autoApply autoApply
full-width
borderless borderless
hide-bottom-space
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
> >
@ -306,6 +306,7 @@ function onSubmit() {
ref="measureLocationNameRef" ref="measureLocationNameRef"
bg-color="white" bg-color="white"
outlined outlined
full-width
v-model="formData.measureLocationName" v-model="formData.measureLocationName"
label="ชื่อวัด" label="ชื่อวัด"
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]" :rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
@ -315,6 +316,7 @@ function onSubmit() {
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4"
ref="telRef" ref="telRef"
dense dense
full-width
outlined outlined
v-model="formData.tel" v-model="formData.tel"
bg-color="white" bg-color="white"
@ -324,15 +326,13 @@ function onSubmit() {
label="หมายเลขโทรศัพท์" label="หมายเลขโทรศัพท์"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]" :rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
/> />
</div>
</div>
<q-input <q-input
class="col-12 q-mt-sm" 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 || `${'กรุณากรอกที่อยู่'}`]"

View file

@ -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>

View file

@ -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="เอกสารประกอบ">

View file

@ -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="เอกสารประกอบ">

View file

@ -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">
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" /> <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ดาวนโหลด/ปโหลดแบบฟอร</div> <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">

View file

@ -313,8 +313,7 @@ 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"
@ -411,7 +410,6 @@ function onValidate() {
label="เป็นเวลา" label="เป็นเวลา"
:rules="[val => !!val || `${'กรุณาเลือกเวลา'}`]" :rules="[val => !!val || `${'กรุณาเลือกเวลา'}`]"
/> />
</div>
<q-input <q-input
hide-bottom-space hide-bottom-space

View file

@ -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">
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" /> <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ดาวนโหลด/ปโหลดแบบฟอร</div> <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">