แก้เลือกซ้ำ

src/modules/05_placement/components/probation/FormAssign.vue

@@ -109,6 +109,9 @@ const OPresourse = ref<
 const OPknowledge = ref<
   Array<{ id: number; title: number; description: string; level: string }>
 >([]);
+const OPknowledgeMain = ref<
+  Array<{ id: number; title: number; description: string; level: string }>
+>([]);
 const OPcaretaker = ref<
   Array<{
     id: string;
@@ -861,8 +864,10 @@ async function getAssign() {
     chairman.value = data.chairman;
     commander.value = data.commander;
     knowledge.value = data.knowledges.map((opItem: any) => {
-      return OPknowledge.value.find((dataItem: any) => dataItem.id === opItem.id);
-    })
+      return OPknowledge.value.find(
+        (dataItem: any) => dataItem.id === opItem.id
+      );
+    });
 
     knowledgeCount.value = data.knowledges.length;
     other_desc.value = data.assign.other_desc;
@@ -951,13 +956,6 @@ watch(
   }
 );
 
-/** เช็ค ความรู้ทักษะ ไม่สามารถเลือก หัวข้อซ้ำ */
-watch(knowledge.value, () => {
-  knowledge.value.forEach((item) => {
-    OPknowledge.value = OPknowledge.value.filter((e) => e.id != item.id);
-  });
-});
-
 /**
  * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
  * @param val รับค่า input
@@ -1051,6 +1049,22 @@ function filterFnChairman(val: string, update: any) {
     });
   }
 }
+/**
+ * ฟิลเตอร์ผู้ดูเเลตาม ที่กรอก
+ * @param val รับค่า input
+ * @param update fn
+ */
+
+function filterFnKnowledge(val: string, update: any) {
+  const selectedIds = knowledge.value.map((item) => item.id);
+  const dataFilter = OPknowledge.value.filter(
+    (item) => !selectedIds.includes(item.id)
+  );
+
+  update(() => {
+    OPknowledgeMain.value = dataFilter;
+  });
+}
 
 /** เมื่อโหลดหน้า เรียกใช้งานฟังชั่น */
 onMounted(async () => {
@@ -1526,7 +1540,7 @@ onMounted(async () => {
                               : []
                           "
                           hide-bottom-space
-                          :options="OPknowledge"
+                          :options="OPknowledgeMain"
                           class="bg-white"
                           :readonly="isEdit != true"
                           dense
@@ -1536,6 +1550,7 @@ onMounted(async () => {
                           :label="`ความรู้ความสามารถในการปฏิบัติงาน ${
                             index + 1
                           }`"
+                          @filter="filterFnKnowledge"
                         />
                       </div>
                       <div