demo

@@ -134,7 +134,7 @@
                 selectingIndex: null,
                 selectingIndex: null,
                 isMappingManually: false,
                 isMappingManually: false,
                 isSelecting: false,
                 isSelecting: false,
-        activeField: null,
+                activeIndex: null,
                 manualField: "",
                 manualField: "",
                 formData: { export_date: "", order_code: "", customer: "", address: "", staff: "" },
                 formData: { export_date: "", order_code: "", customer: "", address: "", staff: "" },
                 fieldOptions: [
                 fieldOptions: [
@@ -193,7 +193,7 @@
                 this.imageWidth = img.naturalWidth;
                 this.imageWidth = img.naturalWidth;
                 this.imageHeight = img.naturalHeight;
                 this.imageHeight = img.naturalHeight;
             },
             },
-      getBoxStyle(item) {
+            getBoxStyle(item, index) {
                 if (!this.imageWidth || !this.imageHeight || !this.$refs.pdfImage) return {};
                 if (!this.imageWidth || !this.imageHeight || !this.$refs.pdfImage) return {};
 
 
                 const [x1, y1, x2, y2] = item.bbox;
                 const [x1, y1, x2, y2] = item.bbox;
@@ -209,8 +209,8 @@
                     top: `${Math.round(y1 * scaleY)}px`,
                     top: `${Math.round(y1 * scaleY)}px`,
                     width: `${Math.round((x2 - x1) * scaleX)}px`,
                     width: `${Math.round((x2 - x1) * scaleX)}px`,
                     height: `${Math.round((y2 - y1) * scaleY)}px`,
                     height: `${Math.round((y2 - y1) * scaleY)}px`,
-          border: item.hideBorder ? 'none' : '2px solid ' + (this.activeField === item.field ? '#199601' : '#ff5252'),
-          //backgroundColor: item.hideBorder ? 'transparent' : (this.activeField === item.field ? 'rgba(33,150,243,0.3)' : 'rgba(255,82,82,0.2)'),
+                    border: item.hideBorder ? 'none' : '2px solid ' + (index === this.activeIndex ? '#199601' : '#ff5252'),
+                    //backgroundColor: item.hideBorder ? 'transparent' : (this.activeIndex === item.field ? 'rgba(33,150,243,0.3)' : 'rgba(255,82,82,0.2)'),
                     boxSizing: 'border-box',
                     boxSizing: 'border-box',
                     cursor: 'pointer',
                     cursor: 'pointer',
                     zIndex: item.isManual ? 30 : 10
                     zIndex: item.isManual ? 30 : 10
@@ -218,7 +218,16 @@
             },
             },
 
 
             highlightField(field) {
             highlightField(field) {
-        this.activeField = field;
+                // tìm box gần nhất match field này
+                let idx = -1;
+                for (let i = this.ocrData.length - 1; i >= 0; i--) {
+                    const it = this.ocrData[i];
+                    if (!it.isDeleted && it.field === field) {
+                        idx = i;
+                        break;
+                    }
+                }
+                this.activeIndex = idx; // nếu không tìm thấy thì = -1
             },
             },
 
 
             startSelect(e) {
             startSelect(e) {
@@ -307,14 +316,14 @@
 
 
                 if (item && item.isManual) {
                 if (item && item.isManual) {
                     this.manualIndex = this.selectingIndex;
                     this.manualIndex = this.selectingIndex;
-          this.manualField = item.field; // đảm bảo sync field hiện tại
+                    this.manualField = item.field || "";
                     this.applyManualMapping();
                     this.applyManualMapping();
                     return;
                     return;
                 }
                 }
 
 
                 if (item.field) {
                 if (item.field) {
                     this.formData[item.field] = item.text;
                     this.formData[item.field] = item.text;
-          this.activeField = item.field;
+                    this.activeIndex = this.selectingIndex;
                 }
                 }
                 this.selectingIndex = null;
                 this.selectingIndex = null;
             },
             },
@@ -335,9 +344,9 @@
                 const finalText = combinedText.join(" ");
                 const finalText = combinedText.join(" ");
                 this.ocrData[manualIndex].field = this.manualField;
                 this.ocrData[manualIndex].field = this.manualField;
                 this.formData[this.manualField] = finalText;
                 this.formData[this.manualField] = finalText;
-        this.activeField = this.manualField;
+                this.activeIndex = manualIndex;
 
 
-        console.log('manualField',this.manualField,this.manualIndex)
+                console.log('manualField', this.manualField, this.manualIndex)
                 // Reset trạng thái chọn
                 // Reset trạng thái chọn
                 this.isMappingManually = false;
                 this.isMappingManually = false;
                 this.selectBox.show = false;
                 this.selectBox.show = false;
@@ -372,7 +381,7 @@
                 return text.substring(startIndex, endIndex).trim();
                 return text.substring(startIndex, endIndex).trim();
             },
             },
             getSelectStyle(item) {
             getSelectStyle(item) {
-        if (!this.imageWidth) return { position: 'absolute' };
+                if (!this.imageWidth) return {position: 'absolute'};
 
 
                 const [x1, y1, x2, y2] = item.bbox;
                 const [x1, y1, x2, y2] = item.bbox;
                 const displayedWidth = this.$refs.pdfImage.clientWidth;
                 const displayedWidth = this.$refs.pdfImage.clientWidth;
@@ -394,4 +403,5 @@
 </script>
 </script>
 
 
 
 
-</body></html>
+</body>
+</html>