แก้ไข ขอโอน

src/modules/05_placement/components/Transfer/transferMain.vue

@@ -4,6 +4,7 @@ import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -13,7 +14,7 @@ import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogH
 
 import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
 
-const selected = ref([]);
+const selected = ref<ResponseData[]>([]);
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -23,8 +24,10 @@ const checkSelected = computed(() => {
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
+const transferStore = useTransferDataStore();
 
 const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
+const { statusText } = transferStore;
 
 const modal = ref<boolean>(false);
 const visibleColumns = ref<string[]>([
@@ -32,18 +35,18 @@ const visibleColumns = ref<string[]>([
   "fullname",
   "position",
   "positionLevel",
-  "oc",
-  "agency",
-  "status",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
 ]);
 const visibleColumns2 = ref<string[]>([
   "no",
   "fullname",
   "position",
   "positionLevel",
-  "oc",
-  "agency",
-  "status",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -58,53 +61,8 @@ const resetFilter = () => {
 //   router.push("/retirement/resign/"+id);
 // };
 const rows = ref<ResponseData[]>([]);
-const rows2 = ref<any>([
-  {
-    personalId: "0a846508-4932-40de-9a9e-5b519492217c",
-    fullname: "นางสาวอย พชช",
-    position: "นักบริหาร",
-    positionLevel: "ต้น",
-    oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
-    agency: "กลุ่มงานกุมารเวชกรรม",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-adf2-4842-8056-1abb1539356e",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-adff-47b0-8762-41cd5c991001",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-  {
-    personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
-    fullname: "นางสาววญ สพ",
-    position: "นักจัดการงานทั่วไป",
-    positionLevel: "ปฏิบัติการ",
-    oc: "กลุ่มงานช่วยนักบริหาร",
-    agency: "กลุ่มงานข้อมูลเมือง",
-    status: "รออนุมัติ",
-  },
-]);
+const rows2 = ref<ResponseData[]>([]);
+const filters = ref<ResponseData[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -143,29 +101,29 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "oc",
+    name: "organizationPositionOld",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "oc",
+    field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "agency",
+    name: "organization",
     align: "left",
     label: "หน่วยงานที่ขอโอนไป",
     sortable: true,
-    field: "agency",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "statustext",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statustext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -208,29 +166,29 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "oc",
+    name: "organizationPositionOld",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "oc",
+    field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "agency",
+    name: "organization",
     align: "left",
     label: "หน่วยงานที่ขอโอนไป",
     sortable: true,
-    field: "agency",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "statustext",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "status",
+    field: "statustext",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -243,6 +201,15 @@ onMounted(async () => {
   await getData();
 });
 
+const openModalOrder = () => {
+  openModal();
+  const row = filters.value.filter(
+    (r: ResponseData) =>
+      r.status == "WAITTING" || r.status == "PENDING" || r.status == "APPROVE"
+  );
+  rows2.value = row;
+};
+
 const getData = async () => {
   showLoader();
   await http
@@ -254,8 +221,10 @@ const getData = async () => {
         list.push({
           createdAt: new Date(),
           date: new Date(),
+          firstName: r.firstName ?? "",
           id: r.id ?? "",
           isActive: r.isActive ? r.isActive : false,
+          lastName: r.lastName ?? "",
           organization: r.organization ?? "",
           organizationPositionOld: r.organizationPositionOld ?? "",
           posNo: r.posNo ?? "",
@@ -264,12 +233,18 @@ const getData = async () => {
           positionLevelOld: r.positionLevelOld ?? "",
           positionNumberOld: r.positionNumberOld ?? "",
           positionTypeOld: r.positionTypeOld ?? "",
-          reason: r.id ?? "",
-          salary: r.salary !== null ? r.salary : 0,
+          prefix: r.prefix ?? "",
+          reason: r.reason ?? "",
+          salary: r.salary ? r.salary : 0,
           status: r.status ?? "",
+          statustext: statusText(r.status ?? ""),
+          fullname: `${r.prefix ?? ""} ${r.firstName ?? ""} ${
+            r.lastName ?? ""
+          }`,
         });
       });
       rows.value = list;
+      filters.value = list;
     })
     .catch((e) => {
       messageError($q, e);
@@ -278,6 +253,30 @@ const getData = async () => {
       hideLoader();
     });
 };
+
+const saveOrder = async () => {
+  const id = selected.value.map((r) => r.id);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.transferReport, body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "ส่งไปออกคำสั่งโอนออกสำเร็จ");
+      closeModal();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการขอโอน</div>
@@ -287,7 +286,7 @@ const getData = async () => {
       <div class="col-12">
         <div class="row col-12">
           <q-btn
-            @click="openModal"
+            @click="openModalOrder"
             size="14px"
             flat
             round
@@ -369,14 +368,24 @@ const getData = async () => {
                 <q-td key="positionLevel" :props="props">
                   {{ props.row.positionLevel }}
                 </q-td>
-                <q-td key="oc" :props="props">
-                  {{ props.row.oc }}
+                <q-td key="organizationPositionOld" :props="props">
+                  <div class="table_ellipsis">
+                    {{ props.row.organizationPositionOld }}
+                    <!-- <q-tooltip>
+                      {{ props.row.organizationPositionOld }}
+                    </q-tooltip> -->
+                  </div>
                 </q-td>
-                <q-td key="agency" :props="props">
-                  {{ props.row.agency }}
+                <q-td key="organization" :props="props">
+                  <div class="table_ellipsis">
+                    {{ props.row.organization }}
+                    <!-- <q-tooltip>
+                      {{ props.row.organization }}
+                    </q-tooltip> -->
+                  </div>
                 </q-td>
-                <q-td key="status" :props="props">
-                  {{ props.row.status }}
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
                 </q-td>
               </q-tr>
             </template>
@@ -436,8 +445,7 @@ const getData = async () => {
           :columns="columns2"
           :rows="rows2"
           :filter="filterKeyword2"
-          row-key="personalId"
-          class="custom-header-table"
+          row-key="id"
           :visible-columns="visibleColumns2"
           selection="multiple"
           v-model:selected="selected"
@@ -450,14 +458,7 @@ const getData = async () => {
               v-model="scope.selected"
             />
           </template>
-          <!-- <template v-slot:body-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template> -->
+
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
               <q-td>
@@ -480,14 +481,18 @@ const getData = async () => {
               <q-td key="positionLevel" :props="props">
                 {{ props.row.positionLevel }}
               </q-td>
-              <q-td key="oc" :props="props">
-                {{ props.row.oc }}
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
               </q-td>
-              <q-td key="agency" :props="props">
-                {{ props.row.agency }}
+              <q-td key="organization" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organization }}
+                </div>
               </q-td>
-              <q-td key="status" :props="props">
-                {{ props.row.status }}
+              <q-td key="statustext" :props="props">
+                {{ props.row.statustext }}
               </q-td>
             </q-tr>
           </template>
@@ -497,7 +502,7 @@ const getData = async () => {
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
           label="บันทึก"
-          @click=""
+          @click="saveOrder"
           :disable="checkSelected"
           color="public"
         />

src/modules/05_placement/components/Transfer/transferRegistry.vue

@@ -10,11 +10,13 @@
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายละเอียดการขอโอนของ {{ name }}
+    รายละเอียดการขอโอนของ {{ responseData.fullname }}
   </div>
   <q-card bordered class="row col-12 text-dark">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-      <div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
+      <div class="q-pl-sm text-weight-bold text-subtitle2">
+        {{ responseData.fullname }}
+      </div>
       <q-space />
       <q-btn
         outline
@@ -30,7 +32,11 @@
     <div class="row col-12 q-pa-md">
       <div class="col-12 row bg-white q-col-gutter-md">
         <div class="col-xs-3 col-sm-2 col-md-1 row">
-          <q-img src="@/assets/avatar_user.jpg" />
+          <q-img
+            :src="responseData.avataPath"
+            v-if="responseData.avataPath !== ''"
+          />
+          <q-img src="@/assets/avatar_user.jpg" v-else />
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
           <div class="col-12 q-pl-md">
@@ -141,6 +147,217 @@
       </d-table>
     </div>
   </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+      </div>
+      <q-space />
+      <div class="q-gutter-sm" v-if="!edit">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="mdi-file-edit-outline"
+          class="q-px-sm"
+          label="แก้ไข"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+      <div class="q-gutter-sm" v-else>
+        <q-btn
+          outline
+          color="public"
+          dense
+          class="q-px-sm"
+          label="บันทึก"
+          style="width: 80px"
+          @click="conditionSave"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          class="q-px-sm"
+          label="ยกเลิก"
+          style="width: 80px"
+          @click="edit = !edit"
+        />
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-form ref="myForm">
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-12 row items-center">
+            <div class="col-12">
+              <div class="text-weight-bold text-grey">
+                ตำแหน่งและหน่วยงานเดิม
+              </div>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="salary"
+                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                hide-bottom-space
+                :label="`${'เงินเดือน'}`"
+                type="number"
+              />
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="col-xs-6 col-sm-6 row items-center">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organization"
+                :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
+                hide-bottom-space
+                :label="`${'โอนไปสังกัด'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-6 row items-center">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :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>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
@@ -152,7 +369,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
 
-import type { QTableProps } from "quasar";
+import type { QTableProps, QForm } from "quasar";
 import type {
   TypeFile,
   ResponseDataDetail,
@@ -173,17 +390,21 @@ const {
   success,
 } = mixin;
 
+const myForm = ref<QForm | null>(null);
 const roleAdmin = ref<boolean>(false);
+const edit = ref<boolean>(false);
 
-const name = ref<string>("นายสมคิด ยอดใจ");
-const position = ref<string>("นักจัดการงานทั่วไป");
-const level = ref<string>("ชำนาญการพิเศษ");
-const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
-const status = ref<string>("อยู่ระหว่างการทดลองงาน");
-const organization = ref<string>("ก.ก.");
-const reason = ref<string>("เพราะxxx");
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
+const reason = ref<string>("");
 
 const responseData = ref<ResponseDataDetail>({
+  avataPath: "",
   createdAt: new Date(),
   date: new Date(),
   id: "",
@@ -195,6 +416,7 @@ const responseData = ref<ResponseDataDetail>({
   reason: "",
   salary: 0,
   status: "",
+  fullname: "",
 });
 
 const rows = ref<TypeFile[]>([]);
@@ -239,7 +461,7 @@ onMounted(async () => {
 const getData = async () => {
   showLoader();
   await http
-    .get(config.API.transferUserId(personId.toString()))
+    .get(config.API.transferId(personId.toString()))
     .then((res: any) => {
       const data = res.data.result;
       //   console.log(data);
@@ -251,20 +473,34 @@ const getData = async () => {
             fileName: doc.fileName ?? "",
           });
         });
-        rows.value = list;
-        responseData.value.createdAt = data.createdAt;
-        responseData.value.date = new Date();
-        responseData.value.id = data.id ?? "";
-        responseData.value.organization = data.organization ?? "";
-        responseData.value.organizationPositionOld =
-          data.organizationPositionOld ?? "";
-        responseData.value.positionLevelOld = data.positionLevelOld ?? "";
-        responseData.value.positionNumberOld = data.positionNumberOld ?? "";
-        responseData.value.positionTypeOld = data.positionTypeOld ?? "";
-        responseData.value.reason = data.reason ?? "";
-        responseData.value.salary = data.salary !== null ? data.salary : 0;
-        responseData.value.status = data.status ?? "";
       }
+      rows.value = list;
+      responseData.value.createdAt = data.createdAt;
+      responseData.value.date =
+        data.date !== null ? new Date(data.date) : new Date();
+      responseData.value.id = data.id ?? "";
+      responseData.value.organization = data.organization ?? "";
+      responseData.value.organizationPositionOld =
+        data.organizationPositionOld ?? "";
+      responseData.value.positionLevelOld = data.positionLevelOld ?? "";
+      responseData.value.positionNumberOld = data.positionNumberOld ?? "";
+      responseData.value.positionTypeOld = data.positionTypeOld ?? "";
+      responseData.value.reason = data.reason ?? "";
+      responseData.value.salary = data.salary !== null ? data.salary : 0;
+      responseData.value.status = data.status ?? "";
+      responseData.value.avataPath = data.avataPath ?? "";
+      responseData.value.fullname = `${data.prefix ?? "-"} ${
+        data.firstName ?? "-"
+      } ${data.lastName ?? "-"}`;
+
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.posNo ?? "";
+      salary.value = data.salary ?? "";
+      organization.value = data.organization ?? "";
+      date.value = data.date !== null ? new Date(data.date) : null;
+      reason.value = data.reason ?? "";
     })
     .catch((e) => {
       messageError($q, e);
@@ -304,6 +540,61 @@ const sendConfirm = async () => {
       hideLoader();
     });
 };
+
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
+  }
+};
+
+const saveData = async () => {
+  const body = {
+    organization: organization.value,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    date: date.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.transferId(personId.toString()), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 </script>
 <style lang="scss" scope>
 .q-img {

src/modules/05_placement/interface/response/Transfer.ts

@@ -1,8 +1,10 @@
 interface ResponseData {
   createdAt: Date;
   date: Date;
+  firstName: string;
   id: string;
   isActive: boolean;
+  lastName: string;
   organization: string;
   organizationPositionOld: string;
   posNo: string;
@@ -11,9 +13,12 @@ interface ResponseData {
   positionLevelOld: string;
   positionNumberOld: string;
   positionTypeOld: string;
+  prefix: string;
   reason: string;
   salary: number;
   status: string;
+  fullname: string;
+  statustext: string;
 }
 
 interface TypeFile {
@@ -22,6 +27,7 @@ interface TypeFile {
 }
 
 interface ResponseDataDetail {
+  avataPath: string;
   createdAt: Date;
   date: Date;
   id: string;
@@ -33,6 +39,7 @@ interface ResponseDataDetail {
   reason: string;
   salary: number;
   status: string;
+  fullname: string;
 }
 
 export type { ResponseData, ResponseDataDetail, TypeFile };

src/modules/05_placement/store.ts

@@ -311,3 +311,29 @@ export const useProbationDataStore = defineStore("probationDataStore", () => {
     setStepOrder,
   };
 });
+
+export const useTransferDataStore = defineStore("transferDataStore", () => {
+  const statusText = (val: string) => {
+    switch (val) {
+      case "WAITTING":
+        return "รออนุมัติ";
+      case "PENDING":
+        return "รออนุมัติ";
+      case "APPROVE":
+        return "ผ่านการอนุมัติ";
+      case "REJECT":
+        return "ไม่ผ่านการอนุมัติ";
+      case "REPORT":
+        return "ส่งไปออกคำสั่ง";
+      case "DONE":
+        return "ออกคำสั่งสำเร็จ";
+
+      default:
+        return "-";
+    }
+  };
+
+  return {
+    statusText,
+  };
+});