รายการการประเมินผลการปฏิบัติราชการระดับบุคคล => สร้างแบบประเมินผลฯ ปรับ paging
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
74f1540203
commit
7fa1129457
1 changed files with 67 additions and 18 deletions
|
|
@ -10,7 +10,7 @@ import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
|
|||
import type {
|
||||
DataOption,
|
||||
typeOp,
|
||||
ResponsePreson,
|
||||
NewPagination,
|
||||
tableType,
|
||||
FormData,
|
||||
} from "@/modules/14_KPI/interface/index/Main";
|
||||
|
|
@ -22,10 +22,10 @@ const personId = ref<string>("");
|
|||
const modalPersonal = ref<boolean>(false);
|
||||
const searchRef = ref<any>(null);
|
||||
const rows = ref<tableType[]>([]);
|
||||
const type = ref<string>("idcard");
|
||||
const type = ref<string>("citizenId");
|
||||
const search = ref<string>("");
|
||||
const typeOps = ref<typeOp[]>([
|
||||
{ id: "idcard", name: "เลขประจำตัวประชาชน" },
|
||||
{ id: "citizenId", name: "เลขประจำตัวประชาชน" },
|
||||
{ id: "firstname", name: "ชื่อ" },
|
||||
{ id: "lastname", name: "นามสกุล" },
|
||||
]);
|
||||
|
|
@ -96,9 +96,8 @@ function onCloseDialog() {
|
|||
formRound.commanderHighId = "";
|
||||
selected.value = [];
|
||||
search.value = "";
|
||||
type.value = "idcard";
|
||||
type.value = "citizenId";
|
||||
}
|
||||
|
||||
/** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
|
||||
const visibleColumnsRespondent = ref<string[]>([
|
||||
"no",
|
||||
|
|
@ -112,13 +111,18 @@ const visibleColumnsRespondent = ref<string[]>([
|
|||
"organization",
|
||||
]);
|
||||
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const columnsRespondent = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
field: (row) =>
|
||||
(query.page - 1) * query.pageSize + rows.value.indexOf(row) + 1,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
|
@ -223,6 +227,9 @@ function checkClosed() {
|
|||
isRoundClose.value = formRound.kpiPeriodId.isClosed;
|
||||
}
|
||||
|
||||
const total = ref<number>(0);
|
||||
const maxPage = ref<number>(1);
|
||||
|
||||
async function searchInput(check: boolean) {
|
||||
if (check) {
|
||||
searchRules.value = check;
|
||||
|
|
@ -234,13 +241,21 @@ async function searchInput(check: boolean) {
|
|||
keyword: search.value,
|
||||
};
|
||||
await http
|
||||
.post(config.API.orgSearchPersonal(), body)
|
||||
.post(
|
||||
config.API.orgSearchPersonal() +
|
||||
`?page=${query.page}&pageSize=${query.pageSize}`,
|
||||
body
|
||||
)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
maxPage.value = Math.ceil(data.total / query.pageSize);
|
||||
total.value = data.total;
|
||||
|
||||
rows.value = data;
|
||||
rows.value = data.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.catch((err) => {})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
|
|
@ -263,15 +278,21 @@ function getOrgOp() {
|
|||
const data = res.data.result;
|
||||
evaluatorIdMainOp.value = data.caregiver.map((i: any) => ({
|
||||
id: i.id,
|
||||
name: `${i.prefix ? i.prefix :''}${i.firstName ? i.firstName : ''} ${i.lastName ? i.lastName:''}`,
|
||||
name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
|
||||
i.lastName ? i.lastName : ""
|
||||
}`,
|
||||
}));
|
||||
commanderIdMainOp.value = data.commander.map((i: any) => ({
|
||||
id: i.id,
|
||||
name: `${i.prefix ? i.prefix :''}${i.firstName ? i.firstName : ''} ${i.lastName ? i.lastName:''}`,
|
||||
name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
|
||||
i.lastName ? i.lastName : ""
|
||||
}`,
|
||||
}));
|
||||
commanderHighMainOp.value = data.chairman.map((i: any) => ({
|
||||
id: i.id,
|
||||
name: `${i.prefix ? i.prefix :''}${i.firstName ? i.firstName : ''} ${i.lastName ? i.lastName:''}`,
|
||||
name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
|
||||
i.lastName ? i.lastName : ""
|
||||
}`,
|
||||
}));
|
||||
})
|
||||
.catch((e) => {
|
||||
|
|
@ -329,6 +350,22 @@ watch(
|
|||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* function อัปเดท paging
|
||||
* @param initialPagination ข้อมูล pagination
|
||||
*/
|
||||
async function updatePagination(initialPagination: NewPagination) {
|
||||
query.page = 1;
|
||||
query.pageSize = initialPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => query.pageSize,
|
||||
() => {
|
||||
searchInput(true);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modalDialog" persistent>
|
||||
|
|
@ -374,7 +411,7 @@ watch(
|
|||
icon="search"
|
||||
label="ค้นหา"
|
||||
class="full-width q-py-sm q-px-md"
|
||||
@click="searchInput(true)"
|
||||
@click="(query.page = 1), searchInput(true)"
|
||||
>
|
||||
</q-btn>
|
||||
</template>
|
||||
|
|
@ -389,11 +426,12 @@ watch(
|
|||
flat
|
||||
bordered
|
||||
selection="single"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
v-model:selected="selected"
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="visibleColumnsRespondent"
|
||||
@update:pagination="updatePagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -425,10 +463,7 @@ watch(
|
|||
:key="col.name"
|
||||
:props="props"
|
||||
>
|
||||
<div v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'positionType'">
|
||||
<div v-if="col.name == 'positionType'">
|
||||
{{
|
||||
props.row.positionTypeName
|
||||
? props.row.positionTypeName
|
||||
|
|
@ -451,6 +486,20 @@ watch(
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ total }} รายการ
|
||||
<q-pagination
|
||||
v-model="query.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="searchInput(true)"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue