hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

filter รายงานทะเบียนประวัติ

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2025-02-24 11:41:25 +07:00
parent c4e857e491
commit a353681605
1 changed files with 144 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

172
src/modules/21_report/views/02_reportRegistry.vue
View file

@ -5,10 +5,12 @@ import * as XLSX from "xlsx";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { useReportStore } from "@/modules/21_report/store";
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
import { useStructureTree } from "@/stores/structureTree";
import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
import type {
@ -24,9 +26,10 @@ import type {
import DialogOrg from "@/modules/21_report/components/01_org/DialogOrg.vue";
const $q = useQuasar();
const route = useRoute();
const storeReport = useReportStore();
const stroeRegistry = useRegistryNewDataStore();
const { fetchStructureTree } = useStructureTree();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader, date2Thai } = mixin;
@ -486,8 +489,8 @@ async function onSearch() {
education: education.value,
ageMin: rangeAge.value.min,
ageMax: rangeAge.value.max,
dateStart: dateStart.value ?? "",
dateEnd: dateEnd.value ?? "",
dateStart: dateStart.value ?? null,
dateEnd: dateEnd.value ?? null,
isProbation: isProbation.value,
isRetire: isRetire.value,
@ -587,15 +590,44 @@ function clearFilter() {
isProbation.value = false; //ทดลองปฏิบัติราชการ
isRetire.value = false; //แสดงผู้พ้นจากราชการ
retireType.value = ""; //ประเภมการพ้นราชการ
expandedModal.value = false;
filterTree.value = "";
}
watch(
() => pagination.value.descending,
() => {
sortBy.value = pagination.value.descending ? "DESC" : "ASC";
if (pagination.value.sortBy === "dateAppoint") {
sortBy.value = pagination.value.descending ? "DESC" : "ASC";
}
}
);
const node = ref<any[]>([]);
const filterTree = ref<string>("");
const expanded = ref<string[]>([]);
const expandedModal = ref<boolean>(false);
async function fetchTree() {
const data = await fetchStructureTree(route.meta.Key as string, true);
if (data) {
node.value = data;
}
}
/**
* ฟังก์ชันเลือกหน่วยงาน/ส่วนราชการ
* @param data ข้อมูลหน่วยงาน/ส่วนราชการที่ต้องการค้นหาร
* เพื่อค้นหาข้อมูลตามหน่วยงาน/ส่วนราชการ
*/
function updateSelectedTreeMain(data: any) {
org.value = data.orgName;
storeReport.formFilter.node = data.orgLevel;
storeReport.formFilter.nodeId = data.orgTreeId;
expandedModal.value = false
}
onMounted(async () => {
showLoader();
Promise.all([
@ -604,6 +636,7 @@ onMounted(async () => {
getExecutive(),
getDataPerson(),
getEducationLevel(),
fetchTree(),
])
.catch((e) => {
@ -750,29 +783,103 @@ onMounted(async () => {
<q-separator />
<div class="row col-12">
<div class="row col-12 q-col-x-gutter-xs items-center">
<div class="col-12 q-px-sm">
<q-input
<div class="col-12">
<q-expansion-item
v-model="expandedModal"
dense
:model-value="org ? org : 'ทั้งหมด'"
autogrow
borderless
label="สังกัด"
class="bg-white"
@click="onOpenOrg"
dense-toggle
expand-separator
class="expansion-item"
>
<template v-if="org" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(org = ''),
(storeReport.formFilter.node = null),
(storeReport.formFilter.nodeId = null)
"
class="cursor-pointer"
style="opacity: 0.6"
/>
<template #header>
<div class="full-width flex items-stretch">
<q-input
dense
:model-value="org ? org : 'ทั้งหมด'"
autogrow
borderless
label="สังกัด"
class="bg-white full-width "
>
<template v-if="org" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(org = ''),
(storeReport.formFilter.node = null),
(storeReport.formFilter.nodeId = null)
"
class="cursor-pointer"
style="opacity: 0.6"
/>
</template>
</q-input>
</div>
<!-- @click="onOpenOrg" -->
</template>
</q-input>
<q-separator />
<q-card-section>
<q-input
dense
outlined
v-model="filterTree"
label="ค้นหา"
>
<template v-slot:append>
<q-icon
v-if="filterTree !== ''"
name="clear"
class="cursor-pointer"
@click="filterTree = ''"
/>
<q-icon v-else name="search" color="grey-5" />
</template>
</q-input>
<q-tree
class="tree-container q-mt-sm"
dense
:nodes="node"
node-key="orgTreeName"
label-key="labelName"
v-model:expanded="expanded"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
:filter="filterTree.trim()"
>
<template v-slot:default-header="prop">
<q-item
clickable
active-class="my-list-link text-primary text-weight-medium"
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
:active="
storeReport.formFilter.nodeId ===
prop.node.orgTreeId
"
@click.stop="updateSelectedTreeMain(prop.node)"
>
<div>
<div class="text-weight-medium">
{{ prop.node.orgTreeName }}
</div>
<div class="text-weight-light text-grey-8">
{{
prop.node.orgCode == null
? null
: prop.node.orgCode
}}
{{
prop.node.orgTreeShortName == null
? null
: prop.node.orgTreeShortName
}}
</div>
</div>
</q-item>
</template>
</q-tree>
</q-card-section>
</q-expansion-item>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 q-px-sm">
@ -1307,7 +1414,7 @@ onMounted(async () => {
</q-card>
</div>
<div class="col-lg-10 col-md-9 col-sm-9 col-xs-12 col-xs-12 flex">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 col-xs-12 flex">
<q-card bordered class="col-12">
<div class="row col-12 q-pa-sm items-center">
<div
@ -1427,9 +1534,7 @@ onMounted(async () => {
.tree-container {
overflow: auto;
height: 60vh;
border: 1px solid #e6e6e7;
border-radius: 10px;
height: 50vh;
}
.my-list-link {
color: rgb(118, 168, 222);
@ -1438,4 +1543,15 @@ onMounted(async () => {
font-weight: 600;
border: 1px solid rgba(175, 185, 196, 0.217);
}
.expansion-item {
.q-item__section--side {
padding-right: 3px;
}
.q-item--dense {
min-height: 32px;
padding: 2px 9px;
}
}
</style>