Merge branch 'nice_dev' into develop

2024-05-02 17:05:36 +07:00 · 2024-05-02 17:05:36 +07:00 · ea4638d54f
commit ea4638d54f
parent db971257ad 23ab289951
8 changed files with 276 additions and 396 deletions
--- a/src/modules/05_placement/components/Other/Detail.vue
+++ b/src/modules/05_placement/components/Other/Detail.vue
@ -3,24 +3,23 @@ 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";
+import keycloak from "@/plugins/keycloak";

-import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
 import type { ResponseDataDetail } from "@/modules/05_placement/interface/response/Transfer";
 import type {
  OtherdataInterface,
  resApiData,
 } from "@/modules/05_placement/interface/response/OhterMain";
 import type { QForm } from "quasar";
+import type { DataProfile } from "@/modules/05_placement/interface/index/Main";

-import http from "@/plugins/http";
-import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
-
+/** importComponents*/
+import CardProfile from "@/components/CardProfile.vue";
 import CurruncyInput from "@/components/CurruncyInput.vue";
-import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";

-const modalPersonal = ref<boolean>(false);
-const personId = ref<string>("");
+/** use*/
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
@ -32,51 +31,26 @@ const {
  hideLoader,
  date2Thai,
  dialogConfirm,
+  findOrgName,
  success,
 } = mixin;

+const myForm = ref<QForm | null>(null);
 const roleAdmin = ref<boolean>(false);
-const title = ref<ResponseTitle>({
-  fullname: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionTypeOld: "",
-});
-const responseData = ref<ResponseDataDetail>({
-  profileId: "",
-  avataPath: "",
-  createdAt: new Date(),
-  date: new Date(),
-  id: "",
-  organization: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionNumberOld: "",
-  positionTypeOld: "",
-  reason: "",
-  salary: 0,
-  status: "",
-  fullname: "",
-});
+const dataProfile = ref<DataProfile>();
+const fullName = ref<string>("");
 const edit = ref<boolean>(false);
+const status = ref<string>("");
+
+const educationOld = ref<string>("");
 const organizationPositionOld = ref<string>("");
 const positionTypeOld = ref<string>("");
-const myForm = ref<QForm | null>(null);
 const positionLevelOld = ref<string>("");
 const posNo = ref<string>("");
 const salary = ref<number>(0);
 const date = ref<Date | null>(null);
-const reason = ref<string>("");
-const Otherdata = ref<OtherdataInterface>({
-  citizenId: "",
-  prefixId: "",
-  firstname: "",
-  lastname: "",
-});
-const avatar = ref<string>("");
-const educationOld = ref<string>("");
 const militaryDate = ref<Date | null>(null);
-const leaveDate = ref<Date | null>(null);
+const reason = ref<string>("");

 //-----(fetch data by id)-----//
 const fecthOther = async () => {
@ -85,36 +59,24 @@ const fecthOther = async () => {
    .get(config.API.otherByid(paramsId.toString()))
    .then((res: resApiData) => {
      const data = res.data.result;
-      Otherdata.value = data;
-      avatar.value = data.avatar ?? "";
-      title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
-      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
-      title.value.positionLevelOld = data.positionLevelOld ?? "-";
-      title.value.positionTypeOld = data.positionTypeOld ?? "-";
-      responseData.value.profileId = data.profileId;
-      responseData.value.createdAt = data.createdAt;
-      responseData.value.id = data.id ?? "";
-      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.status = data.status ?? "";
-      responseData.value.fullname = `${data.prefix ?? "-"}${
-        data.firstname ?? "-"
-      } ${data.lastname ?? "-"}`;
-      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      dataProfile.value = res.data.result as unknown as DataProfile;
+
+      fullName.value = `${data.prefix ?? "-"}${data.firstName ?? "-"} ${
+        data.lastName ?? "-"
+      }`;
+      status.value = data.status;
+
+      educationOld.value = data.educationOld ?? "";
+      organizationPositionOld.value = data.organizationPositionOld
+        ? data.organizationPositionOld
+        : findOrgName(data);
      positionTypeOld.value = data.positionTypeOld ?? "";
      positionLevelOld.value = data.positionLevelOld ?? "";
      posNo.value = data.positionNumberOld ?? "";
      salary.value = data.amountOld ?? "";
-      date.value =
-        data.positionDate !== null ? new Date(data.positionDate) : null;
-      reason.value = data.reason ?? "";
-      educationOld.value = data.educationOld ?? "-";
+      date.value = data.positionDate ?? null;
      militaryDate.value = data.militaryDate ?? null;
-      leaveDate.value = data.leaveDate ?? null;
+      reason.value = data.reason ?? "";
    })
    .catch((e) => {
      messageError($q, e);
@ -125,57 +87,45 @@ const fecthOther = async () => {
    });
 };

-//-----(edit)-----//
-const clickEdit = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then((success: any) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => await saveOther(),
-          "ต้องการแก้ไขข้อมูลหรือไม่?",
-          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-        );
-      }
-    });
-  }
+//-----(update)-----//
+const onSubmit = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      let data = {
+        educationOld: educationOld.value,
+        organizationPositionOld: organizationPositionOld.value,
+        positionTypeOld: positionTypeOld.value,
+        positionLevelOld: positionLevelOld.value,
+        positionNumberOld: posNo.value,
+        amountOld: Number(salary.value),
+        positionDate: date.value,
+        militaryDate: militaryDate.value,
+        reason: reason.value,
+      };
+      await http
+        .put(config.API.otherByid(paramsId.toString()), data)
+        .then(() => {
+          success($q, "แก้ไข้ข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fecthOther();
+        });
+    },
+    "ต้องการแก้ไขข้อมูลหรือไม่?",
+    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+  );
 };

-//-----(update)-----//
-const saveOther = async () => {
-  let data = {
-    citizenId: Otherdata.value.citizenId,
-    prefixId: Otherdata.value.prefixId,
-    firstname: Otherdata.value.firstname,
-    lastname: Otherdata.value.lastname,
-    reason: reason.value,
-    organizationPositionOld: organizationPositionOld.value,
-    positionDate: date.value,
-    positionTypeOld: positionTypeOld.value,
-    positionLevelOld: positionLevelOld.value,
-    positionNumberOld: posNo.value,
-    amountOld: Number(salary.value),
-    educationOld: educationOld.value,
-    militaryDate: militaryDate.value,
-    leaveDate: leaveDate.value,
-  };
-  await http
-    .put(config.API.otherByid(paramsId.toString()), data)
-    .then(() => {
-      success($q, "แก้ไข้ข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fecthOther();
-    });
-};
 const cancel = () => {
  edit.value = false;
  fecthOther();
  myForm.value?.resetValidation();
 };
+
 const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
@ -183,15 +133,6 @@ const getClass = (val: boolean) => {
  };
 };

-function onclickViewinfo(id: string) {
-  modalPersonal.value = true;
-  personId.value = id;
-}
-
-function updatemodalPersonal(modal: boolean) {
-  modalPersonal.value = modal;
-}
-
 onMounted(async () => {
  if (keycloak.tokenParsed != null) {
    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
@ -211,106 +152,60 @@ onMounted(async () => {
      class="q-mr-sm"
      @click="router.push(`/other`)"
    />
-    รายละเอียดรายการอื่นๆ {{ responseData.fullname }}
+    รายละเอียดรายการอื่นๆ {{ 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">
-        {{ responseData.fullname }}
-      </div>
-      <q-space />
-      <q-btn
-        outline
-        color="blue"
-        dense
-        icon-right="mdi-open-in-new"
-        class="q-px-sm"
-        label="ดูข้อมูลทะเบียนประวัติ"
-        @click="onclickViewinfo(responseData.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">
-          <div class="col-12 q-pl-md">
-            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-            <div class="col-12 text-detail">
-              {{ title.positionTypeOld }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row">
-          <div class="col-12">
-            <div class="col-12 text-top">ระดับ</div>
-            <div class="col-12 text-detail">
-              {{ title.positionLevelOld }}
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-6 col-sm-3 row">
-          <div class="col-12">
-            <div class="col-12 text-top">สังกัด</div>
-            <div class="col-12 text-detail">
-              {{ title.organizationPositionOld }}
-            </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">
-        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
-      </div>
-      <q-space />
-      <div
-        v-if="
-          responseData.status !== 'DONE' && responseData.status !== 'REPORT'
-        "
-      >
-        <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"
-          />
+    <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>
-        <div class="q-gutter-sm" v-else>
-          <q-btn
-            outline
-            color="public"
-            dense
-            class="q-px-sm"
-            label="บันทึก"
-            style="width: 80px"
-            @click="clickEdit"
-          />
-          <q-btn
-            outline
-            color="red"
-            dense
-            class="q-px-sm"
-            label="ยกเลิก"
-            style="width: 80px"
-            @click="cancel()"
-          />
+        <q-space />
+        <div v-if="status !== 'DONE' && status !== 'REPORT'">
+          <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"
+              type="submit"
+            />
+            <q-btn
+              outline
+              color="red"
+              dense
+              class="q-px-sm"
+              label="ยกเลิก"
+              style="width: 80px"
+              @click="cancel()"
+            />
+          </div>
        </div>
      </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="row col-12 q-pa-md">
@ -458,55 +353,7 @@ onMounted(async () => {
              </datepicker>
            </div>
          </div>
-          <!-- <div class="col-xs-6 col-sm-4 row items-center">
-            <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="leaveDate"
-                :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
-                    :readonly="!edit"
-                    :borderless="!edit"
-                    :model-value="
-                      leaveDate !== null ? date2Thai(leaveDate) : 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-xs-6 col-sm-4 row items-center">
            <div class="col-12">
              <datepicker
@ -570,12 +417,6 @@ onMounted(async () => {
      </div>
    </q-form>
  </q-card>
-
-  <PopupPersonal
-    :modal="modalPersonal"
-    :id="personId"
-    @update:modal="updatemodalPersonal"
-  />
 </template>

 <style lang="scss" scope>
--- a/src/modules/05_placement/components/Other/Dialogbody.vue
+++ b/src/modules/05_placement/components/Other/Dialogbody.vue
@ -1,14 +1,26 @@
 <script setup lang="ts">
 import { ref, computed, watchEffect } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";

+import { useTransferDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+const storeFn = useTransferDataStore();
+
+const { statusText } = storeFn;
 const mixin = useCounterMixin();
-const { showLoader, success, messageError, dialogConfirm } = mixin;
+const {
+  showLoader,
+  success,
+  messageError,
+  dialogConfirm,
+  findOrgName,
+  date2Thai,
+} = mixin;

 const $q = useQuasar();
 const selected = ref<any>([]);
@ -33,8 +45,9 @@ const visibleColumns2 = ref<string[]>([
  "fullname",
  "position",
  "positionLevel",
-  "organizationPositionOld",
-  "statustext",
+  "affiliation",
+  "createdAt",
+  "status",
 ]);
 const columns2 = ref<QTableProps["columns"]>([
  {
@ -54,6 +67,9 @@ const columns2 = ref<QTableProps["columns"]>([
    field: "fullname",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
  },
  {
    name: "position",
@ -67,29 +83,54 @@ 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) {
+      let name = "";
+      if (row.posTypeName && row.posLevelName) {
+        name = `${row.posTypeName} (${row.posLevelName})`;
+      } else if (row.posTypeName) {
+        name = `${row.posTypeName}`;
+      } else if (row.posLevelName) {
+        name = `(${row.posLevelName})`;
+      } else name = "-";
+      return name;
+    },
  },
  {
-    name: "organizationPositionOld",
+    name: "affiliation",
    align: "left",
    label: "สังกัด",
    sortable: true,
-    field: "organizationPositionOld",
+    field: "affiliation",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName(row);
+    },
  },
  {
-    name: "statustext",
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+  {
+    name: "status",
    align: "left",
    label: "สถานะ",
    sortable: true,
-    field: "statustext",
+    field: "status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
+    format: (val) => statusText(val),
  },
 ]);
 const emit = defineEmits([
@ -126,10 +167,10 @@ const addOther = async () => {
  showLoader();
  await http
    .put(config.API.otherReport(Type), data)
-    .then((res: any) => {
+    .then(() => {
      success($q, "บันทึกสำเร็จ");
    })
-    .catch((e: any) => {
+    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
@ -264,31 +305,18 @@ function filterFnOptionsType(val: string, update: any) {
                  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="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 === 'affiliation' ? 'table_ellipsis' : ''"
+                >
+                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
-              <q-td key="statustext" :props="props">
-                {{ props.row.statustext }}
-              </q-td>
            </q-tr>
          </template>
        </d-table>
--- a/src/modules/05_placement/components/Other/Main.vue
+++ b/src/modules/05_placement/components/Other/Main.vue
@ -2,22 +2,27 @@
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useTransferDataStore } from "@/modules/05_placement/store";
-import type { QTableProps } from "quasar";
-import type {
-  listMain,
-  listMainAPI,
-} from "@/modules/05_placement/interface/response/OhterMain";
-import type { OpType } from "@/modules/05_placement/interface/response/Main";

 import http from "@/plugins/http";
 import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { listMain } from "@/modules/05_placement/interface/response/OhterMain";
+import type { OpType } from "@/modules/05_placement/interface/response/Main";
+
+/** importcomopnents*/
 import Dialogbody from "@/modules/05_placement/components/Other/Dialogbody.vue";

+/** importStore*/
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const router = useRouter();
 const storeFn = useTransferDataStore();
 const mixin = useCounterMixin();
-
 const { statusText } = storeFn;
 const {
  showLoader,
@ -26,13 +31,12 @@ const {
  messageError,
  date2Thai,
  dialogRemove,
+  findOrgName,
 } = mixin;

-const $q = useQuasar();
-const router = useRouter();
-const optionsType = ref<OpType[]>([]);
-const type = ref<string>("");
 const modal = ref<boolean>(false);
+const type = ref<string>("");
+const optionsType = ref<OpType[]>([]);
 const rows = ref<listMain[]>([]);
 const rows2 = ref<listMain[]>([]);

@ -40,20 +44,14 @@ const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
 const filterRef = ref<any>(null);

-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
 const visibleColumns = ref<string[]>([
  "no",
  "fullname",
-  "positionPath",
+  "position",
  "positionLevel",
-  "organizationPositionOld",
+  "affiliation",
  "createdAt",
-  "statustext",
+  "status",
 ]);
 const columns = ref<QTableProps["columns"]>([
  {
@ -73,33 +71,50 @@ const columns = ref<QTableProps["columns"]>([
    field: "fullname",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
  },
  {
-    name: "positionPath",
+    name: "position",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
-    field: "positionPath",
+    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "positionLevel",
    align: "left",
-    label: "ระดับ",
+    label: "ประเภทตำแหน่ง",
    sortable: true,
    field: "positionLevel",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
+    format(val, row) {
+      let name = "";
+      if (row.posTypeName && row.posLevelName) {
+        name = `${row.posTypeName} (${row.posLevelName})`;
+      } else if (row.posTypeName) {
+        name = `${row.posTypeName}`;
+      } else if (row.posLevelName) {
+        name = `(${row.posLevelName})`;
+      } else name = "-";
+      return name;
+    },
  },
  {
-    name: "organizationPositionOld",
+    name: "affiliation",
    align: "left",
    label: "สังกัด",
    sortable: true,
-    field: "organizationPositionOld",
+    field: "affiliation",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
+    format(val, row) {
+      return findOrgName(row);
+    },
  },
  {
    name: "createdAt",
@ -109,15 +124,17 @@ const columns = ref<QTableProps["columns"]>([
    field: "createdAt",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
+    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),
  },
 ]);

@ -128,32 +145,7 @@ const fecthlistOthet = async () => {
    .get(config.API.otherMain())
    .then((res) => {
      let response = res.data.result;
-      rows.value = response.map((r: listMainAPI) => ({
-        createdAt: date2Thai(r.createdAt),
-        date: new Date(),
-        firstName: r.firstname ?? "-",
-        personalId: r.id ?? "-",
-        isActive: r.isActive ? r.isActive : false,
-        lastName: r.lastname ?? "-",
-        organization: r.organization ?? "-",
-        organizationPositionOld: r.organizationPositionOld ?? "-",
-        posNo: r.posNo ?? "-",
-        position: r.position ?? "-",
-        positionPath: r.positionPath ?? "-",
-        positionLevel: r.positionLevel ?? "-",
-        positionLevelOld: r.positionLevelOld ?? "-",
-        positionNumberOld: r.positionNumberOld ?? "-",
-        positionTypeOld: r.positionTypeOld ?? "-",
-        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 ?? ""}`,
-        amountOld: r.amountOld,
-        positionDate: r.positionDate,
-        leaveDate: r.leaveDate,
-      }));
+      rows.value = response;
      rows2.value = rows.value.filter(
        (e: listMain) =>
          e.status !== "REPORT" &&
@ -168,7 +160,7 @@ const fecthlistOthet = async () => {
      );
    })
    .catch((e) => {
-      messageError($q);
+      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
@ -229,10 +221,12 @@ const popup = () => {
 const clickClose = () => {
  modal.value = false;
 };
+
 //----(เปิด Dialog ลบข้อมูล)------//
 const clickDelete = (id: string) => {
  dialogRemove($q, () => deleteOther(id));
 };
+
 //----(เปิดหน้าถัดไป)------//
 const nextPage = (id: string) => {
  router.push({
@ -240,6 +234,13 @@ const nextPage = (id: string) => {
  });
 };

+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 onMounted(() => {
  fecthlistOthet();
 });
@ -317,45 +318,33 @@ onMounted(() => {
              </q-tr>
            </template>
            <template v-slot:body="props">
-              <q-tr
-                :props="props"
-                class="cursor-pointer"
-                @click="nextPage(props.row.personalId)"
-              >
-                <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="positionPath" :props="props">
-                  {{ props.row.positionPath }}
-                </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-tr :props="props" class="cursor-pointer">
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.id"
+                  @click.stop.prevent="nextPage(props.row.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 === 'affiliation' ? '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-td auto-width>
                  <q-btn
-                    v-if="
-                      props.row.status !== 'DONE' &&
-                      props.row.status !== 'REPORT'
+                    :color="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
+                        ? 'grey'
+                        : 'red-7'
+                    "
+                    :disable="
+                      props.row.status == 'REPORT' || props.row.status == 'DONE'
                    "
                    flat
                    round
--- a/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriateMain.vue
@ -87,7 +87,15 @@ const columns = ref<QTableProps["columns"]>([
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format(val, row) {
-      return `${row.posTypeName} (${row.posLevelName})`;
+      let name = "";
+      if (row.posTypeName && row.posLevelName) {
+        name = `${row.posTypeName} (${row.posLevelName})`;
+      } else if (row.posTypeName) {
+        name = `${row.posTypeName}`;
+      } else if (row.posLevelName) {
+        name = `(${row.posLevelName})`;
+      } else name = "-";
+      return name;
    },
  },
  {
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@ -29,6 +29,7 @@ const {
  hideLoader,
  success,
  dialogConfirm,
+  findOrgName,
 } = mixin;

 const myForm = ref<QForm | null>(null);
@ -59,7 +60,9 @@ const getData = () => {
      dataProfile.value = res.data.result as unknown as DataProfile;
      fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`;

-      organizationPositionOld.value = data.organizationPositionOld;
+      organizationPositionOld.value = data.organizationPositionOld
+        ? data.organizationPositionOld
+        : findOrgName(data);
      positionTypeOld.value = data.positionTypeOld;
      positionLevelOld.value = data.positionLevelOld;
      positionNumberOld.value = data.positionNumberOld;
--- a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
+++ b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
@ -28,6 +28,7 @@ const {
  showLoader,
  hideLoader,
  success,
+  findOrgName,
 } = mixin;

 const myForm = ref<QForm | null>(null);
@ -54,7 +55,9 @@ const getData = () => {
      const data = res.data.result;
      dataProfile.value = res.data.result as unknown as DataProfile;
      fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`;
-      organizationPositionOld.value = data.organizationPositionOld;
+      organizationPositionOld.value = data.organizationPositionOld
+        ? data.organizationPositionOld
+        : findOrgName(data);
      organization.value = data.organization;
      dateStart.value = data.dateStart;
      dateEnd.value = data.dateEnd;
--- a/src/modules/05_placement/components/helpgovernment/mainHelp.vue
+++ b/src/modules/05_placement/components/helpgovernment/mainHelp.vue
@ -88,7 +88,15 @@ const columns = ref<QTableProps["columns"]>([
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format(val, row) {
-      return `${row.posTypeName} (${row.posLevelName})`;
+      let name = "";
+      if (row.posTypeName && row.posLevelName) {
+        name = `${row.posTypeName} (${row.posLevelName})`;
+      } else if (row.posTypeName) {
+        name = `${row.posTypeName}`;
+      } else if (row.posLevelName) {
+        name = `(${row.posLevelName})`;
+      } else name = "-";
+      return name;
    },
  },
  {
--- a/src/modules/05_placement/interface/response/OhterMain.ts
+++ b/src/modules/05_placement/interface/response/OhterMain.ts
@ -67,8 +67,8 @@ interface resApiData {
      citizenId: string;
      prefix: string;
      prefixId: string;
-      firstname: string;
-      lastname: string;
+      firstName: string;
+      lastName: string;
      dateOfBirth: Date;
      gender: string;
      nationality: string;