764 lines
29 KiB
Vue
764 lines
29 KiB
Vue
<!-- 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 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, showLoader, hideLoader } = mixin;
|
|
const store = useManageDataStore();
|
|
|
|
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_type" },
|
|
{ label: "ชื่อสายงาน", value: "position_line" },
|
|
{ label: "ชื่อตำแหน่งสายงาน", value: "position_path" },
|
|
{ label: "ด้าน/สาขา ของสายงาน", value: "position_pathSide" },
|
|
{ label: "ระดับตำแหน่ง", value: "position_level" },
|
|
{ label: "ชื่อตำแหน่งทางการบริหาร", value: "position_executive" },
|
|
{ label: "ด้านทางการบริหาร", value: "position_executiveSide" },
|
|
{ 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 = [];
|
|
showLoader();
|
|
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(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
/**
|
|
* ฟังก์ชันสำหรับ refresh สรุปจำนวนข้อมูลจัดการที่ component ให้อัพเดท
|
|
*/
|
|
const fetchDataSummarySubComponent = async () => {
|
|
await fetchDataSummarySub(link.value);
|
|
};
|
|
/**
|
|
* สรุปจำนวน จัดการข้อมูลหลักแต่ละระบบย่อย
|
|
*/
|
|
const fetchDataSummarySub = async (val: number) => {
|
|
dataNum.value = [];
|
|
// showLoader();
|
|
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(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
/**
|
|
* สรุปวันหยุด
|
|
*/
|
|
const fetchDataSummaryCalendar = async () => {
|
|
showLoader();
|
|
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(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
/**
|
|
* ขนาดการ์ดสรุปข้อมูล 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."); }
|