updata page main

src/modules/05_placement/views/Main.vue

@@ -1,12 +1,153 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue';
+const attrs = ref<any>(useAttrs());
+
+const fiscalyear = ref<string>("");
+
+const filter = ref<string>("");
+
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterRef.value.focus();
+};
+
+const inputvisible = ref<string[]>([]);
+
+interface DataOption {
+  id: number;
+  name: string;
+}
+
+const fiscalyearOP = ref<DataOption[]>([
+  {id: 1, name: "2566"},
+  {id: 2, name: "2565"},
+  {id: 3, name: "2564"},
+]);
+
+</script>
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    บรรจุ แต่งตั้ง ย้าย โอน
+    รายการสอบแข่งขัน / คัดเลือก
   </div>
   <div>
-    <q-card flat bordered class="col-12 q-mt-sm"> </q-card>
+    <q-card flat bordered class="col-12 q-mt-sm"> 
+      <div class="row q-pa-md" >
+        <div class="col-xs-12 col-sm-3 col-md-2">
+          <q-select
+                v-model="fiscalyear"
+                label="ปีงบประมาณ"
+                dense
+                clearable 
+                emit-value
+                map-options
+                option-label="name"
+                :options="fiscalyearOP"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+              />
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-6"></div>
+        <div class="col-xs-12 col-sm-3 col-md-2">
+          <q-input
+            standout
+            dense
+            v-model="filter"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            class="q-ml-sm"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filter == ''" name="search" />
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-2">
+          <q-select
+            v-model="inputvisible"
+            :display-value="$q.lang.table.columns"
+            multiple
+            outlined
+            dense
+            :options="attrs.columns"
+            options-dense
+            option-value="name"
+            map-options
+            emit-value
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+          />
+        </div>
+      </div>
+      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
+        <q-card bordered class="col-12 filter-card">
+          <div class="row q-pa-sm">
+            <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
+              <q-select
+                  v-model="fiscalyear"
+                  label="ครั้งที่"
+                  dense
+                  clearable 
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="fiscalyearOP"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
+              <q-select
+                  v-model="fiscalyear"
+                  label="ประเภทการสอบ"
+                  dense
+                  clearable 
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="fiscalyearOP"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-3">
+
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-3">
+
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </q-card>
   </div>
 </template>
 
-<style lang="scss" scope></style>
+<style lang="scss" scope>
+.filter-card {
+  background-color: #EDEDED;
+}
+</style>