ทะเบียนประวัติ: ค้นหาด้วยชื่อ, เลขปชช, ตำแหน่ง; แก้การแสดงผลตาราง

This commit is contained in:
puriphatt 2024-03-25 07:54:38 +07:00
parent e28c71d91e
commit dccc41ac47
2 changed files with 44 additions and 26 deletions

View file

@ -74,7 +74,7 @@ const columns = ref<QTableProps["columns"]>([
align: "left",
label: "สายงาน",
sortable: true,
field: (v) => v.posType.posTypeName,
field: (v) => (v.posType ? v.posType.posTypeName : "-"),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
@ -85,7 +85,7 @@ const columns = ref<QTableProps["columns"]>([
align: "left",
label: "ระดับชั้นงาน",
sortable: true,
field: (v) => v.posLevel.posLevelName,
field: (v) => (v.posLevel ? v.posLevel.posLevelName : "-"),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>

View file

@ -109,13 +109,23 @@ function fetchYearOption() {
}
}
function fetchDataPerson() {
async function fetchDataPerson(search: boolean = false) {
showLoader();
let queryParams = {
page: formFilter.page,
pageSize: formFilter.pageSize,
};
if (search) {
queryParams = Object.assign({}, queryParams, {
searchField: searchType.value,
searchKeyword: formFilter.keyword,
});
}
http
.get(
config.API.registryNew +
`?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
)
.get(config.API.registryNew, { params: queryParams })
.then((res) => {
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
dataPersonMain.value = res.data.result.data;
@ -149,7 +159,7 @@ function onclickSearch() {
fetchYearOption();
}
formFilter.keyword = formFilter.keyword === null ? "" : formFilter.keyword;
fetchDataPerson();
fetchDataPerson(true);
}
function selectType(item: DataOption) {
@ -194,9 +204,13 @@ onMounted(async () => {
<q-card class="q-mt-md">
<q-card-section class="card-img q-pb-lg">
<div class="text-h5 text-center q-py-md text-weight-medium">นหาขอมลทะเบยนประว</div>
<div class="text-h5 text-center q-py-md text-weight-medium">
นหาขอมลทะเบยนประว
</div>
<div class="row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders">
<div
class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders"
>
<q-form @submit="onclickSearch">
<div class="bg-white row col-12 q-pa-none rounded-borders">
<div class="row col-11">
@ -212,10 +226,9 @@ onMounted(async () => {
option-label="name"
option-value="id"
map-options
class="selectS col-11 q-px-md "
class="selectS col-11 q-px-md"
color="deep-orange"
dropdown-icon="mdi-chevron-down"
/>
<q-separator vertical />
</div>
@ -234,12 +247,18 @@ onMounted(async () => {
</q-input>
</div>
<div class="row col-1">
<q-btn class="fit btnSearch" unelevated color="deep-orange" label="ค้นหา" type="submit" />
<q-btn
class="fit btnSearch"
unelevated
color="deep-orange"
label="ค้นหา"
type="submit"
/>
</div>
</div>
</q-form>
<div v-if="isShowBtnFilter" class="col-12 row q-mt-sm">
<q-space/>
<q-space />
<q-btn
flat
label="ตัวเลือกเพิ่มเติม"
@ -299,8 +318,7 @@ onMounted(async () => {
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
><!-- class="custom-btn" -->
><!-- class="custom-btn" -->
<template v-slot:label>
{{
labelOption.posType !== "ทั้งหมด"
@ -341,7 +359,7 @@ onMounted(async () => {
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
><!-- class="custom-btn" -->
><!-- class="custom-btn" -->
<template v-slot:label>
{{
labelOption.posLevel !== "ทั้งหมด"
@ -382,7 +400,7 @@ onMounted(async () => {
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
><!-- class="custom-btn" -->
><!-- class="custom-btn" -->
<template v-slot:label>
{{ `ปีเกษียณ${labelOption.retireYear}` }}
<q-btn
@ -464,7 +482,7 @@ onMounted(async () => {
label-color="white"
dropdown-icon="mdi-chevron-down"
class="q-px-sm"
><!-- class="custom-btn" -->
><!-- class="custom-btn" -->
<template v-slot:label>
{{
`อายุราชการ (${formFilter.rangeYear.min} - ${formFilter.rangeYear.max} ปี)`
@ -520,7 +538,7 @@ onMounted(async () => {
dropdown-icon="mdi-chevron-down"
:label="`เงื่อนไขอื่นๆ ${conditionTotal}`"
class="q-px-sm"
><!-- class="custom-btn" -->
><!-- class="custom-btn" -->
<q-list>
<q-item clickable v-close-popup>
<q-item-section>
@ -562,7 +580,7 @@ onMounted(async () => {
</q-card>
</template>
<style >
<style>
.card-img {
background: url("@/assets/registry-banner.png");
background-size: cover;
@ -581,19 +599,19 @@ onMounted(async () => {
background-color: #36969f;
}
.btnSearch{
.btnSearch {
border-radius: 0px 4px 4px 0px;
}
.bg-Search{
.bg-Search {
background: #00000015;
}
.lineFil{
transform:rotate(30deg);
.lineFil {
transform: rotate(30deg);
height: 20px;
margin-top: 15px;
background: #ffffff7b !important;
}
.selectS .q-field__control .q-field__append .q-icon{
.selectS .q-field__control .q-field__append .q-icon {
color: #ff5722 !important;
}
</style>