ปรับ fe sprint2

src/modules/04_registry/components/TableProfile.vue

@@ -119,7 +119,29 @@
             <div class="dialog-card-contain">
               <q-card-section class="q-pa-md">
                 <div class="row col-12 q-col-gutter-sm">
-                  <div class="col-xs-12 col-sm-4">
+                  <div class="col-xs-12 col-sm-3">
+                    <selector
+                      hide-bottom-space
+                      :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
+                      outlined
+                      dense
+                      lazy-rules
+                      :model-value="employeeClass"
+                      emit-value
+                      map-options
+                      :options="employeeClassOps"
+                      option-label="name"
+                      option-value="id"
+                      :label="`${'ประเภท'}`"
+                      use-input
+                      input-debounce="0"
+                      @update:model-value="updateEmployeeClass"
+                    />
+                  </div>
+                  <!-- @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
+                      ) " -->
+                  <div class="col-xs-12 col-sm-2">
                     <q-input
                       clearable
                       dense
@@ -132,7 +154,7 @@
                       type="number"
                     />
                   </div>
-                  <div class="col-xs-12 col-sm-4">
+                  <div class="col-xs-12 col-sm-3">
                     <q-input
                       clearable
                       dense
@@ -206,7 +228,7 @@
                       color="primary"
                       @update:model-value="updateIsShowRetire"
                     >
-                      แสดงข้อมูลผู้พ้นจากราชการ/เกษียณอายุราชการ/เสียชีวิต/โอน/ลาออก
+                      แสดงข้อมูลผู้พ้นจากราชการ
                     </q-toggle>
                     <q-toggle
                       dense
@@ -216,8 +238,19 @@
                     >
                       ทดลองปฏิบัติหน้าที่ราชการ
                     </q-toggle>
+                    <q-space />
+                    <div>
+                      <q-btn
+                        dense
+                        color="primary"
+                        icon="mdi-magnify"
+                        label="ค้นหา"
+                        class="q-px-md"
+                        @click="doSearch"
+                      />
+                    </div>
                   </div>
-                  <div class="col-12 row q-col-gutter-y-md">
+                  <!-- <div class="col-12 row q-col-gutter-y-md">
                     <div class="row q-gutter-md">
                       <q-radio
                         dense
@@ -248,7 +281,7 @@
                         @click="doSearch"
                       />
                     </div>
-                  </div>
+                  </div> -->
                 </div>
               </q-card-section>
             </div>
@@ -272,6 +305,7 @@
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+import type { DataOption } from "@/modules/04_registry/components/profileType";
 
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
@@ -280,16 +314,23 @@ const searchPanel = ref<boolean>(true);
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
+const employeeClassOps = ref<DataOption[]>([
+  { id: "officer", name: "ข้าราชการกทม.สามัญ" },
+  { id: "employee", name: "ลูกจ้าง(ทั้งหมด)" },
+  { id: "perm", name: "ลูกจ้างประจำ" },
+  { id: "temp", name: "ลูกจ้างชั่วคราว" },
+]);
 
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
   profileId: String,
+  employeeClass: String,
   fullName: String,
   oldFullName: String,
   isShowRetire: Boolean,
   isProbation: Boolean,
-  profileType: String,
+  //   profileType: String,
   retireYear: Number || null,
   govAge: Number || null,
   isTab: {
@@ -314,13 +355,14 @@ const emit = defineEmits([
   "update:inputfilter",
   "update:inputvisible",
   "update:profileId",
+  "update:employeeClass",
   "update:fullName",
   "update:oldFullName",
   "update:oldName",
   "update:retireYear",
   "update:govAge",
   "update:isShowRetire",
-  "update:profileType",
+  //   "update:profileType",
   "update:isProbation",
 ]);
 
@@ -334,6 +376,9 @@ const updateVisible = (value: []) => {
 const updateProfileId = (value: string | number | null) => {
   emit("update:profileId", value);
 };
+const updateEmployeeClass = (value: string | number | null) => {
+  emit("update:employeeClass", value);
+};
 const updateFullname = (value: string | number | null) => {
   emit("update:fullName", value);
 };
@@ -349,9 +394,9 @@ const updateIsShowRetire = (value: string | number | null) => {
 const updateIsProbation = (value: string | number | null) => {
   emit("update:isProbation", value);
 };
-const updateProfileType = (value: string | number | null) => {
-  emit("update:profileType", value);
-};
+// const updateProfileType = (value: string | number | null) => {
+//   emit("update:profileType", value);
+// };
 
 const clearDate = () => {
   emit("update:retireYear", null);
@@ -364,6 +409,7 @@ const clickSearchPanel = () => {
   emit("update:oldFullName", null);
   emit("update:fullName", null);
   emit("update:profileId", null);
+  emit("update:employeeClass", null);
   searchPanel.value = !searchPanel.value;
 };