Merge branch 'develop' of https://github.com/Frappet/bma-ehr-frontend into develop
This commit is contained in:
setthawutttty
commit
33e7877e6e
8 changed files with 444 additions and 266 deletions
234
src/components/TablePagination.vue
Normal file
234
src/components/TablePagination.vue
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
@request="onRequest"
|
||||
:grid="!$q.screen.gt.xs"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:loading="loading"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ pagination.rowsNumber || attrs.rows.length }} รายการ
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
@update:model-value="handlePageChange"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="scope.pagesNumber"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
|
||||
<template v-for="(_, slot) in slots" v-slot:[slot]="scope" :key="slot">
|
||||
<slot :name="slot" v-bind="scope || {}" />
|
||||
</template>
|
||||
|
||||
<template v-slot:loading>
|
||||
<q-inner-loading showing class="q-mt-lg">
|
||||
<q-spinner-dots color="primary" size="40px" />
|
||||
</q-inner-loading>
|
||||
</template>
|
||||
|
||||
<template v-slot:no-data>
|
||||
<div
|
||||
v-if="!loading && attrs.rows.length === 0"
|
||||
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
|
||||
>
|
||||
<span> ไม่พบข้อมูล </span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <template #item="props">
|
||||
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
|
||||
<q-card bordered flat>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
|
||||
:key="col.name"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label caption>{{ col.label }}</q-item-label>
|
||||
|
||||
<q-item-label v-if="col.name === 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label v-else>{{ col.value }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</template> -->
|
||||
</q-table>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs, useSlots, computed, watch } from "vue";
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const slots = ref<any>(useSlots());
|
||||
|
||||
const emit = defineEmits(["update:pagination", "request"]);
|
||||
|
||||
const props = defineProps({
|
||||
paging: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
pagination: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
// rowsNumber: 0,
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
// Internal pagination state ที่จะจัดการเอง
|
||||
const internalPagination = ref({
|
||||
...props.pagination,
|
||||
});
|
||||
|
||||
// ใช้ computed เพื่อ sync กับ props และ internal state
|
||||
const pagination = computed({
|
||||
get: () => internalPagination.value,
|
||||
set: (value) => {
|
||||
internalPagination.value = { ...value };
|
||||
emit("update:pagination", value);
|
||||
},
|
||||
});
|
||||
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (props.paging == true)
|
||||
return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
|
||||
function onRequest(requestProp: any) {
|
||||
if (!requestProp || !requestProp.pagination) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { pagination: newPagination } = requestProp;
|
||||
|
||||
internalPagination.value = {
|
||||
...internalPagination.value,
|
||||
...newPagination,
|
||||
};
|
||||
|
||||
// if (isPageChange) {
|
||||
emit("request", requestProp);
|
||||
// }
|
||||
}
|
||||
|
||||
function handlePageChange(newPage: number) {
|
||||
if (!newPage || newPage < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
internalPagination.value = {
|
||||
...internalPagination.value,
|
||||
page: newPage,
|
||||
};
|
||||
|
||||
// สร้าง request object เหมือนกับ onRequest
|
||||
const requestProp = {
|
||||
pagination: internalPagination.value,
|
||||
filter: null,
|
||||
getCellValue: () => {},
|
||||
};
|
||||
|
||||
emit("request", requestProp);
|
||||
}
|
||||
|
||||
// Watch props เพื่ออัปเดต internal state เมื่อ parent เปลี่ยน
|
||||
watch(
|
||||
() => props.pagination,
|
||||
(newPagination) => {
|
||||
internalPagination.value = { ...newPagination };
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
}
|
||||
.custom-header-table {
|
||||
height: auto;
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
.q-table__middle {
|
||||
margin-bottom: 0 !important;
|
||||
min-height: 0px !important;
|
||||
}
|
||||
|
||||
// Loading styles
|
||||
.loading-overlay {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading-row {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.loading-cell {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
47
src/composables/usePagination.ts
Normal file
47
src/composables/usePagination.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { ref, computed } from "vue";
|
||||
import type { PropsTable } from "@/interface/index/PropsTable";
|
||||
|
||||
export function usePagination(
|
||||
defaultSort = "",
|
||||
fetchFunction?: () => Promise<any>
|
||||
) {
|
||||
const pagination = ref<PropsTable.Pagination>({
|
||||
sortBy: defaultSort,
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
rowsNumber: 0,
|
||||
});
|
||||
|
||||
const params = computed(() => {
|
||||
const queryParams: Record<string, string> = {
|
||||
page: pagination.value.page.toString(),
|
||||
pageSize: pagination.value.rowsPerPage.toString(),
|
||||
};
|
||||
|
||||
if (pagination.value.sortBy) {
|
||||
queryParams.sortBy = pagination.value.sortBy;
|
||||
queryParams.descending = (
|
||||
pagination.value.descending ?? false
|
||||
).toString();
|
||||
}
|
||||
|
||||
return queryParams;
|
||||
});
|
||||
|
||||
async function onRequest(props: PropsTable.RequestProps) {
|
||||
const newPagination = props?.pagination || props;
|
||||
if (!newPagination?.page || !newPagination?.rowsPerPage) return;
|
||||
|
||||
pagination.value = { ...newPagination };
|
||||
if (fetchFunction) {
|
||||
await fetchFunction(); // เรียกฟังก์ชันที่ส่งเข้ามา
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
pagination,
|
||||
params,
|
||||
onRequest,
|
||||
};
|
||||
}
|
||||
36
src/interface/index/PropsTable.ts
Normal file
36
src/interface/index/PropsTable.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
/** Namespace สำหรับ Table-related types */
|
||||
export namespace PropsTable {
|
||||
/** Interface สำหรับ pagination object */
|
||||
export interface Pagination {
|
||||
/** หน้าปัจจุบัน (เริ่มจาก 1) */
|
||||
page: number;
|
||||
/** จำนวนแถวต่อหน้า */
|
||||
rowsPerPage: number;
|
||||
/** จำนวนแถวทั้งหมด */
|
||||
rowsNumber?: number;
|
||||
/** คอลัมน์ที่ใช้ sort */
|
||||
sortBy?: string;
|
||||
/** เรียงจากมากไปน้อย */
|
||||
descending?: boolean;
|
||||
|
||||
rowsTotal?: number;
|
||||
}
|
||||
|
||||
/** Interface สำหรับ request props จาก d-table */
|
||||
export interface RequestProps {
|
||||
/** ข้อมูล pagination */
|
||||
pagination: Pagination;
|
||||
/** ตัวกรองข้อมูล */
|
||||
filter?: any;
|
||||
/** function สำหรับดึงค่าจาก cell */
|
||||
getCellValue?: (col: any, row: any) => any;
|
||||
}
|
||||
|
||||
/** Union type สำหรับ handleRequest function */
|
||||
export type HandleRequestProps = RequestProps;
|
||||
}
|
||||
|
||||
// Export แบบเดิมเพื่อ backward compatibility
|
||||
export type TablePagination = PropsTable.Pagination;
|
||||
export type TableRequestProps = PropsTable.RequestProps;
|
||||
export type HandleRequestProps = PropsTable.HandleRequestProps;
|
||||
|
|
@ -73,5 +73,10 @@ app.component(
|
|||
defineAsyncComponent(() => import("@/components/Table.vue"))
|
||||
);
|
||||
|
||||
app.component(
|
||||
"p-table",
|
||||
defineAsyncComponent(() => import("@/components/TablePagination.vue"))
|
||||
);
|
||||
|
||||
app.config.globalProperties.$http = http;
|
||||
app.mount("#app");
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { useRoute } from "vue-router";
|
|||
import { checkPermission } from "@/utils/permissions";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
|
|
@ -24,6 +25,9 @@ const $q = useQuasar();
|
|||
const route = useRoute();
|
||||
const store = useResultsPerformDataStore();
|
||||
const { textRangePoint, textPoint } = store;
|
||||
const { pagination, params, onRequest } = usePagination("", () =>
|
||||
getDevelop(true)
|
||||
);
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
|
|
@ -61,15 +65,6 @@ const isLeave = defineModel<boolean>("isLeave", {
|
|||
required: true,
|
||||
});
|
||||
|
||||
const totalIdp = ref<number>(0);
|
||||
const totalListIdp = ref<number>(1);
|
||||
const paginationIdp = ref({
|
||||
sortBy: "createdAt",
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
const resPerformForm = reactive<RequestItemsObject>({
|
||||
name: "",
|
||||
point1Total: 0, //ส่วนที่1 (น้ำหนัก)
|
||||
|
|
@ -273,9 +268,6 @@ const columns = ref<QTableColumn[]>(
|
|||
const visibleColumns = ref<string[]>(
|
||||
baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
|
||||
);
|
||||
const pagination = ref({
|
||||
sortBy: "lastUpdatedAt",
|
||||
});
|
||||
|
||||
//Table การพัฒนารายบุคคล (Individual Development Plan)
|
||||
const rowsPlan = ref<any[]>([]);
|
||||
|
|
@ -295,12 +287,10 @@ const columnsPlan = ref<QTableColumn[]>([
|
|||
name: "name",
|
||||
align: "left",
|
||||
label: "ความรู้/ทักษะ/สมรรถนะที่ต้องได้รับการพัฒนา",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "developmentProjects",
|
||||
|
|
@ -310,44 +300,36 @@ const columnsPlan = ref<QTableColumn[]>([
|
|||
field: "developmentProjects",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "developmentTarget",
|
||||
align: "left",
|
||||
label: "เป้าหมายการพัฒนา",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "developmentTarget",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "developmentResults",
|
||||
align: "left",
|
||||
label: "วิธีการวัดผลการพัฒนา",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "developmentResults",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "developmentReport",
|
||||
align: "left",
|
||||
label: "รายงานผลการพัฒนา",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "developmentReport",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const visibleColumnsPlan = ref<String[]>([
|
||||
const visibleColumnsPlan = ref<string[]>([
|
||||
"no",
|
||||
"name",
|
||||
"developmentProjects",
|
||||
|
|
@ -357,8 +339,6 @@ const visibleColumnsPlan = ref<String[]>([
|
|||
]);
|
||||
|
||||
//Table ประวัติแก้ไข
|
||||
const rowsHistory = ref<ResponseObject[]>([]);
|
||||
const rowsHistoryMain = ref<ResponseObject[]>([]);
|
||||
const historyId = ref<string>("");
|
||||
const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
|
||||
const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
|
||||
|
|
@ -378,8 +358,8 @@ async function fetchData() {
|
|||
rowsMain.value = res.data.result;
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
hideLoader();
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -387,29 +367,25 @@ async function fetchData() {
|
|||
async function getDevelop(isLoad?: boolean) {
|
||||
if (!profileId.value) return;
|
||||
isLoad && showLoader();
|
||||
const queryParams = {
|
||||
...params.value,
|
||||
searchKeyword: filterSearchPlan.value.trim(),
|
||||
};
|
||||
await http
|
||||
.get(
|
||||
config.API.developMentPlan(empType.value) +
|
||||
`/${profileId.value}?page=${paginationIdp.value.page}&pageSize=${
|
||||
paginationIdp.value.rowsPerPage
|
||||
}&searchKeyword=${filterSearchPlan.value.trim()}
|
||||
`
|
||||
)
|
||||
.get(config.API.developMentPlan(empType.value) + `/${profileId.value}`, {
|
||||
params: queryParams,
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
totalListIdp.value = Math.ceil(
|
||||
res.data.result.total / paginationIdp.value.rowsPerPage
|
||||
);
|
||||
totalIdp.value = res.data.result.total;
|
||||
rowsPlan.value = data;
|
||||
|
||||
isLoad && hideLoader();
|
||||
const data = res.data.result;
|
||||
pagination.value.rowsNumber = data.total;
|
||||
rowsPlan.value = data.data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
})
|
||||
.finally(() => {});
|
||||
.finally(() => {
|
||||
isLoad && hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -531,11 +507,6 @@ function openDialogDevelop(data: any) {
|
|||
typeIDP.value = data.type;
|
||||
}
|
||||
|
||||
function updatePaginationIdp(newPagination: any) {
|
||||
paginationIdp.value.page = 1;
|
||||
paginationIdp.value.rowsPerPage = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
function serchDataTable() {
|
||||
rows.value = onSearchDataTable(
|
||||
filterSearch.value,
|
||||
|
|
@ -544,13 +515,6 @@ function serchDataTable() {
|
|||
);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => paginationIdp.value.rowsPerPage,
|
||||
async () => {
|
||||
await getDevelop(true);
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchData();
|
||||
empType.value !== "-temp" && (await getDevelop());
|
||||
|
|
@ -647,7 +611,6 @@ onMounted(async () => {
|
|||
bordered
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
v-model:pagination="pagination"
|
||||
:grid="modeView === 'card'"
|
||||
:visible-columns="visibleColumns"
|
||||
>
|
||||
|
|
@ -769,9 +732,7 @@ onMounted(async () => {
|
|||
ref="filterPlanRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="
|
||||
(paginationIdp.page = 1), getDevelop(true)
|
||||
"
|
||||
@keydown.enter.prevent="(pagination.page = 1), getDevelop(true)"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
|
|
@ -825,7 +786,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
<p-table
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
|
|
@ -837,23 +798,9 @@ onMounted(async () => {
|
|||
:card-container-class="
|
||||
modeViewPlan === 'card' ? 'q-col-gutter-md' : ''
|
||||
"
|
||||
@update:pagination="updatePaginationIdp"
|
||||
@request="onRequest"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalIdp.toLocaleString() }} รายการ
|
||||
<q-pagination
|
||||
v-model="paginationIdp.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(totalListIdp)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="getDevelop"
|
||||
></q-pagination>
|
||||
</template>
|
||||
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width />
|
||||
|
|
@ -880,11 +827,7 @@ onMounted(async () => {
|
|||
>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{
|
||||
(paginationIdp.page - 1) * paginationIdp.rowsPerPage +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'developmentProjects'">
|
||||
<div class="column">
|
||||
|
|
@ -996,7 +939,7 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
|
|
@ -12,7 +13,6 @@ import http from "@/plugins/http";
|
|||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
DataOption,
|
||||
Pagination,
|
||||
Request,
|
||||
} from "@/modules/04_registryPerson/interface/index/Main";
|
||||
import type { DataRequest } from "@/modules/04_registryPerson/interface/response/Main";
|
||||
|
|
@ -22,14 +22,11 @@ const router = useRouter();
|
|||
const route = useRoute();
|
||||
const store = useRequestEditStore();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
||||
const { pagination, params, onRequest } = usePagination("", fetchListRequset);
|
||||
|
||||
const routerName = ref<string>(route.name as string);
|
||||
//Table
|
||||
const rows = ref<DataRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
|
||||
const page = ref<number>(1); //หน้า
|
||||
const pageSize = ref<number>(10); //จำนวนต่อหน้า
|
||||
const rowsTotal = ref<number>(0); //จำนวนรายการ
|
||||
const maxPage = ref<number>(0); //จำนวนหน้า
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "createdAt",
|
||||
|
|
@ -45,7 +42,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "fullname",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "fullname",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -54,7 +51,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "topic",
|
||||
align: "left",
|
||||
label: "ชื่อเรื่อง",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "topic",
|
||||
format: (v) => (v ? v : "-"),
|
||||
headerStyle: "font-size: 14px",
|
||||
|
|
@ -64,7 +61,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "detail",
|
||||
align: "left",
|
||||
label: "รายละเอียด",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "detail",
|
||||
format: (v) => (v ? v : "-"),
|
||||
headerStyle: "font-size: 14px",
|
||||
|
|
@ -84,7 +81,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "remark",
|
||||
align: "left",
|
||||
label: "หมายเหตุ",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "remark",
|
||||
format: (v) => (v ? v : "-"),
|
||||
headerStyle: "font-size: 14px",
|
||||
|
|
@ -116,8 +113,7 @@ async function fetchListRequset() {
|
|||
) + `admin`,
|
||||
{
|
||||
params: {
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
...params.value,
|
||||
status: status.value,
|
||||
keyword: keyword.value.trim(),
|
||||
},
|
||||
|
|
@ -125,8 +121,7 @@ async function fetchListRequset() {
|
|||
)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
maxPage.value = Math.ceil(data.total / pageSize.value);
|
||||
rowsTotal.value = data.total;
|
||||
pagination.value.rowsNumber = data.total;
|
||||
rows.value = data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -139,7 +134,7 @@ async function fetchListRequset() {
|
|||
|
||||
/** function เลือกสถานะคำร้อง*/
|
||||
function updateStatusValue() {
|
||||
page.value = 1;
|
||||
pagination.value.page = 1;
|
||||
// fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
|
||||
fetchListRequset();
|
||||
}
|
||||
|
|
@ -177,26 +172,6 @@ function onclickEdit(data: Request) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function เลือกแถวต่อหน้า
|
||||
* @param newPagination
|
||||
*/
|
||||
function updatePageSizePagination(newPagination: Pagination) {
|
||||
page.value = 1;
|
||||
pageSize.value = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* ดูการเปลี่ยนแปลงของ pageSize
|
||||
* เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
|
||||
*/
|
||||
watch(
|
||||
() => pageSize.value,
|
||||
() => {
|
||||
fetchListRequset();
|
||||
}
|
||||
);
|
||||
|
||||
/** HooK lifecycle ทำงานเมื่อมีการเรียกใช้งาน Componenets */
|
||||
onMounted(() => {
|
||||
fetchListRequset();
|
||||
|
|
@ -265,14 +240,15 @@ onMounted(() => {
|
|||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
<p-table
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:paging="true"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
@request="onRequest"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -302,21 +278,7 @@ onMounted(() => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ rowsTotal.toLocaleString() }} รายการ
|
||||
<q-pagination
|
||||
v-model="page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="fetchListRequset()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { ref, onMounted, } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
DataOption,
|
||||
Pagination,
|
||||
|
||||
} from "@/modules/04_registryPerson/interface/index/Main";
|
||||
import type { DataListsIDP } from "@/modules/04_registryPerson/interface/response/Main";
|
||||
|
||||
|
|
@ -22,6 +23,7 @@ const route = useRoute();
|
|||
const store = useRequestEditStore();
|
||||
const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
|
||||
const routerName = ref<string>(route.name as string);
|
||||
const { pagination, params, onRequest } = usePagination("", fetchData);
|
||||
//ตัวแปร
|
||||
const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
|
||||
const keyword = ref<string>(""); //คำค้นหา
|
||||
|
|
@ -29,16 +31,12 @@ const statusOption = ref<DataOption[]>(store.optionStatusIDP); //รายกา
|
|||
|
||||
//Table
|
||||
const rows = ref<DataListsIDP[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
|
||||
const page = ref<number>(1); //หน้า
|
||||
const pageSize = ref<number>(10); //จำนวนต่อหน้า
|
||||
const rowsTotal = ref<number>(0); //จำนวนรายการ
|
||||
const maxPage = ref<number>(0); //จำนวนหน้า
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "createdAt",
|
||||
align: "left",
|
||||
label: "วันที่ยื่นขอ",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
format: (v) => (v ? date2Thai(v, false, true) : "-"),
|
||||
headerStyle: "font-size: 14px",
|
||||
|
|
@ -48,7 +46,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "createdFullName",
|
||||
align: "left",
|
||||
label: "ผู้ยื่นขอ",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "createdFullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -57,7 +55,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "name",
|
||||
align: "left",
|
||||
label: "ความรู้/ทักษะ/สมรรถนะที่ต้องได้รับการพัฒนา",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -75,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "developmentTarget",
|
||||
align: "left",
|
||||
label: "เป้าหมายการพัฒนา",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "developmentTarget",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -84,7 +82,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "developmentResults",
|
||||
align: "left",
|
||||
label: "วิธีการวัดผลการพัฒนา",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "developmentResults",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -93,7 +91,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "developmentReport",
|
||||
align: "left",
|
||||
label: "รายงานผลการพัฒนา",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "developmentReport",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -121,7 +119,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "reason",
|
||||
align: "left",
|
||||
label: "หมายเหตุ",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "reason",
|
||||
format: (v) => (v ? v : "-"),
|
||||
headerStyle: "font-size: 14px",
|
||||
|
|
@ -151,17 +149,15 @@ async function fetchData() {
|
|||
) + `admin`,
|
||||
{
|
||||
params: {
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
...params.value,
|
||||
status: status.value ? status.value : "",
|
||||
keyword: keyword.value,
|
||||
keyword: keyword.value.trim(),
|
||||
},
|
||||
}
|
||||
)
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
maxPage.value = Math.ceil(data.total / pageSize.value);
|
||||
rowsTotal.value = data.total;
|
||||
pagination.value.rowsNumber = data.total;
|
||||
rows.value = data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -174,7 +170,7 @@ async function fetchData() {
|
|||
|
||||
/** function เลือกสถานะคำร้อง */
|
||||
function updateStatusValue() {
|
||||
page.value = 1;
|
||||
pagination.value.page = 1;
|
||||
// fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
|
||||
fetchData();
|
||||
}
|
||||
|
|
@ -199,16 +195,7 @@ function filterOption(val: string, update: Function) {
|
|||
}
|
||||
|
||||
/**
|
||||
* function เลือกแถวต่อหน้า
|
||||
* @param newPagination
|
||||
*/
|
||||
function updatePageSizePagination(newPagination: Pagination) {
|
||||
page.value = 1;
|
||||
pageSize.value = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* funciton แก่ไขคำร้อง
|
||||
* function แก้ไขคำร้อง
|
||||
* @param id รายการคำร้อง
|
||||
*/
|
||||
function onclickEdit(id: string) {
|
||||
|
|
@ -266,17 +253,6 @@ async function downloadUrl(id: string, fileName: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ดูการเปลี่ยนแปลงของ pageSize
|
||||
* เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
|
||||
*/
|
||||
watch(
|
||||
() => pageSize.value,
|
||||
() => {
|
||||
fetchData();
|
||||
}
|
||||
);
|
||||
|
||||
/** HooK lifecycle ทำงานเมื่อมีการเรียกใช้งาน Componenets */
|
||||
onMounted(() => {
|
||||
props.isIdp && fetchData();
|
||||
|
|
@ -344,14 +320,15 @@ onMounted(() => {
|
|||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
<p-table
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:paging="true"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePageSizePagination"
|
||||
@request="onRequest"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -413,21 +390,7 @@ onMounted(() => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ rowsTotal.toLocaleString() }} รายการ
|
||||
<q-pagination
|
||||
v-model="page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="fetchData"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, watch } from "vue";
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
|
|
@ -8,18 +8,16 @@ import {
|
|||
checkPermissionList,
|
||||
checkPermissionCreate,
|
||||
} from "@/utils/permissions";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importType*/
|
||||
import type { QInput, QTableProps } from "quasar";
|
||||
import type {
|
||||
NewPagination,
|
||||
DataOption,
|
||||
} from "@/modules/08_registryEmployee/interface/index/Main";
|
||||
import type { DataOption } from "@/modules/08_registryEmployee/interface/index/Main";
|
||||
import type { DataEmployee } from "@/modules/08_registryEmployee/interface/response/Employee";
|
||||
|
||||
/** importComponents*/
|
||||
|
|
@ -39,6 +37,7 @@ const {
|
|||
findOrgNameHtml,
|
||||
} = useCounterMixin();
|
||||
const { statusText } = useRegistryEmp();
|
||||
const { pagination, params, onRequest } = usePagination("", fetchList);
|
||||
|
||||
const modalAddEmployee = ref<boolean>(false); // popup เพิ่มข้อมูลลูกจ้างชั่วคราว
|
||||
const modalPos = ref<boolean>(false); //popup กำหนดตำแหน่ง
|
||||
|
|
@ -47,11 +46,7 @@ const dataRow = ref<DataEmployee>(); //ข้อมูลรายชื่อ
|
|||
|
||||
/** Table */
|
||||
const rows = ref<DataEmployee[]>([]); //รายชื่อลูกจ้างชั่วคราว
|
||||
const maxPage = ref<number>(0); //จำนวนหน้า
|
||||
const total = ref<number>(0); //จำนวนข้อมูล
|
||||
const queryParams = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
type: "temp",
|
||||
searchField: "fullName",
|
||||
searchKeyword: "",
|
||||
|
|
@ -67,12 +62,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: (row) =>
|
||||
(
|
||||
(queryParams.page - 1) * queryParams.pageSize +
|
||||
rows.value.indexOf(row) +
|
||||
1
|
||||
).toLocaleString(),
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -80,16 +70,16 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px; min-width: 200px",
|
||||
style: "font-size: 14px; ",
|
||||
},
|
||||
{
|
||||
name: "fullname",
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "fullname",
|
||||
format(val, row) {
|
||||
return `${row.prefix}${row.firstName} ${row.lastName}`;
|
||||
|
|
@ -98,29 +88,20 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px; ",
|
||||
},
|
||||
{
|
||||
name: "draftOrganizationOrganization",
|
||||
name: "positionTemp",
|
||||
align: "left",
|
||||
label: "ตำแหน่ง/สังกัดที่รับการบรรจุ",
|
||||
sortable: false,
|
||||
field: "draftOrganizationOrganization",
|
||||
sortable: true,
|
||||
field: "positionTemp",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
// {
|
||||
// name: "draftPositionEmployee",
|
||||
// align: "left",
|
||||
// label: "ตำแหน่งที่บรรจุ",
|
||||
// sortable: false,
|
||||
// field: "draftPositionEmployee",
|
||||
// headerStyle: "font-size: 14px; min-width: 200px",
|
||||
// style: "font-size: 14px; ",
|
||||
// },
|
||||
|
||||
{
|
||||
name: "govAge",
|
||||
align: "left",
|
||||
label: "อายุราชการ(ปี)",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "govAge",
|
||||
format(val) {
|
||||
return val;
|
||||
|
|
@ -143,17 +124,17 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "dateAppoint",
|
||||
align: "left",
|
||||
label: "วันที่แต่งตั้ง",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "dateAppoint",
|
||||
headerStyle: "font-size: 14px",
|
||||
format: (val) => date2Thai(val),
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "age",
|
||||
name: "birthDate",
|
||||
align: "left",
|
||||
label: "อายุ",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "age",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -162,7 +143,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "createdAt",
|
||||
align: "left",
|
||||
label: "วันที่สร้าง",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "createdAt",
|
||||
format(val) {
|
||||
return date2Thai(val);
|
||||
|
|
@ -174,7 +155,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
name: "dateRetireLaw",
|
||||
align: "left",
|
||||
label: "วันที่พ้นราชการ",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "dateRetireLaw",
|
||||
format(val) {
|
||||
return date2Thai(val);
|
||||
|
|
@ -198,12 +179,11 @@ const columns = ref<QTableProps["columns"]>([
|
|||
const visibleColumns = ref<String[]>([
|
||||
"no",
|
||||
"citizenId",
|
||||
"fullname",
|
||||
"draftOrganizationOrganization",
|
||||
// "draftPositionEmployee",
|
||||
"firstName",
|
||||
"positionTemp",
|
||||
"govAge",
|
||||
"dateEmployment",
|
||||
"age",
|
||||
"birthDate",
|
||||
"createdAt",
|
||||
"dateRetireLaw",
|
||||
"statustext",
|
||||
|
|
@ -216,14 +196,15 @@ async function fetchList() {
|
|||
await http
|
||||
.get(config.API.registryNew("-temp"), {
|
||||
params: {
|
||||
...params.value,
|
||||
...queryParams,
|
||||
searchKeyword: queryParams.searchKeyword.trim(),
|
||||
},
|
||||
})
|
||||
.then(async (res) => {
|
||||
rows.value = await res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / queryParams.pageSize);
|
||||
total.value = res.data.result.total;
|
||||
const result = await res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -243,11 +224,9 @@ function onClickDelete(id: string) {
|
|||
await http
|
||||
.delete(config.API.registryNew("-employee") + `/${id}`)
|
||||
.then(async () => {
|
||||
queryParams.page = await updateCurrentPage(
|
||||
queryParams.page,
|
||||
maxPage.value,
|
||||
rows.value.length
|
||||
);
|
||||
if (rows.value.length === 1 && pagination.value.page > 1) {
|
||||
pagination.value.page = pagination.value.page - 1;
|
||||
}
|
||||
await fetchList();
|
||||
await success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
@ -287,22 +266,22 @@ function onClickSendOrder() {
|
|||
modalSendOrder.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันอัพเดต Pagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
queryParams.page = 1;
|
||||
queryParams.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
// /**
|
||||
// * ฟังก์ชันอัพเดต Pagination
|
||||
// * @param newPagination ข้อมูล Pagination ใหม่
|
||||
// */
|
||||
// function updatePagination(newPagination: NewPagination) {
|
||||
// queryParams.page = 1;
|
||||
// queryParams.pageSize = newPagination.rowsPerPage;
|
||||
// }
|
||||
|
||||
/** ทำงานเมื่อมีการเปลี่่ยนจำนวนข้อมูลต่อหน้า */
|
||||
watch(
|
||||
() => queryParams.pageSize,
|
||||
() => {
|
||||
fetchList();
|
||||
}
|
||||
);
|
||||
// /** ทำงานเมื่อมีการเปลี่่ยนจำนวนข้อมูลต่อหน้า */
|
||||
// watch(
|
||||
// () => queryParams.pageSize,
|
||||
// () => {
|
||||
// fetchList();
|
||||
// }
|
||||
// );
|
||||
|
||||
/** ทำงานเมื่อมีการเรียกใข้ Components */
|
||||
onMounted(async () => {
|
||||
|
|
@ -364,7 +343,12 @@ onMounted(async () => {
|
|||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
@keydown.enter.prevent="(queryParams.page = 1), fetchList()"
|
||||
@keydown.enter.prevent="
|
||||
() => {
|
||||
pagination.page = 1;
|
||||
fetchList();
|
||||
}
|
||||
"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
|
|
@ -388,13 +372,14 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-12 q-pt-sm">
|
||||
<d-table
|
||||
<p-table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
row-key="id"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
v-model:pagination="pagination"
|
||||
@request="onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -473,7 +458,7 @@ onMounted(async () => {
|
|||
</q-btn>
|
||||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<template v-if="col.name === 'draftOrganizationOrganization'">
|
||||
<template v-if="col.name === 'positionTemp'">
|
||||
<div v-if="props.row.draftPositionEmployee !== null">
|
||||
<div class="col-4">
|
||||
<div>
|
||||
|
|
@ -522,13 +507,16 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else-if="col.name === 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value !== null && col.value !== "" ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<!-- <template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ total }} รายการ
|
||||
<q-pagination
|
||||
v-model="queryParams.page"
|
||||
|
|
@ -541,8 +529,8 @@ onMounted(async () => {
|
|||
:max-pages="5"
|
||||
@update:model-value="fetchList"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</template> -->
|
||||
</p-table>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue