"Refactoring code module 05_placement 01_Main,02_transferMain,03_receiveMain

src/modules/05_placement/components/Transfer/TransferDetail.vue

@@ -0,0 +1,691 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReport from "@/plugins/genreport";
+
+import type { QTableProps, QForm } from "quasar";
+import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
+import type {
+  TypeFile,
+  ResponseDataDetail,
+  rowFile,
+} from "@/modules/05_placement/interface/response/Transfer";
+
+import CardProfile from "@/components/CardProfile.vue";
+import { tokenParsed } from "@/plugins/auth";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogConfirm,
+} = mixin;
+
+const transferId = ref<string>(route.params.id as string); //Id รายการขอโอน
+const roleAdmin = ref<boolean>(false); //admin
+const edit = ref<boolean>(false); //การแก่ไข
+const dataProfile = ref<DataProfile>(); //ข้อมูลส่วนตัว
+
+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 rows = ref<TypeFile[]>([]); //รายการเอกสารเพิ่มเติม
+//ข้อมูลการขอโอน
+const responseData = ref<ResponseDataDetail>({
+  profileId: "",
+  avataPath: "",
+  createdAt: new Date(),
+  date: new Date(),
+  id: "",
+  organization: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  reason: "",
+  salary: 0,
+  status: "",
+  fullname: "",
+});
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fileName",
+    align: "left",
+    label: "ชื่อไฟล์",
+    sortable: true,
+    field: "fileName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "btnMicrosoft",
+    align: "right",
+    label: "ปุ่ม",
+    sortable: true,
+    field: "btnMicrosoft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+//รายากรเอกสารดาวน์โหลด
+const rowsFileDownload = ref<rowFile[]>([
+  {
+    no: 21,
+    fileName:
+      "คําร้องขอโอนไปถึงส่วนราชการอื่นนอก กรุงเทพมหานครที่ข้าราชการประสงค์ขอโอน",
+    pathName: "",
+  },
+  {
+    no: 22,
+    fileName:
+      "หนังสือแจ้งสํานักงานการเจ้าหน้าที่ สํานักปลัดกรุงเทพมหานคร ให้ทราบตําแหน่งและตําแหน่งเลขที่ที่ดําเนินการให้โอน",
+    pathName: "",
+  },
+  {
+    no: 23,
+    fileName:
+      "หนังสือยินยอมให้โอนและวันที่พร้อมจะให้โอนไปยัง หน่วยงานที่รับโอน",
+    pathName: "",
+  },
+  {
+    no: 24,
+    fileName:
+      "หนังสือแจ้งสหกรณ์ออมทรัพย์กรุงเทพมหานครเพื่อขอ ตรวจสอบภาระหนี้สินสหกรณ์ออมทรัพย์",
+    pathName: "",
+  },
+  {
+    no: 25,
+    fileName:
+      "หนังสือถึงสํานักงานการเจ้าหน้าที่ สํานักปลัดกรุงเทพมหานครเพื่อขอตรวจสอบพฤติการณ์ทางวินัย และภาระหนี้สินสวัสดิการ",
+    pathName: "",
+  },
+  {
+    no: 26,
+    fileName:
+      "หนังสือถึงสถาบันพัฒนาข้าราชการกรุงเทพมหานครเพื่อขอตรวจสอบเรื่องภาระผูกพันการรับทุนและการลา ศึกษาต่อกับทางกรุงเทพมหานคร",
+    pathName: "",
+  },
+]);
+
+/**
+ * ฟังก์ชันดึงข้อมูลรายละเอียดการขอโอนตาม ID ของรายการโอน(transferId)
+ *
+ */
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.transferId(transferId.value))
+    .then(async (res) => {
+      const data = await res.data.result;
+      dataProfile.value = res.data.result as unknown as DataProfile;
+      let list: TypeFile[] = [];
+      if (data.docs.length > 0) {
+        data.docs.map((doc: TypeFile) => {
+          list.push({
+            pathName: doc.pathName ?? "",
+            fileName: doc.fileName ?? "",
+          });
+        });
+      }
+      rows.value = list;
+      responseData.value.profileId = data.profileId;
+      responseData.value.createdAt = data.createdAt;
+      responseData.value.date =
+        data.date !== null ? new Date(data.date) : new Date();
+      responseData.value.id = data.id ?? "";
+      responseData.value.organization = data.organization ?? "";
+      responseData.value.organizationPositionOld =
+        data.organizationPositionOld ?? "";
+      responseData.value.positionLevelOld = data.positionLevelOld ?? "";
+      responseData.value.positionNumberOld = data.positionNumberOld ?? "";
+      responseData.value.positionTypeOld = data.positionTypeOld ?? "";
+      responseData.value.reason = data.reason ?? "";
+      responseData.value.salary = data.salary !== null ? data.salary : 0;
+      responseData.value.status = data.status ?? "";
+      responseData.value.avataPath = data.avataPath ?? "";
+      responseData.value.fullname = `${data.firstName ?? "-"} ${
+        data.lastName ?? "-"
+      }`;
+
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.positionNumberOld ?? "";
+      salary.value = data.salary ?? 0;
+      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();
+    });
+}
+
+/**
+ * ฟังก์ชันดาวน์โหลดเอกสาร
+ * @param no ลำดับรายการ
+ * @param type นามสกุลไฟล์ที่ต้องการโหลด
+ * @param fileName ชื่อไฟล์ที่ต้องการโหลด
+ */
+async function fileDownload(no: number, type: string, fileName: string) {
+  showLoader();
+  await http
+    .get(config.API.reportTransferFile(no, type, transferId.value))
+    .then(async (res) => {
+      const data = await res.data.result;
+      await genReport(data, fileName, type);
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันยืนยันการส่งคำร้องไปยัง สกจ.
+ */
+function confirmMessage() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .get(config.API.transferConfirmId(transferId.value))
+        .then(async () => {
+          await getData();
+          success($q, "ส่งคำร้องข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          hideLoader();
+        });
+    },
+    "ต้องการยืนยันส่งคำร้องไปยัง สกจ หรือไม่?",
+    "ข้อมูลจะถูกนำส่งคำร้องไปยัง สกจ ทันที"
+  );
+}
+
+/**
+ * ฟังก์ชันยืนยันการบันทึกการแก้ไขข้อมูล
+ */
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const body = {
+        organization: organization.value,
+        reason: reason.value,
+        organizationPositionOld: organizationPositionOld.value,
+        date: date.value,
+        positionTypeOld: positionTypeOld.value,
+        positionLevelOld: positionLevelOld.value,
+        positionNumberOld: posNo.value,
+        amountOld: salary.value,
+      };
+      await http
+        .put(config.API.transferId(transferId.value), body)
+        .then(async () => {
+          await getData();
+          await success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+          edit.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ต้องการแก้ไขข้อมูลหรือไม่?",
+    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+  );
+}
+
+/**
+ * ฟังก์ชันปิดการแก้ไขข้อมูล
+ */
+async function cancel() {
+  await getData();
+  edit.value = false;
+}
+
+/**
+ * ฟังก์ชัน
+ * @param val ค่าการแก้ไข
+ */
+function getClass(val: boolean) {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+}
+
+/**
+ * เมื่อ Componets ถูกเรียกใช้งาน
+ *
+ * เช็ต role ผู้ใช่งาน
+ * เรียก getData ดึงข้อมูลรายละเอียดการขอโอน
+ */
+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.push(`/placement/transfer`)"
+    />
+    รายละเอียดการขอโอนของ{{ responseData.fullname }}
+  </div>
+
+  <CardProfile :data="dataProfile as DataProfile" />
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
+      <q-space />
+      <q-btn
+        v-if="!roleAdmin && responseData.status != 'APPROVE'"
+        outline
+        color="primary"
+        dense
+        icon-right="arrow_forward"
+        class="q-px-sm"
+        label="ส่งคำร้องไปยัง สกจ."
+        @click="confirmMessage"
+      />
+    </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 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organization }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">เหตุผลที่ขอโอน</div>
+            <div class="col-12 text-detail">
+              {{ responseData.reason }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="col-12">
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        row-key="fileName"
+        hide-header
+        hide-bottom
+      >
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="fileName" :props="props">
+              {{ props.row.fileName }}
+            </q-td>
+            <q-td key="btnMicrosoft" :props="props">
+              <q-btn
+                type="a"
+                target="_blank"
+                :href="props.row.pathName"
+                flat
+                dense
+                round
+                color="red"
+                icon="picture_as_pdf"
+              >
+                <q-tooltip>ไฟล์ PDF</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">เอกสารดาวน์โหลด</div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="col-12">
+      <d-table
+        :rows="rowsFileDownload"
+        :columns="columns"
+        row-key="fileName"
+        hide-header
+        hide-bottom
+      >
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="fileName" :props="props">
+              {{ props.row.fileName }}
+            </q-td>
+            <q-td key="btnMicrosoft" :props="props">
+              <q-btn
+                flat
+                dense
+                round
+                color="red"
+                icon="picture_as_pdf"
+                @click="fileDownload(props.row.no, 'pdf', props.row.fileName)"
+              >
+                <q-tooltip>ไฟล์ PDF</q-tooltip>
+              </q-btn>
+              <q-btn
+                flat
+                dense
+                round
+                color="blue"
+                icon="mdi-file-word"
+                @click="fileDownload(props.row.no, 'docx', props.row.fileName)"
+              >
+                <q-tooltip>ไฟล์ WORD</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <q-form
+      class="col-12"
+      greedy
+      @submit.prevent
+      @validation-success="onSubmit"
+    >
+      <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 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"
+            v-if="
+              !(
+                responseData.status == 'REPORT' || responseData.status == 'DONE'
+              ) && checkPermission($route)?.attrIsUpdate
+            "
+          />
+        </div>
+        <div class="q-gutter-sm" v-else>
+          <q-btn
+            outline
+            color="public"
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            type="submit"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="cancel()"
+          />
+        </div>
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="row q-pa-md">
+        <div class="col-12">
+          <div class="row bg-white q-col-gutter-y-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) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                  hide-bottom-space
+                  :label="`${'ตำแหน่ง/สังกัด'}`"
+                  type="textarea"
+                />
+              </div>
+            </div>
+            <div class="col-12">
+              <div class="row q-col-gutter-x-xs">
+                <div class="col-xs-6 col-sm-3">
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    v-model="positionTypeOld"
+                    :rules="[(val) => !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`]"
+                    hide-bottom-space
+                    :label="`${'ประเภทตำแหน่ง'}`"
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-3">
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    v-model="positionLevelOld"
+                    :rules="[(val) => !!val || `${'กรุณากรอกระดับตำแหน่ง'}`]"
+                    hide-bottom-space
+                    :label="`${'ระดับตำแหน่ง'}`"
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-3">
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    v-model="posNo"
+                    :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                    hide-bottom-space
+                    :label="`${'เลขที่'}`"
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-3">
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    v-model="salary"
+                    dense
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    hide-bottom-space
+                    :label="`${'เงินเดือน'}`"
+                    :rules="[(val:number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                    lazy-rules
+                    mask="###,###,###,###"
+                    reverse-fill-mask
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12"><q-separator /></div>
+
+            <div class="col-12">
+              <div class="row q-col-gutter-x-xs">
+                <div class="col-xs-6 col-sm-6">
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    v-model="organization"
+                    :rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
+                    hide-bottom-space
+                    :label="`${'โอนไปสังกัด'}`"
+                  />
+                </div>
+                <div class="col-xs-6 col-sm-6">
+                  <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
+                        :borderless="!edit"
+                        :readonly="!edit"
+                        :model-value="date !== null ? date2Thai(date) : null"
+                        :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                        hide-bottom-space
+                        :label="`${'ตั้งแต่วัน'}`"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            :style="
+                              edit
+                                ? 'color: var(--q-primary)'
+                                : 'color: var(--q-grey)'
+                            "
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+              </div>
+            </div>
+
+            <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>
+      </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>