fix(evaluate):sort
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
00fc7eac26
commit
9b11502663
6 changed files with 81 additions and 184 deletions
|
|
@ -16,7 +16,12 @@
|
|||
:loading="loading"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ pagination.rowsNumber || attrs.rows.length }} รายการ
|
||||
ทั้งหมด
|
||||
{{
|
||||
pagination.rowsNumber.toLocaleString() ||
|
||||
attrs.rows.length.toLocaleString()
|
||||
}}
|
||||
รายการ
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
@update:model-value="handlePageChange"
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const total = computed(() => {
|
|||
});
|
||||
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
sortBy: "",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, onMounted, computed, type PropType } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
/**
|
||||
* importTypr
|
||||
*/
|
||||
/** importType*/
|
||||
import type { QTableProps } from "quasar";
|
||||
import type {
|
||||
FormData,
|
||||
|
|
@ -17,21 +18,13 @@ import type {
|
|||
} from "@/modules/11_discipline/interface/request/director";
|
||||
import type { Pagination } from "@/modules/12_evaluatePersonal/interface/index/Main";
|
||||
|
||||
/**
|
||||
* importComponenst
|
||||
*/
|
||||
/** importComponenst*/
|
||||
import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
|
||||
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
/** use*/
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
const { pagination, params, onRequest } = usePagination("", searchInput);
|
||||
|
||||
/**
|
||||
* รับ props มาจาก page หลัก
|
||||
|
|
@ -109,7 +102,7 @@ const columnsRespondent = ref<QTableProps["columns"]>([
|
|||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
sortable: false,
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
@ -142,33 +135,19 @@ const columnsRespondent = ref<QTableProps["columns"]>([
|
|||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const total = ref<number>(0);
|
||||
const totalList = ref<number>(1);
|
||||
const pagination = ref({
|
||||
sortBy: "createdAt",
|
||||
descending: true,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
|
||||
/**
|
||||
* บันทึกข้อมูล
|
||||
*/
|
||||
/** บันทึกข้อมูล*/
|
||||
function onSubmit() {
|
||||
props.onSubmit(formData);
|
||||
}
|
||||
|
||||
/**
|
||||
* update เมื่อเปลี่ยน option
|
||||
*/
|
||||
/** update เมื่อเปลี่ยน option*/
|
||||
function updateSelect() {
|
||||
search.value = "";
|
||||
}
|
||||
|
||||
/**
|
||||
* ค้นหารายชื่อ
|
||||
*/
|
||||
function searchInput() {
|
||||
/** ค้นหารายชื่อ*/
|
||||
async function searchInput() {
|
||||
searchRef.value.validate();
|
||||
if (!searchRef.value.hasError) {
|
||||
showLoader();
|
||||
|
|
@ -177,19 +156,16 @@ function searchInput() {
|
|||
keyword: search.value ? search.value.trim() : "",
|
||||
system: (route.meta?.Key as string) || undefined,
|
||||
};
|
||||
http
|
||||
.post(
|
||||
config.API.orgSearchPersonal() +
|
||||
`?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}`,
|
||||
body
|
||||
)
|
||||
await http
|
||||
.post(config.API.orgSearchPersonal(), body, {
|
||||
params: {
|
||||
...params.value,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
totalList.value = Math.ceil(
|
||||
res.data.result.total / pagination.value.rowsPerPage
|
||||
);
|
||||
total.value = res.data.result.total;
|
||||
const list = data.map((e: ResponsePreson) => ({
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
const list = result.data.map((e: ResponsePreson) => ({
|
||||
personId: e.id,
|
||||
idcard: e.citizenId,
|
||||
prefix: e.prefix,
|
||||
|
|
@ -218,7 +194,8 @@ function searchInput() {
|
|||
}
|
||||
|
||||
/**
|
||||
* เลืือกชื่อกรรมการ
|
||||
* เลือกชื่อกรรมการ
|
||||
* @param data เลือกชื่อกรรมการ
|
||||
*/
|
||||
function returnDetail(data: ResponsePreson) {
|
||||
formData.prefix = data.prefix;
|
||||
|
|
@ -239,24 +216,17 @@ function onclickViewinfo(id: string) {
|
|||
}
|
||||
|
||||
/**
|
||||
* เปิด,ปิด popup ทะเบียนประวัติ
|
||||
* ฟังก์ชันอัพเดท modal
|
||||
* @param modal เปิด,ปิด popup ทะเบียนประวัติ
|
||||
*/
|
||||
function updatemodalPersonal(modal: boolean) {
|
||||
modalPersonal.value = modal;
|
||||
}
|
||||
|
||||
function updatePagination(newPagination: Pagination) {
|
||||
pagination.value.page = 1;
|
||||
pagination.value.rowsPerPage = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => pagination.value.rowsPerPage,
|
||||
() => {
|
||||
searchInput();
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* ฟังก์ชันโหลดข้อมูล
|
||||
* @param data ข้อมูลที่ส่งมา edit,view
|
||||
*/
|
||||
async function fetchForm(data: FormData) {
|
||||
formData.prefix = data.prefix;
|
||||
formData.firstname = data.firstname;
|
||||
|
|
@ -327,7 +297,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
<p-table
|
||||
ref="table"
|
||||
:columns="columnsRespondent"
|
||||
:rows="rows"
|
||||
|
|
@ -339,23 +309,9 @@ onMounted(async () => {
|
|||
class="custom-header-table"
|
||||
:visible-columns="visibleColumnsRespondent"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
v-model:pagination="pagination"
|
||||
@request="onRequest"
|
||||
>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ total }} รายการ
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(totalList)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="searchInput"
|
||||
></q-pagination>
|
||||
</template>
|
||||
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th
|
||||
|
|
@ -377,11 +333,7 @@ onMounted(async () => {
|
|||
@click.stop.prevent="returnDetail(props.row)"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{
|
||||
(pagination.page - 1) * pagination.rowsPerPage +
|
||||
props.rowIndex +
|
||||
1
|
||||
}}
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'info'">
|
||||
<q-btn
|
||||
|
|
@ -404,7 +356,7 @@ onMounted(async () => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ interface CertificatesForm {
|
|||
|
||||
interface EvaluateList {
|
||||
id: string;
|
||||
citizanId: string;
|
||||
citizenId: string;
|
||||
fullName: string;
|
||||
position: string;
|
||||
level: string | null;
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
|
|||
(data: EvaluateRes) =>
|
||||
({
|
||||
id: data.id,
|
||||
citizanId: data.citizenId,
|
||||
citizenId: data.citizenId,
|
||||
fullName: data.fullName,
|
||||
position: data.position,
|
||||
level: convertType(data.type),
|
||||
|
|
@ -74,12 +74,12 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
|
|||
|
||||
const visibleColumns = ref<String[]>([
|
||||
"no",
|
||||
"citizanId",
|
||||
"citizenId",
|
||||
"fullName",
|
||||
"position",
|
||||
"level",
|
||||
"positionNumber",
|
||||
"agency",
|
||||
"posNo",
|
||||
"oc",
|
||||
"status",
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
|
|
@ -96,19 +96,17 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
|
|||
name: "level",
|
||||
align: "left",
|
||||
label: "ระดับที่ยื่นขอ",
|
||||
sortable: true,
|
||||
sortable: false,
|
||||
field: "level",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "citizanId",
|
||||
name: "citizenId",
|
||||
align: "center",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
sortable: false,
|
||||
field: "citizanId",
|
||||
sortable: true,
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -129,36 +127,30 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
|
|||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "positionNumber",
|
||||
name: "posNo",
|
||||
align: "left",
|
||||
label: "เลขที่ตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "positionNumber",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "agency",
|
||||
name: "oc",
|
||||
align: "left",
|
||||
label: "สังกัด",
|
||||
sortable: true,
|
||||
field: "agency",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
sortable: false,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import genReportXLSX from "@/plugins/genreportxlsx";
|
|||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { usePagination } from "@/composables/usePagination";
|
||||
|
||||
/** importType*/
|
||||
import type {
|
||||
|
|
@ -28,6 +29,7 @@ const route = useRoute();
|
|||
const mixin = useCounterMixin();
|
||||
const store = useEvalutuonStore();
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
const { pagination, params, onRequest } = usePagination("", fetchEvaluteList);
|
||||
|
||||
/** request body*/
|
||||
const organization = ref<string>("");
|
||||
|
|
@ -37,12 +39,7 @@ const organizationOps = ref<DataOption[]>([]);
|
|||
const year = ref<number>(new Date().getFullYear());
|
||||
const modalReport = ref<boolean>(false); //ตัวแปร popup report
|
||||
const loadingBtn = ref<boolean>(false); //ตัวแปร popup report
|
||||
const currentPage = ref<number>(1); //หน้าปัจจุบัน
|
||||
const maxPage = ref<number>(0); //จำนวนหน่า
|
||||
const page = ref<number>(1); //หน้า
|
||||
const total = ref<number>(0); //จำนวนข้อมูลทั้งหมด
|
||||
const filter = ref<string>(""); //คำค้นหา
|
||||
const pageSize = ref<number>(10); //จำนวนรายการต่อหน้า
|
||||
|
||||
//ค้นหาตามสถานะ
|
||||
const selectedStatus = ref<string[]>([
|
||||
|
|
@ -69,50 +66,39 @@ const optionsMain = ref<OptionStatus[]>([
|
|||
]);
|
||||
const options = ref<OptionStatus[]>([]); //ตัวเลือกค้นหาตามสถานะ
|
||||
|
||||
/** pagination ของตาราง*/
|
||||
const initialPagination = ref<any>({
|
||||
sortBy: null,
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: pageSize,
|
||||
/** ชื่อค่าที่ค้นหาสภานะ*/
|
||||
const label = computed(() => {
|
||||
const filterOption = optionsMain.value.filter((option) =>
|
||||
selectedStatus.value.includes(option.val)
|
||||
);
|
||||
const labelval = filterOption.map((e) => e.label);
|
||||
if (labelval.length !== 0) {
|
||||
return labelval.length <= 2
|
||||
? `${labelval.slice(0, 2).join(", ")}`
|
||||
: `${labelval.slice(0, 2).join(", ")}, อื่นๆ (${labelval.length - 2})`;
|
||||
} else return "";
|
||||
});
|
||||
|
||||
/**
|
||||
* function อัปเดท paging
|
||||
* @param initialPagination ข้อมูล pagination
|
||||
*/
|
||||
async function updatePagination(initialPagination: any) {
|
||||
currentPage.value = 1;
|
||||
pageSize.value = initialPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* function ค้นหาตาม keyword
|
||||
*/
|
||||
/** function ค้นหาตาม keyword*/
|
||||
function filterFn() {
|
||||
updatePagination(filter.value);
|
||||
pageSize.value = initialPagination.value.rowsPerPage;
|
||||
pagination.value.page = 1;
|
||||
fetchEvaluteList();
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกรายการคำขอประเมินD
|
||||
*/
|
||||
/** function เรียกรายการคำขอประเมิน*/
|
||||
async function fetchEvaluteList() {
|
||||
showLoader();
|
||||
const body = {
|
||||
page: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
...params.value,
|
||||
keyword: filter.value.trim(),
|
||||
status: selectedStatus.value,
|
||||
};
|
||||
await http
|
||||
.post(config.API.evaluationMain(), body)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result.data;
|
||||
total.value = res.data.result.total;
|
||||
maxPage.value = Math.ceil(total.value / pageSize.value);
|
||||
store.fetchData(data);
|
||||
const result = res.data.result;
|
||||
pagination.value.rowsNumber = result.total;
|
||||
store.fetchData(result.data);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -135,21 +121,6 @@ function Detailpage(id: string, type: string) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ชื่อค่าที่ค้นหาสภานะ
|
||||
*/
|
||||
const label = computed(() => {
|
||||
const filterOption = optionsMain.value.filter((option) =>
|
||||
selectedStatus.value.includes(option.val)
|
||||
);
|
||||
const labelval = filterOption.map((e) => e.label);
|
||||
if (labelval.length !== 0) {
|
||||
return labelval.length <= 2
|
||||
? `${labelval.slice(0, 2).join(", ")}`
|
||||
: `${labelval.slice(0, 2).join(", ")}, อื่นๆ (${labelval.length - 2})`;
|
||||
} else return "";
|
||||
});
|
||||
|
||||
/**
|
||||
* function ต้นหาข้อมูลของ Option
|
||||
* @param val ค่าที่ต้องการฟิลเตอร์
|
||||
|
|
@ -207,9 +178,7 @@ async function getReport() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function fetch ข้อมูลโครงสร้างปัจจุบัน
|
||||
*/
|
||||
/** function fetch ข้อมูลโครงสร้างปัจจุบัน*/
|
||||
async function getActiveId() {
|
||||
showLoader();
|
||||
await http
|
||||
|
|
@ -252,14 +221,6 @@ function filterSelector(val: string, update: Function) {
|
|||
});
|
||||
}
|
||||
|
||||
/** function callback เมื่อมีการเปลี่ยนหน้า*/
|
||||
watch(
|
||||
() => pageSize.value,
|
||||
() => {
|
||||
fetchEvaluteList();
|
||||
}
|
||||
);
|
||||
|
||||
/** HookLifecycle */
|
||||
onMounted(async () => {
|
||||
await fetchEvaluteList(); // เรียกข้อมูลรายการปรัเมิน
|
||||
|
|
@ -339,20 +300,20 @@ onMounted(async () => {
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<d-table
|
||||
<p-table
|
||||
ref="table"
|
||||
:columns="store.columns"
|
||||
:rows="store.rows"
|
||||
row-key="interrogated"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="false"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="store.visibleColumns"
|
||||
v-model:pagination="initialPagination"
|
||||
: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">
|
||||
|
|
@ -362,6 +323,7 @@ onMounted(async () => {
|
|||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td auto-width>
|
||||
|
|
@ -379,7 +341,7 @@ onMounted(async () => {
|
|||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ (page - 1) * pageSize + props.rowIndex + 1 }}
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
|
||||
<div v-else-if="col.name === 'agency'">
|
||||
|
|
@ -393,21 +355,7 @@ onMounted(async () => {
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ total }} รายการ
|
||||
<q-pagination
|
||||
v-model="currentPage"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="fetchEvaluteList"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue