API เรื่องร้องเรียน

src/components/Dialogs/AddPersonal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted,watch } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
@@ -8,6 +8,48 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogConfirm, dialogMessageNotify } = mixin;
 
+const data = [
+    {
+      id: "001",
+      idcard: "0000000000001",
+      prefix: "นาง",
+      firstName: "ศิรินภา",
+      lastName: "คงน้อย",
+      posNo: "สกก.1",
+      position: "ตำเเหน่ง1",
+      positionLevel: "level1",
+      salary: "100",
+      organization: "สำนักงาน 1",
+      name: "นางศิรินภา คงน้อย",
+    },
+    {
+      id: "002",
+      idcard: "0000000000002",
+      prefix: "นาย",
+      firstName: "แก้ว",
+      lastName: "คำ",
+      posNo: "สกก.1",
+      position: "ตำแหน่ง2",
+      positionLevel: "level2",
+      salary: "100",
+      organization: "สำนักงาน 2",
+      name: "นางแก้ว คำ",
+    },
+    {
+      id: "003",
+      idcard: "0000000000003",
+      prefix: "นาย",
+      firstName: "ภัทรานุย",
+      lastName: "คงนอย",
+      posNo: "สกก.1",
+      position: "ตำแหน่ง2",
+      positionLevel: "level3",
+      salary: "100",
+      organization: "สำนักงาน 3",
+      name: "นางภัทรานุย คงนอย",
+    },
+  ];
+
 interface typeOp {
   id: string;
   name: string;
@@ -23,7 +65,7 @@ interface tableType {
   positionLevel: string;
   organization: string;
   salary: string;
-  fullName: string;
+  name: string;
 }
 
 const rows = ref<tableType[]>([]);
@@ -43,7 +85,7 @@ const visibleColumns = ref<string[]>([
   "no",
   "idcard",
   "fullName",
-  "positionNo",
+  "posNo",
   "position",
   "positionLevel",
   "salary",
@@ -80,11 +122,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "positionNo",
+    name: "posNo",
     align: "left",
     label: "ตำแหน่งเลขที่",
     sortable: true,
-    field: "positionNo",
+    field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -128,6 +170,10 @@ const columns = ref<QTableProps["columns"]>([
 
 /** รับค่ามาจาก หน้าหลัก */
 const props = defineProps({
+  checkId:{
+    type:Array,
+    default:[]
+  },
   modal: {
     type: Boolean,
     default: false,
@@ -206,50 +252,17 @@ function updateSelect() {
   search.value = "";
 }
 
+watch(() => props.modal, () => {
+  if (props.modal === true) {
+    console.log(props.checkId);
+    const dataProps = props.checkId.map((item: any) => item.idcard);
+    const dataMapId = data.filter((item: any) => !dataProps.includes(item.idcard));
+    rows.value = dataMapId
+  }
+});
+
 /** เรียกข้อมูลเมื่อเริ่มโหลด หน้า dialog mock */
 onMounted(() => {
-  const data = [
-    {
-      id: "001",
-      idcard: "0000000000001",
-      prefix: "นาง",
-      firstName: "ศิรินภา",
-      lastName: "คงน้อย",
-      positionNo: "สกก.1",
-      position: "ตำเเหน่ง1",
-      positionLevel: "level1",
-      salary: "100",
-      organization: "สำนักงาน 1",
-      fullName: "นางศิรินภา คงน้อย",
-    },
-    {
-      id: "002",
-      idcard: "0000000000002",
-      prefix: "นาย",
-      firstName: "แก้ว",
-      lastName: "คำ",
-      positionNo: "สกก.1",
-      position: "ตำแหน่ง2",
-      positionLevel: "level2",
-      salary: "100",
-      organization: "สำนักงาน 2",
-      fullName: "นางแก้ว คำ",
-    },
-    {
-      id: "003",
-      idcard: "0000000000003",
-      prefix: "นาย",
-      firstName: "ภัทรานุย",
-      lastName: "คงนอย",
-      positionNo: "สกก.1",
-      position: "ตำแหน่ง2",
-      positionLevel: "level3",
-      salary: "100",
-      organization: "สำนักงาน 3",
-      fullName: "นางภัทรานุย คงนอย",
-    },
-  ];
-
   dataObject.value = data;
   rows.value = data;
 });