แก้ UI ลาออก

src/modules/06_retirement/components/02_resign/ResignByid.vue

@@ -8,12 +8,16 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
+
 import DialogHeader from "@/components/DialogHeader.vue";
 
 import type {
   TypeFile,
   rowFile,
   FileList,
+  RowsType,
+  SeqTypeRow,
 } from "@/modules/06_retirement/interface/response/Main";
 import type { QTableProps } from "quasar";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
@@ -21,6 +25,7 @@ import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 import CardProfile from "@/components/CardProfile.vue";
 import WorkFlow from "@/components/Workflow/Main.vue";
+import DialogAddCommander from "@/modules/06_retirement/components/DialogAddCommander.vue";
 
 /** Use */
 const $q = useQuasar();
@@ -45,6 +50,133 @@ const personId = ref<string>("");
 const roleUser = ref<string>("");
 const dataProfile = ref<DataProfile>();
 
+const approveCheck = computed(() => {
+  return (
+    rowsApprover.value?.commanders?.every(
+      (commander) => commander.approveStatus === "APPROVE"
+    ) ?? false
+  );
+});
+const idCheck = computed(() => {
+  if (
+    typeAdd.value == "COMMANDER" &&
+    rowsApprover.value?.commanders &&
+    rowsApprover.value?.commanders.length > 0
+  ) {
+    return rowsApprover.value?.commanders.map(
+      (items: SeqTypeRow) => items.profileId
+    );
+  } else if (
+    typeAdd.value == "APPROVER" &&
+    rowsApprover.value?.approvers &&
+    rowsApprover.value?.approvers.length > 0
+  ) {
+    return rowsApprover.value?.approvers.map(
+      (items: SeqTypeRow) => items.profileId
+    );
+  }
+});
+
+const approvePendingCheck = computed(() => {
+  const commanders = rowsApprover.value?.commanders || [];
+  const index = commanders.findIndex((c) => c.profileId === keycloakId.value);
+
+  if (index === -1) {
+    return false;
+  }
+
+  const currentCommander = commanders[index];
+
+  if (currentCommander.approveStatus !== "PENDING") {
+    return false;
+  }
+
+  if (index === 0) {
+    return true;
+  }
+
+  const previousApproved = commanders
+    .slice(0, index)
+    .every((c) => c.approveStatus === "APPROVE");
+  return previousApproved;
+});
+const isOfficer = ref<boolean>(false);
+const isStaff = ref<boolean>(false);
+const profileType = ref<string>("");
+const keycloakUserId = ref<string>("");
+const keycloakId = ref<string>("");
+const modalAdd = ref<boolean>(false);
+const typeAdd = ref<string>("");
+const statusCheck = ref<string>("");
+const rowsApprover = ref<RowsType>();
+const columnsCommanders = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "org",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "สถานะ",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "สถานะ",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "comment",
+    align: "left",
+    label: "ความคิดเห็นและเหตุผล",
+    field: "comment",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "rejectDate",
+    align: "left",
+    label: "วันสุดท้ายที่ยับยั้ง",
+    field: "rejectDate",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
 const id = ref<string>(route.params.id.toString());
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
@@ -209,6 +341,13 @@ async function fetchData(id: string) {
       isNoDebt.value = data.isNoDebt;
       isNoBurden.value = data.isNoBurden;
       isDiscipline.value = data.isDiscipline;
+
+      profileType.value = data.profileType;
+      keycloakUserId.value = data.keycloakUserId;
+      rowsApprover.value = {
+        commanders: data.commanders,
+        approvers: data.approvers,
+      };
     })
     .catch((e) => {
       messageError($q, e);
@@ -552,10 +691,56 @@ function convertStatus(val: string) {
     }
   } else return val;
 }
+
+/** เปิด POP UP  */
+function onAddPerson(type: string) {
+  modalAdd.value = true;
+  typeAdd.value = type;
+}
+
+async function checkOfficer() {
+  http
+    .get(config.API.checkIsofficer + `SYS_RESIGN`)
+    .then(async (res) => {
+      isOfficer.value = await res.data.result.isOfficer;
+      isStaff.value = await res.data.result.isStaff;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onSend() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .get(config.API.sendApprove(id.value))
+        .then(async (res) => {
+          await fetchData(id.value);
+          await fetchFile();
+          success($q, "ส่งไปพิจารณา");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {});
+    },
+    "ยืนยันการส่งไปพิจารณา",
+    "ต้องการส่งไปพิจารณาใช่หรือไม่"
+  );
+}
+
 /** Hook */
 onMounted(async () => {
   showLoader();
-  await Promise.all([fetchData(id.value), fetchFile()]).finally(() => {
+  await Promise.all([
+    await fetchData(id.value),
+    await checkOfficer(),
+    fetchFile(),
+  ]).finally(() => {
     hideLoader();
   });
 });
@@ -1015,10 +1200,23 @@ onMounted(async () => {
         <div class="q-pl-sm text-weight-bold text-dark">
           ผลการพิจารณาของผู้บังคับบัญชา
         </div>
+        <!-- ตัวอย่างเช็คของ การลา -->
+        <q-btn
+          v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+          flat
+          round
+          icon="add"
+          color="primary"
+          dense
+          class="q-ml-xs"
+          @click="onAddPerson('COMMANDER')"
+        >
+          <q-tooltip>เพิ่มรายชื่อผู้บังคับบัญชา</q-tooltip>
+        </q-btn>
         <q-space />
         <!-- workflowRef?.permission.isUpdate && -->
 
-        <div
+        <!-- <div
           class="q-gutter-x-sm"
           v-if="
             dataDetail.commanderReject === null &&
@@ -1043,43 +1241,96 @@ onMounted(async () => {
             label="ยับยั้ง"
             @click="popUp('passNot', 'commander')"
           />
-        </div>
+        </div> -->
       </div>
 
       <div class="col-12"><q-separator /></div>
-      <div class="row col-12 q-pa-md">
+      <div class="col-12 q-pa-sm">
-        <div class="col-12 row bg-white q-col-gutter-md">
+        <d-table
-          <div class="col-xs-6 row items-start">
+          ref="table"
-            <div class="col-12 text-top">สถานะ</div>
+          :columns="columnsCommanders"
-            <div class="col-12 text-detail">
+          :rows="rowsApprover?.commanders ?? []"
-              {{
+          row-key="key"
-                dataDetail.commanderReject !== null
+          flat
-                  ? statusOrder(dataDetail.commanderReject)
+          bordered
-                  : "-"
+          :paging="true"
-              }}
+          dense
-            </div>
+          :rows-per-page-options="[1, 25, 50, 100]"
-          </div>
+        >
-          <div class="col-xs-6 row items-start">
+          <template v-slot:header="props">
-            <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
+            <q-tr :props="props">
-            <div class="col-12 text-detail">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              {{
+                <span class="text-weight-medium">{{ col.label }}</span>
-                dataDetail.commanderRejectDate !== null
+              </q-th>
-                  ? date2Thai(dataDetail.commanderRejectDate)
+            </q-tr>
-                  : "-"
+          </template>
-              }}
+          <template v-slot:body="props">
-            </div>
+            <q-tr :props="props" class="cursor-pointer">
-          </div>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div class="col-xs-12 row items-start">
+                <div v-if="col.name == 'no'">
-            <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
+                  {{ props.rowIndex + 1 }}
-            <div class="col-12 text-detail">
+                </div>
-              {{
+                <div v-else-if="col.name == 'comment'">
-                dataDetail.commanderReject
+                  <div
-                  ? dataDetail.commanderRejectReason
+                    v-if="
-                  : dataDetail.commanderApproveReason
+                      props.row.approveStatus == 'PENDING' &&
-              }}
+                      props.row.comment == ''
-            </div>
+                    "
-          </div>
+                  >
-        </div>
+                    <q-btn
+                      :disable="
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck ||
+                        (props.row.profileId !== keycloakId &&
+                          checkPermission($route)?.attrIsUpdate)
+                      "
+                      :outline="
+                        props.row.profileId !== keycloakId ||
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck
+                          ? false
+                          : true
+                      "
+                      dense
+                      color="primary"
+                      icon-right="check"
+                      class="q-px-sm"
+                      label="อนุญาต"
+                      @click="popUp('pass', 'commander')"
+                    />
+                    <q-btn
+                      :disable="
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck ||
+                        (props.row.profileId !== keycloakId &&
+                          checkPermission($route)?.attrIsUpdate)
+                      "
+                      :outline="
+                        props.row.profileId !== keycloakId ||
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck
+                          ? false
+                          : true
+                      "
+                      color="red"
+                      dense
+                      icon-right="close"
+                      class="q-px-sm"
+                      label="ยับยั้ง"
+                      @click="popUp('passNot', 'commander')"
+                    />
+                  </div>
+                  <div v-else>
+                    {{ props.row.comment ? props.row.comment : "-" }}
+                  </div>
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
       </div>
     </q-card>
 
@@ -1089,14 +1340,33 @@ onMounted(async () => {
         <div class="q-pl-sm text-weight-bold text-dark">
           ผลการพิจารณาของผู้มีอำนาจ
         </div>
+
+        <q-btn
+          v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+          flat
+          round
+          icon="add"
+          color="primary"
+          dense
+          class="q-ml-xs"
+          @click="onAddPerson('APPROVER')"
+        >
+          <q-tooltip>เพิ่มรายชื่อผู้มีอำนาจ</q-tooltip>
+        </q-btn>
         <q-space />
         <!-- workflowRef?.permission.isUpdate && -->
 
         <div
           class="q-gutter-x-sm"
           v-if="
+            checkPermission($route)?.attrIsUpdate &&
             dataDetail.oligarchReject === null &&
-            dataDetail.statusMain === 'WAITTING'
+            dataDetail.statusMain === 'WAITTING' &&
+            rowsApprover &&
+            rowsApprover.approvers &&
+            rowsApprover.approvers[0]?.profileId == keycloakId &&
+            rowsApprover.approvers[0]?.approveStatus == 'PENDING' &&
+            approveCheck
           "
         >
           <q-btn
@@ -1122,6 +1392,18 @@ onMounted(async () => {
       <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-6 row items-start">
+            <div class="col-12 text-top">ชื่อ - นามสกุล</div>
+            <div class="col-12 text-detail">
+              {{
+                rowsApprover &&
+                rowsApprover.approvers &&
+                rowsApprover.approvers[0]?.firstName
+                  ? `${rowsApprover?.approvers[0].prefix}${rowsApprover?.approvers[0].firstName} ${rowsApprover?.approvers[0].lastName}`
+                  : "-"
+              }}
+            </div>
+          </div>
           <div class="col-xs-6 row items-start">
             <div class="col-12 text-top">สถานะ</div>
             <div class="col-12 text-detail">
@@ -1156,6 +1438,23 @@ onMounted(async () => {
       </div>
     </q-card>
 
+    <q-card
+      bordered
+      class="row col-12 text-dark q-mt-sm q-pa-sm"
+      v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+    >
+      <q-btn
+        @click="onSend"
+        :disable="
+          rowsApprover?.approvers.length == 0 ||
+          rowsApprover?.commanders.length == 0
+        "
+        label="ส่งไปพิจารณา"
+        color="secondary"
+        class="q-ml-auto"
+        ><q-tooltip>คลิกเพื่อส่งไปพิจารณา</q-tooltip></q-btn
+      >
+    </q-card>
     <!-- แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย -->
     <q-card bordered class="row col-12 text-dark q-mt-sm">
       <q-form
@@ -1487,6 +1786,15 @@ onMounted(async () => {
     :id="personId"
     @update:modal="updatemodalPersonal"
   />
+
+  <DialogAddCommander
+    v-model:modal="modalAdd"
+    :type="typeAdd"
+    :profileType="'officer'"
+    :get-data="fetchData"
+    :id-check="idCheck"
+    :keycloak-user-id="keycloakUserId"
+  />
 </template>
 
 <style lang="scss" scope>

src/modules/06_retirement/components/02_resign/ResignReject.vue

@@ -2,18 +2,23 @@
 import { ref, onMounted, computed } from "vue";
 
 import { useRouter, useRoute } from "vue-router";
-import { useQuasar, QForm } from "quasar";
+import { useQuasar, QForm, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-
 import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/components/DialogHeader.vue";
+import { checkPermission } from "@/utils/permissions";
 
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
+import type {
+  RowsType,
+  SeqTypeRow,
+} from "@/modules/06_retirement/interface/response/Main";
 
+import DialogHeader from "@/components/DialogHeader.vue";
 import CardProfile from "@/components/CardProfile.vue";
 import WorkFlow from "@/components/Workflow/Main.vue";
+import DialogAddCommander from "@/modules/06_retirement/components/DialogAddCommander.vue";
 
 /** Use */
 const $q = useQuasar();
@@ -34,6 +39,134 @@ const {
 const roleUser = ref<string>("");
 const dataProfile = ref<DataProfile>();
 
+const approveCheck = computed(() => {
+  return (
+    rowsApprover.value?.commanders?.every(
+      (commander) => commander.approveStatus === "APPROVE"
+    ) ?? false
+  );
+});
+const idCheck = computed(() => {
+  if (
+    typeAdd.value == "COMMANDER" &&
+    rowsApprover.value?.commanders &&
+    rowsApprover.value?.commanders.length > 0
+  ) {
+    return rowsApprover.value?.commanders.map(
+      (items: SeqTypeRow) => items.profileId
+    );
+  } else if (
+    typeAdd.value == "APPROVER" &&
+    rowsApprover.value?.approvers &&
+    rowsApprover.value?.approvers.length > 0
+  ) {
+    return rowsApprover.value?.approvers.map(
+      (items: SeqTypeRow) => items.profileId
+    );
+  }
+});
+
+const approvePendingCheck = computed(() => {
+  const commanders = rowsApprover.value?.commanders || [];
+  const index = commanders.findIndex((c) => c.profileId === keycloakId.value);
+
+  if (index === -1) {
+    return false;
+  }
+
+  const currentCommander = commanders[index];
+
+  if (currentCommander.approveStatus !== "PENDING") {
+    return false;
+  }
+
+  if (index === 0) {
+    return true;
+  }
+
+  const previousApproved = commanders
+    .slice(0, index)
+    .every((c) => c.approveStatus === "APPROVE");
+  return previousApproved;
+});
+const isOfficer = ref<boolean>(false);
+const isStaff = ref<boolean>(false);
+const profileType = ref<string>("");
+const keycloakUserId = ref<string>("");
+const keycloakId = ref<string>("");
+const modalAdd = ref<boolean>(false);
+const typeAdd = ref<string>("");
+const statusCheck = ref<string>("");
+const rowsApprover = ref<RowsType>();
+const columnsCommanders = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "org",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "สถานะ",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "สถานะ",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "comment",
+    align: "left",
+    label: "ความคิดเห็นและเหตุผล",
+    field: "comment",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "rejectDate",
+    align: "left",
+    label: "วันสุดท้ายที่ยับยั้ง",
+    field: "rejectDate",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
 const id = ref<string>(route.params.id.toString());
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
@@ -141,6 +274,13 @@ async function fetchData(id: string) {
       isNoDebt.value = data.isNoDebt;
       isNoBurden.value = data.isNoBurden;
       isDiscipline.value = data.isDiscipline;
+
+      profileType.value = data.profileType;
+      keycloakUserId.value = data.keycloakUserId;
+      rowsApprover.value = {
+        commanders: data.commanders,
+        approvers: data.approvers,
+      };
     })
     .catch((e) => {
       messageError($q, e);
@@ -263,9 +403,50 @@ function statusOrder(val: boolean) {
   }
 }
 
+/** เปิด POP UP  */
+function onAddPerson(type: string) {
+  modalAdd.value = true;
+  typeAdd.value = type;
+}
+
+async function checkOfficer() {
+  http
+    .get(config.API.checkIsofficer + `SYS_RESIGN`)
+    .then(async (res) => {
+      isOfficer.value = await res.data.result.isOfficer;
+      isStaff.value = await res.data.result.isStaff;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onSend() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .get(config.API.sendApprove(id.value))
+        .then(async (res) => {
+          await fetchData(id.value);
+          success($q, "ส่งไปพิจารณา");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {});
+    },
+    "ยืนยันการส่งไปพิจารณา",
+    "ต้องการส่งไปพิจารณาใช่หรือไม่"
+  );
+}
+
 /** Hook */
 onMounted(async () => {
   await fetchData(id.value);
+  await checkOfficer();
 });
 </script>
 
@@ -384,10 +565,22 @@ onMounted(async () => {
         <div class="q-pl-sm text-weight-bold text-dark">
           ผลการพิจารณาของผู้บังคับบัญชา
         </div>
+        <q-btn
+          v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+          flat
+          round
+          icon="add"
+          color="primary"
+          dense
+          class="q-ml-xs"
+          @click="onAddPerson('COMMANDER')"
+        >
+          <q-tooltip>เพิ่มรายชื่อผู้บังคับบัญชา</q-tooltip>
+        </q-btn>
         <q-space />
         <!-- workflowRef?.permission.isUpdate && -->
 
-        <div
+        <!-- <div
           class="q-gutter-x-sm"
           v-if="
             dataDetail.commanderReject === null &&
@@ -412,43 +605,96 @@ onMounted(async () => {
             label="ยับยั้ง"
             @click="popUp('passNot', 'commander')"
           />
-        </div>
+        </div> -->
       </div>
 
       <div class="col-12"><q-separator /></div>
-      <div class="row col-12 q-pa-md">
+      <div class="col-12 q-pa-sm">
-        <div class="col-12 row bg-white q-col-gutter-md">
+        <d-table
-          <div class="col-xs-6 row items-start">
+          ref="table"
-            <div class="col-12 text-top">สถานะ</div>
+          :columns="columnsCommanders"
-            <div class="col-12 text-detail">
+          :rows="rowsApprover?.commanders ?? []"
-              {{
+          row-key="key"
-                dataDetail.commanderReject !== null
+          flat
-                  ? statusOrder(dataDetail.commanderReject)
+          bordered
-                  : "-"
+          :paging="true"
-              }}
+          dense
-            </div>
+          :rows-per-page-options="[1, 25, 50, 100]"
-          </div>
+        >
-          <!-- <div class="col-xs-6 row items-start">
+          <template v-slot:header="props">
-            <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
+            <q-tr :props="props">
-            <div class="col-12 text-detail">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              {{
+                <span class="text-weight-medium">{{ col.label }}</span>
-                dataDetail.commanderRejectDate !== null
+              </q-th>
-                  ? date2Thai(dataDetail.commanderRejectDate)
+            </q-tr>
-                  : "-"
+          </template>
-              }}
+          <template v-slot:body="props">
-            </div>
+            <q-tr :props="props" class="cursor-pointer">
-          </div> -->
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div class="col-xs-12 row items-start">
+                <div v-if="col.name == 'no'">
-            <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
+                  {{ props.rowIndex + 1 }}
-            <div class="col-12 text-detail">
+                </div>
-              {{
+                <div v-else-if="col.name == 'comment'">
-                dataDetail.commanderReject
+                  <div
-                  ? dataDetail.commanderApproveReason
+                    v-if="
-                  : dataDetail.commanderApproveReason
+                      props.row.approveStatus == 'PENDING' &&
-              }}
+                      props.row.comment == ''
-            </div>
+                    "
-          </div>
+                  >
-        </div>
+                    <q-btn
+                      :disable="
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck ||
+                        (props.row.profileId !== keycloakId &&
+                          checkPermission($route)?.attrIsUpdate)
+                      "
+                      :outline="
+                        props.row.profileId !== keycloakId ||
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck
+                          ? false
+                          : true
+                      "
+                      dense
+                      color="primary"
+                      icon-right="check"
+                      class="q-px-sm"
+                      label="อนุญาต"
+                      @click="popUp('pass', 'commander')"
+                    />
+                    <q-btn
+                      :disable="
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck ||
+                        (props.row.profileId !== keycloakId &&
+                          checkPermission($route)?.attrIsUpdate)
+                      "
+                      :outline="
+                        props.row.profileId !== keycloakId ||
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck
+                          ? false
+                          : true
+                      "
+                      color="red"
+                      dense
+                      icon-right="close"
+                      class="q-px-sm"
+                      label="ยับยั้ง"
+                      @click="popUp('passNot', 'commander')"
+                    />
+                  </div>
+                  <div v-else>
+                    {{ props.row.comment ? props.row.comment : "-" }}
+                  </div>
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
       </div>
     </q-card>
 
@@ -458,14 +704,32 @@ onMounted(async () => {
         <div class="q-pl-sm text-weight-bold text-dark">
           ผลการพิจารณาของผู้มีอำนาจ
         </div>
+        <q-btn
+          v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+          flat
+          round
+          icon="add"
+          color="primary"
+          dense
+          class="q-ml-xs"
+          @click="onAddPerson('APPROVER')"
+        >
+          <q-tooltip>เพิ่มรายชื่อผู้มีอำนาจ</q-tooltip>
+        </q-btn>
         <q-space />
         <!-- workflowRef?.permission.isUpdate && -->
 
         <div
           class="q-gutter-x-sm"
           v-if="
+            checkPermission($route)?.attrIsUpdate &&
             dataDetail.oligarchReject === null &&
-            dataDetail.statusMain === 'WAITTING'
+            dataDetail.statusMain === 'WAITTING' &&
+            rowsApprover &&
+            rowsApprover.approvers &&
+            rowsApprover.approvers[0]?.profileId == keycloakId &&
+            rowsApprover.approvers[0]?.approveStatus == 'PENDING' &&
+            approveCheck
           "
         >
           <q-btn
@@ -491,6 +755,18 @@ onMounted(async () => {
       <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-6 row items-start">
+            <div class="col-12 text-top">ชื่อ - นามสกุล</div>
+            <div class="col-12 text-detail">
+              {{
+                rowsApprover &&
+                rowsApprover.approvers &&
+                rowsApprover.approvers[0]?.firstName
+                  ? `${rowsApprover?.approvers[0].prefix}${rowsApprover?.approvers[0].firstName} ${rowsApprover?.approvers[0].lastName}`
+                  : "-"
+              }}
+            </div>
+          </div>
           <div class="col-xs-6 row items-start">
             <div class="col-12 text-top">สถานะ</div>
             <div class="col-12 text-detail">
@@ -524,7 +800,23 @@ onMounted(async () => {
         </div>
       </div>
     </q-card>
-
+    <q-card
+      bordered
+      class="row col-12 text-dark q-mt-sm q-pa-sm"
+      v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+    >
+      <q-btn
+        @click="onSend"
+        :disable="
+          rowsApprover?.approvers.length == 0 ||
+          rowsApprover?.commanders.length == 0
+        "
+        label="ส่งไปพิจารณา"
+        color="secondary"
+        class="q-ml-auto"
+        ><q-tooltip>คลิกเพื่อส่งไปพิจารณา</q-tooltip></q-btn
+      >
+    </q-card>
     <!-- แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย -->
     <q-card bordered class="row col-12 text-dark q-mt-sm">
       <q-form
@@ -808,6 +1100,15 @@ onMounted(async () => {
       </q-form>
     </q-card>
   </q-dialog>
+
+  <DialogAddCommander
+    v-model:modal="modalAdd"
+    :type="typeAdd"
+    :profileType="'officer'"
+    :get-data="fetchData"
+    :id-check="idCheck"
+    :keycloak-user-id="keycloakUserId"
+  />
 </template>
 
 <style lang="scss" scope>

src/modules/06_retirement/components/03_resignEmp/ResignByid.vue

@@ -8,7 +8,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/components/DialogHeader.vue";
+import { checkPermission } from "@/utils/permissions";
 
 import type {
   TypeFile,
@@ -18,9 +18,16 @@ import type {
 import type { QTableProps } from "quasar";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 
+import type {
+  RowsType,
+  SeqTypeRow,
+} from "@/modules/06_retirement/interface/response/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 import CardProfile from "@/components/CardProfile.vue";
 import WorkFlow from "@/components/Workflow/Main.vue";
+import DialogAddCommander from "@/modules/06_retirement/components/DialogAddCommander.vue";
 
 /** Use */
 const $q = useQuasar();
@@ -45,6 +52,134 @@ const personId = ref<string>("");
 const roleUser = ref<string>("");
 const dataProfile = ref<DataProfile>();
 
+const approveCheck = computed(() => {
+  return (
+    rowsApprover.value?.commanders?.every(
+      (commander) => commander.approveStatus === "APPROVE"
+    ) ?? false
+  );
+});
+const idCheck = computed(() => {
+  if (
+    typeAdd.value == "COMMANDER" &&
+    rowsApprover.value?.commanders &&
+    rowsApprover.value?.commanders.length > 0
+  ) {
+    return rowsApprover.value?.commanders.map(
+      (items: SeqTypeRow) => items.profileId
+    );
+  } else if (
+    typeAdd.value == "APPROVER" &&
+    rowsApprover.value?.approvers &&
+    rowsApprover.value?.approvers.length > 0
+  ) {
+    return rowsApprover.value?.approvers.map(
+      (items: SeqTypeRow) => items.profileId
+    );
+  }
+});
+
+const approvePendingCheck = computed(() => {
+  const commanders = rowsApprover.value?.commanders || [];
+  const index = commanders.findIndex((c) => c.profileId === keycloakId.value);
+
+  if (index === -1) {
+    return false;
+  }
+
+  const currentCommander = commanders[index];
+
+  if (currentCommander.approveStatus !== "PENDING") {
+    return false;
+  }
+
+  if (index === 0) {
+    return true;
+  }
+
+  const previousApproved = commanders
+    .slice(0, index)
+    .every((c) => c.approveStatus === "APPROVE");
+  return previousApproved;
+});
+const isOfficer = ref<boolean>(false);
+const isStaff = ref<boolean>(false);
+const profileType = ref<string>("");
+const keycloakUserId = ref<string>("");
+const keycloakId = ref<string>("");
+const modalAdd = ref<boolean>(false);
+const typeAdd = ref<string>("");
+const statusCheck = ref<string>("");
+const rowsApprover = ref<RowsType>();
+const columnsCommanders = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "org",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "สถานะ",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "สถานะ",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "comment",
+    align: "left",
+    label: "ความคิดเห็นและเหตุผล",
+    field: "comment",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "rejectDate",
+    align: "left",
+    label: "วันสุดท้ายที่ยับยั้ง",
+    field: "rejectDate",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
 const id = ref<string>(route.params.id.toString());
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
@@ -209,6 +344,13 @@ async function fetchData(id: string) {
       isNoDebt.value = data.isNoDebt;
       isNoBurden.value = data.isNoBurden;
       isDiscipline.value = data.isDiscipline;
+
+      profileType.value = data.profileType;
+      keycloakUserId.value = data.keycloakUserId;
+      rowsApprover.value = {
+        commanders: data.commanders,
+        approvers: data.approvers,
+      };
     })
     .catch((e) => {
       messageError($q, e);
@@ -536,21 +678,6 @@ function removeFile(fileName: string) {
   });
 }
 
-const isDirector = ref<boolean>(false);
-const isStaff = ref<boolean>(false);
-
-function fetchCheckIsofficer() {
-  http
-    .get(config.API.workflowKeycloakSystem("SYS_RESIGN_EMP"))
-    .then((res) => {
-      isStaff.value = res.data.result.isStaff;
-      isDirector.value = res.data.result.isDirector;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
 function convertStatus(val: string) {
   if (/^[A-Za-z]+$/.test(val)) {
     switch (val) {
@@ -568,13 +695,53 @@ function convertStatus(val: string) {
   } else return val;
 }
 
+/** เปิด POP UP  */
+function onAddPerson(type: string) {
+  modalAdd.value = true;
+  typeAdd.value = type;
+}
+
+async function checkOfficer() {
+  http
+    .get(config.API.checkIsofficer + `SYS_RESIGN_EMP`)
+    .then(async (res) => {
+      isOfficer.value = await res.data.result.isOfficer;
+      isStaff.value = await res.data.result.isStaff;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onSend() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .get(config.API.sendApprove(id.value))
+        .then(async (res) => {
+          await fetchData(id.value);
+          success($q, "ส่งไปพิจารณา");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {});
+    },
+    "ยืนยันการส่งไปพิจารณา",
+    "ต้องการส่งไปพิจารณาใช่หรือไม่"
+  );
+}
+
 /** Hook */
 onMounted(async () => {
   showLoader();
   await Promise.all([
-    fetchData(id.value),
+    await fetchData(id.value),
     fetchFile(),
-    fetchCheckIsofficer(),
+    await checkOfficer(),
   ]).finally(() => {
     hideLoader();
   });
@@ -1037,8 +1204,21 @@ onMounted(async () => {
         <div class="q-pl-sm text-weight-bold text-dark">
           ผลการพิจารณาของผู้บังคับบัญชา
         </div>
+        <q-btn
+          v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+          flat
+          round
+          icon="add"
+          color="primary"
+          dense
+          class="q-ml-xs"
+          @click="onAddPerson('COMMANDER')"
+        >
+          <q-tooltip>เพิ่มรายชื่อผู้บังคับบัญชา</q-tooltip>
+        </q-btn>
+
         <q-space />
-        <div
+        <!-- <div
           class="q-gutter-x-sm"
           v-if="
             isDirector &&
@@ -1064,10 +1244,98 @@ onMounted(async () => {
             label="ยับยั้ง"
             @click="popUp('passNot', 'commander')"
           />
-        </div>
+        </div> -->
       </div>
 
       <div class="col-12"><q-separator /></div>
+      <div class="col-12 q-pa-sm">
+        <d-table
+          ref="table"
+          :columns="columnsCommanders"
+          :rows="rowsApprover?.commanders ?? []"
+          row-key="key"
+          flat
+          bordered
+          :paging="true"
+          dense
+          :rows-per-page-options="[1, 25, 50, 100]"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else-if="col.name == 'comment'">
+                  <div
+                    v-if="
+                      props.row.approveStatus == 'PENDING' &&
+                      props.row.comment == ''
+                    "
+                  >
+                    <q-btn
+                      :disable="
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck ||
+                        (props.row.profileId !== keycloakId &&
+                          checkPermission($route)?.attrIsUpdate)
+                      "
+                      :outline="
+                        props.row.profileId !== keycloakId ||
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck
+                          ? false
+                          : true
+                      "
+                      dense
+                      color="primary"
+                      icon-right="check"
+                      class="q-px-sm"
+                      label="อนุญาต"
+                      @click="popUp('pass', 'commander')"
+                    />
+                    <q-btn
+                      :disable="
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck ||
+                        (props.row.profileId !== keycloakId &&
+                          checkPermission($route)?.attrIsUpdate)
+                      "
+                      :outline="
+                        props.row.profileId !== keycloakId ||
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck
+                          ? false
+                          : true
+                      "
+                      color="red"
+                      dense
+                      icon-right="close"
+                      class="q-px-sm"
+                      label="ยับยั้ง"
+                      @click="popUp('passNot', 'commander')"
+                    />
+                  </div>
+                  <div v-else>
+                    {{ props.row.comment ? props.row.comment : "-" }}
+                  </div>
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+
       <div class="row col-12 q-pa-md">
         <div class="col-12 row bg-white q-col-gutter-md">
           <div class="col-xs-6 row items-start">
@@ -1110,13 +1378,30 @@ onMounted(async () => {
         <div class="q-pl-sm text-weight-bold text-dark">
           ผลการพิจารณาของผู้มีอำนาจ
         </div>
+        <q-btn
+          v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+          flat
+          round
+          icon="add"
+          color="primary"
+          dense
+          class="q-ml-xs"
+          @click="onAddPerson('APPROVER')"
+        >
+          <q-tooltip>เพิ่มรายชื่อผู้มีอำนาจ</q-tooltip>
+        </q-btn>
         <q-space />
         <div
           class="q-gutter-x-sm"
           v-if="
-            isDirector &&
+            checkPermission($route)?.attrIsUpdate &&
             dataDetail.oligarchReject === null &&
-            dataDetail.statusMain === 'WAITTING'
+            dataDetail.statusMain === 'WAITTING' &&
+            rowsApprover &&
+            rowsApprover.approvers &&
+            rowsApprover.approvers[0]?.profileId == keycloakId &&
+            rowsApprover.approvers[0]?.approveStatus == 'PENDING' &&
+            approveCheck
           "
         >
           <q-btn
@@ -1142,6 +1427,18 @@ onMounted(async () => {
       <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-6 row items-start">
+            <div class="col-12 text-top">ชื่อ - นามสกุล</div>
+            <div class="col-12 text-detail">
+              {{
+                rowsApprover &&
+                rowsApprover.approvers &&
+                rowsApprover.approvers[0]?.firstName
+                  ? `${rowsApprover?.approvers[0].prefix}${rowsApprover?.approvers[0].firstName} ${rowsApprover?.approvers[0].lastName}`
+                  : "-"
+              }}
+            </div>
+          </div>
           <div class="col-xs-6 row items-start">
             <div class="col-12 text-top">สถานะ</div>
             <div class="col-12 text-detail">
@@ -1175,7 +1472,23 @@ onMounted(async () => {
         </div>
       </div>
     </q-card>
-
+    <q-card
+      bordered
+      class="row col-12 text-dark q-mt-sm q-pa-sm"
+      v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+    >
+      <q-btn
+        @click="onSend"
+        :disable="
+          rowsApprover?.approvers.length == 0 ||
+          rowsApprover?.commanders.length == 0
+        "
+        label="ส่งไปพิจารณา"
+        color="secondary"
+        class="q-ml-auto"
+        ><q-tooltip>คลิกเพื่อส่งไปพิจารณา</q-tooltip></q-btn
+      >
+    </q-card>
     <!-- แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย -->
     <q-card bordered class="row col-12 text-dark q-mt-sm">
       <q-form
@@ -1420,6 +1733,7 @@ onMounted(async () => {
         </div>
       </q-form>
     </q-card>
+
     <!-- <WorkFlow
       ref="workflowRef"
       v-model:is-check-data="isCheckData"
@@ -1509,6 +1823,15 @@ onMounted(async () => {
     :id="personId"
     @update:modal="updatemodalPersonal"
   />
+
+  <DialogAddCommander
+    v-model:modal="modalAdd"
+    :type="typeAdd"
+    :profileType="'officer'"
+    :get-data="fetchData"
+    :id-check="idCheck"
+    :keycloak-user-id="keycloakUserId"
+  />
 </template>
 
 <style lang="scss" scope>

src/modules/06_retirement/components/03_resignEmp/ResignReject.vue

@@ -8,6 +8,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
 import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 import DialogHeader from "@/components/DialogHeader.vue";
 
 import type {
@@ -17,7 +18,12 @@ import type {
 } from "@/modules/06_retirement/interface/response/Main";
 import type { QTableProps } from "quasar";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
+import type {
+  RowsType,
+  SeqTypeRow,
+} from "@/modules/06_retirement/interface/response/Main";
 
+import DialogAddCommander from "@/modules/06_retirement/components/DialogAddCommander.vue";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 import CardProfile from "@/components/CardProfile.vue";
 import WorkFlow from "@/components/Workflow/Main.vue";
@@ -43,6 +49,133 @@ const {
 const roleUser = ref<string>("");
 const dataProfile = ref<DataProfile>();
 
+const approveCheck = computed(() => {
+  return (
+    rowsApprover.value?.commanders?.every(
+      (commander) => commander.approveStatus === "APPROVE"
+    ) ?? false
+  );
+});
+const idCheck = computed(() => {
+  if (
+    typeAdd.value == "COMMANDER" &&
+    rowsApprover.value?.commanders &&
+    rowsApprover.value?.commanders.length > 0
+  ) {
+    return rowsApprover.value?.commanders.map(
+      (items: SeqTypeRow) => items.profileId
+    );
+  } else if (
+    typeAdd.value == "APPROVER" &&
+    rowsApprover.value?.approvers &&
+    rowsApprover.value?.approvers.length > 0
+  ) {
+    return rowsApprover.value?.approvers.map(
+      (items: SeqTypeRow) => items.profileId
+    );
+  }
+});
+
+const approvePendingCheck = computed(() => {
+  const commanders = rowsApprover.value?.commanders || [];
+  const index = commanders.findIndex((c) => c.profileId === keycloakId.value);
+
+  if (index === -1) {
+    return false;
+  }
+
+  const currentCommander = commanders[index];
+
+  if (currentCommander.approveStatus !== "PENDING") {
+    return false;
+  }
+
+  if (index === 0) {
+    return true;
+  }
+
+  const previousApproved = commanders
+    .slice(0, index)
+    .every((c) => c.approveStatus === "APPROVE");
+  return previousApproved;
+});
+const isOfficer = ref<boolean>(false);
+const profileType = ref<string>("");
+const keycloakUserId = ref<string>("");
+const keycloakId = ref<string>("");
+const modalAdd = ref<boolean>(false);
+const typeAdd = ref<string>("");
+const statusCheck = ref<string>("");
+const rowsApprover = ref<RowsType>();
+const columnsCommanders = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "org",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "สถานะ",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "สถานะ",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "comment",
+    align: "left",
+    label: "ความคิดเห็นและเหตุผล",
+    field: "comment",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "rejectDate",
+    align: "left",
+    label: "วันสุดท้ายที่ยับยั้ง",
+    field: "rejectDate",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
 const id = ref<string>(route.params.id.toString());
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
@@ -288,9 +421,49 @@ function fetchCheckIsofficer() {
     });
 }
 
+/** เปิด POP UP  */
+function onAddPerson(type: string) {
+  modalAdd.value = true;
+  typeAdd.value = type;
+}
+
+async function checkOfficer() {
+  http
+    .get(config.API.checkIsofficer + `SYS_RESIGN_EMP`)
+    .then(async (res) => {
+      isOfficer.value = await res.data.result.isOfficer;
+      isStaff.value = await res.data.result.isStaff;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onSend() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .get(config.API.sendApprove(id.value))
+        .then(async (res) => {
+          await fetchData(id.value);
+          success($q, "ส่งไปพิจารณา");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {});
+    },
+    "ยืนยันการส่งไปพิจารณา",
+    "ต้องการส่งไปพิจารณาใช่หรือไม่"
+  );
+}
+
 /** Hook */
 onMounted(async () => {
-  await Promise.all([fetchData(id.value), fetchCheckIsofficer()]);
+  await Promise.all([fetchData(id.value), checkOfficer()]);
 });
 </script>
 
@@ -307,9 +480,8 @@ onMounted(async () => {
         class="q-mr-sm"
         @click="router.push('/retirement/resign-employee')"
       />
-      รายละเอียดการยกเลิกลาออก {{
+      รายละเอียดการยกเลิกลาออก
-        dataDetail.prefix.dataDetail.firstName + "  " + dataDetail.lastName
+      {{ dataDetail.prefix.dataDetail.firstName + "  " + dataDetail.lastName }}
-      }}
     </div>
 
     <CardProfile :type="'employee'" :data="dataProfile as DataProfile" />
@@ -408,8 +580,20 @@ onMounted(async () => {
         <div class="q-pl-sm text-weight-bold text-dark">
           ผลการพิจารณาของผู้บังคับบัญชา
         </div>
+        <q-btn
+          v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+          flat
+          round
+          icon="add"
+          color="primary"
+          dense
+          class="q-ml-xs"
+          @click="onAddPerson('COMMANDER')"
+        >
+          <q-tooltip>เพิ่มรายชื่อผู้บังคับบัญชา</q-tooltip>
+        </q-btn>
         <q-space />
-        <div
+        <!-- <div
           class="q-gutter-x-sm"
           v-if="
             isDirector &&
@@ -435,43 +619,96 @@ onMounted(async () => {
             label="ยับยั้ง"
             @click="popUp('passNot', 'commander')"
           />
-        </div>
+        </div> -->
       </div>
 
       <div class="col-12"><q-separator /></div>
-      <div class="row col-12 q-pa-md">
+      <div class="col-12 q-pa-sm">
-        <div class="col-12 row bg-white q-col-gutter-md">
+        <d-table
-          <div class="col-xs-6 row items-start">
+          ref="table"
-            <div class="col-12 text-top">สถานะ</div>
+          :columns="columnsCommanders"
-            <div class="col-12 text-detail">
+          :rows="rowsApprover?.commanders ?? []"
-              {{
+          row-key="key"
-                dataDetail.commanderReject !== null
+          flat
-                  ? statusOrder(dataDetail.commanderReject)
+          bordered
-                  : "-"
+          :paging="true"
-              }}
+          dense
-            </div>
+          :rows-per-page-options="[1, 25, 50, 100]"
-          </div>
+        >
-          <!-- <div class="col-xs-6 row items-start">
+          <template v-slot:header="props">
-            <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
+            <q-tr :props="props">
-            <div class="col-12 text-detail">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              {{
+                <span class="text-weight-medium">{{ col.label }}</span>
-                dataDetail.commanderRejectDate !== null
+              </q-th>
-                  ? date2Thai(dataDetail.commanderRejectDate)
+            </q-tr>
-                  : "-"
+          </template>
-              }}
+          <template v-slot:body="props">
-            </div>
+            <q-tr :props="props" class="cursor-pointer">
-          </div> -->
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div class="col-xs-12 row items-start">
+                <div v-if="col.name == 'no'">
-            <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
+                  {{ props.rowIndex + 1 }}
-            <div class="col-12 text-detail">
+                </div>
-              {{
+                <div v-else-if="col.name == 'comment'">
-                dataDetail.commanderReject
+                  <div
-                  ? dataDetail.commanderApproveReason
+                    v-if="
-                  : dataDetail.commanderApproveReason
+                      props.row.approveStatus == 'PENDING' &&
-              }}
+                      props.row.comment == ''
-            </div>
+                    "
-          </div>
+                  >
-        </div>
+                    <q-btn
+                      :disable="
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck ||
+                        (props.row.profileId !== keycloakId &&
+                          checkPermission($route)?.attrIsUpdate)
+                      "
+                      :outline="
+                        props.row.profileId !== keycloakId ||
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck
+                          ? false
+                          : true
+                      "
+                      dense
+                      color="primary"
+                      icon-right="check"
+                      class="q-px-sm"
+                      label="อนุญาต"
+                      @click="popUp('pass', 'commander')"
+                    />
+                    <q-btn
+                      :disable="
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck ||
+                        (props.row.profileId !== keycloakId &&
+                          checkPermission($route)?.attrIsUpdate)
+                      "
+                      :outline="
+                        props.row.profileId !== keycloakId ||
+                        statusCheck == 'NEW' ||
+                        !approvePendingCheck
+                          ? false
+                          : true
+                      "
+                      color="red"
+                      dense
+                      icon-right="close"
+                      class="q-px-sm"
+                      label="ยับยั้ง"
+                      @click="popUp('passNot', 'commander')"
+                    />
+                  </div>
+                  <div v-else>
+                    {{ props.row.comment ? props.row.comment : "-" }}
+                  </div>
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
       </div>
     </q-card>
 
@@ -481,14 +718,31 @@ onMounted(async () => {
         <div class="q-pl-sm text-weight-bold text-dark">
           ผลการพิจารณาของผู้มีอำนาจ
         </div>
+        <q-btn
+          v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+          flat
+          round
+          icon="add"
+          color="primary"
+          dense
+          class="q-ml-xs"
+          @click="onAddPerson('APPROVER')"
+        >
+          <q-tooltip>เพิ่มรายชื่อผู้มีอำนาจ</q-tooltip>
+        </q-btn>
         <q-space />
 
         <div
           class="q-gutter-x-sm"
           v-if="
-            isDirector &&
+            checkPermission($route)?.attrIsUpdate &&
             dataDetail.oligarchReject === null &&
-            dataDetail.statusMain === 'WAITTING'
+            dataDetail.statusMain === 'WAITTING' &&
+            rowsApprover &&
+            rowsApprover.approvers &&
+            rowsApprover.approvers[0]?.profileId == keycloakId &&
+            rowsApprover.approvers[0]?.approveStatus == 'PENDING' &&
+            approveCheck
           "
         >
           <q-btn
@@ -514,6 +768,18 @@ onMounted(async () => {
       <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-6 row items-start">
+            <div class="col-12 text-top">ชื่อ - นามสกุล</div>
+            <div class="col-12 text-detail">
+              {{
+                rowsApprover &&
+                rowsApprover.approvers &&
+                rowsApprover.approvers[0]?.firstName
+                  ? `${rowsApprover?.approvers[0].prefix}${rowsApprover?.approvers[0].firstName} ${rowsApprover?.approvers[0].lastName}`
+                  : "-"
+              }}
+            </div>
+          </div>
           <div class="col-xs-6 row items-start">
             <div class="col-12 text-top">สถานะ</div>
             <div class="col-12 text-detail">
@@ -547,7 +813,23 @@ onMounted(async () => {
         </div>
       </div>
     </q-card>
-
+    <q-card
+      bordered
+      class="row col-12 text-dark q-mt-sm q-pa-sm"
+      v-if="statusCheck == 'NEW' && (isOfficer || isStaff)"
+    >
+      <q-btn
+        @click="onSend"
+        :disable="
+          rowsApprover?.approvers.length == 0 ||
+          rowsApprover?.commanders.length == 0
+        "
+        label="ส่งไปพิจารณา"
+        color="secondary"
+        class="q-ml-auto"
+        ><q-tooltip>คลิกเพื่อส่งไปพิจารณา</q-tooltip></q-btn
+      >
+    </q-card>
     <!-- แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย -->
     <q-card bordered class="row col-12 text-dark q-mt-sm">
       <q-form
@@ -836,6 +1118,15 @@ onMounted(async () => {
       </q-form>
     </q-card>
   </q-dialog>
+
+  <DialogAddCommander
+    v-model:modal="modalAdd"
+    :type="typeAdd"
+    :profileType="'officer'"
+    :get-data="fetchData"
+    :id-check="idCheck"
+    :keycloak-user-id="keycloakUserId"
+  />
 </template>
 
 <style lang="scss" scope>

src/modules/06_retirement/components/DialogAddCommander.vue

@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useRoute } from "vue-router";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  type: String,
+  profileType: String,
+  keycloakUserId: String,
+  getData: Function,
+  idCheck: Array,
+});
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const route = useRoute();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogConfirm,
+  dialogMessageNotify,
+} = mixin;
+
+const pageId = ref<string>(route.params.id as string);
+const keyword = ref<string>("");
+const isAct = ref<boolean>(false);
+
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const selected = ref<any[]>([]);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const rows = ref<any[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "actFullName",
+    align: "left",
+    label: "รักษาการแทน",
+    field: "actFullName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function onSearchData() {
+  getSearch();
+}
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+function getSearch() {
+  pagination.value.page = 1;
+  getData();
+}
+
+async function getData() {
+  const url =
+    props.type == "COMMANDER"
+      ? config.API.workflowCommanderOperate
+      : config.API.workflowCommanderSign;
+  showLoader();
+  await http
+    .put(url, {
+      pageSize: pagination.value.rowsPerPage,
+      page: pagination.value.page,
+      keyword: keyword.value,
+      isAct: isAct.value,
+      keycloakId: props.keycloakUserId,
+    })
+    .then(async (res) => {
+      const data = res.data.result;
+      totalList.value = Math.ceil(data.total / pagination.value.rowsPerPage);
+      total.value = data.total;
+      rows.value = data.data;
+      selected.value = data.data.filter((items: any) => {
+        return props.idCheck?.some((i: any) => i === items.id);
+      });
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSubmit() {
+  if (selected.value.length !== 0) {
+    dialogConfirm($q, () => {
+      if (props.keycloakUserId) {
+        const body = selected.value.map((items: any, index: any) => ({
+          seq: index,
+          prefix: items.prefix,
+          firstName: items.firstName,
+          lastName: items.lastName,
+          positionName: items.position,
+          profileId: items.id,
+          keycloakId: items.keycloakId,
+        }));
+        showLoader();
+        http
+          .post(
+            config.API.addApproverByType(
+              props.type?.toLocaleLowerCase() as string,
+              props.profileType?.toLocaleLowerCase() as string,
+              pageId.value
+            ),
+            body
+          )
+          .then((res) => {
+            closeDialog();
+            success($q, "บันทึกสำเร็จ");
+            props.getData?.(pageId.value);
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(() => {});
+      } else {
+        closeDialog();
+      }
+    });
+  } else {
+    dialogMessageNotify($q, "กรุณาเลือกอย่างน้อย 1 คน");
+  }
+}
+
+function closeDialog() {
+  modal.value = false;
+  rows.value = [];
+  selected.value = [];
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      getSearch();
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="
+            props.type == 'APPROVER' ? 'เลือกผู้มีอำนาจ' : 'เลือกผู้บังคับบัญชา'
+          "
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <div class="row q-gutter-x-xs">
+                <q-input
+                  dense
+                  outlined
+                  label="ค้นหา"
+                  v-model="keyword"
+                  style="width: 300px"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search"></q-icon>
+                  </template>
+                </q-input>
+                <q-checkbox
+                  keep-color
+                  v-model="isAct"
+                  label="แสดงเฉพาะรักษาการแทน"
+                  color="primary"
+                >
+                  <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
+                </q-checkbox>
+                <q-space />
+                <q-btn
+                  color="primary"
+                  icon="search"
+                  label="ค้นหา"
+                  class="q-pa-sm"
+                  @click.prevent="onSearchData"
+                  style="width: 200px"
+                >
+                </q-btn>
+              </div>
+            </div>
+            <div class="col-12 text-red">
+              {{
+                props.type == "APPROVER"
+                  ? ""
+                  : "*ลำดับการอนุมัติขึ้นอยู่กับลำดับการคลิกเลือก"
+              }}
+            </div>
+            <div class="col-12">
+              <d-table
+                ref="table"
+                :columns="columns"
+                :rows="rows"
+                row-key="key"
+                flat
+                bordered
+                :paging="true"
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+                :selection="props.type == 'COMMANDER' ? `multiple` : `single`"
+                v-model:selected="selected"
+                @update:pagination="updatePagination"
+              >
+                <template v-slot:pagination="scope">
+                  ทั้งหมด {{ total }} รายการ
+                  <q-pagination
+                    v-model="pagination.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="Number(totalList)"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                    :max-pages="5"
+                    @update:model-value="getData"
+                  ></q-pagination>
+                </template>
+
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.checkBox"
+                  />
+                </template>
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th auto-width />
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </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-td>
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name == 'no'">
+                        {{
+                          (pagination.page - 1) * pagination.rowsPerPage +
+                          props.rowIndex +
+                          1
+                        }}
+                      </div>
+                      <div v-else>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/06_retirement/interface/response/Main.ts

@@ -54,6 +54,22 @@ interface CheckBoxType {
   value: string;
 }
 
+interface RowsType {
+  commanders: SeqTypeRow[];
+  approvers: SeqTypeRow[];
+}
+interface SeqTypeRow {
+  seq: number;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  positionName: string;
+  profileId: string;
+  keycloakId: string;
+  approveStatus: string;
+  comment: string;
+}
+
 export type {
   resMain,
   ResponseItems,
@@ -61,4 +77,6 @@ export type {
   rowFile,
   FileList,
   CheckBoxType,
+  RowsType,
+  SeqTypeRow
 };

src/modules/09_leave/components/05_Leave/DetailLeavePage.vue

@@ -950,22 +950,6 @@ onMounted(async () => {
                     dense
                     :rows-per-page-options="[1, 25, 50, 100]"
                   >
-                    <!-- @update:pagination="updatePagination" -->
-                    <!-- <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="pagination.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="getData"
-      ></q-pagination>
-    </template> -->
-
                     <template v-slot:header="props">
                       <q-tr :props="props">
                         <q-th