initial

src/components/search/SearchMain.vue

@@ -0,0 +1,127 @@
+<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>
+      <v-container>
+        <v-row>
+          <v-col cols="12" md="3">
+            <v-autocomplete
+              label="จังหวัด"
+              :items="provinceItems"
+              variant="solo"
+              item-title="provinceNameTh"
+              return-object
+              v-model="province"
+              placeholder="จังหวัด"
+              @update:modelValue="filterData"
+              hide-details
+            ></v-autocomplete
+          ></v-col>
+          <v-col cols="12" md="3">
+            <v-autocomplete
+              label="อำเภอ / เขต"
+              :items="districtItems"
+              variant="solo"
+              item-title="districtNameTh"
+              return-object
+              v-model="district"
+              placeholder="อำเภอ / เขต"
+              hide-details
+            ></v-autocomplete
+          ></v-col>
+          <v-col cols="12" md="3">
+            <v-autocomplete
+              label="กลุ่มอาชีพ"
+              :items="items"
+              variant="solo"
+              item-title="text"
+              return-object
+              placeholder="กลุ่มอาชีพ"
+              hide-details
+            ></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" class="mt-8" elevated size="large">
+          <span class="text-sub">ค้นหา</span>
+        </v-btn>
+      </v-container>
+      <ResultMain />
+    </div>
+  </div>
+</template>
+<script>
+import Provinces from "@/components/form/provinces.json";
+import Districts from "@/components/form/districts.json";
+import ResultMain from "./ResultMain.vue";
+export default {
+  components: {
+    ResultMain,
+  },
+  data() {
+    return {
+      province: null,
+      district: null,
+      districtItems: [],
+      provinceItems: Provinces,
+      items: [
+        { text: "กลุ่มบริหารราชการแผ่นดินและความมั่นคง", idx: 1 },
+        { text: "กลุ่มกฎหมายกระบวนการยุติธรรม", idx: 2 },
+        { text: "กลุ่มการศึกษา", idx: 3 },
+        { text: "กลุ่มการสาธารณสุข", idx: 4 },
+        { text: "กลุ่มอาชีพทำนา ปลูกพืชล้มลุก", idx: 5 },
+        { text: "กลุ่มอาชีพทำสวน ป่าไม้ ปศุสัตว์ ประมง", idx: 6 },
+        { text: "กลุ่มพนักงานหรือลูกจ้างของบุคคล(ไม่ใช่หน่วยงานรัฐ)", idx: 7 },
+        {
+          text: "กลุ่มผู้ประกอบอาชีพด้านสิ่งแวดล้อม ผังเมือง อสังหาริมทรัพย์และสาธารณูปโภค ทรัพยากรธรรมชาติ พลังงาน",
+          idx: 8,
+        },
+        { text: "กลุ่มผู้ประกอบกิจการ หรือ SME", idx: 9 },
+        { text: "กลุ่มผู้ประกอบกิจการอื่นนอกจากข้อ (9)", idx: 10 },
+        { text: "กลุ่มผู้ประกอบธุรกิจหรืออาชีพด้านการท่องเที่ยว", idx: 11 },
+        { text: "กลุ่มผู้ประกอบอุตสาหกรรม", idx: 12 },
+        {
+          text: "กลุมผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
+          idx: 13,
+        },
+        { text: "กลุ่มสตรี", idx: 14 },
+        {
+          text: "กลุ่มผู้สูงอายุ คนพิการหรือทุพพลภาพ กลุ่มชาติพันธุ์ กลุ่มอัตลักษณ์อื่น",
+          idx: 15,
+        },
+        { text: "กลุ่มศิลปะ วัฒนธรรม ดนตรี การแสดงและบันเทิง", idx: 16 },
+        { text: "กลุ่มประชาสังคม องค์กรสาธารณประโยชน์", idx: 17 },
+        { text: "กลุ่มนักกีฬา สื่อสารมวลชน ผู้สร้างสรรค์วรรณกรรม", idx: 18 },
+        { text: "กลุ่มผู้ประกอบวิชาชีพ ผู้ประกอบอาชีพอิสระ", idx: 19 },
+        { text: "กลุ่มอื่นๆ", idx: 20 },
+        // { text: "Real-Time" },
+        // { text: "Audience" },
+      ],
+    };
+  },
+  methods: {
+    filterData() {
+      // กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
+
+      if (this.province && this.province.provinceCode) {
+        this.districtItems = [...Districts].filter(
+          (item) => item.provinceCode === this.province.provinceCode
+        );
+      }
+    },
+  },
+};
+</script>
+<style></style>