clone code

src/modules/01_metadata/views/Main.vue

@@ -0,0 +1,761 @@
+<!-- page:main page ข้อมูลหลัก (tab ย่อยใน page จะอยู่ใน component) -->
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    จัดการข้อมูลหลัก
+    <q-space />
+    <q-btn
+      @click="visible = !visible"
+      dense
+      round
+      size="12px"
+      :style="
+        visible == false
+          ? 'transform: rotate(90deg);transition-duration: 0.8s;'
+          : 'transform: rotate(0);transition-duration: 0.8s;'
+      "
+      icon="mdi-pin"
+      flat
+      v-show="link !== 5"
+    ></q-btn>
+  </div>
+  <div class="row col-12 q-col-gutter-sm">
+    <q-slide-transition>
+      <div
+        :class="
+          link !== 5
+            ? 'row col-12'
+            : 'col-xs-12 col-sm-12 col-md-4 col-lg-4 row'
+        "
+      >
+        <q-card bordered class="col-12 row" v-show="visible">
+          <div
+            :class="
+              link == 5
+                ? 'row col-12'
+                : 'col-xs-12 col-sm-12 col-md-4 col-lg-4 row'
+            "
+          >
+            <div class="q-pa-md col-12">
+              <div class="text-subtitle1 text-grey-9 items-center">
+                <q-list
+                  class="text-primary"
+                  v-for="list in lists"
+                  :key="list.name"
+                >
+                  <q-item
+                    dense
+                    clickable
+                    v-ripple
+                    :active="link === list.id"
+                    @click="changeList(list.id)"
+                    active-class="my-list-link text-blue-9 text-weight-medium"
+                    class="my-list text-dark text-body2 row"
+                  >
+                    <div class="ellipsis">{{ list.name }}</div>
+                    <q-space />
+                    <q-badge
+                      color="grey-4"
+                      class="q-px-sm my-list-badge q-py-xs text-weight-medium"
+                      :label="list.count"
+                      rounded
+                    />
+                  </q-item>
+                </q-list>
+              </div>
+              <q-separator size="2px" class="q-my-md" v-show="link === 5" />
+              <div flat bordered class="q-pb-md col-12" v-if="link === 5">
+                <div class="text-grey-9 items-center">
+                  <div class="row no-wrap items-center">
+                    <div class="text-dark text-weight-medium q-pb-sm q-px-xs">
+                      สรุปวันหยุดในแต่ละเดือนประจำปี
+                      <span class="text-weight-bold text-primary q-pl-sm">{{
+                        yearSum + 543
+                      }}</span>
+                    </div>
+                    <q-space />
+                  </div>
+                  <div class="col-12 row">
+                    <div
+                      class="col-xs-4 col-md-6 row q-pa-xs"
+                      v-for="(list, index) in listsSumCalendar"
+                      :key="index"
+                    >
+                      <q-card bordered class="col-12">
+                        <div
+                          class="col-12 text-subtitle2 row q-px-sm items-center q-px-sm"
+                        >
+                          <span
+                            :class="
+                              'text-weight-medium text-' + `${list.color}`
+                            "
+                            >{{ list.monthFull }}</span
+                          >
+                          <q-space />
+                          <q-badge
+                            color="white"
+                            :class="
+                              'text-weight-bold text-subtitle1 text-' +
+                              `${list.color}`
+                            "
+                            :label="list.count"
+                            rounded
+                          />
+                        </div>
+                      </q-card>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="col-12 q-px-md"
+            v-if="link !== 5"
+            v-show="$q.screen.lt.md"
+          >
+            <q-separator size="2px" />
+          </div>
+          <div
+            class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row"
+            v-if="link !== 5"
+          >
+            <div class="q-py-md row col-12 no-wrap">
+              <q-separator size="2px" vertical class="gt-sm" />
+              <!-- การ์ดแสดงจำนวนข้อมูล -->
+              <div v-if="link !== 5" class="col-12 row">
+                <div class="text-dark text-weight-medium col-12 q-pl-md">
+                  {{ tittleTextSum }}
+                </div>
+                <div class="fit q-pa-md">
+                  <div class="row col-12 q-col-gutter-md fit">
+                    <div
+                      :class="$q.screen.lt.md ? 'col-4' : ''"
+                      :style="$q.screen.lt.md ? '' : sizeCard(link)"
+                      v-for="(num, index) in dataNum"
+                      :key="index"
+                    >
+                      <q-card
+                        bordered
+                        flat
+                        class="row fit cardNum items-center"
+                      >
+                        <div class="col-12 row items-center q-pa-sm">
+                          <div
+                            :class="
+                              'col-12 text-h5 text-weight-bold text-' +
+                              `${num.color}`
+                            "
+                          >
+                            {{
+                              num.count != null
+                                ? num.count.toLocaleString("en-US")
+                                : ""
+                            }}
+                          </div>
+                          <div class="col-12 text-dark ellipsis">
+                            {{ num.name }}
+                          </div>
+                        </div>
+                      </q-card>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </q-slide-transition>
+    <!-- ปฎิทิน -->
+    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row" v-if="link === 5">
+      <q-card flat bordered class="col-12 q-pa-md fit">
+        <calendarComponent
+          v-model:dateYear="yearSum"
+          :fetchDataSummaryCalendar="fetchDataSummaryCalendar"
+        />
+      </q-card>
+    </div>
+    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" v-if="link !== 5">
+      <!-- tab ย่อย table รายการ -->
+      <q-card flat bordered>
+        <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 size="2px" />
+          <!-- person -->
+          <personProvince
+            v-if="currentTab == 'person_province'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <personPrefix
+            v-if="currentTab == 'person_prefix'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <personGender
+            v-if="currentTab == 'person_gender'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <personRelationship
+            v-if="currentTab == 'person_relationship'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <personBlood
+            v-if="currentTab == 'person_blood'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <personReligion
+            v-if="currentTab == 'person_religion'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <personEducation
+            v-if="currentTab == 'person_education'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <!-- organization -->
+          <organizationOrganization
+            v-if="currentTab == 'organization_organization'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <organizationShortName
+            v-if="currentTab == 'organization_shortName'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <organizationType
+            v-if="currentTab == 'organization_type'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <organizationLevel
+            v-if="currentTab == 'organization_level'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <organizationStatus
+            v-if="currentTab == 'organization_status'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <organizationAgency
+            v-if="currentTab == 'organization_agency'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <organizationGovernmentAgency
+            v-if="currentTab == 'organization_governmentAgency'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <organizationTelExternal
+            v-if="currentTab == 'organization_telExternal'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <organizationTelInternal
+            v-if="currentTab == 'organization_telInternal'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <organizationFax
+            v-if="currentTab == 'organization_fax'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <!-- position -->
+          <positionPath
+            v-if="currentTab == 'position_path'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <positionPathSide
+            v-if="currentTab == 'position_pathSide'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <positionExecutive
+            v-if="currentTab == 'position_executive'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <positionExecutiveSide
+            v-if="currentTab == 'position_executiveSide'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <positionType
+            v-if="currentTab == 'position_type'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <positionLine
+            v-if="currentTab == 'position_line'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <positionLevel
+            v-if="currentTab == 'position_level'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <positionStatus
+            v-if="currentTab == 'position_status'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <!-- positionEmployee -->
+          <positionEmployeePosition
+            v-if="currentTab == 'positionEmployee_position'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <positionEmployeePositionSide
+            v-if="currentTab == 'positionEmployee_positionSide'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <positionEmployeeGroup
+            v-if="currentTab == 'positionEmployee_group'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <positionEmployeeLine
+            v-if="currentTab == 'positionEmployee_line'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <positionEmployeeLevel
+            v-if="currentTab == 'positionEmployee_level'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <positionEmployeeStatus
+            v-if="currentTab == 'positionEmployee_status'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <!-- insignia -->
+          <insigniaType
+            v-if="currentTab == 'insignia_insigniaType'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+          <insigniaClass
+            v-if="currentTab == 'insignia_insignia'"
+            :fetchDataComponent="fetchDataSummarySubComponent"
+          />
+        </div>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from "@vue/runtime-core";
+import { ref, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+// tab ข้อมูลเกี่ยวกับบุคคล
+import personPrefix from "@/modules/01_metadata/components/person/Prefix.vue";
+import personGender from "@/modules/01_metadata/components/person/Gender.vue";
+import personRelationship from "@/modules/01_metadata/components/person/Relationship.vue";
+import personBlood from "@/modules/01_metadata/components/person/Blood.vue";
+import personReligion from "@/modules/01_metadata/components/person/Religion.vue";
+import personEducation from "@/modules/01_metadata/components/person/Education.vue";
+import personProvince from "@/modules/01_metadata/components/person/Province.vue";
+
+// tab ข้อมูลโครงสร้างหน่วยงาน
+import organizationOrganization from "@/modules/01_metadata/components/organization/Organization.vue";
+import organizationShortName from "@/modules/01_metadata/components/organization/ShortName.vue";
+import organizationType from "@/modules/01_metadata/components/organization/Type.vue";
+import organizationLevel from "@/modules/01_metadata/components/organization/Level.vue";
+import organizationStatus from "@/modules/01_metadata/components/organization/Status.vue";
+import organizationAgency from "@/modules/01_metadata/components/organization/Agency.vue";
+import organizationGovernmentAgency from "@/modules/01_metadata/components/organization/GovernmentAgency.vue";
+import organizationTelExternal from "@/modules/01_metadata/components/organization/TelExternal.vue";
+import organizationTelInternal from "@/modules/01_metadata/components/organization/TelInternal.vue";
+import organizationFax from "@/modules/01_metadata/components/organization/Fax.vue";
+
+// tab ข้อมูลตำแหน่ง
+import positionPath from "@/modules/01_metadata/components/position/Path.vue";
+import positionPathSide from "@/modules/01_metadata/components/position/PathSide.vue";
+import positionExecutive from "@/modules/01_metadata/components/position/Executive.vue";
+import positionExecutiveSide from "@/modules/01_metadata/components/position/ExecutiveSide.vue";
+import positionType from "@/modules/01_metadata/components/position/Type.vue";
+import positionLine from "@/modules/01_metadata/components/position/Line.vue";
+import positionLevel from "@/modules/01_metadata/components/position/Level.vue";
+import positionStatus from "@/modules/01_metadata/components/position/Status.vue";
+
+// tab ข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร
+import positionEmployeePosition from "@/modules/01_metadata/components/positionEmployee/Position.vue";
+import positionEmployeePositionSide from "@/modules/01_metadata/components/positionEmployee/PositionSide.vue";
+import positionEmployeeGroup from "@/modules/01_metadata/components/positionEmployee/Group.vue";
+import positionEmployeeLine from "@/modules/01_metadata/components/positionEmployee/Line.vue";
+import positionEmployeeLevel from "@/modules/01_metadata/components/positionEmployee/Level.vue";
+import positionEmployeeStatus from "@/modules/01_metadata/components/positionEmployee/Status.vue";
+
+//tab ปฏิทินวันหยุด
+import calendarComponent from "@/modules/01_metadata/views/MainCalendar.vue";
+
+// tab ข้อมูลเครื่องราชฯ
+import insigniaClass from "@/modules/01_metadata/components/insignia/Insignia.vue";
+import insigniaType from "@/modules/01_metadata/components/insignia/InsigniaType.vue";
+// import insigniaBadge from "@/modules/01_metadata/components/insignia/Badge.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useManageDataStore } from "@/modules/01_metadata/store";
+import { useDataStore } from "@/stores/data";
+
+import type {
+  DataSumCalendarObject,
+  DataListsObject,
+} from "@/modules/01_metadata/interface/request/Main";
+import type { DataNumObject } from "@/modules/01_metadata/interface/request/Calendar";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { genColor15, messageError } = mixin;
+const store = useManageDataStore();
+const dataStore = useDataStore();
+const { loaderPage } = dataStore; //ขึ้นหน้า load ขณะเรียก api
+
+const visible = ref(true); //เปิดปิด card สรุปข้อมูล
+const link = ref<number>(store.manageData.link); //เลือก tab หลัก
+const currentTab = ref<string>(""); //เลือก tab ย่อย
+const dataNum = ref<DataNumObject[]>([]); //จำนวนสรุปจำนวนข้อมูลหลัก
+const yearSum = ref<number>(new Date().getFullYear()); //ค่าปีในcalendar
+const tittleTextSum = ref<string>(""); //ชื่อ main สรุปข้อมูลแต่ละ tab
+
+const listsSumCalendar = ref<DataSumCalendarObject[]>([]);
+const defaultListsSumCalendar = () => {
+  listsSumCalendar.value = [
+    { monthFull: "มกราคม", count: 0, id: 1, color: genColor15(1) },
+    { monthFull: "กุมภาพันธ์", count: 0, id: 2, color: genColor15(2) },
+    { monthFull: "มีนาคม", count: 0, id: 3, color: genColor15(3) },
+    {
+      monthFull: "เมษายน",
+      count: 0,
+      id: 4,
+      color: genColor15(4),
+    },
+    { monthFull: "พฤษภาคม", count: 0, id: 5, color: genColor15(5) },
+    {
+      monthFull: "มิถุนายน",
+      count: 0,
+      id: 6,
+      color: genColor15(6),
+    },
+    {
+      monthFull: "กรกฎาคม",
+      count: 0,
+      id: 7,
+      color: genColor15(7),
+    },
+    { monthFull: "สิงหาคม", count: 0, id: 8, color: genColor15(8) },
+    { monthFull: "กันยายน", count: 0, id: 9, color: genColor15(9) },
+    { monthFull: "ตุลาคม", count: 0, id: 10, color: genColor15(10) },
+    {
+      monthFull: "พฤศจิกายน",
+      count: 0,
+      id: 11,
+      color: genColor15(11),
+    },
+    { monthFull: "ธันวาคม", count: 0, id: 12, color: genColor15(12) },
+  ];
+};
+const lists = ref<DataListsObject[]>([
+  { name: "ข้อมูลเกี่ยวกับบุคคล", count: 0, id: 1 },
+  { name: "ข้อมูลโครงสร้างหน่วยงาน", count: 0, id: 2 },
+  { name: "ข้อมูลตำแหน่งของข้าราชการ", count: 0, id: 3 },
+  {
+    name: "ข้อมูลตำแหน่งของลูกจ้าง",
+    count: 0,
+    id: 4,
+  },
+  { name: "ข้อมูลปฏิทินวันหยุด", count: 0, id: 5 },
+  { name: "ข้อมูลเครื่องราชอิสริยาภรณ์", count: 0, id: 6 },
+]);
+const tabsPerson = [
+  { label: "คำนำหน้า", value: "person_prefix" },
+  { label: "กลุ่มเลือด", value: "person_blood" },
+  { label: "เพศ", value: "person_gender" },
+  { label: "ศาสนา", value: "person_religion" },
+  { label: "สถานภาพ", value: "person_relationship" },
+  { label: "ระดับการศึกษา", value: "person_education" },
+  { label: "จังหวัด", value: "person_province" },
+];
+const tabsOrganization = [
+  { label: "หน่วยงาน", value: "organization_organization" },
+  { label: "ชื่อย่อหน่วยงาน", value: "organization_shortName" },
+  { label: "ประเภท", value: "organization_type" },
+  { label: "ระดับ", value: "organization_level" },
+  { label: "สถานะ", value: "organization_status" },
+  { label: "เบอร์ติดต่อภายใน", value: "organization_telInternal" },
+  { label: "เบอร์ติดต่อภายนอก", value: "organization_telExternal" },
+  { label: "เบอร์โทรสาร", value: "organization_fax" },
+];
+const tabsPosition = [
+  { label: "ชื่อตำแหน่ง", value: "position_path" },
+  { label: "ด้าน/สาขา", value: "position_pathSide" },
+  { label: "ชื่อตำแหน่งทางการบริหาร", value: "position_executive" },
+  { label: "ด้านทางการบริหาร", value: "position_executiveSide" },
+  { label: "ตำแหน่งประเภท", value: "position_type" },
+  { label: "สายงาน ", value: "position_line" },
+  { label: "ระดับ", value: "position_level" },
+  { label: "สถานะของตำแหน่ง", value: "position_status" },
+];
+const tabsPositionEmployee = [
+  { label: "ชื่อตำแหน่ง", value: "positionEmployee_position" },
+  { label: "ด้านของตำแหน่ง", value: "positionEmployee_positionSide" },
+  { label: "กลุ่มงาน", value: "positionEmployee_group" },
+  { label: "สายงาน", value: "positionEmployee_line" },
+  { label: "ระดับชั้นงาน", value: "positionEmployee_level" },
+  { label: "สถานะของตำแหน่ง", value: "positionEmployee_status" },
+];
+const tabsInsignia = [
+  { label: "ลำดับชั้นเครื่องราชฯ", value: "insignia_insigniaType" },
+  { label: "ชื่อเครื่องราชฯ", value: "insignia_insignia" },
+];
+const tabs = ref(tabsPerson);
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  // api sum by main
+  await fetchDataSummary();
+  await changeList(link.value);
+});
+
+/**
+ * ค่าถ้าถูกอัพเดทให้ refresh ค่าสรุปวันหยุดใหม่
+ */
+watch(yearSum, async (count, prevCount) => {
+  await fetchDataSummaryCalendar();
+});
+
+watch(currentTab, async (count: string, prevCount: string) => {
+  await store.changeManageCurrentTab(link.value, count);
+});
+
+watch(link, async (count, prevCount) => {
+  await store.changeManageLink(count);
+});
+
+/**
+ * กดเลือก tab จัดการข้อมูลหลักแต่ละ tab
+ * @param val id menu จัดการข้อมูลหลัก
+ */
+const changeList = async (val: number) => {
+  link.value = val;
+  if (val == 1) {
+    // สรุปจำนวนข้อมูลเกี่ยวกับบุคคล
+    tabs.value = tabsPerson;
+    currentTab.value =
+      store.manageData.person.name === ""
+        ? "person_prefix"
+        : store.manageData.person.name;
+    tittleTextSum.value = "สรุปจำนวนข้อมูลเกี่ยวกับบุคคล";
+  }
+  if (val == 2) {
+    // สรุปจำนวนข้อมูลโครงสร้างหน่วยงาน
+    tabs.value = tabsOrganization;
+    currentTab.value =
+      store.manageData.organization.name === ""
+        ? "organization_organization"
+        : store.manageData.organization.name;
+    tittleTextSum.value = "สรุปจำนวนข้อมูลโครงสร้างหน่วยงาน";
+  }
+  if (val == 3) {
+    // สรุปจำนวนข้อมูลตำแหน่งของข้าราชการกรุงเทพมหานคร
+    tabs.value = tabsPosition;
+    currentTab.value =
+      store.manageData.position.name === ""
+        ? "position_path"
+        : store.manageData.position.name;
+    tittleTextSum.value = "สรุปจำนวนข้อมูลตำแหน่งของข้าราชการกรุงเทพมหานคร";
+  }
+  if (val == 4) {
+    // สรุปจำนวนข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร
+    tabs.value = tabsPositionEmployee;
+    currentTab.value =
+      store.manageData.positionEmployee.name === ""
+        ? "positionEmployee_position"
+        : store.manageData.positionEmployee.name;
+    tittleTextSum.value = "สรุปจำนวนข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร";
+  }
+  if (val == 5) {
+    // สรุปจำนวนข้อมูลปฏิทินวันหยุด
+    tabs.value = tabsPerson;
+    await fetchDataSummaryCalendar();
+  }
+  if (val == 6) {
+    // สรุปจำนวนข้อมูลเครื่องราชอิสริยาภรณ์
+    tabs.value = tabsInsignia;
+    currentTab.value =
+      store.manageData.insignia.name === ""
+        ? "insignia_insignia"
+        : store.manageData.insignia.name;
+    tittleTextSum.value = "สรุปจำนวนข้อมูลเครื่องราชอิสริยาภรณ์";
+  }
+};
+
+/**
+ * สรุปจำนวน จัดการข้อมูลหลัก
+ */
+const fetchDataSummary = async () => {
+  lists.value = [];
+  loaderPage(true);
+  await http
+    .get(config.API.countDashbordHistory)
+    .then((res) => {
+      let data = res.data.result;
+      data.map((e: DataListsObject) => {
+        lists.value.push({
+          name: e.name,
+          count: e.count,
+          id: e.id,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * ฟังก์ชันสำหรับ refresh สรุปจำนวนข้อมูลจัดการที่ component ให้อัพเดท
+ */
+const fetchDataSummarySubComponent = async () => {
+  await fetchDataSummarySub(link.value);
+};
+/**
+ * สรุปจำนวน จัดการข้อมูลหลักแต่ละระบบย่อย
+ */
+const fetchDataSummarySub = async (val: number) => {
+  dataNum.value = [];
+  loaderPage(true);
+  await http
+    .get(config.API.countDashbordSubHistory(val))
+    .then((res) => {
+      let data = res.data.result;
+      data.map((e: DataNumObject) => {
+        dataNum.value.push({
+          id: e.id,
+          count: e.count,
+          name: e.name,
+          color: genColor15(e.id),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * สรุปวันหยุด
+ */
+const fetchDataSummaryCalendar = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.summaryHolidayHistoryYear(yearSum.value))
+    .then((res) => {
+      let data = res.data.result;
+      listsSumCalendar.value = [];
+      data.map((e: DataSumCalendarObject) => {
+        listsSumCalendar.value.push({
+          id: e.id,
+          monthFull: e.monthFull,
+          count: e.count,
+          color: genColor15(e.id),
+        });
+      });
+    })
+    .catch(async (e) => {
+      await defaultListsSumCalendar;
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * ขนาดการ์ดสรุปข้อมูล active
+ * @param val จำนวนของการ์ดสรุปข้อมูลหลักที่แสดง
+ */
+const sizeCard = (val: number) => {
+  if (val === 3 || val === 2) {
+    return "width: 25%;";
+  } else if (val === 4) {
+    return "width: 33.3%;";
+  } else if (val === 6) {
+    return "width: 33.3%;";
+  } else {
+    return "width:20%;";
+  }
+};
+</script>
+
+<style>
+.my-menu-link {
+  color: rgb(0, 0, 0);
+  background: #bad5ec;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+  /*  box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
+}
+
+.my-list-link .my-list-badge {
+  color: rgb(5, 86, 173);
+  background: #a3d3fb00 !important;
+  font-weight: 800;
+  /*  border: 1px solid rgba(62, 139, 222, 0.217); */
+}
+
+.my-list:hover {
+  border-radius: 5px;
+}
+
+.my-list-badge {
+  color: rgb(27, 27, 27);
+  background: #8b8c8c23 !important;
+}
+
+.my-list {
+  padding: 9px 9px;
+}
+
+.my-card {
+  width: 100%;
+  max-width: 160px;
+}
+
+.sub-card {
+  height: 100%;
+  max-height: 265px;
+}
+
+.cardNum {
+  border-radius: 5px;
+  /* border-left: 3px solid #016987 !important; */
+  padding-left: 8px;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
+
+function components(arg0: () => void) { throw new Error("Function not
+implemented."); } function components(arg0: () => void) { throw new
+Error("Function not implemented."); } function components(arg0: () => void) {
+throw new Error("Function not implemented."); }

src/modules/01_metadata/views/MainCalendar.vue

@@ -0,0 +1,607 @@
+<!-- page:จัดการข้อมูลหลัก tab วันหยุด -->
+<template>
+  <div>
+    <div class="row col-12 q-col-gutter-sm">
+      <div class="row items-center">
+        <!-- filter เลือกเดือนปี -->
+        <datepicker
+          v-model="dateMonth"
+          :locale="'th'"
+          autoApply
+          month-picker
+          :enableTimePicker="false"
+          v-if="currentTab === 'calendar'"
+          @update:modelValue="updateMonth"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              :model-value="monthYearThai(dateMonth)"
+              dense
+              outlined
+              style="width: 130px"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <!-- filter เลือกปี -->
+        <datepicker
+          v-model="dateYear"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+          v-if="currentTab === 'list'"
+          @update:modelValue="updateYear"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              :model-value="dateYear + 543"
+              dense
+              outlined
+              style="width: 100px"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <div class="q-ml-sm">
+          <!-- icon เพิ่มวันหยุด -->
+          <q-btn round dense flat size="13px" class="q-px-sm">
+            <q-icon
+              name="mdi-plus"
+              size="25px"
+              color="grey-7"
+              @click="addCalendar()"
+            />
+            <q-tooltip>เพิ่มวันหยุด</q-tooltip>
+          </q-btn>
+          <!-- icon คัดลอกวันหยุด -->
+          <q-btn round dense flat size="13px" class="q-px-sm">
+            <q-icon
+              name="mdi-content-copy"
+              size="22px"
+              color="grey-7"
+              @click="copyCalendar()"
+            />
+            <q-tooltip>คัดลอกวันหยุด</q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-space />
+      <div class="justify-center row q-gutter-md items-center">
+        <!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
+        <q-tabs
+          v-model="currentTab"
+          indicator-color="transparent"
+          align="left"
+          active-color="activetab"
+          class="text-nativetab"
+          inline-label
+          dense
+        >
+          <q-btn
+            name="calendar"
+            round
+            flat
+            icon="mdi-calendar-month"
+            @click="currentTab = 'calendar'"
+            :color="currentTab == 'calendar' ? 'primary' : ''"
+            class="q-mr-sm"
+          >
+            <q-tooltip>ปฏิทิน</q-tooltip>
+          </q-btn>
+          <q-separator vertical inset />
+          <q-btn
+            name="list"
+            round
+            flat
+            icon="mdi-format-list-bulleted"
+            @click="currentTab = 'list'"
+            :color="currentTab == 'list' ? 'primary' : ''"
+            class="q-ml-sm"
+          >
+            <q-tooltip>รายการ</q-tooltip>
+          </q-btn>
+        </q-tabs>
+      </div>
+    </div>
+    <div>
+      <!-- component ปฏิทินวันหยุด -->
+      <subCalendarComponent
+        v-if="currentTab === 'calendar'"
+        :dateYear="dateMonth.year"
+        :dateMonth="dateMonth.month"
+        :refreshData="refreshData"
+        :fetchDataSummaryCalendar="fetchDataSummaryCalendar"
+      />
+      <!-- component รายการวันหยุด -->
+      <subCalendarListComponent
+        v-if="currentTab === 'list'"
+        :dateYear="dateYear"
+        :refreshData="refreshData"
+        :fetchDataSummaryCalendar="fetchDataSummaryCalendar"
+      />
+    </div>
+  </div>
+  <!-- modal เพิ่มวันหยุด -->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="min-width: 550px">
+      <q-form ref="formDate" @submit.prevent.stop="onSubmit">
+        <q-card-section class="row items-center q-py-sm">
+          <div class="text-bold">เพิ่มวันหยุด</div>
+          <q-space />
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            v-close-popup
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-section class="q-p-md row q-gutter-y-sm">
+          <datepicker
+            v-model="dateAdd"
+            :locale="'th'"
+            autoApply
+            range
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :model-value="dateThaiRange(dateAdd)"
+                outlined
+                label="เลือกวันที่"
+                dense
+                class="full-width datepicker"
+              >
+                <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
+            dense
+            label="คำอธิบาย"
+            outlined
+            class="full-width datepicker q-pb-none"
+            v-model="name"
+            type="textarea"
+            :rules="[(val) => (val && val.length > 0) || '']"
+          />
+          <q-option-group
+            dense
+            v-model="category"
+            :options="categoryOptions"
+            color="primary"
+            inline
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="text-primary">
+          <q-btn
+            flat
+            round
+            color="public"
+            icon="mdi-content-save-outline"
+            type="submit"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- modal คัดลอกวันหยุด -->
+  <q-dialog v-model="modalCopy" persistent>
+    <q-card style="min-width: 500px">
+      <q-form @submit.prevent.stop="onSubmitCopy">
+        <q-card-section class="row items-center q-py-sm">
+          <div class="text-bold">คัดลอกวันหยุดปีก่อนหน้า</div>
+          <q-space />
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            v-close-popup
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 q-col-gutter-sm">
+            <datepicker
+              v-model="dateYearStart"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  :model-value="dateYearStart + 543"
+                  dense
+                  outlined
+                  class="q-pb-sm"
+                  label="ปีที่คัดลอกวันหยุด"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <datepicker
+              v-model="dateYearEnd"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              :min-date="minDate"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  :model-value="dateYearEnd + 543"
+                  dense
+                  outlined
+                  label="ปีที่ลงวันหยุดคัดลอก"
+                  class="q-pb-sm"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="text-primary">
+          <q-btn
+            flat
+            round
+            color="public"
+            icon="mdi-content-save-outline"
+            type="submit"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { defineComponent, onMounted } from "@vue/runtime-core";
+import { reactive, ref, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useDataStore } from "@/stores/data";
+import { useCounterMixin } from "@/stores/mixin";
+import { useManageDataStore } from "@/modules/01_metadata/store";
+import type {
+  DataDateMonthObject,
+  DataDateAddObject,
+} from "@/modules/01_metadata/interface/request/Calendar";
+import subCalendarComponent from "@/modules/01_metadata/components/Calendar.vue";
+import subCalendarListComponent from "@/modules/01_metadata/components/CalendarList.vue";
+
+const props = defineProps({
+  dateYear: Number, //ปีที่ส่งไป parent สรุปวันหยุด
+  fetchDataSummaryCalendar: {
+    //ฟังก์ชันอัพเดทสรุปวันหยุด
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const dataStore = useDataStore();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  success,
+  dateToISO,
+  monthYear2Thai,
+  date2Thai,
+  messageError,
+  dialogMessage,
+} = mixin;
+const { loaderPage } = dataStore; //รอโหลด
+const store = useManageDataStore();
+const $q = useQuasar(); //ใช้ noti quasar
+const currentTab = ref<string>(
+  store.manageData.calendar.name === ""
+    ? "calendar"
+    : store.manageData.calendar.name
+); //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
+const modalAdd = ref<boolean>(false); //แสดง modal add calendar
+const modalCopy = ref<boolean>(false); //แสดง modal copy calendar
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+}); //ค่าเดือนที่เลือก tab ปฏิทิน
+const dateYear = ref<number>(new Date().getFullYear()); //ค่าปีที่เลือก tab รายการ
+const dateYearStart = ref<number>(new Date().getFullYear()); //ค่าปีที่ copy วันหยุด
+const dateYearEnd = ref<number>(new Date().getFullYear()); //ค่าปีที่จะลงวันหยุด copy
+const dateAdd = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
+const formDate = ref<any>(); //ref เช็ค validate เพิ่มวันหยุด
+const name = ref<string>(""); //ชื่อวันหยุด
+const isSpecial = ref<boolean>(true); //เช็ควันหยุดพิเศษ
+
+const category = ref<string>("all");
+const categoryOptions = ref<any>([
+  {
+    label: "ทั้งหมด",
+    value: "all",
+  },
+  {
+    label: "ทำงาน 5 วัน",
+    value: "normal",
+  },
+  {
+    label: "ทำงาน 6 วัน",
+    value: "6days",
+  },
+]);
+const minDate = ref<Date>();
+const refreshData = ref<boolean>(false); //ส่งค่าให้ component refresh data วันหยุด
+const emit = defineEmits(["update:dateYear"]);
+
+/**
+ * มีการเลือก datepicker ให้แปลงค่าเป็น text ที่แสดง
+ */
+watch(dateYearStart, (count, prevCount) => {
+  dateYearEnd.value = dateYearStart.value + 1;
+  minDate.value = new Date(`${dateYearStart.value + 1}-01-01`);
+});
+watch(currentTab, async (count, prevCount) => {
+  await store.changeManageCurrentTab(5, count);
+});
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  dateYearEnd.value = dateYearStart.value + 1;
+  minDate.value = new Date(`${dateYearStart.value + 1}-01-01`);
+});
+
+/**
+ * ค่าเดือนปีที่ถูกเลือกใน component ปฏิทินจะให้อัพเดทค่าสรุปวันหยุดรวม
+ * @param e เลือกเดือนปี tab ปฏิทิน
+ */
+const updateMonth = async (e: DataDateMonthObject) => {
+  if (e != null) {
+    dateYear.value = e.year;
+    emit("update:dateYear", e.year);
+    await props.fetchDataSummaryCalendar();
+  }
+};
+
+/**
+ * ค่าปีที่ถูกเลือกใน component รายการจะให้อัพเดทค่าสรุปวันหยุดรวม
+ * @param e เลือกปี tab รายการ
+ */
+const updateYear = async (e: number) => {
+  dateMonth.value = { month: 0, year: e };
+  emit("update:dateYear", dateYear.value);
+  await props.fetchDataSummaryCalendar();
+};
+
+/**
+ * ฟังก์ชันปุ่มเพิ่มวันหยุดแบบเลือกวันได้
+ */
+const addCalendar = () => {
+  dateAdd.value = [new Date(), new Date()];
+  name.value = "";
+  category.value = "all";
+  isSpecial.value = true;
+  modalAdd.value = true;
+};
+
+/**
+ * ฟังก์ชัน copy วันหยุดจากปีนิงไปอีกปี
+ */
+const copyCalendar = () => {
+  modalCopy.value = true;
+  dateYearStart.value = new Date().getFullYear();
+  dateYearEnd.value = new Date().getFullYear() + 1;
+};
+
+/**
+ * ฟังก์ชันปุ่มบันทึกเพิ่มวันหยุด
+ */
+const onSubmit = async () => {
+  await formDate.value.validate().then(async (result: boolean) => {
+    if (result) {
+      const dataAdd = ref<DataDateAddObject[]>([]);
+      let i = 0;
+      const dateStart = ref<Date>(dateAdd.value[0]);
+      do {
+        i = i + 1;
+        dataAdd.value.push({
+          year: new Date(dateStart.value).getFullYear(),
+          holidayDate: dateToISO(new Date(dateStart.value)),
+          name: name.value,
+          isSpecial: true,
+        });
+        dateStart.value = new Date(
+          new Date(dateStart.value).setDate(
+            new Date(dateStart.value).getDate() + 1
+          )
+        );
+      } while (new Date(dateStart.value) <= new Date(dateAdd.value[1]));
+      loaderPage(true);
+      await http
+        .post(config.API.listHolidayHistoryAdd(category.value), dataAdd.value)
+        .then((res) => {
+          modalAdd.value = false;
+          success($q, "เพิ่มวันหยุดสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          refreshData.value = !refreshData.value;
+          loaderPage(false);
+        });
+    }
+  });
+  await props.fetchDataSummaryCalendar();
+};
+
+/**
+ * ฟังก์ชันคัดลอกวันหยุด
+ */
+const onSubmitCopy = async () => {
+  if (dateYearStart.value >= dateYearEnd.value) {
+    dialogMessage(
+      $q,
+      "ไม่สามารถคัดลอกวันหยุดได้",
+      "ปีที่เริ่มต้นคัดลอกต้องมากกว่าปีที่จะลงวันคัดลอก",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+    return;
+  }
+  loaderPage(true);
+  await http
+    .post(config.API.listHolidayCopy, {
+      fromYear: dateYearStart.value,
+      toYear: dateYearEnd.value,
+    })
+    .then((res) => {
+      modalCopy.value = false;
+      success($q, "คัดลอกวันหยุดสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      refreshData.value = !refreshData.value;
+      await props.fetchDataSummaryCalendar();
+    });
+};
+
+/**
+ * แปลง ปีและเดือนเป็นภาษาไทย
+ * @param val datepicker แบบเลือกปีและเดือน
+ */
+const monthYearThai = (val: DataDateMonthObject) => {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+};
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+const dateThaiRange = (val: [Date, Date] | []) => {
+  if (val.length === 0) {
+  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
+    return `${date2Thai(val[0])}`;
+  } else {
+    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
+  }
+};
+</script>
+
+<style>
+.my-menu-link {
+  color: black;
+  background: #d0d0d0;
+}
+
+.my-list-link {
+  color: black;
+  border-radius: 5px;
+  background: #f4f4f4;
+}
+
+.my-list {
+  padding: 10px 10px;
+}
+
+.my-card {
+  width: 100%;
+  max-width: 160px;
+}
+
+.sub-card {
+  height: 100%;
+  max-height: 265px;
+}
+
+.cardNum {
+  border-radius: 5px;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  padding-left: 5px;
+}
+</style>