ปรับหน้ารายละเอียดของผู้สอบผ่าน ให้เป็นข้อมูลหลักจากระบบใหม่

src/modules/05_placement/components/PersonalDetail/Information/Family.vue

@@ -56,11 +56,13 @@ const onEdit = ref<boolean>(false);
 const myform = ref<QForm | null>(null);
 const familyData = ref<Family>(props.data);
 
-onMounted(async () => {
-  emit("update:statusEdit", false);
-});
 
-const filterSelector = (val: any, update: Function, refData: string) => {
+
+function checkEdit() {
+  onEdit.value = true;
+}
+
+function filterSelector(val: any, update: Function, refData: string){
   update(() => {
     props.Ops[`${refData}`] = props.OpsFilter[`${refData}`].filter(
       (v: DataOption) => v.name.indexOf(val) > -1
@@ -68,7 +70,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
   });
 };
 
-const refreshData = async () => {
+async function refreshData(){
   if (myform.value != null) {
     myform.value.reset();
   }
@@ -89,7 +91,7 @@ const refreshData = async () => {
   }
 };
 
-const editData = async () => {
+async function editData(){
   dialogConfirm($q, async () => {
     showLoader();
     //   const body: ResponseObject = {
@@ -148,7 +150,7 @@ const editData = async () => {
   });
 };
 
-const saveData = async () => {
+async function saveData(){
   await myform.value?.validate().then(async (success: boolean) => {
     if (success) {
       await editData();
@@ -157,7 +159,8 @@ const saveData = async () => {
   });
 };
 
-const selectRadio = (e: boolean, i: any) => {
+function selectRadio(e: boolean, i: any){
+  onEdit.value = true;
   if (e) {
     familyData.value.marryPrefixId = "";
     familyData.value.marryFirstName = "";
@@ -167,10 +170,9 @@ const selectRadio = (e: boolean, i: any) => {
   }
 };
 
-const changeBtn = async () => {
+async function changeBtn(){
   if (edit.value == true) {
     if (props.statusEdit === true) {
-      edit.value = false;
       props.notiNoEdit();
     } else {
       emit("update:statusEdit", true);
@@ -180,12 +182,16 @@ const changeBtn = async () => {
   }
 };
 
-const getClass = (val: boolean) => {
+function getClass(val: boolean){
   return {
     "full-width inputgreen cursor-pointer": val,
     "full-width cursor-pointer": !val,
   };
 };
+
+onMounted(async () => {
+  emit("update:statusEdit", false);
+});
 </script>
 
 <template>
@@ -206,6 +212,7 @@ const getClass = (val: boolean) => {
         <div class="col-xs-12 col-sm-3 col-md-3">
           <selector
             :hide-dropdown-icon="!edit"
+            @update:modelValue="checkEdit"
             hide-bottom-space
             :class="getClass(edit)"
             :readonly="!edit"
@@ -241,6 +248,7 @@ const getClass = (val: boolean) => {
             v-model="familyData.fatherFirstName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -255,6 +263,7 @@ const getClass = (val: boolean) => {
             v-model="familyData.fatherLastName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-12 col-sm-3 col-md-3">
@@ -268,6 +277,7 @@ const getClass = (val: boolean) => {
             :borderless="!edit"
             v-model="familyData.fatherOccupation"
             :label="`${'อาชีพ'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
 
@@ -292,6 +302,7 @@ const getClass = (val: boolean) => {
             option-value="id"
             :label="`${'คำนำหน้า'}`"
             use-input
+            @update:modelValue="checkEdit"
             input-debounce="0"
             @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
@@ -311,6 +322,7 @@ const getClass = (val: boolean) => {
             v-model="familyData.motherFirstName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -325,6 +337,7 @@ const getClass = (val: boolean) => {
             v-model="familyData.motherLastName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-12 col-sm-3 col-md-3">
@@ -338,6 +351,7 @@ const getClass = (val: boolean) => {
             :borderless="!edit"
             v-model="familyData.motherOccupation"
             :label="`${'อาชีพ'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
@@ -387,6 +401,7 @@ const getClass = (val: boolean) => {
             option-value="id"
             :label="`${'คำนำหน้า'}`"
             use-input
+            @update:modelValue="checkEdit"
             input-debounce="0"
             @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
@@ -406,6 +421,7 @@ const getClass = (val: boolean) => {
             v-model="familyData.marryFirstName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
@@ -420,6 +436,7 @@ const getClass = (val: boolean) => {
             v-model="familyData.marryLastName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <!-- <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
@@ -450,6 +467,7 @@ const getClass = (val: boolean) => {
             :borderless="!edit"
             v-model="familyData.marryOccupation"
             :label="`${'อาชีพ'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
       </div>