@fui-org/fui-cli 1.3.1 → 2.0.0

package/skills/fui-skill/scripts/component-3.0.js

@@ -241,17 +241,6 @@ Vue.component("FDynamicComponent", {
     },
 
 });
-// //===========================================================================================
-// Vue.component("FOpenwindowControl", {
-//     template: `<component v-for="(w,index) in windowList" v-bind:is="w.el" v-bind="w.attr">{{w.innerHTML}}</component>`,
-//     props: {
-//         windowList: {
-//             default: [],
-//             required: true
-//         },
-//     },
-// });
-
 //===========================================================================================
 Vue.component('FLabel', {
     props: ['items', "text", "color", 'iconText'],
@@ -1533,7 +1522,7 @@ Vue.component('HeaderBar', {
             <v-navigation-drawer 
                 v-if="leftMenuAndMobile" 
                 :color="menuStyle.leftmenu.bgcolor" 
-                :class="['text-' + menuStyle.leftmenu.textcolor, 'fp-custom-scrollbar']" 
+                :class="['text-' + menuStyle.leftmenu.textcolor, 'fp-left-menu', 'fp-stable-left-menu']" 
                 v-model="openLeftMenu" 
                 app 
                 clipped 
@@ -1559,6 +1548,7 @@ Vue.component('HeaderBar', {
                             :target="item.target" 
                             :title="item.name" 
                             :class="['text-' + menuStyle.leftmenu.textcolor]"
+                            v-on:click="rememberMenuPosition"
                             :data-active="isActiveUrl(item.url) ? 'true' : null"
                             :style="isActiveUrl(item.url) ? {backgroundColor: activeColor} : {}">
                             <template v-slot:prepend v-if="item.icon">
@@ -1578,6 +1568,7 @@ Vue.component('HeaderBar', {
                                 :href="i.url" 
                                 :target="i.target"
                                 class="fp-submenu-item"
+                                v-on:click="rememberMenuPosition"
                                 :data-active="isActiveUrl(i.url) ? 'true' : null"
                                 :style="isActiveUrl(i.url) ? {backgroundColor: activeColor} : {}">
                                 <template v-slot:prepend v-if="i.icon"><v-icon :icon="i.icon" class="opacity-100"></v-icon></template>
@@ -1662,58 +1653,71 @@ Vue.component('HeaderBar', {
             if (!url) return false;
             return this.currentFullUrl === url;
         },
-        scrollToActiveMenu: function () {
+        getDrawerContent: function () {
+            return this.$el.querySelector('.v-navigation-drawer__content');
+        },
+        rememberMenuPosition: function () {
+            var content = this.getDrawerContent();
+            if (!content) return;
+
+            sessionStorage.setItem('fpLeftMenuScrollTop', String(content.scrollTop));
+        },
+        restoreMenuPosition: function () {
             if (!this.leftMenuAndMobile || this.leftMenuAndMobile.length === 0) return;
-            
+
             var self = this;
             this.$nextTick(function() {
-                setTimeout(function() {
-                    var activeEl = self.$el.querySelector('[data-active="true"]');
-                    if (activeEl) {
-                        // Fallback cho trình duyệt cũ không hỗ trợ options
-                        if ('scrollBehavior' in document.documentElement.style) {
-                            activeEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                        } else {
-                            activeEl.scrollIntoView(true);
-                        }
+                var content = self.getDrawerContent();
+                if (!content) return;
+
+                var savedTop = Number(sessionStorage.getItem('fpLeftMenuScrollTop'));
+                if (Number.isFinite(savedTop) && savedTop >= 0) {
+                    content.scrollTop = savedTop;
+                }
+                content.scrollLeft = 0;
+
+                var activeEl = self.$el.querySelector('[data-active="true"]');
+                if (activeEl) {
+                    var containerRect = content.getBoundingClientRect();
+                    var activeRect = activeEl.getBoundingClientRect();
+                    var isOutside = activeRect.top < containerRect.top || activeRect.bottom > containerRect.bottom;
+
+                    if (isOutside) {
+                        content.scrollTop += activeRect.top - containerRect.top
+                            - ((containerRect.height - activeRect.height) / 2);
                     }
-                }, 300);
+                }
+
+                self._menuScrollListener = function() {
+                    if (content.scrollLeft !== 0) content.scrollLeft = 0;
+                    sessionStorage.setItem('fpLeftMenuScrollTop', String(content.scrollTop));
+                };
+                content.addEventListener('scroll', self._menuScrollListener, { passive: true });
             });
         },
-        injectScrollbarStyles: function () {
+        injectLeftMenuStyles: function () {
             if (!this.leftMenuAndMobile || this.leftMenuAndMobile.length === 0) return;
-            
-            var styleId = 'fp-custom-scrollbar-style';
+
+            var styleId = 'fp-left-menu-style';
             if (document.getElementById(styleId)) return;
-            
-            var thumbColor = 'rgba(255,255,255,0.3)';
-            var thumbHoverColor = 'rgba(255,255,255,0.5)';
-            var trackColor = 'rgba(0,0,0,0.1)';
-            
+
+            // Thanh cuộn KHÔNG vẽ ở đây: lấy từ .fpScrollbar trong projectdefaultstyle.css
+            // (rule đó đã phủ sẵn .v-navigation-drawer__content).
             var style = document.createElement('style');
             style.id = styleId;
             style.textContent = [
-                '.fp-custom-scrollbar .v-navigation-drawer__content::-webkit-scrollbar {',
-                '    width: 5px;',
-                '}',
-                '.fp-custom-scrollbar .v-navigation-drawer__content::-webkit-scrollbar-track {',
-                '    background: ' + trackColor + ';',
+                '.fp-left-menu .v-navigation-drawer__content {',
+                '    overflow-x: hidden !important;',
+                '    scroll-behavior: auto !important;',
                 '}',
-                '.fp-custom-scrollbar .v-navigation-drawer__content::-webkit-scrollbar-thumb {',
-                '    background: ' + thumbColor + ';',
-                '    border-radius: 3px;',
+                '.fp-stable-left-menu,',
+                '.fp-stable-left-menu.v-navigation-drawer {',
+                '    transition: none !important;',
                 '}',
-                '.fp-custom-scrollbar .v-navigation-drawer__content::-webkit-scrollbar-thumb:hover {',
-                '    background: ' + thumbHoverColor + ';',
-                '}',
-                '.fp-custom-scrollbar .v-navigation-drawer__content {',
-                '    scrollbar-width: thin;',
-                '    scrollbar-color: ' + thumbColor + ' ' + trackColor + ';',
-                '}',
-                '.fp-custom-scrollbar .v-list-group__items .fp-submenu-item {',
+                '.fp-left-menu .v-list-group__items .fp-submenu-item {',
                 '    padding-left: 32px !important;',
                 '}',
-                '.fp-custom-scrollbar .v-list-group__items .v-list-item__prepend {',
+                '.fp-left-menu .v-list-group__items .v-list-item__prepend {',
                 '    width: auto;',
                 '    margin-right: 8px;',
                 '}'
@@ -1734,11 +1738,16 @@ Vue.component('HeaderBar', {
     },
     mounted: function() {
         if (this.leftMenuAndMobile && this.leftMenuAndMobile.length > 0) {
-            this.injectScrollbarStyles();
-            this.scrollToActiveMenu();
+            this.injectLeftMenuStyles();
+            this.restoreMenuPosition();
         }
     },
     beforeDestroy: function() {
+        this.rememberMenuPosition();
+        var content = this.getDrawerContent();
+        if (content && this._menuScrollListener) {
+            content.removeEventListener('scroll', this._menuScrollListener);
+        }
         window.removeEventListener('scroll', this._scrollListener);
     }
 });
@@ -2350,7 +2359,8 @@ Vue.component('FPdfmake', {
 
 //===========================================================================================
 Vue.component('FExcelReader', {
-    emits: ['update:modelValue', 'load', 'error', 'action-error'],
+    inheritAttrs: false,
+    emits: ['update:modelValue', 'load', 'error', 'action-error', 'cancel'],
     props: {
         modelValue: { type: Array, default: () => [] },
 
@@ -2359,27 +2369,75 @@ Vue.component('FExcelReader', {
         dateFormat: { type: String, default: 'dd/mm/yyyy' },
         defval:     { type: [String, Number], default: '' },
 
-        sheet:    { type: [String, Number], default: 0 },
-        skipRows: { type: [String, Number], default: 0 },
+        sheet:       { type: [String, Number], default: null },
+        sheetPicker: { type: [Boolean, String], default: true },
+        sheetStats:  { type: [Boolean, String], default: false },
+        skipRows:    { type: [String, Number], default: 0 },
 
-        label:     { type: String, default: 'Load Excel' },
-        iconText:  { type: String, default: 'mdi-grid' },
-        accept:    { type: String, default: '.xlsx,.xlsb,.xlsm,.xls,.csv,.txt,.ods,.dbf,.prn,.html,.htm' },
-        maxSize: { type: [String, Number], default: 20 },
+        label:       { type: String, default: 'Load Excel' },
+        iconText:    { type: String, default: 'mdi-grid' },
+        accept:      { type: String, default: '.xlsx,.xlsb,.xlsm,.xls,.csv,.txt,.ods,.dbf,.prn,.html,.htm' },
+        maxSize:     { type: [String, Number], default: 20 },
         loadTimeout: { type: [String, Number], default: 15000 },
+        loadingText: { type: String, default: 'Đang xử lý dữ liệu...' },
+
+        notify:        { type: [Boolean, String], default: true },
+        notifyTimeout: { type: [String, Number], default: 6000 },
 
         action: { type: Object, default: null }
     },
     template: `
         <div>
             <v-btn :text="label" v-bind="$attrs" :prepend-icon="iconText"
-                   :disabled="parsing" :loading="busy" @click="onButtonClick"></v-btn>
-            <input ref="uploader" style="display:none" type="file" :multiple="false"
-                   :accept="accept" @change="onchange" onclick="this.value=null;">
+                   :disabled="parsing" @click="onButtonClick"></v-btn>
+            <input ref="uploader" style="display:none" type="file" :multiple="false" :accept="accept" @change="onchange" onclick="this.value=null;">
+
+            <v-dialog v-model="loading" persistent width="320">
+                <v-card class="pa-8 d-flex flex-column align-center justify-center text-center">
+                    <div class="fui-loading"></div>
+                    <div class="mt-5 body-2">{{ loadingMsg }}</div>
+                    <div v-if="loadingSub" class="mt-1 caption grey--text text-truncate" style="max-width:100%;">{{ loadingSub }}</div>
+                </v-card>
+            </v-dialog>
+
+            <v-dialog v-model="dialog" max-width="440" persistent>
+                <v-card>
+                    <v-card-title class="text-subtitle-1">Chọn sheet cần đọc</v-card-title>
+                    <v-card-text class="pb-0">
+                        <div class="text-caption mb-2">{{ pendingName }}</div>
+                        <v-list density="compact" nav max-height="300" class="overflow-y-auto">
+                            <v-list-item v-for="s in sheetList" :key="s.name"
+                                         :active="s.name === sheetChoice"
+                                         @click="sheetChoice = s.name">
+                                <v-list-item-title>{{ s.name }}</v-list-item-title>
+                                <v-list-item-subtitle v-if="s.info">{{ s.info }}</v-list-item-subtitle>
+                            </v-list-item>
+                        </v-list>
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn text="Hủy" @click="pickSheet(null)"></v-btn>
+                        <v-btn text="Chọn" color="primary" :disabled="!sheetChoice"
+                               @click="pickSheet(sheetChoice)"></v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+
+            <v-snackbar v-model="snack" :color="snackColor" :timeout="Number(notifyTimeout)" location="top">
+                {{ snackMsg }}
+                <template #actions>
+                    <v-btn variant="text" @click="snack = false">Đóng</v-btn>
+                </template>
+            </v-snackbar>
         </div>
     `,
     data() {
-        return { busy: false, parsing: false, reqId: 0 };
+        return {
+            parsing: false, reqId: 0,
+            loading: false, loadingMsg: '', loadingSub: '',
+            dialog: false, sheetList: [], sheetChoice: null, pendingName: '',
+            snack: false, snackMsg: '', snackColor: 'error'
+        };
     },
     computed: {
         optHeader() {
@@ -2391,26 +2449,51 @@ Vue.component('FExcelReader', {
             if (s.toUpperCase() === 'A') return 'A';
             return h;
         },
-        optRaw() {
-            if (typeof this.raw === 'boolean') return this.raw;
-            return ['true', '1', 'yes'].includes(String(this.raw).trim().toLowerCase());
-        },
+        optRaw()    { return this.toBool(this.raw, false); },
+        usePicker() { return this.toBool(this.sheetPicker, true); },
+        useStats()  { return this.toBool(this.sheetStats, false); },
+        useNotify() { return this.toBool(this.notify, true); },
         optRange() {
             const n = parseInt(this.skipRows, 10);
             return n > 0 ? n : undefined;
         },
         limitMB() {
-            const mb = parseFloat(this.maxSize);
-            return isNaN(mb) ? 20 : mb;     // NaN -> default, KHÔNG bỏ giới hạn
+            const n = parseFloat(this.maxSize);
+            if (isNaN(n)) return 20;
+            return n > 0 ? n : 0;
         }
     },
     methods: {
+        toBool(v, def) {
+            if (typeof v === 'boolean') return v;
+            if (v === null || v === undefined || v === '') return def;
+            const s = String(v).trim().toLowerCase();
+            if (['true', '1', 'yes'].includes(s)) return true;
+            if (['false', '0', 'no'].includes(s)) return false;
+            return def;
+        },
+
+        // ⭐ nhường 1 khung hình để trình duyệt kịp vẽ dialog trước khi chạy code đồng bộ nặng
+        nextPaint() {
+            return new Promise(resolve => {
+                requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(resolve, 0)));
+            });
+        },
+
+        showLoading(msg, sub) {
+            this.loadingMsg = msg || this.loadingText;
+            this.loadingSub = sub || '';
+            this.loading = true;
+            return this.$nextTick().then(() => this.nextPaint());
+        },
+
+        hideLoading() {
+            this.loading = false;
+            this.loadingSub = '';
+        },
+
         onButtonClick() {
-            if (this.parsing) return;                       // (2) chống click chồng
-            this.busy = true;
-            window.addEventListener('focus', () => {
-                setTimeout(() => { if (!this.parsing) this.busy = false; }, 300);
-            }, { once: true });
+            if (this.parsing) return;
             this.$refs.uploader.click();
         },
 
@@ -2418,38 +2501,141 @@ Vue.component('FExcelReader', {
             const file = evt.target.files && evt.target.files[0];
             evt.target.value = '';
 
-            if (this.parsing) return;                       // (2)
-            if (!file) { this.busy = false; return; }
+            if (this.parsing) return;
+            if (!file) return;
 
-            const id = ++this.reqId;                        // (1) vé của lượt này
+            const id = ++this.reqId;
             this.parsing = true;
-            this.busy = true;
 
             let result;
             try {
-                if (this.limitMB > 0 && file.size > this.limitMB * 1024 * 1024)
-                    throw new Error('File vượt quá ' + this.limitMB + 'MB');
+                if (this.limitMB > 0 && file.size > this.limitMB * 1048576)
+                    throw new Error('File "' + file.name + '" nặng ' + this.fmtSize(file.size)
+                                  + ', vượt giới hạn ' + this.limitMB + 'MB');
 
+                await this.showLoading('Đang mở tập tin...', file.name);
                 await this.ensureXLSX();
-                result = await this.parseFile(file);
 
-                if (id !== this.reqId) return;              // (1) kết quả cũ -> vứt
+                const buf = await this.readBuffer(file);
+                if (id !== this.reqId) return;
+                const u8 = new Uint8Array(buf);
+
+                await this.showLoading('Đang đọc cấu trúc tập tin...', file.name);
+                const wsname = await this.resolveSheet(u8, file);
+                if (id !== this.reqId) return;
+
+                if (!wsname) {
+                    this.$emit('cancel', { fileName: file.name, reason: 'sheet' });
+                    return;
+                }
+
+                // ⭐ dialog loading cho MỌI trường hợp, kể cả file chỉ 1 sheet
+                await this.showLoading(this.loadingText, 'Sheet: ' + wsname);
+                result = this.parseSheet(u8, wsname, file);
+                if (id !== this.reqId) return;
             } catch (err) {
                 if (id === this.reqId) this.fail(err, file);
                 else console.warn('[FExcelReader] bỏ qua lỗi của lượt cũ:', err);
                 return;
             } finally {
-                if (id === this.reqId) { this.parsing = false; this.busy = false; }
+                if (id === this.reqId) { this.parsing = false; this.hideLoading(); }
             }
 
-            // ===== Từ đây trở xuống: Excel ĐÃ đọc thành công, không thể thành error =====
+            // ===== Excel ĐÃ đọc xong, từ đây không thể thành error =====
             this.$emit('update:modelValue', result.rows);
             this.$emit('load', result.meta);
 
             await this.$nextTick();
-            this.runAction(file);                           // (3) tách hẳn khỏi try
+            this.runAction(file);
+        },
+
+        // ---------- PHA 1: chỉ lấy tên sheet ----------
+        listSheets(u8) {
+            if (this.useStats) {
+                const wb = XLSX.read(u8, { bookSheets: true, bookProps: true, dense: true });
+                return { names: wb.SheetNames, wb };
+            }
+            const wb = XLSX.read(u8, { bookSheets: true });
+            return { names: wb.SheetNames, wb: null };
+        },
+
+        resolveSheet(u8, file) {
+            const sp = this.sheet;
+            const { names, wb } = this.listSheets(u8);
+            if (!names || !names.length) throw new Error('File "' + file.name + '" không có sheet nào');
+
+            if (sp !== null && sp !== undefined && sp !== '') {
+                const s = String(sp).trim();
+                if (/^\d+$/.test(s)) {
+                    const n = names[parseInt(s, 10)];
+                    if (!n) throw new Error('Không có sheet ở vị trí ' + s
+                                          + ' (file chỉ có ' + names.length + ' sheet)');
+                    return Promise.resolve(n);
+                }
+                if (names.indexOf(s) === -1)
+                    throw new Error('Không tìm thấy sheet "' + s + '". File có: ' + names.join(', '));
+                return Promise.resolve(s);
+            }
+
+            if (names.length === 1 || !this.usePicker) return Promise.resolve(names[0]);
+
+            this.sheetList   = names.map(n => this.sheetInfo(wb, n));
+            this.sheetChoice = (this.sheetList.find(s => !s.empty) || this.sheetList[0]).name;
+            this.pendingName = file.name + ' — ' + names.length + ' sheet';
+            this.hideLoading();                 // ẩn loading trong lúc chờ người dùng
+            this.dialog = true;
+            return new Promise(resolve => { this._pickSheet = resolve; });
         },
 
+        sheetInfo(wb, name) {
+            if (!wb) return { name, info: '', empty: false };
+            const ref = wb.Sheets[name] && wb.Sheets[name]['!ref'];
+            if (!ref) return { name, info: 'sheet rỗng', empty: true };
+            const r = XLSX.utils.decode_range(ref);
+            return {
+                name,
+                info: (r.e.r - r.s.r + 1) + ' dòng × ' + (r.e.c - r.s.c + 1) + ' cột',
+                empty: false
+            };
+        },
+
+        pickSheet(name) {
+            this.dialog = false;
+            const done = this._pickSheet;
+            this._pickSheet = null;
+            if (done) done(name || null);
+        },
+
+        // ---------- PHA 2: parse đúng 1 sheet ----------
+        parseSheet(u8, wsname, file) {
+            const wb = XLSX.read(u8, { type: 'array', cellDates: true, sheets: wsname });
+            const ws = wb.Sheets[wsname];
+            if (!ws) throw new Error('Không đọc được sheet "' + wsname + '"');
+
+            const rows = XLSX.utils.sheet_to_json(ws, {
+                header: this.optHeader,
+                raw:    this.optRaw,
+                dateNF: this.dateFormat,
+                defval: this.defval,
+                range:  this.optRange,
+                blankrows: false
+            });
+
+            return {
+                rows,
+                meta: {
+                    rows,
+                    rowCount:   rows.length,
+                    headers:    this.optHeader === 1 && rows.length ? rows[0] : Object.keys(rows[0] || {}),
+                    sheetName:  wsname,
+                    sheetNames: wb.SheetNames,
+                    fileName:   file.name,
+                    fileSize:   file.size
+                }
+            };
+        },
+
+        // ---------- phụ trợ ----------
         ensureXLSX() {
             return new Promise((resolve, reject) => {
                 if (typeof XLSX !== 'undefined') return resolve();
@@ -2461,7 +2647,7 @@ Vue.component('FExcelReader', {
                 const timer = setTimeout(() => {
                     if (settled) return;
                     settled = true;
-                    reject(new Error('Quá thời gian nạp thư viện XLSX'));
+                    reject(new Error('Quá thời gian nạp thư viện đọc Excel'));
                 }, ms);
 
                 new Loader().require(['/include/excel/xlsx.full.min.js'], () => {
@@ -2470,7 +2656,7 @@ Vue.component('FExcelReader', {
                     clearTimeout(timer);
                     typeof XLSX !== 'undefined'
                         ? resolve()
-                        : reject(new Error('Nạp thư viện XLSX thất bại'));
+                        : reject(new Error('Nạp thư viện đọc Excel thất bại'));
                 });
             });
         },
@@ -2479,71 +2665,52 @@ Vue.component('FExcelReader', {
             return new Promise((resolve, reject) => {
                 const reader = new FileReader();
                 reader.onload  = e  => resolve(e.target.result);
-                reader.onerror = () => reject(new Error('Không đọc được file: ' + file.name));
+                reader.onerror = () => reject(new Error('Không đọc được file "' + file.name + '"'));
                 reader.onabort = () => reject(new Error('Việc đọc file bị hủy'));
                 reader.readAsArrayBuffer(file);
             });
         },
 
-        async parseFile(file) {
-            const buf = await this.readBuffer(file);
-            const wb  = XLSX.read(new Uint8Array(buf), { type: 'array', cellDates: true });
-
-            const isIndex = typeof this.sheet === 'number' || /^\d+$/.test(String(this.sheet));
-            const wsname = isIndex
-                ? wb.SheetNames[parseInt(this.sheet, 10)]
-                : (wb.SheetNames.includes(this.sheet) ? this.sheet : wb.SheetNames[0]);
-
-            const ws = wb.Sheets[wsname];
-            if (!ws) throw new Error('Không tìm thấy sheet: ' + this.sheet);
-
-            const rows = XLSX.utils.sheet_to_json(ws, {
-                header: this.optHeader,
-                raw:    this.optRaw,
-                dateNF: this.dateFormat,
-                defval: this.defval,
-                range:  this.optRange,
-                blankrows: false
-            });
-
-            return {
-                rows,
-                meta: {
-                    rows,
-                    rowCount:   rows.length,
-                    headers:    this.optHeader === 1 && rows.length ? rows[0] : Object.keys(rows[0] || {}),
-                    sheetName:  wsname,
-                    sheetNames: wb.SheetNames,
-                    fileName:   file.name
-                }
-            };
-        },
-
         runAction(file) {
             if (!this.action || typeof CALL !== 'function') return;
             const onErr = (err) => {
+                const msg = (err && err.message) || String(err);
                 console.error('[FExcelReader] action lỗi (dữ liệu Excel vẫn hợp lệ):', err);
-                this.$emit('action-error', {
-                    message: (err && err.message) || String(err),
-                    fileName: file.name
-                });
+                this.toast('Đọc Excel thành công nhưng xử lý sau đó lỗi: ' + msg, 'warning');
+                this.$emit('action-error', { message: msg, fileName: file.name });
             };
             try {
                 const r = CALL(this.action);
-                if (r && typeof r.then === 'function') r.then(null, onErr);   // action async
+                if (r && typeof r.then === 'function') r.then(null, onErr);
             } catch (err) {
                 onErr(err);
             }
         },
 
+        toast(msg, color) {
+            if (!this.useNotify) return;
+            this.snackColor = color || 'error';
+            this.snackMsg   = msg;
+            this.snack      = true;
+        },
+
+        fmtSize(bytes) {
+            if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + 'MB';
+            if (bytes >= 1024)    return (bytes / 1024).toFixed(0) + 'KB';
+            return bytes + 'B';
+        },
+
         fail(err, file) {
+            const msg = (err && err.message) || String(err);
             console.error('[FExcelReader]', err);
             this.parsing = false;
-            this.busy = false;
-            this.$emit('error', {
-                message: (err && err.message) || String(err),
-                fileName: file ? file.name : null
-            });
+            this.dialog  = false;
+            this.hideLoading();
+            this.toast(msg, 'error');
+            this.$emit('error', { message: msg, fileName: file ? file.name : null });
         }
+    },
+    beforeUnmount() {
+        if (this._pickSheet) { this._pickSheet(null); this._pickSheet = null; }
     }
 });