ปรับการทำงาน paging ของสรรหา (รายชื่อคัดเลือก)
This commit is contained in:
parent
7f3ed1368b
commit
c13d22f704
2 changed files with 308 additions and 101 deletions
|
|
@ -1,16 +1,35 @@
|
|||
<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">
|
||||
|
|
@ -20,16 +39,23 @@
|
|||
<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">
|
||||
|
|
@ -46,27 +72,57 @@
|
|||
</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" :nornmalData="true" :paging="true"
|
||||
:titleText="''" :statusPayment="statusPayment" :setSeat="setSeat" :fetchData="fetchDataCom" :history="true"
|
||||
:page-size="pageSize" :total="total" :page="page" :changePage="changePage" :max-page="maxPage">
|
||||
<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="pageSize"
|
||||
:total="total"
|
||||
:page="page"
|
||||
@update:change-page="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">
|
||||
{{ ((page-1) * pageSize) + props.rowIndex + 1 }}
|
||||
{{ (page - 1) * pageSize + 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 }}
|
||||
|
|
@ -99,13 +155,17 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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'
|
||||
: ''
|
||||
">
|
||||
<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'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ statusCandidate(props.row.status) }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'registerDate'" class="table_ellipsis">
|
||||
|
|
@ -116,8 +176,16 @@
|
|||
</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>
|
||||
|
|
@ -130,7 +198,14 @@
|
|||
<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">
|
||||
|
|
@ -394,25 +469,34 @@ const fetchDataCom = async () => {
|
|||
};
|
||||
|
||||
// paging
|
||||
const page = ref<number>(1)
|
||||
const pageSize = ref<number>(25)
|
||||
const total = ref<number>(0)
|
||||
const maxPage = ref<number>(1)
|
||||
const page = ref<number>(1);
|
||||
const pageSize = ref<number>(25);
|
||||
const total = ref<number>(0);
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
async function changePage(pageVal: number, pageSizeVal: number, loading: boolean = false) {
|
||||
page.value = await pageVal
|
||||
pageSize.value = await pageSizeVal
|
||||
fetchData(loading)
|
||||
async function changePage(
|
||||
pageVal: number,
|
||||
pageSizeVal: number,
|
||||
loading: boolean = false
|
||||
) {
|
||||
page.value = await pageVal;
|
||||
pageSize.value = await pageSizeVal;
|
||||
fetchData(loading);
|
||||
}
|
||||
|
||||
const fetchData = async (loading: boolean = true) => {
|
||||
loading === true ?? showLoader()
|
||||
loading === true ?? showLoader();
|
||||
await http
|
||||
.get(config.API.candidateOfPeriodExam(status.value, examId.value) + `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`)
|
||||
.get(
|
||||
config.API.candidateOfPeriodExam(status.value, examId.value) +
|
||||
`?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
|
||||
)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
total.value = data.total
|
||||
maxPage.value = await Math.ceil(data.total / pageSize.value)
|
||||
total.value = data.total;
|
||||
maxPage.value = await Math.ceil(data.total / pageSize.value);
|
||||
maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
|
||||
|
||||
rows.value = [];
|
||||
data.data.map((r: any) => {
|
||||
rows.value.push({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue