hrms-mgt/src/modules/06_retirement/components/resign/ResignByid.vue

<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)"
    />
    รายละเอียดการลาออกของ
    {{ dataDetail.firstName + "  " + dataDetail.lastName }}
  </div>
  <q-card bordered class="row col-12 text-dark">
    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
      <div class="q-pl-sm text-weight-bold text-subtitle2">
        {{ dataDetail.firstName + "  " + dataDetail.lastName }}
      </div>
      <q-space />
      <q-btn
        outline
        color="blue"
        dense
        icon-right="mdi-open-in-new"
        class="q-px-sm"
        label="ดูข้อมูลทะเบียนประวัติ"
        @click="redirectToRegistry(dataDetail.profileId)"
      />
    </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-3 col-sm-2 col-md-1 row">
          <q-img src="@/assets/avatar_user.jpg" />
        </div>
        <div class="col-xs-6 col-sm-3 row items-center">
          <div class="col-12 q-pl-md">
            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
            <div class="col-12 text-detail">{{ dataDetail.positionLine }}</div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-2 row items-center">
          <div class="col-12">
            <div class="col-12 text-top">ระดับ</div>
            <div class="col-12 text-detail">{{ dataDetail.positionLevel }}</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">
              {{ dataDetail.organizationOrganization }}
            </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">
              <q-icon
                size="20px"
                v-if="dataDetail.status == 'PENDING'"
                name="mdi-timer-sand"
                color="deep-orange"
              />
              <q-icon
                size="20px"
                v-else-if="dataDetail.status == 'APPROVE'"
                name="mdi-check"
                color="teal"
              />
              <q-icon size="20px" v-else name="mdi-close" color="red" />
              {{ statusName(dataDetail.status) }}
            </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>
      <q-space />
      <div class="q-gutter-x-sm" v-if="dataDetail.status === 'PENDING'">
        <q-btn
          outline
          color="primary"
          dense
          icon-right="check"
          class="q-px-sm"
          label="อนุมัติ"
          @click="popUp('pass')"
        />
        <q-btn
          outline
          color="red"
          dense
          icon-right="close"
          class="q-px-sm"
          label="ยับยั้ง"
          @click="popUp('passNot')"
        />
      </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 col-sm-3 row items-center">
          <div class="col-12">
            <div class="col-12 text-top">สถานที่ยื่นขอลาออกจากราชการ</div>
            <div class="col-12 text-detail">{{ dataDetail.location }}</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">
              {{ date2Thai(dataDetail.sendDate) }}
            </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">{{ dataDetail.reason }}</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">
              {{ date2Thai(dataDetail.activeDate) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </q-card>

  <!-- <q-dialog v-model="modalPass" persistent>
    <q-card style="width: 800px">
      <q-form ref="myForm">
        <DialogHeader
          :title="`${modalPass ? 'อนุมัติ' : 'ยับยั้ง'}`"
          :close="clickClose"
        />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="col-xs-12 col-sm-12 col-md-12">
            <q-input
              hide-bottom-space
              dense
              lazy-rules
              outlined
              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
              v-model="userNote"
              :label="`${'กรอกเหตุผล'}`"
              type="textarea"
            />
          </div>
        </q-card-section>
        <q-separator />
        <DialogFooter
          :editvisible="true"
          :save="modalPass ? savePass : savePassNot"
        />
      </q-form>
    </q-card>
  </q-dialog>
  <q-dialog v-model="modalPassNot" persistent>
    <q-card style="width: 800px">
      <q-form ref="myForm">
        <DialogHeader
          :title="`${modalPass ? 'อนุมัติ' : 'ยับยั้ง'}`"
          :close="clickClose"
        />
        <q-separator />
        <q-card-section class="q-p-sm">
          <div class="col-xs-12 col-sm-12 col-md-12">
            <q-input
              hide-bottom-space
              dense
              outlined
              lazy-rules
              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
              v-model="userNote"
              :label="`${'กรอกเหตุผล'}`"
              type="textarea"
            />
          </div>
        </q-card-section>
        <q-separator />
        <DialogFooter
          :editvisible="true"
          :save="modalPass ? savePass : savePassNot"
        />
      </q-form>
    </q-card>
  </q-dialog> -->
</template>
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { useQuasar, QForm } from "quasar";
import { ref, onMounted } from "vue";
// import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
// import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

const router = useRouter();
const route = useRoute();
const mixin = useCounterMixin();
const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
const $q = useQuasar();
const id = ref<string>(route.params.id.toString());

const dataDetail = ref<any>([]);

// const modalPass = ref<boolean>(false);
// const modalPassNot = ref<boolean>(false);
onMounted(() => {
  fetchData(id.value);
});
const fetchData = async (id: string) => {
  showLoader();
  await http
    .get(config.API.resingByid(id))
    .then((res: any) => {
      dataDetail.value = res.data.result;
      // console.log(dataDetail.value);
    })
    .catch((e) => {
      console.log(e);
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
const popUp = (action: "pass" | "passNot") => {
  if (action === "pass") {
    $q.dialog({
      title: "ยืนยันการอนุมัติการลาออก",
      message: "ต้องการยืนยันอนุมัติการลาออกนี้ใช่หรือไม่?",
      cancel: {
        flat: true,
        color: "negative",
      },
      persistent: true,
    }).onOk(async () => {
      confirmpopUp();
    });
  } else if (action === "passNot") {
    $q.dialog({
      title: "ยืนยันการยับยั้งการลาออก",
      message: "ต้องการยืนยันการยับยั้งการลาออกนี้ใช่หรือไม่?",
      cancel: {
        flat: true,
        color: "negative",
      },
      persistent: true,
    }).onOk(async () => {
      rejectpopUp();
    });
  }
};
const confirmpopUp = async () => {
  await http
    .get(config.API.resignConfirm(id.value))
    .then(() => {
      console.log("ยืนยัน");
      success($q, "บันทึกสำเร็จ");
    })
    .catch((e) => {
      console.log(e);
      messageError($q, e);
    })
    .finally(() => {
      fetchData(id.value);
    });
};
const rejectpopUp = async () => {
  console.log("ยกเลิก");
  await http
    .get(config.API.resignReject(id.value))
    .then(() => {
      success($q, "บันทึกสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      fetchData(id.value);
    });
};
const redirectToRegistry = (id: string) => {
  router.push(`/registry/${id}`);
};
const statusName = (val: string) => {
  switch (val) {
    case "PENDING":
      return "รอดำเนินการ";
    case "APPROVE":
      return "อนุมัติ";
    case "REJECT":
      return "ยับยั้ง";
  }
};
// const clickClose = () => {
//   userNote.value = "";
//   modalPass.value = false;
//   modalPassNot.value = false;
// };
// const savePass = () => {
//   $q.dialog({
//     title: "ยืนยันการขอลาออก",
//     message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
//     cancel: {
//       flat: true,
//       const: "negative",
//     },
//     persistent: true,
//   })
//     .onOk(() => {
//       modalPass.value = false;
//       console.log("----MSG---- :", userNote.value);
//       console.log("passSave (close)");
//       userNote.value = "";
//     })
//     .onCancel(() => {})
//     .onDismiss(() => {});
// };
// const savePassNot = () => {
//   $q.dialog({
//     title: "ยืนยันการขอลาออก",
//     message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
//     cancel: {
//       flat: true,
//       const: "negative",
//     },
//     persistent: true,
//   })
//     .onOk(() => {
//       modalPass.value = false;
//       console.log("----MSG---- :", userNote.value);
//       console.log("passSaveNot (close)");
//       userNote.value = "";
//     })
//     .onCancel(() => {})
//     .onDismiss(() => {});
// };
</script>
<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;
}
.custom-header-table {
  max-height: 64vh;

  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>