From 5a220774eb062d016ae72b815e6e13fb0e1f8107 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 2 May 2024 11:38:55 +0700
Subject: [PATCH 1/5] =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99=20=3D>=20=E0=B8=8A?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A7=E0=B8=A2=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3,=E0=B8=AA=E0=B9=88=E0=B8=87=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=A7=E0=B8=81=E0=B8=A5=E0=B8=B1=E0=B8=9A=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Repatriate/Dialogbody.vue      | 209 ++++++++++------
 .../components/Repatriate/RepatriateMain.vue  | 166 +++++--------
 .../components/Repatriate/RepatriatebyId.vue  |   1 +
 .../components/helpgovernment/Dialogbody.vue  | 229 +++++++++++-------
 .../components/helpgovernment/mainHelp.vue    | 214 ++++++----------
 5 files changed, 399 insertions(+), 420 deletions(-)

diff --git a/src/modules/05_placement/components/Repatriate/Dialogbody.vue b/src/modules/05_placement/components/Repatriate/Dialogbody.vue
index 4d00e0f81..79d59db47 100644
--- a/src/modules/05_placement/components/Repatriate/Dialogbody.vue
+++ b/src/modules/05_placement/components/Repatriate/Dialogbody.vue
@@ -2,6 +2,8 @@
 import { ref, computed, watchEffect } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+
 import type { QTableProps } from "quasar";
 import type { officerType } from "@/modules/05_placement/interface/response/officer";
 
@@ -11,20 +13,21 @@ import config from "@/app.config";
 
 const $q = useQuasar();
 const selected = ref<officerType[]>([]);
-const mixin = useCounterMixin();
-const { showLoader, success, messageError, dialogConfirm,hideLoader } = mixin;
+const transferStore = useTransferDataStore();
+
+const { statusText } = transferStore;
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  success,
+  messageError,
+  dialogConfirm,
+  hideLoader,
+  findOrgName,
+  findPosMasterNo,
+  date2Thai,
+} = mixin;
 
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "fullname",
-  "posNo",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
-  "createdAt",
-  "statusText",
-]);
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -36,22 +39,28 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "naem",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
   },
   {
     name: "posNo",
     align: "left",
-    label: "ตำแหน่งเลขที่",
+    label: "เลขที่ตำแหน่ง",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findPosMasterNo(row);
+    },
   },
   {
     name: "position",
@@ -65,11 +74,14 @@ const columns2 = ref<QTableProps["columns"]>([
   {
     name: "positionLevel",
     align: "left",
-    label: "ระดับ",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
     field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.posTypeName} (${row.posLevelName})`;
+    },
   },
   {
     name: "organizationPositionOld",
@@ -79,6 +91,9 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName(row);
+    },
   },
   {
     name: "organization",
@@ -97,30 +112,39 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    sortOrder: "da",
+    format: (val) => date2Thai(val),
   },
   {
-    name: "statusText",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statusText",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => statusText(val),
   },
 ]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "name",
+  "posNo",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "createdAt",
+  "status",
+]);
 
 const props = defineProps({
   Modal: Boolean,
   closeModal: Function,
   getData: Function,
   rows2: Array,
-  filterKeyword2:String,
+  filterKeyword2: String,
 });
 
-
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -129,8 +153,13 @@ const checkSelected = computed(() => {
 
 //popup ยืนยันส่งัว
 const saveOrder = () => {
-    dialogConfirm($q,() => Ordersave(),"ยืนยันส่งไปออกคำสั่ง","ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?" )
-}
+  dialogConfirm(
+    $q,
+    () => Ordersave(),
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+};
 //ส่งไปออกคำสั่ง
 const Ordersave = async () => {
   const id = selected.value.map((item) => item.id);
@@ -149,22 +178,18 @@ const Ordersave = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-        props.getData?.();
+      props.getData?.();
       hideLoader();
     });
 };
 
-const emit = defineEmits([
-  "update:filterKeyword2",
-  "update:selected",
-
-]);
+const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
 const updateInput = (value: any) => {
   emit("update:filterKeyword2", value);
 };
 //รีเซ็ตค่าในช่องค้นหา
 const Reset = () => {
-    emit("update:filterKeyword2", "");
+  emit("update:filterKeyword2", "");
 };
 watchEffect(() => {
   if (props.Modal === true) {
@@ -173,79 +198,111 @@ watchEffect(() => {
 });
 </script>
 <template>
-<q-dialog v-model="props.Modal">
+  <q-dialog v-model="props.Modal">
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader title="ส่งไปออกคำสั่งส่งตัวกลับ" :close="closeModal" />
       <q-separator />
       <q-card-section class="q-pt-none">
-        
         <div class="row justify-end">
           <div class="col-5">
             <q-toolbar style="padding: 0">
-              <q-input borderless outlined dense debounce="300" :model-value="filterKeyword2" 
-                @update:model-value="updateInput" placeholder="ค้นหา" style="width: 850px; max-width: auto">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                :model-value="filterKeyword2"
+                @update:model-value="updateInput"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
                 <template v-slot:append>
                   <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="Reset" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="Reset"
+                  />
                 </template>
               </q-input>
-              <q-select v-model="visibleColumns2" multiple outlined dense options-dense 
-                :display-value="$q.lang.table.columns" emit-value map-options :options="columns2" 
-                option-value="name" options-cover style="min-width: 150px" class="gt-xs q-ml-sm" />
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
             </q-toolbar>
           </div>
         </div>
 
-        <d-table :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="id" 
-            class="custom-header-table" :visible-columns="visibleColumns2" selection="multiple" 
-            v-model:selected="selected">
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="id"
+          class="custom-header-table"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
           <template v-slot:header-selection="scope">
-            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+            <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>
-                <q-checkbox keep-color color="primary" dense v-model="props.selected" />
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
               </q-td>
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="fullname" :props="props">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td key="posNo" :props="props">
-                {{ props.row.posNo }}
-              </q-td>
-              <q-td key="position" :props="props">
-                {{ props.row.position }}
-              </q-td>
-              <q-td key="positionLevel" :props="props">
-                {{ props.row.positionLevel }}
-              </q-td>
-              <q-td key="organizationPositionOld" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organizationPositionOld }}
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
                 </div>
-              </q-td>
-              <q-td key="organization" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organization }}
+
+                <div
+                  v-else
+                  :class="
+                    col.name === 'organizationPositionOld' ||
+                    col.name === 'organization'
+                      ? 'table_ellipsis'
+                      : ''
+                  "
+                >
+                  {{ col.value ? col.value : "-" }}
                 </div>
               </q-td>
-              <q-td key="createdAt" :props="props">
-                {{ props.row.createdAt }}
-              </q-td>
-              <q-td key="statusText" :props="props">
-                {{ props.row.statusText }}
-              </q-td>
             </q-tr>
           </template>
         </d-table>
       </q-card-section>
 
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ส่งไปออกคำสั่ง" @click="saveOrder" :disable="checkSelected" color="public"/>
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
index b08374d15..5a85adc91 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
@@ -34,24 +34,6 @@ const {
   findPosMasterNo,
 } = mixin;
 
-const visibleColumns = ref<string[]>([
-  "no",
-  "fullname",
-  "posNo",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
-  "createdAt",
-  "statusText",
-]);
-// รีเซ้ตค่าในช่อง ฟิลเตอร์
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterKeyword2.value = "";
-  filterRef.value.focus();
-};
-
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
@@ -64,13 +46,16 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "naem",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
   },
   {
     name: "posNo",
@@ -80,6 +65,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findPosMasterNo(row);
+    },
   },
   {
     name: "position",
@@ -98,6 +86,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.posTypeName} (${row.posLevelName})`;
+    },
   },
   {
     name: "organizationPositionOld",
@@ -107,6 +98,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName(row);
+    },
   },
   {
     name: "organization",
@@ -125,20 +119,37 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    sortOrder: "da",
+    format: (val) => date2Thai(val),
   },
   {
-    name: "statusText",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statusText",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => statusText(val),
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "posNo",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "createdAt",
+  "status",
+]);
+
+// รีเซ้ตค่าในช่อง ฟิลเตอร์
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
 
 //เปิดรายละเอียด
 const openDetail = (id: string) => {
@@ -169,6 +180,7 @@ const openModalOrder = () => {
       item.date &&
       item.dateRepatriation
   );
+
   rows2.value = row;
 };
 
@@ -179,33 +191,11 @@ const getData = async () => {
     .get(config.API.repatriationMain())
     .then((res: any) => {
       const data = res.data.result;
-      rows.value = data.map((item: officerType) => ({
-        id: item.id,
-        fullname: `${item.prefix}${item.firstName} ${item.lastName}`,
-        position: item.position,
-        posNo: findPosMasterNo(item),
-        positionLevel:
-          item.posTypeName == null && item.posLevelName == null
-            ? "-"
-            : (item.posTypeName != null ? item.posTypeName : "") +
-              " " +
-              (item.posLevelName != null ? ` (${item.posLevelName})` : ""),
-        createdAt: date2Thai(item.createdAt),
-        organization: item.organization,
-        reason: item.reason,
-        status: item.status,
-        statusText: statusText(item.status),
-        date: item.date,
-        salary: item.salary,
-        positionTypeOld: item.positionTypeOld,
-        positionLevelOld: item.positionLevelOld,
-        positionNumberOld: item.positionNumberOld,
-        organizationPositionOld: item.organizationPositionOld,
-        isActive: item.isActive,
-        dateRepatriation: item.dateRepatriation,
-      }));
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
     })
-    .catch((e) => {})
     .finally(() => {
       hideLoader();
     });
@@ -308,69 +298,27 @@ onMounted(async () => {
 
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
-                <q-td key="no" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.rowIndex + 1 }}
-                </q-td>
                 <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
+                  v-for="col in props.cols"
+                  :key="col.id"
+                  @click.stop.prevent="openDetail(props.row.id)"
                 >
-                  {{ props.row.fullname }}
-                </q-td>
-                <q-td
-                  key="posNo"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.posNo }}
-                </q-td>
-                <q-td
-                  key="position"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.position ?? "-" }}
-                </q-td>
-                <q-td
-                  key="positionLevel"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td
-                  key="organizationPositionOld"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  <div class="table_ellipsis">
-                    {{ props.row.organizationPositionOld }}
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
                   </div>
-                </q-td>
-                <q-td
-                  key="organization"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  <div class="table_ellipsis">
-                    {{ props.row.organization }}
+
+                  <div
+                    v-else
+                    :class="
+                      col.name === 'organizationPositionOld' ||
+                      col.name === 'organization'
+                        ? 'table_ellipsis'
+                        : ''
+                    "
+                  >
+                    {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
-                <q-td
-                  key="createdAt"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.createdAt }}
-                </q-td>
-                <q-td
-                  key="statusText"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.statusText }}
-                </q-td>
                 <q-td auto-width>
                   <q-btn
                     icon="delete"
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index 633066225..68f398dfb 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -366,6 +366,7 @@ onMounted(async () => {
                 :options="{ currency: 'THB' }"
                 :label="`${'เงินเดือน'}`"
                 :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                lazy-rules
               />
             </div>
           </div>
diff --git a/src/modules/05_placement/components/helpgovernment/Dialogbody.vue b/src/modules/05_placement/components/helpgovernment/Dialogbody.vue
index bf0377672..064a57a48 100644
--- a/src/modules/05_placement/components/helpgovernment/Dialogbody.vue
+++ b/src/modules/05_placement/components/helpgovernment/Dialogbody.vue
@@ -2,32 +2,31 @@
 import { ref, computed, watchEffect } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type { QTableProps } from "quasar";
 import type { officerType } from "@/modules/05_placement/interface/response/officer";
 
 import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
+
+import { useTransferDataStore } from "@/modules/05_placement/store";
 
 const $q = useQuasar();
+const { statusText } = useTransferDataStore();
 const selected = ref<officerType[]>([]);
 const mixin = useCounterMixin();
-const { showLoader, success, messageError, dialogConfirm,hideLoader } = mixin;
+const {
+  showLoader,
+  success,
+  messageError,
+  dialogConfirm,
+  hideLoader,
+  findOrgName,
+  findPosMasterNo,
+  date2Thai,
+} = mixin;
 
-//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "fullname",
-  "posNo",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
-  "dateStart",
-  "dateEnd",
-  "createdAt",
-  "statusText",
-]);
 //หัวตาราง
 const columns2 = ref<QTableProps["columns"]>([
   {
@@ -40,22 +39,28 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
   },
   {
     name: "posNo",
     align: "left",
-    label: "ตำแหน่งเลขที่",
+    label: "เลขที่ตำแหน่ง",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findPosMasterNo(row);
+    },
   },
   {
     name: "position",
@@ -69,11 +74,14 @@ const columns2 = ref<QTableProps["columns"]>([
   {
     name: "positionLevel",
     align: "left",
-    label: "ระดับ",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
     field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.posTypeName} (${row.posLevelName})`;
+    },
   },
   {
     name: "organizationPositionOld",
@@ -83,6 +91,10 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    classes: "table_ellipsis",
+    format(val, row) {
+      return findOrgName(row);
+    },
   },
   {
     name: "organization",
@@ -92,6 +104,7 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    classes: "table_ellipsis",
   },
   {
     name: "dateStart",
@@ -101,8 +114,7 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "dateStart",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    format: (val) => date2Thai(val),
   },
   {
     name: "dateEnd",
@@ -112,8 +124,7 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "dateEnd",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    format: (val) => date2Thai(val),
   },
   {
     name: "createdAt",
@@ -123,31 +134,41 @@ const columns2 = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    sortOrder: "da",
+    format: (val) => date2Thai(val),
   },
   {
-    name: "statusText",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statusText",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => statusText(val),
   },
 ]);
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "name",
+  "posNo",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "dateStart",
+  "dateEnd",
+  "createdAt",
+  "status",
+]);
 
 const props = defineProps({
   Modal: Boolean,
   closeModal: Function,
   getData: Function,
   rows2: Array,
-  filterKeyword2:String,
+  filterKeyword2: String,
 });
 
-
-
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
@@ -156,8 +177,13 @@ const checkSelected = computed(() => {
 
 //popup ยืนยันส่งัว
 const saveOrder = () => {
-    dialogConfirm($q,() => Ordersave(),"ยืนยันส่งไปออกคำสั่ง","ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?" )
-}
+  dialogConfirm(
+    $q,
+    () => Ordersave(),
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+};
 //ส่งไปออกคำสั่ง
 const Ordersave = async () => {
   const id = selected.value.map((item) => item.id);
@@ -167,30 +193,26 @@ const Ordersave = async () => {
   showLoader();
   await http
     .post(config.API.officerMainReport(), body)
-    .then((res: any) => {
-      success($q, "ส่งไปออกคำสั่งช่วยราชการสำเร็จ");
+    .then(() => {
       props.closeModal?.();
+      success($q, "ส่งไปออกคำสั่งช่วยราชการสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(async () => {
-        props.getData?.();
+      props.getData?.();
       hideLoader();
     });
 };
 
-const emit = defineEmits([
-  "update:filterKeyword2",
-  "update:selected",
-
-]);
+const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
 const updateInput = (value: any) => {
   emit("update:filterKeyword2", value);
 };
 //รีเซ็ตค่าในช่องค้นหา
 const Reset = () => {
-    emit("update:filterKeyword2", "");
+  emit("update:filterKeyword2", "");
 };
 watchEffect(() => {
   if (props.Modal === true) {
@@ -199,7 +221,7 @@ watchEffect(() => {
 });
 </script>
 <template>
-      <q-dialog v-model="props.Modal">
+  <q-dialog v-model="props.Modal">
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader title="ส่งไปออกคำสั่งช่วยราชการ" :close="closeModal" />
       <q-separator />
@@ -207,75 +229,100 @@ watchEffect(() => {
         <div class="row justify-end">
           <div class="col-5">
             <q-toolbar style="padding: 0">
-              <q-input borderless outlined dense debounce="300" :model-value="filterKeyword2" 
-                @update:model-value="updateInput" placeholder="ค้นหา" style="width: 850px; max-width: auto" >
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                :model-value="filterKeyword2"
+                @update:model-value="updateInput"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
                 <template v-slot:append>
                   <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="Reset" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="Reset"
+                  />
                 </template>
               </q-input>
-              <q-select v-model="visibleColumns2" multiple outlined dense options-dense
-                :display-value="$q.lang.table.columns" emit-value map-options :options="columns2"
-                option-value="name" options-cover style="min-width: 150px" class="gt-xs q-ml-sm" />
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
             </q-toolbar>
           </div>
         </div>
 
-        <d-table :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="id" class="custom-header-table" 
-          :visible-columns="visibleColumns2" selection="multiple" v-model:selected="selected"  >
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="id"
+          class="custom-header-table"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
           <template v-slot:header-selection="scope">
-            <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+            <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>
-                <q-checkbox keep-color color="primary" dense v-model="props.selected" />
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
               </q-td>
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="fullname" :props="props">
-                {{ props.row.fullname }}
-              </q-td>
-              <q-td key="posNo" :props="props">
-                {{ props.row.posNo }}
-              </q-td>
-              <q-td key="position" :props="props">
-                {{ props.row.position }}
-              </q-td>
-              <q-td key="positionLevel" :props="props">
-                {{ props.row.positionLevel }}
-              </q-td>
-              <q-td key="organizationPositionOld" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organizationPositionOld }}
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
                 </div>
-              </q-td>
-              <q-td key="organization" :props="props">
-                <div class="table_ellipsis">
-                  {{ props.row.organization }}
+
+                <div v-else  :class="
+                col.name === 'organizationPositionOld' ||
+                col.name === 'organization'
+                  ? 'table_ellipsis'
+                  : ''
+              ">
+                  {{ col.value ? col.value : "-" }}
                 </div>
               </q-td>
-              <q-td key="dateStart" :props="props">
-                {{ props.row.dateStart }}
-              </q-td>
-              <q-td key="dateEnd" :props="props">
-                {{ props.row.dateEnd }}
-              </q-td>
-              <q-td key="createdAt" :props="props">
-                {{ props.row.createdAt }}
-              </q-td>
-              <q-td key="statusText" :props="props">
-                {{ props.row.statusText }}
-              </q-td>
             </q-tr>
           </template>
         </d-table>
       </q-card-section>
 
       <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ส่งไปออกคำสั่ง" :disable="checkSelected" color="public" @click="saveOrder" />
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          :disable="checkSelected"
+          color="public"
+          @click="saveOrder"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/helpgovernment/mainHelp.vue b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
index b5a6c995d..0b3b026e0 100644
--- a/src/modules/05_placement/components/helpgovernment/mainHelp.vue
+++ b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
@@ -35,21 +35,6 @@ const {
   findPosMasterNo,
 } = mixin;
 
-//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const visibleColumns = ref<string[]>([
-  "no",
-  "fullname",
-  "posNo",
-  "position",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
-  "dateStart",
-  "dateEnd",
-  "createdAt",
-  "statusText",
-]);
-
 //หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
@@ -62,13 +47,16 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
   },
   {
     name: "posNo",
@@ -78,6 +66,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findPosMasterNo(row);
+    },
   },
   {
     name: "position",
@@ -96,6 +87,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "positionLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.posTypeName} (${row.posLevelName})`;
+    },
   },
   {
     name: "organizationPositionOld",
@@ -105,6 +99,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "organizationPositionOld",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName(row);
+    },
   },
   {
     name: "organization",
@@ -123,8 +120,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "dateStart",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    format: (val) => date2Thai(val),
   },
   {
     name: "dateEnd",
@@ -134,8 +130,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "dateEnd",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    format: (val) => date2Thai(val),
   },
   {
     name: "createdAt",
@@ -145,20 +140,32 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-    sortOrder: "da",
+    format: (val) => date2Thai(val),
   },
   {
-    name: "statusText",
+    name: "status",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statusText",
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (val) => statusText(val),
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "posNo",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "dateStart",
+  "dateEnd",
+  "createdAt",
+  "status",
+]);
 
 //รีเซ็ตข้อมูลในช่องฟิลเตอร์
 const resetFilter = () => {
@@ -195,57 +202,32 @@ const getData = async () => {
     .get(config.API.officerMain())
     .then((res: any) => {
       const data = res.data.result;
-      rows.value = data.map((item: officerType) => ({
-        id: item.id,
-        fullname: `${item.prefix}${item.firstName} ${item.lastName}`,
-        position: item.position != null ? item.position : "-",
-        posNo: findPosMasterNo(item),
-        positionLevel:
-          item.posTypeName == null && item.posLevelName == null
-            ? "-"
-            : (item.posTypeName != null ? item.posTypeName : "") +
-              " " +
-              (item.posLevelName != null ? ` (${item.posLevelName})` : ""),
-        createdAt: date2Thai(item.createdAt),
-        organization: item.organization,
-        reason: item.reason,
-        status: item.status,
-        statusText: statusText(item.status),
-        date: item.date,
-        salary: item.salary,
-        positionTypeOld: item.positionTypeOld,
-        positionLevelOld: item.positionLevelOld,
-        positionNumberOld: item.positionNumberOld,
-        organizationPositionOld: findOrgName(item),
-        isActive: item.isActive,
-        dateEnd: item.dateEnd == null ? "" : date2Thai(new Date(item.dateEnd)),
-        dateStart:
-          item.dateStart == null ? "" : date2Thai(new Date(item.dateStart)),
-      }));
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
     })
-
-    .catch((e) => {})
     .finally(() => {
       hideLoader();
     });
 };
 
-const deleteData = async (id: string) => {
-  await http
-    .delete(config.API.officerMainDelete(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-    });
-};
-
-const clickDelete = async (name: string, id: string) => {
-  dialogRemove($q, async () => await deleteData(id));
+const clickDelete = async (id: string) => {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.officerMainDelete(id))
+      .then(() => {
+        getData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 };
 onMounted(async () => {
   await getData();
@@ -326,83 +308,27 @@ onMounted(async () => {
             </template>
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
-                <q-td key="no" :props="props" @click="openDetail(props.row.id)">
-                  {{ props.rowIndex + 1 }}
-                </q-td>
                 <q-td
-                  key="fullname"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
+                  v-for="col in props.cols"
+                  :key="col.id"
+                  @click.stop.prevent="openDetail(props.row.id)"
                 >
-                  {{ props.row.fullname }}
-                </q-td>
-                <q-td
-                  key="posNo"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.posNo }}
-                </q-td>
-                <q-td
-                  key="position"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.position }}
-                </q-td>
-                <q-td
-                  key="positionLevel"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.positionLevel }}
-                </q-td>
-                <q-td
-                  key="organizationPositionOld"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  <div class="table_ellipsis">
-                    {{ props.row.organizationPositionOld }}
+                  <div v-if="col.name === 'no'">
+                    {{ props.rowIndex + 1 }}
                   </div>
-                </q-td>
-                <q-td
-                  key="organization"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  <div class="table_ellipsis">
-                    {{ props.row.organization }}
+
+                  <div
+                    v-else
+                    :class="
+                      col.name === 'organizationPositionOld' ||
+                      col.name === 'organization'
+                        ? 'table_ellipsis'
+                        : ''
+                    "
+                  >
+                    {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
-                <q-td
-                  key="dateStart"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.dateStart }}
-                </q-td>
-                <q-td
-                  key="dateEnd"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.dateEnd }}
-                </q-td>
-                <q-td
-                  key="createdAt"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.createdAt }}
-                </q-td>
-                <q-td
-                  key="statusText"
-                  :props="props"
-                  @click="openDetail(props.row.id)"
-                >
-                  {{ props.row.statusText }}
-                </q-td>
                 <q-td auto-width>
                   <q-btn
                     icon="delete"
@@ -415,7 +341,7 @@ onMounted(async () => {
                         ? 'grey'
                         : 'red-7'
                     "
-                    @click="clickDelete(props.row.fullname, props.row.id)"
+                    @click="clickDelete(props.row.id)"
                     :disable="
                       props.row.status == 'REPORT' || props.row.status == 'DONE'
                     "

From 443576e6caf6ebea7b01fef0ef6d6bd025861ab8 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 2 May 2024 11:51:17 +0700
Subject: [PATCH 2/5] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=84=E0=B8=A7=E0=B8=B2=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/14_KPI/views/detail.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/14_KPI/views/detail.vue b/src/modules/14_KPI/views/detail.vue
index 9eee6473d..d0b061b50 100644
--- a/src/modules/14_KPI/views/detail.vue
+++ b/src/modules/14_KPI/views/detail.vue
@@ -114,7 +114,7 @@ onMounted(() => {
         class="q-mr-sm"
         @click="isReadonly ? router.push(`/KPI-list`) : router.push(`/KPI`)"
       />
-      {{ id ? `แก้ไขแบบประเมิน` : `เพิ่มแบบประเมิน` }}
+      {{ id ? `รายละเอียดแบบประเมิน` : `เพิ่มแบบประเมิน` }}
       <q-space />
     </div>
     <div class="col-12">

From bb549016fe999b33e443d8899fae840e4be6f6b8 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 2 May 2024 14:55:45 +0700
Subject: [PATCH 3/5] show year of scholarship list

---
 src/modules/15_development/views/Scholarship.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index e1cccdc20..dd5459d38 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@@ -24,6 +24,18 @@ const { showLoader, hideLoader, messageError } = useCounterMixin();
 /** หัวตาราง */
 const rows = ref<ListSholarship[]>([]);
 const columns = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val) {
+      return val + 543;
+    },
+  },
   {
     name: "citizenId",
     align: "left",
@@ -81,6 +93,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const visibleColumns = ref<string[]>([
+  "year",
   "citizenId",
   "fullName",
   "position",

From 45d7189d9261826a2d55d39d67dd08a75f944d05 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 2 May 2024 15:12:10 +0700
Subject: [PATCH 4/5] =?UTF-8?q?=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B8=20=3D>=20=E0=B8=8A=E0=B9=88=E0=B8=A7=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3,=20?=
 =?UTF-8?q?=E0=B8=AA=E0=B9=88=E0=B8=87=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B1=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CardProfile.vue                | 140 +++++++
 src/components/Dialogs/PopupPersonalNew.vue   |  14 +-
 src/interface/main.ts                         |  10 +-
 .../components/Repatriate/RepatriatebyId.vue  | 333 ++++++-----------
 .../helpgovernment/governmentDetail.vue       | 341 +++++++-----------
 .../05_placement/interface/index/Main.ts      |  31 ++
 6 files changed, 426 insertions(+), 443 deletions(-)
 create mode 100644 src/components/CardProfile.vue

diff --git a/src/components/CardProfile.vue b/src/components/CardProfile.vue
new file mode 100644
index 000000000..e73dbbab3
--- /dev/null
+++ b/src/components/CardProfile.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { FormProfile } from "@/interface/main";
+import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
+
+/** importComponents*/
+import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
+
+/** impoerStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const { messageError, findOrgName } = useCounterMixin();
+
+/** propsDataProfile*/
+const props = defineProps({
+  data: { type: Object, required: true },
+});
+
+const profile = reactive<FormProfile>({
+  id: "",
+  avatar: "",
+  fullName: "",
+  position: "",
+  positionLevel: "",
+  organization: "",
+});
+const modalPersonal = ref<boolean>(false);
+
+function fetchDataProfile(data: DataProfile) {
+  fetchProfile(data.profileId);
+  profile.id = data.profileId;
+  profile.fullName = `${data.prefix}${data.firstName} ${data.lastName}`;
+  profile.position = data.position !== "" ? data.position : "-";
+  profile.positionLevel = `${data.posTypeName} (${data.posLevelName})`;
+  profile.organization = findOrgName(data);
+}
+
+function fetchProfile(id: string) {
+  if (profile.avatar === "") {
+    http
+      .get(
+        config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
+      )
+      .then(async (res) => {
+        profile.avatar = res.data.downloadUrl;
+      })
+      .catch((e) => {
+        if (e.response.data.message === "ไม่พบไฟล์ในระบบ") {
+          profile.avatar = "";
+        } else {
+          messageError($q, e);
+        }
+      });
+  }
+}
+
+function updatemodalPersonal(modal: boolean) {
+  modalPersonal.value = modal;
+}
+
+function onclickViewinfo() {
+  modalPersonal.value = true;
+}
+
+watch(
+  () => props.data,
+  () => {
+    const dataMain = props.data as DataProfile;
+    fetchDataProfile(dataMain);
+  }
+);
+</script>
+
+<template>
+  <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">
+        {{ profile.fullName }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="onclickViewinfo()"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <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="profile.avatar" v-if="profile.avatar !== ''" />
+          <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">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">
+              {{ profile.position }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ประเภทตำแหน่ง</div>
+            <div class="col-12 text-detail">
+              {{ profile.positionLevel }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ profile.organization }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <PopupPersonal
+    :modal="modalPersonal"
+    :id="profile.id"
+    @update:modal="updatemodalPersonal"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/components/Dialogs/PopupPersonalNew.vue b/src/components/Dialogs/PopupPersonalNew.vue
index d9664e4cb..df0e8794a 100644
--- a/src/components/Dialogs/PopupPersonalNew.vue
+++ b/src/components/Dialogs/PopupPersonalNew.vue
@@ -142,7 +142,7 @@ async function fetchProfileGov(id: string) {
       goverment.positionType = data.posType !== "" ? data.posType : "-";
       goverment.positionLevel = data.posLevel !== "" ? data.posLevel : "-";
       goverment.positionExecutive =
-        data.posExecutive !== "" ? data.posExecutive : "-";
+        data.posExecutive !== null ? data.posExecutive : "-";
       goverment.positionExecutiveSide =
         data.positionExecutiveField !== "" ? data.positionExecutiveField : "-";
     })
@@ -172,9 +172,12 @@ watch(
   async () => {
     modal.value = props.modal ? props.modal : false;
     if (modal.value) {
-      props.id && (fetchInformation(props.id), fetchProfileGov(props.id));
-      (fileName.value = `profile-${props.id}`),
+      if (props.id) {
+        fetchInformation(props.id);
+        fetchProfileGov(props.id);
+        fileName.value = `profile-${props.id}`;
         fetchProfile(props.id as string);
+      }
     }
   }
 );
@@ -214,11 +217,6 @@ async function fetchProfile(id: string) {
           style="color: red; background-color: #ffdede"
         />
       </q-toolbar>
-      <!-- <q-card-section>
-        <div class="text-bold text-h6 text-center">ข้อมูลทะเบียนประวัติ</div>
-        <q-space />
-
-      </q-card-section> -->
 
       <q-card-section class="col q-pt-none bg-grey-12">
         <div class="q-gutter-md">
diff --git a/src/interface/main.ts b/src/interface/main.ts
index cb2e79ee5..21a88d9d6 100644
--- a/src/interface/main.ts
+++ b/src/interface/main.ts
@@ -2,5 +2,13 @@ interface DataOption {
   id: string;
   label: string;
 }
+interface FormProfile {
+  id: string;
+  avatar: string;
+  fullName: string;
+  position: string;
+  positionLevel: string;
+  organization: string;
+}
 
-export type { DataOption };
+export type { DataOption, FormProfile };
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index 68f398dfb..864bf2f71 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -1,21 +1,21 @@
-div
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-
 import CurrencyInput from "@/components/CurruncyInput.vue";
-
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** importTypr*/
 import type { QForm } from "quasar";
 import type { ResponseData } from "@/modules/05_placement/interface/response/officer";
-import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
+import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 
-const modalPersonal = ref<boolean>(false);
-const personalId = ref<string>("");
+/** importComponents*/
+import CardProfile from "@/components/CardProfile.vue";
+
+/** use*/
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
@@ -33,56 +33,42 @@ const {
 
 const myForm = ref<QForm | null>(null);
 
-const personId = ref<string>("");
+const dataProfile = ref<DataProfile>();
+
 const fullname = ref<string>("");
-const id = ref<string>("");
-const prefix = ref<string>("");
-const firstName = ref<string>("");
-const lastName = ref<string>("");
-const position = ref<string>("");
-const posNo = ref<string>("");
-const positionLevel = ref<string>("");
-const createdAt = ref<string>("");
-const organization = ref<string>("");
-const reason = ref<string>("");
-const status = ref<string>("");
-const date = ref<Date | null>(null);
-const salary = ref<number>(0);
+
+/** form แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย*/
+const organizationPositionOld = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
 const positionNumberOld = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const avatar = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
 const dateRepatriation = ref<Date | null>(null);
+const reason = ref<string>("");
+const status = ref<string>("");
 
-const getData = async () => {
+/** fetch ข้อมูลรายละเอียด*/
+const getData = () => {
   showLoader();
-  await http
+  http
     .get(config.API.repatriationDetail(dataId))
     .then((res: ResponseData) => {
       const data = res.data.result;
-      (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
-        (id.value = data.id);
-      personId.value = data.profileId;
-      prefix.value = data.prefix;
-      firstName.value = data.firstName;
-      lastName.value = data.lastName;
+      dataProfile.value = res.data.result as unknown as DataProfile;
+      fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`;
 
-      position.value = data.position ?? "-";
-      posNo.value = data.posNo;
-      positionLevel.value = `${data.posTypeName}(${data.posLevelName})`;
-      createdAt.value = data.createdAt;
-      organization.value = data.organization;
-      reason.value = data.reason;
-      status.value = data.status;
-      date.value = data.date;
-      salary.value = data.salary;
+      organizationPositionOld.value = data.organizationPositionOld;
       positionTypeOld.value = data.positionTypeOld;
       positionLevelOld.value = data.positionLevelOld;
       positionNumberOld.value = data.positionNumberOld;
-      organizationPositionOld.value = data.organizationPositionOld;
+      salary.value = data.salary;
+      organization.value = data.organization;
+      reason.value = data.reason;
+      date.value = data.date;
       dateRepatriation.value = data.dateRepatriation;
-      fetchProfile(data.profileId);
+      status.value = data.status;
     })
     .catch((e) => {
       messageError($q, e);
@@ -92,26 +78,46 @@ const getData = async () => {
     });
 };
 
-function fetchProfile(id: string) {
-  showLoader();
-  http
-    .get(
-      config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
-    )
-    .then(async (res) => {
-      avatar.value = res.data.downloadUrl;
-    })
-    .catch((e) => {
-      if (e.response.data.message === "ไม่พบไฟล์ในระบบ") {
-        avatar.value = "";
-      } else {
-        messageError($q, e);
-      }
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
+const onSubmit = () => {
+  dialogConfirm(
+    $q,
+    () => {
+      const body = {
+        organizationPositionOld: organizationPositionOld.value,
+        positionTypeOld: positionTypeOld.value,
+        positionLevelOld: positionLevelOld.value,
+        positionNumberOld: positionNumberOld.value,
+        amountOld: salary.value,
+        organization: organization.value,
+        date: date.value,
+        dateRepatriation: dateRepatriation.value,
+        reason: reason.value,
+      };
+      showLoader();
+      http
+        .put(config.API.repatriationMainEdit(dataId), body)
+        .then(() => {
+          success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+          edit.value = false;
+          getData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ต้องการแก้ไขข้อมูลหรือไม่?",
+    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+  );
+};
+
+const cancelBtn = () => {
+  edit.value = !edit;
+  getData();
+  myForm.value?.resetValidation();
+};
 
 const getClass = (val: boolean) => {
   return {
@@ -120,64 +126,8 @@ const getClass = (val: boolean) => {
   };
 };
 
-const conditionSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then((success: any) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => await saveData(),
-          "ต้องการแก้ไขข้อมูลหรือไม่?",
-          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-        );
-      }
-    });
-  }
-};
-const cancelBtn = () => {
-  edit.value = !edit;
+onMounted(() => {
   getData();
-  myForm.value?.resetValidation();
-};
-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,
-    dateRepatriation: dateRepatriation.value,
-  };
-  showLoader();
-  await http
-    .put(config.API.repatriationMainEdit(dataId), body)
-    .then(() => {
-      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-};
-
-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personalId.value = id;
-}
-
-function updatemodalPersonal(modal: boolean) {
-  modalPersonal.value = modal;
-}
-
-onMounted(async () => {
-  await getData();
 });
 </script>
 
@@ -195,99 +145,58 @@ onMounted(async () => {
     />
     รายละเอียดการส่งตัวกลับ {{ 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">
-        {{ fullname }}
-      </div>
-      <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(personId)"
-      />
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <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="avatar" v-if="avatar !== ''" />
-          <q-img v-else src="@/assets/avatar_user.jpg" />
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12 q-pl-md">
-            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-            <div class="col-12 text-detail">
-              {{ position }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">ประเภทตำแหน่ง</div>
-            <div class="col-12 text-detail">
-              {{ positionLevel }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">สังกัด</div>
-            <div class="col-12 text-detail">
-              {{ organization }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
+
+  <CardProfile :data="dataProfile as DataProfile" />
 
   <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">
-        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+    <q-form
+      ref="myForm"
+      greedy
+      @submit.prevent
+      @validation-success="onSubmit"
+      class="col-12"
+    >
+      <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"
+            v-if="!(status == 'REPORT' || status == 'DONE')"
+          />
+        </div>
+        <div class="q-gutter-sm" v-else>
+          <q-btn
+            outline
+            color="public"
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            type="submit"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="cancelBtn"
+          />
+        </div>
       </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"
-          v-if="!(status == 'REPORT' || status == 'DONE')"
-        />
-      </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="cancelBtn"
-        />
-      </div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <q-form ref="myForm">
+      <div class="col-12"><q-separator /></div>
+
       <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">
@@ -351,7 +260,7 @@ onMounted(async () => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="posNo"
+                v-model="positionNumberOld"
                 :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
                 hide-bottom-space
                 :label="`${'เลขที่'}`"
@@ -501,12 +410,6 @@ onMounted(async () => {
       </div>
     </q-form>
   </q-card>
-
-  <PopupPersonal
-    :modal="modalPersonal"
-    :id="personalId"
-    @update:modal="updatemodalPersonal"
-  />
 </template>
 
 <style lang="scss" scope>
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
index aa3e2b197..d08ebd712 100644
--- a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
+++ b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
@@ -2,21 +2,25 @@
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+/** importType*/
 import type { QForm } from "quasar";
 import type { resHelpDetail } from "@/modules/05_placement/interface/response/officer";
-import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
+import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 
-const modalPersonal = ref<boolean>(false);
-const personId = ref<string>("");
+/** importComponents*/
+import CardProfile from "@/components/CardProfile.vue";
+
+/** impoerStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-const edit = ref<boolean>(false);
-const dataId = route.params.id as string;
 const {
   date2Thai,
   dialogConfirm,
@@ -27,55 +31,35 @@ const {
 } = mixin;
 
 const myForm = ref<QForm | null>(null);
-const fullname = ref<string>("");
-const id = ref<string>("");
-const profileId = ref<string>("");
-const prefix = ref<string>("");
-const firstName = ref<string>("");
-const lastName = ref<string>("");
-const position = ref<string>("");
-const posNo = ref<string>("");
-const positionLevel = ref<string>("");
-const createdAt = ref<string>("");
-const organization = ref<string>("");
-const reason = ref<string>("");
-const status = ref<string>("");
-const dateStart = ref<Date | null>(null);
-const dateEnd = ref<Date | null>(null);
-const salary = ref<string>("");
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const positionNumberOld = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const isActive = ref<string>("");
-const avatar = ref<string>("");
+const edit = ref<boolean>(false);
+const dataId = route.params.id as string;
+const dataProfile = ref<DataProfile>();
 
-const getData = async () => {
+const fullname = ref<string>("");
+
+/** form แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย*/
+const organizationPositionOld = ref<string>(""); //ตำแหน่งและหน่วยงานเดิม
+const organization = ref<string>(""); //หน่วยงานเดิม
+const dateStart = ref<Date | null>(null); //ตั้งแต่วันที่
+const dateEnd = ref<Date | null>(null); // ถึงวันที่
+const reason = ref<string>(""); //หมายเหตุ
+const status = ref<string>("");
+
+/** fetch ข้อมูลรายละเอียด*/
+const getData = () => {
   showLoader();
-  await http
+  http
     .get(config.API.officerDetail(dataId))
     .then((res: resHelpDetail) => {
       const data = res.data.result;
-      (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
-        (id.value = data.id);
-      profileId.value = data.profileId;
-      prefix.value = data.prefix;
-      firstName.value = data.firstName;
-      lastName.value = data.lastName;
-      position.value = data.position ?? "-";
-      posNo.value = data.posNo;
-      positionLevel.value = `${data.posTypeName}(${data.posLevelName})`;
-      createdAt.value = data.createdAt;
+      dataProfile.value = res.data.result as unknown as DataProfile;
+      fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`;
+      organizationPositionOld.value = data.organizationPositionOld;
       organization.value = data.organization;
-      reason.value = data.reason;
-      status.value = data.status;
       dateStart.value = data.dateStart;
       dateEnd.value = data.dateEnd;
-      positionTypeOld.value = data.position;
-      positionLevelOld.value = `${data.posTypeName}(${data.posLevelName})`;
-      positionNumberOld.value = data.positionNumberOld;
-      organizationPositionOld.value = data.organizationPositionOld;
-      fetchProfile(data.profileId);
+      reason.value = data.reason;
+      status.value = data.status;
     })
     .catch((e) => {
       messageError($q, e);
@@ -85,26 +69,47 @@ const getData = async () => {
     });
 };
 
-function fetchProfile(id: string) {
-  showLoader();
-  http
-    .get(
-      config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
-    )
-    .then(async (res) => {
-      avatar.value = res.data.downloadUrl;
-    })
-    .catch((e) => {
-      if (e.response.data.message === "ไม่พบไฟล์ในระบบ") {
-        avatar.value = "";
-      } else {
-        messageError($q, e);
-      }
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
+/** บันทึกข้อมูล*/
+const onSubmit = () => {
+  dialogConfirm(
+    $q,
+    () => {
+      const body = {
+        organizationPositionOld: organizationPositionOld.value,
+        organization: organization.value,
+        dateStart: dateStart.value,
+        dateEnd: dateEnd.value,
+        reason: reason.value,
+        // positionTypeOld: positionTypeOld.value,
+        // positionLevelOld: positionLevelOld.value,
+        // positionNumberOld: posNo.value,
+        // amountOld: salary.value,
+      };
+      showLoader();
+      http
+        .put(config.API.officerMainEdit(dataId), body)
+        .then(() => {
+          success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+          edit.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          getData();
+          hideLoader();
+        });
+    },
+    "ต้องการแก้ไขข้อมูลหรือไม่?",
+    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+  );
+};
+
+const cancelBtn = () => {
+  edit.value = !edit;
+  myForm.value?.resetValidation();
+  getData();
+};
 
 const getClass = (val: boolean) => {
   return {
@@ -112,66 +117,9 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
-//
-const conditionSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then((success: any) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => await saveData(),
-          "ต้องการแก้ไขข้อมูลหรือไม่?",
-          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-        );
-      }
-    });
-  }
-};
 
-const cancelBtn = () => {
-  edit.value = !edit;
+onMounted(() => {
   getData();
-  myForm.value?.resetValidation();
-};
-const saveData = async () => {
-  const body = {
-    organization: organization.value,
-    reason: reason.value,
-    organizationPositionOld: organizationPositionOld.value,
-    dateStart: dateStart.value,
-    dateEnd: dateEnd.value,
-    positionTypeOld: positionTypeOld.value,
-    positionLevelOld: positionLevelOld.value,
-    positionNumberOld: posNo.value,
-    amountOld: salary.value,
-  };
-  showLoader();
-  await http
-    .put(config.API.officerMainEdit(dataId), body)
-    .then(() => {
-      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-};
-
-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personId.value = id;
-}
-
-function updatemodalPersonal(modal: boolean) {
-  modalPersonal.value = modal;
-}
-
-onMounted(async () => {
-  await getData();
 });
 </script>
 
@@ -189,97 +137,58 @@ onMounted(async () => {
     />
     รายละเอียดการช่วยราชการ {{ 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">{{ fullname }}</div>
-      <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(profileId)"
-      />
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <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="avatar" v-if="avatar !== ''" />
-          <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">
-            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-            <div class="col-12 text-detail">
-              {{ position }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">ประเภทตำแหน่ง</div>
-            <div class="col-12 text-detail">
-              {{ positionLevel }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row items-center">
-          <div class="col-12">
-            <div class="col-12 text-top">สังกัด</div>
-            <div class="col-12 text-detail">
-              {{ organization }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </q-card>
+
+  <CardProfile :data="dataProfile as DataProfile" />
 
   <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">
-        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+    <q-form
+      ref="myForm"
+      greedy
+      @submit.prevent
+      @validation-success="onSubmit"
+      class="col-12"
+    >
+      <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"
+            v-if="!(status == 'REPORT' || status == 'DONE')"
+          />
+        </div>
+        <div class="q-gutter-sm" v-else>
+          <q-btn
+            outline
+            color="public"
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            type="submit"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="cancelBtn"
+          />
+        </div>
       </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"
-          v-if="!(status == 'REPORT' || status == 'DONE')"
-        />
-      </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="cancelBtn"
-        />
-      </div>
-    </div>
-    <div class="col-12"><q-separator /></div>
-    <q-form ref="myForm" class="window-width">
+      <div class="col-12"><q-separator /></div>
+
       <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">
@@ -427,12 +336,6 @@ onMounted(async () => {
       </div>
     </q-form>
   </q-card>
-
-  <PopupPersonal
-    :modal="modalPersonal"
-    :id="personId"
-    @update:modal="updatemodalPersonal"
-  />
 </template>
 
 <style lang="scss" scope>
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 6a6dbe0c3..759b0b69f 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -211,6 +211,36 @@ interface Assign {
   createdAt: Date;
   updatedAt: Date;
 }
+
+interface DataProfile {
+  child1: string | null;
+  child1ShortName: string | null;
+  child2: string | null;
+  child2ShortName: string | null;
+  child3: string | null;
+  child3ShortName: string | null;
+  child4: string | null;
+  child4ShortName: string | null;
+  createdAt: string | Date;
+  dateEnd: string | Date;
+  dateStart: string | Date;
+  firstName: string;
+  id: string;
+  isActive: boolean;
+  lastName: string;
+  organization: string;
+  organizationPositionOld: string;
+  posLevelName: string;
+  posMasterNo: number | null;
+  posTypeName: string;
+  position: string;
+  prefix: string;
+  profileId: string;
+  reason: string;
+  root: string;
+  rootShortName: string | null;
+  status: string;
+}
 export type {
   DataOption,
   DataOptionInsignia,
@@ -231,6 +261,7 @@ export type {
   Certificate,
   Assign,
   AddressData,
+  DataProfile,
 };
 
 export { AddressDataDefualt, FamilyDataDefualt };

From 4e1f895de2d739f7ad2cb8bb6872a3e4bb1981f8 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 2 May 2024 15:59:56 +0700
Subject: [PATCH 5/5] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=81=E0=B8=99=E0=B8=99=E0=B9=80=E0=B8=95=E0=B9=87?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=20kpi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/detailList/01_Assessment.vue   | 37 ++++++++-----------
 .../14_KPI/components/detailList/TabMain.vue  | 10 ++++-
 .../detailList/Topic/02_Competency.vue        | 17 +++++----
 src/modules/14_KPI/store/KPIStore.ts          |  1 +
 src/modules/14_KPI/views/detail.vue           | 37 +++++++++----------
 5 files changed, 53 insertions(+), 49 deletions(-)

diff --git a/src/modules/14_KPI/components/detailList/01_Assessment.vue b/src/modules/14_KPI/components/detailList/01_Assessment.vue
index 6f0111e78..c5675fe92 100644
--- a/src/modules/14_KPI/components/detailList/01_Assessment.vue
+++ b/src/modules/14_KPI/components/detailList/01_Assessment.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
@@ -16,6 +16,8 @@ import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
 // import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
 
 const dataListCriteria = ref<any[]>([]);
+const indicatorScore = defineModel("indicatorScore", { default: 0 });
+const competencyScore = defineModel("competencyScore", { default: 0 });
 
 const modalCriteria = ref<boolean>(false);
 const $q = useQuasar();
@@ -35,7 +37,6 @@ const totalResults3 = ref<number>(0);
 // const resultWork = ref<number>(0);
 
 function fetchListPlanned() {
-  showLoader();
   http
     .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -60,14 +61,10 @@ function fetchListPlanned() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 function fetchListRole() {
-  showLoader();
   http
     .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -92,14 +89,10 @@ function fetchListRole() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 function fetchAssigned() {
-  showLoader();
   http
     .get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
     .then((res) => {
@@ -124,17 +117,16 @@ function fetchAssigned() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 function onInfo() {
   modalCriteria.value = true;
 }
+
 const resultWork = computed(() => {
   const total = totalResults1.value + totalResults2.value + totalResults3.value;
+  indicatorScore.value = total;
   return total.toFixed(2);
 });
 
@@ -147,17 +139,17 @@ function getCriteria() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 onMounted(() => {
-  getCriteria();
-  fetchListPlanned();
-  fetchListRole();
-  fetchAssigned();
+  setTimeout(() => {
+    getCriteria();
+    fetchListPlanned();
+    fetchListRole();
+    fetchAssigned();
+    hideLoader();
+  }, 1000);
 });
 </script>
 
@@ -232,7 +224,10 @@ onMounted(() => {
         </q-btn>
       </div>
 
-      <Competency v-model:dataListCriteria="dataListCriteria" />
+      <Competency
+        v-model:dataListCriteria="dataListCriteria"
+        v-model:competency-score="competencyScore"
+      />
     </div>
   </q-scroll-area>
 
diff --git a/src/modules/14_KPI/components/detailList/TabMain.vue b/src/modules/14_KPI/components/detailList/TabMain.vue
index 9fa876e73..1f9e7cc17 100644
--- a/src/modules/14_KPI/components/detailList/TabMain.vue
+++ b/src/modules/14_KPI/components/detailList/TabMain.vue
@@ -14,7 +14,8 @@ const store = useKPIDataStore();
 const route = useRoute();
 
 const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);
-
+const indicatorScore = defineModel("indicatorScore", { default: 0 });
+const competencyScore = defineModel("competencyScore", { default: 0 });
 const itemsTab = ref<any>([
   {
     name: "1",
@@ -40,6 +41,7 @@ const itemsTab = ref<any>([
 
 const splitterModel = ref<number>(12);
 </script>
+
 <template>
   <q-splitter v-model="splitterModel" disable>
     <template v-slot:before>
@@ -76,7 +78,11 @@ const splitterModel = ref<number>(12);
           :name="tab.name"
           class="q-pa-none"
         >
-          <Assessment v-if="store.tabMain === '1'" />
+          <Assessment
+            v-if="store.tabMain === '1'"
+            v-model:indicatorScore="indicatorScore"
+            v-model:competencyScore="competencyScore"
+          />
           <Evaluator v-if="store.tabMain === '2'" :type="'evaluator'" />
           <Evaluator v-if="store.tabMain === '3'" :type="'commander'" />
           <Evaluator v-if="store.tabMain === '4'" :type="'commanderHigh'" />
diff --git a/src/modules/14_KPI/components/detailList/Topic/02_Competency.vue b/src/modules/14_KPI/components/detailList/Topic/02_Competency.vue
index 6e101e4dd..1ef5a0f8e 100644
--- a/src/modules/14_KPI/components/detailList/Topic/02_Competency.vue
+++ b/src/modules/14_KPI/components/detailList/Topic/02_Competency.vue
@@ -20,6 +20,9 @@ import { useRoute } from "vue-router";
 const dataListCriteria = defineModel<any[]>("dataListCriteria", {
   required: true,
 });
+const competencyScore = defineModel<number>("competencyScore", {
+  default: 0,
+});
 
 const sortedDataListCriteria = computed(() => {
   return dataListCriteria.value.sort((a, b) => a.level - b.level);
@@ -115,7 +118,6 @@ const rows = ref<any>([]);
 const lists = ref<any>([]);
 const resultEvaluation = ref<string | 0>(0);
 function getData(type: string) {
-  showLoader();
   http
     .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
     .then(async (res) => {
@@ -157,9 +159,8 @@ function getData(type: string) {
             ? (resultAvg / weightAvg) * store.dataEvaluation.capacityPoint
             : 0;
         resultEvaluation.value = sum.toFixed(2);
+        competencyScore.value = sum;
       }
-      // end cal summary
-      hideLoader();
     });
 }
 
@@ -193,10 +194,12 @@ function onEvaluate(type: string) {
 }
 
 onMounted(() => {
-  for (let index = 0; index < store.competencyType.length; index++) {
-    const element = store.competencyType[index];
-    getData(element.id);
-  }
+  setTimeout(() => {
+    for (let index = 0; index < store.competencyType.length; index++) {
+      const element = store.competencyType[index];
+      getData(element.id);
+    }
+  }, 1000);
 });
 </script>
 
diff --git a/src/modules/14_KPI/store/KPIStore.ts b/src/modules/14_KPI/store/KPIStore.ts
index f695ddb6e..18533052d 100644
--- a/src/modules/14_KPI/store/KPIStore.ts
+++ b/src/modules/14_KPI/store/KPIStore.ts
@@ -12,6 +12,7 @@ export const useKPIDataStore = defineStore("KPIDataStore", () => {
     plannedPoint: 0,
     rolePoint: 0,
     specialPoint: 0,
+    capacityPoint: 0,
   });
 
   const competencyType = ref<DataOption[]>([
diff --git a/src/modules/14_KPI/views/detail.vue b/src/modules/14_KPI/views/detail.vue
index d0b061b50..b7f83f3c4 100644
--- a/src/modules/14_KPI/views/detail.vue
+++ b/src/modules/14_KPI/views/detail.vue
@@ -9,6 +9,7 @@ import TabMain from "@/modules/14_KPI/components/detailList/TabMain.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+import { time } from "console";
 
 // import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
 
@@ -20,7 +21,8 @@ const store = useKPIDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError } = mixin;
-
+const indicatorScore = ref<number>(0);
+const competencyScore = ref<number>(0);
 const formProfile = reactive<any>({
   fullName: "",
   position: "",
@@ -35,7 +37,6 @@ const formProfile = reactive<any>({
 const router = useRouter();
 
 function fetchEvaluation() {
-  showLoader();
   http
     .get(config.API.kpiUserEvaluation + `/${id.value}`)
     .then((res) => {
@@ -47,14 +48,10 @@ function fetchEvaluation() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 function getProfile() {
-  showLoader();
   http
     .get(config.API.profilePosition())
     .then((res) => {
@@ -69,14 +66,10 @@ function getProfile() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 async function fetchProfile(id: string) {
-  showLoader();
   await http
     .get(
       config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
@@ -86,16 +79,14 @@ async function fetchProfile(id: string) {
     })
     .catch(() => {
       // profilePicture.value = avatar;
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /** save */
 function onSave() {}
 
-onMounted(() => {
+onMounted(async () => {
+  showLoader();
   fetchEvaluation();
   getProfile();
 });
@@ -112,7 +103,12 @@ onMounted(() => {
         flat
         color="primary"
         class="q-mr-sm"
-        @click="isReadonly ? router.push(`/KPI-list`) : router.push(`/KPI`)"
+        @click="
+          () => {
+            store.dataEvaluation = {};
+            isReadonly ? router.push(`/KPI-list`) : router.push(`/KPI`);
+          }
+        "
       />
       {{ id ? `รายละเอียดแบบประเมิน` : `เพิ่มแบบประเมิน` }}
       <q-space />
@@ -214,9 +210,9 @@ onMounted(() => {
                 <div class="col-2">
                   <div class="column">
                     <span class="text-grey-6">คะแนนประเมิน</span>
-                    <span class="text-weight-medium text-primary">{{
-                      formProfile.score
-                    }}</span>
+                    <span class="text-weight-medium text-primary"
+                      >{{ (indicatorScore + competencyScore).toFixed(2) }}
+                    </span>
                   </div>
                 </div>
               </div>
@@ -226,7 +222,10 @@ onMounted(() => {
       </q-card>
 
       <q-card class="q-mt-md rounded">
-        <TabMain />
+        <TabMain
+          v-model:indicatorScore="indicatorScore"
+          v-model:competencyScore="competencyScore"
+        />
       </q-card>
     </div>
   </div>