เพิ่ม filter รายการบันทึกเวียนแจ้งการถึงแก่กรรม

src/modules/06_retirement/interface/response/Deceased.ts

@@ -108,6 +108,33 @@ interface TreeMain {
   totalRootPositionNextUse: number;
   totalRootPositionNextVacant: number;
 }
+
+interface ResponseDececased {
+  child1: string;
+  child1ShortName: string;
+  child2: string;
+  child2ShortName: string;
+  child3: string;
+  child3ShortName: string;
+  child4: string;
+  child4ShortName: string;
+  citizenId: string;
+  createdAt: string;
+  firstName: string;
+  id: string;
+  isActive: boolean;
+  lastName: string;
+  posLevelName: string;
+  posMasterNo: number;
+  posTypeName: string;
+  position: string;
+  prefix: string;
+  profileId: string;
+  profileType: string;
+  root: string;
+  rootShortName: string;
+}
+
 export type {
   requestSendNoti,
   DataCopyOrder,
@@ -116,4 +143,5 @@ export type {
   FormActive,
   OrgTree,
   TreeMain,
+  ResponseDececased,
 };

src/modules/06_retirement/views/05_deceased.vue

@@ -9,6 +9,9 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
 
+import type { DataOption } from "@/modules/06_retirement/interface/index/Main";
+import type { ResponseDececased } from "@/modules/06_retirement/interface/response/Deceased";
+
 /** Use */
 const $q = useQuasar();
 const router = useRouter();
@@ -23,8 +26,8 @@ const {
 } = mixin;
 
 /** คอลัมน์ */
-const rows = ref<any[]>([]);
-const rowsData = ref<any[]>([]);
+const rows = ref<ResponseDececased[]>([]);
+const rowsData = ref<ResponseDececased[]>([]);
 const pagination = ref({
   sortBy: "createdAt",
   descending: true,
@@ -126,8 +129,6 @@ const columns = ref<QTableProps["columns"]>([
     format: (val) => date2Thai(val),
   },
 ]);
-
-/** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
@@ -140,6 +141,13 @@ const visibleColumns = ref<string[]>([
   "profileType",
 ]);
 
+const employeeClass = ref<string>("");
+const employeeClassOp = ref<DataOption[]>([
+  { id: "", name: "ทั้งหมด" },
+  { id: "OFFICER", name: "ขรก.กทม. สามัญ" },
+  { id: "EMPLOYEE", name: "ลูกจ้างประจำ กทม." },
+]);
+
 /**เรียกข้อมูลจาก APi */
 async function fectListDecased() {
   showLoader();
@@ -147,6 +155,8 @@ async function fectListDecased() {
     .get(config.API.listDeceased())
     .then((res) => {
       const data = res.data.result;
+      console.log(data);
+
       rows.value = data;
       rowsData.value = data;
     })
@@ -172,6 +182,12 @@ function onSearch() {
     rowsData.value,
     columns.value ? columns.value : []
   );
+
+  if (employeeClass.value) {
+    rows.value = rows.value.filter(
+      (e: ResponseDececased) => e.profileType === employeeClass.value
+    );
+  }
 }
 
 /**Hook */
@@ -188,6 +204,24 @@ onMounted(() => {
     <div class="col-12 row q-pa-md">
       <div class="row col-12 q-col-gutter-sm">
         <div class="row col-12">
+          <div>
+            <q-select
+              outlined
+              dense
+              v-model="employeeClass"
+              :options="employeeClassOp"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              label="สถานภาพ"
+              :clearable="employeeClass !== ''"
+              style="width: 200px"
+              @clear="employeeClass = ''"
+              @update:model-value="onSearch"
+            >
+            </q-select>
+          </div>
           <q-space />
           <div class="row q-col-gutter-sm">
             <q-input