ui ออกคำสั่ง

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

@@ -3,9 +3,11 @@ import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import avatar from "@/assets/avatar_user.jpg";
+
+import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandMainStore } from "@/modules/18_command/store/Main";
-
+import { usePlacementDataStore } from "@/modules/05_placement/store";
 // import http from "@/plugins/http";
 // import config from "@/app.config";
 
@@ -19,6 +21,8 @@ import { options } from "@fullcalendar/core/preact";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const route = useRoute();
+const DataStore = usePlacementDataStore();
 const storeCommand = useCommandMainStore();
 const {
   showLoader,
@@ -40,10 +44,13 @@ const props = defineProps({
   rows: Array,
 });
 
+const examId = route.params.examId;
 const rows = ref<any[]>([]);
 const commandType = ref<string>("");
 const commandOp = ref<ListCommand[]>([]);
+const listCommand = ref<ListCommand[]>([]); // เก็บคำสั่งทั้งหมด
 const modalCommand = ref<boolean>(false); //เปิด-ปิด modal สร้างคำสั่ง
+
 //Table
 const selected = ref<ResponseData[]>([]); //รายชื่อที่เลือก
 const filter = ref<string>(""); //คำค้นหา
@@ -150,6 +157,20 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/**
+ * ฟิลเตอร์ คำสั่ง
+ * @param val ค่าจาก Input
+ * @param update Funtion quasar
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    commandType.value = val ? "" : commandType.value;
+    commandOp.value = listCommand.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
 /**
  * ฟังก์ชันยืนยันการออกคำสั่ง
  */
@@ -167,8 +188,27 @@ function saveOrder() {
 
 function filterSelectOrder() {
   const data = props.rows ? props.rows : [];
-  rows.value = data.filter((v: any) => v.code == commandType.value);
+  rows.value = data.filter((v: any) => {
+    switch (commandType.value) {
+      case "C-PM-01":
+      case "C-PM-02":
+        return v.typeCommand === "APPOINTED" && v.bmaOfficer === null;
+
+      case "C-PM-03":
+        return v.typeCommand === "APPOINT" && v.bmaOfficer !== null;
+
+      case "C-PM-04":
+        return v.typeCommand === "MOVE" && v.bmaOfficer !== null;
+
+      case "C-PM-06":
+        return v.typeCommand === "SLIP" && v.bmaOfficer !== null;
+
+      default:
+        return [];
+    }
+  });
 }
+
 /**
  * เมื่อ props.modal เป็น true
  *
@@ -180,10 +220,25 @@ watch(
     if (modal.value === true) {
       rows.value = props.rows ? props.rows : [];
       selected.value = [];
-      const data = await storeCommand.getCommandTypes();
-      commandOp.value = data.filter(
-        (v: any) => v.code == "C-PM-01" || v.code == "C-PM-02"
-      );
+      const status = DataStore.DataMainOrig.find((x: any) => x.id == examId);
+      if (status?.examTypeName !== "") {
+        const data = await storeCommand.getCommandTypes();
+
+        listCommand.value = data.filter(
+          (v: any) =>
+            (status?.examTypeName === "สอบแข่งขัน" &&
+              (v.code === "C-PM-01" ||
+                v.code === "C-PM-03" ||
+                v.code === "C-PM-04" ||
+                v.code === "C-PM-06")) ||
+            ((status?.examTypeName === "สอบคัดเลือก" ||
+              status?.examTypeName === "คัดเลือกคนพิการ") &&
+              (v.code === "C-PM-02" ||
+                v.code === "C-PM-03" ||
+                v.code === "C-PM-04" ||
+                v.code === "C-PM-06"))
+        );
+      }
     }
   }
 );
@@ -205,9 +260,19 @@ watch(
             option-value="code"
             emit-value
             map-options
-            style="width: 200px; max-width: auto"
+            use-input
+            style="width: 350px; max-width: auto"
             @update:model-value="filterSelectOrder"
-          ></q-select>
+            @filter="(inputValue:any,
+                    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
+          >
           <q-space />
           <q-input
             borderless

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

@@ -96,6 +96,7 @@ onMounted(async () => {
   title.value = examData.value == null ? null : examData.value.examRound;
   round.value = examData.value == null ? null : examData.value.examOrder;
   year.value = examData.value == null ? null : examData.value.fiscalYear;
+
 });
 </script>
 <template>