@fui-org/fui-cli 1.3.1 → 2.0.0

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

@@ -1872,151 +1872,6 @@ Vue.component('fp-profile', {
     },
 });
 //===========================================================================================
-// Vue.component('header-bar', {
-//     props: {
-//         menu: {
-//             default: null
-//         },
-//         menuLeft: {
-//             default: null
-//         },
-//         title: {
-//             default: ''
-//         },
-//         logo: {
-//             default: ""
-//         },
-//         expand: {
-//             default: true
-//         },
-//         menuStyle: {
-//             default: {
-//                 topmenu: {
-//                     bgcolor: "primary",
-//                     textcolor: "white"
-//                 },
-//                 leftmenu: {
-//                     bgcolor: "primary",
-//                     textcolor: "white"
-//                 }
-//             }
-//         },
-//         component: {
-//             default: null
-//         },
-//         userProfile: {
-//             default: null
-//         },
-//     },
-//     template: `<div>
-//             <v-app-bar v-if="isMobile || menu" light app dense flat clipped-left :color="menuStyle.topmenu.bgcolor" :style="{ 'box-shadow': 'rgba(0, 0, 0, 0.5) 0px 0px '+ boxShadow +'px 0px !important'}">
-//                 <v-img class="mr-3" v-if="logo" :src="logo" height="26" width="26" max-height="26" max-width="26" contain></v-img>
-//                 <v-toolbar-title v-if="title" :class="[menuStyle.topmenu.textcolor + '--text']">{{title}}</v-toolbar-title>
-//                 <v-spacer></v-spacer>
-//                 <v-toolbar-items class="hidden-sm-and-down" v-if="menu">
-//                     <v-menu offset-y v-for="(item, index) in menu.filter(info => checkright(info))" :key="index">
-//                         <template v-slot:activator="{ on }">
-//                             <v-btn v-on="on" :href="(!item.submenu?item.url:'')" :target="item.target" text :class="[menuStyle.topmenu.textcolor + '--text']">
-//                                 <v-icon v-if="item.icon" v-text="item.icon" left class="mr-1"></v-icon>
-//                                 {{ item.name }}<v-icon v-if="!!item.submenu">mdi-chevron-down</v-icon>
-//                             </v-btn>
-//                         </template>
-//                         <v-list v-if="!!item.submenu">
-//                             <v-list-item v-for="(i, index) in item.submenu.filter(info => checkright(info))" :key="index" :href="i.url" :target="i.target">
-//                                 <v-list-item-title>{{ i.name }}</v-list-item-title>
-//                             </v-list-item>
-//                         </v-list>
-//                     </v-menu>
-//                 </v-toolbar-items>
-//                 <component v-if="!isMobile && component" v-for="(c, index) in component" :key="index" v-bind:is="c.el" v-bind="c.attr"></component>
-//                 <fp-profile v-if="!isMobile && userProfile" v-bind="userProfile"></fp-profile>
-//                 <v-app-bar-nav-icon v-if="isMobile && leftMenuAndMobile" :color="menuStyle.topmenu.textcolor" @click.stop="openLeftMenu=!openLeftMenu"></v-app-bar-nav-icon>
-//             </v-app-bar>
-
-//             <v-navigation-drawer v-if="leftMenuAndMobile" :class="[menuStyle.leftmenu.bgcolor, menuStyle.leftmenu.textcolor + '--text','fpScrollbar']" v-model="openLeftMenu" app clipped :right="isMobile" :permanent="!isMobile" :mini-variant="pinLeftMenu && !isMobile" :expand-on-hover="pinLeftMenu && !isMobile">
-//                 <template v-slot:prepend v-if="!isMobile && !menu">
-//                     <v-list-item class="px-0 pt-1 pl-3">
-//                         <v-img class="mr-1" v-if="logo" :src="logo" height="30" width="30" max-height="30" max-width="30" contain></v-img>
-//                         <v-toolbar-title v-if="title" :class="[menuStyle.leftmenu.textcolor + '--text']">{{title}}</v-toolbar-title>
-//                     </v-list-item>
-//                 </template>
-//                 <v-list class="text-left pa-0" :color="menuStyle.leftmenu.bgcolor" dark v-if="leftMenuAndMobile">
-//                     <template v-for="(item, index) in leftMenuAndMobile.filter(info => checkright(info))" :key="index">
-//                         <v-list-item v-if="!item.submenu" :href="item.url" :target="item.target">
-//                             <v-icon v-if="item.icon" v-text="item.icon" class="mr-2"></v-icon>
-//                             <v-list-item-title :class="[menuStyle.leftmenu.textcolor + '--text']">{{ item.name }}</v-list-item-title>
-//                         </v-list-item>
-//                         <v-list-group v-if="item.submenu" v-model="item.active" :color="menuStyle.leftmenu.textcolor">
-//                             <template v-slot:activator>
-//                                 <v-icon v-if="item.icon" v-text="item.icon" class="mr-2"></v-icon>
-//                                 <v-list-item-title :class="[menuStyle.leftmenu.textcolor + '--text']">{{ item.name }}</v-list-item-title>
-//                             </template>
-//                             <v-list-item v-for="(i, index) in item.submenu.filter(info => checkright(info))" :key="index" :href="i.url" :target="i.target">
-//                                 <v-list-item-subtitle class="ml-6" :class="[menuStyle.leftmenu.textcolor + '--text']">{{ i.name }}</v-list-item-title>
-//                             </v-list-item>
-//                         </v-list-group>
-//                     </template>
-//                 </v-list>
-//                 <template v-slot:append>
-//                     <component v-if="!menu && component || isMobile" v-for="(c, index) in component" :key="index" v-bind:is="c.el" v-bind="c.attr"></component>
-//                     <v-list-item class="pa-0">
-//                         <fp-profile v-if="!menu && userProfile || isMobile" v-bind="userProfile" open-on-hover></fp-profile>
-//                         <v-spacer></v-spacer>
-//                         <v-btn @click.stop="on_of_menu" v-if="(menu || leftMenuAndMobile) && !isMobile" :color="menuStyle.topmenu.textcolor" icon><v-icon :color="menuStyle.leftmenu.textcolor">{{ pinLeftMenu?'mdi-pin-outline':'mdi-pin-off-outline'}}</v-icon></v-btn>
-//                     </v-list-item>
-//               </template>
-//             </v-navigation-drawer>
-//         </div>`,
-//     data: function () {
-//         var leftMenuAndMobile = []
-//         if (this.$vuetify.breakpoint.smAndDown) {
-//             _.forEach(_.union(this.menu, this.menuLeft), function (value) {
-//                 if (rightTest(value.right)) leftMenuAndMobile.push(value);
-//             });
-
-//             if (leftMenuAndMobile.length == 0) leftMenuAndMobile = null;
-//         }
-//         else leftMenuAndMobile = this.menuLeft;
-
-//         return {
-//             leftMenuAndMobile: leftMenuAndMobile,
-//             openLeftMenu: this.isMobile,
-//             pinLeftMenu: (sessionStorage.getItem("fpOpenmenuAppBar") == null ? !this.expand : sessionStorage.getItem("fpOpenmenuAppBar") == 'true'),
-//             boxShadow: 0
-//         }
-//     },
-//     computed: {
-//         isMobile() {
-//             if (this.$vuetify.breakpoint.smAndDown) return true
-//             else return false;
-//         }
-//     },
-//     methods: {
-//         on_of_menu: function (e) {
-//             this.pinLeftMenu = !this.pinLeftMenu
-//             sessionStorage.setItem("fpOpenmenuAppBar", this.pinLeftMenu);
-//         },
-//         checkright: function (item) {
-//             if (!item.right) return true;
-//             if (!vueData.user) return false;
-
-//             return rightTest(item.right);
-//         }
-//     },
-//     created() {
-//         if (!this.$isServer) {
-//             this._scrollListener = () => {
-//                 this.boxShadow = Math.round(window.pageYOffset) / 10;
-//                 if (this.boxShadow > 10) this.boxShadow = 10;
-//             }
-//             this._scrollListener()
-//             window.addEventListener('scroll', this._scrollListener)
-//         }
-//     },
-//     beforeDestroy() {
-//         window.removeEventListener('scroll', this._scrollListener)
-//     }
-// });
 Vue.component('header-bar', {
     props: {
         menu: {
@@ -2083,7 +1938,7 @@ Vue.component('header-bar', {
             <v-navigation-drawer \
                 v-if=\"leftMenuAndMobile\" \
                 ref=\"navDrawer\"\
-                :class=\"[menuStyle.leftmenu.bgcolor, menuStyle.leftmenu.textcolor + '--text', 'fp-custom-scrollbar']\" \
+                :class=\"[menuStyle.leftmenu.bgcolor, menuStyle.leftmenu.textcolor + '--text']\" \
                 v-model=\"openLeftMenu\" \
                 app \
                 clipped \
@@ -2216,39 +2071,6 @@ Vue.component('header-bar', {
                     }
                 }, 300);
             });
-        },
-        injectScrollbarStyles: function () {
-            if (!this.leftMenuAndMobile || this.leftMenuAndMobile.length === 0) return;
-
-            var styleId = 'fp-custom-scrollbar-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)';
-
-            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-custom-scrollbar .v-navigation-drawer__content::-webkit-scrollbar-thumb {',
-                '    background: ' + thumbColor + ';',
-                '    border-radius: 3px;',
-                '}',
-                '.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 + ';',
-                '}'
-            ].join('\n');
-            document.head.appendChild(style);
         }
     },
     created: function () {
@@ -2264,7 +2086,8 @@ Vue.component('header-bar', {
     },
     mounted: function () {
         if (this.leftMenuAndMobile && this.leftMenuAndMobile.length > 0) {
-            this.injectScrollbarStyles();
+            // Thanh cuộn menu trái lấy từ .fpScrollbar trong projectdefaultstyle.css
+            // (rule đó đã phủ sẵn .v-navigation-drawer__content).
             this.scrollToActiveMenu();
         }
     },
@@ -2941,30 +2764,82 @@ Vue.component('f-excel-reader', {
         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 v-bind="$attrs" v-on="$listeners"
-                   :disabled="parsing" :loading="busy" @click="onButtonClick">
+                   :disabled="parsing" @click="onButtonClick">
                 <v-icon v-if="iconText" left>{{ iconText }}</v-icon>
                 {{ label }}
             </v-btn>
-            <input ref="uploader" style="display:none" type="file" :multiple="false"
-                   :accept="accept" @change="onchange" onclick="this.value=null;">
+            <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="subtitle-1">Chọn sheet cần đọc</v-card-title>
+                    <v-card-text class="pb-0">
+                        <div class="caption mb-2">{{ pendingName }}</div>
+                        <v-list dense style="max-height:300px; overflow-y:auto;">
+                            <v-list-item v-for="s in sheetList" :key="s.name"
+                                         @click="sheetChoice = s.name">
+                                <v-list-item-content>
+                                    <v-list-item-title
+                                        :class="{ 'primary--text font-weight-bold': s.name === sheetChoice }">
+                                        {{ s.name }}
+                                    </v-list-item-title>
+                                    <v-list-item-subtitle v-if="s.info">{{ s.info }}</v-list-item-subtitle>
+                                </v-list-item-content>
+                            </v-list-item>
+                        </v-list>
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn text @click="pickSheet(null)">Hủy</v-btn>
+                        <v-btn text color="primary" :disabled="!sheetChoice"
+                               @click="pickSheet(sheetChoice)">Chọn</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+
+            <v-snackbar v-model="snack" :color="snackColor" :timeout="Number(notifyTimeout)" top>
+                {{ snackMsg }}
+                <template #action="{ attrs }">
+                    <v-btn text v-bind="attrs" @click="snack = false">Đóng</v-btn>
+                </template>
+            </v-snackbar>
         </div>
     `,
     data: function () {
-        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: function () {
@@ -2976,29 +2851,56 @@ Vue.component('f-excel-reader', {
             if (s.toUpperCase() === 'A') return 'A';
             return h;
         },
-        optRaw: function () {
-            if (typeof this.raw === 'boolean') return this.raw;
-            var s = String(this.raw).trim().toLowerCase();
-            return s === 'true' || s === '1' || s === 'yes';
-        },
+        optRaw:    function () { return this.toBool(this.raw, false); },
+        usePicker: function () { return this.toBool(this.sheetPicker, true); },
+        useStats:  function () { return this.toBool(this.sheetStats, false); },
+        useNotify: function () { return this.toBool(this.notify, true); },
         optRange: function () {
             var n = parseInt(this.skipRows, 10);
             return n > 0 ? n : undefined;
         },
         limitMB: function () {
-            var mb = parseFloat(this.maxSize);
-            return isNaN(mb) ? 20 : mb;
+            var n = parseFloat(this.maxSize);
+            if (isNaN(n)) return 20;
+            return n > 0 ? n : 0;
         }
     },
     methods: {
-        onButtonClick: function () {
+        toBool: function (v, def) {
+            if (typeof v === 'boolean') return v;
+            if (v === null || v === undefined || v === '') return def;
+            var s = String(v).trim().toLowerCase();
+            if (s === 'true' || s === '1' || s === 'yes') return true;
+            if (s === 'false' || s === '0' || s === 'no') return false;
+            return def;
+        },
+
+        nextPaint: function () {
+            return new Promise(function (resolve) {
+                requestAnimationFrame(function () {
+                    requestAnimationFrame(function () { setTimeout(resolve, 0); });
+                });
+            });
+        },
+
+        showLoading: function (msg, sub) {
             var ctrl = this;
-            if (ctrl.parsing) return;                       // (2)
-            ctrl.busy = true;
-            window.addEventListener('focus', function () {
-                setTimeout(function () { if (!ctrl.parsing) ctrl.busy = false; }, 300);
-            }, { once: true });
-            ctrl.$refs.uploader.click();
+            ctrl.loadingMsg = msg || ctrl.loadingText;
+            ctrl.loadingSub = sub || '';
+            ctrl.loading = true;
+            return new Promise(function (resolve) {
+                ctrl.$nextTick(function () { ctrl.nextPaint().then(resolve); });
+            });
+        },
+
+        hideLoading: function () {
+            this.loading = false;
+            this.loadingSub = '';
+        },
+
+        onButtonClick: function () {
+            if (this.parsing) return;
+            this.$refs.uploader.click();
         },
 
         onchange: function (evt) {
@@ -3006,33 +2908,57 @@ Vue.component('f-excel-reader', {
             var file = evt.target.files && evt.target.files[0];
             evt.target.value = '';
 
-            if (ctrl.parsing) return;                       // (2)
-            if (!file) { ctrl.busy = false; return; }
+            if (ctrl.parsing) return;
+            if (!file) return;
 
-            var id = ++ctrl.reqId;                          // (1)
-            var parsed = false;                             // (3) cờ chốt: đã đọc xong Excel
+            var id = ++ctrl.reqId;
+            var parsed = false;
+            var u8 = null;
             ctrl.parsing = true;
-            ctrl.busy = true;
 
             Promise.resolve()
                 .then(function () {
-                    if (ctrl.limitMB > 0 && file.size > ctrl.limitMB * 1024 * 1024)
-                        throw new Error('File vượt quá ' + ctrl.limitMB + 'MB');
-                    return ctrl.ensureXLSX();
+                    if (ctrl.limitMB > 0 && file.size > ctrl.limitMB * 1048576)
+                        throw new Error('File "' + file.name + '" nặng ' + ctrl.fmtSize(file.size)
+                                      + ', vượt giới hạn ' + ctrl.limitMB + 'MB');
+                    return ctrl.showLoading('Đang mở tập tin...', file.name);
                 })
-                .then(function () { return ctrl.parseFile(file); })
-                .then(function (res) {
-                    if (id !== ctrl.reqId) return;          // (1) lượt cũ -> vứt
-                    ctrl.parsing = false;
-                    ctrl.busy = false;
-                    parsed = true;
-
-                    ctrl.$emit('input', res.rows);
-                    ctrl.$emit('load', res.meta);
-                    ctrl.$nextTick(function () { ctrl.runAction(file); });   // (3)
+                .then(function () { return ctrl.ensureXLSX(); })
+                .then(function () { return ctrl.readBuffer(file); })
+                .then(function (buf) {
+                    if (id !== ctrl.reqId) return null;
+                    u8 = new Uint8Array(buf);
+                    return ctrl.showLoading('Đang đọc cấu trúc tập tin...', file.name)
+                        .then(function () { return ctrl.resolveSheet(u8, file); });
+                })
+                .then(function (wsname) {
+                    if (id !== ctrl.reqId) return;
+
+                    if (!wsname) {
+                        ctrl.parsing = false;
+                        ctrl.hideLoading();
+                        parsed = true;
+                        ctrl.$emit('cancel', { fileName: file.name, reason: 'sheet' });
+                        return;
+                    }
+
+                    // dialog loading cho MỌI trường hợp, kể cả file 1 sheet
+                    return ctrl.showLoading(ctrl.loadingText, 'Sheet: ' + wsname)
+                        .then(function () {
+                            if (id !== ctrl.reqId) return;
+
+                            var res = ctrl.parseSheet(u8, wsname, file);
+                            ctrl.parsing = false;
+                            ctrl.hideLoading();
+                            parsed = true;
+
+                            ctrl.$emit('input', res.rows);
+                            ctrl.$emit('load', res.meta);
+                            ctrl.$nextTick(function () { ctrl.runAction(file); });
+                        });
                 })
                 .catch(function (err) {
-                    if (id !== ctrl.reqId || parsed) {      // (1)(3)
+                    if (id !== ctrl.reqId || parsed) {
                         console.warn('[FExcelReader] bỏ qua lỗi ngoài phạm vi đọc Excel:', err);
                         return;
                     }
@@ -3040,6 +2966,107 @@ Vue.component('f-excel-reader', {
                 });
         },
 
+        // ---------- PHA 1 ----------
+        listSheets: function (u8) {
+            if (this.useStats) {
+                var wbFull = XLSX.read(u8, { bookSheets: true, bookProps: true, dense: true });
+                return { names: wbFull.SheetNames, wb: wbFull };
+            }
+            var wb = XLSX.read(u8, { bookSheets: true });
+            return { names: wb.SheetNames, wb: null };
+        },
+
+        resolveSheet: function (u8, file) {
+            var ctrl = this;
+            var sp = ctrl.sheet;
+
+            var info  = ctrl.listSheets(u8);
+            var names = info.names;
+            if (!names || !names.length)
+                return Promise.reject(new Error('File "' + file.name + '" không có sheet nào'));
+
+            if (sp !== null && sp !== undefined && sp !== '') {
+                var s = String(sp).trim();
+                if (/^\d+$/.test(s)) {
+                    var n = names[parseInt(s, 10)];
+                    if (!n) return Promise.reject(new Error('Không có sheet ở vị trí ' + s
+                                                + ' (file chỉ có ' + names.length + ' sheet)'));
+                    return Promise.resolve(n);
+                }
+                if (names.indexOf(s) === -1)
+                    return Promise.reject(new Error('Không tìm thấy sheet "' + s
+                                        + '". File có: ' + names.join(', ')));
+                return Promise.resolve(s);
+            }
+
+            if (names.length === 1 || !ctrl.usePicker) return Promise.resolve(names[0]);
+
+            var list = [];
+            for (var i = 0; i < names.length; i++) list.push(ctrl.sheetInfo(info.wb, names[i]));
+
+            var pick = list[0];
+            for (var j = 0; j < list.length; j++) {
+                if (!list[j].empty) { pick = list[j]; break; }
+            }
+
+            ctrl.sheetList   = list;
+            ctrl.sheetChoice = pick.name;
+            ctrl.pendingName = file.name + ' — ' + names.length + ' sheet';
+            ctrl.hideLoading();
+            ctrl.dialog = true;
+
+            return new Promise(function (resolve) { ctrl._pickSheet = resolve; });
+        },
+
+        sheetInfo: function (wb, name) {
+            if (!wb) return { name: name, info: '', empty: false };
+            var ref = wb.Sheets[name] && wb.Sheets[name]['!ref'];
+            if (!ref) return { name: name, info: 'sheet rỗng', empty: true };
+            var r = XLSX.utils.decode_range(ref);
+            return {
+                name: name,
+                info: (r.e.r - r.s.r + 1) + ' dòng × ' + (r.e.c - r.s.c + 1) + ' cột',
+                empty: false
+            };
+        },
+
+        pickSheet: function (name) {
+            this.dialog = false;
+            var done = this._pickSheet;
+            this._pickSheet = null;
+            if (done) done(name || null);
+        },
+
+        // ---------- PHA 2 ----------
+        parseSheet: function (u8, wsname, file) {
+            var wb = XLSX.read(u8, { type: 'array', cellDates: true, sheets: wsname });
+            var ws = wb.Sheets[wsname];
+            if (!ws) throw new Error('Không đọc được sheet "' + wsname + '"');
+
+            var 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: rows,
+                meta: {
+                    rows: 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: function () {
             var ctrl = this;
             return new Promise(function (resolve, reject) {
@@ -3052,7 +3079,7 @@ Vue.component('f-excel-reader', {
                 var timer = setTimeout(function () {
                     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'], function () {
@@ -3060,7 +3087,7 @@ Vue.component('f-excel-reader', {
                     settled = true;
                     clearTimeout(timer);
                     if (typeof XLSX !== 'undefined') resolve();
-                    else reject(new Error('Nạp thư viện XLSX thất bại'));
+                    else reject(new Error('Nạp thư viện đọc Excel thất bại'));
                 });
             });
         },
@@ -3069,57 +3096,20 @@ Vue.component('f-excel-reader', {
             return new Promise(function (resolve, reject) {
                 var reader = new FileReader();
                 reader.onload  = function (e) { resolve(e.target.result); };
-                reader.onerror = function () { reject(new Error('Không đọc được file: ' + file.name)); };
+                reader.onerror = function () { reject(new Error('Không đọc được file "' + file.name + '"')); };
                 reader.onabort = function () { reject(new Error('Việc đọc file bị hủy')); };
                 reader.readAsArrayBuffer(file);
             });
         },
 
-        parseFile: function (file) {
-            var ctrl = this;
-            return ctrl.readBuffer(file).then(function (buf) {
-                var wb = XLSX.read(new Uint8Array(buf), { type: 'array', cellDates: true });
-
-                var isIndex = typeof ctrl.sheet === 'number' || /^\d+$/.test(String(ctrl.sheet));
-                var wsname = isIndex
-                    ? wb.SheetNames[parseInt(ctrl.sheet, 10)]
-                    : (wb.SheetNames.indexOf(ctrl.sheet) !== -1 ? ctrl.sheet : wb.SheetNames[0]);
-
-                var ws = wb.Sheets[wsname];
-                if (!ws) throw new Error('Không tìm thấy sheet: ' + ctrl.sheet);
-
-                var rows = XLSX.utils.sheet_to_json(ws, {
-                    header: ctrl.optHeader,
-                    raw:    ctrl.optRaw,
-                    dateNF: ctrl.dateFormat,
-                    defval: ctrl.defval,
-                    range:  ctrl.optRange,
-                    blankrows: false
-                });
-
-                return {
-                    rows: rows,
-                    meta: {
-                        rows: rows,
-                        rowCount: rows.length,
-                        headers: (ctrl.optHeader === 1 && rows.length) ? rows[0] : Object.keys(rows[0] || {}),
-                        sheetName: wsname,
-                        sheetNames: wb.SheetNames,
-                        fileName: file.name
-                    }
-                };
-            });
-        },
-
         runAction: function (file) {
             var ctrl = this;
             if (!ctrl.action || typeof CALL !== 'function') return;
             var onErr = function (err) {
+                var msg = (err && err.message) || String(err);
                 console.error('[FExcelReader] action lỗi (dữ liệu Excel vẫn hợp lệ):', err);
-                ctrl.$emit('action-error', {
-                    message: (err && err.message) || String(err),
-                    fileName: file.name
-                });
+                ctrl.toast('Đọc Excel thành công nhưng xử lý sau đó lỗi: ' + msg, 'warning');
+                ctrl.$emit('action-error', { message: msg, fileName: file.name });
             };
             try {
                 var r = CALL(ctrl.action);
@@ -3129,14 +3119,30 @@ Vue.component('f-excel-reader', {
             }
         },
 
+        toast: function (msg, color) {
+            if (!this.useNotify) return;
+            this.snackColor = color || 'error';
+            this.snackMsg   = msg;
+            this.snack      = true;
+        },
+
+        fmtSize: function (bytes) {
+            if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + 'MB';
+            if (bytes >= 1024)    return (bytes / 1024).toFixed(0) + 'KB';
+            return bytes + 'B';
+        },
+
         fail: function (err, file) {
+            var 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 });
         }
+    },
+    beforeDestroy: function () {
+        if (this._pickSheet) { this._pickSheet(null); this._pickSheet = null; }
     }
 });