Merge branch 'develop' of github.com:Frappet/hrms-mgt into develop

This commit is contained in:
Warunee Tamkoo 2025-03-06 11:52:02 +07:00
commit 3f7c8edb60
8 changed files with 518 additions and 506 deletions

View file

@ -26,7 +26,6 @@ import DialogHistory from "@/modules/04_registryPerson/components/detail/Governm
import { useCounterMixin } from "@/stores/mixin";
import { useSalaryDataStore } from "@/modules/04_registryPerson/stores/salary";
import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
const { findOrgName } = useCounterMixin();
const $q = useQuasar();
const route = useRoute();
@ -50,6 +49,7 @@ const {
pathRegistryEmp,
onSearchDataTable,
formatDatePosition,
findOrgName,
} = useCounterMixin();
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
@ -561,13 +561,13 @@ function onSubmit() {
!isStatusEdit.value && empType.value === ""
? profileId.value
: undefined,
date: formDataSalary.date, //
// date: formDataSalary.date, //
posNo: formDataSalary.posNo, //
position: formDataSalary.position, //
positionLine:
empType.value === "" ? formDataSalary.positionLine : undefined, //
positionPathSide:
empType.value === "" ? formDataSalary.positionPathSide : undefined, // /
// position: formDataSalary.position, //
// positionLine:
// empType.value === "" ? formDataSalary.positionLine : undefined, //
// positionPathSide:
// empType.value === "" ? formDataSalary.positionPathSide : undefined, // /
positionExecutive:
empType.value === "" ? formDataSalary.positionExecutive : undefined, //
positionType: formDataSalary.positionType, //
@ -588,8 +588,12 @@ function onSubmit() {
typeof formDataSalary.amountSpecial === "number"
? formDataSalary.amountSpecial
: Number(formDataSalary?.amountSpecial?.replace(/,/g, "")), //
refCommandNo: formDataSalary.refCommandNo, //
templateDoc: formDataSalary.doc, //
// refCommandNo: formDataSalary.refCommandNo, //
// templateDoc: formDataSalary.doc, //
posNoAbb: null,
positionName: "positionName",
remark: "remark",
commandCode: "1",
};
try {

View file

@ -21,6 +21,7 @@ const {
messageError,
pathRegistryEmp,
onSearchDataTable,
findOrgName,
} = useCounterMixin();
/** props*/
@ -36,7 +37,7 @@ const baseColumns = ref<QTableProps["columns"]>([
{
name: "commandDateAffect",
align: "left",
label: "วัน เดือน ปี",
label: "วันที่คำสั่งมีผล",
sortable: true,
field: "commandDateAffect",
headerStyle: "font-size: 14px",
@ -47,70 +48,6 @@ const baseColumns = ref<QTableProps["columns"]>([
.toString()
.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "amount",
align: "left",
label: empType.value === "-employee" ? "ค่าตอบแทนรายเดือน" : "เงินเดือน",
sortable: true,
field: "amount",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => Number(v).toLocaleString(),
sort: (a: string, b: string) =>
a
.toString()
.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionSalaryAmount",
align: "left",
label: "เงินประจำตำแหน่ง",
sortable: true,
field: "positionSalaryAmount",
headerStyle: "font-size: 14px",
format: (v) => Number(v).toLocaleString(),
style: "font-size: 14px",
sort: (a: string, b: string) =>
a
.toString()
.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "mouthSalaryAmount",
align: "left",
label: "เงินค่าตอบแทนรายเดือน",
sortable: true,
field: "mouthSalaryAmount",
headerStyle: "font-size: 14px",
format: (v) => Number(v).toLocaleString(),
style: "font-size: 14px",
sort: (a: string, b: string) =>
a
.toString()
.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "oc",
align: "left",
label: "สังกัด",
sortable: true,
field: "oc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionName",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "positionName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "posNo",
align: "left",
@ -127,45 +64,40 @@ const baseColumns = ref<QTableProps["columns"]>([
: "-";
},
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
a
.toString()
.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionLine",
name: "positionName",
align: "left",
label: "สายงาน",
label: empType.value === "-employee" ? "ตำแหน่ง" : "ตำแหน่งในสายงาน",
sortable: true,
field: "positionLine",
field: "positionName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionPathSide",
align: "left",
label: "ด้าน/สาขา",
sortable: true,
field: "positionPathSide",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
a
.toString()
.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionType",
align: "left",
label: "ตำแหน่งประเภท",
label: empType.value === "-employee" ? "กลุ่มงาน" : "ประเภทตำแหน่ง",
sortable: true,
field: "positionType",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
a
.toString()
.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
label: empType.value === "-employee" ? "ระดับชั้นงาน" : "ระดับ",
sortable: true,
field: "positionLevel",
format(val, row) {
@ -194,38 +126,47 @@ const baseColumns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionExecutiveSide",
name: "amount",
align: "left",
label: "ด้านทางการบริหาร",
label: empType.value === "-employee" ? "ค่าตอบแทนรายเดือน" : "เงินเดือน",
sortable: true,
field: "positionExecutiveSide",
field: "amount",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => Number(v).toLocaleString(),
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "salaryClass",
align: "left",
label: "ตำแหน่ง (รายละเอียด)",
sortable: true,
field: "salaryClass",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "commandName",
align: "left",
label: "เอกสารอ้างอิง",
sortable: true,
field: "commandName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
a
.toString()
.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
// {
// name: "positionSalaryAmount",
// align: "left",
// label: "",
// sortable: true,
// field: "positionSalaryAmount",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// format: (v) => Number(v).toLocaleString(),
// sort: (a: string, b: string) =>
// a
// .toString()
// .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
// {
// name: "mouthSalaryAmount",
// align: "left",
// label: "",
// sortable: true,
// field: "mouthSalaryAmount",
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// format: (v) => Number(v).toLocaleString(),
// sort: (a: string, b: string) =>
// a
// .toString()
// .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
// },
{
name: "refCommandNo",
align: "left",
@ -242,6 +183,51 @@ const baseColumns = ref<QTableProps["columns"]>([
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "commandName",
align: "left",
label: "ประเภทคำสั่ง",
sortable: true,
field: "commandName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "commandDateSign",
align: "left",
label: "วันที่ลงนาม",
sortable: true,
field: "commandDateSign",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => date2Thai(v),
sort: (a: string, b: string) =>
a
.toString()
.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "organization",
align: "left",
label: "สังกัด",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format(val, row) {
return findOrgName({
root: row.orgRoot,
child1: row.orgChild1,
child2: row.orgChild2,
child3: row.orgChild3,
child4: row.orgChild4,
});
},
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "remark",
align: "left",
@ -253,48 +239,22 @@ const baseColumns = ref<QTableProps["columns"]>([
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastUpdateFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "lastUpdateFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastUpdatedAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "lastUpdatedAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => date2Thai(v, false, true),
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumns = ref<string[]>([
"commandDateAffect",
"amount",
"positionSalaryAmount",
"mouthSalaryAmount",
"oc",
"positionName",
"posNo",
"positionLine",
"positionPathSide",
"positionName",
"positionType",
"positionLevel",
"positionExecutive",
"positionExecutiveSide",
"salaryClass",
"commandDateSign",
"commandName",
"refCommandNo",
"remark",
"organization",
"lastUpdateFullName",
"lastUpdatedAt",
]);

View file

@ -1,12 +1,5 @@
<script setup lang="ts">
import {
ref,
reactive,
onMounted,
watch,
defineAsyncComponent,
computed,
} from "vue";
import { ref, reactive, onMounted, watch, defineAsyncComponent } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
@ -340,9 +333,7 @@ function clearSelect(t: string) {
fetchDataPerson();
}
/**
* งกนดงขอโครงสราง
*/
/** ฟังก์ชันดึงข้อโครงสร้าง*/
async function fetchTree() {
const data = await fetchStructureTree(route.meta.Key as string);
if (store.routerName !== route.name) {
@ -466,366 +457,366 @@ onMounted(async () => {
</div>
</q-form>
<div class="row q-mt-sm q-gutter-sm">
<q-btn-dropdown
flat
rounded
dense
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-pl-sm"
@click="() => ((selectNode = true), showLoader())"
>
<template v-slot:label>
{{
`${
store.labelOption.node !== "เลือกหน่วยงาน"
? store.labelOption.node
: empType === "officer"
? "เลือกหน่วยงาน/ส่วนราชการ"
: "เลือกหน่วยงาน"
}`
}}
<q-btn
v-if="
store.labelOption.node !== 'เลือกหน่วยงาน' &&
store.labelOption.node !== 'เลือกหน่วยงาน/ส่วนราชการ'
<div class="row">
<div class="col-10">
<div class="row q-mt-sm q-gutter-sm">
<q-btn-dropdown
flat
rounded
dense
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-pl-sm"
@click="() => ((selectNode = true), showLoader())"
>
<template v-slot:label>
{{
`${
store.labelOption.node !== "เลือกหน่วยงาน"
? store.labelOption.node
: empType === "officer"
? "เลือกหน่วยงาน/ส่วนราชการ"
: "เลือกหน่วยงาน"
}`
}}
<q-btn
v-if="
store.labelOption.node !== 'เลือกหน่วยงาน' &&
store.labelOption.node !== 'เลือกหน่วยงาน/ส่วนราชการ'
"
size="10px"
flat
round
color="white"
icon="close"
@click.stop.prevent="clearSelect('org')"
/>
</template>
</q-btn-dropdown>
<q-toggle
v-if="store.formFilter.nodeId"
v-model="store.formFilter.isAll"
color="primary"
label="แสดงทุกตำแหน่ง"
class="q-pr-sm"
@update:model-value="getSearch"
>
<q-tooltip
>แสดงทกตำแหนงทอยภายใตหนวยงาน/วนราชการทเลอก</q-tooltip
>
</q-toggle>
<q-separator inset vertical class="lineFil" />
<q-btn-dropdown
rounded
flat
dense
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
>
<template v-slot:label>
{{
store.labelOption.posType !== "ทั้งหมด"
? store.labelOption.posType
: empType === "officer"
? `ตำแหน่งประเภท${store.labelOption.posType}`
: `กลุ่มงาน${store.labelOption.posType}`
}}
<q-btn
v-if="store.labelOption.posType !== 'ทั้งหมด'"
size="10px"
flat
round
color="white"
icon="close"
@click.stop.prevent="clearSelect('posType')"
/>
</template>
<q-list>
<q-item
v-for="(item, index) in store.posTypeOps"
:key="index"
clickable
v-close-popup
@click="selectPosType(item)"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<!-- <q-separator inset vertical class="lineFil" /> -->
<q-btn-dropdown
flat
dense
rounded
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
:disable="
store.labelOption.posType === 'ทั้งหมด' ? true : false
"
size="10px"
flat
round
color="white"
icon="close"
@click.stop.prevent="clearSelect('org')"
/>
</template>
</q-btn-dropdown>
>
<template v-slot:label>
{{
store.labelOption.posLevel !== "ทั้งหมด"
? store.labelOption.posLevel
: empType === "officer"
? `ระดับ${store.labelOption.posLevel}`
: `ระดับชั้นงาน${store.labelOption.posLevel}`
}}
<q-btn
size="10px"
flat
round
color="white"
icon="close"
v-if="store.labelOption.posLevel !== 'ทั้งหมด'"
@click.stop.prevent="clearSelect('posLevel')"
/>
</template>
<q-list
:style="store.posLevelOps.length > 9 ? 'height: 450px' : ''"
>
<q-item
v-for="(item, index) in store.posLevelOps"
:key="index"
clickable
v-close-popup
@click="selectPosLevel(item)"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-toggle
v-if="store.formFilter.nodeId"
v-model="store.formFilter.isAll"
color="primary"
label="แสดงทุกตำแหน่ง"
class="q-pr-sm"
@update:model-value="getSearch"
>
<q-tooltip
>แสดงทกตำแหนงทอยภายใตหนวยงาน/วนราชการทเลอก</q-tooltip
<q-space />
<!-- <q-separator
inset
vertical
class="lineFil"
v-if="empType !== 'officer' && store.formFilter.nodeId"
/> -->
<!-- <q-toggle
v-if="empType !== 'officer' && store.formFilter.nodeId"
v-model="store.formFilter.isAll"
color="primary"
label="แสดงตำแหน่งทั้งหมด"
@update:model-value="getSearch"
/> -->
</div>
<div
class="row q-gutter-sm justify-start"
v-if="empType !== 'officer'"
>
</q-toggle>
<q-separator inset vertical class="lineFil" />
<q-btn-dropdown
rounded
flat
dense
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
>
<template v-slot:label>
{{
store.labelOption.posType !== "ทั้งหมด"
? store.labelOption.posType
: empType === "officer"
? `ตำแหน่งประเภท${store.labelOption.posType}`
: `กลุ่มงาน${store.labelOption.posType}`
}}
<q-btn
v-if="store.labelOption.posType !== 'ทั้งหมด'"
size="10px"
flat
round
color="white"
icon="close"
@click.stop.prevent="clearSelect('posType')"
<q-toggle
v-model="store.formFilter.isShowRetire"
color="primary"
label="แสดงข้อมูลผู้พ้นจากราชการ"
class="q-pr-sm"
@update:model-value="getSearch"
/>
</template>
<q-list>
<q-item
v-for="(item, index) in store.posTypeOps"
:key="index"
clickable
v-close-popup
@click="selectPosType(item)"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<!-- <q-separator inset vertical class="lineFil" /> -->
<q-btn-dropdown
flat
dense
rounded
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
:disable="store.labelOption.posType === 'ทั้งหมด' ? true : false"
>
<template v-slot:label>
{{
store.labelOption.posLevel !== "ทั้งหมด"
? store.labelOption.posLevel
: empType === "officer"
? `ระดับ${store.labelOption.posLevel}`
: `ระดับชั้นงาน${store.labelOption.posLevel}`
}}
<q-btn
size="10px"
<q-btn-dropdown
v-if="store.formFilter.isShowRetire"
rounded
flat
round
color="white"
icon="close"
v-if="store.labelOption.posLevel !== 'ทั้งหมด'"
@click.stop.prevent="clearSelect('posLevel')"
/>
</template>
<q-list
:style="store.posLevelOps.length > 9 ? 'height: 450px' : ''"
>
<q-item
v-for="(item, index) in store.posLevelOps"
:key="index"
clickable
v-close-popup
@click="selectPosLevel(item)"
dense
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<template v-slot:label>
{{
store.labelOption.retireType !== "ทั้งหมด"
? store.labelOption.retireType
: `${store.labelOption.retireType}`
}}
<q-btn
v-if="store.labelOption.retireType !== 'ทั้งหมด'"
size="10px"
flat
round
color="white"
icon="close"
@click.stop.prevent="clearSelect('retireType')"
/>
</template>
<q-list>
<q-item
v-for="(item, index) in store.retireTypeEmpOps"
:key="index"
clickable
v-close-popup
@click="selectRetireType(item)"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-space />
<div class="q-pt-sm q-pr-sm">
<!-- <a href="/report/registry" class="text-white">
การคนหาขนส
<q-tooltip
>ไปยงหนาการคนหาขนส (Advanced search)</q-tooltip
<q-separator inset vertical class="lineFil" />
<q-btn-dropdown
rounded
flat
dense
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
>
</a> -->
<q-btn
flat
@click="goToAdvancedSearch"
class="text-white"
style="text-decoration: underline"
label="การค้นหาขั้นสูง"
<template v-slot:label>
{{
`ลำดับการแสดผล ${
store.formFilter.dateAppoint
? store.formFilter.dateAppoint === "ASC"
? "เก่า-ล่าสุด"
: "ล่าสุด-เก่า"
: ""
}`
}}
</template>
<q-list>
<q-item
v-for="(item, index) in store.displayOrderOps"
:key="index"
clickable
v-close-popup
@click="selectDisplayOrderType(item)"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
<div
v-if="empType === 'officer'"
class="row q-gutter-sm justify-start"
>
<q-tooltip
>ไปยงหนาการคนหาขนส (Advanced search)</q-tooltip
<q-toggle
v-model="store.formFilter.isProbation"
color="primary"
label="ทดลองปฏิบัติหน้าที่ราชการ"
class="q-pr-sm"
@update:model-value="getSearch"
/>
<q-separator inset vertical class="lineFil" />
<q-toggle
v-model="store.formFilter.isShowRetire"
color="primary"
label="แสดงข้อมูลผู้พ้นจากราชการ"
class="q-pr-sm"
@update:model-value="getSearch"
/>
<q-btn-dropdown
v-if="store.formFilter.isShowRetire"
rounded
flat
dense
label-color="white"
dropdown-icon="mdi-chevron-down"
>
</q-btn>
<template v-slot:label>
{{
store.labelOption.retireType !== "ทั้งหมด"
? store.labelOption.retireType
: `${store.labelOption.retireType}`
}}
<q-btn
v-if="store.labelOption.retireType !== 'ทั้งหมด'"
size="10px"
flat
round
color="white"
icon="close"
@click.stop.prevent="clearSelect('retireType')"
/>
</template>
<q-list>
<q-item
v-for="(item, index) in store.retireTypeOps"
:key="index"
clickable
v-close-popup
@click="selectRetireType(item)"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-separator inset vertical class="lineFil" />
<!-- <q-toggle
v-if="store.formFilter.nodeId"
v-model="store.formFilter.isAll"
color="primary"
label="แสดงตำแหน่งทั้งหมด"
@update:model-value="getSearch"
/> -->
<q-btn-dropdown
rounded
flat
dense
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
>
<template v-slot:label>
{{ store.labelOption.sortName }}
</template>
<q-list>
<q-item
v-for="(item, index) in store.displayOrderOps"
:key="index"
clickable
v-close-popup
@click="selectDisplayOrderType(item)"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
</div>
<!-- <q-separator
inset
vertical
class="lineFil"
v-if="empType !== 'officer' && store.formFilter.nodeId"
/> -->
<!-- <q-toggle
v-if="empType !== 'officer' && store.formFilter.nodeId"
v-model="store.formFilter.isAll"
color="primary"
label="แสดงตำแหน่งทั้งหมด"
@update:model-value="getSearch"
/> -->
</div>
<div
class="row q-gutter-sm justify-start"
v-if="empType !== 'officer'"
>
<q-toggle
v-model="store.formFilter.isShowRetire"
color="primary"
label="แสดงข้อมูลผู้พ้นจากราชการ"
class="q-pr-sm"
@update:model-value="getSearch"
/>
<q-btn-dropdown
v-if="store.formFilter.isShowRetire"
rounded
flat
dense
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
>
<template v-slot:label>
{{
store.labelOption.retireType !== "ทั้งหมด"
? store.labelOption.retireType
: `${store.labelOption.retireType}`
}}
<div class="col-2">
<div class="q-pt-sm flex justify-end">
<q-btn
v-if="store.labelOption.retireType !== 'ทั้งหมด'"
size="10px"
flat
round
color="white"
icon="close"
@click.stop.prevent="clearSelect('retireType')"
/>
</template>
<q-list>
<q-item
v-for="(item, index) in store.retireTypeEmpOps"
:key="index"
clickable
v-close-popup
@click="selectRetireType(item)"
@click="goToAdvancedSearch"
class="text-white"
style="text-decoration: underline"
label="การค้นหาขั้นสูง"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-separator inset vertical class="lineFil" />
<q-btn-dropdown
rounded
flat
dense
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
>
<template v-slot:label>
{{
`ลำดับการแสดผล ${
store.formFilter.dateAppoint
? store.formFilter.dateAppoint === "ASC"
? "เก่า-ล่าสุด"
: "ล่าสุด-เก่า"
: ""
}`
}}
</template>
<q-list>
<q-item
v-for="(item, index) in store.displayOrderOps"
:key="index"
clickable
v-close-popup
@click="selectDisplayOrderType(item)"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-tooltip
>ไปยงหนาการคนหาขนส (Advanced search)</q-tooltip
>
</q-btn>
</div>
</div>
</div>
<div
v-if="empType === 'officer'"
class="row q-gutter-sm justify-start"
>
<q-toggle
v-model="store.formFilter.isProbation"
color="primary"
label="ทดลองปฏิบัติหน้าที่ราชการ"
class="q-pr-sm"
@update:model-value="getSearch"
/>
<q-separator inset vertical class="lineFil" />
<q-toggle
v-model="store.formFilter.isShowRetire"
color="primary"
label="แสดงข้อมูลผู้พ้นจากราชการ"
class="q-pr-sm"
@update:model-value="getSearch"
/>
<q-btn-dropdown
v-if="store.formFilter.isShowRetire"
rounded
flat
dense
label-color="white"
dropdown-icon="mdi-chevron-down"
>
<template v-slot:label>
{{
store.labelOption.retireType !== "ทั้งหมด"
? store.labelOption.retireType
: `${store.labelOption.retireType}`
}}
<q-btn
v-if="store.labelOption.retireType !== 'ทั้งหมด'"
size="10px"
flat
round
color="white"
icon="close"
@click.stop.prevent="clearSelect('retireType')"
/>
</template>
<q-list>
<q-item
v-for="(item, index) in store.retireTypeOps"
:key="index"
clickable
v-close-popup
@click="selectRetireType(item)"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-separator inset vertical class="lineFil" />
<!-- <q-toggle
v-if="store.formFilter.nodeId"
v-model="store.formFilter.isAll"
color="primary"
label="แสดงตำแหน่งทั้งหมด"
@update:model-value="getSearch"
/> -->
<q-btn-dropdown
rounded
flat
dense
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
>
<template v-slot:label>
{{ store.labelOption.sortName }}
</template>
<q-list>
<q-item
v-for="(item, index) in store.displayOrderOps"
:key="index"
clickable
v-close-popup
@click="selectDisplayOrderType(item)"
>
<q-item-section>
<q-item-label>{{ item.name }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
<!-- <div class="row justify-center">
<a href="/report/registry" class="text-white"> Advanced search </a>
</div> -->
</div>
</div>
</q-card-section>

View file

@ -30,6 +30,7 @@ const querySting = reactive<QuerySting>({
page: 1, //*
pageSize: 10, //*
keyword: leaveStore.filter.keyword, //keyword
profileType: 'ALL', //profileType
});
//** API*/

View file

@ -33,6 +33,7 @@ const querySting = reactive<QuerySting>({
page: 1, //*
pageSize: 10, //*
keyword: leaveStore.filter.keyword, //keyword
profileType: 'ALL', //profileType
});
//** API*/
async function fecthLeaveList() {

View file

@ -23,6 +23,12 @@ const props = defineProps({
});
/** Option*/
const roleMainOp = ref<DataOption[]>([
{ id: "OFFICER", name: "ข้าราชการ กทม. สามัญ" },
{ id: "EMPLOYEE", name: "ลูกจ้างประจำ กทม." },
]);
const roleOp = ref<DataOption[]>();
const optionTypeMain = ref<DataOption[]>([]);
const optionType = ref<DataOption[]>([]);
const optionStatus = ref<DataOption[]>([
@ -91,6 +97,18 @@ function filterOption(val: string, update: any, name: string) {
});
}
/**
* function นหาขอมลใน option
* @param val คำคนหา
* @param update function
*/
function filterOptionFn(val: string, update: Function) {
update(() => {
const data = roleMainOp.value;
roleOp.value = data.filter((e: any) => e.name.search(val) !== -1);
});
}
watch(
async () => props.dataToobar,
() => {
@ -116,6 +134,42 @@ watch(
<template>
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div class="col-xs-12 col-sm-3 col-md-2">
<q-select
emit-value
map-options
outlined
dense
option-value="id"
option-label="name"
label="สถานภาพ"
use-input
:model-value="
querySting.profileType == 'ALL' ? 'ทั้งหมด' : querySting.profileType
"
hide-selected
fill-input
:options="roleOp"
@update:model-value="(value:any)=>(querySting.profileType = value,props.getSearch?.())"
@filter="(inputValue:string,
doneFn:Function) => filterOptionFn(inputValue,doneFn)"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey"> ไมอม </q-item-section>
</q-item>
</template>
<template v-if="querySting.profileType !== 'ALL'" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(querySting.profileType = 'ALL'), props.getSearch?.()
"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<div class="col-xs-12 col-sm-3 col-md-1">
<datepicker
menu-class-name="modalfix"
v-model="querySting.year"
@ -245,7 +299,7 @@ watch(
</template>
</q-input>
</div>
<div class="col-xs-12 col-sm-3 col-md-2">
<div class="col-xs-12 col-sm-3 col-md-1">
<q-select
for="visibleColumns"
v-model="leaveStore.visibleColumns"
@ -256,7 +310,6 @@ watch(
:display-value="$q.lang.table.columns"
emit-value
map-options
style="min-width: 140px"
:options="leaveStore.columns"
option-value="name"
/>

View file

@ -12,6 +12,7 @@ interface QuerySting {
page: number; //*หน้า
pageSize: number; //*จำนวนแถวต่อหน้า
keyword: string; //keyword ค้นหา
profileType: string;
}
interface DateFilter {

View file

@ -79,6 +79,7 @@ export const useLeavelistDataStore = defineStore("leave", () => {
async function fetchListLeaveReject(data: any[]) {
let datalist = data.map((e: FremData) => ({
id: e.id,
profileType: e.profileType ?? '-',
leaveTypeName: e.leaveTypeName,
leaveTypeId: e.leaveTypeId,
fullName: e.fullName,