From 66e0b544e03f654ec78234ce00243176f09ff84e Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 19 Oct 2023 13:20:40 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20currency=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-แก้ type salary เป็น number | undefind
---
 src/components/CurruncyInput.vue              |  56 +++
 .../01_exam/components/Form/Occupation.vue    | 349 +++++++++---------
 src/modules/01_exam/interface/index/Main.ts   |   4 +-
 3 files changed, 233 insertions(+), 176 deletions(-)
 create mode 100644 src/components/CurruncyInput.vue

diff --git a/src/components/CurruncyInput.vue b/src/components/CurruncyInput.vue
new file mode 100644
index 0000000..d0dbed8
--- /dev/null
+++ b/src/components/CurruncyInput.vue
@@ -0,0 +1,56 @@
+<template>
+  <q-input
+    ref="inputRef"
+    v-model="formattedValue"
+    :dense="dense"
+    :outlined="edit"
+    :class="edit == true ? 'full-width inputgreen cursor-pointer' : 'full-width cursor-pointer'"
+    :readonly="!edit"
+    :borderless="!edit"
+    hide-bottom-space
+  >
+    <template v-for="slot in slots">
+      <slot :name="slot" />
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { useCurrencyInput } from 'vue-currency-input'
+import { ref, useSlots, watch } from 'vue'
+
+const slots = ref<any>(useSlots())
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: undefined
+  },
+  dense: {
+    type: Boolean,
+    default: true
+  },
+  edit: {
+    type: Boolean
+  }
+})
+
+const { inputRef, formattedValue, setValue } = useCurrencyInput({
+  locale: 'th-TH',
+  currency: 'THB',
+  currencyDisplay: 'hidden' as any,
+  hideCurrencySymbolOnFocus: true,
+  hideGroupingSeparatorOnFocus: true,
+  hideNegligibleDecimalDigitsOnFocus: true,
+  autoDecimalDigits: false,
+  useGrouping: true,
+  accountingSign: false
+})
+
+watch(
+  () => props.modelValue,
+  (value: any) => {
+    setValue(value)
+  }
+)
+</script>
diff --git a/src/modules/01_exam/components/Form/Occupation.vue b/src/modules/01_exam/components/Form/Occupation.vue
index 20ceaf3..43287da 100644
--- a/src/modules/01_exam/components/Form/Occupation.vue
+++ b/src/modules/01_exam/components/Form/Occupation.vue
@@ -1,146 +1,147 @@
 <!-- card ตำแหน่งปัจจุบัน -->
 <template>
-	<HeaderTop
-		v-model:edit="edit"
-		header="ตำแหน่งปัจจุบัน"
-		icon="mdi-briefcase"
-		:addData="true"
-		:editOnly="false"
-		:editData="false"
-	/>
-	<q-form ref="myform">
-		<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-			<div class="col-12">
-				<q-radio
-					v-model="defaultOccupation.positionType"
-					label="ลูกจ้างประจำ"
-					color="teal"
-					val="prem"
-					:disable="!(status == 'register' || status == 'rejectRegister')"
-				/>
-				<q-radio
-					v-model="defaultOccupation.positionType"
-					label="ลูกจ้างชั่วคราว"
-					color="teal"
-					val="temp"
-					:disable="!(status == 'register' || status == 'rejectRegister')"
-				/>
-				<q-radio
-					v-model="defaultOccupation.positionType"
-					label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
-					color="teal"
-					val="other"
-					:disable="!(status == 'register' || status == 'rejectRegister')"
-				/>
-			</div>
-			<div class="col-12 row">
-				<div class="col-3">
-					<q-input
-						:class="getClass(status == 'register' || status == 'rejectRegister')"
-						:outlined="status == 'register' || status == 'rejectRegister'"
-						dense
-						lazy-rules
-						autogrow
-						:readonly="!(status == 'register' || status == 'rejectRegister')"
-						:borderless="!(status == 'register' || status == 'rejectRegister')"
-						v-model="defaultOccupation.position"
-						:rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
-						:label="`${'ชื่อตำแหน่ง'}`"
-					/>
-				</div>
-				<div class="col-3">
-					<q-input
-						class="q-pl-sm"
-						:class="getClass(status == 'register' || status == 'rejectRegister')"
-						:outlined="status == 'register' || status == 'rejectRegister'"
-						dense
-						lazy-rules
-						type="number"
-						autogrow
-						:readonly="!(status == 'register' || status == 'rejectRegister')"
-						:borderless="!(status == 'register' || status == 'rejectRegister')"
-						v-model="defaultOccupation.salary"
-						:rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
-						:label="`${'เงินเดือน'}`"
-					/>
-				</div>
-			</div>
-			<div class="col-12 row">
-				<div class="col-3">
-					<q-input
-						:class="getClass(status == 'register' || status == 'rejectRegister')"
-						:outlined="status == 'register' || status == 'rejectRegister'"
-						dense
-						lazy-rules
-						autogrow
-						:readonly="!(status == 'register' || status == 'rejectRegister')"
-						:borderless="!(status == 'register' || status == 'rejectRegister')"
-						v-model="defaultOccupation.group"
-						:rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
-						:label="`${'กลุ่ม/ฝ่าย'}`"
-					/>
-				</div>
-				<div class="col-3">
-					<q-input
-						class="q-pl-sm"
-						:class="getClass(status == 'register' || status == 'rejectRegister')"
-						:outlined="status == 'register' || status == 'rejectRegister'"
-						dense
-						lazy-rules
-						autogrow
-						:readonly="!(status == 'register' || status == 'rejectRegister')"
-						:borderless="!(status == 'register' || status == 'rejectRegister')"
-						v-model="defaultOccupation.pile"
-						:rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
-						:label="`${'กอง'}`"
-					/>
-				</div>
-				<div class="col-3">
-					<q-input
-						class="q-pl-sm"
-						:class="getClass(status == 'register' || status == 'rejectRegister')"
-						:outlined="status == 'register' || status == 'rejectRegister'"
-						dense
-						lazy-rules
-						autogrow
-						:readonly="!(status == 'register' || status == 'rejectRegister')"
-						:borderless="!(status == 'register' || status == 'rejectRegister')"
-						v-model="defaultOccupation.org"
-						:rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
-						:label="`${'สังกัด'}`"
-					/>
-				</div>
-				<div class="col-3">
-					<q-input
-						class="q-pl-sm"
-						:class="getClass(status == 'register' || status == 'rejectRegister')"
-						:outlined="status == 'register' || status == 'rejectRegister'"
-						dense
-						:counter="status == 'register' || status == 'rejectRegister' ? true : false"
-						maxlength="10"
-						lazy-rules
-						type="tel"
-						mask="##########"
-						autogrow
-						:readonly="!(status == 'register' || status == 'rejectRegister')"
-						:borderless="!(status == 'register' || status == 'rejectRegister')"
-						v-model="defaultOccupation.tel"
-						:rules="[
-							(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
-							(val) =>
-								(val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
-								'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
-						]"
-						:label="`${'เบอร์โทรที่ทำงาน'}`"
-					/>
-				</div>
-			</div>
-		</div>
-	</q-form>
+  <HeaderTop
+    v-model:edit="edit"
+    header="ตำแหน่งปัจจุบัน"
+    icon="mdi-briefcase"
+    :addData="true"
+    :editOnly="false"
+    :editData="false"
+  />
+  <q-form ref="myform">
+    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+      <div class="col-12">
+        <q-radio
+          v-model="defaultOccupation.positionType"
+          label="ลูกจ้างประจำ"
+          color="teal"
+          val="prem"
+          :disable="!(status == 'register' || status == 'rejectRegister')"
+        />
+        <q-radio
+          v-model="defaultOccupation.positionType"
+          label="ลูกจ้างชั่วคราว"
+          color="teal"
+          val="temp"
+          :disable="!(status == 'register' || status == 'rejectRegister')"
+        />
+        <q-radio
+          v-model="defaultOccupation.positionType"
+          label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
+          color="teal"
+          val="other"
+          :disable="!(status == 'register' || status == 'rejectRegister')"
+        />
+      </div>
+      <div class="col-12 row">
+        <div class="col-3">
+          <q-input
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
+            dense
+            lazy-rules
+            autogrow
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
+            v-model="defaultOccupation.position"
+            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
+            :label="`${'ชื่อตำแหน่ง'}`"
+          />
+        </div>
+        <div class="col-3">
+          <CurrencyInput
+            class="q-pl-sm"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
+            :options="{
+              currency: 'THB'
+            }"
+            lazy-rules
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
+            v-model="defaultOccupation.salary"
+            :rules="[(val:number| undefined) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
+            :label="`${'เงินเดือน'}`"
+          />
+        </div>
+      </div>
+      <div class="col-12 row">
+        <div class="col-3">
+          <q-input
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
+            dense
+            lazy-rules
+            autogrow
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
+            v-model="defaultOccupation.group"
+            :rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
+            :label="`${'กลุ่ม/ฝ่าย'}`"
+          />
+        </div>
+        <div class="col-3">
+          <q-input
+            class="q-pl-sm"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
+            dense
+            lazy-rules
+            autogrow
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
+            v-model="defaultOccupation.pile"
+            :rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
+            :label="`${'กอง'}`"
+          />
+        </div>
+        <div class="col-3">
+          <q-input
+            class="q-pl-sm"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
+            dense
+            lazy-rules
+            autogrow
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
+            v-model="defaultOccupation.org"
+            :rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
+            :label="`${'สังกัด'}`"
+          />
+        </div>
+        <div class="col-3">
+          <q-input
+            class="q-pl-sm"
+            :class="getClass(status == 'register' || status == 'rejectRegister')"
+            :outlined="status == 'register' || status == 'rejectRegister'"
+            dense
+            :counter="status == 'register' || status == 'rejectRegister' ? true : false"
+            maxlength="10"
+            lazy-rules
+            type="tel"
+            mask="##########"
+            autogrow
+            :readonly="!(status == 'register' || status == 'rejectRegister')"
+            :borderless="!(status == 'register' || status == 'rejectRegister')"
+            v-model="defaultOccupation.tel"
+            :rules="[
+              (val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+              (val) =>
+                (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
+                'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
+            ]"
+            :label="`${'เบอร์โทรที่ทำงาน'}`"
+          />
+        </div>
+      </div>
+    </div>
+  </q-form>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
 import http from '@/plugins/http'
+import CurrencyInput from '@/components/CurruncyInput.vue'
 import config from '@/app.config'
 import { useCounterMixin } from '@/stores/mixin'
 import { useDataStore } from '@/stores/data'
@@ -151,14 +152,14 @@ import { defaultOccupation, changeData } from '@/modules/01_exam/interface/index
 import HeaderTop from '@/components/top.vue'
 
 const props = defineProps({
-	status: {
-		type: String,
-		required: true
-	},
-	form: {
-		type: Object,
-		required: true
-	}
+  status: {
+    type: String,
+    required: true
+  },
+  form: {
+    type: Object,
+    required: true
+  }
 })
 const emit = defineEmits(['update:form'])
 
@@ -174,46 +175,46 @@ const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
 
 watch(myform, async (count: any, prevCount: any) => {
-	emit('update:form', count)
+  emit('update:form', count)
 })
 
 watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
-	await changeData('occupation', count)
+  await changeData('occupation', count)
 })
 
 onMounted(async () => {
-	await fetchData()
+  await fetchData()
 })
 
 const fetchData = async () => {
-	loaderPage(true)
-	await http
-		.get(config.API.candidateOccupation(examId.value, positionId.value))
-		.then((res) => {
-			const data = res.data.result
-			if (data != null) {
-				defaultOccupation.value.org = data.occupationOrg
-				defaultOccupation.value.pile = data.occupationPile
-				defaultOccupation.value.group = data.occupationGroup
-				defaultOccupation.value.salary = data.occupationSalary
-				defaultOccupation.value.position = data.occupationPosition
-				defaultOccupation.value.positionType =
-					data.occupationPositionType == null ? 'other' : data.occupationPositionType
-				defaultOccupation.value.tel = data.occupationTelephone
-			}
-		})
-		.catch((e) => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			loaderPage(false)
-		})
+  loaderPage(true)
+  await http
+    .get(config.API.candidateOccupation(examId.value, positionId.value))
+    .then((res) => {
+      const data = res.data.result
+      if (data != null) {
+        defaultOccupation.value.org = data.occupationOrg
+        defaultOccupation.value.pile = data.occupationPile
+        defaultOccupation.value.group = data.occupationGroup
+        defaultOccupation.value.salary = data.occupationSalary
+        defaultOccupation.value.position = data.occupationPosition
+        defaultOccupation.value.positionType =
+          data.occupationPositionType == null ? 'other' : data.occupationPositionType
+        defaultOccupation.value.tel = data.occupationTelephone
+      }
+    })
+    .catch((e) => {
+      messageError($q, e)
+    })
+    .finally(() => {
+      loaderPage(false)
+    })
 }
 
 const getClass = (val: boolean) => {
-	return {
-		'full-width inputgreen cursor-pointer': val,
-		'full-width cursor-pointer': !val
-	}
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
 }
 </script>
diff --git a/src/modules/01_exam/interface/index/Main.ts b/src/modules/01_exam/interface/index/Main.ts
index 54ce065..528217e 100644
--- a/src/modules/01_exam/interface/index/Main.ts
+++ b/src/modules/01_exam/interface/index/Main.ts
@@ -65,7 +65,7 @@ interface Occupation {
   org: string | null
   pile: string | null
   group: string | null
-  salary: string | null
+  salary: number | undefined
   position: string | null
   positionType: string | null
   tel: string | null
@@ -199,7 +199,7 @@ const defaultOccupation = ref<Occupation>({
   org: null,
   pile: null,
   group: null,
-  salary: null,
+  salary: undefined,
   position: null,
   positionType: 'other',
   tel: null