เพิ่ม filter ตามตำแหน่งที่สอบ บรรจุ

src/modules/05_placement/components/PersonalList/Table.vue

@@ -14,6 +14,7 @@ import avatar from "@/assets/avatar_user.jpg";
 import type { PartialTableName } from "@/modules/05_placement/interface/request/placement";
 import type { QTableProps } from "quasar";
 import type { DataList } from "@/modules/05_placement/interface/response/SelectOrg";
+import type { optionData } from "@/modules/05_placement/interface/index/Main";
 
 import DialogSelectOrg from "@/modules/05_placement/components/PersonalList/DialogSelectOrg.vue";
 import Table from "@/modules/05_placement/components/PersonalList/TableView.vue";
@@ -96,6 +97,8 @@ const dataInfo = reactive({
   reliefDoc: "",
 });
 
+const positionCandidateData = ref<optionData[]>([{ id: "", name: "ทั้งหมด" }]);
+
 const examId = route.params.examId;
 const examIdString = Array.isArray(examId) ? examId[0] : examId;
 const personalId = ref<string>("");
@@ -167,6 +170,9 @@ const columns = ref<QTableProps["columns"]>([
     field: "organizationName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.root} (${row.rootShortName}) ${row.nodeName} (${row.nodeShortName}${row.posMasterNo}) `;
+    },
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -261,25 +267,6 @@ function convertContainStatus(val: string) {
   }
 }
 
-// /**
-//  * แปลงสถานะ
-//  * @param val type
-//  */
-// function convertTypeCommand(val: string) {
-//   switch (val) {
-//     case "APPOINTED":
-//       return "บรรจุแต่งตั้ง";
-//     case "APPOINT":
-//       return "แต่งตั้ง/ย้าย";
-//     // case "SLIP":
-//     //   return "เลื่อน";
-//     // case "MOVE":
-//     //   return "ย้าย";
-//     default:
-//       return "";
-//   }
-// }
-
 /**
  * แปลงสถานะการส่งรายชื่อ
  * @param val true/false
@@ -295,9 +282,7 @@ function convertDraft(val: boolean) {
   }
 }
 
-/**
+/**เรียกข้อมูลรายชื่อผู้สอบผ่าน*/
- * เรียกข้อมูลรายชื่อผู้สอบผ่าน
- */
 async function getTable() {
   showLoader();
   await http
@@ -387,14 +372,14 @@ async function getTable() {
           rowsAll.value.push(rowData);
         });
 
-      // รายชื่อทั้งหมด
+      const rowData = await (roleAdmin.value
-      rows.value = await (roleAdmin.value
         ? rowsAll.value
         : rowsAll.value.filter((x: any) => x.statusId !== "DONE"));
 
-      rowsAwait.value = await (roleAdmin.value
+      // รายชื่อทั้งหมด
-        ? rowsAll.value
+      await filterpositionCandidate(rowData);
-        : rowsAll.value.filter((x: any) => x.statusId !== "DONE"));
+      rows.value = rowData;
+      rowsAwait.value = rowData;
 
       // รายชื่อไปยังหน่วยงาน
       rowsFilter.value = await rows.value.filter(
@@ -409,19 +394,36 @@ async function getTable() {
           e.nodeName !== null &&
           e.reportingDate !== null
       );
-      DataStore.checkLoad(1);
+      await DataStore.checkLoad(1);
       // insertAvatar(rows.value);
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
-    .finally(async () => {});
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-/**
+async function filterpositionCandidate(data: any) {
- * ยืนยันการผ่อนผัน
+  positionCandidateData.value = [{ id: "", name: "ทั้งหมด" }];
- */
+  const newData = data
+    .map((e: any) => ({
+      id: e.positionCandidate,
+      name: e.positionCandidate,
+    }))
+    .filter((e: any) => e.id !== null && e.id !== 0);
+  // กรองค่าซ้ำ
+  const uniqueData = newData.filter(
+    (item: any, index: number, arr: any) =>
+      arr.findIndex((e: any) => e.id === item.id) === index
+  );
+  positionCandidateData.value.push(...uniqueData);
+
+  console.log(positionCandidateData.value);
+}
+
+/** ยืนยันการผ่อนผัน*/
 async function saveDeferment() {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -434,9 +436,7 @@ async function saveDeferment() {
     }
   });
 }
-/**
+/** post ผ่อนผัน*/
- * post ผ่อนผัน
- */
 async function postDeferment() {
   showLoader();
   const formData = new FormData();
@@ -459,9 +459,7 @@ async function postDeferment() {
     });
 }
 
-/**
+/** ยืนยันการสละสิทธิ์*/
- * ยืนยันการสละสิทธิ์
- */
 async function saveDisclaim() {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -475,9 +473,7 @@ async function saveDisclaim() {
   });
 }
 
-/**
+/** post การสละสิทธิ์*/
- * post การสละสิทธิ์
- */
 async function postDisclaimf() {
   showLoader();
   const dataPost = {
@@ -500,16 +496,12 @@ async function postDisclaimf() {
     });
 }
 
-/** เ
+/** เปิด dialog*/
- * ปิด dialog
- */
 function clickEditRow() {
   editRow.value = true;
 }
 
-/**
+/** เปลี่ยน class true/false*/
- * เปลี่ยน class true/false
- */
 function getClass(val: boolean) {
   return {
     "full-width inputgreen cursor-pointer ": val,
@@ -595,18 +587,14 @@ function openAppointModal(pid: string, data: DataList) {
   modalDialogSelectOrg.value = !modalDialogSelectOrg.value;
 }
 
-/**
+/** close dialog*/
- * close dialog
- */
 async function clickCloseModalTree() {
   await getTable();
   appointModal.value = false;
   props.statCard();
 }
 
-/**
+/** validate*/
- * validate
- */
 async function validateData() {
   checkValidate.value = true;
   await myForm.value.validate().then((result: boolean) => {
@@ -616,16 +604,12 @@ async function validateData() {
   });
 }
 
-/**
+/** ปิด dialog*/
- * ปิด dialog
- */
 function clickCloseSendModal() {
   modaladdlist.value = false;
 }
 
-/**
+/** validate*/
- * validate
- */
 async function clickClose() {
   userNote.value = "";
   if (editRow.value == true) {
@@ -648,9 +632,7 @@ async function clickClose() {
   }
 }
 
-/**
+/** ยืนยันส่งรายชื่อไปหน่วยงาน*/
- * ยืนยันส่งรายชื่อไปหน่วยงาน
- */
 function savelist() {
   selected.value.map((e: any) => {
     personal_selected.value.push(e.personalId);
@@ -774,28 +756,30 @@ function openModalOrder(val: boolean) {
   modalOrder.value = val;
 }
 
-function onUpdateNewRows(val: string) {
+function onUpdateNewRows(type: string, pos: string) {
-  const data = rowsAwait.value;
+  const data = onSearchDataTable(
-  if (val !== "") {
+    filter.value,
-    rows.value = data.filter((item: any) => {
+    rowsAwait.value,
-      if (val === "EXTERNAL") {
+    columns.value ? columns.value : []
-        return item.bmaOfficerCheck === null;
+  );
-      } else if (val === "OFFICER") {
-        return item.bmaOfficerCheck === "OFFICER";
-      }
-    });
-  } else {
-    rows.value = data;
-  }
-}
 
-watch(containStatus, () => {
+  rows.value = data.filter((item: any) => {
-  if (containStatus.value) {
+    const isTypeMatch =
-    rows.value = rowsAll.value.filter((x: any) => x.statusId == "DONE");
+      type === "OFFICER"
-  } else {
+        ? item.bmaOfficerCheck === "OFFICER"
-    rows.value = rowsAll.value.filter((x: any) => x.statusId != "DONE");
+        : type === "EXTERNAL"
-  }
+        ? item.bmaOfficerCheck === null
-});
+        : item.bmaOfficerCheck === "OFFICER" || item.bmaOfficerCheck === null;
+
+    const isPositionMatch = pos === "" || item.positionCandidate === pos;
+
+    const isStatusMatch = containStatus.value
+      ? item.statusId === "DONE"
+      : item.statusId !== "";
+
+    return isTypeMatch && isPositionMatch && isStatusMatch;
+  });
+}
 
 async function getWorkFlow() {
   showLoader();
@@ -848,11 +832,11 @@ function onSearch() {
 }
 
 function onSearchAdd() {
-  rowsFilter.value = onSearchDataTable(
+  // rowsFilter.value = onSearchDataTable(
-    filterlistAdd.value,
+  //   filterlistAdd.value,
-    rowsFilterData.value,
+  //   rowsFilterData.value,
-    columns.value ? columns.value : []
+  //   columns.value ? columns.value : []
-  );
+  // );
 }
 
 onMounted(async () => {
@@ -881,6 +865,7 @@ onMounted(async () => {
       :saveNoDraft="true"
       :role-admin="roleAdmin"
       :display-add="displayAdd"
+      :position-candidate-data="positionCandidateData"
       row-key="fullname"
     >
       <template #columns="props">

src/modules/05_placement/components/PersonalList/TableView.vue

@@ -3,10 +3,9 @@ import { ref, useAttrs } from "vue";
 import { QTooltip, useQuasar } from "quasar";
 import { checkPermission } from "@/utils/permissions";
 
-import type {
+import type { PropType } from "vue";
-  PersonData,
+import type { optionData } from "@/modules/05_placement/interface/index/Main";
-  optionData,
+
-} from "@/modules/05_placement/interface/index/Main";
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
@@ -19,6 +18,10 @@ const bmaOfficerOption = ref<optionData[]>([
   { id: "OFFICER", name: "ขรก.กทม. สามัญ" },
   { id: "EXTERNAL", name: "บุคคลภายนอก" },
 ]);
+
+const positionCandidate = ref<string>("");
+const positionCandidateOptions = ref<optionData[]>([]);
+
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -35,6 +38,10 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
+  positionCandidateData: {
+    type: Array as PropType<optionData[]>,
+    defualt: [],
+  },
   saveNoDraft: {
     type: Boolean,
     defualt: false,
@@ -138,7 +145,7 @@ function paginationLabel(start: string, end: string, total: string) {
   else return start + "-" + end + " ใน " + total;
 }
 
-/**
+/**.value
  * update ค่าที่ค้นหา
  * @param value string
  */
@@ -157,12 +164,7 @@ function updateVisible(value: any) {
  */
 function updateContain(value: any) {
   emit("update:containfilter", value);
-}
+  onUpdateNewRows();
-
-/** reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา */
-function resetFilter() {
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
 }
 
 /** ส่งรายชื่อไปยังหน่วยงาน */
@@ -177,27 +179,77 @@ function openModalOrder() {
 
 /** ส่งรายชื่อไปยังหน่วยงาน */
 function onUpdateNewRows() {
-  emit("update-newRows", bmaOfficer.value);
+  emit("update-newRows", bmaOfficer.value, positionCandidate.value);
+}
+
+/**
+ * ฟังชั่นฟิลเตอร์ input
+ * @param val input
+ * @param update Function quasar
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    positionCandidateOptions.value =
+      props?.positionCandidateData?.filter(
+        (v: optionData) => v.name.indexOf(val) > -1
+      ) || [];
+  });
 }
 </script>
 
 <template>
   <div class="q-px-md q-pb-md">
     <div class="col-12 row q-py-sm">
-      <q-select
+      <div class="row q-col-gutter-sm">
-        outlined
+        <q-select
-        dense
+          outlined
-        v-model="bmaOfficer"
+          dense
-        :options="bmaOfficerOption"
+          v-model="bmaOfficer"
-        emit-value
+          :options="bmaOfficerOption"
-        map-options
+          emit-value
-        option-value="id"
+          map-options
-        option-label="name"
+          option-value="id"
-        label="สถานภาพ"
+          option-label="name"
-        style="width: 200px"
+          label="สถานภาพ"
-        @update:model-value="onUpdateNewRows"
+          :clearable="bmaOfficer !== ''"
-      >
+          style="width: 200px"
-      </q-select>
+          @update:model-value="onUpdateNewRows"
+          @clear="bmaOfficer = ''"
+        >
+        </q-select>
+
+        <q-select
+          outlined
+          dense
+          v-model="positionCandidate"
+          :options="positionCandidateOptions"
+          emit-value
+          map-options
+          option-value="id"
+          option-label="name"
+          label="ตำแหน่งที่สอบ"
+          style="width: 250px"
+          hide-selected
+          fill-input
+          use-input
+          :clearable="positionCandidate !== ''"
+          @clear="
+            (positionCandidate = ''),
+              (positionCandidateOptions = positionCandidateData || []),
+              onUpdateNewRows()
+          "
+          @update:model-value="onUpdateNewRows"
+          @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn
+                      ) "
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+      </div>
       <div>
         <q-btn
           flat
@@ -241,17 +293,9 @@ function onUpdateNewRows() {
           placeholder="ค้นหา"
           style="max-width: 200px"
           class="q-ml-sm"
-          @keydown.enter="onSearch"
+          @keydown.enter="onUpdateNewRows"
         >
-          <template v-slot:append>
+          <template v-slot:append> </template>
-            <q-icon name="search" />
-            <!-- <q-icon
-              v-if="inputfilter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            /> -->
-          </template>
         </q-input>
         <!-- แสดง table ใน คอลัมน์ -->
         <q-select

src/modules/05_placement/store.ts

@@ -193,7 +193,7 @@ export const usePlacementDataStore = defineStore("placement", () => {
   };
 
   let count = 0; // ตัวแปรนับจำนวนค่าที่รับ
-  function checkLoad(val: number) {
+  async function checkLoad(val: number) {
     count += val;
     DataMainOrig.value.length == 0;
     if (count >= 2) {