From 491c20b30e6306822c157a6f52669602029eea52 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Fri, 10 Nov 2023 09:42:59 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=20salary?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../componenst/Forms/12_FollowSpouseForm.vue  | 23 +++++++++++++------
 .../interface/request/FollowSpouseForm.ts     |  1 +
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index 596a92e..cb2d860 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/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"
diff --git a/src/modules/05_leave/interface/request/FollowSpouseForm.ts b/src/modules/05_leave/interface/request/FollowSpouseForm.ts
index 403a597..1ad8443 100644
--- a/src/modules/05_leave/interface/request/FollowSpouseForm.ts
+++ b/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 //ระดับคู่สมรส