hrms-mgt/src/modules/01_masterdata/views/competency.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";

import ListCompetency from "@/modules/01_masterdata/components/competency/01ListCompetency.vue";
import ListLinkPosition from "@/modules/01_masterdata/components/competency/02ListLinkPosition.vue";
import ListLinkGroup from "@/modules/01_masterdata/components/competency/03ListLinkGroup.vue";
import ListCriteria from "@/modules/01_masterdata/components/competency/04ListCriteria.vue";
import ListDetail from "@/modules/01_masterdata/components/competency/05ListDetail.vue";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";

const $q = useQuasar();
const { showLoader, hideLoader, dialogRemove, success, messageError } =
  useCounterMixin();

const currentTab = ref<string>("list_competency");
const tabs = ref<Array<any>>([]);

const indicatorTotal = ref<any[]>([
  {
    value: "HEAD",
    label: "สมรรถนะหลัก",
    color: "edit",
  },
  {
    value: "GROUP",
    label: "สมรรถนะประจำกลุ่มงาน",
    color: "primary",
  },
  {
    value: "EXECUTIVE",
    label: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
    color: "blue",
  },
  {
    value: "total",
    label: "ทั้งหมด",
    color: "red",
  },
  {
    value: "DIRECTOR",
    label:
      "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
    color: "deep-purple",
  },
  {
    value: "INSPECTOR",
    label: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
    color: "orange",
  },
]);

function getTotal() {
  http
    .get(config.API.capacitySummary)
    .then((res) => {
      const data = res.data.result;
      indicatorTotal.value.forEach((i) => {
        const map = data.find((item: any) => item.type === i.value);
        if (map) i.total = map.total;
      });
      const totalSum = data.reduce((i:any, j:any) => i + +j.total, 0);
      indicatorTotal.value.find((i) => i.value === "total").total =
        totalSum.toString();
    })
    .catch((e) => {
      messageError($q, e);
    });
}

onMounted(() => {
  getTotal();
  const tab = [
    { label: "รายการสมรรถนะ", value: "list_competency" },
    { label: "กลุ่มงาน", value: "list_linkPosition" },
    { label: "เชื่อมโยงกับกลุ่มงานและตำแหน่ง", value: "list_linkGroup" },
    { label: "เกณฑ์การประเมิน", value: "list_criteria" },
    { label: "การประเมินพฤติกรรมการปฏิบัติราชการ", value: "list_detail" },
  ];
  tabs.value = tab;
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">สมรรถนะ</div>
  <q-card flat bordered>
    <div class="row">
      <div class="col-12">
        <q-card class="q-pa-xs bg-grey-1">
          <div class="row q-col-gutter-xs">
            <div
              v-for="(i, index) in indicatorTotal"
              :class="
                index > 3
                  ? 'col-12 col-sm-12 col-md-6 col-lg-6'
                  : 'col-12 col-sm-12 col-md-6 col-lg-3'
              "
            >
              <div
                class="bg-white rounded-borders q-pa-sm"
                style="border: 1px solid #ededed"
              >
                <div class="row items-center no-wrap">
                  {{ i.label }}
                  <q-space />
                  <q-badge
                    :color="i.color"
                    text-color="white"
                    :label="i.total"
                  />
                </div>
              </div>
            </div>
          </div>
        </q-card>
      </div>
    </div>
    <q-separator />
    <div class="text-subtitle1 text-grey-9">
      <q-tabs
        dense
        v-model="currentTab"
        align="left"
        indicator-color="primary"
        active-color="primary bg-teal-1"
        inline-label
        class="text-body2 text-grey-7"
      >
        <q-tab
          v-for="tab in tabs"
          :key="tab.value"
          v-on:click="currentTab = tab.value"
          :label="tab.label"
          :name="tab.value"
          class="q-py-xs"
        />
      </q-tabs>
      <q-separator />
      <!-- person -->

      <q-tab-panels v-model="currentTab" animated>
        <q-tab-panel name="list_competency">
          <ListCompetency v-if="currentTab == 'list_competency'" />
        </q-tab-panel>
        <q-tab-panel name="list_linkPosition">
          <ListLinkPosition v-if="currentTab == 'list_linkPosition'" />
        </q-tab-panel>
        <q-tab-panel name="list_linkGroup">
          <ListLinkGroup v-if="currentTab == 'list_linkGroup'" />
        </q-tab-panel>
        <q-tab-panel name="list_criteria">
          <ListCriteria v-if="currentTab == 'list_criteria'" />
        </q-tab-panel>
        <q-tab-panel name="list_detail">
          <ListDetail v-if="currentTab == 'list_detail'" />
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-card>
</template>

<style scoped></style>