เพิ่ม bg-color="white" ให้กับฟอร์มลา

This commit is contained in:
AnandaTon 2023-11-23 09:31:31 +07:00
parent 7e1829ab95
commit b8fd3f8cc6
6 changed files with 102 additions and 9 deletions

View file

@ -140,6 +140,7 @@ console.log(isReadOnly.value)
for="leaveNoRef"
dense
hide-bottom-space
bg-color="white"
outlined
v-model="formData.leaveNo"
label="เขียนที่"
@ -179,6 +180,7 @@ console.log(isReadOnly.value)
for="startLeaveDateRef"
hide-bottom-space
:readonly="!edit"
bg-color="white"
class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
@ -216,6 +218,7 @@ console.log(isReadOnly.value)
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
bg-color="white"
:readonly="isReadOnly"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
@ -231,6 +234,7 @@ console.log(isReadOnly.value)
<q-input
class="col-12 col-md-2 col-sm-6"
dense
bg-color="white"
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
@ -249,6 +253,7 @@ console.log(isReadOnly.value)
label="ลาครั้งสุดท้ายเมื่อวันที่"
readonly
hide-bottom-space
bg-color="white"
/>
</div>
</div>
@ -263,6 +268,7 @@ console.log(isReadOnly.value)
v-model="formData.leaveContactTel"
mask="(###)-###-####"
hide-bottom-space
bg-color="white"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
@ -280,6 +286,7 @@ console.log(isReadOnly.value)
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
hide-bottom-space
bg-color="white"
/>
</div>
</div>
@ -293,6 +300,7 @@ console.log(isReadOnly.value)
v-model="formData.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
bg-color="white"
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
@ -306,6 +314,7 @@ console.log(isReadOnly.value)
outlined
use-chips
multiple
bg-color="white"
class="col-12 q-pl-sm col-12"
:rules="[val => !!val || `${'กรุณาเลือกไฟล์'}`]"
>

View file

@ -114,6 +114,7 @@ function onValidate() {
v-model="formData.leaveNo"
label="เขียนที่"
hide-bottom-space
bg-color="white"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
@ -143,6 +144,7 @@ function onValidate() {
ref="startLeaveDateRef"
for="startLeaveDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
@ -182,6 +184,7 @@ function onValidate() {
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
bg-color="white"
:readonly="!formData.startLeaveDate"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
@ -205,6 +208,7 @@ function onValidate() {
label="ลาครั้งสุดท้ายเมื่อวันที่"
readonly
hide-bottom-space
bg-color="white"
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
@ -213,6 +217,7 @@ function onValidate() {
dense
outlined
hide-bottom-space
bg-color="white"
ref="leaveContactTelRef"
for="leaveContactTelRef"
v-model="formData.leaveContactTel"
@ -228,6 +233,7 @@ function onValidate() {
dense
outlined
hide-bottom-space
bg-color="white"
ref="leaveContactLocationRef"
for="leaveContactLocationRef"
v-model="formData.leaveContactLocation"
@ -242,6 +248,7 @@ function onValidate() {
class="col-12 col-md-12 col-sm-12"
dense
outlined
bg-color="white"
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formData.leaveDetail"
@ -256,6 +263,7 @@ function onValidate() {
v-model="formData.file"
@added="fileUploadDoc"
dense
bg-color="white"
label="เอกสารประกอบ"
outlined
use-chips

View file

@ -143,6 +143,7 @@ function updateLeaveTotal() {
dense
outlined
hide-bottom-space
bg-color="white"
v-model="formData.leaveNo"
label="เขียนที่"
:readonly="!edit"
@ -173,6 +174,7 @@ function updateLeaveTotal() {
ref="startLeaveDateRef"
for="startLeaveDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
@ -213,6 +215,7 @@ function updateLeaveTotal() {
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
bg-color="white"
:readonly="!formData.startLeaveDate"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
@ -225,13 +228,25 @@ function updateLeaveTotal() {
</q-input>
</template>
</datepicker>
<q-input class="col-12 col-md-2 col-sm-6" dense outlined ref="leaveTotalRef" for="leaveTotalRef" v-model="formData.leaveTotal" label="จำนวนวันที่ลา" readonly hide-bottom-space />
<q-input
class="col-12 col-md-2 col-sm-6"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
bg-color="white"
/>
<div class="col-12 col-md-4 col-sm-12">
<q-input
class="col-12 col-sm-12"
ref="wifeNameRef"
for="wifeNameRef"
dense
bg-color="white"
outlined
hide-bottom-space
v-model="formData.wifeName"
@ -266,6 +281,7 @@ function updateLeaveTotal() {
ref="brithDateRef"
for="brithDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.brithDate != null ? date2Thai(formData.brithDate) : null"
@ -290,6 +306,7 @@ function updateLeaveTotal() {
mask="(###)-###-####"
unmasked-value
hide-bottom-space
bg-color="white"
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
@ -300,6 +317,7 @@ function updateLeaveTotal() {
dense
outlined
hide-bottom-space
bg-color="white"
ref="leaveContactLocationRef"
for="leaveContactLocationRef"
v-model="formData.leaveContactLocation"
@ -311,6 +329,7 @@ function updateLeaveTotal() {
</div>
<q-input
hide-bottom-space
bg-color="white"
type="textarea"
class="col-12 col-md-12 col-sm-12"
dense
@ -322,7 +341,7 @@ function updateLeaveTotal() {
:readonly="!edit"
/>
<q-file ref="fileRef" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<q-file bg-color="white" ref="fileRef" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>

View file

@ -142,6 +142,7 @@ const isReadOnly = computed(() => {
for="leaveNoRef"
dense
hide-bottom-space
bg-color="white"
outlined
v-model="formData.leaveNo"
label="เขียนที่"
@ -159,6 +160,7 @@ const isReadOnly = computed(() => {
for="lastYearVacationRef"
dense
hide-bottom-space
bg-color="white"
readonly
outlined
v-model="formData.lastYearVacation"
@ -172,6 +174,7 @@ const isReadOnly = computed(() => {
dense
readonly
hide-bottom-space
bg-color="white"
outlined
v-model="formData.currentVacation"
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
@ -202,6 +205,7 @@ const isReadOnly = computed(() => {
ref="startLeaveDateRef"
for="startLeaveDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
@ -241,6 +245,7 @@ const isReadOnly = computed(() => {
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
bg-color="white"
class="full-width datepicker"
:readonly="isReadOnly"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
@ -253,7 +258,18 @@ const isReadOnly = computed(() => {
</q-input>
</template>
</datepicker>
<q-input class="col-12 col-md-2 col-sm-6" dense outlined ref="leaveTotalRef" for="leaveTotalRef" v-model="formData.leaveTotal" label="จำนวนวันที่ลา" readonly hide-bottom-space />
<q-input
class="col-12 col-md-2 col-sm-6"
bg-color="white"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-input
@ -261,6 +277,7 @@ const isReadOnly = computed(() => {
dense
outlined
hide-bottom-space
bg-color="white"
ref="leaveContactTelRef"
for="leaveContactTelRef"
v-model="formData.leaveContactTel"
@ -276,6 +293,7 @@ const isReadOnly = computed(() => {
dense
outlined
hide-bottom-space
bg-color="white"
ref="leaveContactLocationRef"
for="leaveContactLocationRef"
v-model="formData.leaveContactLocation"
@ -288,6 +306,7 @@ const isReadOnly = computed(() => {
<q-input
type="textarea"
hide-bottom-space
bg-color="white"
class="col-12 col-md-12 col-sm-12"
dense
outlined
@ -298,7 +317,7 @@ const isReadOnly = computed(() => {
:readonly="!edit"
/>
<q-file ref="fileRef" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<q-file ref="fileRef" bg-color="white" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>

View file

@ -126,6 +126,7 @@ function onSubmit() {
class="col-12 col-sm-12"
ref="leaveNoRef"
hide-bottom-space
bg-color="white"
for="leaveNoRef"
dense
outlined
@ -160,6 +161,7 @@ function onSubmit() {
ref="startLeaveDateRef"
for="startLeaveDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
@ -199,6 +201,7 @@ function onSubmit() {
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
bg-color="white"
:readonly="!formData.startLeaveDate"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
@ -229,6 +232,7 @@ function onSubmit() {
type="textarea"
class="col-12 col-md-12 col-sm-12"
dense
bg-color="white"
outlined
ref="leaveDetailRef"
for="leaveDetailRef"
@ -237,7 +241,7 @@ function onSubmit() {
:readonly="!edit"
/>
<q-file ref="fileRef" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<q-file ref="fileRef" bg-color="white" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>

View file

@ -185,6 +185,7 @@ watch(formData.followHistoryEnd, newVal => {
for="leaveNoRef"
dense
hide-bottom-space
bg-color="white"
outlined
v-model="formData.leaveNo"
label="เขียนที่"
@ -216,6 +217,7 @@ watch(formData.followHistoryEnd, newVal => {
ref="startLeaveDateRef"
for="startLeaveDateRef"
hide-bottom-space
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
@ -256,6 +258,7 @@ watch(formData.followHistoryEnd, newVal => {
ref="endLeaveDateRef"
for="endLeaveDateRef"
hide-bottom-space
bg-color="white"
:readonly="!formData.startLeaveDate"
class="full-width datepicker"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
@ -268,12 +271,34 @@ watch(formData.followHistoryEnd, newVal => {
</q-input>
</template>
</datepicker>
<q-input class="col-12 col-md-2 col-sm-6" dense outlined ref="leaveTotalRef" for="leaveTotalRef" v-model="formData.leaveTotal" label="เป็นเวลา" readonly hide-bottom-space />
<q-input
class="col-12 col-md-2 col-sm-6"
bg-color="white"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
label="เป็นเวลา"
readonly
hide-bottom-space
/>
<div class="col-12 col-md-6 col-sm-12">
<q-input hide-bottom-space class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
<q-input hide-bottom-space bg-color="white" class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
</div>
<div class="col-12 col-md-6 col-sm-12">
<q-input hide-bottom-space class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalaryText" label="เงินเดือนปัจจุบัน" readonly />
<q-input
hide-bottom-space
bg-color="white"
class="col-12 col-sm-12"
ref="salaryRef"
for="salaryRef"
dense
outlined
v-model="formattSalaryText"
label="เงินเดือนปัจจุบัน"
readonly
/>
</div>
<div class="col-md-3 col-sm-12">
@ -283,6 +308,7 @@ watch(formData.followHistoryEnd, newVal => {
ref="spouseNameRef"
for="spouseNameRef"
dense
bg-color="white"
outlined
v-model="formData.spouseName"
label="ชื่อคู่สมรส"
@ -298,6 +324,7 @@ watch(formData.followHistoryEnd, newVal => {
for="spousePositionRef"
dense
outlined
bg-color="white"
v-model="formData.spousePosition"
label="ตำแหน่งคู่สมรส"
:readonly="!edit"
@ -312,6 +339,7 @@ watch(formData.followHistoryEnd, newVal => {
dense
hide-bottom-space
outlined
bg-color="white"
v-model="formData.spouseLevel"
label="ระดับคู่สมรส"
:readonly="!edit"
@ -326,6 +354,7 @@ watch(formData.followHistoryEnd, newVal => {
hide-bottom-space
dense
outlined
bg-color="white"
v-model="formData.dutyCountry"
label="ไปปฏิบัติราชการ ณ ประเทศ"
:readonly="!edit"
@ -359,6 +388,7 @@ watch(formData.followHistoryEnd, newVal => {
for="followHistoryStartRef"
hide-bottom-space
:readonly="isReadOnly"
bg-color="white"
class="full-width datepicker"
:model-value="formData.followHistoryStart != null ? date2Thai(formData.followHistoryStart) : null"
:label="`${'ตั้งแต่วันที่'}`"
@ -395,6 +425,7 @@ watch(formData.followHistoryEnd, newVal => {
ref="followHistoryEndRef"
for="followHistoryEndRef"
hide-bottom-space
bg-color="white"
:readonly="isReadOnly"
class="full-width datepicker"
:model-value="formData.followHistoryEnd != null ? date2Thai(formData.followHistoryEnd) : null"
@ -412,6 +443,7 @@ watch(formData.followHistoryEnd, newVal => {
dense
outlined
hide-bottom-space
bg-color="white"
ref="followHistoryCountryRef"
for="followHistoryCountryRef"
v-model="formData.followHistoryCountry"
@ -425,6 +457,7 @@ watch(formData.followHistoryEnd, newVal => {
outlined
:readonly="isReadOnly"
hide-bottom-space
bg-color="white"
ref="followHistoryTimeRef"
for="followHistoryTimeRef"
v-model="formData.followHistoryTime"
@ -436,6 +469,7 @@ watch(formData.followHistoryEnd, newVal => {
type="textarea"
class="col-12 col-md-12 col-sm-12"
dense
bg-color="white"
outlined
ref="leaveDetailRef"
for="leaveDetailRef"
@ -444,7 +478,7 @@ watch(formData.followHistoryEnd, newVal => {
:readonly="!edit"
/>
<q-file ref="fileRef" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<q-file ref="fileRef" bg-color="white" v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>