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

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

@@ -3,13 +3,21 @@ import { ref, useAttrs } from "vue";
 import { QTooltip, useQuasar } from "quasar";
 import { checkPermission } from "@/utils/permissions";
 
-import type { PersonData } from "@/modules/05_placement/interface/index/Main";
+import type {
+  PersonData,
+  optionData,
+} from "@/modules/05_placement/interface/index/Main";
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 
+const bmaOfficer = ref<string>('')
+const bmaOfficerOption = ref<optionData[]>([
+  { id: "OFFICER", name: "ขรก.กทม. สามัญ" },
+  { id: "EXTERNAL", name: "บุคคลภายนอก" },
+]);
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -117,6 +125,7 @@ const emit = defineEmits([
   "update:containfilter",
   "update-modaladdlist",
   "update-modaladdSendPerson",
+  "update-newRows",
 ]);
 
 function paginationLabel(start: string, end: string, total: string) {
@@ -160,11 +169,30 @@ function updateModaladdlist() {
 function openModalOrder() {
   emit("update-modaladdSendPerson", true);
 }
+
+/** ส่งรายชื่อไปยังหน่วยงาน */
+function onUpdateNewRows() {
+  emit("update-newRows", bmaOfficer.value);
+}
 </script>
 
 <template>
   <div class="q-px-md q-pb-md">
     <div class="col-12 row q-py-sm">
+      <q-select
+        outlined
+        dense
+        v-model="bmaOfficer"
+        :options="bmaOfficerOption"
+        emit-value
+        map-options
+        option-value="id"
+        option-label="name"
+        label="สถาณภาพ"
+        style="width: 200px"
+        @update:model-value="onUpdateNewRows"
+      >
+      </q-select>
       <q-btn
         v-if="roleAdmin === false"
         @click="openModalOrder()"