แก้ UI ลาออก

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 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">
-              {{
-                dataDetail.commanderReject !== null
-                  ? statusOrder(dataDetail.commanderReject)
-                  : "-"
-              }}
-            </div>
-          </div>
-          <!-- <div class="col-xs-6 row items-start">
-            <div class="col-12 text-top">วันสุดท้ายที่ยับยั้ง</div>
-            <div class="col-12 text-detail">
-              {{
-                dataDetail.commanderRejectDate !== null
-                  ? date2Thai(dataDetail.commanderRejectDate)
-                  : "-"
-              }}
-            </div>
-          </div> -->
-          <div class="col-xs-12 row items-start">
-            <div class="col-12 text-top">ความคิดเห็นและเหตุผล</div>
-            <div class="col-12 text-detail">
-              {{
-                dataDetail.commanderReject
-                  ? dataDetail.commanderApproveReason
-                  : dataDetail.commanderApproveReason
-              }}
-            </div>
-          </div>
-        </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>
     </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>