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

src/components/DialogFooter.vue

@@ -32,7 +32,7 @@
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
       <div v-else>
-        <q-btn
+        <!-- <q-btn
           flat
           round
           :disabled="!editvisible"
@@ -43,7 +43,7 @@
           v-if="modalEdit == true"
         >
           <q-tooltip>ยกเลิก</q-tooltip>
-        </q-btn>
+        </q-btn> -->
         <q-btn
           flat
           round

src/components/Table.vue

@@ -5,15 +5,18 @@
       v-model:edit="editBtn"
       :header="name"
       :icon="icon"
-      :add="checkAdd"
+      :add="clickAdd"
+      :editBtn="clickEdit"
+      :cancel="clickCancel"
       :history="false"
-      v-if="nameHeader"
+      :addData="false"
     />
-    <div class="q-pl-sm">
+    <!-- v-if="nameHeader" -->
+    <!-- <div class="q-pl-sm">
       <q-btn size="12px" flat round color="add" @click="add" icon="mdi-plus" v-if="addData">
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
-    </div>
+    </div> -->
     <q-space />
     <div class="items-center" style="display: flex">
       <!-- ค้นหาข้อความใน table -->
@@ -75,6 +78,7 @@
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium">{{ col.label }}</span>
         </q-th>
+        <q-th auto-width v-if="editBtn == true" />
       </q-tr>
     </template>
     <template #body="props">
@@ -83,7 +87,7 @@
   </q-table>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue'
+import { ref, useAttrs, watch } from 'vue'
 import HeaderTop from '@/components/top.vue'
 import type { Pagination } from '@/modules/01_exam/interface/index/Main'
 
@@ -127,6 +131,10 @@ const props = defineProps({
 
 const emit = defineEmits(['update:inputfilter', 'update:inputvisible', 'update:editvisible'])
 
+watch(props, (count: any, prevCount: any) => {
+  editBtn.value = props.editvisible
+})
+
 const updateEdit = (value: Boolean) => {
   emit('update:editvisible', value)
 }
@@ -141,11 +149,21 @@ const paginationLabel = (start: string, end: string, total: string) => {
   return start + '-' + end + ' ใน ' + total
 }
 
-const checkAdd = () => {
+const clickAdd = () => {
   //   props.validate();
   props.add()
 }
 
+const clickEdit = () => {
+  //   props.validate();
+  props.edit()
+}
+
+const clickCancel = () => {
+  //   props.validate();
+  props.cancel()
+}
+
 const edit = async () => {
   updateEdit(!props.editvisible)
   props.edit()

src/components/top.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center">
-    <div class="flex items-center">
+    <div class="flex items-center" v-if="header != ''">
       <q-icon :name="icon" size="1.5em" color="grey-5" class="q-mr-md" />
       <div class="text-weight-medium text-dark col-12 row items-center text-header">
         {{ header }}
@@ -45,9 +45,42 @@
       </q-btn>
     </div>
     <div class="q-pl-sm" v-else>
-      <!-- <q-btn size="12px" flat round color="add" @click="add" icon="mdi-plus">
+      <q-btn
+        size="12px"
+        v-if="!edit"
+        flat
+        round
+        :disabled="edit"
+        :color="edit ? 'grey-7' : 'primary'"
+        @click="ClickEdit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :disabled="!edit"
+        :color="!edit ? 'grey-7' : 'add'"
+        @click="add"
+        icon="mdi-plus"
+      >
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-      </q-btn> -->
+      </q-btn>
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :disabled="!edit"
+        :color="!edit ? 'grey-7' : 'red'"
+        @click="ClickCancel"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
     </div>
     <q-space />
   </div>
@@ -56,12 +89,12 @@
 const props = defineProps({
   header: {
     type: String,
-    default: 'ข้อความ',
+    default: '',
     required: true
   },
   icon: {
     type: String,
-    default: 'mdi-help',
+    default: '',
     required: true
   },
   edit: {
@@ -89,6 +122,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function')
   },
+  editBtn: {
+    type: Function,
+    default: () => console.log('not function')
+  },
   changeBtn: {
     type: Function,
     default: () => console.log('not function')
@@ -103,6 +140,7 @@ const updateEdit = (value: any) => {
 
 const ClickEdit = () => {
   updateEdit(!props.edit)
+  props.editBtn()
   props.changeBtn()
 }