Merge pull request #1465 from Frappet/SortLeave

SortLeave
This commit is contained in:
Warunee Tamkoo 2025-10-08 16:45:43 +07:00 committed by GitHub
commit 74de61a809
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 168 additions and 222 deletions

View file

@ -5,29 +5,32 @@ import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore";
import { calculateFiscalYear } from "@/utils/function";
import { usePagination } from "@/composables/usePagination";
import type { QTableColumn } from "quasar";
import type {
DataOption,
DataPagination,
} from "@/modules/09_leave/interface/index/Main";
import type { DataOption } from "@/modules/09_leave/interface/index/Main";
import type {
DataLeaveType,
DataLeaveBeginning,
} from "@/modules/09_leave/interface/response/leaveHistory";
import DialogHeader from "@/components/DialogHeader.vue";
import { max } from "moment";
/** useStore*/
const $q = useQuasar();
const route = useRoute();
const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
const { findYear } = useLeaveHistoryDataStore();
const { dialogConfirm, showLoader, success, messageError, hideLoader } =
useCounterMixin();
const { pagination, params, onRequest } = usePagination("", () =>
onSearchData(false)
);
const modal = defineModel<boolean>("modal", { required: true });
const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
const rowData = defineModel<DataLeaveBeginning>("rowData", {
@ -42,18 +45,13 @@ const formFilter = reactive({
citizenId: "",
type: "citizenId",
keyword: "",
page: 1,
pageSize: 10,
});
const searchTypeOption = ref<DataOption[]>([
{ id: "citizenId", name: "เลขประจำตัวประชาชน" },
{ id: "firstName", name: "ชื่อ" },
{ id: "lastName", name: "นามสกุล" },
{ id: "fullName", name: "ชื่อ-นามสกุล" },
]);
const rows = ref<DataLeaveBeginning[]>([]);
const selected = ref<DataLeaveBeginning[]>([]);
const total = ref<number>(0);
const maxPage = ref<number>(0);
const columns = ref<QTableColumn[]>([
{
name: "citizenId",
@ -65,13 +63,16 @@ const columns = ref<QTableColumn[]>([
style: "font-size: 14px",
},
{
name: "fullName",
name: "firstName",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format(val, row) {
return `${row.prefix || ""}${row.firstName || ""} ${row.lastName || ""}`;
},
},
]);
@ -96,9 +97,7 @@ async function onSubmit() {
: `${config.API.leaveBeginning}/${rowId.value}`;
const method = !isStatusEdit.value ? "post" : "put";
await http[method](pathAPI, {
profileId: !isStatusEdit.value
? selected.value[0].profileId
: profileId.value,
profileId: !isStatusEdit.value ? selected.value[0].id : profileId.value,
leaveTypeId: formData.leaveTypeId,
leaveYear: formData.leaveYear,
leaveDays: formData.leaveDays ? Number(formData.leaveDays) : 0,
@ -123,25 +122,24 @@ async function onSubmit() {
/** ฟังก์ชันเรียกรายชื่อคน*/
async function fetchDataPerson() {
await http
.post(config.API.leaveSearch(), {
citizenId:
formFilter.type === "citizenId" ? formFilter.keyword.trim() : "", //
firstname:
formFilter.type === "firstName" ? formFilter.keyword.trim() : "", //
lastname: formFilter.type === "lastName" ? formFilter.keyword.trim() : "", //
page: formFilter.page, //
pageSize: formFilter.pageSize || 10, //
})
.then((res) => {
const data = res.data.result;
rows.value = data.data;
total.value = data.total;
maxPage.value = Math.ceil(data.total / formFilter.pageSize);
})
.catch((e) => {
messageError($q, e);
});
try {
const res = await http.post(
config.API.orgSearchPersonal(),
{
fieldName: formFilter.type,
keyword: formFilter.keyword.trim(),
system: (route.meta?.Key as string) || undefined,
},
{
params: params.value,
}
);
const result = res.data.result;
pagination.value.rowsNumber = result.total;
rows.value = result.data;
} catch (e) {
messageError($q, e);
}
}
/**
@ -168,7 +166,7 @@ async function onSearchData(newSearch: boolean) {
try {
showLoader();
if (newSearch) {
formFilter.page = 1;
pagination.value.page = 1;
}
await fetchDataPerson();
} finally {
@ -176,28 +174,25 @@ async function onSearchData(newSearch: boolean) {
}
}
/**
* งกนอปเดทรายการแถวตอหน
* @param newPagination อม Pagination ใหม
*/
function updatePagination(newPagination: DataPagination) {
formFilter.pageSize = newPagination.rowsPerPage;
}
/** ฟังก์ชันปิด Dialog*/
function onClose() {
modal.value = false;
formFilter.citizenId = "";
formFilter.type = "citizenId";
formFilter.keyword = "";
formFilter.page = 1;
formFilter.pageSize = 10;
formData.leaveTypeId = "";
formData.leaveYear = calculateFiscalYear(new Date());
formData.leaveDays = "";
formData.leaveDaysUsed = "";
rows.value = [];
selected.value = [];
pagination.value = {
page: 1,
rowsPerPage: 10,
rowsNumber: 0,
sortBy: "",
descending: false,
};
}
/**
@ -243,14 +238,6 @@ function classInput(val: boolean) {
};
}
/** Hook*/
watch(
() => formFilter.pageSize,
() => {
modal.value && onSearchData(true);
}
);
watch(modal, async (val) => {
if (val) {
try {
@ -259,8 +246,6 @@ watch(modal, async (val) => {
filterLeaveTypeData(),
isStatusEdit.value && defineDataLeaveBeginning(rowData.value),
]);
} catch (error) {
console.log(error);
} finally {
hideLoader();
}
@ -278,10 +263,14 @@ watch(modal, async (val) => {
/>
<q-separator />
<q-card-section :horizontal="$q.screen.gt.md" style="padding: 0px">
<div class="row col-12 q-gutter-sm">
<q-card-section
:horizontal="$q.screen.gt.md"
class="q-pa-none"
style="height: 50vh"
>
<div class="row col-12 no-wrap full-height">
<!-- รายช -->
<div class="q-pa-md col-md-8 col-xs-12" v-if="!isStatusEdit">
<div class="col-8 overflow-auto q-pa-md" v-if="!isStatusEdit">
<div class="row q-col-gutter-sm">
<div class="col-12 col-sm-6 col-md-3">
<q-select
@ -321,11 +310,11 @@ watch(modal, async (val) => {
</div>
<div class="col-12 q-pt-sm">
<d-table
<p-table
ref="table"
:columns="columns"
:rows="rows"
row-key="profileId"
row-key="id"
flat
bordered
:paging="true"
@ -333,7 +322,8 @@ watch(modal, async (val) => {
:rows-per-page-options="[10, 25, 50, 100]"
selection="single"
v-model:selected="selected"
@update:pagination="updatePagination"
v-model:pagination="pagination"
@request="onRequest"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -369,29 +359,14 @@ watch(modal, async (val) => {
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
งหมด {{ total.toLocaleString() }} รายการ
<q-pagination
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="onSearchData(false)"
></q-pagination>
</template>
</d-table>
</p-table>
</div>
</div>
<q-separator vertical />
<!-- input -->
<div class="q-pa-md col">
<div class="col overflow-hidden q-pa-md">
<div class="row q-col-gutter-sm">
<div class="col-12">
<datepicker

View file

@ -1,18 +1,17 @@
<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import { reactive, ref, onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { checkPermission } from "@/utils/permissions";
import { updateCurrentPage } from "@/utils/function";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore";
import { calculateFiscalYear } from "@/utils/function";
import { usePagination } from "@/composables/usePagination";
import type { QTableColumn } from "quasar";
import type { DataPagination } from "@/modules/09_leave/interface/index/Main";
import type {
DataLeaveType,
DataLeaveBeginning,
@ -22,22 +21,21 @@ import DialogForm from "@/modules/09_leave/components/07_LeaveHistory/DialogForm
const $q = useQuasar();
const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
const { findYear } = useLeaveHistoryDataStore();
const { showLoader, hideLoader, messageError, dialogRemove, success } =
useCounterMixin();
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
"",
() => onSearchData(false)
);
const formFilter = reactive({
year: calculateFiscalYear(new Date()),
type: "00000000-0000-0000-0000-000000000000",
page: 1,
pageSize: 10,
keyword: "",
});
const leaveTypeOptions = ref<DataLeaveType[]>([]);
const rows = ref<DataLeaveBeginning[]>([]);
const total = ref<number>(0);
const maxPage = ref<number>(0);
const columns = ref<QTableColumn[]>([
{
name: "fullName",
@ -122,13 +120,13 @@ async function fetchDataLeaveBeginning() {
await http
.post(config.API.leaveBeginning + `/list`, {
...formFilter,
...params.value,
keyword: formFilter.keyword.trim(),
})
.then((res) => {
const data = res.data.result;
rows.value = data.data;
total.value = data.total;
maxPage.value = Math.ceil(data.total / formFilter.pageSize);
const result = res.data.result;
pagination.value.rowsNumber = result.total;
rows.value = result.data;
})
.catch((err) => {
messageError($q, err);
@ -143,7 +141,7 @@ async function onSearchData(newSearch: boolean = true) {
try {
showLoader();
if (newSearch) {
formFilter.page = 1;
pagination.value.page = 1;
}
await fetchDataLeaveBeginning();
} finally {
@ -188,11 +186,7 @@ function onDeleteLeaveBeginning(id: string) {
await http
.delete(config.API.leaveBeginning + `/${id}`)
.then(async () => {
formFilter.page = await updateCurrentPage(
formFilter.page,
maxPage.value,
rows.value.length
);
await checkAndUpdatePage(rows.value.length);
await fetchDataLeaveBeginning();
success($q, "ลบข้อมูลสำเร็จ");
})
@ -205,29 +199,11 @@ function onDeleteLeaveBeginning(id: string) {
});
}
/**
* งกนอปเดทรายการแถวตอหน
* @param newPagination อม Pagination ใหม
*/
function updatePagination(newPagination: DataPagination) {
formFilter.pageSize = newPagination.rowsPerPage;
}
/** Hook*/
watch(
() => formFilter.pageSize,
() => {
onSearchData(true);
}
);
onMounted(async () => {
try {
showLoader();
await fetchLeaveType();
await fetchDataLeaveBeginning();
} catch (error) {
console.log(error);
} finally {
hideLoader();
}
@ -242,67 +218,69 @@ onMounted(async () => {
<q-card flat bordered class="q-pa-md">
<div class="row q-col-gutter-sm">
<div class="col-12">
<div class="row q-col-gutter-y-sm">
<div class="row q-col-gutter-sm items-center">
<datepicker
v-model="formFilter.year"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
style="width: 150px"
@update:model-value="onSearchData()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
:model-value="Number(formFilter.year) + 543"
:label="`${'ปีงบประมาณ'}`"
bg-color="white"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-select
emit-value
map-options
outlined
dense
option-value="id"
option-label="name"
label="ประเภทการลา"
use-input
v-model="formFilter.type"
hide-selected
fill-input
:options="leaveTypeOptions"
@update:model-value="onSearchData()"
@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>
</q-select>
<div>
<div class="row q-col-gutter-sm">
<div class="row q-col-gutter-sm col-xs-12 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-4 col-md-4">
<datepicker
v-model="formFilter.year"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="onSearchData()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
:model-value="Number(formFilter.year) + 543"
:label="`${'ปีงบประมาณ'}`"
bg-color="white"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-7 col-md-4">
<q-select
emit-value
map-options
outlined
dense
option-value="id"
option-label="name"
label="ประเภทการลา"
use-input
v-model="formFilter.type"
hide-selected
fill-input
:options="leaveTypeOptions"
@update:model-value="onSearchData()"
@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>
</q-select>
</div>
<div class="col-xs-12 col-sm-1 col-md-4 items-center">
<q-btn
v-if="checkPermission($route)?.attrIsCreate"
dense
@ -318,39 +296,42 @@ onMounted(async () => {
</div>
<q-space />
<div class="row q-col-gutter-sm">
<q-input
standout
dense
v-model="formFilter.keyword"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="onSearchData()"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/>
<div class="row q-col-gutter-sm col-xs-12 col-sm-6 col-md-6">
<div class="col-xs-12 col-sm-7 col-md-8">
<q-input
standout
dense
v-model="formFilter.keyword"
outlined
placeholder="ค้นหา"
@keydown.enter.prevent="onSearchData()"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</div>
<div class="col-xs-12 col-sm-5 col-md-4">
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
/>
</div>
</div>
</div>
</div>
<div class="col-12">
<d-table
<p-table
ref="table"
:columns="columns"
:rows="rows"
@ -360,7 +341,8 @@ onMounted(async () => {
dense
class="custom-header-table"
:visible-columns="visibleColumns"
@update:pagination="updatePagination"
v-model:pagination="pagination"
@request="onRequest"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -409,21 +391,7 @@ onMounted(async () => {
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
งหมด {{ total.toLocaleString() }} รายการ
<q-pagination
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="onSearchData(false)"
></q-pagination>
</template>
</d-table>
</p-table>
</div>
</div>
</q-card>