hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'develop' into working

Browse source
This commit is contained in:
Tanyalak 2023-12-18 14:22:31 +07:00
commit bc9c65488c
13 changed files with 444 additions and 527 deletions
Download patch file Download diff file Expand all files Collapse all files

810
src/modules/05_leave/components/Forms/01_SickForm.vue
View file

@ -1,510 +1,426 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch, computed } from "vue"; import { ref, reactive, watch, computed } from "vue"
import type { import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
FormData, import { useCounterMixin } from "@/stores/mixin"
FormRef, import { useLeaveStore } from "@/modules/05_leave/store"
} from "@/modules/05_leave/interface/request/SickForm"; import http from "@/plugins/http"
import { useCounterMixin } from "@/stores/mixin"; import config from "@/app.config"
import { useLeaveStore } from "@/modules/05_leave/store"; import { useQuasar } from "quasar"
import http from "@/plugins/http"; import { useRouter } from "vue-router"
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
/** Use */ /** Use */
const dataStore = useLeaveStore(); const dataStore = useLeaveStore()
const $q = useQuasar(); const $q = useQuasar()
const mixin = useCounterMixin(); const mixin = useCounterMixin()
const router = useRouter(); const router = useRouter()
const { const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails, showLoader, hideLoader } = mixin
date2Thai, const edit = ref<boolean>(true)
dateToISO,
dialogConfirm,
success,
messageError,
fails,
showLoader,
hideLoader,
} = mixin;
const edit = ref<boolean>(true);
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: null, default: null,
}, },
onSubmit: { onSubmit: {
type: Function, type: Function,
default: () => "", default: () => "",
}, },
}); })
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formDataSick = reactive<any>({ const formDataSick = reactive<any>({
type: dataStore.typeId, type: dataStore.typeId,
leaveWrote: "", leaveWrote: "",
leaveStartDate: null, leaveStartDate: null,
leaveEndDate: null, leaveEndDate: null,
halfDay: "day", halfDay: "day",
leaveTotal: "", leaveTotal: "",
leaveLast: null, leaveLast: null,
leaveNumber: "", leaveNumber: "",
leaveAddress: "", leaveAddress: "",
leaveDetail: "", leaveDetail: "",
leaveDocument: [], leaveDocument: [],
}); })
/** ตัวแปร ref สำหรับแสดง validate */ /** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null); const leaveWroteRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null); const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null); const leaveEndDateRef = ref<object | null>(null)
const halfDayRef = ref<object | null>(null); const halfDayRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null); const leaveTotalRef = ref<object | null>(null)
const leaveLastRef = ref<object | null>(null); const leaveLastRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null); const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null); const leaveAddressRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null); const leaveDetailRef = ref<object | null>(null)
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */ /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = { const FormRef: FormRef = {
leaveWrote: leaveWroteRef, leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef, leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef, leaveEndDate: leaveEndDateRef,
halfDay: halfDayRef, halfDay: halfDayRef,
leaveTotal: leaveTotalRef, leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef, leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef, leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef, leaveDetail: leaveDetailRef,
}; }
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */ /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => { watch(props.data, async () => {
// console.log("data==>", props.data) // console.log("data==>", props.data)
formDataSick.leaveWrote = props.data.leaveWrote; formDataSick.leaveWrote = props.data.leaveWrote
formDataSick.leaveStartDate = props.data.leaveStartDate; formDataSick.leaveStartDate = props.data.leaveStartDate
formDataSick.leaveEndDate = props.data.leaveEndDate; formDataSick.leaveEndDate = props.data.leaveEndDate
formDataSick.contractTel = props.data.contractTel; formDataSick.contractTel = props.data.contractTel
formDataSick.leaveTotal = props.data.leaveTotal; formDataSick.leaveTotal = props.data.leaveTotal
formDataSick.leaveNumber = props.data.leaveNumber; formDataSick.leaveNumber = props.data.leaveNumber
formDataSick.leaveDetail = props.data.leaveDetail; formDataSick.leaveDetail = props.data.leaveDetail
formDataSick.leaveDocument = props.data.leaveDocument; formDataSick.leaveDocument = props.data.leaveDocument
}); })
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */ /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>(""); const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([]); const fileDocDataUpload = ref<File[]>([])
async function fileUploadDoc(files: any) { async function fileUploadDoc(files: any) {
files.forEach((file: any) => { files.forEach((file: any) => {
fileDocDataUpload.value.push(file); fileDocDataUpload.value.push(file)
}); })
} }
/** /**
* function รีเซทค่า leaveStartDate เเละ leaveEndDate * function รีเซทค่า leaveStartDate เเละ leaveEndDate
*/ */
function resetDate() { function resetDate() {
if ( if (formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon") {
formDataSick.halfDay === "half_day_morning" || formDataSick.leaveStartDate = null
formDataSick.halfDay === "half_day_afternoon" formDataSick.leaveEndDate = null
) { }
formDataSick.leaveStartDate = null; console.log("testnull")
formDataSick.leaveEndDate = null;
}
console.log("testnull");
} }
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */ /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() { function onValidate() {
const hasError = []; const hasError = []
for (const key in FormRef) { for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) { if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]; const property = FormRef[key]
if (property.value && typeof property.value.validate === "function") { if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate(); const isValid = property.value.validate()
hasError.push(isValid); hasError.push(isValid)
} }
} }
} }
if (hasError.every((result) => result === true)) { if (hasError.every(result => result === true)) {
onSubmit(); onSubmit()
} }
} }
/** ฟังก์ชั่น บันทึก */ /** ฟังก์ชั่น บันทึก */
const onSubmit = async () => { const onSubmit = async () => {
dialogConfirm( dialogConfirm(
$q, $q,
async () => { async () => {
await saveFormData(); await saveFormData()
}, },
"ยืนยันการยื่นใบลา", "ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?" "ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
); )
}; }
/** /**
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
*/ */
async function saveFormData() { async function saveFormData() {
showLoader(); showLoader()
const formData = new FormData(); const formData = new FormData()
// if (formDataSick.leaveDocument.length > 0) { // if (formDataSick.leaveDocument.length > 0) {
// const blob = formDataSick.leaveDocument.slice( // const blob = formDataSick.leaveDocument.slice(
// 0, // 0,
// formDataSick.leaveDocument[0].size // formDataSick.leaveDocument[0].size
// ); // );
// const newFile = new File(blob, nameFile.value, { // const newFile = new File(blob, nameFile.value, {
// type: formDataSick.leaveDocument[0].type, // type: formDataSick.leaveDocument[0].type,
// }); // });
// formData.append("leaveDocument", newFile); // formData.append("leaveDocument", newFile);
// } // }
formData.append("leaveDocument", formDataSick.leaveDocument); formData.append("leaveDocument", formDataSick.leaveDocument)
formData.append("type", formDataSick.type); formData.append("type", formDataSick.type)
formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate)); formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate)); formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate))
formData.append("leaveWrote", formDataSick.leaveWrote); formData.append("leaveWrote", formDataSick.leaveWrote)
formData.append("leaveAddress", formDataSick.leaveAddress); formData.append("leaveAddress", formDataSick.leaveAddress)
formData.append("leaveNumber", formDataSick.leaveNumber); formData.append("leaveNumber", formDataSick.leaveNumber)
formData.append("leaveDetail", formDataSick.leaveDetail); formData.append("leaveDetail", formDataSick.leaveDetail)
await http await http
.post(config.API.leaveUser(), formData) .post(config.API.leaveUser(), formData)
.then(() => { .then(() => {
success($q, "บันทึกสำเร็จ"); success($q, "บันทึกสำเร็จ")
router.push(`/leave`); router.push(`/leave`)
}) })
.catch((e: any) => { .catch((e: any) => {
messageError($q, e); messageError($q, e)
}) })
.finally(() => { .finally(() => {
hideLoader(); hideLoader()
}); })
} }
/** /**
* check ว่าลาได้ไหม จาก api * check ว่าลาได้ไหม จาก api
* @param formData * @param formData
*/ */
const isLeave = ref<boolean>(true); const isLeave = ref<boolean>(true)
async function FetchCheck() { async function FetchCheck() {
await http await http
.post(config.API.leaveCheck(), { .post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null, type: dataStore.typeId ?? null,
StartLeaveDate: formDataSick.leaveStartDate ?? null, StartLeaveDate: formDataSick.leaveStartDate ?? null,
EndLeaveDate: formDataSick.leaveEndDate ?? null, EndLeaveDate: formDataSick.leaveEndDate ?? null,
}) })
.then((res: any) => { .then((res: any) => {
const data = res.data.result; const data = res.data.result
isLeave.value = data.isLeave; isLeave.value = data.isLeave
if (data.isLeave === true) { if (data.isLeave === true) {
formDataSick.leaveTotal = formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
data.totalDate - data.sumDateWork - data.sumDateHoliday; } else {
} else { fails($q, "ไม่สามารถลาได้")
fails($q, "ไม่สามารถลาได้"); }
} })
}) .catch((e: any) => {
.catch((e: any) => { messageError($q, e)
messageError($q, e); })
});
} }
/** /**
* ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
*/ */
const isReadOnly = computed(() => { const isReadOnly = computed(() => {
const conditionHalfDay = const conditionHalfDay = formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon"
formDataSick.halfDay === "half_day_morning" || if (conditionHalfDay) {
formDataSick.halfDay === "half_day_afternoon"; formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
if (conditionHalfDay) { formDataSick.leaveTotal = "0.5 วัน "
formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null } else {
formDataSick.leaveTotal = "0.5 วัน "; formDataSick.leaveTotal = null
} else { }
formDataSick.leaveTotal = null; return conditionHalfDay
} })
return conditionHalfDay;
});
</script> </script>
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว --> <!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
<template> <template>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" /> <q-icon name="mdi-numeric-3-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> </div>
<form @submit.prevent.stop="onValidate"> <form @submit.prevent.stop="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
outlined outlined
v-model="formDataSick.leaveWrote" v-model="formDataSick.leaveWrote"
label="เขียนที่" label="เขียนที่"
:readonly="!edit" :readonly="!edit"
:rules="[(val) => !!val || `${'เขียนที่'}`]" :rules="[val => !!val || `${'เขียนที่'}`]"
/> />
<div class="col-12 col-md-4 col-sm-12"> <div class="col-12 col-md-4 col-sm-12">
<q-radio <q-radio v-model="formDataSick.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
v-model="formDataSick.halfDay" <q-radio v-model="formDataSick.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
val="day" <q-radio v-model="formDataSick.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
label="ลาทั้งวัน" </div>
checked-icon="task_alt" <div class="full-width">
/> <div class="q-col-gutter-sm row">
<q-radio <datepicker
v-model="formDataSick.halfDay" class="col-12 col-md-3 col-sm-6"
val="half_day_morning" menu-class-name="modalfix"
label="ลาครึ่งวันเช้า" v-model="formDataSick.leaveStartDate"
checked-icon="task_alt" :locale="'th'"
@update:model-value="resetDate" autoApply
/> borderless
<q-radio :enableTimePicker="false"
v-model="formDataSick.halfDay" week-start="0"
val="half_day_afternoon" :readonly="!edit"
label="ลาครึ่งวันบ่าย" >
checked-icon="task_alt" <template #year="{ year }">
@update:model-value="resetDate" {{ year + 543 }}
/> </template>
</div> <template #year-overlay-value="{ value }">
<div class="full-width"> {{ parseInt(value + 543) }}
<div class="q-col-gutter-sm row"> </template>
<datepicker <template #trigger>
class="col-12 col-md-3 col-sm-6" <q-input
menu-class-name="modalfix" outlined
v-model="formDataSick.leaveStartDate" dense
:locale="'th'" ref="leaveStartDateRef"
autoApply for="leaveStartDateRef"
borderless hide-bottom-space
:enableTimePicker="false" :readonly="!edit"
week-start="0" bg-color="white"
:readonly="!edit" class="full-width datepicker cursor-pointer inputgreen"
> :model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
<template #year="{ year }"> :label="`${'ลาตั้งแต่วันที่'}`"
{{ year + 543 }} :rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
</template> style="color: var(--q-primary)"
<template #year-overlay-value="{ value }"> >
{{ parseInt(value + 543) }} <template v-slot:prepend>
</template> <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
<template #trigger> </template>
<q-input </q-input>
outlined </template>
dense </datepicker>
ref="leaveStartDateRef"
for="leaveStartDateRef"
hide-bottom-space
:readonly="!edit"
bg-color="white"
class="full-width datepicker"
:model-value="
formDataSick.leaveStartDate != null
? date2Thai(formDataSick.leaveStartDate)
: 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 <datepicker
class="col-12 col-md-3 col-sm-6" class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataSick.leaveEndDate" v-model="formDataSick.leaveEndDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="isReadOnly" :readonly="isReadOnly"
@update:model-value="FetchCheck()" @update:model-value="FetchCheck()"
:min-date=" :min-date="formDataSick.leaveStartDate ? new Date(formDataSick.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
formDataSick.leaveStartDate >
? new Date( <template #year="{ year }">
formDataSick.leaveStartDate.getTime() * 60 * 60 * 1000 {{ year + 543 }}
) </template>
: null <template #year-overlay-value="{ value }">
" {{ parseInt(value + 543) }}
> </template>
<template #year="{ year }"> <template #trigger>
{{ year + 543 }} <q-input
</template> outlined
<template #year-overlay-value="{ value }"> dense
{{ parseInt(value + 543) }} ref="leaveEndDateRef"
</template> for="leaveEndDateRef"
<template #trigger> hide-bottom-space
<q-input bg-color="white"
outlined :readonly="isReadOnly"
dense class="full-width datepicker cursor-pointer inputgreen"
ref="leaveEndDateRef" :model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null"
for="leaveEndDateRef" :label="`${'ลาถึงวันที่'}`"
hide-bottom-space :rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
bg-color="white" >
:readonly="isReadOnly" <template v-slot:prepend>
class="full-width datepicker" <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
:model-value=" </template>
formDataSick.leaveEndDate != null </q-input>
? date2Thai(formDataSick.leaveEndDate) </template>
: null </datepicker>
" <q-input
:label="`${'ลาถึงวันที่'}`" class="col-12 col-md-3 col-sm-6"
:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" dense
> bg-color="white"
<template v-slot:prepend> outlined
<q-icon ref="leaveTotalRef"
name="event" for="leaveTotalRef"
class="cursor-pointer" v-model="formDataSick.leaveTotal"
style="color: var(--q-primary)" label="จำนวนวันที่ลา"
> readonly
</q-icon> hide-bottom-space
</template> />
</q-input> <q-input
</template> class="col-12 col-md-3 col-sm-6"
</datepicker> dense
<q-input outlined
class="col-12 col-md-3 col-sm-6" ref="leaveLastRef"
dense for="leaveLastRef"
bg-color="white" v-model="dataStore.leaveLast"
outlined label="ลาครั้งสุดท้ายเมื่อวันที่"
ref="leaveTotalRef" readonly
for="leaveTotalRef" hide-bottom-space
v-model="formDataSick.leaveTotal" bg-color="white"
label="จำนวนวันที่ลา" />
readonly </div>
hide-bottom-space </div>
/> <div class="full-width">
<q-input <div class="q-col-gutter-sm row">
class="col-12 col-md-3 col-sm-6" <q-input
dense class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
outlined dense
ref="leaveLastRef" outlined
for="leaveLastRef" ref="leaveNumberRef"
v-model="dataStore.leaveLast" for="leaveNumberRef"
label="ลาครั้งสุดท้ายเมื่อวันที่" v-model="formDataSick.leaveNumber"
readonly mask="(###)-###-####"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
/> unmasked-value
</div> label="หมายเลขโทรศัพท์ที่ติดต่อได้"
</div> :readonly="!edit"
<div class="full-width"> :rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
<div class="q-col-gutter-sm row"> />
<q-input
class="col-12 col-md-3 col-sm-6"
dense
outlined
ref="leaveNumberRef"
for="leaveNumberRef"
v-model="formDataSick.leaveNumber"
mask="(###)-###-####"
hide-bottom-space
bg-color="white"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit"
:rules="[
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/>
<q-input <q-input
class="col-12 col-md-9 col-sm-6" class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
dense dense
outlined outlined
ref="leaveAddressRef" ref="leaveAddressRef"
for="leaveAddressRef" for="leaveAddressRef"
v-model="formDataSick.leaveAddress" v-model="formDataSick.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา" label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit" :readonly="!edit"
:rules="[ :rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`, hide-bottom-space
]" bg-color="white"
hide-bottom-space />
bg-color="white" </div>
/> </div>
</div> <q-input
</div> type="textarea"
<q-input class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
type="textarea" dense
class="col-12 col-md-12 col-sm-12" outlined
dense ref="leaveDetailRef"
outlined for="leaveDetailRef"
ref="leaveDetailRef" v-model="formDataSick.leaveDetail"
for="leaveDetailRef" label="รายละเอียด"
v-model="formDataSick.leaveDetail" :readonly="!edit"
label="รายละเอียด" bg-color="white"
:readonly="!edit" />
bg-color="white" <div class="full-width">
/> <div class="q-col-gutter-sm row">
<div class="full-width"> <q-file for="leaveDocumentRef" v-model="formDataSick.leaveDocument" dense label="เอกสารประกอบ" outlined use-chips bg-color="white" class="col-12 q-pl-sm col-12">
<div class="q-col-gutter-sm row"> <template v-slot:prepend>
<q-file <q-icon name="attach_file" color="primary" />
for="leaveDocumentRef" </template>
v-model="formDataSick.leaveDocument" </q-file>
dense </div>
label="เอกสารประกอบ" </div>
outlined <div class="col-12 col-sm-6 row" v-if="!edit">
use-chips <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
bg-color="white" <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
class="col-12 q-pl-sm col-12" </div>
> <q-card bordered flat class="full-width">
<template v-slot:prepend> <q-list separator>
<q-icon name="attach_file" color="primary" /> <q-item v-for="(file, index) in formDataSick.leaveDocument" :key="index" class="q-my-xs">
</template> <q-item-section>
</q-file> <q-item-label class="full-width ellipsis">
</div> {{ file.name }}
</div> </q-item-label>
<div class="col-12 col-sm-6 row" v-if="!edit"> <q-item-label caption> </q-item-label>
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"> </q-item-section>
<div class="q-pl-sm text-weight-bold text-dark"> </q-item>
เอกสารเพิ่มเติม </q-list>
</div> </q-card>
</div> </div>
<q-card bordered flat class="full-width"> </div>
<q-list separator> </q-card>
<q-item
v-for="(file, index) in formDataSick.leaveDocument"
:key="index"
class="q-my-xs"
>
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" /> <q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md"> <div class="row col-12 q-pt-md">
<q-space /> <q-space />
<q-btn <q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
id="onSubmit" </div>
type="submit" </form>
unelevated
dense
class="q-px-md items-center btnBlue"
label="ยื่นใบลา"
/>
</div>
</form>
</template> </template>

12
src/modules/05_leave/components/Forms/03_Birth.vue
View file

@ -180,7 +180,7 @@ async function saveFormData() {
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
@ -194,7 +194,7 @@ async function saveFormData() {
/> />
<datepicker <datepicker
class="col-12 col-md-3 col-sm-12" class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataBirth.leaveStartDate" v-model="formDataBirth.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -233,7 +233,7 @@ async function saveFormData() {
</datepicker> </datepicker>
<datepicker <datepicker
class="col-12 col-md-3 col-sm-12" class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataBirth.leaveEndDate" v-model="formDataBirth.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -299,7 +299,7 @@ async function saveFormData() {
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <q-input
class="col-12 col-md-3 col-sm-12" class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -315,7 +315,7 @@ async function saveFormData() {
/> />
<q-input <q-input
class="col-12 col-md-9 col-sm-12" class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -331,7 +331,7 @@ async function saveFormData() {
</div> </div>
<q-input <q-input
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
bg-color="white" bg-color="white"

16
src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
View file

@ -196,7 +196,7 @@ async function saveFormData() {
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input <q-input
class="col-12 col-12 col-sm-12" class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
@ -209,7 +209,7 @@ async function saveFormData() {
:rules="[val => !!val || `${'เขียนที่'}`]" :rules="[val => !!val || `${'เขียนที่'}`]"
/> />
<datepicker <datepicker
class="col-12 col-md-4 col-sm-12" class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataHelpWife.leaveStartDate" v-model="formDataHelpWife.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -248,7 +248,7 @@ async function saveFormData() {
</datepicker> </datepicker>
<datepicker <datepicker
class="col-12 col-md-4 col-sm-12" class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataHelpWife.leaveEndDate" v-model="formDataHelpWife.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -299,7 +299,7 @@ async function saveFormData() {
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
/> />
<div class="col-12 col-md-4 col-sm-12"> <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12"
ref="wifeDayNameRef" ref="wifeDayNameRef"
@ -316,7 +316,7 @@ async function saveFormData() {
</div> </div>
<datepicker <datepicker
class="col-12 col-md-4 col-sm-12" class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataHelpWife.wifeDayDateBorn" v-model="formDataHelpWife.wifeDayDateBorn"
:locale="'th'" :locale="'th'"
@ -356,7 +356,7 @@ async function saveFormData() {
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <q-input
class="col-12 col-md-3 col-sm-12" class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
ref="leaveNumberRef" ref="leaveNumberRef"
@ -372,7 +372,7 @@ async function saveFormData() {
/> />
<q-input <q-input
class="col-12 col-md-9 col-sm-12" class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -390,7 +390,7 @@ async function saveFormData() {
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
ref="leaveDetailRef" ref="leaveDetailRef"

12
src/modules/05_leave/components/Forms/05_VacationForm.vue
View file

@ -213,7 +213,7 @@ const isReadOnly = computed(() => {
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm"> <div class="row q-pa-sm q-col-gutter-sm">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
@ -257,7 +257,7 @@ const isReadOnly = computed(() => {
/> />
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6" class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataVacation.leaveStartDate" v-model="formDataVacation.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -296,7 +296,7 @@ const isReadOnly = computed(() => {
</datepicker> </datepicker>
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6" class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataVacation.leaveEndDate" v-model="formDataVacation.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -350,7 +350,7 @@ const isReadOnly = computed(() => {
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <q-input
class="col-12 col-md-3 col-sm-12" class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -366,7 +366,7 @@ const isReadOnly = computed(() => {
/> />
<q-input <q-input
class="col-12 col-md-9 col-sm-6" class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -384,7 +384,7 @@ const isReadOnly = computed(() => {
type="textarea" type="textarea"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
class="col-12 col-md-12 col-sm-12" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
ref="leaveDetailRef" ref="leaveDetailRef"

20
src/modules/05_leave/components/Forms/06_OrdinationForm.vue
View file

@ -210,7 +210,7 @@ function updateLeaveTotal() {
<div class="row q-pa-sm q-col-gutter-sm"> <div class="row q-pa-sm q-col-gutter-sm">
<q-input <q-input
ref="leaveWroteRef" ref="leaveWroteRef"
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
bg-color="white" bg-color="white"
@ -221,7 +221,7 @@ function updateLeaveTotal() {
/> />
<datepicker <datepicker
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataOrdination.leaveStartDate" v-model="formDataOrdination.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -256,7 +256,7 @@ function updateLeaveTotal() {
</datepicker> </datepicker>
<datepicker <datepicker
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataOrdination.leaveEndDate" v-model="formDataOrdination.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -391,7 +391,7 @@ function updateLeaveTotal() {
<div class="text-weight-bold text-dark col-12">สถานที่บวช</div> <div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
<datepicker <datepicker
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataOrdination.ordainDayOrdination" v-model="formDataOrdination.ordainDayOrdination"
:locale="'th'" :locale="'th'"
@ -428,7 +428,7 @@ function updateLeaveTotal() {
</datepicker> </datepicker>
<q-input <q-input
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense dense
hide-bottom-space hide-bottom-space
ref="ordainDayLocationNameRef" ref="ordainDayLocationNameRef"
@ -441,7 +441,7 @@ function updateLeaveTotal() {
/> />
<q-input <q-input
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
ref="ordainDayLocationNumberRef" ref="ordainDayLocationNumberRef"
dense dense
full-width full-width
@ -455,7 +455,7 @@ function updateLeaveTotal() {
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]" :rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
/> />
<q-input <q-input
class="col-12 col-md-12 col-sm-12" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
ref="ordainDayLocationAddressRef" ref="ordainDayLocationAddressRef"
bg-color="white" bg-color="white"
@ -469,7 +469,7 @@ function updateLeaveTotal() {
<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>
<q-input <q-input
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense dense
ref="ordainDayBuddhistLentNameRef" ref="ordainDayBuddhistLentNameRef"
bg-color="white" bg-color="white"
@ -481,7 +481,7 @@ function updateLeaveTotal() {
/> />
<q-input <q-input
class="col-12" class="col-12 cursor-pointer inputgreen"
dense dense
ref="ordainDayBuddhistLentAddressRef" ref="ordainDayBuddhistLentAddressRef"
bg-color="white" bg-color="white"
@ -494,7 +494,7 @@ function updateLeaveTotal() {
/> />
<q-input <q-input
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined

8
src/modules/05_leave/components/Forms/07_HajjForm.vue
View file

@ -171,7 +171,7 @@ function updateLeaveTotal() {
<q-input <q-input
v-model="formDataHaji.leaveWrote" v-model="formDataHaji.leaveWrote"
ref="leaveWroteRef" ref="leaveWroteRef"
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -184,7 +184,7 @@ function updateLeaveTotal() {
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<datepicker <datepicker
v-model="formDataHaji.leaveStartDate" v-model="formDataHaji.leaveStartDate"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@ -219,7 +219,7 @@ function updateLeaveTotal() {
<datepicker <datepicker
v-model="formDataHaji.leaveEndDate" v-model="formDataHaji.leaveEndDate"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@ -314,7 +314,7 @@ function updateLeaveTotal() {
<q-radio v-model="formDataHaji.hajjDayStatus" val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" /> <q-radio v-model="formDataHaji.hajjDayStatus" val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" />
</div> </div>
<q-input v-model="formDataHaji.leaveDetail" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" /> <q-input v-model="formDataHaji.leaveDetail" class="col-12 q-mt-sm cursor-pointer inputgreen" 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="formDataHaji.leaveDocument" bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined multiple hide-bottom-space> <q-file v-model="formDataHaji.leaveDocument" bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined multiple hide-bottom-space>

18
src/modules/05_leave/components/Forms/08_MilitaryForm.vue
View file

@ -185,7 +185,7 @@ function updateLeaveTotal() {
<div class="row q-pa-sm q-col-gutter-sm"> <div class="row q-pa-sm q-col-gutter-sm">
<q-input <q-input
ref="leaveWroteRef" ref="leaveWroteRef"
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
bg-color="white" bg-color="white"
@ -196,7 +196,7 @@ function updateLeaveTotal() {
/> />
<datepicker <datepicker
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataMilitary.leaveStartDate" v-model="formDataMilitary.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -231,7 +231,7 @@ function updateLeaveTotal() {
</datepicker> </datepicker>
<datepicker <datepicker
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataMilitary.leaveEndDate" v-model="formDataMilitary.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -285,7 +285,7 @@ function updateLeaveTotal() {
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <q-input
ref="absentDaySummonRef" ref="absentDaySummonRef"
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined
@ -297,7 +297,7 @@ function updateLeaveTotal() {
<q-input <q-input
ref="atRef" ref="atRef"
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined
@ -312,7 +312,7 @@ function updateLeaveTotal() {
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <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 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataMilitary.absentDayRegistorDate" v-model="formDataMilitary.absentDayRegistorDate"
:locale="'th'" :locale="'th'"
@ -347,7 +347,7 @@ function updateLeaveTotal() {
</datepicker> </datepicker>
<q-input <q-input
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense dense
bg-color="white" bg-color="white"
ref="absentDayGetInRef" ref="absentDayGetInRef"
@ -359,7 +359,7 @@ function updateLeaveTotal() {
/> />
<q-input <q-input
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined
@ -372,7 +372,7 @@ function updateLeaveTotal() {
</div> </div>
</div> </div>
<q-input class="col-12 col-md-12 col-sm-12" dense bg-color="white" outlined v-model="formDataMilitary.leaveDetail" type="textarea" label="รายละเอียด" /> <q-input class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" dense bg-color="white" outlined v-model="formDataMilitary.leaveDetail" type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<q-file v-model="formDataMilitary.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space use-chips @added="fileUploadDoc"> <q-file v-model="formDataMilitary.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space use-chips @added="fileUploadDoc">

22
src/modules/05_leave/components/Forms/09_StudyForm.vue
View file

@ -207,7 +207,7 @@ const formattedleaveSalary = computed(() => {
<q-input <q-input
v-model="formDataStudy.leaveWrote" v-model="formDataStudy.leaveWrote"
ref="leaveWroteRef" ref="leaveWroteRef"
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -218,7 +218,7 @@ const formattedleaveSalary = computed(() => {
<datepicker <datepicker
v-model="formDataStudy.leaveStartDate" v-model="formDataStudy.leaveStartDate"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@ -254,7 +254,7 @@ const formattedleaveSalary = computed(() => {
<datepicker <datepicker
v-model="formDataStudy.leaveEndDate" v-model="formDataStudy.leaveEndDate"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@ -403,7 +403,7 @@ const formattedleaveSalary = computed(() => {
<q-input <q-input
v-model="formDataStudy.studyDayUniversityName" v-model="formDataStudy.studyDayUniversityName"
ref="studyDayUniversityNameRef" ref="studyDayUniversityNameRef"
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -415,7 +415,7 @@ const formattedleaveSalary = computed(() => {
<q-input <q-input
v-model="formDataStudy.studyDayDegreeLevel" v-model="formDataStudy.studyDayDegreeLevel"
ref="studyDayDegreeLevelRef" ref="studyDayDegreeLevelRef"
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -427,7 +427,7 @@ const formattedleaveSalary = computed(() => {
<q-input <q-input
v-model="formDataStudy.studyDaySubject" v-model="formDataStudy.studyDaySubject"
ref="studyDaySubjectRef" ref="studyDaySubjectRef"
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -439,7 +439,7 @@ const formattedleaveSalary = computed(() => {
<q-input <q-input
v-model="formDataStudy.studyDayCountry" v-model="formDataStudy.studyDayCountry"
ref="studyDayCountryRef" ref="studyDayCountryRef"
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -451,7 +451,7 @@ const formattedleaveSalary = computed(() => {
<q-input <q-input
v-model="formDataStudy.studyDayScholarship" v-model="formDataStudy.studyDayScholarship"
ref="studyDayScholarshipRef" ref="studyDayScholarshipRef"
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -463,7 +463,7 @@ const formattedleaveSalary = computed(() => {
<q-input <q-input
v-model="formDataStudy.leaveNumber" v-model="formDataStudy.leaveNumber"
ref="leaveNumberRef" ref="leaveNumberRef"
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -477,7 +477,7 @@ const formattedleaveSalary = computed(() => {
<q-input <q-input
v-model="formDataStudy.leaveAddress" v-model="formDataStudy.leaveAddress"
ref="leaveAddressRef" ref="leaveAddressRef"
class="col-12" class="col-12 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -488,7 +488,7 @@ const formattedleaveSalary = computed(() => {
</div> </div>
</div> </div>
<q-input v-model="formDataStudy.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" /> <q-input v-model="formDataStudy.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" 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="formDataStudy.leaveDocument" bg-color="white" dense outlined multiple use-chips @added="fileUploadDoc" label="เอกสารประกอบ"> <q-file v-model="formDataStudy.leaveDocument" bg-color="white" dense outlined multiple use-chips @added="fileUploadDoc" label="เอกสารประกอบ">

20
src/modules/05_leave/components/Forms/10_TrainForm.vue
View file

@ -208,7 +208,7 @@ const formattedSalary = computed(() => {
<q-input <q-input
v-model="formDataTrain.leaveWrote" v-model="formDataTrain.leaveWrote"
ref="leaveWroteRef" ref="leaveWroteRef"
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -219,7 +219,7 @@ const formattedSalary = computed(() => {
<datepicker <datepicker
v-model="formDataTrain.leaveStartDate" v-model="formDataTrain.leaveStartDate"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@ -255,7 +255,7 @@ const formattedSalary = computed(() => {
<datepicker <datepicker
v-model="formDataTrain.leaveEndDate" v-model="formDataTrain.leaveEndDate"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@ -392,7 +392,7 @@ const formattedSalary = computed(() => {
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <q-input
v-model="formDataTrain.studyDayTrainingSubject" v-model="formDataTrain.studyDayTrainingSubject"
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
ref="studyDayTrainingSubjectRef" ref="studyDayTrainingSubjectRef"
bg-color="white" bg-color="white"
dense dense
@ -405,7 +405,7 @@ const formattedSalary = computed(() => {
<q-input <q-input
v-model="formDataTrain.studyDayTrainingName" v-model="formDataTrain.studyDayTrainingName"
ref="studyDayTrainingNameRef" ref="studyDayTrainingNameRef"
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -417,7 +417,7 @@ const formattedSalary = computed(() => {
<q-input <q-input
v-model="formDataTrain.studyDayCountry" v-model="formDataTrain.studyDayCountry"
ref="studyDayCountryRef" ref="studyDayCountryRef"
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined
@ -429,7 +429,7 @@ const formattedSalary = computed(() => {
<q-input <q-input
v-model="formDataTrain.studyDayScholarship" v-model="formDataTrain.studyDayScholarship"
ref="studyDayScholarshipRef" ref="studyDayScholarshipRef"
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -440,7 +440,7 @@ const formattedSalary = computed(() => {
<q-input <q-input
v-model="formDataTrain.leaveNumber" v-model="formDataTrain.leaveNumber"
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
ref="leaveNumberRef" ref="leaveNumberRef"
dense dense
outlined outlined
@ -455,7 +455,7 @@ const formattedSalary = computed(() => {
<q-input <q-input
v-model="formDataTrain.leaveAddress" v-model="formDataTrain.leaveAddress"
ref="leaveAddressRef" ref="leaveAddressRef"
class="col-12" class="col-12 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -466,7 +466,7 @@ const formattedSalary = computed(() => {
</div> </div>
</div> </div>
<q-input v-model="formDataTrain.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" /> <q-input v-model="formDataTrain.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" 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="formDataTrain.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ"> <q-file v-model="formDataTrain.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">

8
src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue
View file

@ -183,7 +183,7 @@ async function saveFormData() {
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
@ -197,7 +197,7 @@ async function saveFormData() {
/> />
<datepicker <datepicker
class="col-12 col-md-6 col-sm-6" class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveStartDate" v-model="formDataWorkInternational.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -236,7 +236,7 @@ async function saveFormData() {
</datepicker> </datepicker>
<datepicker <datepicker
class="col-12 col-md-6 col-sm-6" class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveEndDate" v-model="formDataWorkInternational.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -291,7 +291,7 @@ async function saveFormData() {
<q-input <q-input
hide-bottom-space hide-bottom-space
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined

16
src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
View file

@ -225,7 +225,7 @@ function updateLeaveTotal() {
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
@ -238,7 +238,7 @@ function updateLeaveTotal() {
:rules="[val => !!val || `${'เขียนที่'}`]" :rules="[val => !!val || `${'เขียนที่'}`]"
/> />
<datepicker <datepicker
class="col-12 col-md-4 col-sm-12" class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataFollowSpouse.leaveStartDate" v-model="formDataFollowSpouse.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -277,7 +277,7 @@ function updateLeaveTotal() {
</datepicker> </datepicker>
<datepicker <datepicker
class="col-12 col-md-4 col-sm-12" class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataFollowSpouse.leaveEndDate" v-model="formDataFollowSpouse.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -359,7 +359,7 @@ function updateLeaveTotal() {
<div class="col-md-3 col-sm-12"> <div class="col-md-3 col-sm-12">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
hide-bottom-space hide-bottom-space
ref="coupleDayNameRef" ref="coupleDayNameRef"
for="coupleDayNameRef" for="coupleDayNameRef"
@ -374,7 +374,7 @@ function updateLeaveTotal() {
</div> </div>
<div class="col-md-3 col-sm-12"> <div class="col-md-3 col-sm-12">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
hide-bottom-space hide-bottom-space
ref="coupleDayPositionRef" ref="coupleDayPositionRef"
for="coupleDayPositionRef" for="coupleDayPositionRef"
@ -389,7 +389,7 @@ function updateLeaveTotal() {
</div> </div>
<div class="col-md-3 col-sm-12"> <div class="col-md-3 col-sm-12">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="coupleDayLevelRef" ref="coupleDayLevelRef"
for="coupleDayLevelRef" for="coupleDayLevelRef"
dense dense
@ -404,7 +404,7 @@ function updateLeaveTotal() {
</div> </div>
<div class="col-md-3 col-sm-12"> <div class="col-md-3 col-sm-12">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="coupleDayLevelCountryRef" ref="coupleDayLevelCountryRef"
for="coupleDayLevelCountryRef" for="coupleDayLevelCountryRef"
hide-bottom-space hide-bottom-space
@ -523,7 +523,7 @@ function updateLeaveTotal() {
<q-input <q-input
hide-bottom-space hide-bottom-space
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined

8
src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
View file

@ -166,7 +166,7 @@ async function saveFormData() {
<div class="row q-pa-sm q-col-gutter-sm"> <div class="row q-pa-sm q-col-gutter-sm">
<q-input <q-input
v-model="formDataRehabilitation.leaveWrote" v-model="formDataRehabilitation.leaveWrote"
class="col-12 col-sm-12" class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
dense dense
outlined outlined
@ -178,7 +178,7 @@ async function saveFormData() {
<datepicker <datepicker
v-model="formDataRehabilitation.leaveStartDate" v-model="formDataRehabilitation.leaveStartDate"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@ -214,7 +214,7 @@ async function saveFormData() {
<datepicker <datepicker
v-model="formDataRehabilitation.leaveEndDate" v-model="formDataRehabilitation.leaveEndDate"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@ -252,7 +252,7 @@ async function saveFormData() {
</template> </template>
</datepicker> </datepicker>
<q-input v-model="formDataRehabilitation.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" /> <q-input v-model="formDataRehabilitation.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" 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="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" use-chips bg-color="white" dense outlined multiple label="เอกสารประกอบ"> <q-file v-model="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" use-chips bg-color="white" dense outlined multiple label="เอกสารประกอบ">

1
src/modules/05_leave/components/Forms/Form.vue
View file

@ -63,6 +63,7 @@ onMounted(async () => {
:model-value="dataStore.dateSendLeave != null ? date2Thai(dataStore.dateSendLeave) : null" :model-value="dataStore.dateSendLeave != null ? date2Thai(dataStore.dateSendLeave) : null"
:label="`${'วันที่ยื่นใบลา'}`" :label="`${'วันที่ยื่นใบลา'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]" :rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
style="color: black"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon> <q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>