clone code
This commit is contained in:
Kittapath
parent
c9597d1e38
commit
d57bcd1719
362 changed files with 104804 additions and 0 deletions
761
src/modules/01_metadata/views/Main.vue
Normal file
761
src/modules/01_metadata/views/Main.vue
Normal file
|
|
@ -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."); }
|
||||
Loading…
Add table
Add a link
Reference in a new issue