fix: comma & customer form

src/pages/03_customer-management/components/employer/EmployerFormAbout.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { QSelect } from 'quasar';
 import { onMounted, ref, watch, capitalize } from 'vue';
-import { formatNumberDecimal, selectFilterOptionRefMod } from 'stores/utils';
+import { selectFilterOptionRefMod, commaInput } from 'stores/utils';
 import { calculateAge, disabledAfterToday } from 'src/utils/datetime';
 
 import useOptionStore from 'src/stores/options';
@@ -108,6 +108,36 @@ watch(
 <template>
   <div class="row q-col-gutter-sm">
     <template v-if="customerType === 'CORP'">
+      <div class="col-12 row q-col-gutter-sm">
+        <q-input
+          dense
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-12 col-md-6"
+          :label="$t('customer.form.registerName')"
+          for="input-register-name"
+          v-model="registerName"
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
+        />
+
+        <q-input
+          dense
+          outlined
+          :readonly="readonly"
+          hide-bottom-space
+          class="col-12 col-md-6"
+          label="Company name"
+          for="input-register-name-en"
+          v-model="registerNameEN"
+          :rules="[
+            (val: string) => !!val || $t('form.error.required'),
+            (val: string) =>
+              /^[0-9A-Za-z\s.,]+$/.test(val) || $t('form.error.letterOnly'),
+          ]"
+        />
+      </div>
+
       <div class="col-12 row q-col-gutter-sm">
         <q-input
           dense
@@ -166,36 +196,6 @@ watch(
         />
       </div>
 
-      <div class="col-12 row q-col-gutter-sm">
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-12 col-md-6"
-          :label="$t('customer.form.registerName')"
-          for="input-register-name"
-          v-model="registerName"
-          :rules="[(val: string) => !!val || $t('form.error.required')]"
-        />
-
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-12 col-md-6"
-          label="Company name"
-          for="input-register-name-en"
-          v-model="registerNameEN"
-          :rules="[
-            (val: string) => !!val || $t('form.error.required'),
-            (val: string) =>
-              /^[0-9A-Za-z\s.,]+$/.test(val) || $t('form.error.letterOnly'),
-          ]"
-        />
-      </div>
-
       <div class="col-12 row q-col-gutter-sm">
         <DatePicker
           v-model="registerDate"
@@ -214,14 +214,10 @@ watch(
           class="col-12 col-md-2"
           :label="$t('customer.form.authorizedCapital')"
           for="input-authorized-capital"
-          :model-value="
+          :model-value="authorizedCapital"
-            !readonly
-              ? authorizedCapital
-              : formatNumberDecimal(+authorizedCapital, 2)
-          "
           @update:model-value="
             (v) => {
-              authorizedCapital = `${v}`;
+              if (typeof v === 'string') authorizedCapital = commaInput(v);
             }
           "
         />

src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { selectFilterOptionRefMod } from 'stores/utils';
+import { selectFilterOptionRefMod, commaInput } from 'stores/utils';
 import { onMounted, watch } from 'vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -13,9 +13,10 @@ const jobPosition = defineModel<string>('jobPosition');
 const jobDescription = defineModel<string>('jobDescription');
 const payDate = defineModel<string>('payDate');
 const payDateEN = defineModel<string>('payDateEN');
-const wageRate = defineModel<number>('wageRate');
+const wageRate = defineModel<number | string>('wageRate');
 const wageRateText = defineModel<string>('wageRateText');
 
+const wageRate4Show = ref('');
 const typeBusinessOption = ref([]);
 const typeBusinessENOption = ref([]);
 const jobPositionOption = ref([]);
@@ -272,7 +273,6 @@ let jobPositionENFilter = selectFilterOptionRefMod(
         (v) => (typeof v === 'string' ? (payDateEN = v) : '')
       "
     />
-
     <q-input
       :for="`${prefixId}-input-pay-rate`"
       :id="`${prefixId}-input-pay-rate`"
@@ -282,7 +282,18 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       hide-bottom-space
       class="col-md-3 col-6"
       :label="$t('customer.form.payRate')"
-      v-model="wageRate"
+      :model-value="commaInput(wageRate?.toString() || '-')"
+      @update:model-value="
+        (v) => {
+          if (typeof v === 'string') wageRate4Show = commaInput(v);
+          const x = parseInt(
+            wageRate4Show && typeof wageRate4Show === 'string'
+              ? wageRate4Show.replace(/,/g, '')
+              : '',
+          );
+          wageRate = x;
+        }
+      "
     />
 
     <q-input