เลือกหน่วยงานที่รับบรรจุ

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, watch } from "vue";
 /** importType*/
 import type { QTableProps } from "quasar";
 
@@ -8,30 +8,38 @@ import type { DataPositionNo } from "@/modules/05_placement/interface/index/Sele
 
 import { useCounterMixin } from "@/stores/mixin";
 
-const { date2Thai } = useCounterMixin();
+const { date2Thai, showLoader, hideLoader } = useCounterMixin();
 
 const selected = defineModel("selectedPos", { required: true });
 const positionId = defineModel<string>("positionId", { required: true });
+const seletcId = defineModel<string>("seletcId", { required: true });
 const date = defineModel<Date>("datePos", { required: true });
-const props = defineProps({
-  position: {
-    type: Array(),
-    require: true,
-  },
-});
+const positionData = defineModel<any>("position", { required: true });
+// const props = defineProps({
+//   position: {
+//     type: Array(),
+//     require: true,
+//   },
+// });
 
 // const positionId = ref<string>("");
 const filters = ref<string>("");
 const rowsPosition = ref<Positions[]>([]);
 
-function onClickSelectPos(id: string) {
+async function onClickSelectPos(id: string) {
   positionId.value = id;
   selected.value = [];
-  const position: DataPositionNo = props.position?.find(
+
+  const position: DataPositionNo = positionData.value.find(
     (e: DataPositionNo) => e.id === id
   );
   if (position) {
-    rowsPosition.value = position.positions;
+    rowsPosition.value = await position.positions;
+    if (seletcId.value) {
+      selected.value = rowsPosition.value.filter(
+        (e) => e.id === seletcId.value
+      );
+    }
   }
 }
 
@@ -186,6 +194,18 @@ const visibleColumns = ref<string[]>([
   "posLevelName",
   "positionIsSelected",
 ]);
+
+onMounted(async () => {
+  if (positionId.value) {
+    showLoader();
+    setTimeout(async () => {
+      await onClickSelectPos(positionId.value);
+      await setTimeout(() => {
+        hideLoader();
+      }, 500);
+    }, 500);
+  }
+});
 </script>
 <template>
   <div class="column q-col-gutter-sm" style="height: 70vh">
@@ -230,7 +250,7 @@ const visibleColumns = ref<string[]>([
           <d-table
             ref="table"
             :columns="columns"
-            :rows="props.position"
+            :rows="positionData"
             :filter="filters"
             row-key="id"
             flat
@@ -285,7 +305,7 @@ const visibleColumns = ref<string[]>([
     </div>
 
     <!-- เลือกตำแหน่ง -->
-    <div class="col-5" v-if="positionId !== ''">
+    <div class="col-5">
       <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
         <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
           เลือกตำแหน่ง
@@ -300,7 +320,7 @@ const visibleColumns = ref<string[]>([
           transition-next="jump-up"
         >
           <q-tab-panel
-            v-for="(item, index) in props.position"
+            v-for="(item, index) in positionData"
             :key="index"
             :name="item.id"
           >
@@ -410,17 +430,6 @@ const visibleColumns = ref<string[]>([
                     </q-td>
                   </q-tr>
                 </template>
-                <!-- <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="reqMaster.page"
-                active-color="primary"
-                color="dark"
-                :max="totalPage"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </template> -->
               </d-table>
             </div>
           </q-tab-panel>