update Pagination สรรหา
This commit is contained in:
parent
4ead339be2
commit
a916ce797f
2 changed files with 139 additions and 277 deletions
|
|
@ -1,35 +1,16 @@
|
|||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
|
||||
{{ name }}
|
||||
{{
|
||||
`ครั้งที่${round == null ? "" : round}/${
|
||||
yearly == null ? "" : yearly + 543
|
||||
}`
|
||||
`ครั้งที่${round == null ? "" : round}/${yearly == null ? "" : yearly + 543
|
||||
}`
|
||||
}}
|
||||
<q-space />
|
||||
<q-btn
|
||||
@click="visible = !visible"
|
||||
dense
|
||||
round
|
||||
size="13px"
|
||||
:style="
|
||||
visible == false
|
||||
<q-btn @click="visible = !visible" dense round size="13px" :style="visible == false
|
||||
? 'transform: rotate(90deg);transition-duration: 0.8s;'
|
||||
: 'transform: rotate(0);transition-duration: 0.8s;'
|
||||
"
|
||||
icon="mdi-pin"
|
||||
flat
|
||||
></q-btn>
|
||||
" icon="mdi-pin" flat></q-btn>
|
||||
</div>
|
||||
<q-slide-transition>
|
||||
<q-card class="row col-12 q-mb-sm" v-show="visible">
|
||||
|
|
@ -39,23 +20,16 @@
|
|||
<div class="col-12 row">
|
||||
<div class="col-12">
|
||||
<div class="row col-12 q-col-gutter-sm fit">
|
||||
<div
|
||||
style="width: 25%"
|
||||
v-for="(num, index) in dataNum"
|
||||
:key="index"
|
||||
>
|
||||
<div style="width: 25%" v-for="(num, index) in dataNum" :key="index">
|
||||
<q-card bordered flat class="row fit cardNum items-center">
|
||||
<div class="col-12 row items-center q-pa-sm">
|
||||
<div
|
||||
:class="
|
||||
'col-12 text-h5 text-weight-bold text-' +
|
||||
`${num.color}`
|
||||
"
|
||||
>
|
||||
<div :class="'col-12 text-h5 text-weight-bold text-' +
|
||||
`${num.color}`
|
||||
">
|
||||
{{
|
||||
num.count != null
|
||||
? num.count.toLocaleString("en-US")
|
||||
: ""
|
||||
? num.count.toLocaleString("en-US")
|
||||
: ""
|
||||
}}
|
||||
</div>
|
||||
<div class="col-12 text-dark ellipsis">
|
||||
|
|
@ -72,53 +46,27 @@
|
|||
</q-card>
|
||||
</q-slide-transition>
|
||||
<q-card flat bordered class="col-12 q-pt-sm">
|
||||
<TableCandidate
|
||||
style="max-height: 80vh"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filter"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns"
|
||||
v-model:inputvisibleFilter="status"
|
||||
v-model:optionsFilter="optionsStatus"
|
||||
:pagination="initialPagination"
|
||||
:nornmalData="true"
|
||||
:paging="true"
|
||||
:titleText="''"
|
||||
:statusPayment="statusPayment"
|
||||
:setSeat="setSeat"
|
||||
:fetchData="fetchDataCom"
|
||||
:history="true"
|
||||
>
|
||||
<TableCandidate style="max-height: 80vh" :rows="rows" :columns="columns" :filter="filter"
|
||||
:visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
|
||||
v-model:inputvisibleFilter="status" v-model:optionsFilter="optionsStatus"
|
||||
:nornmalData="true" :paging="true" :titleText="''" :statusPayment="statusPayment" :setSeat="setSeat"
|
||||
:fetchData="fetchDataCom" :history="true" :page-size="page_size" :total="total" :page="page" :changePage="changePage" :max-page="maxPage">
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td auto-width>
|
||||
<q-checkbox v-model="props.selected" />
|
||||
</q-td>
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="viewDetail(props.row.id, props.row.status)"
|
||||
>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props"
|
||||
@click="viewDetail(props.row.id, props.row.status)">
|
||||
<div v-if="col.name == 'no'" class="table_ellipsis">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'fullname'">
|
||||
<div class="row col-12 items-center">
|
||||
<img
|
||||
v-if="props.row.avatar == ''"
|
||||
src="@/assets/avatar_user.jpg"
|
||||
class="q-mr-sm col-4"
|
||||
style="width: 28px; height: 28px; border-radius: 50%"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
:src="props.row.avatar"
|
||||
class="q-mr-sm col-4"
|
||||
style="width: 28px; height: 28px; border-radius: 50%"
|
||||
/>
|
||||
<img v-if="props.row.avatar == ''" src="@/assets/avatar_user.jpg" class="q-mr-sm col-4"
|
||||
style="width: 28px; height: 28px; border-radius: 50%" />
|
||||
<img v-else :src="props.row.avatar" class="q-mr-sm col-4"
|
||||
style="width: 28px; height: 28px; border-radius: 50%" />
|
||||
<div class="col-4">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.fullname }}
|
||||
|
|
@ -151,17 +99,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="col.name == 'status'"
|
||||
:class="
|
||||
props.row.status == 'checkRegister' ||
|
||||
<div v-else-if="col.name == 'status'" :class="props.row.status == 'checkRegister' ||
|
||||
props.row.status == 'checkPayment' ||
|
||||
props.row.status == 'checkSeat' ||
|
||||
props.row.status == 'checkPoint'
|
||||
? 'text-blue'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
? 'text-blue'
|
||||
: ''
|
||||
">
|
||||
{{ statusCandidate(props.row.status) }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'registerDate'" class="table_ellipsis">
|
||||
|
|
@ -172,16 +116,8 @@
|
|||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
color="primary"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
size="14px"
|
||||
icon="mdi-file-chart-outline"
|
||||
v-if="props.row.status == 'done'"
|
||||
@click="clickPointRow(props.row)"
|
||||
>
|
||||
<q-btn color="primary" flat dense round size="14px" icon="mdi-file-chart-outline"
|
||||
v-if="props.row.status == 'done'" @click="clickPointRow(props.row)">
|
||||
<q-tooltip>ผลสอบ</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
|
|
@ -194,14 +130,7 @@
|
|||
<q-card-section class="row items-center q-py-sm">
|
||||
<div class="text-bold">ใบทานสอบข้อมูล</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
v-close-popup
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
<q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="row items-center">
|
||||
|
|
@ -253,9 +182,6 @@ const visible = ref(true); //เปิดปิด card สรุปข้อม
|
|||
const dataNum = ref<DataNumObject[]>([]); //จำนวนสรุปจำนวนข้อมูลหลัก
|
||||
const rows = ref<any>([]);
|
||||
const checkProfile = ref<any>([]);
|
||||
const initialPagination = ref<Pagination>({
|
||||
rowsPerPage: 0,
|
||||
});
|
||||
const visibleColumns = ref<String[]>([
|
||||
// "check",
|
||||
"no",
|
||||
|
|
@ -467,12 +393,26 @@ const fetchDataCom = async () => {
|
|||
await fetchData();
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
showLoader();
|
||||
// paging
|
||||
const page = ref<number>(1)
|
||||
const page_size = ref<number>(5)
|
||||
const total = ref<number>(0)
|
||||
const maxPage = ref<number>(1)
|
||||
|
||||
async function changePage(pageVal: number, pageSizeVal: number, loading: boolean = false) {
|
||||
page.value = await pageVal
|
||||
page_size.value = await pageSizeVal
|
||||
fetchData(loading)
|
||||
}
|
||||
|
||||
const fetchData = async (loading: boolean = true) => {
|
||||
loading === true ?? showLoader()
|
||||
await http
|
||||
.get(config.API.candidateOfPeriodExam(status.value, examId.value))
|
||||
.get(config.API.candidateOfPeriodExam(status.value, examId.value) + `?page=${page.value}&pageSize=${page_size.value}&keyword=${filter.value}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
total.value = data.total
|
||||
maxPage.value = Math.ceil(data.total / page_size.value)
|
||||
rows.value = [];
|
||||
data.data.map((r: any) => {
|
||||
rows.value.push({
|
||||
|
|
@ -499,7 +439,7 @@ const fetchData = async () => {
|
|||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
loading === true ?? hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue