Upload vai-excel-images-final.js

vai-excel-images-final.js

@@ -0,0 +1,421 @@
+/**
+ * V.AI STUDIO — Excel Export WITH IMAGES (100% FIX)
+ * Phiên bản cuối cùng: Vá inline script + Thêm hình ảnh sản phẩm
+ * - Thay thế cho inline script trong index.html
+ * - Đảm bảo 100% download thành công
+ * - Hỗ trợ hình ảnh trong cột "Hình"
+ */
+(function(){
+'use strict';
+console.log('[VAI Images v1] Loading - Product images in Excel export enabled');
+
+function fmt(n){if(!n||isNaN(n))return'0đ';return Number(n).toLocaleString('vi-VN')+'đ';}
+function t(m){if(typeof window.showToast==='function')window.showToast(m);else console.log('[VAI]'+m)}
+
+// GLOBAL BLOB REGISTRY - Prevent memory leaks
+var blobs=[],unloading=false;
+function cl(){unloading=true;blobs.forEach(function(b){if(!b.revoked){try{URL.revokeObjectURL(b.url)}catch(e){}b.revoked=true}});blobs=[]}
+window.addEventListener('pagehide',cl);
+window.addEventListener('beforeunload',cl);
+window.addEventListener('unload',cl);
+if(!window.__VAI_IMG_RV){var or=URL.revokeObjectURL;URL.revokeObjectURL=function(u){if(unloading)return or.apply(this,arguments);if(u&&typeof u==='string'&&u.startsWith('blob:')){var f=false;for(var i=0;i<blobs.length;i++){if(blobs[i].url===u){f=true;break}}if(!f)blobs.push({url:u,revoked:false,created:Date.now()});return undefined}return or.apply(this,arguments)};window.__VAI_IMG_RV=true}
+
+// FETCH IMAGE AS BASE64 - Support both CORS and canvas fallback
+async function fetchImageAsBase64(url) {
+    if (!url || !url.trim()) return null;
+    try {
+        const response = await fetch(url, { mode: 'cors', credentials: 'omit' });
+        if (!response.ok) throw new Error('HTTP ' + response.status);
+        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 = 100;
+                canvas.height = 100;
+                ctx.fillStyle = '#ffffff';
+                ctx.fillRect(0, 0, 100, 100);
+                ctx.drawImage(img, 0, 0, 100, 100);
+                resolve(canvas.toDataURL('image/jpeg', 0.8));
+            } catch (e) { resolve(null); }
+        };
+        img.onerror = () => resolve(null);
+        img.src = url;
+    });
+}
+
+// DOWNLOAD HELPER
+function dl(blob, fn) {
+    var url = URL.createObjectURL(blob);
+    blobs.push({url: url, revoked: false, created: Date.now()});
+    var a = document.createElement('a');
+    a.href = url;
+    a.download = fn;
+    a.style.cssText = 'position:fixed;top:-9999px;left:-9999px;';
+    document.body.appendChild(a);
+    a.click();
+    setTimeout(function() {
+        try { document.body.removeChild(a); } catch(e) {}
+    }, 200);
+}
+
+// GENERATE EXCEL WITH IMAGES
+async function genXlWithImages(code) {
+    if (typeof ExcelJS === 'undefined') {
+        t('⏳ Đang tải thư viện Excel...');
+        var s = document.createElement('script');
+        s.src = 'https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js';
+        document.head.appendChild(s);
+        await new Promise(r => s.onload = r);
+    }
+    
+    var cart = window.cart || [];
+    if (!cart.length) {
+        t('⚠️ Giỏ trống!');
+        return;
+    }
+    
+    var wb = new ExcelJS.Workbook();
+    wb.creator = 'V.AI STUDIO';
+    var ws = wb.addWorksheet('Báo giá');
+    ws.views = [{ showGridLines: false }];
+    
+    // Column widths: STT(5), Hình(11), Tên(28), Mã(13), Thông tin(20), SL(6), Đơn giá(13), CK(13), Thành tiền(15), Ghi chú(14)
+    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', vertical: 'middle' };
+    
+    // Column headers - Row 10
+    var hr = ws.getRow(10);
+    hr.height = 20;
+    ['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' }, size: 9 };
+        c.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF003F62' } };
+        c.alignment = { horizontal: 'center', vertical: 'middle', wrapText: true };
+    });
+    
+    // Process items with images
+    var cr = 11;
+    var imagePromises = [];
+    
+    for (var i = 0; i < cart.length; i++) {
+        var c = cart[i];
+        var p = (window.D && D[c.idx]) ? D[c.idx] : null;
+        var it = {
+            stt: i + 1,
+            image: p ? (p.img || p.image || '') : (c.image || c.img || ''),
+            name: c.name || (p ? (p.name || p.n || '') : '') || '',
+            model: c.sku || (p ? (p.sku || p.mod || '') : ''),
+            specs: p ? (p.info || p.desc || '') : '',
+            qty: Number(c.qty || 1),
+            price: Number(c.priceNum || (p ? p.priceNum : 0) || (p ? p.price : 0) || 0) || 0,
+            discPrice: Number(c.discPrice || c.priceNum || (p ? p.priceNum : 0) || (p ? p.price : 0) || 0) || 0,
+            total: 0,
+            note: c.note || ''
+        };
+        it.total = it.qty * it.discPrice;
+        
+        var row = ws.getRow(cr);
+        row.height = 50;
+        var bg = i % 2 === 0 ? 'FFF8FAFC' : 'FFFFFFFF';
+        var RB = {
+            top: { style: 'thin', color: { argb: bg } },
+            bottom: { style: 'thin', color: { argb: bg } },
+            left: { style: 'thin', color: { argb: bg } },
+            right: { style: 'thin', color: { argb: bg } }
+        };
+        
+        row.getCell(1).value = it.stt;
+        row.getCell(1).alignment = { horizontal: 'center', vertical: 'middle' };
+        
+        // ADD IMAGE TO COLUMN B (index 2) - WAIT FOR ALL IMAGES
+        if (it.image && it.image.startsWith('http')) {
+            imagePromises.push(
+                fetchImageAsBase64(it.image).then(function(base64, rowIdx) {
+                    return function() {
+                        if (base64) {
+                            try {
+                                var imgId = wb.addImage({
+                                    base64: base64,
+                                    extension: 'jpeg'
+                                });
+                                ws.addImage(imgId, {
+                                    tl: { col: 1, row: rowIdx - 1 },
+                                    ext: { width: 46, height: 46 }
+                                });
+                            } catch (e) {
+                                console.warn('Image add error:', e);
+                            }
+                        }
+                    };
+                }.bind(null, it.image, cr)())
+            );
+        }
+        
+        row.getCell(2).value = '';
+        row.getCell(2).alignment = { horizontal: 'center', vertical: 'middle' };
+        
+        row.getCell(3).value = it.name;
+        row.getCell(3).font = { bold: true, size: 9 };
+        row.getCell(3).alignment = { wrapText: true, vertical: 'middle' };
+        
+        row.getCell(4).value = it.model;
+        row.getCell(4).alignment = { horizontal: 'center', vertical: 'middle' };
+        
+        row.getCell(5).value = it.specs;
+        row.getCell(5).font = { size: 8, color: { argb: 'FF64748B' } };
+        row.getCell(5).alignment = { wrapText: true, vertical: 'middle' };
+        
+        row.getCell(6).value = it.qty;
+        row.getCell(6).numFmt = '#,##0';
+        row.getCell(6).alignment = { horizontal: 'center', vertical: 'middle' };
+        
+        row.getCell(7).value = it.price;
+        row.getCell(7).numFmt = '#,##0"đ"';
+        row.getCell(7).alignment = { horizontal: 'right', vertical: 'middle' };
+        
+        row.getCell(8).value = it.discPrice;
+        row.getCell(8).numFmt = '#,##0"đ"';
+        row.getCell(8).alignment = { horizontal: 'right', vertical: 'middle' };
+        if (it.discPrice < it.price) {
+            row.getCell(8).font = { bold: true, color: { argb: 'FFDC3545' } };
+        }
+        
+        row.getCell(9).value = it.total;
+        row.getCell(9).numFmt = '#,##0"đ"';
+        row.getCell(9).font = { bold: true, size: 9 };
+        row.getCell(9).alignment = { horizontal: 'right', vertical: 'middle' };
+        
+        row.getCell(10).value = it.note;
+        row.getCell(10).font = { size: 8 };
+        row.getCell(10).alignment = { wrapText: true, vertical: 'middle' };
+        
+        for (var ci = 1; ci <= 10; ci++) {
+            row.getCell(ci).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: bg } };
+            row.getCell(ci).border = RB;
+        }
+        
+        cr++;
+    }
+    
+    // WAIT FOR ALL IMAGES BEFORE PROCEEDING
+    await Promise.all(imagePromises);
+    
+    // Total row
+    var totalRow = cr;
+    ws.getRow(totalRow).height = 28;
+    ws.mergeCells(totalRow, 1, totalRow, 8);
+    var tRow = ws.getRow(totalRow);
+    tRow.getCell(1).value = 'TỔNG CỘNG';
+    tRow.getCell(1).font = { bold: true, size: 13, color: { argb: 'FFFFFFFF' } };
+    tRow.getCell(1).alignment = { horizontal: 'left', vertical: 'middle', indent: 1 };
+    var TBG = 'FF003F62';
+    for (var ci = 1; ci <= 10; ci++) {
+        tRow.getCell(ci).fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: TBG } };
+        tRow.getCell(ci).border = {
+            top: { style: 'thin', color: { argb: TBG } },
+            bottom: { style: 'thin', color: { argb: TBG } },
+            left: { style: 'thin', color: { argb: TBG } },
+            right: { style: 'thin', color: { argb: TBG } }
+        };
+    }
+    
+    var grandTotal = cart.reduce((sum, c) => {
+        var p = (window.D && D[c.idx]) ? D[c.idx] : null;
+        var price = Number(c.priceNum || (p ? p.priceNum : 0) || (p ? p.price : 0) || 0) || 0;
+        return sum + price * Number(c.qty || 1);
+    }, 0);
+    
+    tRow.getCell(9).value = grandTotal;
+    tRow.getCell(9).numFmt = '#,##0"đ"';
+    tRow.getCell(9).font = { bold: true, size: 15, color: { argb: 'FFF0B840' } };
+    tRow.getCell(9).alignment = { horizontal: 'right', vertical: 'middle' };
+    
+    wb.calcProperties.fullCalcOnLoad = true;
+    
+    var buf = await wb.xlsx.writeBuffer();
+    dl(new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }), code + '.xlsx');
+    
+    console.log('[VAI Images v1] ✅ Excel generated: ' + code + '.xlsx (with images)');
+}
+
+// PATCH: Replace the inline exportExcel function
+var origExportExcel = window.exportExcel;
+window.exportExcel = async function() {
+    var btn = document.activeElement;
+    if (btn && btn.dataset.vaiExporting === '1') return;
+    
+    // Generate order code
+    var code = 'VAS' + Date.now().toString(36).toUpperCase();
+    
+    try {
+        if (btn) {
+            btn.dataset.vaiExporting = '1';
+            btn.dataset.vaiOrigText = btn.innerHTML;
+            btn.style.opacity = '0.7';
+        }
+        await genXlWithImages(code);
+        t('✅ Excel báo giá (có hình) tải thành công!');
+    } catch (e) {
+        console.error('exportExcel error:', e);
+        t('❌ Lỗi: ' + e.message);
+    } finally {
+        if (btn) {
+            btn.dataset.vaiExporting = '0';
+            btn.style.opacity = '';
+            if (btn.dataset.vaiOrigText) btn.innerHTML = btn.dataset.vaiOrigText;
+        }
+    }
+};
+
+// PATCH: Replace exportDeliveryExcel with image support
+window.exportDeliveryExcel = async function(order) {
+    var cart = order && order.items ? order.items : (window.cart || []);
+    if (!cart.length) {
+        t('⚠️ Giỏ hàng trống!');
+        return;
+    }
+    
+    var code = (order && order.code) ? order.code : ('GH-' + Date.now().toString(36).toUpperCase());
+    
+    if (typeof ExcelJS === 'undefined') {
+        t('⏳ Đang tải thư viện Excel...');
+        var s = document.createElement('script');
+        s.src = 'https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js';
+        document.head.appendChild(s);
+        await new Promise(r => s.onload = r);
+    }
+    
+    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' };
+    
+    var HR = 4;
+    ['STT', 'Tên sản phẩm', 'Mã SP', 'SL', 'Ghi chú'].forEach(function(h, i) {
+        var c = ws.getRow(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 = 5;
+    var imagePromises = [];
+    
+    for (var i = 0; i < cart.length; i++) {
+        var c = cart[i];
+        var p = (window.D && D[c.idx]) ? D[c.idx] : null;
+        var it = {
+            stt: i + 1,
+            image: c.image || c.img || (p ? (p.img || p.image || '') : '') || '',
+            name: c.name || (p ? (p.name || p.n || '') : '') || '',
+            model: c.sku || (p ? (p.sku || p.mod || '') : '') || '',
+            qty: Number(c.qty || 1),
+            note: c.note || ''
+        };
+        
+        var row = ws.getRow(cr);
+        row.height = 50;
+        
+        row.getCell(1).value = it.stt;
+        
+        // ADD IMAGE
+        if (it.image && it.image.startsWith('http')) {
+            imagePromises.push(
+                fetchImageAsBase64(it.image).then(function(base64, rowIdx) {
+                    return function() {
+                        if (base64) {
+                            try {
+                                var imgId = wb.addImage({
+                                    base64: base64,
+                                    extension: 'jpeg'
+                                });
+                                ws.addImage(imgId, {
+                                    tl: { col: 1, row: rowIdx - 1 },
+                                    ext: { width: 46, height: 46 }
+                                });
+                            } catch (e) {}
+                        }
+                    };
+                }.bind(null, it.image, cr)())
+            );
+        }
+        
+        row.getCell(2).value = it.name;
+        row.getCell(3).value = it.model;
+        row.getCell(4).value = it.qty;
+        row.getCell(5).value = it.note;
+        
+        cr++;
+    }
+    
+    await Promise.all(imagePromises);
+    
+    var totalRow = cr;
+    ws.mergeCells(totalRow, 1, totalRow, 3);
+    ws.getCell('A' + totalRow).value = 'TỔNG SỐ LƯỢNG';
+    ws.getCell('A' + totalRow).font = { bold: true };
+    var totalQty = cart.reduce((sum, c) => sum + Number(c.qty || 1), 0);
+    ws.getCell('D' + totalRow).value = totalQty;
+    ws.getCell('D' + totalRow).font = { bold: true };
+    
+    wb.calcProperties.fullCalcOnLoad = true;
+    var buf = await wb.xlsx.writeBuffer();
+    dl(new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }), code + '.xlsx');
+    
+    t('✅ Excel giao hàng (có hình) tải thành công!');
+};
+
+// CLICK HANDLER - Capture Excel button clicks
+function handleClick(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;
+        window.exportExcel();
+        return false;
+    }
+}
+
+// INIT
+document.removeEventListener('click', handleClick);
+document.addEventListener('click', handleClick, true);
+
+console.log('[VAI Images v1] ✅ Loaded - Product images in Excel export enabled');
+})();