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";
import { checkPermissionGet } from "@/utils/permissions";
import avatarMain from "@/assets/avatar_user.jpg";
import { useCounterMixin } from "@/stores/mixin";

/** 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";
import InfoAssessments from "@/modules/07_insignia/components/2_Manage/InfoAssessments.vue";
import InfoInsignia from "@/modules/07_insignia/components/2_Manage/InfoInsignia.vue";

/** use */
const $q = useQuasar();
const router = useRouter();
const { 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>("");
const isLoading = ref<boolean>(true);

/** function เรียกข้อมูลส่วนตัว*/
function fetchInformation() {
  isLoading.value = true;
  http
    .get(config.API.orgProfileById(profileId.value, props.employeeClass))
    .then(async (res) => {
      const data = res.data.result;

      fullName.value = `${data.prefix}${data.firstName} ${data.lastName}`;
      position.value = data.position;

      if (data.avatarName) {
        await fetchProfile(data.id as string, data.avatarName);
      } else {
        avatar.value = avatarMain;
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      isLoading.value = false;
    });
}

/**
 * function fetch รูปโปรไฟล์
 * @param id profileId
 * @param avatarName ชื้อไฟล์
 */
async 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${props.employeeClass ? props.employeeClass : "-officer"}/${
      profileId.value
    }`
  );
  modal.value = false;
}

const thumbStyle = ref<any>({
  zIndex: "1",
});
watch(
  () => modal.value,
  async () => {
    modal.value && fetchInformation();
  }
);
</script>

<template>
  <q-dialog v-model="modal" position="right" :maximized="true" persistent>
    <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">
          <div v-if="isLoading">
            <q-skeleton
              type="QAvatar"
              size="120px"
              style="background: #e3e3e3"
              class="q-mx-auto q-mt-md"
            />
            <q-skeleton
              type="text"
              width="150px"
              style="background: #e3e3e3"
              class="q-mx-auto q-mt-md"
            />
            <q-skeleton
              type="text"
              width="100px"
              style="background: #e3e3e3"
              class="q-mx-auto q-mt-sm"
            />
            <q-skeleton
              type="QBtn"
              width="150px"
              style="background: #e3e3e3"
              class="q-mx-auto q-mt-sm"
            />
          </div>
          <q-card v-else 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
                  v-else
                  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"
              v-if="
                props.employeeClass === '-employee'
                  ? checkPermissionGet('SYS_REGISTRY_EMP')
                  : checkPermissionGet('SYS_REGISTRY_OFFICER')
              "
            >
              <q-btn
                class="bg-white"
                outline
                rounded
                label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
                color="secondary"
                @click.prevent="redirecToRegistry"
              />
            </div>
          </q-card>

          <div class="q-gutter-md q-pa-sm">
            <q-card bordered style="border: 1px solid #d6dee1">
              <q-card-section style="padding-bottom: 0px">
                <div class="text-weight-bold row items-center">
                  <span class="q-ml-md">
                    {{
                      type === "posSalary"
                        ? "ข้อมูลเงินเดือน/ค่าจ้าง"
                        : type === "discipline"
                        ? "ข้อมูลวินัย"
                        : type === "leave"
                        ? "ข้อมูลการลา"
                        : type === "assessments"
                        ? "ข้อมูลผลการประเมินการปฏิบัติราชการ"
                        : type === "insignia"
                        ? "ข้อมูลเครื่องราชฯ"
                        : ""
                    }}
                  </span>
                </div>
              </q-card-section>

              <q-scroll-are
                :thumb-style="thumbStyle"
                style="height: 55vh; max-width: 100%"
              >
                <div style="min-width: 1200px; overflow-x: auto">
                  <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"
                  />

                  <InfoAssessments
                    v-if="type === 'assessments'"
                    v-model:profileId="profileId"
                    :employeeClass="employeeClass"
                  />

                  <InfoInsignia
                    v-if="type === 'insignia'"
                    v-model:profileId="profileId"
                    :employeeClass="employeeClass"
                  />
                </div>
              </q-scroll-are>
            </q-card>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>