UI บรรจุแต่งตั้ง รายชื่อผู้สอบผ่าน popup เลือกหน่วยงาน และ filter คนหน้ารายชื่อตามสถานภาพ

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

@@ -3,8 +3,13 @@ import { ref, onMounted, watch } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type { Positions } from "@/modules/05_placement/interface/response/SelectOrg";
+import type {
+  Positions,
+  FormPosType,
+  FormPosLevel,
+} from "@/modules/05_placement/interface/response/SelectOrg";
 import type { DataPositionNo } from "@/modules/05_placement/interface/index/SelectOrg";
+import { useSelectOrgStore } from "@/modules/05_placement/stores/storeSelect";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -12,6 +17,8 @@ import { useCounterMixin } from "@/stores/mixin";
 /** use*/
 const { date2Thai } = useCounterMixin();
 
+const store = useSelectOrgStore();
+
 /** props*/
 const selected = defineModel("selectedPos", { required: true }); //ตำแหน่งที่เลือก
 const positionId = defineModel<string>("positionId", { required: true }); //id ตำแหน่งที่เลือก
@@ -20,9 +27,25 @@ const date = defineModel<Date>("datePos", { required: true }); //วันยท
 const positionData = defineModel<any[]>("position", { required: true }); //ข้อมูลรายการตำแหน่งเลขที่
 const isAll = defineModel<boolean>("isAll", { required: true }); //แสดงตำแหน่งทั้งหมด
 const isBlank = defineModel<boolean>("isBlank", { required: true }); //แสดงเฉพาะตำแหน่งว่าง
+const isPosition = defineModel<boolean>("isPosition", { required: true });
+const isPositionOld = defineModel<boolean>("isPositionOld", { required: true }); //แสดงตำแหน่งที่ตรงกับประเภทและระดับเดิม
+const posType = defineModel<FormPosType>("posType", { required: true }); //ประเภทตำแหน่ง
+const posLevel = defineModel<string>("posLevel", { required: true }); //ระดับตำแหน่ง
+const optionPosType = defineModel<FormPosType[]>("optionPosType", {
+  required: true,
+});
+const optionPosLevel = defineModel<FormPosLevel[]>("optionPosLevel", {
+  required: true,
+});
 
 const positionRows = ref<DataPositionNo[]>(positionData.value);
-const isPosition = ref<boolean>(true);
+
+const props = defineProps({
+  fetchDataTable: Function,
+  onPosType: Function,
+  nodeId: String,
+  nodeLevel: Number,
+});
 
 //Table
 const filters = ref<string>(""); //คำค้นหา
@@ -196,26 +219,22 @@ async function onClickSelectPos(id: string) {
   }
 }
 
-/**
- * function ค้นหาตำแหน่งตามการเลือกแสดงเฉพาะตำแหน่งที่ตรงกับการสอบ
- */
-async function fetchIsPosition() {
-  // ถ้าเลือกแสดงเฉพาะตำแหน่งที่ตรงกับการสอบ ระบบจะ filter เลือกเฉพาะข้อมูลที่ตรงกับการสอบ
-  if (isPosition.value) {
-    const lists = await positionData.value.filter(
-      (e: any) => e.isPosition === true
-    );
-    positionRows.value = lists;
-  }
-  // ถ้าไม่ได้เลือกระบบจะแสดงตำแหน่งทั้งหมด
-  else {
-    positionRows.value = positionData.value;
+function onPositionOld() {
+  props.fetchDataTable?.(props.nodeId, props.nodeLevel);
+  if (isPositionOld.value == false) {
+    posType.value.id = "";
+    posType.value.posTypeName = "";
+    posType.value.posTypeRank = null;
+    posType.value.posLevels = [];
+    posLevel.value = "";
   }
 }
 
 // เช็คว่าถ้ามีการปรับ filter ระบบจะนำข้อมูลไปเช็ค filter แสดงเฉพาะตำแหน่งที่ตรงกับการสอบใหม่อีกครั้ง
 watch(positionData, (newVal, oldVal) => {
-  if (newVal != oldVal) fetchIsPosition();
+  if (newVal != oldVal) {
+    positionRows.value = positionData.value;
+  }
 });
 
 /**
@@ -227,7 +246,7 @@ onMounted(async () => {
       await onClickSelectPos(positionId.value);
     }, 1000);
   } else {
-    fetchIsPosition();
+    positionRows.value = positionData.value;
   }
 });
 </script>
@@ -255,7 +274,9 @@ onMounted(async () => {
             v-model="isPosition"
             label="แสดงเฉพาะตำแหน่งที่ตรงกับการสอบ"
             color="primary"
-            @update:model-value="fetchIsPosition"
+            @update:model-value="
+              props.fetchDataTable?.(props.nodeId, props.nodeLevel)
+            "
           >
             <q-tooltip>แสดงเฉพาะตำแหน่งที่ตรงกับการสอบ</q-tooltip>
           </q-checkbox>
@@ -271,6 +292,54 @@ onMounted(async () => {
             >
           </q-checkbox>
         </div>
+        <div class="col-12">
+          <div class="row q-gutter-sm no-wrap">
+            <div>
+              <q-checkbox
+                keep-color
+                v-model="isPositionOld"
+                label="แสดงตำแหน่งที่ตรงกับประเภทและระดับเดิม"
+                color="primary"
+                @update:model-value="onPositionOld"
+              >
+                <q-tooltip>แสดงตำแหน่งที่ตรงกับประเภทและระดับเดิม</q-tooltip>
+              </q-checkbox>
+            </div>
+
+            <div class="col-3">
+              <q-select
+                v-if="isPositionOld"
+                v-model="posType"
+                :options="optionPosType"
+                option-label="posTypeName"
+                label="ประเภทตำแหน่ง"
+                dense
+                outlined
+                @update:model-value="props.onPosType?.()"
+              >
+              </q-select>
+            </div>
+            <div class="col-3">
+              <q-select
+                v-if="isPositionOld"
+                :readonly="posType == null"
+                v-model="posLevel"
+                :options="optionPosLevel"
+                option-label="posLevelName"
+                option-value="posLevelName"
+                label="ระดับตำแหน่ง"
+                dense
+                outlined
+                emit-value
+                map-options
+                @update:model-value="
+                  props.fetchDataTable?.(props.nodeId, props.nodeLevel)
+                "
+              >
+              </q-select>
+            </div>
+          </div>
+        </div>
         <div class="col-12 q-pa-md">
           <q-toolbar style="padding: 0px">
             <q-space />