ทะเบียนประวัติ: ค้นหาด้วยชื่อ, เลขปชช, ตำแหน่ง; แก้การแสดงผลตาราง
This commit is contained in:
parent
e28c71d91e
commit
dccc41ac47
2 changed files with 44 additions and 26 deletions
|
|
@ -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) =>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue