From ef992ac55919c1eb7892143bbfa728f40ef89a99 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Mon, 27 Jan 2025 11:52:40 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B8=AD=E0=B8=AD=E0=B8=81?=
 =?UTF-8?q?=E0=B8=88=E0=B8=B2=E0=B8=81=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=20(=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialogs/PopupPersonalNew.vue   |  10 +-
 .../04_registryPerson/views/detailView.vue    |   2 +-
 .../components/06_dismissOrder/DetailEMP.vue  | 409 ++++++++++++++++++
 src/modules/06_retirement/router.ts           |  24 +
 .../06_retirement/views/06_dismissOrder.vue   |   2 +-
 .../views/08_dismissOrderEmp.vue              |  16 +-
 6 files changed, 449 insertions(+), 14 deletions(-)
 create mode 100644 src/modules/06_retirement/components/06_dismissOrder/DetailEMP.vue

diff --git a/src/components/Dialogs/PopupPersonalNew.vue b/src/components/Dialogs/PopupPersonalNew.vue
index be801f939..5bb0f24ac 100644
--- a/src/components/Dialogs/PopupPersonalNew.vue
+++ b/src/components/Dialogs/PopupPersonalNew.vue
@@ -99,7 +99,7 @@ async function fetchInformation(id: string) {
     .get(
       config.API.orgProfileById(
         id,
-        `${empType.value == "employee" ? `-${empType.value}` : ""}`
+        `${props.type == "employee" ? `-${props.type}` : ""}`
       )
     )
     .then(async (res) => {
@@ -143,7 +143,7 @@ async function fetchProfileGov(id: string) {
     .get(
       config.API.profileNewGovernmentCard(
         id,
-        `${empType.value == "employee" ? `-${empType.value}` : ""}`
+        `${props.type == "employee" ? `-${props.type}` : ""}`
       )
     )
     .then(async (res) => {
@@ -172,7 +172,7 @@ async function fetchProfileGov(id: string) {
 }
 
 function redirecToRegistry() {
-  router.push(`/registry-${empType.value}/${props.id}`);
+  router.push(`/registry-${props.type == 'employee' ? 'employee':'officer'}/${props.id}`);
   modal.value = false;
 }
 
@@ -422,7 +422,7 @@ async function fetchProfile(id: string, avatarName: string) {
                         :model-value="
                           goverment.positionType ? goverment.positionType : '-'
                         "
-                        label="ประเภทตำแหน่ง"
+                        :label="props.type == 'employee' ? 'กลุ่มงาน':'ประเภทตำแหน่ง'"
                       />
                     </div>
                     <div class="col-xs-6 col-md-6">
@@ -434,7 +434,7 @@ async function fetchProfile(id: string, avatarName: string) {
                             ? goverment.positionLevel
                             : '-'
                         "
-                        label="ระดับตำแหน่ง"
+                        :label="props.type == 'employee' ? 'ระดับชั้นงาน':'ระดับตำแหน่ง'"
                       />
                     </div>
                     <div
diff --git a/src/modules/04_registryPerson/views/detailView.vue b/src/modules/04_registryPerson/views/detailView.vue
index 4a01f2420..9735234b7 100644
--- a/src/modules/04_registryPerson/views/detailView.vue
+++ b/src/modules/04_registryPerson/views/detailView.vue
@@ -514,7 +514,7 @@ function outPost() {
     await http
       .post(config.API.retirementOut, formData)
       .then(async () => {
-        await router.push("/retirement/dismiss-order");
+        await router.push(`${empType.value === "-employee" ? `/retirementEmployee`:`/retirement/dismiss-order`}`);
         await success($q, "ดำเนินการสำเร็จ");
       })
       .catch((e) => {
diff --git a/src/modules/06_retirement/components/06_dismissOrder/DetailEMP.vue b/src/modules/06_retirement/components/06_dismissOrder/DetailEMP.vue
new file mode 100644
index 000000000..79942f876
--- /dev/null
+++ b/src/modules/06_retirement/components/06_dismissOrder/DetailEMP.vue
@@ -0,0 +1,409 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { tokenParsed } from "@/plugins/auth";
+
+/**Import type */
+import type { QForm } from "quasar";
+import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
+
+/** importComponents*/
+import CardProfile from "@/components/CardProfile.vue";
+
+/** use */
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const checkRoutePermisson = ref<boolean>(route.name == "outDetailOnly");
+const mixin = useCounterMixin();
+const dataId = route.params.id.toString();
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  findOrgName,
+} = mixin;
+
+/**
+ * กำหนดค่าตัวแปร
+ */
+const myForm = ref<QForm | null>(null);
+const roleAdmin = ref<boolean>(false);
+const edit = ref<boolean>(false);
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
+const reason = ref<string>("");
+const dataProfile = ref<DataProfile>();
+const mainData = ref<any>();
+
+const fullName = ref<string>("");
+const status = ref<string>("");
+
+//นำข้อมูลจาก API มาแสดง
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.outByid(dataId))
+    .then((res) => {
+      const data = res.data.result;
+      mainData.value = res.data.result;
+      dataProfile.value = data as DataProfile;
+      fullName.value = `${data.prefix}${data.firstName ?? "-"} ${
+        data.lastName ?? "-"
+      }`;
+      status.value = data.status;
+
+      organizationPositionOld.value = data.organizationPositionOld
+        ? data.organizationPositionOld
+        : findOrgName(data);
+
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.positionNumberOld ?? "";
+      salary.value = data.salary ?? "";
+      organization.value = data.organization ?? "";
+      date.value = data.date !== null ? new Date(data.date) : null;
+      reason.value = data.reason ?? "";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชั่น Cancle
+ */
+async function clickCancel() {
+  edit.value = false;
+  const data = mainData.value;
+  if (data) {
+    organizationPositionOld.value = data.organizationPositionOld
+      ? data.organizationPositionOld
+      : findOrgName(data);
+
+    positionTypeOld.value = data.positionTypeOld ?? "";
+    positionLevelOld.value = data.positionLevelOld ?? "";
+    posNo.value = data.positionNumberOld ?? "";
+    salary.value = data.salary ?? "";
+    organization.value = data.organization ?? "";
+    date.value = data.date !== null ? new Date(data.date) : null;
+    reason.value = data.reason ?? "";
+  }
+  myForm.value?.resetValidation();
+  // await getData();
+}
+
+/**
+ * ฟังก์ชั่น Saveจาก API
+ */
+async function onSubmit() {
+  dialogMessage(
+    $q,
+    "ต้องการแก้ไขข้อมูลหรือไม่?",
+    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+    "mdi-help-circle-outline",
+    "ตกลง",
+    "public",
+    async () => {
+      const body = {
+        organizationPositionOld: organizationPositionOld.value,
+        positionTypeOld: positionTypeOld.value,
+        positionLevelOld: positionLevelOld.value,
+        positionNumberOld: posNo.value,
+        amountOld: salary.value.toString().replace(/,/g, ""),
+        organization: organization.value,
+        reason: reason.value,
+        date: date.value,
+      };
+      showLoader();
+      await http
+        .put(config.API.outByid(dataId), body)
+        .then(async () => {
+          await getData();
+          success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+          edit.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    undefined
+  );
+}
+
+/**
+ * Function เพิ่ม Class เวลา Edit
+ * @param val เมื่อเป็นEdit จะเปลี่ยน Class
+ */
+function getClass(val: boolean) {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+}
+
+/** Hook */
+onMounted(async () => {
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
+  }
+  await getData();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดการให้ออก {{ fullName }}
+  </div>
+
+  <CardProfile :type="'employee'" :data="dataProfile as DataProfile" />
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <q-form
+      ref="myForm"
+      greedy
+      @submit.prevent
+      @validation-success="onSubmit"
+      class="col-12"
+    >
+      <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+        <div class="q-pl-sm text-weight-bold text-dark">
+          แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+        </div>
+        <q-space />
+        <div
+          v-if="
+            status !== 'DONE' && status !== 'REPORT' && !checkRoutePermisson
+          "
+        >
+          <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="clickCancel"
+            />
+          </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-12 row items-center">
+            <div class="col-12">
+              <div class="text-weight-bold">ตำแหน่ง/สังกัดเดิม</div>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-4 row">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
+                hide-bottom-space
+                :label="`${'ประเภทตำแหน่ง'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-4 row">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-4 row">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+          </div>
+
+          <div class="col-12"><q-separator /></div>
+          <div class="col-xs-6 col-sm-6 row">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organization"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกการให้ออกสังกัด'}`]"
+                hide-bottom-space
+                :label="`${'การให้ออกสังกัด'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-6 row">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="edit ? [(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]:[]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+</template>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>
diff --git a/src/modules/06_retirement/router.ts b/src/modules/06_retirement/router.ts
index a6e9f27e3..5ad3f78fc 100644
--- a/src/modules/06_retirement/router.ts
+++ b/src/modules/06_retirement/router.ts
@@ -58,8 +58,12 @@ const dismissOrderEmp = () =>
   import("@/modules/06_retirement/views/08_dismissOrderEmp.vue");
 const outDetail = () =>
   import("@/modules/06_retirement/components/06_dismissOrder/Detail.vue");
+const outDetailEmp = () =>
+  import("@/modules/06_retirement/components/06_dismissOrder/DetailEMP.vue");
 const outDetailOnly = () =>
   import("@/modules/06_retirement/components/06_dismissOrder/Detail.vue");
+const outDetailOnlyEmp = () =>
+  import("@/modules/06_retirement/components/06_dismissOrder/DetailEMP.vue");
 
 /** รายงาน*/
 
@@ -311,6 +315,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/retirementEmployee/dismiss-order/:id",
+    name: "outDetailEmp",
+    component: outDetailEmp,
+    meta: {
+      Auth: true,
+      Key: "SYS_DISMISS_EMP",
+      Role: "STAFF",
+    },
+  },
   {
     path: "/retirement/dismiss-order-detail/:id",
     name: "outDetailOnly",
@@ -321,6 +335,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/retirementEmployee/dismiss-order-detail/:id",
+    name: "outDetailOnlyEmp",
+    component: outDetailOnlyEmp,
+    meta: {
+      Auth: true,
+      Key: "SYS_DISMISS_EMP",
+      Role: "STAFF",
+    },
+  },
 
   {
     path: "/retirement/report",
diff --git a/src/modules/06_retirement/views/06_dismissOrder.vue b/src/modules/06_retirement/views/06_dismissOrder.vue
index 6091089bb..37ab5f30b 100644
--- a/src/modules/06_retirement/views/06_dismissOrder.vue
+++ b/src/modules/06_retirement/views/06_dismissOrder.vue
@@ -154,7 +154,7 @@ function openModalOrder() {
 async function getData() {
   showLoader();
   await http
-    .get(config.API.retirementOut)
+    .get(config.API.retirementOut+`/officer`)
     .then((res: any) => {
       const data = res.data.result;
       rows.value = data;
diff --git a/src/modules/06_retirement/views/08_dismissOrderEmp.vue b/src/modules/06_retirement/views/08_dismissOrderEmp.vue
index df760b20d..c34ce6568 100644
--- a/src/modules/06_retirement/views/08_dismissOrderEmp.vue
+++ b/src/modules/06_retirement/views/08_dismissOrderEmp.vue
@@ -154,19 +154,19 @@ function openModalOrder() {
 async function getData() {
   showLoader();
   await http
-    .get(config.API.retirementOut)
+    .get(config.API.retirementOut + `/employee`)
     .then((res: any) => {
       const data = res.data.result;
       rows.value = data;
       rowsData.value = data;
       filters.value = data;
+      hideLoader();
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
       hideLoader();
-    });
+    })
+    .finally(() => {});
 }
 
 async function clickDelete(id: string) {
@@ -209,7 +209,9 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">รายการให้ออก (ลูกจ้าง)</div>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการให้ออก (ลูกจ้าง)
+  </div>
   <q-card flat bordered class="col-12 q-mt-sm">
     <q-separator />
     <div class="row q-pa-md">
@@ -287,7 +289,7 @@ onMounted(async () => {
                     icon="mdi-eye"
                     @click="
                       router.push(
-                        `/retirement/dismiss-order-detail/${props.row.id}`
+                        `/retirementEmployee/dismiss-order-detail/${props.row.id}`
                       )
                     "
                   >
@@ -304,7 +306,7 @@ onMounted(async () => {
                     color="edit"
                     icon="edit"
                     @click="
-                      router.push(`/retirement/dismiss-order/${props.row.id}`)
+                      router.push(`/retirementEmployee/dismiss-order/${props.row.id}`)
                     "
                   >
                     <q-tooltip>แก้ไขข้อมูล</q-tooltip>