From d562d12cea895cd9da710291df427db04889417a Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Thu, 24 Aug 2023 17:06:18 +0700
Subject: [PATCH] List Exit interview UI

---
 .../05_placement/components/Other/Detail.vue  |  10 +-
 .../components/ExitInterview/exitMain.vue     | 314 ++++++++----------
 .../interface/response/exitInterview.ts       |  40 +++
 .../10_order/components/step/step02.vue       |  61 +++-
 4 files changed, 238 insertions(+), 187 deletions(-)
 create mode 100644 src/modules/06_retirement/interface/response/exitInterview.ts

diff --git a/src/modules/05_placement/components/Other/Detail.vue b/src/modules/05_placement/components/Other/Detail.vue
index 1b9a6ad65..010aa02be 100644
--- a/src/modules/05_placement/components/Other/Detail.vue
+++ b/src/modules/05_placement/components/Other/Detail.vue
@@ -12,6 +12,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
 
+import CurruncyInput from "@/components/CurruncyInput.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
@@ -350,7 +352,7 @@ const getClass = (val: boolean) => {
           </div>
           <div class="col-xs-6 col-sm-3 row items-center">
             <div class="col-12">
-              <q-input
+              <!-- <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
                 dense
@@ -362,6 +364,12 @@ const getClass = (val: boolean) => {
                 hide-bottom-space
                 :label="`${'เงินเดือน'}`"
                 type="number"
+              /> -->
+              <CurruncyInput
+                v-model="salary"
+                label="เงินเดือน"
+                :edit="edit"
+                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
               />
             </div>
           </div>
diff --git a/src/modules/06_retirement/components/ExitInterview/exitMain.vue b/src/modules/06_retirement/components/ExitInterview/exitMain.vue
index 9ed9c22e6..5b62de813 100644
--- a/src/modules/06_retirement/components/ExitInterview/exitMain.vue
+++ b/src/modules/06_retirement/components/ExitInterview/exitMain.vue
@@ -9,7 +9,10 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
-import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+import type { ResponseItems } from "@/modules/06_retirement/interface/response/exitInterview";
+
+import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
@@ -33,22 +36,22 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "prefix",
+    name: "realReason",
     align: "left",
-    label: "คำนำหน้า",
+    label: "สาเหตุที่ลาออก",
     sortable: true,
-    field: "prefix",
+    field: "realReason",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "fullname",
+    name: "notExitFactor",
     align: "left",
-    label: "ชื่อ-นามสกุล",
+    label: "ปัจจัยที่ช่วยเปลี่ยนใจไม่อยากลาออก",
     sortable: true,
-    field: "fullname",
+    field: "notExitFactor",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -56,173 +59,76 @@ const columns = ref<QTableProps["columns"]>([
   },
 
   {
-    name: "positionTypeOld",
+    name: "futureWork",
     align: "left",
-    label: "ตำแหน่งในสายงาน",
+    label: "อนาคตกลับจะมาร่วมงานหรือไม่",
     sortable: true,
-    field: "positionTypeOld",
+    field: "futureWork",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionLevelOld",
+    name: "futureWorkReason",
     align: "left",
-    label: "ระดับ",
+    label: "เหตุผลที่อยากกลับมาร่วมงาน",
     sortable: true,
-    field: "positionLevelOld",
+    field: "futureWorkReason",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionNumberOld",
+    name: "havejob",
     align: "left",
-    label: "เลขที่",
+    label: "มีงานใหม่หรือไม่",
     sortable: true,
-    field: "positionNumberOld",
+    field: "havejob",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "organizationPositionOld",
+    name: "havejobReason",
     align: "left",
-    label: "สังกัด",
+    label: "เหตุผลที่มีงานใหม่",
     sortable: true,
-    field: "organizationPositionOld",
+    field: "havejobReason",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "statustext",
+    name: "datetext",
     align: "left",
-    label: "สถานะ",
+    label: "วันที่สร้าง",
     sortable: true,
-    field: "statustext",
+    field: "datetext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumns = ref<string[]>([
-  "no",
-  "prefix",
-  "fullname",
-  "positionTypeOld",
-  "positionLevelOld",
-  "positionNumberOld",
-  "organizationPositionOld",
-  "statustext",
-]);
+const visibleColumns = ref<string[]>([]);
+
+const dateBreak = ref<Date | null>(null);
 
 const filters = ref<ResponseItems[]>([]);
 const rows2 = ref<ResponseItems[]>([]);
-const columns2 = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "prefix",
-    align: "left",
-    label: "คำนำหน้า",
-    sortable: true,
-    field: "prefix",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fullname",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "positionTypeOld",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "positionTypeOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionLevelOld",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevelOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionNumberOld",
-    align: "left",
-    label: "เลขที่",
-    sortable: true,
-    field: "positionNumberOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationPositionOld",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organizationPositionOld",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "statustext",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "statustext",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
+const columns2 = ref<QTableProps["columns"]>([]);
 const visibleColumns2 = ref<string[]>([
   "no",
   "prefix",
   "fullname",
-  "positionTypeOld",
-  "positionLevelOld",
-  "positionNumberOld",
-  "organizationPositionOld",
+  "futureWork",
+  "futureWorkReason",
+  "havejob",
+  "havejobReason",
   "statustext",
 ]);
 
@@ -247,6 +153,15 @@ const resetFilter = () => {
   filterRef.value.focus();
 };
 
+const openModalCalendar = () => {
+  openModal();
+  dateBreak.value = null;
+};
+
+const conditionPopup = () => {
+  closeModal();
+};
+
 const openModalOrder = () => {
   openModal();
   const row = filters.value.filter(
@@ -258,6 +173,7 @@ const openModalOrder = () => {
 
 onMounted(async () => {
   await fecthlist();
+  visibleColumns.value = columns.value.map((r: any) => r.name);
 });
 
 const fecthlist = async () => {
@@ -270,25 +186,20 @@ const fecthlist = async () => {
 
       data.map((r: ResponseItems) => {
         list.push({
-          activeDate: new Date(),
-          createdAt: new Date(),
-          firstName: r.firstName ?? "",
+          datetext: r.createdAt !== null ? date2Thai(r.createdAt) : "-",
+          createdAt: new Date(r.createdAt),
+          futureWork: !!r.futureWork,
+          futureWorkReason: r.futureWorkReason ?? "",
+          havejob: !!r.havejob,
+          havejobReason: r.havejobReason ?? "",
           id: r.id ?? "",
-          isActive: r.isActive ? r.isActive : false,
-          lastName: r.lastName ?? "",
-          location: r.location ?? "",
-          organizationPositionOld: r.organizationPositionOld ?? "",
-          positionLevelOld: r.positionLevelOld ?? "",
-          positionNumberOld: r.positionNumberOld ?? "",
-          positionTypeOld: r.positionTypeOld ?? "",
-          prefix: r.prefix ?? "",
-          profileId: r.profileId ?? "",
-          reason: r.reason ?? "",
-          salary: r.salary ? r.salary : 0,
-          sendDate: new Date(),
+          lastUpdatedAt: new Date(r.lastUpdatedAt),
+          notExitFactor: r.notExitFactor ?? "",
+          realReason: r.realReason ?? "",
+          suggestFriends: !!r.suggestFriends,
+          suggestFriendsReason: r.suggestFriendsReason ?? "",
+          suggestion: r.suggestion ?? "",
           status: r.status ?? "",
-          statustext: statusText(r.status ?? ""),
-          fullname: `${r.firstName ?? ""} ${r.lastName ?? ""}`,
         });
       });
 
@@ -399,40 +310,50 @@ const saveOrder = async () => {
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
+                <q-th auto-width />
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr
-                :props="props"
-                class="cursor-pointer"
-                @click="router.push(`/retirement/resign/${props.row.id}`)"
-              >
+              <q-tr :props="props" class="cursor-pointer">
                 <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td>
-                <q-td key="prefix" :props="props">
-                  {{ props.row.prefix }}
+                <q-td key="realReason" :props="props">
+                  {{ props.row.realReason }}
                 </q-td>
-                <q-td key="fullname" :props="props">
-                  {{ props.row.fullname }}
+                <q-td key="notExitFactor" :props="props">
+                  {{ props.row.notExitFactor }}
                 </q-td>
-                <q-td key="positionTypeOld" :props="props">
-                  {{ props.row.positionTypeOld }}
+                <q-td key="futureWork" :props="props">
+                  {{ props.row.futureWork ? "ใช่" : "ไม่" }}
                 </q-td>
-                <q-td key="positionLevelOld" :props="props">
-                  {{ props.row.positionLevelOld }}
+                <q-td key="futureWorkReason" :props="props">
+                  {{ props.row.futureWorkReason }}
                 </q-td>
-                <q-td key="positionNumberOld" :props="props">
-                  {{ props.row.positionNumberOld }}
+                <q-td key="havejob" :props="props">
+                  {{ props.row.havejob ? "ใช่" : "ไม่" }}
                 </q-td>
 
-                <q-td key="organizationPositionOld" :props="props">
+                <q-td key="havejobReason" :props="props">
                   <div class="table_ellipsis">
-                    {{ props.row.organizationPositionOld }}
+                    {{ props.row.havejobReason }}
                   </div>
                 </q-td>
-                <q-td key="statustext" :props="props">
-                  {{ props.row.statustext }}
+                <q-td key="datetext" :props="props">
+                  {{ props.row.datetext }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    icon="mdi-calendar"
+                    size="12px"
+                    color="blue-7"
+                    flat
+                    round
+                    dense
+                    @click="openModalCalendar"
+                  >
+                    <q-tooltip>วันนัดหมายเพื่อทําการสัมภาษณ์การลาออก</q-tooltip>
+                  </q-btn>
                 </q-td>
               </q-tr>
             </template>
@@ -528,16 +449,16 @@ const saveOrder = async () => {
               <q-td key="positionTypeOld" :props="props">
                 {{ props.row.positionTypeOld }}
               </q-td>
-              <q-td key="positionLevelOld" :props="props">
-                {{ props.row.positionLevelOld }}
+              <q-td key="futureWorkReason" :props="props">
+                {{ props.row.futureWorkReason }}
               </q-td>
-              <q-td key="positionNumberOld" :props="props">
-                {{ props.row.positionNumberOld }}
+              <q-td key="havejob" :props="props">
+                {{ props.row.havejob }}
               </q-td>
 
-              <q-td key="organizationPositionOld" :props="props">
+              <q-td key="havejobReason" :props="props">
                 <div class="table_ellipsis">
-                  {{ props.row.organizationPositionOld }}
+                  {{ props.row.havejobReason }}
                 </div>
               </q-td>
               <q-td key="statustext" :props="props">
@@ -558,5 +479,60 @@ const saveOrder = async () => {
       </q-card-actions>
     </q-card>
   </q-dialog> -->
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 800px">
+      <q-form ref="myFormConfirm">
+        <DialogHeader
+          title="กําหนดวันนัดหมายเพื่อทําการสัมภาษณ์การลาออก"
+          :close="closeModal"
+        />
+        <q-separator />
+        <q-card-section class="q-p-sm q-gutter-md">
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateBreak"
+              :locale="'th'"
+              autoApply
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <!-- :rules="[
+                    (val) => !!val || `${'กรุณาเลือก วันสุดท้ายที่ยับยั้ง'}`,
+                  ]" -->
+                <q-input
+                  outlined
+                  dense
+                  lazy-rules
+                  :model-value="
+                    dateBreak !== null ? date2Thai(dateBreak) : null
+                  "
+                  hide-bottom-space
+                  :label="`${' วันนัดหมายเพื่อทําการสัมภาษณ์การลาออก'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter :editvisible="true" :save="conditionPopup" />
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/06_retirement/interface/response/exitInterview.ts b/src/modules/06_retirement/interface/response/exitInterview.ts
new file mode 100644
index 000000000..7cd9659cc
--- /dev/null
+++ b/src/modules/06_retirement/interface/response/exitInterview.ts
@@ -0,0 +1,40 @@
+interface ResponseData {
+  adjust: string[];
+  adjustOther: string;
+  createdAt: Date;
+  exitFactor: string[];
+  exitFactorOther: string;
+  futureWork: boolean;
+  futureWorkReason: string;
+  havejob: boolean;
+  havejobReason: string;
+  id: string;
+  lastUpdatedAt: Date;
+  notExitFactor: string;
+  realReason: string;
+  reasonWork: string[];
+  reasonWorkOther: string;
+  suggestFriends: boolean;
+  suggestFriendsReason: string;
+  suggestion: string;
+  timeThink: string[];
+}
+
+interface ResponseItems {
+  createdAt: Date;
+  futureWork: boolean;
+  futureWorkReason: string;
+  havejob: boolean;
+  havejobReason: string;
+  id: string;
+  lastUpdatedAt: Date;
+  notExitFactor: string;
+  realReason: string;
+  suggestFriends: boolean;
+  suggestFriendsReason: string;
+  suggestion: string;
+  status: string;
+  datetext: string | null;
+}
+
+export type { ResponseData, ResponseItems };
diff --git a/src/modules/10_order/components/step/step02.vue b/src/modules/10_order/components/step/step02.vue
index fb4a8b4e3..13a0038f7 100644
--- a/src/modules/10_order/components/step/step02.vue
+++ b/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>