@fui-org/fui-cli 1.3.2 → 2.1.0

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

@@ -101,12 +101,12 @@ Vue.component("FTable", {
         returnObject: {
             default: true
         },
-        fixedHeader: {
-            default: true
-        },
-        fixedCols: {
-            default: 0
-        },
+        fixedHeader: {
+            default: true
+        },
+        fixedCols: {
+            default: 0
+        },
         // null/bỏ trống = bảng tự giãn theo số dòng; <=0 = fill tới đáy màn hình chừa
         // abs(n) px (tự đo vị trí thật, theo dõi resize); >0 = px cố định.
         height: {
@@ -142,9 +142,9 @@ Vue.component("FTable", {
         },
     },
     template: `
-            <v-card ref="myTable" variant="outlined" v-if="headersArray" class="border" style="text-align: initial;">
-                <component is="style" v-if="fixedColStyles" v-html="fixedColStyles"></component>
-                <v-card-actions>
+            <v-card ref="myTable" variant="outlined" v-if="headersArray" class="border" style="text-align: initial;">
+                <component is="style" v-if="fixedColStyles" v-html="fixedColStyles"></component>
+                <v-card-actions v-if="showSearch || label || excel || ((newAPI() || newAction()) && !disabledUpdate)">
                     <div v-if="showSearch || label || ((newAPI() || newAction()) && !disabledUpdate)" class="text-primary text-darken-2 text-left w-66 pl-2 text-h6" v-html="label"></div>
                     <v-spacer></v-spacer>
                     <v-btn v-if="excel" class="mr-4" small icon density="compact" color="primary" @click="toExcel"><v-icon>mdi-microsoft-excel</v-icon></v-btn>
@@ -156,7 +156,7 @@ Vue.component("FTable", {
                     </div>
                     <v-btn v-if="(newAPI() || newAction()) && !disabledUpdate" class="ml-5 mr-2" density="compact" variant="outlined" icon="mdi-plus" color="primary" @click="newBtnClick"></v-btn>
                 </v-card-actions>
-                <v-data-table class="tTable" :class="fixedTableClass" v-bind="$attrs" :height="tableHeight" :fixed-header="tableFixedHeader" :hover="hover" :items="items" :item-key="itemKey" :return-object="returnObject" :headers="headersArray" :density="density" :items-per-page="itemsPerPage" :hide-default-footer="hideDefaultFooter_cacl" v-model="itemselected" calculate-widths  v-on:click:row="$emit('click:row', $event)" v-on:item-selected="itemSelect()" v-on:toggle-select-all="itemSelect()" :search="search" :custom-filter="customSearch">
+                <v-data-table class="tTable" :class="fixedTableClass" v-bind="$attrs" :height="tableHeight" :fixed-header="tableFixedHeader" :hover="hover" :items="items" :item-key="itemKey" :return-object="returnObject" :headers="headersArray" :density="density" :items-per-page="itemsPerPage" :hide-default-footer="hideDefaultFooter_cacl" v-model="itemselected" calculate-widths  v-on:click:row="$emit('click:row', $event)" v-on:item-selected="itemSelect()" v-on:toggle-select-all="itemSelect()" @update:options="onTableOptions" :search="search" :custom-filter="customSearch">
                     <template v-slot:headers="{ headers, isSorted, getSortIcon, toggleSort, allSelected, selectAll, someSelected, groupHeaders }">
                         <tr v-for="columns in headers">
                             <template v-for="column in columns" :key="column.key">
@@ -215,10 +215,11 @@ Vue.component("FTable", {
         return {
             editDialog: false,
             search: '',
-            searchOpen: false,
-            fillHeight: 0,
-            fixedTableClass: 'f-table-fixed-' + (this.$ && this.$.uid !== undefined ? this.$.uid : this._uid),
-            itemselected: [],
+            searchOpen: false,
+            fillHeight: 0,
+            tableOptions: null, // sortBy/groupBy hiện hành của v-data-table (update:options) — cho excel="UI"
+            fixedTableClass: 'f-table-fixed-' + (this.$ && this.$.uid !== undefined ? this.$.uid : this._uid),
+            itemselected: [],
             returnValue: [],
             editData: {},
             editedIndex: -1,
@@ -335,38 +336,38 @@ Vue.component("FTable", {
             if (this.heightNum > 0) return this.heightNum;
             return this.fillHeight || undefined;
         },
-        tableFixedHeader() {
-            return this.tableHeight ? this.fixedHeader : false;
-        },
-        fixedColStyles() {
-            var fixedCols = parseInt(this.fixedCols, 10);
-            var headers = this.headersArray || [];
-            if (isNaN(fixedCols) || fixedCols <= 0 || headers.length === 0) return '';
-
-            fixedCols = Math.min(fixedCols, headers.length);
-            var scope = '.' + this.fixedTableClass;
-            var css = scope + ' th:nth-child(-n+' + fixedCols + '),' +
-                scope + ' td:nth-child(-n+' + fixedCols + '){' +
-                'position:sticky!important;background-color:#fff;' +
-                'background-color:rgb(var(--v-theme-surface,255,255,255));z-index:1;}';
-            css += '.v-theme--dark ' + scope + ' th:nth-child(-n+' + fixedCols + '),' +
-                '.v-theme--dark ' + scope + ' td:nth-child(-n+' + fixedCols + '){background-color:#1e1e1e;}';
-            // Vuetify fixed-header đặt th trên body; giữ fixed body ở lớp 1 và nâng riêng
-            // giao điểm header + cột cố định lên lớp 4 để không thua specificity của framework.
-            css += scope + ' th:nth-child(-n+' + fixedCols + '){z-index:4!important;}';
-
-            var left = [];
-            for (var i = 0; i < fixedCols; i++) {
-                var width = this.fixedColumnWidth(headers[i] && headers[i].width);
-                css += scope + ' th:nth-child(' + (i + 1) + '),' +
-                    scope + ' td:nth-child(' + (i + 1) + '){' +
-                    'left:calc(' + (left.length ? left.join(' + ') : '0px') + ')!important;' +
-                    'min-width:' + width + '!important;max-width:' + width + '!important;width:' + width + '!important;}';
-                left.push(width);
-            }
-            return css;
-        },
-        edit() {
+        tableFixedHeader() {
+            return this.tableHeight ? this.fixedHeader : false;
+        },
+        fixedColStyles() {
+            var fixedCols = parseInt(this.fixedCols, 10);
+            var headers = this.headersArray || [];
+            if (isNaN(fixedCols) || fixedCols <= 0 || headers.length === 0) return '';
+
+            fixedCols = Math.min(fixedCols, headers.length);
+            var scope = '.' + this.fixedTableClass;
+            var css = scope + ' th:nth-child(-n+' + fixedCols + '),' +
+                scope + ' td:nth-child(-n+' + fixedCols + '){' +
+                'position:sticky!important;background-color:#fff;' +
+                'background-color:rgb(var(--v-theme-surface,255,255,255));z-index:1;}';
+            css += '.v-theme--dark ' + scope + ' th:nth-child(-n+' + fixedCols + '),' +
+                '.v-theme--dark ' + scope + ' td:nth-child(-n+' + fixedCols + '){background-color:#1e1e1e;}';
+            // Vuetify fixed-header đặt th trên body; giữ fixed body ở lớp 1 và nâng riêng
+            // giao điểm header + cột cố định lên lớp 4 để không thua specificity của framework.
+            css += scope + ' th:nth-child(-n+' + fixedCols + '){z-index:4!important;}';
+
+            var left = [];
+            for (var i = 0; i < fixedCols; i++) {
+                var width = this.fixedColumnWidth(headers[i] && headers[i].width);
+                css += scope + ' th:nth-child(' + (i + 1) + '),' +
+                    scope + ' td:nth-child(' + (i + 1) + '){' +
+                    'left:calc(' + (left.length ? left.join(' + ') : '0px') + ')!important;' +
+                    'min-width:' + width + '!important;max-width:' + width + '!important;width:' + width + '!important;}';
+                left.push(width);
+            }
+            return css;
+        },
+        edit() {
             return this.editedIndex >= 0;
         },
         formTitle() {
@@ -383,13 +384,13 @@ Vue.component("FTable", {
             });
         }
     },
-    methods: {
-        fixedColumnWidth(width) {
-            if (width === undefined || width === null || width === '') return '150px';
-            var value = String(width).trim();
-            return /^\d+(\.\d+)?$/.test(value) ? value + 'px' : value;
-        },
-        removeResize() {
+    methods: {
+        fixedColumnWidth(width) {
+            if (width === undefined || width === null || width === '') return '150px';
+            var value = String(width).trim();
+            return /^\d+(\.\d+)?$/.test(value) ? value + 'px' : value;
+        },
+        removeResize() {
             if (this.resizeHandler) {
                 window.removeEventListener('resize', this.resizeHandler);
                 this.resizeHandler = null;
@@ -624,10 +625,138 @@ Vue.component("FTable", {
         customSearch(value, search, item) {
             return Object.values(item.columns).some(v=>v&&v.toString().toLowerCase().includes(search.toLowerCase()))
         },
+        // excel = true (mặc định): xuất nguyên items gốc — giữ nguyên hành vi cũ.
+        // excel = "UI": xuất đúng những gì bảng đang hiển thị (xem toExcelUI).
         toExcel() {
+            if (typeof this.excel === 'string' && this.excel.trim().toUpperCase() === 'UI') return this.toExcelUI();
             jsonToExcel({ data: this.items, filename: (this.label && this.label != '' ? this.label : 'tableFP') + '.xlsx' });
             Vue.$toast.success("Đã xuất Excel", { position: 'top' });
         },
+        onTableOptions(opt) {
+            this.tableOptions = opt;
+        },
+        //------------------------------------------------------------------ excel="UI"
+        // Lấy từ giao diện: DÒNG = items sau lọc (ô tìm kiếm) + sắp xếp (kể cả group-by), gồm MỌI trang;
+        // CỘT = header lá theo thứ tự hiển thị, tên cột = tiêu đề trên bảng. GIÁ TRỊ ô = dữ liệu gốc của
+        // field, KHÔNG định dạng (không numFmt, không đổi ngày, không bỏ HTML) — không có hàng tổng.
+        // Không đọc DOM: DOM chỉ chứa trang hiện tại, còn ô t-* là component nên không lấy lại được giá trị.
+        toExcelUI() {
+            var t = this;
+            var columns = t.uiExcelColumns();
+            if (!columns.length) { showMessage({ title: 'Bảng không có cột nào để xuất Excel' }); return; }
+            var rows = t.uiExcelRows(columns);
+            if (!rows.length) { showMessage({ title: 'Không có dòng nào đang hiển thị để xuất Excel' }); return; }
+            var name = t.plainText(t.label) || 'tableFP';
+            jsonToExcel({
+                data: rows,
+                columns: columns,
+                filename: name.replace(/[\\\/:*?"<>|]/g, '_') + '.xlsx',
+                worksheet: name.replace(/[\[\]:*?\/\\]/g, ' ').slice(0, 31).trim() || 'SheetFP'
+            });
+            Vue.$toast.success("Đã xuất Excel", { position: 'top' });
+        },
+        uiExcelColumns() {
+            var t = this, out = [];
+            var skip = { 'ctrl-update': 1, 'data-table-select': 1, 'data-table-group': 1, 'data-table-expand': 1 };
+            (function walk(list, prefix) {
+                _.forEach(list, function (h) {
+                    if (!h || typeof h !== 'object') return;
+                    var title = t.plainText(h.title !== undefined ? h.title : h.text);
+                    var full = prefix && title ? prefix + ' / ' + title : (title || prefix);
+                    if (Array.isArray(h.children) && h.children.length) { walk(h.children, full); return; }
+                    var key = typeof h.key === 'string' ? h.key : (typeof h.value === 'string' ? h.value : null);
+                    if (!key || skip[key]) return;
+                    // Vuetify 3 lấy giá trị ô theo `value` (path) nếu có, không thì theo `key`
+                    out.push(t.uiExcelColumn(h, key, typeof h.value === 'string' ? h.value : key, full || key));
+                });
+            })(t.headersArray, '');
+            return out;
+        },
+        uiExcelColumn(h, key, path, header) {
+            var attr = h.attr || {};
+            // Ô t-* hiển thị field mà v-model trỏ tới ("item.X"), không nhất thiết trùng key của cột
+            var vm = typeof attr['v-model'] === 'string' && /^\s*item\.([\w$.]+)\s*$/.exec(attr['v-model']);
+            var tablePath = path;
+            if (vm) path = vm[1];
+            var col = { header: header, key: path, tablePath: tablePath, sortKey: key, compare: typeof h.sort === 'function' ? h.sort : null };
+            var wm = /^\s*(\d+(?:\.\d+)?)\s*(px)?\s*$/.exec(h.width === undefined || h.width === null ? '' : String(h.width));
+            if (wm) col.width = Math.max(8, Math.round(Number(wm[1]) / 7));
+            return col;
+        },
+        uiExcelRows(columns) {
+            var t = this;
+            var rows = (t.items || []).slice();
+            if (t.search) {
+                // Dùng lại chính customSearch mà v-data-table đang dùng (item.columns = giá trị theo từng cột)
+                rows = rows.filter(function (r) {
+                    var cols = {};
+                    _.forEach(columns, function (c) { cols[c.sortKey] = t.readCell(r, c.tablePath); });
+                    return t.customSearch(null, t.search, { columns: cols });
+                });
+            }
+            var spec = t.uiSortSpec();
+            if (spec.length) {
+                var byKey = _.keyBy(columns, 'sortKey');
+                var collator = t.uiCollator();
+                var fields = spec.map(function (s) {
+                    var c = byKey[s.key];
+                    return { path: c ? c.tablePath : s.key, desc: s.desc, compare: c && c.compare };
+                });
+                rows.sort(function (a, b) {
+                    for (var i = 0; i < fields.length; i++) {
+                        var f = fields[i];
+                        var va = t.readCell(a, f.path), vb = t.readCell(b, f.path);
+                        if (f.desc) { var tmp = va; va = vb; vb = tmp; }
+                        var r = f.compare ? f.compare(va, vb) : t.compareCell(va, vb, collator);
+                        if (r) return r;
+                    }
+                    return 0;
+                });
+            }
+            return rows;
+        },
+        // group-by đứng trước sort-by — đúng thứ tự v-data-table sắp dòng khi gộp nhóm.
+        // Chưa nhận update:options nào thì lấy từ attr khai sẵn.
+        uiSortSpec() {
+            var o = this.tableOptions, a = this.$attrs || {};
+            var group = o ? o.groupBy : (a['group-by'] || a.groupBy);
+            var sort = o ? o.sortBy : (a['sort-by'] || a.sortBy);
+            return this.normalizeSort(group).concat(this.normalizeSort(sort));
+        },
+        normalizeSort(list) {
+            return _.castArray(list === undefined || list === null ? [] : list).map(function (s) {
+                if (s && typeof s === 'object') return { key: s.key, desc: s.order === 'desc' || s.order === true };
+                return { key: s, desc: false };
+            }).filter(function (s) { return typeof s.key === 'string' && s.key !== ''; });
+        },
+        // Bám thuật toán sortItems của Vuetify: ngày so theo thời gian, rỗng lên đầu, hai chuỗi số so
+        // theo số, còn lại so bằng Intl.Collator (có dấu tiếng Việt).
+        compareCell(a, b, collator) {
+            if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+            var sa = a === null || a === undefined ? '' : String(a).toLocaleLowerCase();
+            var sb = b === null || b === undefined ? '' : String(b).toLocaleLowerCase();
+            if (sa === sb) return 0;
+            if (sa === '') return -1;
+            if (sb === '') return 1;
+            if (!isNaN(sa) && !isNaN(sb)) return Number(sa) - Number(sb);
+            return collator.compare(sa, sb);
+        },
+        uiCollator() {
+            var loc = _.get(this, '$vuetify.locale.current');
+            if (loc && typeof loc === 'object' && 'value' in loc) loc = loc.value;
+            try { return new Intl.Collator(loc || undefined, { sensitivity: 'accent', usage: 'sort' }); }
+            catch (e) { return new Intl.Collator(undefined, { sensitivity: 'accent', usage: 'sort' }); }
+        },
+        readCell(row, path) {
+            if (row === null || row === undefined) return null;
+            return row[path] !== undefined ? row[path] : _.get(row, path);
+        },
+        plainText(v) {
+            if (v === null || v === undefined) return '';
+            var s = String(v);
+            if (s.indexOf('<') < 0 && s.indexOf('&') < 0) return s.trim();
+            return (new DOMParser().parseFromString(s, 'text/html').body.textContent || '').trim();
+        },
     }
 });
 

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

@@ -1,5 +1,5 @@
 Vue.component("f-table", {
-    props: ['value', 'headers', 'updateForm', 'updateFormAttr', "updateApi", 'items', 'label', 'excel', 'showSearch', 'sumFormat', 'disabledHover', 'returnObject', "itemKey", 'itemsPerPage', "disabledUpdate", 'hideDefaultFooter', 'template', 'headercomponent', 'height', 'fixedHeader', 'fixedCols'],
+    props: ['value', 'headers', 'updateForm', 'updateFormAttr', "updateApi", 'items', 'label', 'excel', 'showSearch', 'sumFormat', 'disabledHover', 'returnObject', "itemKey", 'itemsPerPage', "disabledUpdate", 'hideDefaultFooter', 'template', 'headercomponent', 'height', 'fixedHeader', 'fixedCols'],
     data: function () {
         var headersAttr = bindData(this.headers);
         var strTableTemplate = this.template || '';
@@ -21,9 +21,9 @@ Vue.component("f-table", {
         }
 
         this.$options.template = `
-            <v-card outlined v-if="headerCols" ref="myTable">
-                <component is="style" v-if="fixedColStyles" v-html="fixedColStyles"></component>
-                <v-card-title v-if="showSearch || label || ((newAPI() || newAction()) && !disabledUpdate)" align="end" class="py-2 px-3">
+            <v-card outlined v-if="headerCols" ref="myTable">
+                <component is="style" v-if="fixedColStyles" v-html="fixedColStyles"></component>
+                <v-card-title v-if="showSearch || label || excel || ((newAPI() || newAction()) && !disabledUpdate)" align="end" class="py-2 px-3">
                     <div class="primary--text text-left" v-html="label" style="font-weight: 500; font-size: 1.1rem;"></div>
                     <v-spacer></v-spacer><component :is="headercomponent"></component>
                     <v-btn v-if="excel" icon color="primary" @click="toExcel"><v-icon>mdi-microsoft-excel</v-icon></v-btn>
@@ -36,7 +36,7 @@ Vue.component("f-table", {
                     <v-btn v-if="(newAPI() || newAction()) && !disabledUpdate" class="ml-3" outlined x-small fab dark color="primary" @click="newBtnClick"><v-icon dark>mdi-plus</v-icon></v-btn>
                 </v-card-title>
     
-                <v-data-table class="tTable" :class="[{tTableNoHover: disabledHover}, fixedTableClass]" v-bind="$attrs" :height="tableHeight" :fixed-header="tableFixedHeader" :items="items" :item-key="itemKey" :headers="headerCols" :items-per-page="itemsPerPage" :hide-default-footer="_hideDefaultFooter" v-model="itemselected" calculate-widths  v-on:click:row="$emit('click:row', $event)" v-on:item-selected="itemSelect()" v-on:toggle-select-all="itemSelect()" :search="search" :custom-filter="customSearch">
+                <v-data-table class="tTable" :class="[{tTableNoHover: disabledHover}, fixedTableClass]" v-bind="$attrs" :height="tableHeight" :fixed-header="tableFixedHeader" :items="items" :item-key="itemKey" :headers="headerCols" :items-per-page="itemsPerPage" :hide-default-footer="_hideDefaultFooter" v-model="itemselected" calculate-widths  v-on:click:row="$emit('click:row', $event)" v-on:item-selected="itemSelect()" v-on:toggle-select-all="itemSelect()" v-on:update:options="onTableOptions" :search="search" :custom-filter="customSearch">
                     <template v-for="(h, index) in headerCols" :key="index" v-slot:['header.'+h.value]="{ header }"><span v-html="header.text"></span></template>
                     ${strTableTemplate}
                     <template v-if="!disabledUpdate" v-slot:item.ctrl-update="{item}">
@@ -70,10 +70,11 @@ Vue.component("f-table", {
             itemselected: [],
             returnValue: [],
             editData: {},
-            editedIndex: -1,
-            fillHeight: 0,
-            fixedTableClass: 'f-table-fixed-' + this._uid,
-            autoHeaders: this.headers ? null : this.buildAutoHeaders(this.items || []),
+            editedIndex: -1,
+            fillHeight: 0,
+            tableOptions: null, // sortBy/sortDesc/groupBy hiện hành của v-data-table (update:options) — cho excel="UI"
+            fixedTableClass: 'f-table-fixed-' + this._uid,
+            autoHeaders: this.headers ? null : this.buildAutoHeaders(this.items || []),
             updateButton: [
                 {
                     "v-if": "title=='Cập nhật'",
@@ -168,39 +169,39 @@ Vue.component("f-table", {
             if (this.heightNum > 0) return this.heightNum;
             return this.fillHeight || undefined;
         },
-        tableFixedHeader() {
-            if (this.fixedHeader !== undefined) return this.fixedHeader;
-            return this.tableHeight ? true : undefined;
-        },
-        fixedColStyles() {
-            var fixedCols = parseInt(this.fixedCols, 10);
-            var headers = this.headerCols || [];
-            if (isNaN(fixedCols) || fixedCols <= 0 || headers.length === 0) return '';
-
-            fixedCols = Math.min(fixedCols, headers.length);
-            var scope = '.' + this.fixedTableClass;
-            var css = scope + ' th:nth-child(-n+' + fixedCols + '),' +
-                scope + ' td:nth-child(-n+' + fixedCols + '){' +
-                'position:sticky!important;background-color:#fff;' +
-                'background-color:rgb(var(--v-theme-surface,255,255,255));z-index:1;}';
-            css += '.theme--dark ' + scope + ' th:nth-child(-n+' + fixedCols + '),' +
-                '.theme--dark ' + scope + ' td:nth-child(-n+' + fixedCols + '){background-color:#1e1e1e;}';
-            // Vuetify fixed-header đặt th ở z-index 2 bằng selector có specificity cao.
-            // Ô body cố định phải ở dưới mức đó; giao điểm header + cột cố định phải thắng tuyệt đối.
-            css += scope + ' th:nth-child(-n+' + fixedCols + '){z-index:4!important;}';
-
-            var left = [];
-            for (var i = 0; i < fixedCols; i++) {
-                var width = this.fixedColumnWidth(headers[i] && headers[i].width);
-                css += scope + ' th:nth-child(' + (i + 1) + '),' +
-                    scope + ' td:nth-child(' + (i + 1) + '){' +
-                    'left:calc(' + (left.length ? left.join(' + ') : '0px') + ')!important;' +
-                    'min-width:' + width + '!important;max-width:' + width + '!important;width:' + width + '!important;}';
-                left.push(width);
-            }
-            return css;
-        },
-        headerCols() {
+        tableFixedHeader() {
+            if (this.fixedHeader !== undefined) return this.fixedHeader;
+            return this.tableHeight ? true : undefined;
+        },
+        fixedColStyles() {
+            var fixedCols = parseInt(this.fixedCols, 10);
+            var headers = this.headerCols || [];
+            if (isNaN(fixedCols) || fixedCols <= 0 || headers.length === 0) return '';
+
+            fixedCols = Math.min(fixedCols, headers.length);
+            var scope = '.' + this.fixedTableClass;
+            var css = scope + ' th:nth-child(-n+' + fixedCols + '),' +
+                scope + ' td:nth-child(-n+' + fixedCols + '){' +
+                'position:sticky!important;background-color:#fff;' +
+                'background-color:rgb(var(--v-theme-surface,255,255,255));z-index:1;}';
+            css += '.theme--dark ' + scope + ' th:nth-child(-n+' + fixedCols + '),' +
+                '.theme--dark ' + scope + ' td:nth-child(-n+' + fixedCols + '){background-color:#1e1e1e;}';
+            // Vuetify fixed-header đặt th ở z-index 2 bằng selector có specificity cao.
+            // Ô body cố định phải ở dưới mức đó; giao điểm header + cột cố định phải thắng tuyệt đối.
+            css += scope + ' th:nth-child(-n+' + fixedCols + '){z-index:4!important;}';
+
+            var left = [];
+            for (var i = 0; i < fixedCols; i++) {
+                var width = this.fixedColumnWidth(headers[i] && headers[i].width);
+                css += scope + ' th:nth-child(' + (i + 1) + '),' +
+                    scope + ' td:nth-child(' + (i + 1) + '){' +
+                    'left:calc(' + (left.length ? left.join(' + ') : '0px') + ')!important;' +
+                    'min-width:' + width + '!important;max-width:' + width + '!important;width:' + width + '!important;}';
+                left.push(width);
+            }
+            return css;
+        },
+        headerCols() {
             var h = this.headers || this.autoHeaders;
             if (_.isBoolean(this.disabledUpdate) && this.disabledUpdate) {
                 _.remove(h, function (n) {
@@ -234,13 +235,13 @@ Vue.component("f-table", {
             });
         }
     },
-    methods: {
-        fixedColumnWidth(width) {
-            if (width === undefined || width === null || width === '') return '150px';
-            var value = String(width).trim();
-            return /^\d+(\.\d+)?$/.test(value) ? value + 'px' : value;
-        },
-        removeResize() {
+    methods: {
+        fixedColumnWidth(width) {
+            if (width === undefined || width === null || width === '') return '150px';
+            var value = String(width).trim();
+            return /^\d+(\.\d+)?$/.test(value) ? value + 'px' : value;
+        },
+        removeResize() {
             if (this.resizeHandler) {
                 window.removeEventListener('resize', this.resizeHandler);
                 this.resizeHandler = null;
@@ -438,10 +439,131 @@ Vue.component("f-table", {
         customSearch(value, search, item) {
             return Object.values(item).some(v => v && v.toString().toLowerCase().includes(search.toLowerCase()))
         },
+        // excel = true: xuất nguyên items gốc — giữ nguyên hành vi cũ.
+        // excel = "UI": xuất đúng những gì bảng đang hiển thị (xem toExcelUI).
         toExcel() {
+            if (typeof this.excel === 'string' && this.excel.trim().toUpperCase() === 'UI') return this.toExcelUI();
             jsonToExcel({ data: this.items, filename: (this.label && this.label != '' ? this.label : 'tableFP') + '.xlsx' });
             Vue.$toast.success("Đã xuất Excel", { position: 'top' });
         },
+        onTableOptions(opt) {
+            this.tableOptions = opt;
+        },
+        //------------------------------------------------------------------ excel="UI"
+        // Lấy từ giao diện: DÒNG = items sau lọc (ô tìm kiếm) + sắp xếp (kể cả group-by), gồm MỌI trang;
+        // CỘT = header lá theo thứ tự hiển thị, tên cột = tiêu đề trên bảng. GIÁ TRỊ ô = dữ liệu gốc của
+        // field, KHÔNG định dạng (không numFmt, không đổi ngày, không bỏ HTML) — không có hàng tổng.
+        // Không đọc DOM: DOM chỉ chứa trang hiện tại, còn ô t-* là component nên không lấy lại được giá trị.
+        toExcelUI() {
+            var t = this;
+            var columns = t.uiExcelColumns();
+            if (!columns.length) { showMessage({ title: 'Bảng không có cột nào để xuất Excel' }); return; }
+            var rows = t.uiExcelRows(columns);
+            if (!rows.length) { showMessage({ title: 'Không có dòng nào đang hiển thị để xuất Excel' }); return; }
+            var name = t.plainText(t.label) || 'tableFP';
+            jsonToExcel({
+                data: rows,
+                columns: columns,
+                filename: name.replace(/[\\\/:*?"<>|]/g, '_') + '.xlsx',
+                worksheet: name.replace(/[\[\]:*?\/\\]/g, ' ').slice(0, 31).trim() || 'SheetFP'
+            });
+            Vue.$toast.success("Đã xuất Excel", { position: 'top' });
+        },
+        uiExcelColumns() {
+            var t = this, out = [];
+            var skip = { 'ctrl-update': 1, 'data-table-select': 1, 'data-table-expand': 1 };
+            (function walk(list, prefix) {
+                _.forEach(list, function (h) {
+                    if (!h || typeof h !== 'object') return;
+                    var title = t.plainText(h.text !== undefined ? h.text : h.title);
+                    var full = prefix && title ? prefix + ' / ' + title : (title || prefix);
+                    if (Array.isArray(h.children) && h.children.length) { walk(h.children, full); return; }
+                    var key = typeof h.value === 'string' ? h.value : null;
+                    if (!key || skip[key]) return;
+                    out.push(t.uiExcelColumn(h, key, key, full || key));
+                });
+            })(t.headerCols, '');
+            return out;
+        },
+        uiExcelColumn(h, key, path, header) {
+            var attr = h.attr || {};
+            // Ô t-* hiển thị field mà v-model trỏ tới ("item.X"), không nhất thiết trùng key của cột
+            var vm = typeof attr['v-model'] === 'string' && /^\s*item\.([\w$.]+)\s*$/.exec(attr['v-model']);
+            var tablePath = path;
+            if (vm) path = vm[1];
+            var col = { header: header, key: path, tablePath: tablePath, sortKey: key, compare: typeof h.sort === 'function' ? h.sort : null };
+            var wm = /^\s*(\d+(?:\.\d+)?)\s*(px)?\s*$/.exec(h.width === undefined || h.width === null ? '' : String(h.width));
+            if (wm) col.width = Math.max(8, Math.round(Number(wm[1]) / 7));
+            return col;
+        },
+        uiExcelRows(columns) {
+            var t = this;
+            var rows = (t.items || []).slice();
+            // Vuetify 2 trim chuỗi tìm kiếm trước khi lọc; customSearch của bảng quét mọi field của dòng gốc
+            var q = typeof t.search === 'string' ? t.search.trim() : '';
+            if (q) rows = rows.filter(function (r) { return t.customSearch(null, q, r); });
+            var spec = t.uiSortSpec();
+            if (spec.length) {
+                var byKey = _.keyBy(columns, 'sortKey');
+                var collator = t.uiCollator();
+                var fields = spec.map(function (s) {
+                    var c = byKey[s.key];
+                    return { path: c ? c.tablePath : s.key, desc: s.desc, compare: c && c.compare };
+                });
+                rows.sort(function (a, b) {
+                    for (var i = 0; i < fields.length; i++) {
+                        var f = fields[i];
+                        var va = t.readCell(a, f.path), vb = t.readCell(b, f.path);
+                        if (f.desc) { var tmp = va; va = vb; vb = tmp; }
+                        var r = f.compare ? f.compare(va, vb) : t.compareCell(va, vb, collator);
+                        if (r) return r;
+                    }
+                    return 0;
+                });
+            }
+            return rows;
+        },
+        // group-by đứng trước sort-by — đúng thứ tự v-data-table sắp dòng khi gộp nhóm.
+        // Chưa nhận update:options nào thì lấy từ attr khai sẵn.
+        uiSortSpec() {
+            var o = this.tableOptions, a = this.$attrs || {};
+            var gb = o ? o.groupBy : (a['group-by'] || a.groupBy), gd = o ? o.groupDesc : (a['group-desc'] || a.groupDesc);
+            var sb = o ? o.sortBy : (a['sort-by'] || a.sortBy), sd = o ? o.sortDesc : (a['sort-desc'] || a.sortDesc);
+            return this.normalizeSort(gb, gd).concat(this.normalizeSort(sb, sd));
+        },
+        normalizeSort(by, desc) {
+            var d = _.castArray(desc === undefined || desc === null ? [] : desc);
+            return _.castArray(by === undefined || by === null ? [] : by).map(function (k, i) {
+                return { key: k, desc: d[i] === true || d[i] === 'true' };
+            }).filter(function (s) { return typeof s.key === 'string' && s.key !== ''; });
+        },
+        // Bám thuật toán sortItems của Vuetify: ngày so theo thời gian, rỗng lên đầu, hai chuỗi số so
+        // theo số, còn lại so bằng Intl.Collator (có dấu tiếng Việt).
+        compareCell(a, b, collator) {
+            if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+            var sa = a === null || a === undefined ? '' : String(a).toLocaleLowerCase();
+            var sb = b === null || b === undefined ? '' : String(b).toLocaleLowerCase();
+            if (sa === sb) return 0;
+            if (sa === '') return -1;
+            if (sb === '') return 1;
+            if (!isNaN(sa) && !isNaN(sb)) return Number(sa) - Number(sb);
+            return collator.compare(sa, sb);
+        },
+        uiCollator() {
+            var loc = _.get(this, '$vuetify.lang.current');
+            try { return new Intl.Collator(loc || undefined, { sensitivity: 'accent', usage: 'sort' }); }
+            catch (e) { return new Intl.Collator(undefined, { sensitivity: 'accent', usage: 'sort' }); }
+        },
+        readCell(row, path) {
+            if (row === null || row === undefined) return null;
+            return row[path] !== undefined ? row[path] : _.get(row, path);
+        },
+        plainText(v) {
+            if (v === null || v === undefined) return '';
+            var s = String(v);
+            if (s.indexOf('<') < 0 && s.indexOf('&') < 0) return s.trim();
+            return (new DOMParser().parseFromString(s, 'text/html').body.textContent || '').trim();
+        },
     }
 });
 //===========================================================================================