hrms-mgt/src/modules/13_salary/components/DialogInfoMain.vue

<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";

/**
 * importCOmponents
 */
import InfoSalary from "@/modules/13_salary/components/InfoSalary.vue";
import InfoDiscipline from "@/modules/13_salary/components/InfoDiscipline.vue";
import InfoLeave from "@/modules/13_salary/components/InfoLeave.vue";

/**
 * importStore
 */
import { useCounterMixin } from "@/stores/mixin";

/**
 * use
 */
const $q = useQuasar();
const router = useRouter();
const { showLoader, hideLoader, messageError } = useCounterMixin();

/**
 *  props
 */
const modal = defineModel<boolean>("modal", { required: true });
const profileId = defineModel<string>("profileId", { required: true });
const props = defineProps({
  type: { type: String, default: "" },
  employeeClass: { type: String, default: "" },
});

/**
 * ตัวแปร
 */
const avatar = ref<string>("");
const fullName = ref<string>("");
const position = ref<string>("");

/**
 * function เรียกข้อมูลส่วนตัว
 */
function fetchInformation() {
  showLoader();
  http
    .get(config.API.orgProfileById(profileId.value, props.employeeClass))
    .then((res) => {
      const data = res.data.result;
      fullName.value = `${data.prefix}${data.firstName} ${data.lastName}`;
      position.value = data.position;
      if (data.avatarName) {
        fetchProfile(data.id as string, data.avatarName);
      }
    })
    .catch((err) => {
      messageError($q, err);
      hideLoader();
    });
}

/**
 * function fetch รูปโปรไฟล์
 * @param id profileId
 * @param avatarName ชื้อไฟล์
 */
function fetchProfile(id: string, avatarName: string) {
  http
    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
    .then(async (res) => {
      avatar.value = res.data.downloadUrl;
    });
}

/**
 * function rediract ไปทะเบียนประวัติ
 */
function redirecToRegistry() {
  router.push(`/registry-new${props.employeeClass}/${profileId.value}`);
  modal.value = false;
}

watch(
  () => modal.value,
  async () => {
    modal.value && fetchInformation();
  }
);
</script>

<template>
  <q-dialog v-model="modal" position="right" :maximized="true">
    <q-card style="width: 1300px; overflow: visible">
      <q-toolbar>
        <q-space />
        <q-btn
          icon="close"
          unelevated
          round
          dense
          @click="modal = false"
          style="color: red; background-color: #ffdede"
        />
      </q-toolbar>
      <q-card-section class="col q-pt-none bg-grey-12" style="height: 100%">
        <div class="q-gutter-md">
          <q-card bordered class="text-center bg-grey-12">
            <div class="q-mt-md">
              <q-avatar size="120px" color="grey-4">
                <img
                  v-if="avatar"
                  :src="avatar"
                  class="bg-grey-3"
                  style="object-fit: cover"
                />
                <img
                  src="@/assets/avatar_user.jpg"
                  class="bg-grey-3"
                  style="object-fit: cover"
                />
              </q-avatar>
            </div>
            <div
              class="q-mt-md text-subtitle2 text-bold"
              style="font-size: 18px"
            >
              {{ fullName }}
            </div>

            <div class="q-mb-xs text-center text-grey" v-if="position">
              {{ position }}
            </div>
            <div class="q-mt-md">
              <q-btn
                class="bg-white"
                outline
                rounded
                label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
                color="secondary"
                @click.prevent="redirecToRegistry"
              />
            </div>
          </q-card>

          <q-scroll-area style="height: 65vh; max-width: 100%">
            <div class="q-gutter-md q-pa-sm">
              <q-card bordered style="border: 1px solid #d6dee1">
                <q-card-section>
                  <div class="text-weight-bold row items-center">
                    <span class="q-ml-md">
                      {{
                        type === "posSalary"
                          ? "ข้อมูลเงินเดือน / ค่าจ้าง"
                          : type === "discipline"
                          ? "ข้อมูลวินัย"
                          : "ข้อมูลการลา"
                      }}
                    </span>
                  </div>
                </q-card-section>

                <InfoSalary
                  v-if="type === 'posSalary'"
                  v-model:profileId="profileId"
                  :employeeClass="employeeClass"
                />
                <InfoDiscipline
                  v-if="type === 'discipline'"
                  v-model:profileId="profileId"
                  :employeeClass="employeeClass"
                />
                <InfoLeave
                  v-if="type === 'leave'"
                  v-model:profileId="profileId"
                  :employeeClass="employeeClass"
                />
              </q-card>
            </div>
          </q-scroll-area>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>