hrms-mgt/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 49dcf013ae fix(disciplinary):sort
2025-10-09 10:38:28 +07:00

147 lines
4.5 KiB
Vue

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
import { usePagination } from "@/composables/usePagination";
import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
const $q = useQuasar(); //ใช้ noti quasar
const router = useRouter();
const mixin = useCounterMixin();
const store = useDisciplineMainStore();
const dataInvestigateDis = useInvestigateDisStore();
const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
const { fetchList } = dataInvestigateDis;
const { pagination, params, onRequest } = usePagination(
"",
fetchListDisciplinary
);
const filter = ref<string>(""); //search data table
const status = ref<string>("NEW");
async function fetchListDisciplinary() {
const body = {
...params.value,
keyword: filter.value.trim(),
status: status.value,
...(store.formInvestigateDisciplinary.respondentType && {
respondentType: store.formInvestigateDisciplinary.respondentType,
}),
...(store.formInvestigateDisciplinary.offenseDetails && {
offenseDetails: store.formInvestigateDisciplinary.offenseDetails,
}),
...(store.formInvestigateDisciplinary.disciplinaryFaultLevel && {
disciplinaryFaultLevel:
store.formInvestigateDisciplinary.disciplinaryFaultLevel,
}),
...(store.formInvestigateDisciplinary.disciplinaryCaseFault && {
disciplinaryCaseFault:
store.formInvestigateDisciplinary.disciplinaryCaseFault.trim(),
}),
...(store.formInvestigateDisciplinary.disciplinaryDate?.[0] && {
disciplinaryDateStart: convertDateToAPI(
store.formInvestigateDisciplinary.disciplinaryDate[0]
),
}),
...(store.formInvestigateDisciplinary.disciplinaryDate?.[1] && {
disciplinaryDateEnd: convertDateToAPI(
store.formInvestigateDisciplinary.disciplinaryDate[1]
),
}),
...(store.formInvestigateDisciplinary.dateReceived?.[0] && {
dateReceivedStart: convertDateToAPI(
store.formInvestigateDisciplinary.dateReceived[0]
),
}),
...(store.formInvestigateDisciplinary.dateReceived?.[1] && {
dateReceivedEnd: convertDateToAPI(
store.formInvestigateDisciplinary.dateReceived[1]
),
}),
};
showLoader();
await http
.post(config.API.disciplineDisciplinary(), body)
.then(async (res) => {
const result = res.data.result;
pagination.value.rowsNumber = result.total;
await fetchList(result.data);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* ไปหน้าแก้ไข
* @param id ไอดีเฉพาะ รายบุคคล
*/
function openEdit(id: string) {
router.push(`/discipline/disciplinary/${id}`);
}
/**
* ไปหน้าแก้ไข
* @param id ไอดีเฉพาะ รายบุคคล
*/
function openDetail(id: string) {
router.push(`/discipline-detail/disciplinary/${id}`);
}
function filterStatus(statusReturn: string) {
status.value = statusReturn;
getSearch();
}
function getSearch() {
pagination.value.page = 1;
fetchListDisciplinary();
}
/**เมื่อเริ่มโหลดหน้า
* ส่งข้อมูลจำลองไปยัง store
*/
onMounted(async () => {
await fetchListDisciplinary();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการสอบสวนความผดทางว
</div>
<q-card flat bordered>
<Table
style="max-height: 80vh"
:rows="dataInvestigateDis.rows"
:columns="dataInvestigateDis.columns"
:visible-columns="dataInvestigateDis.visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="dataInvestigateDis.visibleColumns"
:nornmalData="true"
:paging="true"
:titleText="''"
v-model:pagination="pagination"
:fetchListDisciplinary="fetchListDisciplinary"
v-model:open-edit="openEdit"
:open-detail="openDetail"
:filterStatus="filterStatus"
:get-search="getSearch"
:on-request="onRequest"
>
</Table>
</q-card>
</template>
<style></style>