no message

src/modules/09_leave/components/2_Leave/DetailLeave.vue

@@ -1,20 +1,249 @@
 <script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+//importStore
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
+
+//importType
+import type { FremData } from "@/modules/09_leave/interface/request/leave";
+
+// importForm
+import FormMain from "@/modules/09_leave/components/2_Leave/formDetail/formMain.vue";
+import FormLeave from "@/modules/09_leave/components/2_Leave/formDetail/formLeave.vue";
+import FormChildbirth from "@/modules/09_leave/components/2_Leave/formDetail/formChildbirth.vue";
+import FormHoliday from "@/modules/09_leave/components/2_Leave/formDetail/formHoliday.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
+const { dialogConfirm, showLoader, hideLoader, date2Thai } = mixin;
+const stores = useLeavelistDataStore();
 const router = useRouter();
 const route = useRoute();
-const paramsId = route.params.id;
+const paramsId = route.params.id.toString();
+
+const formData = reactive<FremData>({
+  id: "",
+  leaveType: "",
+  subject: "",
+  name: "",
+  Date: "",
+  status: "",
+  quotaSick: "",
+  leaveSick: "",
+  quotaRemaining: "",
+  notification: "",
+  requesterPosition: "",
+  requesterLevel: "",
+  requesterBeUnder: "",
+  writeAt: "",
+  leaveSince: "",
+  leaveTo: "",
+  leaveNumber: 0,
+  leaveDayType: "",
+  leaveLast: "",
+  phoneNumber: "",
+  address: "",
+  detail: "",
+  document: null,
+  nameWife: "",
+  dateOfBirth: "",
+  accumulatedHolidays: 0,
+  currentHolidays: 0,
+});
+
+onMounted(() => {
+  showLoader();
+  if (paramsId) {
+    fecthDetailLeave(paramsId);
+  }
+});
+
+function fecthDetailLeave(paramsId: string) {
+  const dataAPI = [
+    {
+      id: "00000000-0000-0000-0000-000000000001",
+      leaveType: "leave5",
+      name: "นายกัณฐิมา  กาฬสินธ์ุ",
+      Date: new Date("2023-11-03"),
+      status: "NEW",
+      quotaSick: "10",
+      leaveSick: "5",
+      quotaRemaining: "5",
+      notification: "สำนักงาน",
+      requesterPosition: "รองหัวหน้า",
+      requesterLevel: "ทั่วไป",
+      requesterBeUnder: "กรุงเทพมหานนคร",
+      writeAt: "บ้าน",
+      leaveSince: new Date("2023-11-05"),
+      leaveTo: new Date("2023-11-08"),
+      leaveNumber: 3,
+      leaveDayType: "allday",
+      leaveLast: new Date("2023-10-08"),
+      phoneNumber: "095-123467",
+      address: "ที่อยู่ที่ติดต่อได้ระหว่างลา",
+      detail: "รายละเอียดการลา",
+      document: null,
+      nameWife: "",
+      dateOfBirth: null,
+      accumulatedHolidays: 5,
+      currentHolidays: 10,
+    },
+    {
+      id: "00000000-0000-0000-0000-000000000002",
+      leaveType: "leave2",
+      name: "นายนครชัย วันดี",
+      Date: new Date("2023-11-01"),
+      status: "APPROVE",
+      quotaSick: "15",
+      leaveSick: "5",
+      quotaRemaining: "10",
+      notification: "หัวหน้างาน",
+      requesterPosition: "รองหัวหน้า",
+      requesterLevel: "ทั่วไป",
+      requesterBeUnder: "กรุงเทพมหานนคร",
+      writeAt: "บ้าน",
+      leaveSince: new Date("2023-11-05"),
+      leaveTo: new Date("2023-11-08"),
+      leaveNumber: 4,
+      leaveDayType: "halfmorning",
+      leaveLast: new Date("2023-10-08"),
+      phoneNumber: "095-123467",
+      address: "ที่อยู่ที่ติดต่อได้ระหว่างลา",
+      detail: "รายละเอียดการลา",
+      document: null,
+      nameWife: "",
+      dateOfBirth: null,
+      accumulatedHolidays: 0,
+      currentHolidays: 0,
+    },
+    {
+      id: "00000000-0000-0000-0000-000000000003",
+      leaveType: "leave3",
+      name: "นายกัณฐิมา  กาฬสินธ์ุ",
+      Date: new Date("2023-11-02"),
+      status: "PENDING",
+      quotaSick: "10",
+      leaveSick: "5",
+      quotaRemaining: "5",
+      notification: "หัวหน้างาน",
+      requesterPosition: "รองหัวหน้า",
+      requesterLevel: "ทั่วไป",
+      requesterBeUnder: "กรุงเทพมหานนคร",
+      writeAt: "บ้าน",
+      leaveSince: new Date("2023-11-05"),
+      leaveTo: new Date("2023-11-08"),
+      leaveNumber: 5,
+      leaveDayType: "halfafternoon",
+      leaveLast: new Date("2023-10-08"),
+      phoneNumber: "095-123467",
+      address: "ที่อยู่ที่ติดต่อได้ระหว่างลา",
+      detail: "รายละเอียดการลา",
+      document: null,
+      nameWife: "",
+      dateOfBirth: null,
+      accumulatedHolidays: 0,
+      currentHolidays: 0,
+    },
+    {
+      id: "00000000-0000-0000-0000-000000000004",
+      leaveType: "leave4",
+      name: "นายปิยรมย์ ศิริธาราฟ",
+      Date: new Date("2023-11-01"),
+      status: "PENDING",
+      quotaSick: "10",
+      leaveSick: "5",
+      quotaRemaining: "5",
+      notification: "หัวหน้างาน",
+      requesterPosition: "รองหัวหน้า",
+      requesterLevel: "ทั่วไป",
+      requesterBeUnder: "กรุงเทพมหานนคร",
+      writeAt: "บ้าน",
+      leaveSince: new Date("2023-11-05"),
+      leaveTo: new Date("2023-11-08"),
+      leaveNumber: 6,
+      leaveDayType: "halfafternoon",
+      leaveLast: new Date("2023-10-08"),
+      phoneNumber: "095-123467",
+      address: "ที่อยู่ที่ติดต่อได้ระหว่างลา",
+      detail: "รายละเอียดการลา",
+      document: null,
+      nameWife: "นางแก้ว ศิริธาราฟ",
+      dateOfBirth: new Date("2023-11-10"),
+      accumulatedHolidays: 0,
+      currentHolidays: 0,
+    },
+  ];
+  const data = dataAPI.filter((e: any) => e.id === paramsId);
+
+  data.map((e: any) => {
+    formData.id = e.id;
+    formData.leaveType = e.leaveType;
+
+    formData.subject = e.leaveType
+      ? stores.convertLeave(e.leaveType) || ""
+      : null;
+    formData.name = e.name;
+    formData.Date = e.Date ? date2Thai(e.Date) : null;
+    formData.status = e.status;
+    formData.quotaSick = e.quotaSick;
+    formData.leaveSick = e.leaveSick;
+    formData.quotaRemaining = e.quotaRemaining;
+    formData.notification = e.notification;
+    formData.requesterPosition = e.requesterPosition;
+    formData.requesterLevel = e.requesterLevel;
+    formData.requesterBeUnder = e.requesterBeUnder;
+    formData.writeAt = e.writeAt;
+    formData.leaveSince = e.leaveSince ? date2Thai(e.leaveSince) : null;
+    formData.leaveTo = e.leaveTo ? date2Thai(e.leaveTo) : null;
+    formData.leaveNumber = e.leaveNumber;
+    formData.leaveDayType = e.leaveDayType
+      ? stores.convertLeaveDaytype(e.leaveDayType) || ""
+      : null;
+    formData.leaveLast = e.leaveLast ? date2Thai(e.leaveLast) : null;
+    formData.phoneNumber = e.phoneNumber;
+    formData.address = e.address;
+    formData.detail = e.detail;
+    formData.document = e.document;
+    formData.nameWife = e.nameWife;
+    formData.dateOfBirth = e.dateOfBirth ? date2Thai(e.dateOfBirth) : null;
+    formData.accumulatedHolidays = e.accumulatedHolidays;
+    formData.currentHolidays = e.currentHolidays;
+  });
+
+  // setTimeout(() => {
+
+  checkLeaveType(formData.leaveType ? formData.leaveType : "");
+  hideLoader();
+  // }, 1000);
+}
+const checkForm = ref<string>("");
+function checkLeaveType(type: string) {
+  if (type === "leave1" || type === "leave2" || type === "leave3") {
+    checkForm.value = "FormLeave";
+  } else if (type === "leave4") {
+    checkForm.value = "FormChildbirth";
+  } else if (type === "leave5") {
+    checkForm.value = "FormHoliday";
+  }
+}
 
 function clickSave() {
-  dialogConfirm($q, () => saveData());
+  dialogConfirm(
+    $q,
+    () => console.log("save"),
+    "ยืนยันการอนุมัติ",
+    "ต้องการยืนยันการอนุมัติใช่หรือไม่ ?"
+  );
 }
-function saveData() {
-  console.log("save");
+function clickReject() {
+  dialogConfirm(
+    $q,
+    () => console.log("reject"),
+    "ยืนยันการดำเนินการ",
+    "ต้องการยืนยันการดำเนินการนี้ใช่หรือไม่ ?"
+  );
 }
 </script>
 <template>
@@ -30,7 +259,7 @@ function saveData() {
         class="q-mr-sm"
         @click="router.push(`/leave-list`)"
       />
-      รายละเอียดการลาของ นายปิยรมย์ ศิริธาราฟ
+      รายละเอียดการลาของ {{ formData.name }}
     </div>
     <div>
       <q-btn
@@ -64,7 +293,13 @@ function saveData() {
               <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
                 <div class="col-12 row">
                   <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
-                  <div class="col text-primary">ลาป่วย</div>
+                  <div class="col text-primary">
+                    {{
+                      stores.convertLeave(
+                        formData.leaveType ? formData.leaveType : ""
+                      )
+                    }}
+                  </div>
                 </div>
                 <div class="col-12 row">
                   <div class="col-xs-5 col-sm-3 text-grey-8">
@@ -81,7 +316,7 @@ function saveData() {
                       class="col-12 items-center row q-px-md q-py-sm"
                     >
                       <div class="text-h6 text-weight-bold text-blue-10">
-                        10
+                        {{ formData.quotaSick }}
                       </div>
                       <div class="col-12 text-subtitle2 text-weight-regular">
                         โควต้า<span class="gt-xs">ลาป่วย</span>
@@ -94,7 +329,7 @@ function saveData() {
                       class="col-12 items-center row q-px-md q-py-sm"
                     >
                       <div class="text-h6 text-weight-bold text-light-blue-6">
-                        8
+                        {{ formData.leaveSick }}
                       </div>
                       <div class="col-12 text-subtitle2 text-weight-regular">
                         ลา<span class="gt-xs">ป่วยไป</span>แล้ว
@@ -107,7 +342,7 @@ function saveData() {
                       class="col-12 items-center row q-px-md q-py-sm"
                     >
                       <div class="text-h6 text-weight-bold text-indigo-7">
-                        2
+                        {{ formData.quotaRemaining }}
                       </div>
                       <div class="col-12 text-subtitle2 text-weight-regular">
                         คงเหลือ<span class="gt-xs">โควต้า</span>
@@ -121,63 +356,22 @@ function saveData() {
         </div>
         <div class="row q-col-gutter-md col-12">
           <div class="col-xs-12 col-sm-6 row">
+            <!-- card ซ้าย -->
             <q-card flat bordered class="col-12">
-              <q-card-section>
-                <div class="q-pa-md q-gutter-md">
-                  <div class="row">
-                    <div class="col text-grey-8">เขียนที่</div>
-                    <div class="col">บ้าน</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">รับเงินเดือน</div>
-                    <div class="col">รับเงินเดือน</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">เขียนที่</div>
-                    <div class="col">บ้าน</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">รับเงินเดือน</div>
-                    <div class="col">รับเงินเดือน</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">วัน เดือน ปีเริ่มต้น</div>
-                    <div class="col">14 ก.ค. 2556</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">วัน เดือน ปีเริ่มสิ้นสุด</div>
-                    <div class="col">15 ก.ค. 2556</div>
-                  </div>
-                </div>
-              </q-card-section>
+              <FormMain :data="formData" />
             </q-card>
           </div>
           <div class="col-xs-12 col-sm-6 row">
             <q-card flat bordered class="col-12">
-              <q-card-section>
-                <div class="q-pa-md q-gutter-md">
-                  <div class="row">
-                    <div class="col text-grey-8">จำนวนวันที่ลา</div>
-                    <div class="col">1</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">สถานที่ติดต่อขณะลา</div>
-                    <div class="col">สถานที่ติดต่อขณะลา</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
-                    <div class="col">095-123467</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">สถานะการพิจารณา</div>
-                    <div class="col">ขอยกเลิก</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">เอกสารแบบ</div>
-                    <div class="col">ไม่พบเอกสาร</div>
-                  </div>
-                </div>
-              </q-card-section>
+              <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
+              <FormChildbirth
+                v-else-if="checkForm === 'FormChildbirth'"
+                :data="formData"
+              />
+              <FormHoliday
+                v-else-if="checkForm === 'FormHoliday'"
+                :data="formData"
+              />
             </q-card>
           </div>
         </div>
@@ -185,7 +379,7 @@ function saveData() {
     </div>
     <q-separator />
     <div class="row q-pa-md q-gutter-md justify-end">
-      <q-btn unelevated color="orange-5" label="ไม่อนุมัติ"
+      <q-btn unelevated color="orange-5" label="ไม่อนุมัติ" @click="clickReject"
         ><q-tooltip>ไม่อนุมัติ</q-tooltip>
       </q-btn>
       <q-btn unelevated color="primary" label="อนุมัติ" @click="clickSave"

src/modules/09_leave/components/2_Leave/formDetail/formChildbirth.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.writeAt }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveSince }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveTo }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ชื่อภรรยา</div>
+        <div class="col">{{ props.data.nameWife }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">วันที่คลอด</div>
+        <div class="col">{{ props.data.dateOfBirth }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+        <div class="col">{{ props.data.phoneNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+        <div class="col">{{ props.data.address }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.detail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">ไม่พบเอกสาร</div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>

src/modules/09_leave/components/2_Leave/formDetail/formHoliday.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.writeAt }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
+        <div class="col">{{ props.data.accumulatedHolidays }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
+        <div class="col">{{ props.data.currentHolidays }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveSince }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveTo }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8"></div>
+        <div class="col">{{ props.data.leaveDayType }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+        <div class="col">{{ props.data.phoneNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+        <div class="col">{{ props.data.address }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.detail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">ไม่พบเอกสาร</div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>

src/modules/09_leave/components/2_Leave/formDetail/formLeave.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.writeAt }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveSince }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveTo }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8"></div>
+        <div class="col">{{ props.data.leaveDayType }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">
+          ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
+        </div>
+        <div class="col">{{ props.data.leaveLast }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+        <div class="col">{{ props.data.phoneNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+        <div class="col">{{ props.data.address }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.detail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">ไม่พบเอกสาร</div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>

src/modules/09_leave/components/2_Leave/formDetail/formMain.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+console.log(props);
+</script>
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.Date }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.subject }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรียน</div>
+        <div class="col">{{ props.data.notification }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ชื่อผู้ยื่นขอ</div>
+        <div class="col">{{ props.data.name }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ตำแหน่งผู้ยืนขอ</div>
+        <div class="col">{{ props.data.requesterPosition }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ระดับผู้ยืนขอ</div>
+        <div class="col">{{ props.data.requesterLevel }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">สังกัดผู้ยืนขอ</div>
+        <div class="col">{{ props.data.requesterBeUnder }}</div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>