Upload vai-excel-images-fix-v2.js

vai-excel-images-fix-v2.js

@@ -0,0 +1,526 @@
+/**
+ * V.AI STUDIO - Excel Export WITH Product Images
+ * Phiên bản hoàn chỉnh - Thay thế cho vai-quote-excel-order-fix-v1050.js
+ * 
+ * TÍNH NĂNG:
+ * ✅ Xuất Excel có hình ảnh sản phẩm (cột "Hình")
+ * ✅ Download nhiều lần không lỗi (dựa trên fix v1050)
+ * ✅ Hỗ trợ cả Quote và Order modal
+ * ✅ Toast thông báo
+ */
+
+(function() {
+    'use strict';
+    
+    // ========== GLOBAL BLOB REGISTRY ==========
+    window.__VAI_BLOB_REGISTRY = window.__VAI_BLOB_REGISTRY || {
+        blobs: [],
+        registry: [],
+        isUnloading: false
+    };
+    var globalRegistry = window.__VAI_BLOB_REGISTRY;
+    
+    function cleanupAllBlobs() {
+        globalRegistry.isUnloading = true;
+        globalRegistry.blobs.forEach(function(blob) {
+            if (!blob.revoked) {
+                try { URL.revokeObjectURL(blob.url); blob.revoked = true; } catch(err) {}
+            }
+        });
+        globalRegistry.registry.forEach(function(entry) {
+            if (!entry.revoked) {
+                try { URL.revokeObjectURL(entry.url); entry.revoked = true; } catch(err) {}
+            }
+        });
+    }
+    
+    window.addEventListener('pagehide', cleanupAllBlobs);
+    window.addEventListener('beforeunload', cleanupAllBlobs);
+    window.addEventListener('unload', cleanupAllBlobs);
+    
+    if (!window.__VAI_REVOKE_PATCHED) {
+        var originalRevoke = URL.revokeObjectURL;
+        URL.revokeObjectURL = function(url) {
+            if (globalRegistry.isUnloading || !url || typeof url !== 'string' || !url.startsWith('blob:')) {
+                return originalRevoke.apply(this, arguments);
+            }
+            var found = globalRegistry.registry.find(function(e) { return e.url === url; });
+            if (!found) {
+                globalRegistry.registry.push({ url: url, revoked: false, created: Date.now() });
+            }
+            return undefined;
+        };
+        window.__VAI_REVOKE_PATCHED = true;
+    }
+    
+    // ========== HELPER FUNCTIONS ==========
+    function stripDiacritics(s) {
+        if (!s) return '';
+        return s.normalize('NFD').replace(/[\u0300-\u36f]/g, '').replace(/[Đđ]/g, 'D');
+    }
+    
+    function generateOrderCode(name) {
+        var now = new Date();
+        var dd = String(now.getDate()).padStart(2, '0');
+        var mm = String(now.getMonth() + 1).padStart(2, '0');
+        var yy = String(now.getFullYear()).slice(-2);
+        var ini = '';
+        if (name && name.trim()) {
+            name.trim().split(/\s+/).forEach(function(w) {
+                if (w) {
+                    var ch = stripDiacritics(w.charAt(0)).toUpperCase();
+                    if (/[A-Z]/.test(ch)) ini += ch;
+                }
+            });
+        }
+        return 'VAS' + (ini || 'X') + dd + mm + yy;
+    }
+    
+    // ========== FETCH IMAGE AS BASE64 ==========
+    async function fetchImageAsBase64(url) {
+        if (!url || !url.trim()) return null;
+        try {
+            const response = await fetch(url, { mode: 'cors', credentials: 'omit' });
+            if (!response.ok) return null;
+            const blob = await response.blob();
+            return new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.onloadend = () => resolve(reader.result);
+                reader.readAsDataURL(blob);
+            });
+        } catch (err) {
+            return await loadImageCanvasFallback(url);
+        }
+    }
+    
+    function loadImageCanvasFallback(url) {
+        return new Promise((resolve) => {
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            img.referrerPolicy = 'no-referrer';
+            img.onload = function() {
+                try {
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+                    if (!ctx) { resolve(null); return; }
+                    canvas.width = 80;
+                    canvas.height = 80;
+                    ctx.fillStyle = '#ffffff';
+                    ctx.fillRect(0, 0, 80, 80);
+                    ctx.drawImage(img, 0, 0, 80, 80);
+                    resolve(canvas.toDataURL('image/jpeg', 0.7));
+                } catch (e) { resolve(null); }
+            };
+            img.onerror = () => resolve(null);
+            img.src = url;
+        });
+    }
+    
+    // ========== CLICK PROTECTION ==========
+    function setExportButtonState(btn, exporting) {
+        if (!btn) return;
+        if (exporting) {
+            btn.disabled = true;
+            btn.dataset.vaiExporting = '1';
+            btn.dataset.vaiOrigText = btn.innerHTML;
+            btn.style.opacity = '0.7';
+            btn.innerHTML = '<span>⏳ Đang xuất...</span>';
+        } else {
+            btn.disabled = false;
+            btn.dataset.vaiExporting = '0';
+            btn.style.opacity = '';
+            if (btn.dataset.vaiOrigText) btn.innerHTML = btn.dataset.vaiOrigText;
+        }
+    }
+    
+    // ========== GET DATA FROM CART ==========
+    function getQuoteData() {
+        var items = [];
+        var total = 0;
+        
+        if (window.cart && window.cart.length > 0) {
+            window.cart.forEach(function(item, idx) {
+                var p = (window.D && window.D[item.idx]) ? window.D[item.idx] : null;
+                var price = item.priceNum || item.price || (p ? p.price : 0) || 0;
+                var qty = item.qty || 1;
+                var img = p ? (p.img || p.image || '') : (item.image || '');
+                
+                items.push({
+                    stt: idx + 1,
+                    image: img,
+                    name: p ? (p.name || p.n || '') : (item.name || ''),
+                    model: p ? (p.sku || p.mod || '') : (item.sku || item.model || ''),
+                    specs: p ? (p.info || p.desc || '') : '',
+                    qty: qty,
+                    price: price,
+                    discPrice: price,
+                    total: qty * price,
+                    note: ''
+                });
+                total += qty * price;
+            });
+        }
+        
+        return {
+            customer: {
+                name: getCustomerName(),
+                phone: getPhone(),
+                email: getEmail(),
+                addr: getAddress(),
+                date: new Date().toLocaleDateString('vi-VN')
+            },
+            items: items,
+            grandTotal: total
+        };
+    }
+    
+    function getCustomerName() {
+        var selectors = ['#quoteName', '#quoteCustomerName', '#checkoutName'];
+        for (var i = 0; i < selectors.length; i++) {
+            var el = document.querySelector(selectors[i]);
+            if (el && el.value && el.value.trim().length > 1) return el.value.trim();
+        }
+        return '';
+    }
+    
+    function getPhone() {
+        var el = document.querySelector('#quotePhone, #checkoutPhone');
+        return el ? el.value : '';
+    }
+    
+    function getEmail() {
+        var el = document.querySelector('#quoteEmail');
+        return el ? el.value : '';
+    }
+    
+    function getAddress() {
+        var el = document.querySelector('#quoteAddr, #checkoutAddr');
+        return el ? el.value : '';
+    }
+    
+    // ========== DOWNLOAD HELPER ==========
+    function downloadBlob(blob, filename) {
+        var url = URL.createObjectURL(blob);
+        globalRegistry.blobs.push({ url: url, revoked: false });
+        
+        var a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        
+        setTimeout(function() {
+            try { document.body.removeChild(a); } catch(e) {}
+        }, 100);
+    }
+    
+    // ========== EXPORT EXCEL WITH IMAGES ==========
+    async function exportQuoteExcel(qd, code) {
+        if (typeof ExcelJS === 'undefined') {
+            if (typeof showToast === 'function') showToast('⚠️ Chưa có thư viện ExcelJS');
+            return;
+        }
+        
+        var wb = new ExcelJS.Workbook();
+        var ws = wb.addWorksheet('Báo giá');
+        ws.views = [{ showGridLines: false }];
+        ws.columns = [
+            { width: 5 }, { width: 11 }, { width: 28 },
+            { width: 13 }, { width: 20 }, { width: 6 },
+            { width: 13 }, { width: 13 }, { width: 15 }, { width: 14 }
+        ];
+        
+        // Header
+        ws.mergeCells('A3:J3');
+        ws.getCell('A3').value = 'BẢNG BÁO GIÁ';
+        ws.getCell('A3').font = { bold: true, size: 18, color: { argb: 'FFDB9815' } };
+        ws.getCell('A3').alignment = { horizontal: 'center' };
+        
+        // Customer info
+        ws.getCell('A5').value = 'Khách hàng:';
+        ws.mergeCells('B5:E5');
+        ws.getCell('B5').value = qd.customer?.name || '';
+        ws.getCell('H5').value = 'Mã đơn:';
+        ws.mergeCells('I5:J5');
+        ws.getCell('I5').value = code;
+        ws.getCell('A6').value = 'SĐT:';
+        ws.mergeCells('B6:E6');
+        ws.getCell('B6').value = qd.customer?.phone || '';
+        ws.getCell('H6').value = 'Ngày:';
+        ws.mergeCells('I6:J6');
+        ws.getCell('I6').value = qd.customer?.date || '';
+        ws.getCell('A7').value = 'Email:';
+        ws.mergeCells('B7:E7');
+        ws.getCell('B7').value = qd.customer?.email || '';
+        ws.getCell('A8').value = 'Địa chỉ:';
+        ws.mergeCells('B8:J8');
+        ws.getCell('B8').value = qd.customer?.addr || '';
+        
+        // Column headers
+        var hr = ws.getRow(10);
+        ['STT', 'Hình', 'Tên sản phẩm', 'Mã SP', 'Thông tin', 'SL', 'Đơn giá', 'Giá CK', 'Thành tiền', 'Ghi chú'].forEach(function(h, i) {
+            var c = hr.getCell(i + 1);
+            c.value = h;
+            c.font = { bold: true, color: { argb: 'FFFFFFFF' } };
+            c.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF003F62' } };
+            c.alignment = { horizontal: 'center', vertical: 'middle' };
+        });
+        
+        // Add product rows with images
+        var cr = 11;
+        var imagePromises = [];
+        
+        for (var i = 0; i < (qd.items || []).length; i++) {
+            var it = qd.items[i], row = ws.getRow(cr + i);
+            row.height = 50;
+            
+            row.getCell(1).value = it.stt || i + 1;
+            row.getCell(1).alignment = { horizontal: 'center' };
+            
+            // ADD IMAGE TO COLUMN B (index 2)
+            if (it.image) {
+                imagePromises.push(
+                    fetchImageAsBase64(it.image).then(function(base64, rowNum) {
+                        return function() {
+                            if (base64) {
+                                ws.addImage({
+                                    source: base64,
+                                    range: {
+                                        tl: { col: 1, row: cr},      // top-left: cột B, hàng hiện tại
+                                        br: { col: 2, row: cr + 1 }   // bottom-right: ô tiếp theo
+                                    }
+                                });
+                            }
+                        };
+                    }.bind(null, it.image)())
+                );
+            }
+            
+            row.getCell(3).value = it.name || '';
+            row.getCell(3).font = { bold: true, size: 9 };
+            row.getCell(4).value = it.model || '';
+            row.getCell(5).value = it.specs || '';
+            row.getCell(5).font = { size: 8, color: { argb: 'FF64748B' } };
+            row.getCell(6).value = Number(it.qty || 1);
+            row.getCell(6).numFmt = '#,##0';
+            row.getCell(6).alignment = { horizontal: 'center' };
+            row.getCell(7).value = Number(it.price || 0);
+            row.getCell(7).numFmt = '#,##0"đ"';
+            row.getCell(8).value = Number(it.discPrice || it.price || 0);
+            row.getCell(8).numFmt = '#,##0"đ"';
+            row.getCell(9).value = Number(it.total || 0);
+            row.getCell(9).numFmt = '#,##0"đ"';
+            row.getCell(9).font = { bold: true };
+            row.getCell(10).value = it.note || '';
+            row.getCell(10).alignment = { wrapText: true };
+        }
+        
+        // Wait for all images to load
+        await Promise.all(imagePromises);
+        
+        // Total row
+        var totalRowNum = cr + (qd.items || []).length;
+        ws.getRow(totalRowNum).height = 28;
+        ws.mergeCells(totalRowNum, 1, totalRowNum, 5);
+        ws.getCell('A' + totalRowNum).value = 'TỔNG CỘNG';
+        ws.getCell('A' + totalRowNum).font = { bold: true, size: 13, color: { argb: 'FFFFFFFF' } };
+        ws.getCell('A' + totalRowNum).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF003F62' } };
+        ws.getCell('E' + totalRowNum).value = Number(qd.grandTotal || 0);
+        ws.getCell('E' + totalRowNum).numFmt = '#,##0"đ"';
+        ws.getCell('E' + totalRowNum).font = { bold: true, size: 14, color: { argb: 'FFF0B840' } };
+        
+        wb.calcProperties.fullCalcOnLoad = true;
+        
+        var buf = await wb.xlsx.writeBuffer();
+        downloadBlob(new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }), code + '.xlsx');
+    }
+    
+    // ========== EXPORT DELIVERY EXCEL ==========
+    async function exportDeliveryExcel(qd, code) {
+        if (typeof ExcelJS === 'undefined') {
+            if (typeof showToast === 'function') showToast('⚠️ Chưa có thư viện ExcelJS');
+            return;
+        }
+        
+        var wb = new ExcelJS.Workbook();
+        var ws = wb.addWorksheet('Giao hàng');
+        ws.views = [{ showGridLines: false }];
+        ws.columns = [
+            { width: 5 }, { width: 34 }, { width: 14 }, { width: 8 }, { width: 20 }
+        ];
+        
+        ws.mergeCells('A1:E1');
+        ws.getCell('A1').value = 'PHIẾU GIAO HÀNG';
+        ws.getCell('A1').font = { bold: true, size: 16, color: { argb: 'FF003F62' } };
+        ws.getCell('A1').alignment = { horizontal: 'center' };
+        
+        ws.getCell('A2').value = 'KH: ' + (qd.customer?.name || '');
+        ws.getCell('D2').value = 'Mã: ' + code;
+        ws.getCell('A3').value = 'SĐT: ' + (qd.customer?.phone || '');
+        ws.getCell('D3').value = 'Ngày: ' + (qd.customer?.date || '');
+        ws.getCell('A4').value = 'Địa chỉ: ' + (qd.customer?.addr || '');
+        
+        var hr = ws.getRow(6);
+        ['STT', 'Tên sản phẩm', 'Mã SP', 'SL', 'Ghi chú'].forEach(function(h, i) {
+            var c = hr.getCell(i + 1);
+            c.value = h;
+            c.font = { bold: true, color: { argb: 'FFFFFFFF' } };
+            c.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF003F62' } };
+        });
+        
+        var cr = 7, totalQty = 0;
+        var imagePromises = [];
+        
+        for (var i = 0; i < (qd.items || []).length; i++) {
+            var it = qd.items[i], row = ws.getRow(cr + i);
+            row.height = 50;
+            
+            row.getCell(1).value = it.stt || i + 1;
+            row.getCell(2).value = it.name || '';
+            row.getCell(3).value = it.model || '';
+            row.getCell(4).value = it.qty || 1;
+            totalQty += Number(it.qty || 1);
+            row.getCell(5).value = it.note || '';
+            
+            // ADD IMAGE (column 2 = B)
+            if (it.image) {
+                imagePromises.push(
+                    fetchImageAsBase64(it.image).then(function(base64) {
+                        if (base64) {
+                            ws.addImage({
+                                source: base64,
+                                range: {
+                                    tl: { col: 1, row: cr},
+                                    br: { col: 2, row: cr + 1 }
+                                }
+                            });
+                        }
+                    })
+                );
+            }
+        }
+        
+        await Promise.all(imagePromises);
+        
+        var totalRowNum = cr + (qd.items || []).length;
+        ws.mergeCells(totalRowNum, 1, totalRowNum, 3);
+        ws.getCell('A' + totalRowNum).value = 'TỔNG SỐ LƯỢNG';
+        ws.getCell('A' + totalRowNum).font = { bold: true };
+        ws.getCell('D' + totalRowNum).value = totalQty;
+        ws.getCell('D' + totalRowNum).font = { bold: true };
+        
+        wb.calcProperties.fullCalcOnLoad = true;
+        
+        var buf = await wb.xlsx.writeBuffer();
+        downloadBlob(new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }), 'GH-' + code + '.xlsx');
+    }
+    
+    // ========== PATCH EXPORT FUNCTIONS ==========
+    function patchExportFunctions() {
+        var origExportExcel = window.exportExcel;
+        window.exportExcel = async function() {
+            var btn = document.activeElement;
+            if (btn && btn.dataset.vaiExporting === '1') return;
+            if (btn) setExportButtonState(btn, true);
+            
+            try {
+                var qd = getQuoteData();
+                var code = generateOrderCode(qd.customer?.name || '');
+                await exportQuoteExcel(qd, code);
+                if (typeof showToast === 'function') showToast('✅ Excel báo giá (có hình) tải thành công!');
+            } catch (e) {
+                console.error('exportExcel error:', e);
+                if (typeof showToast === 'function') showToast('❌ Lỗi: ' + e.message);
+            } finally {
+                if (btn) setTimeout(function() { setExportButtonState(btn, false); }, 500);
+            }
+        };
+        
+        var origExportDeliveryExcel = window.exportDeliveryExcel;
+        window.exportDeliveryExcel = async function(order, opt) {
+            var btn = document.activeElement;
+            if (btn && btn.dataset.vaiExporting === '1') return;
+            if (btn) setExportButtonState(btn, true);
+            
+            try {
+                var qd = order && order.items ? {
+                    customer: {
+                        name: order.customer || '',
+                        phone: order.phone || '',
+                        email: order.email || '',
+                        addr: order.addr || '',
+                        date: order.date || ''
+                    },
+                    items: (order.items || []).map(function(it, i) {
+                        return {
+                            stt: i + 1,
+                            image: it.image || it.img || '',
+                            name: it.name || '',
+                            model: it.model || '',
+                            qty: it.qty || 1,
+                            price: it.price || 0,
+                            discPrice: it.discPrice || it.price || 0,
+                            total: it.total || 0,
+                            note: it.note || '',
+                            specs: it.specs || ''
+                        };
+                    }),
+                    grandTotal: order.grandTotal || 0
+                } : getQuoteData();
+                
+                var code = (order && order.code) ? order.code : generateOrderCode(qd.customer?.name || '');
+                await exportDeliveryExcel(qd, code);
+                if (typeof showToast === 'function') showToast('✅ Excel giao hàng (có hình) tải thành công!');
+            } catch (e) {
+                console.error('exportDeliveryExcel error:', e);
+                if (typeof showToast === 'function') showToast('❌ Lỗi: ' + e.message);
+            } finally {
+                if (btn) setTimeout(function() { setExportButtonState(btn, false); }, 500);
+            }
+        };
+    }
+    
+    // ========== CLICK HANDLERS ==========
+    function handleClickProtection(e) {
+        var btn = e.target.closest('button, a');
+        if (!btn) return;
+        
+        var txt = (btn.textContent || '').toLowerCase();
+        
+        if (txt.includes('excel') && !txt.includes('giao hàng') && !txt.includes('gh')) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (btn.dataset.vaiExporting === '1') return;
+            setExportButtonState(btn, true);
+            window.exportExcel().finally(function() { setExportButtonState(btn, false); });
+            return false;
+        }
+        
+        if ((txt.includes('gh') || txt.includes('giao')) && txt.includes('excel')) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (btn.dataset.vaiExporting === '1') return;
+            setExportButtonState(btn, true);
+            window.exportDeliveryExcel().finally(function() { setExportButtonState(btn, false); });
+            return false;
+        }
+    }
+    
+    // ========== INIT ==========
+    function init() {
+        patchExportFunctions();
+        document.removeEventListener('click', handleClickProtection);
+        document.addEventListener('click', handleClickProtection, true);
+        console.log('[VAI Excel Images v2] Loaded');
+    }
+    
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+    
+    setTimeout(init, 2000);
+    setTimeout(init, 5000);
+    
+})();