392 lines
11 KiB
Vue
392 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<div class="text-center pb-8">
|
|
<v-img
|
|
class="mx-auto"
|
|
:aspect-ratio="1"
|
|
src="@/assets/logo-title.png"
|
|
width="250"
|
|
></v-img>
|
|
<div class="text-title txt-black">ค้นหาผู้สมัคร สว.</div>
|
|
<div class="my-5 text-sub2">
|
|
สามารถค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต
|
|
ที่ตัวเองเป็นผู้แสดงตน
|
|
</div>
|
|
<div class="text-small text-red-darken-3">
|
|
* การแสดงผลเป็นแบบสุ่มไม่เรียงลำดับ
|
|
</div>
|
|
<v-container>
|
|
<!-- {{ checkdata }} -->
|
|
<v-row>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field
|
|
v-if="province"
|
|
label="จังหวัด"
|
|
variant="solo"
|
|
v-model="province"
|
|
:value="province.name"
|
|
readonly
|
|
></v-text-field>
|
|
|
|
<!-- <v-autocomplete
|
|
clearable
|
|
label="จังหวัด"
|
|
:items="provinceItems"
|
|
variant="solo"
|
|
item-title="name"
|
|
item-value="id"
|
|
v-model="province"
|
|
placeholder="จังหวัด"
|
|
@update:modelValue="filterData"
|
|
hide-details
|
|
></v-autocomplete
|
|
> -->
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field
|
|
v-if="province"
|
|
label="อำเภอ / เขต"
|
|
variant="solo"
|
|
v-model="district"
|
|
:value="district.name"
|
|
readonly
|
|
></v-text-field>
|
|
<!-- <v-autocomplete
|
|
clearable
|
|
label="อำเภอ / เขต"
|
|
:items="districtItems"
|
|
variant="solo"
|
|
item-title="name"
|
|
v-model="district"
|
|
item-value="id"
|
|
placeholder="อำเภอ / เขต"
|
|
hide-details
|
|
:disabled="province == null"
|
|
></v-autocomplete
|
|
> -->
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field
|
|
v-if="province"
|
|
label="กลุ่มอาชีพ"
|
|
variant="solo"
|
|
v-model="group"
|
|
:value="group.id + ' ' + group.name"
|
|
readonly
|
|
></v-text-field>
|
|
<!-- <v-autocomplete
|
|
clearable
|
|
label="กลุ่มอาชีพ"
|
|
:items="items"
|
|
variant="solo"
|
|
item-title="name"
|
|
return-object
|
|
placeholder="กลุ่มอาชีพ"
|
|
hide-details
|
|
v-model="group"
|
|
>
|
|
<template v-slot:item="{ props, item }">
|
|
<v-list-item
|
|
v-bind="props"
|
|
:title="item.raw.id + ' ' + item.raw.name"
|
|
></v-list-item>
|
|
</template>
|
|
</v-autocomplete> -->
|
|
</v-col>
|
|
</v-row>
|
|
<v-btn
|
|
color="#e23972"
|
|
class="mt-8"
|
|
elevated
|
|
size="large"
|
|
@click="
|
|
searchUserApi(0, '');
|
|
showGroup = false;
|
|
"
|
|
:loading="load"
|
|
width="300"
|
|
height="52px"
|
|
>
|
|
<span class="text-sub">ค้นหากลุ่มอาชีพตนเอง</span>
|
|
</v-btn>
|
|
<!-- @click="searchUserApi(0, 'all')" -->
|
|
<v-btn
|
|
color="#4c884c"
|
|
class="mx-5 mt-8"
|
|
elevated
|
|
size="large"
|
|
width="300"
|
|
@click="showGroup = true"
|
|
:loading="load"
|
|
height="52px"
|
|
>
|
|
<span class="text-sub">ค้นหาทุกกลุ่มอาชีพ</span>
|
|
</v-btn>
|
|
</v-container>
|
|
<div v-if="!showGroup">
|
|
<CardUser :dataProfile="result" v-if="result.length" class="mt-2" />
|
|
|
|
<div
|
|
v-if="result.length == 0 && this.show"
|
|
class="my-10 text-sub2 txt-black"
|
|
>
|
|
<v-icon icon="mdi-alert-circle"></v-icon> ไม่พบข้อมูล
|
|
</div>
|
|
|
|
<div class="text-center mt-2">
|
|
<v-pagination
|
|
elevation="3"
|
|
v-if="count > 1"
|
|
v-model="page"
|
|
:length="Math.ceil(count / 2)"
|
|
rounded="circle"
|
|
@update:model-value="searchUser((this.page - 1) * 2)"
|
|
next-icon="mdi-menu-right"
|
|
prev-icon="mdi-menu-left"
|
|
></v-pagination>
|
|
</div>
|
|
</div>
|
|
<!-- <v-container class="my-0 py-0"> -->
|
|
<div>
|
|
<!-- v-if="showGroup" -->
|
|
<v-checkbox
|
|
v-if="showGroup"
|
|
v-model="checkbox1"
|
|
label="ดูเฉพาะกลุ่มอาชีพที่มีข้อมูล"
|
|
size="large"
|
|
class="px-7 mt-5 check-card text-subtitle"
|
|
color="#3d763d"
|
|
hide-details
|
|
|
|
></v-checkbox>
|
|
</div>
|
|
<!-- </v-container> -->
|
|
<div v-for="(group, i) in apiGroup" :key="i">
|
|
<CardUserGroup
|
|
:check="checkbox1"
|
|
:group="group"
|
|
:province="province"
|
|
:district="district"
|
|
v-if="showGroup"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// import Provinces from "@/components/form/provinces.json";
|
|
// import Districts from "@/components/form/districts.json";
|
|
import CardUser from "./CardUser.vue";
|
|
import CardUserGroup from "./CardUserGroup.vue";
|
|
import { client } from "@/utils/trpc";
|
|
|
|
export default {
|
|
components: {
|
|
CardUser,
|
|
CardUserGroup,
|
|
},
|
|
data() {
|
|
return {
|
|
checkbox1: true,
|
|
showGroup: false,
|
|
apiGroup: [],
|
|
allg: "",
|
|
checkdata: "",
|
|
show: false,
|
|
load: false,
|
|
result: [],
|
|
page: 1,
|
|
province: null,
|
|
district: null,
|
|
districtItems: [],
|
|
provinceItems: [],
|
|
items: [],
|
|
group: null,
|
|
offset: 0,
|
|
count: 0,
|
|
};
|
|
},
|
|
methods: {
|
|
searchUser(offset) {
|
|
this.show = false;
|
|
this.load = true;
|
|
if (offset == 0) {
|
|
this.page = 1;
|
|
}
|
|
let data = {
|
|
offset: offset,
|
|
limit: 2,
|
|
};
|
|
if (this.province) {
|
|
data.province = this.province.id;
|
|
// data.province = this.province;
|
|
}
|
|
if (this.group) {
|
|
if (this.allg !== "all") {
|
|
data.group = this.group.id;
|
|
}
|
|
}
|
|
if (this.district) {
|
|
data.zone = this.district.id;
|
|
}
|
|
|
|
// console.log(data);
|
|
client.user.getAllUser
|
|
.query(data)
|
|
.then((rs) => {
|
|
this.result = rs;
|
|
console.log(rs);
|
|
this.load = false;
|
|
if (rs.length == 0) {
|
|
this.show = true;
|
|
}
|
|
|
|
// this.districtItems = rs;
|
|
})
|
|
.catch((error) => {
|
|
this.load = false;
|
|
|
|
alert("ไม่สามารถโหลดข้อมูลได้");
|
|
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
|
});
|
|
},
|
|
searchUserApi(offset, checkg) {
|
|
this.allg = checkg;
|
|
this.show = false;
|
|
this.load = true;
|
|
if (offset == 0) {
|
|
this.page = 1;
|
|
}
|
|
// this.offset = (this.page - 1) * 10;
|
|
let data = {
|
|
offset: offset,
|
|
limit: 2,
|
|
};
|
|
if (this.province) {
|
|
data.province = this.province.id;
|
|
// data.province = this.province;
|
|
}
|
|
|
|
if (this.group) {
|
|
if (checkg !== "all") {
|
|
data.group = this.group.id;
|
|
}
|
|
}
|
|
if (this.district) {
|
|
data.zone = this.district.id;
|
|
}
|
|
|
|
// console.log(data);
|
|
client.user.getAllUserCount
|
|
.query(data)
|
|
.then((rs) => {
|
|
this.count = rs;
|
|
})
|
|
.catch((error) => {
|
|
alert("ไม่สามารถโหลดข้อมูลได้");
|
|
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
|
});
|
|
|
|
client.user.getAllUser
|
|
.query(data)
|
|
.then((rs) => {
|
|
this.result = rs;
|
|
console.log(rs);
|
|
this.load = false;
|
|
if (rs.length == 0) {
|
|
this.show = true;
|
|
}
|
|
|
|
// this.districtItems = rs;
|
|
})
|
|
.catch((error) => {
|
|
this.load = false;
|
|
|
|
// alert("ไม่สามารถโหลดข้อมูลได้");
|
|
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
|
});
|
|
},
|
|
filterData() {
|
|
// กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
|
|
this.district = null;
|
|
if (this.province) {
|
|
client.info.getAllZones
|
|
.query({ provice_id: this.province })
|
|
.then((data) => {
|
|
this.districtItems = data;
|
|
})
|
|
.catch((error) => {
|
|
// alert("ไม่สามารถโหลดข้อมูลได้");
|
|
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
|
});
|
|
}
|
|
},
|
|
getUser(datap) {
|
|
client.user.getSelf
|
|
.mutate({})
|
|
.then((data) => {
|
|
let province = datap.filter((x) => x.id === data.zone.province);
|
|
// let g =[...this.items].filter((x) => x.id === data.group);
|
|
this.province = province[0];
|
|
this.district = data.zone;
|
|
this.checkdata = { ...data };
|
|
this.group = data.group;
|
|
let filteredGroup = [...this.items].filter(
|
|
(x) => x.id !== data.group.id
|
|
);
|
|
this.apiGroup = filteredGroup;
|
|
console.log("filteredGroup", filteredGroup);
|
|
})
|
|
.catch((error) => {
|
|
// alert("ไม่สามารถโหลดข้อมูลได้");
|
|
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
client.info.getAllGroups
|
|
.query({})
|
|
.then((groups) => {
|
|
this.items = groups;
|
|
})
|
|
.catch((error) => {
|
|
// alert("ไม่สามารถโหลดข้อมูลได้");
|
|
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
|
});
|
|
|
|
client.info.getAllProvinces
|
|
.query({})
|
|
.then((data) => {
|
|
this.provinceItems = data;
|
|
this.getUser(data);
|
|
})
|
|
.catch((error) => {
|
|
// alert("ไม่สามารถโหลดข้อมูลได้");
|
|
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.check-card .v-selection-control {
|
|
align-items: center !important;
|
|
font-size: 25px;
|
|
}
|
|
.v-pagination .v-btn {
|
|
font-size: large;
|
|
background-color: white;
|
|
}
|
|
|
|
/* .v-pagination .v-pagination__item .v-btn {
|
|
display: none;
|
|
} */
|
|
.v-pagination .v-btn .pagination__prev {
|
|
font-size: 80px;
|
|
display: block !important;
|
|
}
|
|
.v-pagination .v-btn .pagination__next {
|
|
display: block !important;
|
|
font-size: 80px;
|
|
}
|
|
</style>
|