เพิ่มฟิลเตอร์

src/modules/05_placement/interface/request/Main.ts

@@ -17,6 +17,10 @@ interface ItemTabs {
   name: string;
 }
 
+interface DataOptions{
+  id:string,
+  name:string
+}
 interface FormOrderPlacementMainData {
   Order: string;
   OrderNum: string;
@@ -166,4 +170,5 @@ export type {
   MemBerType,
   PersonsAppointData,
   FormDataAppoint,
+  DataOptions
 };

src/modules/05_placement/store.ts

@@ -6,6 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import type {
   FormPlacementMainData,
   OpfillterTypeSt,
+  DataOptions,
 } from "@/modules/05_placement/interface/request/Main";
 import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
 
@@ -357,6 +358,15 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
       value: "ออกคำสั่งเสร็จแล้ว",
     },
   ]);
+  const statusOp = ref<DataOptions[]>([]);
+  const statusMainOp = ref<DataOptions[]>([
+    { id: "WAITTING", name: "รอดำเนินการ" },
+    { id: "PENDING", name: "เลือกตำแหน่งแล้ว" },
+    { id: "APPROVE", name: "อนุมัติ" },
+    { id: "REJECT", name: "ไม่อนุมัติ" },
+    { id: "REPORT", name: "ส่งรายชื่อไปออกคำสั่ง" },
+    { id: "DONE", name: "ออกคำสั่งเสร็จแล้ว" },
+  ]);
 
   const statusText = (val: string) => {
     switch (val) {
@@ -377,6 +387,22 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
         return "-";
     }
   };
+
+  /**
+   * ฟังก์ชั่นค้นหาข้อมูลของ Option Filter
+   * @param val คำที่ค้นหา
+   * @param update Function
+   */
+  function filterOption(val: string, update: any) {
+    update(() => {
+      const needle = val.toLowerCase();
+
+      statusOp.value = statusMainOp.value.filter(
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    });
+  }
+
   function statusProbationMain(val: number) {
     switch (val) {
       case 1:
@@ -406,5 +432,8 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
     statusText,
     statusProbationMain,
     optionStatusProbation,
+    statusOp,
+    statusMainOp,
+    filterOption,
   };
 });

src/modules/05_placement/views/02_transferMain.vue

@@ -17,12 +17,14 @@ import DialogOrders from "@/modules/05_placement/components/Transfer/DialogOrder
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { statusText } = useTransferDataStore();
+const store = useTransferDataStore();
+const { statusText, filterOption } = useTransferDataStore();
 const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
   mixin;
 
 const modal = ref<boolean>(false); //ส่งไปออกคำสั่ง
 const dataTransfer = ref<ResponseData[]>([]); //ช่อมูลรายการขอโอน
+const status = ref<string>("");
 
 //Table
 const rows = ref<ResponseData[]>([]); //รายการขอโอน
@@ -123,7 +125,7 @@ const visibleColumns = ref<string[]>([
 async function fetchData() {
   showLoader();
   await http
-    .get(config.API.transfer)
+    .get(config.API.transfer + `?status=${status.value}`)
     .then(async (res) => {
       const data = await res.data.result;
       rows.value = data;
@@ -185,7 +187,42 @@ onMounted(async () => {
   <q-card flat bordered class="col-12 q-mt-sm">
     <div class="row q-pa-md">
       <div class="col-12 q-col-gutter-sm">
-        <div class="row col-12">
+        <div class="row">
+          <div class="col-2">
+            <q-select
+              :model-value="status ? status : 'ทั้งหมด'"
+              outlined
+              dense
+              label="สถานะ"
+              :options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              fill-input
+              use-input
+              hide-selected
+              bg-color="white"
+              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              @update:model-value="(value:string)=>{(status = value),fetchData()}"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+              <template v-if="status" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="(status = ''), fetchData()"
+                  class="cursor-pointer"
+                  style="opacity: 0.6"
+                />
+              </template>
+            </q-select>
+          </div>
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             @click="openModalOrder"

src/modules/05_placement/views/03_receiveMain.vue

@@ -23,8 +23,8 @@ import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue";
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const transferStore = useTransferDataStore();
+const store = useTransferDataStore();
-const { statusText } = transferStore;
+const { statusText, filterOption } = useTransferDataStore();
 const {
   showLoader,
   hideLoader,
@@ -35,6 +35,7 @@ const {
   onSearchDataTable,
 } = mixin;
 
+const status = ref<string>("");
 const dataRecevice = ref<ResponseData[]>([]); //ข้อมูลรายการรับโอน
 const filters = ref<ResponseRow[]>([]); //ข้อมูลรายการรับโอน
 const dataRows = ref<ResponseRow>(); //ข้อมูลที่ต้องการเลือกหน่วยงานที่รับโอน
@@ -166,7 +167,7 @@ const columns = ref<QTableProps["columns"]>([
 async function fecthlistRecevice() {
   showLoader();
   await http
-    .get(config.API.receiveData())
+    .get(config.API.receiveData() + `?status=${status.value}`)
     .then(async (res) => {
       const data = await res.data.result;
       dataRecevice.value = data;
@@ -353,7 +354,42 @@ onMounted(async () => {
   <q-card flat bordered class="col-12 q-mt-sm">
     <div class="row q-pa-md">
       <div class="col-12 q-gutter-sm">
-        <div class="row col-12">
+        <div class="row">
+          <div class="col-2">
+            <q-select
+              :model-value="status ? status : 'ทั้งหมด'"
+              outlined
+              dense
+              label="สถานะ"
+              :options="store.statusOp"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              fill-input
+              use-input
+              hide-selected
+              bg-color="white"
+              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              @update:model-value="(value:string)=>{(status = value),fecthlistRecevice()}"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+              <template v-if="status" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="(status = ''), fecthlistRecevice()"
+                  class="cursor-pointer"
+                  style="opacity: 0.6"
+                />
+              </template>
+            </q-select>
+          </div>
           <q-btn
             v-if="checkPermission($route)?.attrIsCreate"
             flat

src/modules/05_placement/views/04_helpGovernmentMain.vue

@@ -18,8 +18,8 @@ import Dialogbody from "@/modules/05_placement/components/Help-Government/Dialog
 
 const $q = useQuasar();
 const router = useRouter();
-const transferStore = useTransferDataStore();
+const store = useTransferDataStore();
-const { statusText } = transferStore;
+const { statusText, filterOption } = useTransferDataStore();
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -34,6 +34,8 @@ const {
 } = mixin;
 
 /** Table*/
+const status = ref<string>("");
+
 const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่งช่วยราชการ;
 const filterKeyword = ref<string>(""); //คำค้นหารายการช่วยราชการ
 const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
@@ -182,7 +184,7 @@ const visibleColumns = ref<string[]>([
 async function getData() {
   showLoader();
   await http
-    .get(config.API.officerMain())
+    .get(config.API.officerMain() + `?status=${status.value}`)
     .then(async (res) => {
       const data = await res.data.result;
       rows.value = data;
@@ -268,7 +270,42 @@ onMounted(async () => {
   <q-card flat bordered class="col-12">
     <div class="row q-pa-md">
       <div class="col-12">
-        <div class="row col-12">
+        <div class="row">
+          <div class="col-2">
+            <q-select
+              :model-value="status ? status : 'ทั้งหมด'"
+              outlined
+              dense
+              label="สถานะ"
+              :options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              fill-input
+              use-input
+              hide-selected
+              bg-color="white"
+              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              @update:model-value="(value:string)=>{(status = value),getData()}"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+              <template v-if="status" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="(status = ''), getData()"
+                  class="cursor-pointer"
+                  style="opacity: 0.6"
+                />
+              </template>
+            </q-select>
+          </div>
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             @click="openModalOrder"

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

@@ -18,7 +18,8 @@ import Dialogbody from "@/modules/05_placement/components/Repatriate/DialogOrder
 
 const $q = useQuasar();
 const router = useRouter();
-const { statusText } = useTransferDataStore();
+const store = useTransferDataStore();
+const { statusText, filterOption } = useTransferDataStore();
 const {
   date2Thai,
   messageError,
@@ -31,6 +32,7 @@ const {
 } = useCounterMixin();
 
 const modal = ref<boolean>(false); //  ส่งไปออกคำสั่งส่งตัวกลับ
+const status = ref<string>("");
 
 //  Table
 const filterKeyword = ref<string>(""); //คำค้นหารายการส่งตัวกลับ
@@ -152,7 +154,7 @@ function openDetail(id: string) {
 async function getData() {
   showLoader();
   await http
-    .get(config.API.repatriationMain())
+    .get(config.API.repatriationMain()+`?status=${status.value}`)
     .then(async (res) => {
       const data = await res.data.result;
       rows.value = data;
@@ -231,7 +233,42 @@ onMounted(async () => {
   <q-card flat bordered class="col-12 q-mt-sm">
     <div class="row q-pa-md">
       <div class="col-12">
-        <div class="row col-12">
+        <div class="row">
+          <div class="col-2">
+            <q-select
+              :model-value="status ? status : 'ทั้งหมด'"
+              outlined
+              dense
+              label="สถานะ"
+              :options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              fill-input
+              use-input
+              hide-selected
+              bg-color="white"
+              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              @update:model-value="(value:string)=>{(status = value),getData()}"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+              <template v-if="status" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="(status = ''), getData()"
+                  class="cursor-pointer"
+                  style="opacity: 0.6"
+                />
+              </template>
+            </q-select>
+          </div>
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             flat

src/modules/05_placement/views/06_appointPromoteMain.vue

@@ -22,8 +22,8 @@ import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue"; // เ
 
 const $q = useQuasar();
 const router = useRouter();
-const storeFn = useTransferDataStore();
+const store = useTransferDataStore();
-const { statusText } = storeFn;
+const { statusText, filterOption } = useTransferDataStore();
 const {
   showLoader,
   hideLoader,
@@ -34,6 +34,8 @@ const {
   onSearchDataTable,
 } = useCounterMixin();
 
+const status = ref<string>("");
+
 const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่ง
 const modalTree = ref<boolean>(false); //แสดง popup  เลือกหน่วยงานที่แต่งตั้ง - เลื่อน - ย้าย
 const posType = ref<string>(""); //ประเภทตำแหน่ง
@@ -176,7 +178,7 @@ const pagination = ref({
 async function fecthlistappointment() {
   showLoader();
   await http
-    .get(config.API.appointmentMain())
+    .get(config.API.appointmentMain()+`?status=${status.value}`)
     .then((res) => {
       let response = res.data.result;
       listRecevice.value = response;
@@ -316,6 +318,41 @@ onMounted(async () => {
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12 q-col-gutter-sm">
+          <div class="col-2">
+            <q-select
+              :model-value="status ? status : 'ทั้งหมด'"
+              outlined
+              dense
+              label="สถานะ"
+              :options="store.statusOp"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              fill-input
+              use-input
+              hide-selected
+              bg-color="white"
+              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              @update:model-value="(value:string)=>{(status = value),fecthlistappointment()}"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+              <template v-if="status" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="(status = ''), fecthlistappointment()"
+                  class="cursor-pointer"
+                  style="opacity: 0.6"
+                />
+              </template>
+            </q-select>
+          </div>
           <div>
             <q-btn
               v-if="checkPermission($route)?.attrIsUpdate"

src/modules/05_placement/views/07_appointEmployeeMain.vue

@@ -20,8 +20,8 @@ import Dialogbody from "@/modules/05_placement/components/AppointEmployee/Dialog
 
 const $q = useQuasar();
 const router = useRouter();
-const storeFn = useTransferDataStore();
+const store = useTransferDataStore();
-const { statusText } = storeFn;
+const { statusText, filterOption } = useTransferDataStore();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const {
   showLoader,
@@ -33,6 +33,8 @@ const {
   onSearchDataTable,
 } = mixin;
 
+const status = ref<string>("");
+
 const personalId = ref<string>("");
 const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่ง
 const modalTree = ref<boolean>(false); //แสดง popup  เลือกหน่วยงานที่รับการปรับระดับชั้นงาน
@@ -173,7 +175,7 @@ const columns = ref<QTableProps["columns"]>([
 async function fecthlistappointment() {
   showLoader();
   await http
-    .get(config.API.appointEmployee())
+    .get(config.API.appointEmployee()+`?status=${status.value}`)
     .then(async (res) => {
       let response = await res.data.result;
       listRecevice.value = response;
@@ -314,7 +316,42 @@ onMounted(async () => {
   <q-card flat bordered class="col-12 q-mt-sm">
     <div class="row q-pa-md">
       <div class="col-12">
-        <div class="row col-12">
+        <div class="row">
+          <div class="col-2">
+            <q-select
+              :model-value="status ? status : 'ทั้งหมด'"
+              outlined
+              dense
+              label="สถานะ"
+              :options="store.statusOp"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              fill-input
+              use-input
+              hide-selected
+              bg-color="white"
+              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              @update:model-value="(value:string)=>{(status = value),fecthlistappointment()}"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+              <template v-if="status" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="(status = ''), fecthlistappointment()"
+                  class="cursor-pointer"
+                  style="opacity: 0.6"
+                />
+              </template>
+            </q-select>
+          </div>
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             @click="popup()"
@@ -528,7 +565,9 @@ onMounted(async () => {
   />
 
   <DialogOrgSelectEmployee
-    :title="`เลือกหน่วยงานที่รับ${typeModal !== 'MOVE'? `การปรับระดับชั้นงาน`:`ย้าย`}`"
+    :title="`เลือกหน่วยงานที่รับ${
+      typeModal !== 'MOVE' ? `การปรับระดับชั้นงาน` : `ย้าย`
+    }`"
     v-model:modal="modalTree"
     v-model:type="typeModal"
     :pos-type="posType"

src/modules/05_placement/views/08_otherMain.vue

@@ -19,8 +19,8 @@ import Dialogbody from "@/modules/05_placement/components/Other/DialogOrders.vue
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
-const storeFn = useTransferDataStore();
+const store = useTransferDataStore();
-const { statusText } = storeFn;
+const { statusText, filterOption } = useTransferDataStore();
 const {
   showLoader,
   hideLoader,
@@ -32,6 +32,7 @@ const {
 } = useCounterMixin();
 
 const modal = ref<boolean>(false);
+const status = ref<string>("");
 
 /** Table*/
 const rows = ref<listMain[]>([]); //รายการอื่นๆ
@@ -133,7 +134,7 @@ const pagination = ref({
 async function fecthlistOthet() {
   showLoader();
   await http
-    .get(config.API.otherMain())
+    .get(config.API.otherMain() + `?status=${status.value}`)
     .then((res) => {
       let response = res.data.result;
       rows.value = response;
@@ -221,7 +222,42 @@ onMounted(() => {
   <q-card flat bordered class="col-12 q-mt-sm">
     <div class="row q-pa-md">
       <div class="col-12">
-        <div class="row col-12">
+        <div class="row">
+          <div class="col-2">
+            <q-select
+              :model-value="status ? status : 'ทั้งหมด'"
+              outlined
+              dense
+              label="สถานะ"
+              :options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              fill-input
+              use-input
+              hide-selected
+              bg-color="white"
+              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              @update:model-value="(value:string)=>{(status = value),fecthlistOthet()}"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+              <template v-if="status" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="(status = ''), fecthlistOthet()"
+                  class="cursor-pointer"
+                  style="opacity: 0.6"
+                />
+              </template>
+            </q-select>
+          </div>
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             @click="popup()"

src/modules/06_retirement/views/06_dismissOrder.vue

@@ -18,7 +18,8 @@ import DialogSendToCommand from "@/modules/06_retirement/components/06_dismissOr
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const transferStore = useTransferDataStore();
+const store = useTransferDataStore();
+const { statusText, filterOption } = useTransferDataStore();
 const {
   date2Thai,
   messageError,
@@ -28,8 +29,9 @@ const {
   onSearchDataTable,
   dialogRemove,
 } = mixin;
-const { statusText } = transferStore;
+
 const modal = ref<boolean>(false);
+const status = ref<string>("WAITTING");
 
 /** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([
@@ -154,7 +156,7 @@ function openModalOrder() {
 async function getData() {
   showLoader();
   await http
-    .get(config.API.retirementOut+`/officer`)
+    .get(config.API.retirementOut + `/officer?status=${status.value}`)
     .then((res: any) => {
       const data = res.data.result;
       rows.value = data;
@@ -214,7 +216,42 @@ onMounted(async () => {
     <q-separator />
     <div class="row q-pa-md">
       <div class="col-12">
-        <div class="row col-12">
+        <div class="row">
+          <div class="col-2">
+            <q-select
+              :model-value="status ? status : 'ทั้งหมด'"
+              outlined
+              dense
+              label="สถานะ"
+              :options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              fill-input
+              use-input
+              hide-selected
+              bg-color="white"
+              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              @update:model-value="(value:string)=>{(status = value),getData()}"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+              <template v-if="status" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="(status = ''), getData()"
+                  class="cursor-pointer"
+                  style="opacity: 0.6"
+                />
+              </template>
+            </q-select>
+          </div>
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             @click="openModalOrder"

src/modules/06_retirement/views/08_dismissOrderEmp.vue

@@ -18,7 +18,8 @@ import DialogSendToCommand from "@/modules/06_retirement/components/06_dismissOr
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const transferStore = useTransferDataStore();
+const store = useTransferDataStore();
+const { statusText, filterOption } = useTransferDataStore();
 const {
   date2Thai,
   messageError,
@@ -28,8 +29,9 @@ const {
   onSearchDataTable,
   dialogRemove,
 } = mixin;
-const { statusText } = transferStore;
+
 const modal = ref<boolean>(false);
+const status = ref<string>("WAITTING");
 
 /** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([
@@ -154,7 +156,7 @@ function openModalOrder() {
 async function getData() {
   showLoader();
   await http
-    .get(config.API.retirementOut + `/employee`)
+    .get(config.API.retirementOut + `/employee?status=${status.value}`)
     .then((res: any) => {
       const data = res.data.result;
       rows.value = data;
@@ -216,7 +218,42 @@ onMounted(async () => {
     <q-separator />
     <div class="row q-pa-md">
       <div class="col-12">
-        <div class="row col-12">
+        <div class="row">
+          <div class="col-2">
+            <q-select
+              :model-value="status ? status : 'ทั้งหมด'"
+              outlined
+              dense
+              label="สถานะ"
+              :options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              fill-input
+              use-input
+              hide-selected
+              bg-color="white"
+              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              @update:model-value="(value:string)=>{(status = value),getData()}"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+              <template v-if="status" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="(status = ''), getData()"
+                  class="cursor-pointer"
+                  style="opacity: 0.6"
+                />
+              </template>
+            </q-select>
+          </div>
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             @click="openModalOrder"

src/modules/21_report/views/02_reportRegistry.vue

@@ -111,9 +111,9 @@ const retireTypeOpsMain = ref<DataOption[]>([
 
 const retireTypeOpsMainEMP = ref<DataOption[]>([
   { id: "RETIRE", name: "เกษียณ" },
-  { id: "RETIRE_RESIGN", name: "ลาออก" },
+  { id: "RETIRE_RESIGN_EMP", name: "ลาออก" },
   { id: "RETIRE_DECEASED", name: "ถึงแก่กรรม" },
-  { id: "RETIRE_RESIGN_EMP", name: "ให้ออกจากราชการ" },
+  { id: "RETIRE_OUT_EMP", name: "ให้ออกจากราชการ" },
 ]);
 
 const visibleColumns = ref<string[]>([