tab ที่ผ่านมาแล้วเปลี่ยนเป็นสีเขียว

src/modules/01_exam/components/Occupation.vue

@@ -7,6 +7,7 @@
       icon="mdi-briefcase"
       :save="saveData"
       :addData="addData"
+      :cancel="cancelData"
     />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -33,7 +34,7 @@
                 label="ข้าราชการกรุงเทพมหานคร ตำแหน่ง"
                 dense
                 :disable="!edit"
-                size="xs"
+                size="md"
                 style="font-size: 14px; color: black"
               />
             </template>
@@ -60,7 +61,7 @@
                 label="บุคลากรกรุงเทพมหานคร ตำแหน่ง"
                 dense
                 :disable="!edit"
-                size="xs"
+                size="md"
                 style="font-size: 14px; color: black"
               />
             </template>
@@ -87,7 +88,7 @@
                 label="ข้าราชการประเภทอื่น ตำแหน่ง"
                 dense
                 :disable="!edit"
-                size="xs"
+                size="md"
                 style="font-size: 14px; color: black"
               />
             </template>
@@ -114,7 +115,7 @@
                 label="ลูกจ้าง/พนักงานราชการของส่วนราชการอื่น ตำแหน่ง"
                 dense
                 :disable="!edit"
-                size="xs"
+                size="md"
                 style="font-size: 14px; color: black"
               />
             </template>
@@ -127,7 +128,7 @@
             label="กำลังศึกษาต่อ"
             dense
             :disable="!edit"
-            size="xs"
+            size="md"
             style="font-size: 14px; color: black"
           />
           <q-input
@@ -152,7 +153,7 @@
                 label="อื่นๆ"
                 dense
                 :disable="!edit"
-                size="xs"
+                size="md"
                 style="font-size: 14px; color: black"
               />
             </template>
@@ -227,7 +228,7 @@
   </q-card>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 
 import http from '@/plugins/http'
 import config from '@/app.config'
@@ -236,16 +237,25 @@ import { defaultOccupation } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
 
 const edit = ref<boolean>(false)
-const addData = ref<boolean>(false)
+const addData = ref<boolean>(true)
 const occupationData = ref<Occupation>(defaultOccupation)
 const myform = ref<any>()
 
-const getClass = (val: boolean) => {
-  return {
-    'full-width inputgreen cursor-pointer': val,
-    'full-width cursor-pointer': !val
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true
   }
-}
+})
+
+const emit = defineEmits(['update:statusEdit'])
+
+watch(edit, (count: boolean, prevCount: boolean) => {
+  if (props.statusEdit == true) {
+    edit.value = false
+    emit('update:statusEdit', count)
+  }
+})
 
 onMounted(() => {})
 
@@ -256,4 +266,13 @@ const saveData = async () => {
     }
   })
 }
+
+const cancelData = () => {}
+
+const getClass = (val: boolean) => {
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
+}
 </script>