Merge branch 'develop' into dev-tee

src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue"
+import { ref, reactive, watch, computed } from "vue"
 import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
 import { useCounterMixin } from "@/stores/mixin"
 
@@ -25,6 +25,7 @@ const formData = reactive<FormData>({
 	startLeaveDate: null,
 	endLeaveDate: null,
 	leaveTotal: "", //จำนวนวันลา
+	salaryText: 25000,
 	salary: 25000, //เงินเดือนปัจจุบัน
 	spouseName: "", //ชื่อคู่สมรส
 	spousePosition: "", //ตำแหน่งคู่สมรส
@@ -38,8 +39,13 @@ const formData = reactive<FormData>({
 	file: [], //เอกสารปะกอบ
 })
 
+/** แปลงตัวแปร Salary */
+const formattSalaryText = arabicNumberToText(formData.salaryText)
+const formattSalary = computed(() => {
+	return formData.salary !== null ? formData.salary.toLocaleString("th-TH") : ""
+})
+
 /** ตัวแปร ref สำหรับแสดง validate */
-const formattSalary = arabicNumberToText(formData.salary)
 const leaveNoRef = ref<object | null>(null)
 const startLeaveDateRef = ref<object | null>(null)
 const endLeaveDateRef = ref<object | null>(null)
@@ -159,9 +165,12 @@ function onValidate() {
 						<div class="col-md-4 col-sm-12">
 							<q-input class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
 						</div>
+						<div class="col-md-4 col-sm-12">
+							<q-input class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalaryText" label="เงินเดือนปัจจุบัน" readonly />
+						</div>
 
 						<datepicker
-							class="col-md-3 col-sm-12"
+							class="col-md-2 col-sm-12"
 							menu-class-name="modalfix"
 							v-model="formData.startLeaveDate"
 							:locale="'th'"
@@ -198,7 +207,7 @@ function onValidate() {
 						</datepicker>
 
 						<datepicker
-							class="col-md-3 col-sm-12"
+							class="col-md-2 col-sm-12"
 							menu-class-name="modalfix"
 							v-model="formData.endLeaveDate"
 							:locale="'th'"
@@ -245,7 +254,7 @@ function onValidate() {
 							readonly
 							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
 						/>
-						<div class="col-md-3 col-sm-12">
+						<div class="col-md-4 col-sm-12">
 							<q-input
 								class="col-12 col-sm-12"
 								ref="spouseNameRef"
@@ -258,7 +267,7 @@ function onValidate() {
 								:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
 							/>
 						</div>
-						<div class="col-md-3 col-sm-12">
+						<div class="col-md-4 col-sm-12">
 							<q-input
 								class="col-12 col-sm-12"
 								ref="spousePositionRef"
@@ -271,7 +280,7 @@ function onValidate() {
 								:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
 							/>
 						</div>
-						<div class="col-md-3 col-sm-12">
+						<div class="col-md-2 col-sm-12">
 							<q-input
 								class="col-12 col-sm-12"
 								ref="spouseLevelRef"

src/modules/05_leave/interface/request/FollowSpouseForm.ts

@@ -4,6 +4,7 @@ interface FormData {
 	endLeaveDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
 	leaveTotal: string //จำนวนวันลา
 	salary: number //เงินเดือนปัจจุบัน
+	salaryText: number //เงินเดือนคำอ่าน
 	spouseName: string //ชื่อคู่สมรส
 	spousePosition: string //ตำแหน่งคู่สมรส
 	spouseLevel: string //ระดับคู่สมรส