Merge branch '2025/ntctien/14567_edit_template' into 'dev'

2025/ntctien/14567 edit template

See merge request !3

@@ -123,7 +123,6 @@
         <div v-for="field in fieldOptions" :key="field.value" class="form-group">
         <div v-for="field in fieldOptions" :key="field.value" class="form-group">
             <label>@{{ field.label }}</label>
             <label>@{{ field.label }}</label>
             <input v-model="formData[field.value]"
             <input v-model="formData[field.value]"
-                   @focus="highlightField(field.value)"
                    @click="onInputClick(field.value)"
                    @click="onInputClick(field.value)"
                    @blur="removeAllFocus()"
                    @blur="removeAllFocus()"
 
 
@@ -164,10 +163,13 @@
         },
         },
         mounted() {
         mounted() {
             this.loadOCRData();
             this.loadOCRData();
-
-            // Thêm event listener để xóa focus khi click ra ngoài
+            //Thêm event listener để xóa focus khi click ra ngoài
             document.addEventListener('click', (e) => {
             document.addEventListener('click', (e) => {
-                if (!e.target.closest('.left-panel') && !e.target.closest('.bbox')) {
+                if (
+                    !e.target.closest('.left-panel') &&
+                    !e.target.closest('.bbox') &&
+                    !e.target.closest('select')
+                ) {
                     this.removeAllFocus();
                     this.removeAllFocus();
                 }
                 }
             });
             });
@@ -179,11 +181,9 @@
             }
             }
         },
         },
         methods: {
         methods: {
-
             // Map field cho box (không set active, chỉ dùng để load data từ DB)
             // Map field cho box (không set active, chỉ dùng để load data từ DB)
             mapFieldToBox(index, fieldName, text = null) {
             mapFieldToBox(index, fieldName, text = null) {
                 if (index == null) return;
                 if (index == null) return;
-
                 // Xóa tất cả box có fieldName trùng lặp, chỉ giữ lại box hiện tại
                 // Xóa tất cả box có fieldName trùng lặp, chỉ giữ lại box hiện tại
                 this.ocrData = this.ocrData.filter((box, i) => {
                 this.ocrData = this.ocrData.filter((box, i) => {
                     if (i === index) return true;
                     if (i === index) return true;
@@ -254,7 +254,6 @@
                             };
                             };
                         }
                         }
                     });
                     });
-
                     fields = (fieldsByName);
                     fields = (fieldsByName);
                     console.log('Using ocrData for customer_name:', customer_name, customer_coords);
                     console.log('Using ocrData for customer_name:', customer_name, customer_coords);
                 }
                 }
@@ -292,7 +291,6 @@
                 }
                 }
             },
             },
 
 
-
             deleteBox(index) {
             deleteBox(index) {
                 const item = this.ocrData[index];
                 const item = this.ocrData[index];
                 if (item.isManual) {
                 if (item.isManual) {
@@ -303,7 +301,6 @@
                             o.hideBorder = false;
                             o.hideBorder = false;
                         }
                         }
                     });
                     });
-
                     // Đánh dấu xoá vùng thủ công
                     // Đánh dấu xoá vùng thủ công
                     this.ocrData[index].isDeleted = true;
                     this.ocrData[index].isDeleted = true;
                     this.ocrData[index].showDelete = false;
                     this.ocrData[index].showDelete = false;
@@ -316,6 +313,7 @@
                         this.manualField = "";
                         this.manualField = "";
                         this.manualIndex = null;
                         this.manualIndex = null;
                     }
                     }
+                    this.selectingIndex = null;
                 }
                 }
             },
             },
 
 
@@ -352,8 +350,7 @@
             },
             },
 
 
             autoMapFieldsFromFormData() {
             autoMapFieldsFromFormData() {
-                this.manualBoxData = {}; // reset
-
+                this.manualBoxData = {};
                 if(this.is_template) {
                 if(this.is_template) {
                     this.formData = {};
                     this.formData = {};
                 }
                 }
@@ -536,6 +533,7 @@
             removeAllFocus() {
             removeAllFocus() {
                 // Reset active index (chỉ mất màu xanh, không xóa box)
                 // Reset active index (chỉ mất màu xanh, không xóa box)
                 this.activeIndex = null;
                 this.activeIndex = null;
+                this.selectingIndex = null;
 
 
                 // Ẩn hoàn toàn các box manual được tạo từ DB (không phải quét chọn thủ công)
                 // Ẩn hoàn toàn các box manual được tạo từ DB (không phải quét chọn thủ công)
                 this.ocrData.forEach(item => {
                 this.ocrData.forEach(item => {