fix(development):sort
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
8674269934
commit
1b67db241b
7 changed files with 188 additions and 419 deletions
|
|
@ -6,11 +6,11 @@ import { useQuasar, type QTableProps } from "quasar";
|
|||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
import type {
|
||||
DataOption,
|
||||
FormFilter,
|
||||
NewPagination,
|
||||
} from "@/modules/15_development/interface/index/Main";
|
||||
|
||||
import Header from "@/components/DialogHeader.vue";
|
||||
|
|
@ -18,33 +18,13 @@ import Header from "@/components/DialogHeader.vue";
|
|||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError, dialogMessageNotify, showLoader, hideLoader } = mixin;
|
||||
const { pagination, params, onRequest } = usePagination("", searchFilter);
|
||||
|
||||
const rows = ref<any[]>([]);
|
||||
const props = defineProps({
|
||||
upDate: { type: Function },
|
||||
});
|
||||
|
||||
const maxPage = ref<number>(1); // จำนวนหน้าสูงสุด
|
||||
|
||||
const formFilter = reactive<FormFilter>({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
keyword: "",
|
||||
year: new Date().getFullYear(),
|
||||
type: "",
|
||||
posType: "",
|
||||
posLevel: "",
|
||||
retireYear: "",
|
||||
rangeYear: { min: 0, max: 60 },
|
||||
isShowRetire: null,
|
||||
isProbation: null,
|
||||
});
|
||||
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
rowsPerPage: 20,
|
||||
});
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const selected = ref<any[]>([]); // checkbox
|
||||
const search = ref<string>("citizenId"); // กำหนดค่าเริ่มต้น ค้นหาจาก
|
||||
|
|
@ -62,11 +42,11 @@ const govOp = ref<DataOption[]>([
|
|||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"citizenId",
|
||||
"name",
|
||||
"firstName",
|
||||
"position",
|
||||
"type",
|
||||
"level",
|
||||
"positionSide",
|
||||
"posType",
|
||||
"posLevel",
|
||||
"posExecutive",
|
||||
]);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -80,7 +60,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
name: "firstName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: true,
|
||||
|
|
@ -99,7 +79,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "ตำแหน่งประเภท",
|
||||
sortable: true,
|
||||
|
|
@ -108,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "level",
|
||||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับตำแหน่ง",
|
||||
sortable: true,
|
||||
|
|
@ -117,7 +97,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionSide",
|
||||
name: "posExecutive",
|
||||
align: "left",
|
||||
label: "ตําแหน่งทางการบริหาร",
|
||||
sortable: true,
|
||||
|
|
@ -168,46 +148,49 @@ function closeDialog() {
|
|||
inputSearch.value = "";
|
||||
}
|
||||
|
||||
/** class */
|
||||
function getClass() {
|
||||
return "inputgreen";
|
||||
}
|
||||
|
||||
/** ดึงข้อมูลตาม keyword */
|
||||
function searchFilter() {
|
||||
async function searchFilter() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.registryNew("") +
|
||||
`?page=${formFilter.page}&pageSize=${formFilter.pageSize}&searchField=${search.value}&searchKeyword=${inputSearch.value}`
|
||||
)
|
||||
await http
|
||||
.get(config.API.registryNew(""), {
|
||||
params: {
|
||||
...params.value,
|
||||
searchField: search.value,
|
||||
searchKeyword: inputSearch.value.trim(),
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
rows.value = data.map((item: any) => ({
|
||||
id: item.id ? item.id : null,
|
||||
name: item.firstName
|
||||
? `${item.prefix}${item.firstName} ${item.lastName}`
|
||||
: null,
|
||||
prefix: item.prefix ? item.prefix : null,
|
||||
rank: item.rank ? item.rank : null,
|
||||
firstName: item.firstName ? item.firstName : null,
|
||||
lastName: item.lastName ? item.lastName : null,
|
||||
citizenId: item.citizenId ? item.citizenId : null,
|
||||
level: item.posLevel ? item.posLevel : null,
|
||||
type: item.posType ? item.posType : null,
|
||||
posLevelId: item.posLevelId ? item.posLevelId : null,
|
||||
posTypeId: item.posTypeId ? item.posTypeId : null,
|
||||
position: item.position ? item.position : null,
|
||||
positionSide: item.posExecutive ? item.posExecutive : null,
|
||||
posNo: item.posNo ? item.posNo : null,
|
||||
org: item.org ? item.org : null,
|
||||
rootId: item.rootId ? item.rootId : null,
|
||||
rootDnaId: item.rootId ? item.rootDnaId : null,
|
||||
root: item.root ? item.root : null,
|
||||
orgRootShortName: item.orgRootShortName ? item.orgRootShortName : null,
|
||||
orgRevisionId: item.orgRevisionId ? item.orgRevisionId : null,
|
||||
}));
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
|
||||
if (result.data.length !== 0) {
|
||||
rows.value = result.data.map((item: any) => ({
|
||||
id: item.id ? item.id : null,
|
||||
name: item.firstName
|
||||
? `${item.prefix}${item.firstName} ${item.lastName}`
|
||||
: null,
|
||||
prefix: item.prefix ? item.prefix : null,
|
||||
rank: item.rank ? item.rank : null,
|
||||
firstName: item.firstName ? item.firstName : null,
|
||||
lastName: item.lastName ? item.lastName : null,
|
||||
citizenId: item.citizenId ? item.citizenId : null,
|
||||
level: item.posLevel ? item.posLevel : null,
|
||||
type: item.posType ? item.posType : null,
|
||||
posLevelId: item.posLevelId ? item.posLevelId : null,
|
||||
posTypeId: item.posTypeId ? item.posTypeId : null,
|
||||
position: item.position ? item.position : null,
|
||||
positionSide: item.posExecutive ? item.posExecutive : null,
|
||||
posNo: item.posNo ? item.posNo : null,
|
||||
org: item.org ? item.org : null,
|
||||
rootId: item.rootId ? item.rootId : null,
|
||||
rootDnaId: item.rootId ? item.rootDnaId : null,
|
||||
root: item.root ? item.root : null,
|
||||
orgRootShortName: item.orgRootShortName
|
||||
? item.orgRootShortName
|
||||
: null,
|
||||
orgRevisionId: item.orgRevisionId ? item.orgRevisionId : null,
|
||||
}));
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -217,25 +200,10 @@ function searchFilter() {
|
|||
});
|
||||
}
|
||||
|
||||
/** update ค่า เเถวข้อมูล */
|
||||
function updatePage(val: number) {
|
||||
formFilter.page = val;
|
||||
function onfetchNewData() {
|
||||
pagination.value.page = 1;
|
||||
searchFilter();
|
||||
}
|
||||
|
||||
/** update ค่า เเถวข้อมูล */
|
||||
function updatePageSize(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/** เช็คเเถวข้อมูลว่ามีการเปลี่ยนแปลงไหม */
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
searchFilter();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
|
|
@ -266,6 +234,7 @@ watch(
|
|||
label="ค้นหา"
|
||||
v-model="inputSearch"
|
||||
:mask="search === 'citizenId' ? '#############' : undefined"
|
||||
@keyup.enter="onfetchNewData()"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
|
|
@ -275,13 +244,13 @@ watch(
|
|||
unelevated
|
||||
outline
|
||||
color="primary"
|
||||
@click="(formFilter.page = 1), searchFilter()"
|
||||
@click="onfetchNewData()"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-mt-sm">
|
||||
<d-table
|
||||
<p-table
|
||||
style="max-height: 70vh"
|
||||
virtual-scroll
|
||||
selection="single"
|
||||
|
|
@ -298,21 +267,8 @@ watch(
|
|||
:visible-columns="visibleColumns"
|
||||
v-model:pagination="pagination"
|
||||
:rows-per-page-options="[20, 25, 50, 100]"
|
||||
@update:pagination="updatePageSize"
|
||||
@request="onRequest"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="updatePage"
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th class="text-center"> </q-th>
|
||||
|
|
@ -338,7 +294,7 @@ watch(
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
|
|
|||
|
|
@ -13,8 +13,6 @@ interface DataOptionTechnique {
|
|||
}
|
||||
|
||||
interface FormFilter {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
keyword: string;
|
||||
type: string;
|
||||
year: number;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
interface FormQueryListProject {
|
||||
year: number | null;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
org: string;
|
||||
keyword: string;
|
||||
status: string;
|
||||
|
|
|
|||
|
|
@ -10,9 +10,12 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { calculateFiscalYear } from "@/utils/function";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
import type {
|
||||
NewPagination,
|
||||
DataHistory,
|
||||
DataOption,
|
||||
ItemsMenu,
|
||||
} from "@/modules/15_development/interface/index/Main";
|
||||
|
||||
|
|
@ -22,24 +25,16 @@ const router = useRouter();
|
|||
const route = useRoute();
|
||||
const store = useDevelopmentDataStore();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
const { pagination, params, onRequest } = usePagination("", getData);
|
||||
|
||||
const maxPage = ref<number>(1); // จำนวนหน้า
|
||||
const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
|
||||
const formFilter = reactive({
|
||||
root: null,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
year: calculateFiscalYear(new Date()), //ปีงบประมาณ
|
||||
});
|
||||
|
||||
const pagination = ref({
|
||||
page: formFilter.page,
|
||||
rowsPerPage: formFilter.pageSize,
|
||||
});
|
||||
|
||||
const rows = ref<any[]>([]);
|
||||
const agencyOp = ref<any[]>([]);
|
||||
const rows = ref<DataHistory[]>([]);
|
||||
const agencyOp = ref<DataOption[]>([]);
|
||||
const itemMenu = ref<ItemsMenu[]>([
|
||||
{
|
||||
label: "ไฟล์ .xlsx",
|
||||
|
|
@ -54,18 +49,15 @@ const itemMenu = ref<ItemsMenu[]>([
|
|||
color: "red",
|
||||
},
|
||||
]);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"year",
|
||||
"citizenId",
|
||||
"name",
|
||||
"fullName",
|
||||
"position",
|
||||
"type",
|
||||
"level",
|
||||
"positionSide",
|
||||
"posType",
|
||||
"posLevel",
|
||||
"projectName",
|
||||
]);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "year",
|
||||
|
|
@ -87,11 +79,11 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
field: "fullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -106,20 +98,20 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "กลุ่มงาน",
|
||||
sortable: true,
|
||||
field: "type",
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "level",
|
||||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับชั้นงาน",
|
||||
sortable: true,
|
||||
field: "level",
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -141,7 +133,7 @@ async function fetchListOrg() {
|
|||
.get(config.API.developmentHistoryListOrg("employee", formFilter.year))
|
||||
.then(async (res) => {
|
||||
formFilter.root = null;
|
||||
formFilter.page = 1;
|
||||
pagination.value.page = 1;
|
||||
rows.value = [];
|
||||
const option = [{ name: "ทั้งหมด", id: null }];
|
||||
const optionNew = await res.data.result.map((e: string) => ({
|
||||
|
|
@ -150,7 +142,6 @@ async function fetchListOrg() {
|
|||
}));
|
||||
option.push(...optionNew);
|
||||
agencyOp.value = option;
|
||||
// agencyOp.value = res.data.result;
|
||||
await getData();
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -171,9 +162,9 @@ function onDownload(type: string) {
|
|||
year: formFilter.year,
|
||||
root: formFilter.root,
|
||||
})
|
||||
.then((res) => {
|
||||
.then(async (res) => {
|
||||
const dataList = res.data.result;
|
||||
genReportXLSX(dataList, "รายการประวัติฝึกอบรม/ดูงาน ลูกจ้าง", type);
|
||||
await genReportXLSX(dataList, "รายการประวัติฝึกอบรม/ดูงาน ลูกจ้าง", type);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -183,7 +174,7 @@ function onDownload(type: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/** edit page
|
||||
/** ฟังก์ชันแก้ไขข้อมูล
|
||||
* @param id id ของ row
|
||||
*/
|
||||
function onEdit(id: string) {
|
||||
|
|
@ -193,30 +184,20 @@ function onEdit(id: string) {
|
|||
}
|
||||
}
|
||||
|
||||
/** ดึงข้อมูล */
|
||||
/** ฟังก์ชันดึงข้อมูลรายการประวัติฝึกอบรม/ดูงาน */
|
||||
async function getData() {
|
||||
showLoader();
|
||||
formFilter.keyword = formFilter.keyword.trim();
|
||||
await http
|
||||
.post(config.API.developmentHistoryList("employee"), formFilter)
|
||||
.post(config.API.developmentHistoryList("employee"), {
|
||||
...params.value,
|
||||
...formFilter,
|
||||
keyword: formFilter.keyword.trim(),
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
rows.value = data.map((item: any) => ({
|
||||
id: item.id ? item.id : null,
|
||||
citizenId: item.citizenId ? item.citizenId : null,
|
||||
name: item.fullName ? item.fullName : null,
|
||||
prefix: item.prefix ? item.prefix : null,
|
||||
firstName: item.firstName ? item.firstName : null,
|
||||
lastName: item.lastName ? item.lastName : null,
|
||||
position: item.position ? item.position : null,
|
||||
type: item.posType ? item.posType : null,
|
||||
level: item.posLevel ? item.posLevel : null,
|
||||
positionSide: item.posExecutive ? item.posExecutive : null,
|
||||
projectName: item.projectName ? item.projectName : null,
|
||||
year: item.year ? item.year : null,
|
||||
}));
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -226,23 +207,12 @@ async function getData() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
/** ฟังก์ชันดึงข้อมูลใหม่ */
|
||||
function onfetchNewData() {
|
||||
pagination.value.page = 1;
|
||||
getData();
|
||||
}
|
||||
|
||||
/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
getData();
|
||||
}
|
||||
);
|
||||
|
||||
/** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
|
||||
onMounted(async () => {
|
||||
await fetchListOrg();
|
||||
|
|
@ -253,6 +223,7 @@ onMounted(async () => {
|
|||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการประวัติฝึกอบรม/ดูงาน ลูกจ้าง
|
||||
</div>
|
||||
|
||||
<q-card flat bordered class="q-pa-md">
|
||||
<div class="row no-wrap shadow-1 justify-between">
|
||||
<q-toolbar class="row col-8 q-pa-none q-gutter-x-sm">
|
||||
|
|
@ -307,7 +278,7 @@ onMounted(async () => {
|
|||
:options="agencyOp"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="(formFilter.page = 1), getData()"
|
||||
@update:model-value="onfetchNewData()"
|
||||
style="min-width: 150px"
|
||||
map-options
|
||||
emit-value
|
||||
|
|
@ -359,7 +330,7 @@ onMounted(async () => {
|
|||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="(formFilter.page = 1), getData()"
|
||||
@keydown.enter.prevent="onfetchNewData()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
|
|
@ -385,7 +356,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
<p-table
|
||||
for="table"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
|
|
@ -396,24 +367,10 @@ onMounted(async () => {
|
|||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:pagination="pagination"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
v-model:pagination="pagination"
|
||||
@request="onRequest"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="getData"
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width></q-th>
|
||||
|
|
@ -444,7 +401,7 @@ onMounted(async () => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</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 { useRouter } from "vue-router";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
|
||||
|
|
@ -10,39 +10,31 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { calculateFiscalYear } from "@/utils/function";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
/**
|
||||
* importType
|
||||
*/
|
||||
/** importType*/
|
||||
import type {
|
||||
DataOption,
|
||||
DataHistory,
|
||||
NewPagination,
|
||||
ItemsMenu,
|
||||
} from "@/modules/15_development/interface/index/Main";
|
||||
import type { ResHistory } from "@/modules/15_development/interface/response/Main";
|
||||
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const store = useDevelopmentDataStore();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
const { pagination, params, onRequest } = usePagination("", getData);
|
||||
|
||||
const formFilter = reactive({
|
||||
root: null,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
keyword: "",
|
||||
year: calculateFiscalYear(new Date()), //ปีงบประมาณ
|
||||
});
|
||||
const agencyOp = ref<DataOption[]>([]); // หน่วยงาน
|
||||
|
||||
/**
|
||||
* ข้อมูล Table
|
||||
*/
|
||||
/** ข้อมูล Table*/
|
||||
const rows = ref<DataHistory[]>([]);
|
||||
const maxPage = ref<number>(1); //จำนวนหน้าสูงสุด
|
||||
const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "year",
|
||||
|
|
@ -64,11 +56,11 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
field: "fullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -83,29 +75,29 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "ตำแหน่งประเภท",
|
||||
sortable: true,
|
||||
field: "type",
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "level",
|
||||
name: "posLevel",
|
||||
align: "left",
|
||||
label: "ระดับตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "level",
|
||||
field: "posLevel",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "positionSide",
|
||||
name: "posExecutive",
|
||||
align: "left",
|
||||
label: "ตําแหน่งทางการบริหาร",
|
||||
sortable: true,
|
||||
field: "positionSide",
|
||||
field: "posExecutive",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -119,18 +111,14 @@ const columns = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const pagination = ref({
|
||||
page: formFilter.page,
|
||||
rowsPerPage: formFilter.pageSize,
|
||||
});
|
||||
const visibleColumns = ref<string[]>([
|
||||
"year",
|
||||
"citizenId",
|
||||
"name",
|
||||
"fullName",
|
||||
"position",
|
||||
"type",
|
||||
"level",
|
||||
"positionSide",
|
||||
"posType",
|
||||
"posLevel",
|
||||
"posExecutive",
|
||||
"projectName",
|
||||
]);
|
||||
|
||||
|
|
@ -150,16 +138,14 @@ const itemMenu = ref<ItemsMenu[]>([
|
|||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูหน่วยงาน
|
||||
*/
|
||||
/** function เรียกข้อมูหน่วยงาน*/
|
||||
function fetchListOrg() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.developmentHistoryListOrg("officer", formFilter.year))
|
||||
.then(async (res) => {
|
||||
formFilter.root = null;
|
||||
formFilter.page = 1;
|
||||
pagination.value.page = 1;
|
||||
rows.value = [];
|
||||
const option = [{ name: "ทั้งหมด", id: null }];
|
||||
const optionNew = await res.data.result.map((e: string) => ({
|
||||
|
|
@ -178,29 +164,20 @@ function fetchListOrg() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลรายการประวัติการฝึกอบรม/ดูงาน ข้าราชการกรุงเทพมหานครสามัญ
|
||||
*/
|
||||
/** function เรียกข้อมูลรายการประวัติการฝึกอบรม/ดูงาน ข้าราชการกรุงเทพมหานครสามัญ*/
|
||||
async function getData() {
|
||||
showLoader();
|
||||
formFilter.keyword = formFilter.keyword.trim();
|
||||
await http
|
||||
.post(config.API.developmentHistoryList("officer"), formFilter)
|
||||
.post(config.API.developmentHistoryList("officer"), {
|
||||
...params.value,
|
||||
...formFilter,
|
||||
keyword: formFilter.keyword.trim(),
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
rows.value = data.map((item: ResHistory) => ({
|
||||
id: item.id ? item.id : null,
|
||||
citizenId: item.citizenId ? item.citizenId : null,
|
||||
name: item.fullName ? item.fullName : null,
|
||||
position: item.position ? item.position : null,
|
||||
type: item.posType ? item.posType : null,
|
||||
level: item.posLevel ? item.posLevel : null,
|
||||
projectName: item.projectName ? item.projectName : null,
|
||||
positionSide: item.posExecutive ? item.posExecutive : null,
|
||||
year: item.year ? item.year : null,
|
||||
}));
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -246,25 +223,12 @@ function onEdit(id: string) {
|
|||
router.push(`/development/history/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
formFilter.page = 1;
|
||||
formFilter.pageSize = newPagination.rowsPerPage;
|
||||
/** ฟังก์ชันเรียกข้อมูลใหม่ */
|
||||
function onfetchNewData() {
|
||||
pagination.value.page = 1;
|
||||
getData();
|
||||
}
|
||||
|
||||
/**
|
||||
* callbackFunction ทำเมื่อมีการอัปเดท pageSize
|
||||
*/
|
||||
watch(
|
||||
() => formFilter.pageSize,
|
||||
() => {
|
||||
getData();
|
||||
}
|
||||
);
|
||||
|
||||
/** ดึงข้อมูลเมื่ออยู่ในหน้า */
|
||||
onMounted(() => {
|
||||
fetchListOrg();
|
||||
|
|
@ -329,7 +293,7 @@ onMounted(() => {
|
|||
:options="agencyOp"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="(formFilter.page = 1), getData()"
|
||||
@update:model-value="onfetchNewData()"
|
||||
style="min-width: 150px"
|
||||
map-options
|
||||
emit-value
|
||||
|
|
@ -382,7 +346,7 @@ onMounted(() => {
|
|||
ref="filterRef"
|
||||
outlined
|
||||
placeholder="ค้นหา"
|
||||
@keydown.enter.prevent="(formFilter.page = 1), getData()"
|
||||
@keydown.enter.prevent="onfetchNewData()"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
|
|
@ -406,7 +370,7 @@ onMounted(() => {
|
|||
</q-toolbar>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
<p-table
|
||||
for="table"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
|
|
@ -419,7 +383,7 @@ onMounted(() => {
|
|||
:visible-columns="visibleColumns"
|
||||
v-model:pagination="pagination"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
@request="onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -452,22 +416,7 @@ onMounted(() => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formFilter.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
:max-pages="5"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
@update:model-value="getData"
|
||||
></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, type QTableProps } from "quasar";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
|
|
@ -10,13 +10,12 @@ import { useStructureTree } from "@/stores/structureTree";
|
|||
import genReportXLSX from "@/plugins/genreportxlsx";
|
||||
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { updateCurrentPage } from "@/utils/function";
|
||||
import { calculateFiscalYear } from "@/utils/function";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
/**importType*/
|
||||
import type {
|
||||
DataOption,
|
||||
NewPagination,
|
||||
OrgTree,
|
||||
} from "@/modules/15_development/interface/index/Main";
|
||||
import type {
|
||||
|
|
@ -45,6 +44,10 @@ const {
|
|||
dialogRemove,
|
||||
success,
|
||||
} = useCounterMixin();
|
||||
const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
|
||||
"",
|
||||
fetchListProject
|
||||
);
|
||||
|
||||
const node = ref<OrgTree[]>([]); // หน่วยงาน/ส่วนราชการ
|
||||
const expanded = ref<string[]>([]);
|
||||
|
|
@ -54,8 +57,6 @@ const filter = ref<string>(""); //ค้นหา เพิ่มโครงก
|
|||
const filterMain = ref<string>(""); //ค้นหา หน่วยงาน/ส่วนราชการ
|
||||
const splitterModel = ref<number>(60); //แบ่ง ส่วน
|
||||
const modal = ref<boolean>(false); // ตัวแปร dialog
|
||||
const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
|
||||
const totalPage = ref<number>(1); // จำนวนข้อมูลที่มี
|
||||
|
||||
const statusOpt = ref<DataOption[]>([
|
||||
{ id: "ONGOING", name: "กำลังดำเนินการ" },
|
||||
|
|
@ -109,8 +110,6 @@ const formProject = reactive<FormProject>({
|
|||
/** formQuery */
|
||||
const formQuery = reactive<FormQueryListProject>({
|
||||
year: calculateFiscalYear(new Date()), //ปีงบประมาณ
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
org: "1",
|
||||
keyword: "",
|
||||
status: "ONGOING",
|
||||
|
|
@ -122,19 +121,20 @@ const formQuery = reactive<FormQueryListProject>({
|
|||
async function fetchListProject() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(
|
||||
config.API.developmentMain +
|
||||
`?page=${formQuery.page}&pageSize=${
|
||||
formQuery.pageSize
|
||||
}&keyword=${formQuery.keyword.trim()}&year=${formQuery.year}&status=${
|
||||
formQuery.status
|
||||
}&node=${formQuery.node}&nodeId=${formQuery.nodeId}`
|
||||
)
|
||||
.get(config.API.developmentMain, {
|
||||
params: {
|
||||
...params.value,
|
||||
keyword: formQuery.keyword.trim(),
|
||||
year: formQuery.year,
|
||||
status: formQuery.status,
|
||||
node: formQuery.node,
|
||||
nodeId: formQuery.nodeId,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
totalPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
rows.value = data;
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -162,7 +162,7 @@ function onAdd() {
|
|||
* function fetchข้อมูลหน้าแรกใหม่
|
||||
*/
|
||||
function fetchListProjectNew() {
|
||||
formQuery.page = 1;
|
||||
pagination.value.page = 1;
|
||||
fetchListProject();
|
||||
}
|
||||
|
||||
|
|
@ -242,9 +242,7 @@ function updateSelected(data: DataTree) {
|
|||
formProject.orgRevisionId = data.orgRevisionId;
|
||||
}
|
||||
|
||||
/**
|
||||
* function เลือกหน่วยงานที่จะค้นหาโครงกา
|
||||
*/
|
||||
/** function เลือกหน่วยงานที่จะค้นหาโครงกา*/
|
||||
function updateSelectedTreeMain(data: DataTree) {
|
||||
if (
|
||||
formQuery.node === data.orgLevel &&
|
||||
|
|
@ -259,15 +257,6 @@ function updateSelectedTreeMain(data: DataTree) {
|
|||
fetchListProjectNew(); // fetch โครงการ
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
formQuery.page = 1;
|
||||
formQuery.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* function redirect หน้าบันทึกผล
|
||||
* @param id โครงการ
|
||||
|
|
@ -282,11 +271,7 @@ function onDelete(id: string) {
|
|||
await http
|
||||
.delete(config.API.developmentMain + `/${id}`)
|
||||
.then(async () => {
|
||||
formQuery.page = await updateCurrentPage(
|
||||
formQuery.page,
|
||||
totalList.value,
|
||||
rows.value.length
|
||||
);
|
||||
await checkAndUpdatePage(rows.value.length);
|
||||
await fetchListProject();
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
|
|
@ -307,14 +292,6 @@ function onDetail(id: string) {
|
|||
router.push(`/development-detail/${id}`);
|
||||
}
|
||||
|
||||
/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
|
||||
watch(
|
||||
() => formQuery.pageSize,
|
||||
() => {
|
||||
fetchListProject();
|
||||
}
|
||||
);
|
||||
|
||||
/** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
|
||||
onMounted(() => {
|
||||
fetchActive();
|
||||
|
|
@ -502,7 +479,7 @@ onMounted(() => {
|
|||
</q-toolbar>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
<p-table
|
||||
for="table"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
|
|
@ -512,9 +489,10 @@ onMounted(() => {
|
|||
bordered
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:rows-per-page-options="[1, 10, 25, 50, 100]"
|
||||
:visible-columns="visibleColumns"
|
||||
@update:pagination="updatePagination"
|
||||
v-model:pagination="pagination"
|
||||
@request="onRequest"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -590,21 +568,7 @@ onMounted(() => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formQuery.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(totalPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="fetchListProject"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
|
|
@ -7,21 +7,17 @@ import http from "@/plugins/http";
|
|||
import config from "@/app.config";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import genReportXLSX from "@/plugins/genreportxlsx";
|
||||
import { calculateFiscalYear } from "@/utils/function";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
import type {
|
||||
DataOption,
|
||||
NewPagination,
|
||||
} from "@/modules/15_development/interface/index/Main";
|
||||
import type { DataOption } from "@/modules/15_development/interface/index/Main";
|
||||
import type { ListSholarship } from "@/modules/15_development/interface/response/Scholarship";
|
||||
/** importStore*/
|
||||
|
||||
/** use*/
|
||||
/** use */
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
|
||||
const { pagination, params, onRequest } = usePagination("", fetchList);
|
||||
/** หัวตาราง */
|
||||
const rows = ref<ListSholarship[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -142,32 +138,27 @@ const scholarshipTypeOp = ref<DataOption[]>([
|
|||
]);
|
||||
|
||||
const formQuery = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
year: calculateFiscalYear(new Date()), //ปีงบประมาณ
|
||||
type: "DOMESTICE",
|
||||
keyword: "",
|
||||
});
|
||||
const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
/** ดึงข้อมูล */
|
||||
function fetchList() {
|
||||
async function fetchList() {
|
||||
showLoader();
|
||||
http
|
||||
.get(
|
||||
config.API.devScholarship +
|
||||
`?page=${formQuery.page}&pageSize=${
|
||||
formQuery.pageSize
|
||||
}&keyword=${formQuery.keyword.trim()}&year=${
|
||||
formQuery.year
|
||||
}&scholarshipType=${formQuery.type}`
|
||||
)
|
||||
await http
|
||||
.get(config.API.devScholarship, {
|
||||
params: {
|
||||
...params.value,
|
||||
keyword: formQuery.keyword.trim(),
|
||||
year: formQuery.year,
|
||||
scholarshipType: formQuery.type,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
|
||||
totalList.value = res.data.result.total;
|
||||
rows.value = data;
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
rows.value = result.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
|
|
@ -179,7 +170,7 @@ function fetchList() {
|
|||
|
||||
/** ฟังชั่นดึงข้อมูล รายการ ใหม่ */
|
||||
function fetchNewList() {
|
||||
formQuery.page = 1;
|
||||
pagination.value.page = 1;
|
||||
fetchList();
|
||||
}
|
||||
|
||||
|
|
@ -190,15 +181,12 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
|
|||
: router.push("/development/scholarship/add");
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: NewPagination) {
|
||||
formQuery.page = 1;
|
||||
formQuery.pageSize = newPagination.rowsPerPage;
|
||||
/** ฟังชั่นดูรายละเอียด */
|
||||
function onDetail(id: string) {
|
||||
router.push(`/development/scholarship-detail/${id}`);
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นแปลงสถานะ */
|
||||
function conventStatus(val: string) {
|
||||
switch (val) {
|
||||
case "PENDING":
|
||||
|
|
@ -212,35 +200,6 @@ function conventStatus(val: string) {
|
|||
}
|
||||
}
|
||||
|
||||
// /** download file */
|
||||
// function onDownload() {
|
||||
// showLoader();
|
||||
// http
|
||||
// .get(config.API.developmentReportScholarship())
|
||||
// .then((res) => {
|
||||
// const dataList = res.data.result;
|
||||
// genReportXLSX(dataList, "รายการข้าราชการ ฯ ที่ได้รับทุนการศึกษา/ฝึกอบรม");
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// hideLoader();
|
||||
// });
|
||||
// }
|
||||
|
||||
/** เช็ค เมื่อมีการเปลี่ยนค่าของ ข้อมูลในเเถว */
|
||||
watch(
|
||||
() => formQuery.pageSize,
|
||||
() => {
|
||||
fetchNewList();
|
||||
}
|
||||
);
|
||||
|
||||
function onDetail(id: string) {
|
||||
router.push(`/development/scholarship-detail/${id}`);
|
||||
}
|
||||
|
||||
/** ดึงข้อมูลเมื่ออยู่ในหน้า */
|
||||
onMounted(() => {
|
||||
fetchList();
|
||||
|
|
@ -251,6 +210,7 @@ onMounted(() => {
|
|||
<div class="toptitle text-dark col-12 row items-center">
|
||||
รายการข้าราชการฯ ที่ได้รับทุนการศึกษา/ฝึกอบรม
|
||||
</div>
|
||||
|
||||
<q-card flat bordered class="q-pa-md">
|
||||
<q-toolbar class="q-pa-none">
|
||||
<div class="row q-gutter-sm">
|
||||
|
|
@ -360,7 +320,7 @@ onMounted(() => {
|
|||
</q-toolbar>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
<p-table
|
||||
for="table"
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
|
|
@ -372,7 +332,8 @@ onMounted(() => {
|
|||
class="custom-header-table"
|
||||
:visible-columns="visibleColumns"
|
||||
: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">
|
||||
|
|
@ -419,21 +380,7 @@ onMounted(() => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ totalList }} รายการ
|
||||
<q-pagination
|
||||
v-model="formQuery.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="fetchList"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue