This commit is contained in:
35
src/App.vue
35
src/App.vue
@@ -13,12 +13,19 @@
|
||||
></span>
|
||||
|
||||
<!-- {{ getUsernameFromLocalStorage }} -->
|
||||
<span
|
||||
><v-btn
|
||||
<span>
|
||||
<v-btn
|
||||
variant="text"
|
||||
href="/"
|
||||
class="mr-3"
|
||||
> <v-icon icon="mdi-home-variant-outline" size="30"></v-icon></v-btn
|
||||
class="px-1"
|
||||
to="/check"
|
||||
|
||||
>
|
||||
<v-icon icon="mdi-file-document-outline " size="25"></v-icon>
|
||||
ตรวจสอบสิทธิ์
|
||||
</v-btn>
|
||||
<v-btn variant="text" href="/" class="px-1" >
|
||||
<v-icon icon="mdi-home-variant-outline" size="30"></v-icon>
|
||||
หน้าหลัก</v-btn
|
||||
>
|
||||
<!-- <v-btn variant="text" v-if="getUsername" to="/profile">
|
||||
<v-icon icon="mdi-account-outline"></v-icon>{{ getUsername }}</v-btn
|
||||
@@ -26,29 +33,31 @@
|
||||
<!-- <v-btn variant="text" v-if="getUsername" @click="logout" class="mr-2"
|
||||
><v-icon icon="mdi-logout"></v-icon> Logout
|
||||
</v-btn> -->
|
||||
|
||||
<v-btn
|
||||
variant="text"
|
||||
class="mr-2"
|
||||
|
||||
v-if="
|
||||
getUsername == '' ||
|
||||
getUsername == null ||
|
||||
getUsername == undefined
|
||||
"
|
||||
to="/login"
|
||||
style="font-size: medium;"
|
||||
|
||||
>
|
||||
<v-icon icon="mdi-login" size="25"></v-icon> เข้าสู่ระบบ
|
||||
<v-icon icon="mdi-login" size="25"></v-icon> เข้าสู่ระบบ
|
||||
</v-btn>
|
||||
|
||||
<v-menu transition="slide-x-transition" v-if="getUsername">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn elevated color="#F4C03F" v-bind="props" height="40">
|
||||
<v-btn elevated color="#F4C03F" v-bind="props" height="40" class="mt-2 px-2" >
|
||||
<!-- {{ getImg }} -->
|
||||
|
||||
<v-avatar
|
||||
color="#635d56"
|
||||
v-if="getImg"
|
||||
:image="getImg"
|
||||
size="30"
|
||||
size="35"
|
||||
>
|
||||
</v-avatar
|
||||
><v-avatar size="40" v-else>
|
||||
@@ -58,7 +67,9 @@
|
||||
size="30"
|
||||
></v-icon>
|
||||
</v-avatar>
|
||||
<span class="ml-3" style="font-size: medium;">{{ getUsername }}</span>
|
||||
<span class="ml-2" style="font-size: medium">{{
|
||||
getUsername
|
||||
}}</span>
|
||||
</v-btn></template
|
||||
>
|
||||
<v-list>
|
||||
@@ -129,7 +140,7 @@ export default {
|
||||
if (this.getUsername == "") {
|
||||
this.$store.commit("setUsername", this.username);
|
||||
}
|
||||
if (this.getImg == ""||this.getImg == null||this.getImg == undefined) {
|
||||
if (this.getImg == "" || this.getImg == null || this.getImg == undefined) {
|
||||
this.$store.commit("setImg", this.img);
|
||||
}
|
||||
},
|
||||
|
||||
BIN
src/assets/logo-title-2.png
Normal file
BIN
src/assets/logo-title-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
@@ -19,7 +19,7 @@
|
||||
</div>
|
||||
|
||||
<div class="text-center pa-4">
|
||||
<v-btn
|
||||
<!-- <v-btn
|
||||
@click="dialog = true"
|
||||
elevated
|
||||
color="#B2C573"
|
||||
@@ -30,7 +30,7 @@
|
||||
width="470"
|
||||
>
|
||||
<span class="text-normal"> ขั้นตอนการใช้งานระบบ</span>
|
||||
</v-btn>
|
||||
</v-btn> -->
|
||||
|
||||
<v-dialog v-model="dialog" width="100%">
|
||||
<v-card width="100%">
|
||||
@@ -46,23 +46,11 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
|
||||
<!-- <v-btn
|
||||
elevated
|
||||
color="#B2C573"
|
||||
class="mt-4 text-normal"
|
||||
style="color: #0f470f"
|
||||
size="large"
|
||||
height="80"
|
||||
@click="checkPage"
|
||||
>
|
||||
<span class="text-normal">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
|
||||
</v-btn> -->
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative" class="bg-curve" id="started">
|
||||
<div style="position: relative" class="bg-curve d-none" id="started">
|
||||
<v-row
|
||||
style="height: 100%; width: 90%"
|
||||
align="center"
|
||||
@@ -100,7 +88,9 @@
|
||||
height="85"
|
||||
to="/check"
|
||||
>
|
||||
<span class="text-normal" style="white-space: break-spaces;"> ตรวจสอบคุณสมบัติการเป็น สว.</span>
|
||||
<span class="text-normal" style="white-space: break-spaces">
|
||||
ตรวจสอบคุณสมบัติการเป็น สว.</span
|
||||
>
|
||||
<v-img
|
||||
:aspect-ratio="1"
|
||||
src="../assets/Group 9.png"
|
||||
@@ -194,10 +184,12 @@ export default {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.bg-curve {
|
||||
position: relative;
|
||||
top: -59px;
|
||||
background-size: cover;
|
||||
padding-top: 50px;
|
||||
padding-top: 70px;
|
||||
background-image: url("/src/assets/Path\ 14.png");
|
||||
height: 580px;
|
||||
height: 450px;
|
||||
background-position: center top;
|
||||
/* background: #2b2b26 0% 0% no-repeat padding-box; */
|
||||
}
|
||||
@@ -210,8 +202,9 @@ export default {
|
||||
}
|
||||
@media only screen and (min-width: 0px) and (max-width: 700px) {
|
||||
.bg-curve {
|
||||
height: 530px;
|
||||
|
||||
}
|
||||
height: 450px;
|
||||
position: relative;
|
||||
top: -79px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="bg-main">
|
||||
<Header />
|
||||
<Section2Green />
|
||||
<Section3Base />
|
||||
<!-- <Section3Base /> -->
|
||||
<Section4White/>
|
||||
<Section5Green/>
|
||||
<Section6Base/>
|
||||
@@ -16,7 +16,7 @@ import { mapGetters } from "vuex";
|
||||
// import { client } from "@/utils/trpc";
|
||||
import Header from "./HeaderHome.vue";
|
||||
import Section2Green from "./Section2Green.vue";
|
||||
import Section3Base from "./Section3Base.vue";
|
||||
// import Section3Base from "./Section3Base.vue";
|
||||
import Section4White from "./Section4White.vue";
|
||||
import Section5Green from "./Section5Green.vue";
|
||||
import Section6Base from "./Section6Base.vue";
|
||||
@@ -29,7 +29,7 @@ export default {
|
||||
components: {
|
||||
Header,
|
||||
Section2Green,
|
||||
Section3Base,
|
||||
// Section3Base,
|
||||
Section4White,
|
||||
Section5Green,
|
||||
Section6Base,
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<div style="position: relative" class="bg-green-curve text-normal " >
|
||||
<div style="position: relative" class="text-normal bg-curve my-auto" >
|
||||
<div
|
||||
style="width: 90%"
|
||||
class="text-center text-white py-10 pb-20 mx-auto"
|
||||
class="text-center text-white py-10 mx-auto my-auto"
|
||||
v-if="
|
||||
getUsername == '' || getUsername == null || getUsername == undefined
|
||||
"
|
||||
>
|
||||
<div class="text-subtitle mx-10 text-center box-order mx-auto my-5" style="color:#ffffff;">
|
||||
<div class="text-subtitle mx-10 text-center box-order mx-auto my-5 d-none" style="color:#ffffff;">
|
||||
ขั้นตอนที่
|
||||
<v-avatar color="#f4c03f" class="text-subtitle">2</v-avatar>
|
||||
</div>
|
||||
<div class="text-title my-3">มาลองสร้างตัวตนก่อนลงสมัคร สว.</div>
|
||||
<div class="text-title my-3">มาลองสร้างตัวตนสมัคร สว.</div>
|
||||
<div class="mb-8">
|
||||
ลงทะเบียนแสดงตัวตน แสดงความคิดเห็น ก่อนลงสมัคร สว. รอบจริง
|
||||
ลงทะเบียนแสดงตัวตน แสดงความคิดเห็น สมัคร สว.
|
||||
</div>
|
||||
|
||||
<v-btn
|
||||
@@ -30,7 +30,7 @@
|
||||
width="80"
|
||||
style="position: absolute; bottom: -40px; right: 0"
|
||||
></v-img>
|
||||
<span class="text-normal"> แสดงตนเป็นผู้สมัคร</span>
|
||||
<span class="text-normal"> ลงทะเบียนผู้สมัคร</span>
|
||||
</v-btn>
|
||||
</div>
|
||||
<div class="text-center text-white py-10 pb-20 mx-auto" v-if="getUsername" style="width: 90%">
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div style="position: relative" class="text-normal pb-10">
|
||||
<div class="text-center txt-black py-5 ma-auto" style="width: 90%">
|
||||
<div class="text-title my-3">หน้าที่ของ สว.</div>
|
||||
<div class="text-center txt-black pb-5 ma-auto" style="width: 90%">
|
||||
<div class=" mb-3 text-normal "><b>หมวดข้อมูลทั่วไป</b> <div class="text-sub3"> (สำหรับอ่าน)</div> </div>
|
||||
<v-divider class="my-5 w-50 mx-auto mb-9" color="#4a4444"></v-divider>
|
||||
<!-- <hr style="color: black;"> -->
|
||||
<div class="text-title mb-3 ">หน้าที่ของ สว. </div>
|
||||
|
||||
<v-row align="center" justify="center">
|
||||
<v-col
|
||||
class="border-dot"
|
||||
|
||||
@@ -42,7 +42,6 @@
|
||||
v-model="payload.firstName"
|
||||
class="my-2"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
label="นามสกุล / LastName"
|
||||
variant="solo"
|
||||
@@ -52,6 +51,9 @@
|
||||
></v-text-field>
|
||||
<div class="text-medium-emphasis" style="font-size: 15px">
|
||||
กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
|
||||
<span class="text-red-accent-4 ml-2">
|
||||
* ใช้เป็น username
|
||||
</span>
|
||||
</div>
|
||||
<v-text-field
|
||||
label="เลขบัตรประชาชน / ID card number"
|
||||
@@ -62,16 +64,33 @@
|
||||
readonly
|
||||
class="mb-2"
|
||||
></v-text-field>
|
||||
|
||||
<div class="text-medium-emphasis" style="font-size: 15px">
|
||||
กรอกโทรศัพท์ 10 หลัก เช่น 0812345678
|
||||
<span class="text-red-accent-4 ml-2">
|
||||
* ใช้เป็น password
|
||||
</span>
|
||||
</div>
|
||||
<v-text-field
|
||||
label="เบอร์โทรศัพท์"
|
||||
variant="solo"
|
||||
:rules="rules.tel"
|
||||
v-model="payload.phone"
|
||||
type="number"
|
||||
hide-spin-buttons
|
||||
class="my-2"
|
||||
readonly
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="หมายเลขผู้สมัคร"
|
||||
variant="solo"
|
||||
:rules="rules.required"
|
||||
v-model="payload.registerno"
|
||||
type="number"
|
||||
hide-spin-buttons
|
||||
class="my-2"
|
||||
></v-text-field>
|
||||
<v-row>
|
||||
<v-col class="py-3" cols="12" md="6">
|
||||
<!-- <v-text-field
|
||||
label="อายุ / Age"
|
||||
variant="solo"
|
||||
:rules="rules.required"
|
||||
counter-value="true"
|
||||
></v-text-field> -->
|
||||
|
||||
<v-text-field
|
||||
label="อายุ / Age"
|
||||
variant="solo"
|
||||
@@ -91,20 +110,21 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-text-field
|
||||
<v-select
|
||||
label="ประวัติการศึกษา / Education"
|
||||
variant="solo"
|
||||
:rules="rules.required"
|
||||
v-model="payload.education"
|
||||
></v-text-field>
|
||||
:items="educateItem"
|
||||
></v-select>
|
||||
|
||||
<v-text-field
|
||||
<!-- <v-text-field
|
||||
label="เบอร์โทรศัพท์"
|
||||
variant="solo"
|
||||
:rules="rules.tel"
|
||||
v-model="payload.phone"
|
||||
readonly
|
||||
></v-text-field>
|
||||
></v-text-field> -->
|
||||
</v-col>
|
||||
|
||||
<v-col class="">
|
||||
@@ -122,7 +142,12 @@
|
||||
<v-img :src="url" v-if="url"></v-img>
|
||||
<v-icon dark v-else size="80"> mdi-account </v-icon>
|
||||
</v-avatar>
|
||||
|
||||
<!-- :rules="rules.files" -->
|
||||
<v-progress-linear
|
||||
color="yellow-darken-2"
|
||||
:indeterminate="loadimg"
|
||||
class="mt-3"
|
||||
></v-progress-linear>
|
||||
<v-file-input
|
||||
label="แนบรูปภาพ"
|
||||
accept="image/png, image/jpeg, image/bmp"
|
||||
@@ -130,8 +155,7 @@
|
||||
prepend-inner-icon="mdi-camera"
|
||||
prepend-icon=""
|
||||
variant="solo-filled"
|
||||
class="mt-5"
|
||||
:rules="rules.files"
|
||||
class="mt-0"
|
||||
@change="onFileChanged($event)"
|
||||
v-model="image"
|
||||
></v-file-input>
|
||||
@@ -179,8 +203,8 @@
|
||||
<!-- {{payload.group}} -->
|
||||
<v-radio-group v-model.number="payload.group.id">
|
||||
<v-radio
|
||||
class="text-sub2"
|
||||
:label="item.name"
|
||||
class="text-sub2 my-2"
|
||||
:label="item.id + '). ' + item.name"
|
||||
:value="item.id"
|
||||
v-for="(item, i) in items"
|
||||
:key="i"
|
||||
@@ -188,7 +212,7 @@
|
||||
</v-radio-group>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-card>
|
||||
<div>
|
||||
<div class="text-sub">
|
||||
จังหวัดที่คุณประสงค์จะลงสมัคร*
|
||||
<span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
|
||||
@@ -216,10 +240,11 @@
|
||||
v-model.number="payload.zone.province"
|
||||
placeholder="จังหวัด"
|
||||
@update:modelValue="filterData('')"
|
||||
bg-color="#f6ebd5"
|
||||
></v-autocomplete>
|
||||
</div>
|
||||
</v-card>
|
||||
<v-card>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sub">
|
||||
อำเภอที่คุณประสงค์จะลงสมัคร*
|
||||
<span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
|
||||
@@ -238,6 +263,7 @@
|
||||
</div>
|
||||
<!-- {{ payload.zone }} -->
|
||||
<v-autocomplete
|
||||
bg-color="#f6ebd5"
|
||||
label="อำเภอ / เขต"
|
||||
:items="districtItems"
|
||||
variant="solo"
|
||||
@@ -248,7 +274,7 @@
|
||||
:disabled="payload.zone.province == null"
|
||||
></v-autocomplete>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div class="btn-next">
|
||||
@@ -377,7 +403,11 @@
|
||||
></v-textarea> -->
|
||||
|
||||
<div class="btn-next">
|
||||
<v-btn @click="e1--" variant="tonal" size="large" class="float-left"
|
||||
<v-btn
|
||||
@click="e1--"
|
||||
variant="tonal"
|
||||
size="large"
|
||||
class="float-left"
|
||||
>ก่อนหน้า</v-btn
|
||||
>
|
||||
<!-- <v-spacer></v-spacer> -->
|
||||
@@ -406,7 +436,7 @@
|
||||
<div>
|
||||
<div>ช่วงที่ 4</div>
|
||||
<div class="text-subtitle">
|
||||
ช่องทางการติดต่อ (สำหรับเปิดเผยต่อสาธารณะ)
|
||||
ช่องทางการติดต่อ <span class="text-sub2"> (ถ้ามี)</span>
|
||||
<hr class="my-3" />
|
||||
</div>
|
||||
<!-- <v-card class="mt-8 text-sub">
|
||||
@@ -520,36 +550,34 @@
|
||||
height="40"
|
||||
@click="submit"
|
||||
:disabled="!check"
|
||||
:loading="load"
|
||||
>
|
||||
<span class="text-sub">บันทึก</span>
|
||||
</v-btn>
|
||||
</div>
|
||||
<div class="btn-next">
|
||||
<v-btn @click="e1--" class="float-left" size="large" variant="tonal"
|
||||
|
||||
>ก่อนหน้า</v-btn
|
||||
>
|
||||
</div>
|
||||
<div class="btn-next">
|
||||
<v-btn
|
||||
@click="e1--"
|
||||
class="float-left"
|
||||
size="large"
|
||||
variant="tonal"
|
||||
>ก่อนหน้า</v-btn
|
||||
>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-stepper-window-item>
|
||||
</v-stepper-window>
|
||||
|
||||
<!-- <v-stepper-actions
|
||||
v-show="e1 == 4"
|
||||
:disabled="disabled"
|
||||
@click:next="next"
|
||||
@click:prev="prev"
|
||||
></v-stepper-actions>-->
|
||||
<!-- <LoadSave :dialog="load" /> -->
|
||||
</template>
|
||||
</v-stepper>
|
||||
</v-stepper>
|
||||
</div>
|
||||
</v-container>
|
||||
</template>
|
||||
<script>
|
||||
// import Provinces from "./provinces.json";
|
||||
// import Districts from "./districts.json";
|
||||
|
||||
// import LoadSave from "../form/LoadSave.vue";
|
||||
import pica from "pica";
|
||||
import Compressor from "compressorjs";
|
||||
import { client } from "@/utils/trpc";
|
||||
import { createFormData } from "@/utils/fileUpload";
|
||||
import validateThaiID from "thai-id-validator";
|
||||
@@ -557,6 +585,7 @@ import { mapGetters } from "vuex";
|
||||
|
||||
// client.info.getAllGroups.query({}).then(console.log);
|
||||
export default {
|
||||
components: { },
|
||||
watch: {
|
||||
image(val) {
|
||||
console.log(val);
|
||||
@@ -592,6 +621,18 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
loadimg: false,
|
||||
educateItem: [
|
||||
"ต่ำกว่าระดับประถม",
|
||||
"ระดับประถม",
|
||||
"ระดับมัธยมต้น",
|
||||
"ระดับมัธยมปลาย",
|
||||
"ระดับอาชีวศึกษา",
|
||||
"ระดับปริญญาตรี",
|
||||
"ระดับปริญญาโท",
|
||||
"ระดับปริญญาเอก",
|
||||
],
|
||||
load: false,
|
||||
check: false,
|
||||
form1: false,
|
||||
form2: false,
|
||||
@@ -678,6 +719,7 @@ export default {
|
||||
group: null,
|
||||
zone: null,
|
||||
province: null,
|
||||
registerno: null,
|
||||
// opinions: [
|
||||
// {
|
||||
// opinionId: "",
|
||||
@@ -798,27 +840,118 @@ export default {
|
||||
}
|
||||
},
|
||||
onFileChanged(event) {
|
||||
this.loadimg = true;
|
||||
const file = event.target.files[0];
|
||||
this.file = file;
|
||||
|
||||
if (this.file && this.file !== null) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
console.log(event.target.result);
|
||||
this.url = event.target.result;
|
||||
};
|
||||
reader.readAsDataURL(this.file);
|
||||
console.log();
|
||||
this.resizeAndCompressImage(this.file);
|
||||
} else {
|
||||
this.url = null;
|
||||
}
|
||||
},
|
||||
resizeAndCompressImage(file) {
|
||||
const picaInstance = pica();
|
||||
|
||||
const img = new Image();
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (e) => {
|
||||
img.src = e.target.result;
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
const maxWidth = 1024;
|
||||
const maxHeight = 1024;
|
||||
|
||||
let width = img.width;
|
||||
let height = img.height;
|
||||
|
||||
if (width > height) {
|
||||
if (width > maxWidth) {
|
||||
height *= maxWidth / width;
|
||||
width = maxWidth;
|
||||
}
|
||||
} else {
|
||||
if (height > maxHeight) {
|
||||
width *= maxHeight / height;
|
||||
height = maxHeight;
|
||||
}
|
||||
}
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
picaInstance
|
||||
.resize(img, canvas, {
|
||||
quality: 3,
|
||||
alpha: true,
|
||||
})
|
||||
.then((result) => picaInstance.toBlob(result, "image/jpeg", 0.8))
|
||||
.then((blob) => {
|
||||
if (blob.size > 3 * 1024 * 1024) {
|
||||
new Compressor(blob, {
|
||||
quality: 0.6,
|
||||
maxWidth: 1024,
|
||||
maxHeight: 1024,
|
||||
success: (compressedBlob) => {
|
||||
const compressedFile = new File(
|
||||
[compressedBlob],
|
||||
file.name,
|
||||
{ type: file.type, lastModified: Date.now() }
|
||||
);
|
||||
this.file = compressedFile;
|
||||
this.createUrlFromBlob(compressedFile);
|
||||
},
|
||||
error: (err) => {
|
||||
console.error("Compression error:", err);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
const resizedFile = new File([blob], file.name, {
|
||||
type: file.type,
|
||||
lastModified: Date.now(),
|
||||
});
|
||||
this.file = resizedFile;
|
||||
this.createUrlFromBlob(resizedFile);
|
||||
this.loadimg = false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Resize error:", err);
|
||||
});
|
||||
};
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
},
|
||||
createUrlFromBlob(blob) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
this.url = event.target.result;
|
||||
};
|
||||
reader.readAsDataURL(blob);
|
||||
},
|
||||
// onFileChanged(event) {
|
||||
// const file = event.target.files[0];
|
||||
// this.file = file;
|
||||
|
||||
// if (this.file && this.file !== null) {
|
||||
// const reader = new FileReader();
|
||||
// reader.onload = (event) => {
|
||||
// console.log(event.target.result);
|
||||
// this.url = event.target.result;
|
||||
// };
|
||||
// reader.readAsDataURL(this.file);
|
||||
// console.log();
|
||||
// } else {
|
||||
// this.url = null;
|
||||
// }
|
||||
// },
|
||||
getUserAfterEdit() {
|
||||
client.user.getSelf.mutate({}).then((data) => {
|
||||
localStorage.setItem("username", data.firstName);
|
||||
localStorage.setItem("img", data.image);
|
||||
this.$store.commit("setUsername", data.firstName);
|
||||
this.$store.commit("setImg", data.image);
|
||||
this.load = false;
|
||||
alert("บันทึกข้อมูลสำเร็จ");
|
||||
this.$router.push("/");
|
||||
});
|
||||
@@ -840,12 +973,22 @@ export default {
|
||||
}).then(() => {
|
||||
client.user.confirmChangeImage.mutate().then(() => {
|
||||
this.getUserAfterEdit();
|
||||
});
|
||||
}).catch((error) => {
|
||||
|
||||
console.log('error.message',error.message);
|
||||
alert(
|
||||
"บันทึกรูปภาพไม่สำเร็จ!"
|
||||
);
|
||||
this.getUserAfterEdit();
|
||||
// alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
|
||||
|
||||
});
|
||||
// alert("บันทึกข้อมูลสำเร็จ");
|
||||
});
|
||||
console.log("done");
|
||||
},
|
||||
submit() {
|
||||
this.load = true;
|
||||
let dataOption = [...this.option1, ...this.option2];
|
||||
let checkOption = [...this.payload.opinions];
|
||||
|
||||
@@ -1005,6 +1148,12 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.v-input--density-default .v-field__input {
|
||||
font-size: larger;
|
||||
}
|
||||
.v-selection-control {
|
||||
align-items: start !important;
|
||||
}
|
||||
/* [class$="--disabled"],
|
||||
[class*="--disabled "] * {
|
||||
color: #000 !important;
|
||||
@@ -1035,6 +1184,9 @@ export default {
|
||||
opacity: 1;
|
||||
}
|
||||
@media only screen and (min-width: 0px) and (max-width: 700px) {
|
||||
.text-red-accent-4 {
|
||||
display: block;
|
||||
}
|
||||
.col2 {
|
||||
column-count: 1 !important;
|
||||
}
|
||||
@@ -1053,5 +1205,10 @@ export default {
|
||||
font-size: 17px;
|
||||
opacity: 1;
|
||||
}
|
||||
.v-stepper-item__avatar.v-avatar {
|
||||
width: 33px !important;
|
||||
height: 33px !important;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -52,6 +52,9 @@
|
||||
></v-text-field>
|
||||
<div class="text-medium-emphasis" style="font-size: 15px">
|
||||
กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
|
||||
<span class="ml-2 text-red-accent-4">
|
||||
* ใช้เป็น username
|
||||
</span>
|
||||
</div>
|
||||
<v-text-field
|
||||
label="เลขบัตรประชาชน / ID card number"
|
||||
@@ -63,7 +66,30 @@
|
||||
hide-spin-buttons
|
||||
class="mb-2"
|
||||
></v-text-field>
|
||||
|
||||
<div class="text-medium-emphasis" style="font-size: 15px">
|
||||
กรอกโทรศัพท์ 10 หลัก เช่น 0812345678
|
||||
<span class="text-red-accent-4 ml-2">
|
||||
* ใช้เป็น password
|
||||
</span>
|
||||
</div>
|
||||
<v-text-field
|
||||
label="เบอร์โทรศัพท์"
|
||||
variant="solo"
|
||||
:rules="rules.tel"
|
||||
v-model="payload.phone"
|
||||
type="number"
|
||||
hide-spin-buttons
|
||||
class="my-2"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="หมายเลขผู้สมัคร"
|
||||
variant="solo"
|
||||
:rules="rules.required"
|
||||
v-model="payload.registerno"
|
||||
type="number"
|
||||
hide-spin-buttons
|
||||
class="my-2"
|
||||
></v-text-field>
|
||||
<v-row>
|
||||
<v-col class="py-3" cols="12" md="6">
|
||||
<!-- <v-text-field
|
||||
@@ -92,23 +118,14 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-text-field
|
||||
<v-select
|
||||
label="ประวัติการศึกษา / Education"
|
||||
variant="solo"
|
||||
:rules="rules.required"
|
||||
v-model="payload.education"
|
||||
class="my-2"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
label="เบอร์โทรศัพท์"
|
||||
variant="solo"
|
||||
:rules="rules.tel"
|
||||
v-model="payload.phone"
|
||||
type="number"
|
||||
hide-spin-buttons
|
||||
class="my-2"
|
||||
></v-text-field>
|
||||
:items="educateItem"
|
||||
></v-select>
|
||||
</v-col>
|
||||
|
||||
<v-col class="">
|
||||
@@ -126,7 +143,11 @@
|
||||
<v-img :src="url" v-if="url"></v-img>
|
||||
<v-icon dark v-else size="80"> mdi-account </v-icon>
|
||||
</v-avatar>
|
||||
|
||||
<v-progress-linear
|
||||
color="yellow-darken-2"
|
||||
:indeterminate="loadimg"
|
||||
class="mt-3"
|
||||
></v-progress-linear>
|
||||
<v-file-input
|
||||
label="แนบรูปภาพ"
|
||||
accept="image/png, image/jpeg, image/bmp"
|
||||
@@ -135,7 +156,6 @@
|
||||
prepend-icon=""
|
||||
variant="solo-filled"
|
||||
class="mt-5"
|
||||
:rules="rules.files"
|
||||
@change="onFileChanged($event)"
|
||||
v-model="image"
|
||||
></v-file-input>
|
||||
@@ -182,8 +202,8 @@
|
||||
<!-- {{payload.group}} -->
|
||||
<v-radio-group v-model.number="payload.group">
|
||||
<v-radio
|
||||
class="text-sub2"
|
||||
:label="item.name"
|
||||
class="text-sub2 my-2"
|
||||
:label="item.id + '). ' + item.name"
|
||||
:value="item.id"
|
||||
v-for="(item, i) in items"
|
||||
:key="i"
|
||||
@@ -191,7 +211,7 @@
|
||||
</v-radio-group>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-card>
|
||||
<div>
|
||||
<div class="text-sub">
|
||||
จังหวัดที่คุณประสงค์จะลงสมัคร*
|
||||
<span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
|
||||
@@ -210,6 +230,7 @@
|
||||
</div>
|
||||
<!-- {{ province }} -->
|
||||
<v-autocomplete
|
||||
bg-color="#f6ebd5"
|
||||
label="จังหวัด"
|
||||
:items="provinceItems"
|
||||
variant="solo"
|
||||
@@ -220,8 +241,8 @@
|
||||
@update:modelValue="filterData"
|
||||
></v-autocomplete>
|
||||
</div>
|
||||
</v-card>
|
||||
<v-card>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sub">
|
||||
อำเภอที่คุณประสงค์จะลงสมัคร*
|
||||
<span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
|
||||
@@ -240,6 +261,7 @@
|
||||
</div>
|
||||
<!-- {{ payload.zone }} -->
|
||||
<v-autocomplete
|
||||
bg-color="#f6ebd5"
|
||||
label="อำเภอ / เขต"
|
||||
:items="districtItems"
|
||||
variant="solo"
|
||||
@@ -250,7 +272,7 @@
|
||||
:disabled="payload.province == null"
|
||||
></v-autocomplete>
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div class="btn-next">
|
||||
@@ -408,7 +430,7 @@
|
||||
</v-card> -->
|
||||
<v-card class="mt-8 text-sub">
|
||||
<div class="text-subtitle">
|
||||
ช่องทางการติดต่อ (สำหรับเปิดเผยต่อสาธารณะ)
|
||||
ช่องทางการติดต่อ <span class="text-sub2"> (ถ้ามี)</span>
|
||||
<hr class="my-3" />
|
||||
</div>
|
||||
<v-row>
|
||||
@@ -500,13 +522,14 @@
|
||||
ขอภยันตรายและความวิบัติทั้งปวงจงบังเกิดแก่ข้าพเจ้า โดยพลัน
|
||||
*ยืนยันการส่งคำตอบ เพื่อประกาศตัวเป็นผู้สมัครเป็น สว.67
|
||||
</div>
|
||||
<div class="text-center mb-5">
|
||||
<div class="text-center mb-5 mt-2">
|
||||
<v-btn
|
||||
color="#DD6C31"
|
||||
class="mt-4"
|
||||
height="40"
|
||||
@click="submit"
|
||||
:disabled="!check"
|
||||
:loading="load"
|
||||
>
|
||||
<span class="text-sub">บันทึก</span>
|
||||
</v-btn>
|
||||
@@ -545,6 +568,8 @@ import { client } from "@/utils/trpc";
|
||||
import { createFormData } from "@/utils/fileUpload";
|
||||
import validateThaiID from "thai-id-validator";
|
||||
// client.info.getAllGroups.query({}).then(console.log);
|
||||
import pica from "pica";
|
||||
import Compressor from "compressorjs";
|
||||
export default {
|
||||
watch: {
|
||||
image(val) {
|
||||
@@ -580,6 +605,18 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
loadimg: false,
|
||||
educateItem: [
|
||||
"ต่ำกว่าระดับประถม",
|
||||
"ระดับประถม",
|
||||
"ระดับมัธยมต้น",
|
||||
"ระดับมัธยมปลาย",
|
||||
"ระดับอาชีวศึกษา",
|
||||
"ระดับปริญญาตรี",
|
||||
"ระดับปริญญาโท",
|
||||
"ระดับปริญญาเอก",
|
||||
],
|
||||
load: false,
|
||||
check: false,
|
||||
form1: false,
|
||||
form2: false,
|
||||
@@ -666,6 +703,7 @@ export default {
|
||||
group: null,
|
||||
zone: null,
|
||||
province: null,
|
||||
registerno: null,
|
||||
// opinions: [
|
||||
// {
|
||||
// opinionId: "",
|
||||
@@ -748,21 +786,95 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onFileChanged(event) {
|
||||
this.loadimg = true;
|
||||
const file = event.target.files[0];
|
||||
this.file = file;
|
||||
if (this.file && this.file !== null) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
console.log(event.target.result);
|
||||
this.url = event.target.result;
|
||||
};
|
||||
reader.readAsDataURL(this.file);
|
||||
console.log();
|
||||
this.resizeAndCompressImage(this.file);
|
||||
} else {
|
||||
this.url = null;
|
||||
}
|
||||
},
|
||||
resizeAndCompressImage(file) {
|
||||
const picaInstance = pica();
|
||||
|
||||
const img = new Image();
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = (e) => {
|
||||
img.src = e.target.result;
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
const maxWidth = 1024;
|
||||
const maxHeight = 1024;
|
||||
|
||||
let width = img.width;
|
||||
let height = img.height;
|
||||
|
||||
if (width > height) {
|
||||
if (width > maxWidth) {
|
||||
height *= maxWidth / width;
|
||||
width = maxWidth;
|
||||
}
|
||||
} else {
|
||||
if (height > maxHeight) {
|
||||
width *= maxHeight / height;
|
||||
height = maxHeight;
|
||||
}
|
||||
}
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
picaInstance
|
||||
.resize(img, canvas, {
|
||||
quality: 3,
|
||||
alpha: true,
|
||||
})
|
||||
.then((result) => picaInstance.toBlob(result, "image/jpeg", 0.8))
|
||||
.then((blob) => {
|
||||
if (blob.size > 3 * 1024 * 1024) {
|
||||
new Compressor(blob, {
|
||||
quality: 0.6,
|
||||
maxWidth: 1024,
|
||||
maxHeight: 1024,
|
||||
success: (compressedBlob) => {
|
||||
const compressedFile = new File(
|
||||
[compressedBlob],
|
||||
file.name,
|
||||
{ type: file.type, lastModified: Date.now() }
|
||||
);
|
||||
this.file = compressedFile;
|
||||
this.createUrlFromBlob(compressedFile);
|
||||
},
|
||||
error: (err) => {
|
||||
console.error("Compression error:", err);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
const resizedFile = new File([blob], file.name, {
|
||||
type: file.type,
|
||||
lastModified: Date.now(),
|
||||
});
|
||||
this.file = resizedFile;
|
||||
this.createUrlFromBlob(resizedFile);
|
||||
this.loadimg = false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Resize error:", err);
|
||||
});
|
||||
};
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
},
|
||||
createUrlFromBlob(blob) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
this.url = event.target.result;
|
||||
};
|
||||
reader.readAsDataURL(blob);
|
||||
},
|
||||
async uploadImage() {
|
||||
if (!this.file) {
|
||||
return;
|
||||
@@ -775,17 +887,24 @@ export default {
|
||||
await fetch(request.postURL, {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
}).then(() => {
|
||||
client.user.confirmChangeImage.mutate().then(() => {
|
||||
})
|
||||
.then(() => {
|
||||
client.user.confirmChangeImage.mutate().then(() => {
|
||||
this.getUser();
|
||||
// alert(
|
||||
// "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
|
||||
// );
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("error.message", error.message);
|
||||
this.getUser();
|
||||
// alert(
|
||||
// "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
|
||||
// );
|
||||
// alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
|
||||
});
|
||||
});
|
||||
console.log("done");
|
||||
},
|
||||
submit() {
|
||||
this.load = true;
|
||||
let dataOption = [...this.option1, ...this.option2];
|
||||
const filterOpt = dataOption.map((item) => {
|
||||
return {
|
||||
@@ -836,12 +955,12 @@ export default {
|
||||
if (this.file) {
|
||||
this.uploadImage();
|
||||
} else {
|
||||
alert(
|
||||
"บันทึกรูปภาพไม่สำเร็จ!"
|
||||
);
|
||||
this.getUser();
|
||||
// alert(
|
||||
// "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
|
||||
// );
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
|
||||
@@ -852,10 +971,10 @@ export default {
|
||||
client.user.login
|
||||
.mutate(payload)
|
||||
.then((data) => {
|
||||
this.load = false;
|
||||
this.$store.commit("setCheckLogin", false);
|
||||
localStorage.setItem("token", data.token);
|
||||
this.$router.push("/");
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
|
||||
@@ -952,6 +1071,12 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
div.text-sub
|
||||
> div.v-input.v-input--horizontal.v-input--center-affix.v-input--density-default.v-locale--is-ltr.v-input--dirty.v-text-field.v-autocomplete.v-autocomplete--single,
|
||||
.v-autocomplete .v-autocomplete__selection-text {
|
||||
font-size: large !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
.btn-next {
|
||||
padding: 1.5rem 0 0;
|
||||
}
|
||||
|
||||
36
src/components/form/LoadSave.vue
Normal file
36
src/components/form/LoadSave.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="pa-4 text-center">
|
||||
<v-dialog v-model="props" max-width="320" persistent>
|
||||
<v-card max-width="600">
|
||||
<div class="px-10 py-10 text-center">
|
||||
<v-progress-circular
|
||||
color="primary"
|
||||
indeterminate="disable-shrink"
|
||||
size="50"
|
||||
width="6"
|
||||
></v-progress-circular>
|
||||
<div class="text-subtitle mt-5">กำลังบันทึกข้อมูล...</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
dialog: { type: Boolean },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// dialog: true,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
// dialog(val) {
|
||||
// if (!val) return;
|
||||
// setTimeout(() => (this.dialog = false), 4000);
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="pa-lg-8 pa-md-8 pa-sm-3">
|
||||
<div
|
||||
style="
|
||||
background-color: #4c884c;
|
||||
background-color: #f6b0e5;
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
|
||||
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
|
||||
border-radius: 20px;
|
||||
@@ -10,134 +10,108 @@
|
||||
class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
|
||||
>
|
||||
<!-- {{ dataProfile }} -->
|
||||
<v-row>
|
||||
<v-row class="page-search">
|
||||
<v-col
|
||||
v-for="(item, i) in dataProfile"
|
||||
:key="i"
|
||||
cols="12"
|
||||
md="12"
|
||||
lg="12"
|
||||
lg="6"
|
||||
>
|
||||
<v-card
|
||||
elevation="7"
|
||||
class="text-sub2 mx-auto pb-8 card-user"
|
||||
class="text-sub2 mx-auto py-3 card-user"
|
||||
maxWidth="900"
|
||||
rounded="xl"
|
||||
>
|
||||
<!-- <div
|
||||
style="background: #37332f; color: white; width: 100%"
|
||||
class="font-weight-bold pa-2 w-100 text-center"
|
||||
>
|
||||
<div class="more" v-if="item.group">
|
||||
<v-avatar color="#f4c03f" size="35" class="mr-2"
|
||||
>{{ item.group.id }}
|
||||
</v-avatar>
|
||||
{{ item.group.name }}
|
||||
</div>
|
||||
</div> -->
|
||||
<v-card-item class="mt-3">
|
||||
<v-row align="left">
|
||||
<v-col cols="12" md="auto" class="text-center my-auto">
|
||||
<v-card-item>
|
||||
<v-row align="left" style="min-height: 450px">
|
||||
<v-col cols="12" md="5" class="text-center my-auto">
|
||||
<!-- {{ item.image }} -->
|
||||
<v-img
|
||||
v-if="item.image"
|
||||
v-if="item && item.image"
|
||||
:src="item.image"
|
||||
:width="150"
|
||||
:height="180"
|
||||
aspect-ratio="16/9"
|
||||
cover
|
||||
rounded="xl"
|
||||
class="mx-auto"
|
||||
class="mx-auto img-display"
|
||||
>
|
||||
</v-img
|
||||
><v-avatar color="#635d56" size="100" class="mx-auto" v-else>
|
||||
<v-icon icon="mdi-account" color="" size="80"></v-icon>
|
||||
</v-avatar>
|
||||
><v-avatar
|
||||
color="#635d56"
|
||||
size="180"
|
||||
class="mx-auto my-auto"
|
||||
v-else
|
||||
></v-avatar>
|
||||
</v-col>
|
||||
<v-col cols="12" md="" class="mx-auto px-5">
|
||||
<div class="font-weight-bold text-normal my-2 text-md-left">
|
||||
<span> {{ item.firstName }}</span>
|
||||
<span class="ml-3">
|
||||
{{ item.lastName }}
|
||||
<span v-if="item.age" class="text-sub2">
|
||||
({{ item.age }}ปี)</span
|
||||
></span
|
||||
>
|
||||
<div
|
||||
class="px-3 py-2 text-sub2 box-province"
|
||||
v-if="item.zone"
|
||||
>
|
||||
<!-- <div
|
||||
class="py-2 px-3"
|
||||
v-if="item.group"
|
||||
style="
|
||||
background-color: #f7d278;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
"
|
||||
>
|
||||
<v-avatar color="#37332F" size="35" class="mr-2"
|
||||
>{{ item.group.id }}
|
||||
</v-avatar>
|
||||
{{ item.group.name }}
|
||||
</div> -->
|
||||
<div
|
||||
class="font-weight-bold py-2 px-3"
|
||||
style="background-color: #f4c03f; border-radius: 10px"
|
||||
>
|
||||
{{ item.zone.province.name }} |
|
||||
<span class="font-weight-medium">{{
|
||||
item.zone.name
|
||||
}}</span>
|
||||
<v-col cols="12" md="" class="mx-auto">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<div class="box-group">
|
||||
<div>กลุ่มที่</div>
|
||||
<div
|
||||
class="font-weight-bold"
|
||||
style="font-size: xxx-large"
|
||||
>
|
||||
{{ item.group.id }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <hr> -->
|
||||
</div>
|
||||
<v-row
|
||||
class="text-sub2 line-g mb-2 my-2 mx-3"
|
||||
|
||||
>
|
||||
<v-col
|
||||
class="line-r-g py-md-0"
|
||||
cols="auto"
|
||||
style="background-color: #f4c03f"
|
||||
>
|
||||
|
||||
<div class="mx-2 text-normal py-0 my-auto">
|
||||
{{ item.group.id }}
|
||||
</v-col>
|
||||
<v-col>
|
||||
<div class="box-group">
|
||||
<div>หมายเลขผู้สมัคร</div>
|
||||
<div style="font-size: xxx-large">
|
||||
<div class="font-weight-bold" v-if="item.registerno">
|
||||
{{ item.registerno }}
|
||||
</div>
|
||||
|
||||
</v-col>
|
||||
<v-col class="text-left py-0 my-auto ">
|
||||
<div class="mx-auto "> {{ item.group.name }}</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-row class="text-subtitle line-g mb-2 d-none">
|
||||
<v-col class="line-r-g" cols="auto">
|
||||
<span class="mx-2 "> {{ item.group.id }} </span>
|
||||
</v-col>
|
||||
<v-col class="text-left">
|
||||
<span class="mx-5"> {{ item.group.name }}</span>
|
||||
</v-col>
|
||||
<div class="font-weight-bold" v-else>2352</div>
|
||||
</div>
|
||||
</div></v-col
|
||||
>
|
||||
</v-row>
|
||||
|
||||
<div class="text-small text-left">
|
||||
<div class="font-weight-medium">
|
||||
<span class="font-weight-bold">อาชีพ :</span>
|
||||
{{ item.job }}
|
||||
<div
|
||||
class="py-2 text-sub2 box-province mx-auto mx-md-1 my-4"
|
||||
v-if="item.zone"
|
||||
>
|
||||
<div class="font-weight-bold px-3">
|
||||
{{ item.zone.province.name }} |
|
||||
<span class="font-weight-medium">{{
|
||||
item.zone.name
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="font-weight-medium">
|
||||
<span class="font-weight-bold">การศึกษา :</span>
|
||||
{{ item.education }}
|
||||
</div>
|
||||
<div class="font-weight-bold text-normal my-2 text-md-left">
|
||||
<div style="font-size: xx-large">
|
||||
<span> {{ item.firstName }}</span>
|
||||
<span class="ml-3">
|
||||
{{ item.lastName }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto text-md-left text-sub2 mb-2">
|
||||
{{ item.group.name }}
|
||||
</div>
|
||||
|
||||
<div class="text-sub2 text-left mt-5 text-medium-emphasis">
|
||||
<div class="font-weight-medium">
|
||||
<span class="font-weight-bold"> อายุ :</span>
|
||||
|
||||
{{ item.age }} ปี
|
||||
</div>
|
||||
<div class="font-weight-medium">
|
||||
<span class="font-weight-bold">อาชีพ :</span>
|
||||
{{ item.job }}
|
||||
</div>
|
||||
<div class="font-weight-medium">
|
||||
<span class="font-weight-bold">การศึกษา :</span>
|
||||
{{ item.education }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div class="text-left text-small my-3">
|
||||
|
||||
<v-row> </v-row>
|
||||
<div class="text-left text-small mt-3 d-none">
|
||||
<div class="text-small font-weight-bold">ช่องทางติดต่อ</div>
|
||||
<v-divider class="my-1"></v-divider>
|
||||
|
||||
@@ -192,25 +166,6 @@
|
||||
><span v-else> - </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="text-small font-weight-bold text-left d-none">
|
||||
จุดยืน
|
||||
<v-divider class="my-1"></v-divider>
|
||||
<v-row class="text-small" style="height: 150px; overflow: auto">
|
||||
<v-col class="text-left">
|
||||
<div class="font-weight-bold">เห็นด้วย :</div>
|
||||
<div v-for="(ag, k) in item.opinion.agree" :key="k">
|
||||
{{ ag }}
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col class="text-left">
|
||||
<div class="font-weight-bold">ไม่เห็นด้วย :</div>
|
||||
<div v-for="(ag, k) in item.opinion.disagree" :key="k">
|
||||
{{ ag }}
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div> -->
|
||||
</v-card-item>
|
||||
</v-card></v-col
|
||||
>
|
||||
@@ -402,13 +357,27 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.img-display {
|
||||
height: 450px;
|
||||
}
|
||||
.box-group {
|
||||
border-radius: 5px;
|
||||
background-color: #ffcd68;
|
||||
border-radius: 10px;
|
||||
width: -webkit-fill-available;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
padding: 10px 2px;
|
||||
height: 100%;
|
||||
}
|
||||
.line-r-g {
|
||||
padding-left: 5px;
|
||||
border-color: #f4c03f;
|
||||
border-right: 0.2px solid #f4c03f;
|
||||
border-color: #ffcd68;
|
||||
border-right: 0.2px solid #ffcd68;
|
||||
}
|
||||
.line-g {
|
||||
border: 1px solid #f4c03f;
|
||||
border: 1px solid #ffcd68;
|
||||
display: inline-flex;
|
||||
}
|
||||
.card-user {
|
||||
height: 100%;
|
||||
@@ -423,24 +392,37 @@ export default {
|
||||
}
|
||||
.box-province {
|
||||
border-radius: 5px;
|
||||
|
||||
background-color: #ffcd68;
|
||||
border-radius: 10px;
|
||||
width: -webkit-fill-available;
|
||||
width: fit-content;
|
||||
}
|
||||
@media only screen and (min-width: 0px) and (max-width: 1000px) {
|
||||
.img-display {
|
||||
height: 400px !important;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 0px) and (max-width: 700px) {
|
||||
.page-search {
|
||||
padding: 20px 0px;
|
||||
}
|
||||
|
||||
.card-user {
|
||||
max-height: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
/* .box-province {
|
||||
position: unset;
|
||||
display: block;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #f4c03f;
|
||||
.line-g {
|
||||
display: inline-flex;
|
||||
}
|
||||
.box-province {
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
box-shadow: rgba(0, 0, 0, 0.24) 3px 0px 8px;
|
||||
} */
|
||||
background-color: #ffcd68;
|
||||
border-radius: 10px;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
.img-display {
|
||||
height: 300px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
480
src/components/search/CardUserGroup.vue
Normal file
480
src/components/search/CardUserGroup.vue
Normal file
@@ -0,0 +1,480 @@
|
||||
<template>
|
||||
<div class="pa-lg-8 pa-md-8 pa-sm-3 page-m-card" v-if="!check || cardCount">
|
||||
<!-- {{ check }}{{ show }} -->
|
||||
<!-- {{ result }} -->
|
||||
<div
|
||||
style="
|
||||
background-color: #a8d18d;
|
||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
|
||||
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
|
||||
border-radius: 20px;
|
||||
"
|
||||
class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
|
||||
>
|
||||
<div class="text-subtitle text-left mb-md-3">
|
||||
<v-row align="center">
|
||||
<v-col cols="auto" class="pa-0 pl-2 pt-2"> <v-avatar color="#3d763d" class="text-normal" size="50"
|
||||
>{{ group.id }}
|
||||
</v-avatar></v-col>
|
||||
<v-col > {{ group.name }}</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- {{ result }} -->
|
||||
<v-container>
|
||||
<v-carousel
|
||||
v-model="model"
|
||||
height="auto"
|
||||
style="max-width: 900px"
|
||||
class="mx-auto"
|
||||
>
|
||||
<v-carousel-item v-for="(item, i) in result" :value="i" :key="i">
|
||||
<v-row class="page-search">
|
||||
<v-col :key="i" cols="12" md="12" lg="12">
|
||||
<v-card
|
||||
class="text-sub2 mx-auto py-3 card-user"
|
||||
maxWidth="1000"
|
||||
rounded="xl"
|
||||
>
|
||||
<v-overlay
|
||||
class="align-center justify-center"
|
||||
scrim="#2a2a2adb"
|
||||
contained
|
||||
v-model="overlay"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
style="
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
"
|
||||
>
|
||||
ไม่พบข้อมูลผู้สมัคร
|
||||
</div>
|
||||
</v-overlay>
|
||||
<v-card-item>
|
||||
<v-row
|
||||
align="left"
|
||||
style="min-height: 450px"
|
||||
class="mobile-col"
|
||||
>
|
||||
<v-col cols="12" md="5" class="text-cente my-auto">
|
||||
<!-- {{ item.image }} -->
|
||||
<v-img
|
||||
v-if="item && item.image"
|
||||
:src="item.image"
|
||||
cover
|
||||
rounded="xl"
|
||||
class="mx-auto img-display-g"
|
||||
>
|
||||
</v-img>
|
||||
<div v-else>
|
||||
<v-icon
|
||||
icon="mdi-account"
|
||||
size="180"
|
||||
color="#635d56"
|
||||
class="mx-auto my-auto"
|
||||
></v-icon>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="" class="mx-auto">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<div class="box-group">
|
||||
<div>กลุ่มที่</div>
|
||||
<div
|
||||
class="font-weight-bold"
|
||||
style="font-size: xxx-large"
|
||||
v-if="item.group && item.group.id"
|
||||
>
|
||||
{{ item.group.id }}
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<div class="box-group">
|
||||
<div>หมายเลขผู้สมัคร</div>
|
||||
<div style="font-size: xxx-large">
|
||||
<div
|
||||
class="font-weight-bold"
|
||||
v-if="item.registerno"
|
||||
>
|
||||
{{ item.registerno }}
|
||||
</div>
|
||||
<div class="font-weight-bold" v-else>-</div>
|
||||
</div>
|
||||
</div></v-col
|
||||
>
|
||||
<v-col cols="12" md="" class="d-none">
|
||||
<div class="box-group">
|
||||
<div
|
||||
v-if="item.zone.province"
|
||||
class="font-weight-bold px-3 my-auto"
|
||||
>
|
||||
{{ item.zone.province.name }}
|
||||
<hr />
|
||||
<span class="font-weight-medium">{{
|
||||
item.zone.name
|
||||
}}</span>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div
|
||||
class="py-2 text-sub2 box-province mx-auto mx-md-1 my-4 mobile-box2"
|
||||
v-if="item.zone.province"
|
||||
>
|
||||
<div class="font-weight-bold px-3">
|
||||
{{ item.zone.province.name }} |
|
||||
<span class="font-weight-medium">{{
|
||||
item.zone.name
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
<div class="font-weight-bold my-2 text-md-left">
|
||||
<div
|
||||
class="mt-3 mb-2"
|
||||
style="font-size: xx-large"
|
||||
v-if="item.firstName"
|
||||
>
|
||||
<span> {{ item.firstName }}</span>
|
||||
<span class="ml-3">
|
||||
{{ item.lastName }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
<!-- <div
|
||||
v-if="item.group.name"
|
||||
class="mx-auto text-md-left text-sub2 my-1 more w-100 d-none"
|
||||
>
|
||||
{{ item.group.name }}
|
||||
</div>
|
||||
<div v-else > - </div> -->
|
||||
<div
|
||||
class="text-sub2 text-left mt-5 text-medium-emphasis"
|
||||
>
|
||||
<div class="font-weight-medium">
|
||||
<span class="font-weight-bold"> อายุ :</span>
|
||||
|
||||
<span v-if="item.age">{{ item.age }}</span>
|
||||
<span v-else> - </span> ปี
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="font-weight-medium text-medium-emphasis"
|
||||
>
|
||||
<span class="font-weight-bold">อาชีพ :</span>
|
||||
<span v-if="item.job"> {{ item.job }}</span>
|
||||
<span v-else> - </span>
|
||||
</div>
|
||||
<div
|
||||
class="font-weight-medium text-medium-emphasis"
|
||||
>
|
||||
<span class="font-weight-bold">การศึกษา :</span>
|
||||
<span v-if="item.education">
|
||||
{{ item.education }}</span
|
||||
>
|
||||
<span v-else> - </span>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-item> </v-card
|
||||
></v-col>
|
||||
</v-row>
|
||||
</v-carousel-item>
|
||||
</v-carousel>
|
||||
|
||||
<!-- <div class="text-subtitle my-10" v-else>ไม่พบผู้สมัคร</div> -->
|
||||
</v-container>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { client } from "@/utils/trpc";
|
||||
export default {
|
||||
props: {
|
||||
check: {
|
||||
type: Boolean,
|
||||
},
|
||||
dataProfile: {
|
||||
type: Array,
|
||||
},
|
||||
group: {
|
||||
type: Object,
|
||||
},
|
||||
province: {
|
||||
type: Object,
|
||||
},
|
||||
district: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
overlay: false,
|
||||
cardCount: 0,
|
||||
allg: "",
|
||||
checkdata: "",
|
||||
show: false,
|
||||
load: false,
|
||||
result: [],
|
||||
page: 1,
|
||||
districtItems: [],
|
||||
provinceItems: [],
|
||||
items: [],
|
||||
offset: 0,
|
||||
count: 0,
|
||||
model: 0,
|
||||
colors: ["primary", "secondary", "yellow darken-2", "red", "orange"],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let data = {};
|
||||
if (this.province && this.province.id) {
|
||||
data.province = this.province.id;
|
||||
}
|
||||
if (this.district) {
|
||||
data.zone = this.district.id;
|
||||
}
|
||||
if (this.group) {
|
||||
data.group = this.group.id;
|
||||
}
|
||||
if (data) {
|
||||
client.user.getAllUser
|
||||
.query(data)
|
||||
.then((rs) => {
|
||||
this.cardCount = rs.length;
|
||||
if (rs.length) {
|
||||
// rs.map((x)=>x.show=true)
|
||||
this.show = true;
|
||||
this.result = rs;
|
||||
} else {
|
||||
this.overlay = true;
|
||||
this.show = false;
|
||||
this.result = [
|
||||
{
|
||||
show: false,
|
||||
id: 56,
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
title: "",
|
||||
cid: "1767250304480",
|
||||
age: " -",
|
||||
job: " -",
|
||||
education: " -",
|
||||
vision: null,
|
||||
reason: null,
|
||||
group: {
|
||||
id: this.group.id,
|
||||
name: " -",
|
||||
},
|
||||
zone: {
|
||||
id: " -",
|
||||
name: this.district.name,
|
||||
province: {
|
||||
id: "",
|
||||
name: this.province.name,
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
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);
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.v-overlay__scrim {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.overay-box {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: #f1f1f1;
|
||||
width: 100%;
|
||||
transition: 0.5s ease;
|
||||
opacity: 0;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
z-index: 99999;
|
||||
}
|
||||
.text-medium-emphasis {
|
||||
color: #3b3737c4;
|
||||
}
|
||||
div.v-window__container
|
||||
> div.v-window__controls
|
||||
> button.v-btn.v-btn--elevated.v-btn--icon.v-theme--light.v-btn--density-default.v-btn--size-default.v-btn--variant-elevated {
|
||||
background-color: #00000078;
|
||||
color: white;
|
||||
}
|
||||
.v-carousel__controls {
|
||||
border-bottom-right-radius: 24px;
|
||||
border-bottom-left-radius: 24px;
|
||||
background-color: #00000078;
|
||||
}
|
||||
.img-display-g {
|
||||
height: 450px;
|
||||
}
|
||||
.box-group {
|
||||
border-radius: 5px;
|
||||
background-color: #ffcd68;
|
||||
border-radius: 10px;
|
||||
width: -webkit-fill-available;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
padding: 10px 2px;
|
||||
height: 100%;
|
||||
}
|
||||
.line-r-g {
|
||||
padding-left: 5px;
|
||||
border-color: #ffcd68;
|
||||
border-right: 0.2px solid #ffcd68;
|
||||
}
|
||||
.line-g {
|
||||
border: 1px solid #ffcd68;
|
||||
display: inline-flex;
|
||||
}
|
||||
.card-user {
|
||||
position: relative;
|
||||
/* height: 500px; */
|
||||
}
|
||||
.more {
|
||||
width: 95%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: auto;
|
||||
}
|
||||
.box-province {
|
||||
border-radius: 5px;
|
||||
background-color: #ffcd68;
|
||||
border-radius: 10px;
|
||||
width: -webkit-fill-available;
|
||||
/* width: fit-content; */
|
||||
}
|
||||
@media only screen and (min-width: 0px) and (max-width: 700px) {
|
||||
div.v-window__container
|
||||
> div.v-window-item.v-window-item--active.v-carousel-item
|
||||
> div
|
||||
> div.v-responsive__content
|
||||
> div
|
||||
> div
|
||||
> div {
|
||||
padding: 0 !important;
|
||||
}
|
||||
div.v-col-md.v-col-12.mx-auto > div.font-weight-bold.my-2.text-md-left {
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
.v-carousel__controls {
|
||||
height: 35px;
|
||||
}
|
||||
div.mx-auto.text-md-left.text-sub2.my-1 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
div.font-weight-bold.my-2.text-md-left > div.text-sub2.text-left.mt-5 {
|
||||
margin-top: 0px !important;
|
||||
line-height: 21px;
|
||||
}
|
||||
div.v-window__container
|
||||
> div.v-window-item.v-window-item--active.v-carousel-item
|
||||
> div
|
||||
> div.v-responsive__content
|
||||
> div
|
||||
> div
|
||||
> div
|
||||
> div.v-card-item
|
||||
> div
|
||||
> div
|
||||
> div.v-col-md.v-col-12.mx-auto
|
||||
> div.font-weight-bold.my-2.text-md-left
|
||||
> div.mt-3.mb-2 {
|
||||
margin-top: 0px !important;
|
||||
line-height: 38px;
|
||||
}
|
||||
div.v-card-item
|
||||
> div
|
||||
> div
|
||||
> div.v-col-md.v-col-12.mx-auto
|
||||
> div.v-row
|
||||
> .v-col {
|
||||
padding: 2px !important;
|
||||
}
|
||||
.box-group {
|
||||
border-radius: 5px;
|
||||
background-color: #ffcd68;
|
||||
border-radius: 10px;
|
||||
width: -webkit-fill-available;
|
||||
/* width: fit-content; */
|
||||
min-width: 100%;
|
||||
padding: 5px 0px;
|
||||
height: 85px;
|
||||
line-height: 37px;
|
||||
}
|
||||
.page-m-card {
|
||||
margin: 20px 7px;
|
||||
}
|
||||
.page-search {
|
||||
padding: 20px 0px;
|
||||
}
|
||||
|
||||
.card-user {
|
||||
max-height: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
.line-g {
|
||||
display: inline-flex;
|
||||
}
|
||||
.box-province {
|
||||
border-radius: 5px;
|
||||
background-color: #ffcd68;
|
||||
border-radius: 10px;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
.img-display-g {
|
||||
height: 300px !important;
|
||||
}
|
||||
div.py-2.text-sub2.box-province.mx-auto.mx-md-1.my-4.mobile-box2 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
@media only screen and (min-width: 0px) and (max-width: 700px) {
|
||||
.text-subtitle {
|
||||
font-size: 19px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.v-container {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -66,7 +66,15 @@
|
||||
> -->
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-autocomplete
|
||||
<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"
|
||||
@@ -76,49 +84,91 @@
|
||||
placeholder="กลุ่มอาชีพ"
|
||||
hide-details
|
||||
v-model="group"
|
||||
></v-autocomplete>
|
||||
>
|
||||
<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-col cols="12" md="3">
|
||||
<v-text-field
|
||||
label="ชื่อ"
|
||||
variant="solo"
|
||||
hide-details
|
||||
></v-text-field>
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
<v-btn
|
||||
color="#DD6C31"
|
||||
color="#e23972"
|
||||
class="mt-8"
|
||||
elevated
|
||||
size="large"
|
||||
@click="searchUserApi(0)"
|
||||
@click="
|
||||
searchUserApi(0, '');
|
||||
showGroup = false;
|
||||
"
|
||||
:loading="load"
|
||||
width="300"
|
||||
height="52px"
|
||||
>
|
||||
<span class="text-sub">ค้นหา</span>
|
||||
<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" />
|
||||
|
||||
<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
|
||||
v-if="result.length == 0 && this.show"
|
||||
class="my-10 text-sub2 txt-black"
|
||||
>
|
||||
<v-icon icon="mdi-alert-circle"></v-icon> ไม่พบข้อมูล
|
||||
<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>
|
||||
<!-- {{ count }}
|
||||
{{ Number(result.length)/ 2 }} -->
|
||||
<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>
|
||||
<!-- <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>
|
||||
@@ -127,14 +177,20 @@
|
||||
// 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,
|
||||
@@ -166,7 +222,9 @@ export default {
|
||||
// data.province = this.province;
|
||||
}
|
||||
if (this.group) {
|
||||
data.group = this.group.id;
|
||||
if (this.allg !== "all") {
|
||||
data.group = this.group.id;
|
||||
}
|
||||
}
|
||||
if (this.district) {
|
||||
data.zone = this.district.id;
|
||||
@@ -192,7 +250,8 @@ export default {
|
||||
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
||||
});
|
||||
},
|
||||
searchUserApi(offset) {
|
||||
searchUserApi(offset, checkg) {
|
||||
this.allg = checkg;
|
||||
this.show = false;
|
||||
this.load = true;
|
||||
if (offset == 0) {
|
||||
@@ -207,8 +266,11 @@ export default {
|
||||
data.province = this.province.id;
|
||||
// data.province = this.province;
|
||||
}
|
||||
|
||||
if (this.group) {
|
||||
data.group = this.group.id;
|
||||
if (checkg !== "all") {
|
||||
data.group = this.group.id;
|
||||
}
|
||||
}
|
||||
if (this.district) {
|
||||
data.zone = this.district.id;
|
||||
@@ -240,7 +302,7 @@ export default {
|
||||
.catch((error) => {
|
||||
this.load = false;
|
||||
|
||||
alert("ไม่สามารถโหลดข้อมูลได้");
|
||||
// alert("ไม่สามารถโหลดข้อมูลได้");
|
||||
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
||||
});
|
||||
},
|
||||
@@ -254,7 +316,7 @@ export default {
|
||||
this.districtItems = data;
|
||||
})
|
||||
.catch((error) => {
|
||||
alert("ไม่สามารถโหลดข้อมูลได้");
|
||||
// alert("ไม่สามารถโหลดข้อมูลได้");
|
||||
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
||||
});
|
||||
}
|
||||
@@ -269,9 +331,14 @@ export default {
|
||||
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("ไม่สามารถโหลดข้อมูลได้");
|
||||
// alert("ไม่สามารถโหลดข้อมูลได้");
|
||||
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
||||
});
|
||||
},
|
||||
@@ -283,7 +350,7 @@ export default {
|
||||
this.items = groups;
|
||||
})
|
||||
.catch((error) => {
|
||||
alert("ไม่สามารถโหลดข้อมูลได้");
|
||||
// alert("ไม่สามารถโหลดข้อมูลได้");
|
||||
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
||||
});
|
||||
|
||||
@@ -294,25 +361,25 @@ export default {
|
||||
this.getUser(data);
|
||||
})
|
||||
.catch((error) => {
|
||||
alert("ไม่สามารถโหลดข้อมูลได้");
|
||||
// alert("ไม่สามารถโหลดข้อมูลได้");
|
||||
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.v-pagination .v-btn {
|
||||
font-size: 50px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: rgb(221, 108, 49);
|
||||
.check-card .v-selection-control {
|
||||
align-items: center !important;
|
||||
font-size: 25px;
|
||||
}
|
||||
/* #app > div > div > main > div:nth-child(2) > div > div > div.text-center > nav > ul > li> button{
|
||||
.v-pagination .v-btn {
|
||||
font-size: large;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* .v-pagination .v-pagination__item .v-btn {
|
||||
display: none;
|
||||
} */
|
||||
.v-pagination .v-pagination__item .v-btn {
|
||||
display: none;
|
||||
}
|
||||
.v-pagination .v-btn .pagination__prev {
|
||||
font-size: 80px;
|
||||
display: block !important;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export const CONFIG = {
|
||||
// api_url: "http://178.128.18.156:3000",
|
||||
api_url: process.env.VUE_APP_API_URL || "http://localhost:3000",
|
||||
api_url: "http://178.128.18.156:3000",
|
||||
// api_url: process.env.VUE_APP_API_URL || "http://localhost:3000",
|
||||
};
|
||||
|
||||
@@ -13,14 +13,16 @@
|
||||
width="250"
|
||||
></v-img>
|
||||
<v-card
|
||||
class="mx-auto pa-12 pb-8"
|
||||
class="mx-auto pa-4 pb-8 pt-8"
|
||||
elevation="8"
|
||||
max-width="600"
|
||||
rounded="lg"
|
||||
>
|
||||
<v-form fast-fail @submit.prevent v-model="form1">
|
||||
<div class="text-subtitle-1 text-medium-emphasis">ID card number</div>
|
||||
|
||||
<!-- <div class="text-subtitle-1 text-medium-emphasis">ID card number</div> -->
|
||||
<div class="text-medium-emphasis text-subtitle" style="font-size: 18px">
|
||||
เลขบัตรประชาชน 13 หลัก เช่น 1234567890123
|
||||
</div>
|
||||
<v-text-field
|
||||
density="compact"
|
||||
placeholder="เลขประจำตัว 13 หลัก"
|
||||
@@ -29,6 +31,8 @@
|
||||
color="#4c884c"
|
||||
v-model="payload.cid"
|
||||
:rules="rules.id"
|
||||
type="number"
|
||||
hide-spin-buttons
|
||||
></v-text-field>
|
||||
<!--
|
||||
<div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
|
||||
@@ -42,10 +46,12 @@
|
||||
>
|
||||
Forgot login password?</a>
|
||||
</div> -->
|
||||
|
||||
<div class="text-medium-emphasis text-subtitle" style="font-size: 18px">
|
||||
เบอร์โทรศัพท์ 10 หลัก เช่น 0812345678
|
||||
</div>
|
||||
<v-text-field
|
||||
:append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
|
||||
:type="visible ? 'text' : 'password'"
|
||||
:type="visible ? 'number' : 'password'"
|
||||
density="compact"
|
||||
placeholder="เบอร์โทรศัพท์"
|
||||
prepend-inner-icon="mdi-lock-outline"
|
||||
@@ -54,6 +60,7 @@
|
||||
v-model="payload.phone"
|
||||
:rules="rules.tel"
|
||||
color="#4c884c"
|
||||
hide-spin-buttons
|
||||
></v-text-field>
|
||||
|
||||
<!-- <v-card
|
||||
@@ -80,7 +87,10 @@
|
||||
</v-form>
|
||||
</v-card>
|
||||
</div>
|
||||
<div v-if="getUsername&&getCheckPage" class="text-normal text-center py-10">
|
||||
<div
|
||||
v-if="getUsername && getCheckPage"
|
||||
class="text-normal text-center py-10"
|
||||
>
|
||||
<v-icon
|
||||
icon="mdi-alert-circle-outline"
|
||||
size="35"
|
||||
@@ -89,7 +99,14 @@
|
||||
คุณเข้าสู่ระบบอยู่แล้ว
|
||||
|
||||
<div class="mt-10">
|
||||
<v-btn elevated color="#DD6C31" class="text-normal ma-6" height="85" to="/" width="300">
|
||||
<v-btn
|
||||
elevated
|
||||
color="#DD6C31"
|
||||
class="text-normal ma-6"
|
||||
height="85"
|
||||
to="/"
|
||||
width="300"
|
||||
>
|
||||
<span class="text-normal"> กลับหน้าหลัก</span>
|
||||
|
||||
<v-img
|
||||
@@ -102,7 +119,7 @@
|
||||
<v-btn
|
||||
elevated
|
||||
color="#DD6C31"
|
||||
class="text-normal ma-6"
|
||||
class="text-normal ma-6"
|
||||
height="85"
|
||||
to="/search"
|
||||
width="300"
|
||||
@@ -124,7 +141,7 @@ import { mapGetters } from "vuex";
|
||||
import { client } from "@/utils/trpc";
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(["getUsername", "getImg","getCheckPage"]),
|
||||
...mapGetters(["getUsername", "getImg", "getCheckPage"]),
|
||||
},
|
||||
data: () => ({
|
||||
form1: false,
|
||||
@@ -134,10 +151,12 @@ export default {
|
||||
tel: [
|
||||
(v) =>
|
||||
// (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง',
|
||||
/^([0-9]{10})$/.test(v) || "Invalid phone number",
|
||||
/^([0-9]{10})$/.test(v) || "เบอร์โทรไม่ถูกต้อง",
|
||||
],
|
||||
id: [
|
||||
(v) => (parseInt(v) == v && v.length == 13) || "Invalid ID card number",
|
||||
(v) =>
|
||||
(parseInt(v) == v && v.length == 13) ||
|
||||
"หมายเลขบัตรประชาชนไม่ถูกต้อง",
|
||||
],
|
||||
},
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user