912 lines
37 KiB
Vue
912 lines
37 KiB
Vue
<template>
|
|
<v-container class="txt-black my-3">
|
|
<div class="text-subtitle mb-5">กรุณากรอกข้อมูลตามกำหนด</div>
|
|
|
|
<div>
|
|
<v-stepper v-model="e1">
|
|
<template v-slot:default="{ prev, next }">
|
|
<v-stepper-header>
|
|
<template v-for="n in steps" :key="`${n}-step`">
|
|
<v-stepper-item
|
|
color="#4C884C"
|
|
:complete="e1 > n"
|
|
:step="`Step {{ n }}`"
|
|
:value="n"
|
|
></v-stepper-item>
|
|
|
|
<v-divider v-if="n !== steps" :key="n"></v-divider>
|
|
</template>
|
|
</v-stepper-header>
|
|
|
|
<v-stepper-window>
|
|
<!-- -------------------------------------------step1----------------------------------------------- -->
|
|
<v-stepper-window-item
|
|
:key="`${1}-content`"
|
|
:value="1"
|
|
class="text-sub2"
|
|
>
|
|
<!-- <v-card color="" class="text-sub2"> -->
|
|
<div>ช่วงที่ 1</div>
|
|
<div class="text-subtitle">
|
|
ข้อมูลส่วนตัว
|
|
<hr class="my-3" />
|
|
</div>
|
|
<!-- {{ form1 }} -->
|
|
<v-form fast-fail @submit.prevent v-model="form1">
|
|
<v-row class="px-2">
|
|
<v-col class="py-3" cols="12" md="12">
|
|
<v-text-field
|
|
label="ชื่อ / Name"
|
|
variant="solo"
|
|
:rules="rules.required"
|
|
v-model="payload.firstName"
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
label="นามสกุล / LastName"
|
|
variant="solo"
|
|
:rules="rules.required"
|
|
v-model="payload.lastName"
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
label="เลขบัตรประชาชน / ID card number"
|
|
variant="solo"
|
|
:rules="rules.id"
|
|
v-model="payload.cid"
|
|
counter
|
|
></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"
|
|
type="number"
|
|
min="40"
|
|
v-model.number="payload.age"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col class="py-3" cols="12" md="6">
|
|
<v-text-field
|
|
label="อาชีพ / Occupation"
|
|
variant="solo"
|
|
:rules="rules.required"
|
|
v-model="payload.job"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-text-field
|
|
label="ประวัติการศึกษา / Education"
|
|
variant="solo"
|
|
:rules="rules.required"
|
|
v-model="payload.education"
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
label="เบอร์โทรศัพท์"
|
|
variant="solo"
|
|
:rules="rules.tel"
|
|
v-model="payload.phone"
|
|
></v-text-field>
|
|
</v-col>
|
|
|
|
<v-col class="d-none">
|
|
<v-card
|
|
color="#4C884C"
|
|
class="pa-5 text-center h-100"
|
|
elevated
|
|
>
|
|
<div class="text-sub text-left">
|
|
<v-icon icon="mdi-plus-box-multiple"></v-icon>
|
|
เพิ่มรูปภาพ
|
|
</div>
|
|
<!-- {{url}} -->
|
|
<v-avatar size="200" color="grey" class="elevation-3">
|
|
<v-img :src="url" v-if="url"></v-img>
|
|
<v-icon dark v-else size="80"> mdi-account </v-icon>
|
|
</v-avatar>
|
|
|
|
<v-file-input
|
|
label="แนบรูปภาพ"
|
|
accept="image/png, image/jpeg, image/bmp"
|
|
placeholder="แนบรูปภาพไฟล์ png/jpeg/jpg"
|
|
prepend-inner-icon="mdi-camera"
|
|
prepend-icon=""
|
|
variant="solo-filled"
|
|
class="mt-5"
|
|
@change="Preview_image"
|
|
v-model="image"
|
|
></v-file-input>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- <v-btn @click.prevent="e1++" :disabled="!form1">next</v-btn> -->
|
|
<v-stepper-actions
|
|
type="submit"
|
|
:disabled="disabled && !form1"
|
|
@click:next="next"
|
|
@click:prev="prev"
|
|
></v-stepper-actions>
|
|
</v-form>
|
|
<!-- </v-card> -->
|
|
</v-stepper-window-item>
|
|
<!-- -------------------------------------------step2----------------------------------------------- -->
|
|
<v-stepper-window-item :key="`${2}-content`" :value="2">
|
|
<v-form
|
|
fast-fail
|
|
@submit.prevent
|
|
v-model="form2"
|
|
class="text-sub2"
|
|
>
|
|
<div>ช่วงที่ 2</div>
|
|
<div class="text-subtitle">
|
|
ข้อมูลการสมัครสว.
|
|
<hr class="my-3" />
|
|
</div>
|
|
<v-row class="">
|
|
<v-col class="text-sub" cols="12">
|
|
ประสงค์จะสมัครในกลุ่ม*
|
|
</v-col>
|
|
<v-col class="py-3 col2" cols="12" md="12">
|
|
<!-- {{payload.group}} -->
|
|
<v-radio-group v-model.number="payload.group">
|
|
<v-radio
|
|
class="text-sub2"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
v-for="(item, i) in items"
|
|
:key="i"
|
|
></v-radio>
|
|
</v-radio-group>
|
|
</v-col>
|
|
<v-col>
|
|
<v-card>
|
|
<div class="text-sub">
|
|
จังหวัดที่คุณประสงค์จะลงสมัคร*
|
|
<span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
|
|
<hr class="my-3" />
|
|
<div class="text-sub3 text-red font-weight-bold">
|
|
เงื่อนไข
|
|
</div>
|
|
<div class="text-sub2">
|
|
จังหวัดที่เกิด
|
|
มีชื่ออยู่ในทะเบียนบ้านติดต่อกันไม่น้อยกว่า 2 ปี
|
|
(นับถึงวันสมัคร) เคยมีชื่ออยู่ในทะเบียนบ้านไม่น้อยกว่า
|
|
2 ปี ทำงานติดต่อกันไม่น้อยกว่า 2 ปี
|
|
เคยทำงานไม่น้อยกว่า 2 ปี
|
|
เป็นที่ตั้งของสถานศึกษาที่เคยศึกษา
|
|
ติดต่อกันไม่น้อยกว่า 2 ปีการศึกษา
|
|
</div>
|
|
<!-- {{ province }} -->
|
|
<v-autocomplete
|
|
label="จังหวัด"
|
|
:items="provinceItems"
|
|
variant="solo"
|
|
item-title="name"
|
|
item-value="id"
|
|
v-model.number="payload.province"
|
|
placeholder="จังหวัด"
|
|
@update:modelValue="filterData"
|
|
></v-autocomplete>
|
|
</div>
|
|
</v-card>
|
|
<v-card>
|
|
<div class="text-sub">
|
|
อำเภอที่คุณประสงค์จะลงสมัคร*
|
|
<span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
|
|
<hr class="my-3" />
|
|
<div class="text-sub3 text-red font-weight-bold">
|
|
เงื่อนไข
|
|
</div>
|
|
<div class="text-sub2">
|
|
อำเภอที่เกิด
|
|
มีชื่ออยู่ในทะเบียนบ้านติดต่อกันไม่น้อยกว่า 2 ปี
|
|
(นับถึงวันสมัคร) เคยมีชื่ออยู่ในทะเบียนบ้านไม่น้อยกว่า
|
|
2 ปี ทำงานติดต่อกันไม่น้อยกว่า 2 ปี
|
|
เคยทำงานไม่น้อยกว่า 2 ปี
|
|
เป็นที่ตั้งของสถานศึกษาที่เคยศึกษา
|
|
ติดต่อกันไม่น้อยกว่า 2 ปีการศึกษา
|
|
</div>
|
|
<!-- {{ payload.zone }} -->
|
|
<v-autocomplete
|
|
label="อำเภอ / เขต"
|
|
:items="districtItems"
|
|
variant="solo"
|
|
item-title="name"
|
|
item-value="id"
|
|
v-model.number="payload.zone"
|
|
placeholder="อำเภอ / เขต"
|
|
:disabled="payload.province == null"
|
|
></v-autocomplete>
|
|
</div>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
<div class="btn-next">
|
|
<v-btn @click="e1--" variant="text" class="float-left"
|
|
>Previous</v-btn
|
|
>
|
|
<!-- <v-spacer></v-spacer> -->
|
|
|
|
<v-btn
|
|
@click="e1++"
|
|
:disabled="
|
|
payload.zone == null ||
|
|
payload.province == null ||
|
|
payload.group == null
|
|
"
|
|
variant="tonal"
|
|
class="float-right"
|
|
>next</v-btn
|
|
>
|
|
</div>
|
|
<!-- <v-stepper-actions
|
|
type="submit"
|
|
:disabled="disabled"
|
|
@click:next="next"
|
|
@click:prev="prev"
|
|
></v-stepper-actions> -->
|
|
</v-form>
|
|
</v-stepper-window-item>
|
|
|
|
<!-- -------------------------------------------step3----------------------------------------------- -->
|
|
<v-stepper-window-item
|
|
:key="`${3}-content`"
|
|
:value="3"
|
|
class="text-sub2"
|
|
>
|
|
<div>ช่วงที่ 3</div>
|
|
<div class="text-subtitle">
|
|
จุดยืนในฐานะสมาชิกรัฐสภา (สว.)
|
|
<hr class="my-3" />
|
|
</div>
|
|
<v-row>
|
|
<v-col class="text-sub" cols="12">
|
|
คุณคิดเห็นอย่างไรกับประเด็นเหล่านี้? *
|
|
</v-col>
|
|
<v-col cols="12" md="12">
|
|
<!-- {{ opnitem1 }} -->
|
|
<v-row>
|
|
<v-col></v-col>
|
|
<v-col>
|
|
<v-row class="text-sub3 font-weight-medium">
|
|
<v-col class="rot-box" cols="4">เห็นด้วย</v-col
|
|
><v-col class="rot-box" cols="4">ไม่เห็นด้วย</v-col
|
|
><v-col class="rot-box" cols="4">พิจารณา</v-col>
|
|
</v-row>
|
|
</v-col></v-row
|
|
>
|
|
<!-- {{ option1 }} -->
|
|
<v-row
|
|
v-for="(item, i) in option1"
|
|
:key="i"
|
|
align="center"
|
|
justify="center"
|
|
style="border-bottom: 1px solid #e4e4e4"
|
|
>
|
|
<v-col class="">
|
|
{{ item.name }}
|
|
</v-col>
|
|
<v-col>
|
|
<v-radio-group inline hide>
|
|
<v-radio
|
|
class="text-sub2"
|
|
value="agree"
|
|
@click="item.choice = 'agree'"
|
|
></v-radio>
|
|
<v-radio
|
|
class="text-sub2"
|
|
value="disagree"
|
|
@click="item.choice = 'disagree'"
|
|
></v-radio>
|
|
<v-radio
|
|
class="text-sub2"
|
|
value="deciding"
|
|
@click="item.choice = 'deciding'"
|
|
></v-radio>
|
|
</v-radio-group>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
<v-col>
|
|
<v-card>
|
|
<div class="text-sub">
|
|
คุณคิดเห็นอย่างไรกับประเด็นเหล่านี้? *
|
|
</div>
|
|
<hr class="my-3" />
|
|
<v-row>
|
|
<v-col></v-col>
|
|
<v-col>
|
|
<!-- <v-row class="text-sub3 font-weight-bold ">
|
|
<v-col class="rot-box" cols="3">เห็นด้วย</v-col><v-col class="rot-box" cols="3">ไม่เห็นด้วย</v-col
|
|
><v-col class="rot-box" cols="3">พิจารณา</v-col>
|
|
<v-col class="rot-box" cols="3">ไม่แสดงความเห็น</v-col>
|
|
</v-row> -->
|
|
</v-col></v-row
|
|
>
|
|
<!-- {{option2}} -->
|
|
<v-row
|
|
v-for="(item, i) in option2"
|
|
:key="i"
|
|
align="center"
|
|
justify="center"
|
|
style="border-bottom: 1px solid #e4e4e4"
|
|
>
|
|
<v-col class="text-sub2 font-weight-medium" cols="12">
|
|
{{ item.name }}
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-radio-group inline class="col4">
|
|
<v-radio
|
|
class="text-sub2"
|
|
value="agree"
|
|
@click="item.choice = 'agree'"
|
|
label="เห็นด้วย"
|
|
></v-radio>
|
|
<v-radio
|
|
class="text-sub2"
|
|
value="disagree"
|
|
@click="item.choice = 'disagree'"
|
|
label="ไม่เห็นด้วย"
|
|
></v-radio>
|
|
<v-radio
|
|
class="text-sub2"
|
|
value="deciding"
|
|
@click="item.choice = 'deciding'"
|
|
label="พิจารณา"
|
|
></v-radio>
|
|
<v-radio
|
|
class="text-sub2"
|
|
value="ignore"
|
|
@click="item.choice = 'ignore'"
|
|
label="ไม่แสดงความเห็น"
|
|
></v-radio>
|
|
</v-radio-group>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
<v-card class="mt-8">
|
|
<div class="text-sub">
|
|
คำอธิบายจุดยืนในฐานะสมาชิกรัฐสภาเพิ่มเติมที่ต้องการจะให้คนอื่นทราบ
|
|
*
|
|
</div>
|
|
<hr class="my-3" />
|
|
<v-textarea
|
|
label=""
|
|
variant="solo"
|
|
bg-color="#F2EBD1"
|
|
v-model="payload.vision"
|
|
></v-textarea>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-stepper-window-item>
|
|
|
|
<!-- -------------------------------------------step4----------------------------------------------- -->
|
|
<v-stepper-window-item
|
|
:key="`${4}-content`"
|
|
:value="4"
|
|
class="text-sub"
|
|
>
|
|
<div>
|
|
<div>ช่วงที่ 4</div>
|
|
<div class="text-subtitle">
|
|
คำถามอื่นเกี่ยวกับสว.
|
|
<hr class="my-3" />
|
|
</div>
|
|
<v-card class="mt-8 text-sub">
|
|
<div class="text-sub">
|
|
แนวทางการพิจารณาเห็นชอบผู้ดำรงตำแหน่งในองค์กรอิสระ.
|
|
</div>
|
|
<v-textarea
|
|
label="เหตุผลความตั้งใจในการลงสมัคร สว. ครั้งนี้"
|
|
variant="solo"
|
|
bg-color="#F2EBD1"
|
|
v-model="payload.reason"
|
|
></v-textarea>
|
|
</v-card>
|
|
<v-card class="mt-8 text-sub">
|
|
<div class="text-sub">
|
|
ช่องทางการติดต่อ (สำหรับเปิดเผยต่อสาธารณะ)
|
|
</div>
|
|
<v-row>
|
|
<v-col cols="12" md="12">
|
|
<v-text-field
|
|
variant="solo"
|
|
bg-color="#F2EBD1"
|
|
label="โทรศัพท์"
|
|
v-model="payload.public_phone"
|
|
:rules="rules.tel"
|
|
></v-text-field
|
|
></v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="4"
|
|
><v-text-field
|
|
variant="solo"
|
|
bg-color="#F2EBD1"
|
|
label="Facebook"
|
|
v-model="payload.facebook"
|
|
></v-text-field
|
|
></v-col>
|
|
<v-col cols="12" md="4"
|
|
><v-text-field
|
|
variant="solo"
|
|
bg-color="#F2EBD1"
|
|
label="X"
|
|
v-model="payload.twitter"
|
|
></v-text-field
|
|
></v-col>
|
|
<v-col cols="12" md="4"
|
|
><v-text-field
|
|
variant="solo"
|
|
bg-color="#F2EBD1"
|
|
label="TikTok"
|
|
v-model="payload.tiktok"
|
|
></v-text-field
|
|
></v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
variant="solo"
|
|
bg-color="#F2EBD1"
|
|
label="email"
|
|
v-model="payload.email"
|
|
></v-text-field
|
|
></v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
variant="solo"
|
|
bg-color="#F2EBD1"
|
|
v-model="payload.otherSocial"
|
|
label="ช่องทางอื่นๆ"
|
|
></v-text-field
|
|
></v-col>
|
|
</v-row>
|
|
|
|
<!-- <div class="text-sub">ช่องทางการติดต่อ (สำหรับทีมงาน)*</div>
|
|
<v-row>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field
|
|
variant="solo"
|
|
bg-color="#F2EBD1"
|
|
label="โทรศัพท์"
|
|
:rules="rules.tel"
|
|
v-model="payload.public_phone"
|
|
></v-text-field
|
|
></v-col>
|
|
</v-row> -->
|
|
</v-card>
|
|
<v-card class="mt-8 text-sub">
|
|
<div class="text-sub">กรุณายืนยันการส่งคำตอบ</div>
|
|
<v-checkbox
|
|
color="success"
|
|
value="true"
|
|
style="font-size: 24px"
|
|
v-model="check"
|
|
></v-checkbox>
|
|
<div class="text-sub3">
|
|
ข้าพเจ้าขอสาบานตนต่อสิ่งศักดิ์สิทธิ์ทั้งหลายที่ข้าพเจ้านับถือ
|
|
และ/หรือหลักการใดๆ ที่ข้าพเจ้ายึดถือว่า
|
|
ข้อมูลที่ข้าพเจ้าได้ให้ไว้นั้นเป็นความสัตย์จริง ทั้งสิ้น
|
|
และหากข้าพเจ้าได้รับเลือกเป็นสมาชิกวุฒิสภา (สว.) ในครั้งนี้
|
|
จะทำหน้าที่ต่างๆ
|
|
โดยยึดเอาหลักการประชาธิปไตยและประชาชนเป็นที่ตั้ง
|
|
หากข้าพเจ้าให้ความเท็จหรือกระทำการใดอันขัดต่อหลักประชาธิปไตยและสิทธิมนุษยชน
|
|
ขอภยันตรายและความวิบัติทั้งปวงจงบังเกิดแก่ข้าพเจ้า โดยพลัน
|
|
*ยืนยันการส่งคำตอบ เพื่อประกาศตัวเป็นผู้สมัครเป็น สว.67
|
|
</div>
|
|
<div class="text-center mb-5">
|
|
<v-btn
|
|
color="#DD6C31"
|
|
class="mt-4"
|
|
height="40"
|
|
@click="submit"
|
|
:disabled="!check"
|
|
>
|
|
<span class="text-sub">บันทึก</span>
|
|
</v-btn>
|
|
</div>
|
|
</v-card>
|
|
</div>
|
|
</v-stepper-window-item>
|
|
</v-stepper-window>
|
|
|
|
<v-stepper-actions
|
|
v-show="e1 == 3 || el == 4"
|
|
:disabled="disabled"
|
|
@click:next="next"
|
|
@click:prev="prev"
|
|
></v-stepper-actions>
|
|
</template>
|
|
</v-stepper>
|
|
</div>
|
|
</v-container>
|
|
</template>
|
|
<script>
|
|
// import Provinces from "./provinces.json";
|
|
// import Districts from "./districts.json";
|
|
import { client } from "@/utils/trpc";
|
|
import validateThaiID from "thai-id-validator";
|
|
// client.info.getAllGroups.query({}).then(console.log);
|
|
export default {
|
|
watch: {
|
|
image(val) {
|
|
console.log(val);
|
|
if (val == undefined) {
|
|
this.url = null;
|
|
this.image = null;
|
|
}
|
|
},
|
|
url(val) {
|
|
if (val) {
|
|
this.payload.image = val;
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
disabled() {
|
|
return this.e1 === 1
|
|
? "prev"
|
|
: this.e1 === this.steps
|
|
? "next"
|
|
: undefined;
|
|
},
|
|
// isIdCardValid() {
|
|
// return this.$refs.form.validate();
|
|
// },
|
|
// // ถ้าเลขบัตรประชาชนไม่ถูกต้องให้ปุ่ม Next ถูก disable
|
|
// isNextDisabled() {
|
|
// return !this.isIdCardValid;
|
|
// }
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
check: false,
|
|
form1: false,
|
|
form2: false,
|
|
form3: false,
|
|
form4: false,
|
|
rules: {
|
|
// ^[a-zA-Z0-9?><;,{}[\]\-_+=!@#$%\^&*|']*$
|
|
space: (v) => /^[^ ]+$/.test(v) || "must not contain spaces.",
|
|
username: (v) =>
|
|
/^[a-zA-Z0-9?><;.,{}[\]\-_+=!@#$%&*|']*$/.test(v) ||
|
|
"Username ไม่ถูกต้อง",
|
|
|
|
name_eng: (v) => {
|
|
if (v === null || v === undefined) {
|
|
return false;
|
|
}
|
|
|
|
const pattern = /^[A-Za-z]+$/;
|
|
return (
|
|
(pattern.test(v) && v.length >= 8) ||
|
|
"English name must contain only letters and be 8 characters or more"
|
|
);
|
|
},
|
|
name_thai: (v) => {
|
|
const pattern = /[\u0E00-\u0E7F']/;
|
|
return pattern.test(v) || "ใช้ภาษาไทยเท่านั้น";
|
|
},
|
|
required: [(value) => !!value || "Please fill out."],
|
|
password: (v) =>
|
|
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/.test(v) ||
|
|
// /^[a-zA-Z0-9?><;.,{}[\]\-_+=!@#$%\^&*|']*$/.test(v) ||
|
|
"The password must contain lowercase letters ( a - z ), uppercase letters ( A - Z ), and numbers ( 0 - 9 ), with a length of 8 or more.",
|
|
// 'รหัสผ่านจะต้องประกอบด้วยตัวพิมพ์เล็ก ( a - z ) ตัวอักษรพิมพ์ใหญ่ ( A - Z ) และตัวเลข ( 0 - 9 ) ความยาว 8 ขึ้นไป',
|
|
passwordsMatch: (v) => {
|
|
return v === this.FormRegister.password || "Passwords do not match";
|
|
},
|
|
min: (v) => v.length >= 6 || v.slice(0, 5),
|
|
tel: [
|
|
(v) =>
|
|
// (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง',
|
|
/^([0-9]{10})$/.test(v) || "Invalid phone number",
|
|
],
|
|
id: [
|
|
(v) =>
|
|
(parseInt(v) == v && v.length == 13 && validateThaiID(v)) ||
|
|
"Invalid ID card number",
|
|
],
|
|
email: [
|
|
(value) => {
|
|
const pattern =
|
|
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
return pattern.test(value) || "invalid email";
|
|
},
|
|
],
|
|
},
|
|
payload: {
|
|
firstName: null,
|
|
lastName: null,
|
|
title: "",
|
|
cid: null,
|
|
age: null,
|
|
phone: null,
|
|
public_phone: null,
|
|
facebook: null,
|
|
twitter: null,
|
|
tiktok: null,
|
|
otherSocial: null,
|
|
image: null,
|
|
email: null,
|
|
job: null,
|
|
education: null,
|
|
vision: null,
|
|
reason: null,
|
|
group: null,
|
|
zone: null,
|
|
province: null,
|
|
// opinions: [
|
|
// {
|
|
// opinionId: "",
|
|
// choice: "",
|
|
// },
|
|
// ],
|
|
},
|
|
|
|
url: null,
|
|
image: null,
|
|
province: null,
|
|
district: null,
|
|
districtItems: [],
|
|
provinceItems: [],
|
|
radio: null,
|
|
e1: 1,
|
|
steps: 4,
|
|
option1: [],
|
|
option2: [],
|
|
opnitem2: [
|
|
{ text: "แก้ไข มาตรา 112", idx: 1, check: null },
|
|
{
|
|
text: "สามจังหวัดชายแดนภาคใต้เป็นเขตปกครองพิเศษ",
|
|
idx: 2,
|
|
check: null,
|
|
},
|
|
{
|
|
text: "ควบคุมองค์กร NGO (องค์กรเอกชนเพื่อสาธารณประโยชน์)",
|
|
idx: 3,
|
|
check: null,
|
|
},
|
|
],
|
|
opnitem1: [
|
|
{ text: "สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี", idx: 1, check: null },
|
|
{ text: "แก้ไขรัฐธรรมนูญ 2560", idx: 2, check: null },
|
|
{ text: "เขียนรัฐธรรมนูญใหม่ “ทั้งฉบับ” ", idx: 3, check: null },
|
|
{
|
|
text: "เขียนรัฐธรรมนูญใหม่ แต่ยกเว้นหมวด 1 หมวด 2",
|
|
idx: 4,
|
|
check: null,
|
|
},
|
|
{
|
|
text: "ให้มีสภาร่างรัฐธรรมนูญ (สสร.) ใหม่ จากการเลือกตั้ง100%",
|
|
idx: 5,
|
|
check: null,
|
|
},
|
|
{
|
|
text: "แก้ไขที่มาของสว. ยกเลิกสว. ใช้ระบบสภาเดี่ยว",
|
|
idx: 6,
|
|
check: null,
|
|
},
|
|
{ text: "นิรโทษกรรมคดีการเมือง “ทุกคดี”", idx: 7, check: null },
|
|
{
|
|
text: "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
|
|
idx: 8,
|
|
check: null,
|
|
},
|
|
{ text: "ป้องกันภัยคุกคามจากต่างประเทศ", idx: 9, check: null },
|
|
{ text: "ควบคุมสื่อสังคมออนไลน์", idx: 10, check: null },
|
|
// { text: "ยกเลิกกฎหมายปราบปรามการค้าประเวณี", idx: 11, check: null },
|
|
{
|
|
text: "กัญชาเสรี บำนาญให้ประชาชนทุกคน เดือนละ 3,000 บาท",
|
|
idx: 11,
|
|
check: null,
|
|
},
|
|
{
|
|
text: "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
|
|
idx: 12,
|
|
check: null,
|
|
},
|
|
{ text: "กระจายอำนาจ เพิ่มงบประมาณให้ท้องถิ่น", idx: 13, check: null },
|
|
{
|
|
text: "เพิ่มอำนาจให้จังหวัดจัดการตัวเอง ถ่ายทอดสดการประชุมกรรมาธิการสว.",
|
|
idx: 14,
|
|
},
|
|
],
|
|
items: [],
|
|
};
|
|
},
|
|
methods: {
|
|
submit() {
|
|
let dataOption = [...this.option1, ...this.option2];
|
|
const filterOpt = dataOption.map((item) => {
|
|
return {
|
|
opinionId: item.opinionId,
|
|
choice: item.choice,
|
|
};
|
|
});
|
|
const filterOpt2 = filterOpt.filter((item) => item.choice !== null);
|
|
if (filterOpt2.length) {
|
|
this.payload.opinions = filterOpt2;
|
|
}
|
|
// console.log("opppp", filterOpt, filterOpt2);
|
|
|
|
// let payload = {
|
|
// firstName: "ธรรมนูญ",
|
|
// lastName: "สังขวรรณ",
|
|
// title: "",
|
|
// cid: "1189900247580",
|
|
// age: 60,
|
|
// phone: "0819444825",
|
|
// public_phone: "0819444885",
|
|
// facebook: "https://m.facebook.com/ThoThamanoon?mibextid=LQQJ4d",
|
|
// twitter: "ThoThamanoon",
|
|
// tiktok: "ThoThamanoon",
|
|
// otherSocial: "thamanoon.sun@gmail.com",
|
|
// image: null,
|
|
// email: null,
|
|
// job: "ผู้จัดการทั่วไปพัฒนาเครือข่ายผู้จำหน่าย บริษัท นิสสัน มอเตอร์",
|
|
// education: "ปริญญาเอก",
|
|
// vision: "เขียนรัฐธรรมนูญใหม่ “ทั้งฉบับ”",
|
|
// reason: "ให้มีสภาร่างรัฐธรรมนูญ (สสร.) ใหม่ จากการเลือกตั้ง100%",
|
|
// group: 7,
|
|
// zone: 1034,
|
|
// province: 10,
|
|
// // opinions: [
|
|
// // {
|
|
// // opinionId: "",
|
|
// // choice: "",
|
|
// // },
|
|
// // ],
|
|
// };
|
|
|
|
// console.log("this.payload", this.payload);
|
|
client.user.createUser
|
|
.mutate(this.payload)
|
|
.then((data) => {
|
|
console.log("data", data);
|
|
alert("บันทึกข้อมูลสำเร็จ");
|
|
this.$router.push("/upload");
|
|
// this.provinceItems = data;
|
|
})
|
|
.catch((error) => {
|
|
alert("ไม่สามารถอัปโหลดข้อมูลได้");
|
|
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
|
});
|
|
},
|
|
Preview_image() {
|
|
// console.log('this.image', this.image)
|
|
if (this.image && this.image !== null) {
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
console.log(event.target.result);
|
|
this.url = event.target.result;
|
|
};
|
|
reader.readAsDataURL(this.image);
|
|
console.log();
|
|
} else {
|
|
this.url = null;
|
|
}
|
|
},
|
|
filterData() {
|
|
// กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
|
|
// if (this.province && this.province.provinceCode) {
|
|
// this.districtItems = [...Districts].filter(
|
|
// (item) => item.provinceCode === this.province.provinceCode
|
|
// );
|
|
// }
|
|
this.payload.zone = null;
|
|
client.info.getAllZones
|
|
.query({ provice_id: this.payload.province })
|
|
.then((data) => {
|
|
this.districtItems = data;
|
|
})
|
|
.catch((error) => {
|
|
alert("ไม่สามารถโหลดข้อมูลได้");
|
|
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
client.info.getAllOpinions
|
|
.query({ type: "3Choice" })
|
|
.then((rs) => {
|
|
let data = [...rs].map((x) => {
|
|
x.choice = null;
|
|
x.opinionId = x.id;
|
|
return x;
|
|
});
|
|
let data1 = [...data].filter((x) => x.type == "3Choice");
|
|
this.option1 = data1;
|
|
let data2 = [...data].filter((x) => x.type == "4Choice");
|
|
this.option2 = data2;
|
|
console.log("rs", rs, data1, data2);
|
|
})
|
|
.catch((error) => {
|
|
// alert("ไม่สามารถโหลดข้อมูลได้");
|
|
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
|
});
|
|
|
|
client.info.getAllGroups
|
|
.query({})
|
|
.then((groups) => {
|
|
this.items = groups;
|
|
})
|
|
.catch((error) => {
|
|
alert("ไม่สามารถโหลดข้อมูลได้");
|
|
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
|
});
|
|
|
|
client.info.getAllProvinces
|
|
.query({})
|
|
.then((data) => {
|
|
this.provinceItems = data;
|
|
})
|
|
.catch((error) => {
|
|
alert("ไม่สามารถโหลดข้อมูลได้");
|
|
console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.btn-next {
|
|
padding: 1.5rem 0 0;
|
|
}
|
|
.v-selection-control-group--inline > * {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.v-radio-group .v-input__details {
|
|
display: none;
|
|
}
|
|
.v-stepper-item__avatar.v-avatar {
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
font-size: 20px;
|
|
}
|
|
.v-label.v-field-label {
|
|
opacity: 0.8;
|
|
}
|
|
.col2 {
|
|
column-count: 2 !important;
|
|
}
|
|
.v-selection-control .v-label {
|
|
font-size: 20px;
|
|
opacity: 1;
|
|
}
|
|
@media only screen and (min-width: 0px) and (max-width: 700px) {
|
|
.col2 {
|
|
column-count: 1 !important;
|
|
}
|
|
.rot-box {
|
|
transform: rotate(-90deg);
|
|
white-space: nowrap;
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
}
|
|
.v-stepper-item__avatar.v-avatar {
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
font-size: 15px;
|
|
}
|
|
.v-selection-control .v-label {
|
|
font-size: 17px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|