hrms-mgt/src/modules/04_registryNew/views/detailView.vue

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import axios from "axios";
import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
import type { DataPerson } from "@/modules/04_registryNew/interface/response/Main";
import avatar from "@/assets/avatar_user.jpg";
import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";
import UploadFile from "@/modules/11_discipline/components/UploadFile.vue";
import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Profile";
import DialogHeader from "@/components/DialogHeader.vue";
/** ถึงเเก่กรรม */
const dialogPassaway = ref<boolean>(false);
const placeDeathCertificate = ref("");
const deathCertificateNo = ref("");
const dateDeath = ref<Date>(new Date());
const filePassaway = ref<any>(null);
const reasonDeath = ref("");

const mixin = useCounterMixin();
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const {
  dialogRemove,
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
  date2Thai,
  dateToISO,
} = mixin;

const profileId = ref<string>(route.params.id.toString());
const formDetail = ref<ResponseObject>();
const itemsMenu = ref<DataOption[]>([
  {
    id: "1",
    name: "ช่วยราชการ",
  },
  {
    id: "2",
    name: "ส่งตัวกลับ",
  },
  {
    id: "3",
    name: "แต่งตั้ง-เลื่อน-ย้าย",
  },
  {
    id: "4",
    name: "ถึงแก่กรรม",
  },
  {
    id: "5",
    name: "ให้ออกจากราชการ",
  },
  {
    id: "6",
    name: "อื่นๆ",
  },
]);

const uploadUrl = ref<string>("");
const fileName = ref<string>("");
const profilePicture = ref<string>("");
const profileFile = ref();
const input = document.createElement("input");
input.type = "file";
input.accept = ".jpg,.png,.tif,.pic";

input.addEventListener("change", (e) => {
  profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
  uploadProfile();
});

function selectFile() {
  input.click();
}

async function uploadProfile() {
  await http
    .post(config.API.file("ทะเบียนประวัติ", "โปรไฟล์", profileId.value), {
      replace: true,
      fileList: [
        {
          fileName: fileName.value,
        },
      ],
    })
    .then(async (res) => {
      uploadUrl.value = res.data[fileName.value].uploadUrl;
      uploadFileURL(uploadUrl.value, profileFile.value);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

async function uploadFileURL(uploadUrl: string, file: any) {
  showLoader();
  await axios
    .put(uploadUrl, file, {
      headers: {
        "Content-Type": file.type,
      },
    })
    .then(() => {
      fetchProfile(profileId.value);
      success($q, "อัปโหลดไฟล์สำเร็จ");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

async function fetchProfile(id: string) {
  showLoader();
  await http
    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
    .then(async (res) => {
      profilePicture.value = res.data.downloadUrl;
    })
    .catch(() => {
      profilePicture.value = avatar;
    })
    .finally(() => {
      hideLoader();
    });
}

async function fetchDataPersonal() {
  showLoader();
  await http
    .get(config.API.registryNewByProfileId(profileId.value))
    .then((res) => {
      formDetail.value = res.data.result;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

function onClickDownloadKp7(type: string) {
  if (type === "FULL") {
    window.open(config.API.profileReportId(profileId.value));
  } else if (type === "SHORT") {
    window.open(config.API.profileKp7ShortId(profileId.value));
  }
}

/** ช่วยราชการ */
async function helpPost() {
  const formData = new FormData();
  formData.append("id", profileId.value);
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.placemenHelpGov, formData)
      .then(() => {
        success($q, "ดำเนินการสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
        router.push("/help-government");
      });
  });
}

/** ส่งตัวกลับ */
async function repatriationPost() {
  const formData = new FormData();
  formData.append("id", profileId.value);
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.placemenRepatriation, formData)
      .then(() => {
        success($q, "ดำเนินการสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
        router.push("/repatriate");
      });
  });
}

/** แต่งตังเลื่อน */
async function appointPost() {
  const formData = new FormData();
  formData.append("id", profileId.value);
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.placemenAppointment, formData)
      .then(() => {
        success($q, "ดำเนินการสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
        router.push("/appoint-promote");
      });
  });
}

/** ถึงเเก่กรรม */
async function clickPassaway() {
  dialogPassaway.value = true;
}

/** ให้ออกจากราชการ */
async function outPost() {
  const formData = new FormData();
  formData.append("id", profileId.value);
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.retirementOut, formData)
      .then(() => {
        success($q, "ดำเนินการสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
        router.push("/dismiss-order");
      });
  });
}

/** อื่นๆ */
async function otherPost() {
  const formData = new FormData();
  formData.append("id", profileId.value);
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .post(config.API.placemenOther, formData)
      .then(() => {
        success($q, "ดำเนินการสำเร็จ");
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
        router.push("/other");
      });
  });
}

function closePassaway() {
  dialogPassaway.value = false;
}

async function clickSaveDeceased() {
  const formData = new FormData();
  formData.append("File", filePassaway.value);
  formData.append("Number", deathCertificateNo.value);
  formData.append("Date", dateToISO(dateDeath.value));
  formData.append("Location", placeDeathCertificate.value);
  formData.append("Reason", reasonDeath.value);
  formData.append("ProfileId", profileId.value);

  dialogConfirm($q,()=>{
    showLoader();
      http
        .post(config.API.listDeceased(), formData)
        .then(() => {
          success($q, "บันทึกข้อมูลสำเร็จ");
          router.push("/deceased");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
  })
}

onMounted(async () => {
  fileName.value = `profile-${profileId.value}`;
  fetchProfile(profileId.value);
  fetchDataPersonal();
});
</script>

<template>
  <div class="row items-center q-gutter-sm q-mb-xs">
    <div class="toptitle text-dark row items-center q-py-xs">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      ทะเบียนประวัติ
    </div>
    <q-space />
    <q-btn-dropdown
      size="md"
      rounded
      unelevated
      color="grey-4"
      text-color="red"
      icon="mdi-home-export-outline"
      dropdown-icon="mdi-chevron-down"
    >
      <q-list v-for="(item, index) in itemsMenu" key="index">
        <q-item
          clickable
          @click="
            item.name == 'ช่วยราชการ'
              ? helpPost()
              : item.name == 'ส่งตัวกลับ'
              ? repatriationPost()
              : item.name == 'แต่งตั้ง-เลื่อน-ย้าย'
              ? appointPost()
              : item.name == 'ถึงแก่กรรม'
              ? clickPassaway()
              : item.name == 'ให้ออกจากราชการ'
              ? outPost()
              : item.name == 'อื่นๆ'
              ? otherPost()
              : null
          "
          v-close-popup
        >
          <q-item-section>{{ item.name }}</q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>

    <q-btn
      unelevated
      round
      color="grey-4"
      text-color="primary"
      icon="mdi-file-eye-outline"
      size="md"
    >
      <q-tooltip>ดาวน์ไฟล์</q-tooltip>
      <q-menu>
        <q-list style="min-width: 120px">
          <q-item clickable v-close-popup @click="onClickDownloadKp7('FULL')">
            <q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
          </q-item>
          <q-item clickable v-close-popup @click="onClickDownloadKp7('SHORT')">
            <q-item-section class="text-primary">ประวัติแบบย่อ</q-item-section>
          </q-item>
        </q-list>
      </q-menu>
    </q-btn>
  </div>

  <q-card>
    <div class="column" style="height: 160px">
      <div class="col row items-center">
        <div class="row col-12">
          <div class="col-sm-3 col-md-2"></div>
          <div class="col">
            <div class="col-12 text-primary">
              <h2
                class="title q-ma-none q-pa-none"
                v-if="formDetail && formDetail.firstName && formDetail.lastName"
              >
                {{
                  `${formDetail?.prefix}${formDetail?.firstName} ${formDetail?.lastName}`
                }}
              </h2>
            </div>
            <div class="col-12 subtitle">{{ formDetail?.position }}</div>
          </div>
        </div>
      </div>

      <div class="absolute-center-left q-ml-lg">
        <q-avatar size="130px">
          <img :src="profilePicture" />
        </q-avatar>
        <q-btn
          round
          color="white"
          text-color="primary"
          icon="mdi-pencil-outline"
          style="position: absolute; bottom: 0; right: 0"
          @click="selectFile"
        >
        </q-btn>
      </div>

      <div class="col row items-center bg-teal-1">
        <div class="row col-12">
          <div class="col-sm-3 col-md-2"></div>
          <div class="col-2">
            <div class="col-sm-3 col-md-3">
              <div class="col text-grey-6">ตำแหน่งในสายงาน</div>
              <div class="col">{{ formDetail?.position || "-" }}</div>
            </div>
          </div>
          <div class="col-2">
            <div class="col-sm-3 col-md-3">
              <div class="col text-grey-6">ประเภทตำแหน่ง</div>
              <div class="col">
                {{ formDetail?.posType?.posTypeName || "-" }}
              </div>
            </div>
          </div>
          <div class="col-2">
            <div class="col-sm-3 col-md-3">
              <div class="col text-grey-6">ระดับตำแหน่ง</div>
              <div class="col">
                {{ formDetail?.posLevel?.posLevelName || "-" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </q-card>

  <q-card class="q-mt-md rounded">
    <TabMain />
  </q-card>

  <!-- Dialog แนบใบมรณบัตร -->
  <q-dialog v-model="dialogPassaway" persistent>
    <q-card style="min-width: 600px">
      <q-form ref="myForm">
        <q-card-section class="flex justify-between" style="padding: 0">
          <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
        </q-card-section>

        <q-separator />
        <q-card-section class="q-pa-md row q-col-gutter-sm">
          <q-file
            class="col-12 col-sm-6 col-md-5"
            outlined
            dense
            v-model="filePassaway"
            label="แนบใบมรณบัตร"
            hide-bottom-space
            lazy-rules
            accept=".pdf"
          >
            <q-separator />
            <template v-slot:prepend>
              <q-icon name="attach_file" />
            </template>
          </q-file>
          <q-input
            class="col-12 col-sm-6 col-md-7"
            dense
            outlined
            v-model="deathCertificateNo"
            label="เลขที่ใบมรณบัตร"
          />

          <datepicker
            class="col-12 col-sm-6 col-md-5"
            menu-class-name="modalfix"
            v-model="dateDeath"
            :locale="'th'"
            autoApply
            borderless
            :enableTimePicker="false"
            week-start="0"
          >
            <template #year="{ year }">
              {{ year + 543 }}
            </template>
            <template #year-overlay-value="{ value }">
              {{ parseInt(value + 543) }}
            </template>
            <template #trigger>
              <q-input
                outlined
                dense
                hide-bottom-space
                class="full-width datepicker"
                :model-value="dateDeath != null ? date2Thai(dateDeath) : null"
                :label="`${'วันที่เสียชีวิต'}`"
                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`]"
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    style="color: var(--q-primary)"
                  >
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>

          <q-input
            class="col-12 col-sm-6 col-md-7"
            dense
            outlined
            v-model="placeDeathCertificate"
            label="สถานที่ออกใบมรณบัตร"
          />
          <q-input
            class="col-12"
            dense
            outlined
            v-model="reasonDeath"
            label="เหตุผลการเสียชีวิต"
            type="textarea"
          />
        </q-card-section>

        <q-separator />
        <q-card-actions align="right">
          <q-btn
            unelevated
            label="บันทึก"
            dense
            color="public"
            class="q-px-md"
            @click="clickSaveDeceased"
            :disable="
              filePassaway === null ||
              deathCertificateNo === '' ||
              placeDeathCertificate === '' ||
              reasonDeath === ''
            "
          >
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped>
h2.title {
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 500;
}

.subtitle {
  font-size: 1rem;
  color: #34373c;
}

.absolute-center-left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.rounded {
  border-radius: 10px;
}
</style>