เพิม่ปุ่มลบ ประวัติการศึกษา

src/modules/01_exam/components/Form/Education.vue

@@ -2,14 +2,17 @@
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <q-form ref="myForm">
-      <ProfileTable
+      <Table
         :rows="rows"
         :columns="columns"
         :filter="filter"
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
+        v-model:editvisible="edit"
         :add="clickAdd"
+        :edit="clickEdit"
+        :cancel="clickCancel"
         :nameHeader="false"
         :addData="addData"
       >
@@ -29,9 +32,20 @@
                 {{ col.value }}
               </div>
             </q-td>
+            <q-td auto-width v-if="edit === true">
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-trash-can-outline"
+                @click="clickDeleteRow(props.row)"
+              />
+            </q-td>
           </q-tr>
         </template>
-      </ProfileTable>
+      </Table>
     </q-form>
   </q-card>
   <!-- popup Edit window-->
@@ -172,7 +186,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 import { useExamDataStore } from '@/modules/01_exam/store'
-import ProfileTable from '@/components/Table.vue'
+import Table from '@/components/Table.vue'
 import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
 import { useQuasar } from 'quasar'
@@ -196,6 +210,10 @@ const props = defineProps({
   step: {
     type: Number,
     required: true
+  },
+  statusEdit: {
+    type: Boolean,
+    required: true
   }
 })
 
@@ -235,7 +253,7 @@ const closeModalError = () => {
     // fetchData();
   }
 }
-const emit = defineEmits(['update:loader'])
+const emit = defineEmits(['update:loader', 'update:statusEdit'])
 
 const rows = ref<RequestItemsObject[]>([
   {
@@ -322,6 +340,10 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
   await changeExamColumns('education', count)
 })
 
+watch(edit, (count: boolean, prevCount: boolean) => {
+  emit('update:statusEdit', count)
+})
+
 onMounted(async () => {
   //   await fetchData()
   //   await fetchQualification()
@@ -355,7 +377,7 @@ const fetchData = async () => {}
  * กดดูข้อมูลก่อนหน้า
  */
 const clickPrevious = () => {
-  edit.value = false
+  //   edit.value = false
   rowIndex.value -= 1
   const row = rows.value[rowIndex.value]
   qualification.value = row.qualification
@@ -372,7 +394,7 @@ const clickPrevious = () => {
  * กดดูข้อมูลต่อไป
  */
 const clickNext = () => {
-  edit.value = false
+  //   edit.value = false
   rowIndex.value += 1
   const row = rows.value[rowIndex.value]
   qualification.value = row.qualification
@@ -418,6 +440,7 @@ const checkRowPage = () => {
  * กดปุ่มแก้ไขใน dialog
  */
 const clickEdit = () => {
+  edit.value = true
   next.value = false
   previous.value = false
 }
@@ -429,6 +452,23 @@ const clickAdd = () => {
   addRow()
 }
 
+/**
+ * ลบข้อมูลใน table
+ */
+const clickDeleteRow = (row: RequestItemsObject) => {
+  $q.dialog({
+    title: 'ยืนยันการลบข้อมูล',
+    message: 'หากต้องการลบกดให้กดตกลง',
+    cancel: true,
+    persistent: true
+  })
+    .onOk(() => {
+      rows.value = rows.value.filter((val: any) => val.id != row.id)
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {})
+}
+
 /**
  * กดบันทึกใน dialog
  */
@@ -474,7 +514,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  edit.value = false
+  //   edit.value = false
   editRow.value = false
 
   //   loader.value = true;
@@ -528,7 +568,7 @@ const clickClose = async () => {
 const selectData = (props: DataProps) => {
   modalEdit.value = true
   modal.value = true
-  edit.value = false
+  //   edit.value = false
   rawItem.value = props.row
   rowIndex.value = props.rowIndex
   qualification.value = props.row.qualification
@@ -538,7 +578,12 @@ const selectData = (props: DataProps) => {
   name.value = props.row.name
   duration.value = props.row.duration
   id.value = props.row.id
-  checkRowPage()
+  if (edit.value == true) {
+    next.value = false
+    previous.value = false
+  } else {
+    checkRowPage()
+  }
 }
 
 /**
@@ -547,7 +592,7 @@ const selectData = (props: DataProps) => {
 const addRow = () => {
   modalEdit.value = false
   modal.value = true
-  edit.value = true
+  //   edit.value = true
   qualification.value = ''
   qualificationId.value = ''
   major.value = ''
@@ -560,22 +605,23 @@ const addRow = () => {
  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
  */
 const clickCancel = async () => {
-  if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
-      cancel: 'ยกเลิก',
-      ok: 'ยืนยัน',
-      persistent: true
-    }).onOk(async () => {
-      edit.value = false
-      checkRowPage()
-      await getData()
-    })
-  } else {
-    edit.value = false
-    checkRowPage()
-  }
+  //   if (editRow.value == true) {
+  //     $q.dialog({
+  //       title: `ข้อมูลมีการแก้ไข`,
+  //       message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
+  //       cancel: 'ยกเลิก',
+  //       ok: 'ยืนยัน',
+  //       persistent: true
+  //     }).onOk(async () => {
+  //       edit.value = false
+  //       checkRowPage()
+  //       await getData()
+  //     })
+  //   } else {
+  //     edit.value = false
+  //     checkRowPage()
+  //   }
+  edit.value = false
 }
 
 /**