ฟิลเตอร์ สถานภาพ

src/modules/09_leave/components/05_Leave/Tab1.vue

@@ -30,6 +30,7 @@ const querySting = reactive<QuerySting>({
   page: 1, //*สถานะการของลา
   pageSize: 10, //*สถานะการของลา
   keyword: leaveStore.filter.keyword, //keyword ค้นหา
+  profileType: '', //profileType
 });
 
 //** เรียกข้อมูลจาก API*/

src/modules/09_leave/components/05_Leave/Tab2.vue

@@ -33,6 +33,7 @@ const querySting = reactive<QuerySting>({
   page: 1, //*สถานะการของลา
   pageSize: 10, //*สถานะการของลา
   keyword: leaveStore.filter.keyword, //keyword ค้นหา
+  profileType: '', //profileType
 });
 //** เรียกข้อมูลจาก API*/
 async function fecthLeaveList() {

src/modules/09_leave/components/05_Leave/ToolBarLeave.vue

@@ -23,6 +23,12 @@ const props = defineProps({
 });
 
 /** Option*/
+const roleMainOp = ref<DataOption[]>([
+  { id: "OFFICER", name: "ข้าราชการ กทม. สามัญ" },
+  { id: "EMPLOYEE", name: "ลูกจ้างประจำ กทม." },
+]);
+const roleOp = ref<DataOption[]>();
+
 const optionTypeMain = ref<DataOption[]>([]);
 const optionType = ref<DataOption[]>([]);
 const optionStatus = ref<DataOption[]>([
@@ -91,6 +97,18 @@ function filterOption(val: string, update: any, name: string) {
   });
 }
 
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    const data = roleMainOp.value;
+    roleOp.value = data.filter((e: any) => e.name.search(val) !== -1);
+  });
+}
+
 watch(
   async () => props.dataToobar,
   () => {
@@ -116,6 +134,42 @@ watch(
 <template>
   <div class="row col-12 q-col-gutter-sm q-mb-sm">
     <div class="col-xs-12 col-sm-3 col-md-2">
+      <q-select
+        emit-value
+        map-options
+        outlined
+        dense
+        option-value="id"
+        option-label="name"
+        label="สถานภาพ"
+        use-input
+        :model-value="
+          querySting.profileType == '' ? 'ทั้งหมด' : querySting.profileType
+        "
+        hide-selected
+        fill-input
+        :options="roleOp"
+        @update:model-value="(value:any)=>(querySting.profileType = value,props.getSearch?.())"
+        @filter="(inputValue:string,
+                    doneFn:Function) => filterOptionFn(inputValue,doneFn)"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+        <template v-if="querySting.profileType !== ''" v-slot:append>
+          <q-icon
+            name="cancel"
+            @click.stop.prevent="
+              (querySting.profileType = ''), props.getSearch?.()
+            "
+            class="cursor-pointer"
+          />
+        </template>
+      </q-select>
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-1">
       <datepicker
         menu-class-name="modalfix"
         v-model="querySting.year"
@@ -245,7 +299,7 @@ watch(
         </template>
       </q-input>
     </div>
-    <div class="col-xs-12 col-sm-3 col-md-2">
+    <div class="col-xs-12 col-sm-3 col-md-1">
       <q-select
         for="visibleColumns"
         v-model="leaveStore.visibleColumns"
@@ -256,7 +310,6 @@ watch(
         :display-value="$q.lang.table.columns"
         emit-value
         map-options
-        style="min-width: 140px"
         :options="leaveStore.columns"
         option-value="name"
       />

src/modules/09_leave/interface/request/leave.ts

@@ -12,6 +12,7 @@ interface QuerySting {
   page: number; //*หน้า
   pageSize: number; //*จำนวนแถวต่อหน้า
   keyword: string; //keyword ค้นหา
+  profileType: string;
 }
 
 interface DateFilter {

src/modules/09_leave/stores/LeaveStore.ts

@@ -79,6 +79,7 @@ export const useLeavelistDataStore = defineStore("leave", () => {
   async function fetchListLeaveReject(data: any[]) {
     let datalist = data.map((e: FremData) => ({
       id: e.id,
+      profileType: e.profileType ?? '-',
       leaveTypeName: e.leaveTypeName,
       leaveTypeId: e.leaveTypeId,
       fullName: e.fullName,