เช็คค่าก่อนเปลี่ยน tab

src/components/DialogFooter.vue

@@ -19,108 +19,110 @@
       :color="!next ? 'grey-7' : 'public'"
     />
     <q-space />
-    <q-btn
-      v-if="!editvisible"
-      flat
-      round
-      :disabled="editvisible"
-      :color="editvisible ? 'grey-7' : 'primary'"
-      @click="edit"
-      icon="mdi-pencil-outline"
-    >
-      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-    </q-btn>
-    <div v-else>
+    <div v-if="editBtn">
       <q-btn
+        v-if="!editvisible"
         flat
         round
-        :disabled="!editvisible"
-        :outline="!editvisible"
-        :color="!editvisible ? 'grey-7' : 'red'"
-        @click="cancel()"
-        icon="mdi-undo"
-        v-if="modalEdit == true"
+        :disabled="editvisible"
+        :color="editvisible ? 'grey-7' : 'primary'"
+        @click="edit"
+        icon="mdi-pencil-outline"
       >
-        <q-tooltip>ยกเลิก</q-tooltip>
-      </q-btn>
-      <q-btn
-        flat
-        round
-        :disabled="!editvisible"
-        :color="!editvisible ? 'grey-7' : 'public'"
-        @click="checkSave"
-        icon="mdi-content-save-outline"
-      >
-        <q-tooltip>บันทึก</q-tooltip>
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
+      <div v-else>
+        <q-btn
+          flat
+          round
+          :disabled="!editvisible"
+          :outline="!editvisible"
+          :color="!editvisible ? 'grey-7' : 'red'"
+          @click="cancel()"
+          icon="mdi-undo"
+          v-if="modalEdit == true"
+        >
+          <q-tooltip>ยกเลิก</q-tooltip>
+        </q-btn>
+        <q-btn
+          flat
+          round
+          :disabled="!editvisible"
+          :color="!editvisible ? 'grey-7' : 'public'"
+          @click="checkSave"
+          icon="mdi-content-save-outline"
+        >
+          <q-tooltip>บันทึก</q-tooltip>
+        </q-btn>
+      </div>
     </div>
   </q-card-actions>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs } from 'vue'
 
 const props = defineProps({
   editvisible: Boolean,
   next: Boolean,
   previous: Boolean,
   modalEdit: Boolean,
+  editBtn: {
+    type: Boolean,
+    default: true
+  },
   clickNext: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   clickPrevious: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   cancel: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   edit: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   save: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   validate: {
     type: Function,
-    default: () => console.log("not function"),
-  },
-});
-const emit = defineEmits([
-  "update:editvisible",
-  "update:next",
-  "update:previous",
-]);
+    default: () => console.log('not function')
+  }
+})
+const emit = defineEmits(['update:editvisible', 'update:next', 'update:previous'])
 
 const updateEdit = (value: Boolean) => {
-  emit("update:editvisible", value);
-};
+  emit('update:editvisible', value)
+}
 const cancel = async () => {
-  props.cancel();
-};
+  props.cancel()
+}
 const edit = async () => {
-  updateEdit(!props.editvisible);
-  props.edit();
-};
+  updateEdit(!props.editvisible)
+  props.edit()
+}
 const checkSave = () => {
-  props.validate();
-  props.save();
+  props.validate()
+  props.save()
   //   if (myForm.value !== null) {
   //     myForm.value.validate().then((success) => {
   //       if (success) {
   //       }
   //     });
   //   }
-};
+}
 
 const clickNext = async () => {
-  await props.clickNext();
-};
+  await props.clickNext()
+}
 
 const clickPrevious = async () => {
-  await props.clickPrevious();
-};
+  await props.clickPrevious()
+}
 </script>

src/components/Table.vue

@@ -6,13 +6,14 @@
       :header="name"
       :icon="icon"
       :add="checkAdd"
-      :addData="true"
       :history="false"
       v-if="nameHeader"
     />
-    <q-btn size="12px" flat round color="add" @click="add" icon="mdi-plus">
-      <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-    </q-btn>
+    <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>
     <q-space />
     <div class="items-center" style="display: flex">
       <!-- ค้นหาข้อความใน table -->
@@ -102,6 +103,10 @@ const props = defineProps({
   inputvisible: Array,
   editvisible: Boolean,
   nameHeader: Boolean,
+  addData: {
+    type: Boolean,
+    defualt: true
+  },
   edit: {
     type: Function,
     default: () => console.log('not function')

src/components/top.vue

@@ -88,6 +88,10 @@ const props = defineProps({
   cancel: {
     type: Function,
     default: () => console.log('not function')
+  },
+  changeBtn: {
+    type: Function,
+    default: () => console.log('not function')
   }
 })
 
@@ -99,11 +103,13 @@ const updateEdit = (value: any) => {
 
 const ClickEdit = () => {
   updateEdit(!props.edit)
+  props.changeBtn()
 }
 
 const ClickCancel = () => {
   updateEdit(!props.edit)
   props.cancel()
+  props.changeBtn()
 }
 
 const save = () => {