List Exit interview UI

src/modules/10_order/components/step/step02.vue

@@ -1,17 +1,19 @@
-
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import type { QInput } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps, QForm } from "quasar";
 import { useRoute } from "vue-router";
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+
+import type { QInput } from "quasar";
+import type { QTableProps, QForm } from "quasar";
 import type { ResponseData } from "@/modules/05_placement/interface/response/Order";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import CurruncyInput from "@/components/CurruncyInput.vue";
+
 const props = defineProps({
   next: {
     type: Function,
@@ -126,8 +128,10 @@ const getData = async (id: string) => {
           sequence: r.sequence !== null ? r.sequence : 0,
           refRecordId: r.refRecordId,
           salaryAmount: r.salaryAmount !== 0 ? r.salaryAmount : null,
-          positionSalaryAmount: r.positionSalaryAmount!== 0 ? r.positionSalaryAmount : null,
-          monthSalaryAmount: r.monthSalaryAmount!== 0 ? r.monthSalaryAmount : null,
+          positionSalaryAmount:
+            r.positionSalaryAmount !== 0 ? r.positionSalaryAmount : null,
+          monthSalaryAmount:
+            r.monthSalaryAmount !== 0 ? r.monthSalaryAmount : null,
         });
       });
       // console.log("list", list);
@@ -241,9 +245,11 @@ const fetchSalary = async (personalId: string) => {
       console.log(res);
       const data = res.data.result;
       modalData.value = {
-        salaryAmount: data.salaryAmount !== 0 ? data.salaryAmount:null,
-        positionSalaryAmount: data.positionSalaryAmount !== 0 ? data.salaryAmount:null,
-        mouthSalaryAmount: data.monthSalaryAmount !== 0 ? data.salaryAmount:null,
+        salaryAmount: data.salaryAmount !== 0 ? data.salaryAmount : null,
+        positionSalaryAmount:
+          data.positionSalaryAmount !== 0 ? data.salaryAmount : null,
+        mouthSalaryAmount:
+          data.monthSalaryAmount !== 0 ? data.salaryAmount : null,
       };
       console.log("data", modalData.value);
     })
@@ -368,7 +374,7 @@ const addlist = async (data: Object) => {
 
 const save = async () => {
   // console.log("save===>", rows.value)
-  const check = rows.value.find((x:any) => x.salaryAmount==null);
+  const check = rows.value.find((x: any) => x.salaryAmount == null);
   if (selected.value.length > 0 && !check) {
     dialogConfirm($q, () => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -564,7 +570,7 @@ const getClass = (val: boolean) => {
         color="public"
         @click="save"
         class="q-px-md"
-        >
+      >
       </q-btn>
     </div>
   </div>
@@ -579,21 +585,28 @@ const getClass = (val: boolean) => {
             <div class="col-xs-12">
               <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
+                  <!-- <q-input
                     outlined
                     dense
-                    
                     lazy-rules
                     v-model.number="modalData.salaryAmount"
                     :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
                     :label="`${'เงินเดือน'}`"
                     type="text"
                     hide-bottom-space
+                  /> -->
+                  <CurruncyInput
+                    :edit="true"
+                    :dense="true"
+                    v-model="modalData.salaryAmount"
+                    :label="`${'เงินเดือน'}`"
+                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                    hide-bottom-space
                   />
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
+                  <!-- <q-input
                     outlined
                     dense
                     lazy-rules
@@ -601,14 +614,21 @@ const getClass = (val: boolean) => {
                     :label="`${'เงินประจำตำแหน่ง'}`"
                     type="number"
                     hide-bottom-space
-                  />
+                  /> -->
                   <!-- :rules="[
                       (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
                     ]" -->
+                  <CurruncyInput
+                    :edit="true"
+                    :dense="true"
+                    v-model="modalData.positionSalaryAmount"
+                    :label="`${'เงินประจำตำแหน่ง'}`"
+                    hide-bottom-space
+                  />
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
+                  <!-- <q-input
                     outlined
                     dense
                     lazy-rules
@@ -616,10 +636,17 @@ const getClass = (val: boolean) => {
                     :label="`${'เงินค่าตอบแทนรายเดือน'}`"
                     type="number"
                     hide-bottom-space
-                  />
+                  /> -->
                   <!-- :rules="[
                       (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
                     ]" -->
+                  <CurruncyInput
+                    :edit="true"
+                    :dense="true"
+                    v-model="modalData.positionSalaryAmount"
+                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                    hide-bottom-space
+                  />
                 </div>
               </div>
             </div>