เพิ่ม currency input

src/components/CurruncyInput.vue

@@ -26,7 +26,10 @@ import { ref, useSlots, watch } from "vue";
 const slots = ref<any>(useSlots());
 
 const props = defineProps({
-  modelValue: Number,
+  modelValue: {
+    type: Number,
+    default: undefined,
+  },
   dense: {
     type: Boolean,
     default: true,

src/modules/03_recruiting/components/CurruncyInput.vue

@@ -0,0 +1,60 @@
+<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>

src/modules/03_recruiting/components/Occupation.vue

@@ -16,101 +16,62 @@
           label="ลูกจ้างประจำ"
           color="teal"
           val="prem"
-					:disable="
+          :disable="!(status == 'checkRegister' || status == 'payment')"
-						!(status == 'checkRegister' || status == 'payment')
-					"
         />
         <q-radio
           v-model="defaultOccupation.positionType"
           label="ลูกจ้างชั่วคราว"
           color="teal"
           val="temp"
-					:disable="
+          :disable="!(status == 'checkRegister' || status == 'payment')"
-						!(status == 'checkRegister' || status == 'payment')
-					"
         />
         <q-radio
           v-model="defaultOccupation.positionType"
           label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
           color="teal"
           val="other"
-					:disable="
+          :disable="!(status == 'checkRegister' || status == 'payment')"
-						!(status == 'checkRegister' || status == 'payment')
-					"
         />
       </div>
       <div class="col-12 row q-col-gutter-sm">
         <div class="col-4">
           <q-input
-						:class="
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
-							getClass(
+            :outlined="status == 'checkRegister' || status == 'payment'"
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
             dense
             lazy-rules
             autogrow
-						:readonly="
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
-							!(status == 'checkRegister' || status == 'payment')
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
             v-model="defaultOccupation.position"
-						:rules="[
+            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
-							(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`,
-						]"
             :label="`${'ชื่อตำแหน่ง'}`"
           />
         </div>
         <div class="col-4">
-					<q-input
+          <CurrencyInput
-						:class="
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
-							getClass(
+            :outlined="status == 'checkRegister' || status == 'payment'"
-								status == 'checkRegister' || status == 'payment'
+            :options="{
-							)
+              currency: 'THB',
-						"
+            }"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
-						dense
-						lazy-rules
-						type="number"
-						autogrow
-						:readonly="
-							!(status == 'checkRegister' || status == 'payment')
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
             v-model="defaultOccupation.salary"
-						:rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
+            :rules="[(val:number| undefined) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
             :label="`${'เงินเดือน'}`"
           />
         </div>
 
         <div class="col-4">
           <q-input
-						:class="
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
-							getClass(
+            :outlined="status == 'checkRegister' || status == 'payment'"
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
             dense
             lazy-rules
             autogrow
-						:readonly="
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
-							!(status == 'checkRegister' || status == 'payment')
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
             v-model="defaultOccupation.group"
             :rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
             :label="`${'กลุ่ม/ฝ่าย'}`"
@@ -118,23 +79,13 @@
         </div>
         <div class="col-4">
           <q-input
-						:class="
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
-							getClass(
+            :outlined="status == 'checkRegister' || status == 'payment'"
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
             dense
             lazy-rules
             autogrow
-						:readonly="
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
-							!(status == 'checkRegister' || status == 'payment')
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
             v-model="defaultOccupation.pile"
             :rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
             :label="`${'กอง'}`"
@@ -142,23 +93,13 @@
         </div>
         <div class="col-4">
           <q-input
-						:class="
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
-							getClass(
+            :outlined="status == 'checkRegister' || status == 'payment'"
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
             dense
             lazy-rules
             autogrow
-						:readonly="
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
-							!(status == 'checkRegister' || status == 'payment')
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
             v-model="defaultOccupation.org"
             :rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
             :label="`${'สังกัด'}`"
@@ -166,39 +107,24 @@
         </div>
         <div class="col-4">
           <q-input
-						:class="
+            :class="getClass(status == 'checkRegister' || status == 'payment')"
-							getClass(
+            :outlined="status == 'checkRegister' || status == 'payment'"
-								status == 'checkRegister' || status == 'payment'
-							)
-						"
-						:outlined="
-							status == 'checkRegister' || status == 'payment'
-						"
             dense
             :counter="
-							status == 'checkRegister' || status == 'payment'
+              status == 'checkRegister' || status == 'payment' ? true : false
-								? true
-								: false
             "
             maxlength="10"
             lazy-rules
             type="tel"
             mask="##########"
             autogrow
-						:readonly="
+            :readonly="!(status == 'checkRegister' || status == 'payment')"
-							!(status == 'checkRegister' || status == 'payment')
+            :borderless="!(status == 'checkRegister' || status == 'payment')"
-						"
-						:borderless="
-							!(status == 'checkRegister' || status == 'payment')
-						"
             v-model="defaultOccupation.tel"
             :rules="[
+              (val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
               (val) =>
-								!!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+                (val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
-							(val) =>
-								(val.length >= 9 &&
-									val.length <= 10 &&
-									val.startsWith('0')) ||
                 'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง',
             ]"
             :label="`${'เบอร์โทรที่ทำงาน'}`"
@@ -219,7 +145,7 @@ import {
 } from "@/modules/03_recruiting/interface/index/Main";
 import HeaderTop from "@/modules/03_recruiting/components/top.vue";
 import { useRoute } from "vue-router";
-
+import CurrencyInput from "@/modules/03_recruiting/components/CurruncyInput.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 

src/modules/03_recruiting/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;
@@ -229,7 +229,7 @@ const defaultOccupation = ref<Occupation>({
   org: null,
   pile: null,
   group: null,
-  salary: null,
+  salary: undefined,
   position: null,
   positionType: null,
   tel: null,