@fui-org/fui-cli 2.1.4 → 2.2.0

package/skills/{fui-skill → fui}/scripts/componentTable.js

@@ -1,891 +1,891 @@
-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'],
-    data: function () {
-        var headersAttr = bindData(this.headers);
-        var strTableTemplate = this.template || '';
-
-        if (headersAttr) {
-            _.forEach(headersAttr.filter(i => !!i.el), function (c) {
-                var ctl = buildControl([c], false);
-
-                ctl.attr("v-bind", "item.attr");
-                ctl.attr(":item", "item");
-                ctl.attr(":index", "items.indexOf(item)");
-                ctl.attr("v-on:mouseover", "$emit('mouseover:row',item)");
-                ctl.attr("v-on:mouseleave", "$emit('mouseleave:row',item)");
-
-                if (!c.attr['v-model']) ctl.attr("v-model", `item['${c.value}']`);
-
-                strTableTemplate += `<template v-slot:item.${c.value}="{item}">${ctl[0].outerHTML}</template>`
-            });
-        }
-
-        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 || 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>
-                    <div v-if="showSearch" class="d-flex align-center ml-3">
-                        <v-btn icon color="primary" @mousedown.prevent @click="toggleSearch"><v-icon>mdi-magnify</v-icon></v-btn>
-                        <v-expand-x-transition>
-                            <v-text-field v-if="searchOpen" ref="searchField" dense @input="updateSearch" label="" single-line hide-details autofocus style="width: 300px;" @blur="onSearchBlur" class="ml-1"></v-text-field>
-                        </v-expand-x-transition>
-                    </div>
-                    <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()" 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}">
-                        <div class="d-flex justify-center" v-if="item['ctrl-update'] != 0">
-                            <v-btn v-if="deleteAPI()" @click="deleteItem(item, deleteAPI())" x-small fab icon><v-icon color="red darken-3">mdi-trash-can-outline</v-icon></v-btn>
-                            <v-btn v-if="editAPI() || editAction()" @click="editItem(item)" x-small fab icon><v-icon color="green darken-2">mdi-square-edit-outline</v-icon></v-btn>
-                        </div>
-                    </template>
-                    <template v-if="sumFormat && typeof sumFormat === 'object'" v-slot:body.append="{ headers }">
-                        <tr>
-                            <td v-for="h in headers" :key="'sum-'+h.value" class="text-right font-weight-medium">
-                                <span v-if="sumFormat[h.value]">{{ sumByColumn(h.value) }}</span>
-                            </td>
-                        </tr>
-                    </template>
-                </v-data-table>
-    
-                <v-divider v-if="sumFormat && typeof sumFormat === 'string'"></v-divider>
-                <v-card-actions v-if="sumFormat && typeof sumFormat === 'string'">
-                    <v-spacer></v-spacer><span class="title font-weight-light">{{sumText}}</span>
-                </v-card-actions>
-                <f-dialog v-model="editDialog" v-bind="updateFormAttr" :data.sync="editData" :data-out.sync="vueData[dataOut]" :title="formTitle" :button="updateButton" :controls="updateForm"></f-dialog>
-            </v-card>
-            `;
-        //----------------------------------------------------------------------       
-
-        return {
-            editDialog: false,
-            search: '',
-            searchOpen: false,
-            itemselected: [],
-            returnValue: [],
-            editData: {},
-            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'",
-                    label: "Lưu",
-                    getoutdata: true,
-                    action: () => {
-                        this.save(this.editAPI());
-                    }
-                },
-                {
-                    "v-if": "title=='Thêm mới'",
-                    label: "Thêm mới",
-                    getoutdata: true,
-                    action: () => {
-                        this.addnew(this.newAPI())
-                    }
-                }
-            ],
-            newAction: function () {
-                if (this.updateApi) return this.updateApi['new-action']
-                else return null;
-            },
-            newAPI: function () {
-                if (this.updateApi) return this.updateApi.new;
-                else return null;
-            },
-            editAction: function () {
-                if (this.updateApi) return this.updateApi['edit-action']
-                else return null;
-            },
-            editAPI: function () {
-                if (this.updateApi) return this.updateApi.edit;
-                else return null;
-            },
-            deleteAPI: function () {
-                if (this.updateApi) return this.updateApi.delete;
-                else return null;
-            },
-            defaultItem: function () {
-                if (this.updateApi) {
-                    if (typeof this.updateApi['default-item'] === 'undefined') return {};
-                    var dataItem = {}
-                    mapData(this.updateApi['default-item'], dataItem, vueData);
-                    return dataItem;
-                }
-                else return {};
-            },
-        }
-    },
-    mounted: function () {
-        this.editData = Object.assign({}, this.defaultItem())
-        this.editedIndex = -1
-        this.itemSelectRebuild(this.value);
-
-        if (this.heightNum !== null && this.heightNum <= 0) {
-            this.updateFillHeight();
-            this.resizeHandler = this.updateFillHeight.bind(this);
-            window.addEventListener('resize', this.resizeHandler);
-        }
-    },
-    beforeDestroy: function () { this.removeResize(); },
-    beforeUnmount: function () { this.removeResize(); },
-    watch: {
-        editDialog(val) {
-            if (!val) {
-                _.forEach(this.editData, (v, k) => {
-                    this.editData[k] = undefined;
-                });
-                this.editedIndex = -1
-            } else {
-                this.editData.dialogModel = (this.edit ? 'edit' : 'new')
-            }
-        },
-        value(newVal, oldVal,) {
-            t = this;
-            if (t.returnValue != newVal) this.itemSelectRebuild(newVal);
-        },
-        items(newVal) {
-            if (!this.headers) this.autoHeaders = this.buildAutoHeaders(newVal || []);
-            if (this.resizeHandler) this.updateFillHeight();
-        }
-    },
-    computed: {
-        // null = không khai height → bảng tự giãn theo số dòng (mặc định của v-data-table)
-        heightNum() {
-            if (this.height === undefined || this.height === null || this.height === '') return null;
-            var n = Number(this.height);
-            return isNaN(n) ? null : n;
-        },
-        tableHeight() {
-            if (this.heightNum === null) return undefined;
-            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() {
-            var h = this.headers || this.autoHeaders;
-            if (_.isBoolean(this.disabledUpdate) && this.disabledUpdate) {
-                _.remove(h, function (n) {
-                    return n.value == 'ctrl-update';
-                });
-            };
-
-            return h;
-        },
-        _hideDefaultFooter() {
-            if (this.items) {
-                if (this.itemsPerPage > 0 && this.itemsPerPage < this.items.length) return false;
-            }
-            if (this.hideDefaultFooter) return this.hideDefaultFooter;
-            return false;
-        },
-        edit() {
-            return this.editedIndex >= 0;
-        },
-        formTitle() {
-            return this.edit ? 'Cập nhật' : 'Thêm mới';
-        },
-        dataOut() {
-            if (this.updateApi) return this.updateApi['data-out']
-            else return null;
-        },
-        sumText() {
-            var items = this.items;
-            return _.replace(this.sumFormat, /\[\[(.*?)\]\]/gm, function (s, key) {
-                return numeral(_.sumBy(items, key)).format('0,0');
-            });
-        }
-    },
-    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;
-            }
-        },
-        updateFillHeight() {
-            var t = this;
-            t.$nextTick(function () {
-                requestAnimationFrame(function () {
-                    var root = t.$refs.myTable && t.$refs.myTable.$el;
-                    if (!root) return;
-                    var wrapper = root.querySelector('.v-data-table__wrapper');
-                    if (!wrapper) return;
-                    var rootRect = root.getBoundingClientRect();
-                    var wrapRect = wrapper.getBoundingClientRect();
-                    // phần nằm dưới vùng cuộn (footer phân trang, dòng tổng, viền card)
-                    var below = Math.max(0, rootRect.bottom - wrapRect.bottom);
-                    var margin = Math.abs(t.heightNum);
-                    t.fillHeight = Math.max(150, window.innerHeight - wrapRect.top - below - margin);
-                });
-            });
-        },
-        buildAutoHeaders(items) {
-            var arrHeaders = buildHeader(items);
-            var hasEditOrDelete = this.updateApi && (this.updateApi.edit || this.updateApi.delete);
-            if (arrHeaders.length > 0 && hasEditOrDelete && !this.disabledUpdate) {
-                arrHeaders.push({ "text": "", "value": "ctrl-update", "divider": true });
-            }
-            return arrHeaders;
-        },
-        sumByColumn(key) {
-            return numeral(_.sumBy(this.items, key)).format(this.sumFormat[key]);
-        },
-        toggleSearch() {
-            this.searchOpen = !this.searchOpen;
-            if (this.searchOpen) {
-                var t = this;
-                this.$nextTick(function () {
-                    t.$refs.searchField && t.$refs.searchField.focus();
-                });
-            }
-        },
-        onSearchBlur() {
-            if (!this.search) this.searchOpen = false;
-        },
-        itemSelect() {
-            var t = this;
-
-            setTimeout(function () {
-                if (!t.returnObject) t.returnValue = _.map(t.itemselected, t.itemKey);
-                else t.returnValue = t.itemselected;
-
-                t.$emit('input', t.returnValue);
-            }, 10);
-        },
-
-        itemSelectRebuild(newVal) {
-            var t = this;
-            if (t.returnObject) t.itemselected = newVal;
-            else {
-                t.itemselected = [];
-
-                _.forEach(newVal, function (val) {
-                    t.itemselected.push(_.find(t.items, [t.itemKey, val]));
-                });
-            }
-        },
-        newBtnClick() {
-            if (this.newAction()) runAction(this.newAction());
-            if (this.newAPI()) {
-                Object.assign(this.editData, this.defaultItem());
-                this.editDialog = true;
-            }
-        },
-        editItem(item) {
-
-            if (this.editAction()) runAction(this.editAction(), { item: item });
-
-            if (this.editAPI()) {
-                this.editedIndex = this.items.indexOf(item);
-                Object.assign(this.editData, this.defaultItem());
-                this.editData = Object.assign({}, item);
-                this.editDialog = true;
-            }
-        },
-
-        deleteItem(item, deleteAPI) {
-            const items = this.items;
-            var actionAPI = deleteAPI;
-            var indexDelete = items.indexOf(item)
-            confirm({
-                title: (actionAPI.CONFIRM ? bindDataToString(actionAPI.CONFIRM, _.assignIn({ $row: item, item: item }, vueData)) : "Bạn có chắc chắn muốn xoá ?"),
-                action: function () {
-                    vueAction(actionAPI, { $row: item, item: item }, function () {
-                        items.splice(indexDelete, 1);
-                    });
-                }
-            });
-        },
-
-        save(actionAPI) {
-            var diaCtl = this;
-            if (diaCtl.editedIndex > -1) {
-                if (actionAPI) {
-                    if (actionAPI.CONFIRM) {
-                        confirm({
-                            title: bindDataToString(actionAPI.CONFIRM, _.assignIn({ $row: diaCtl.editData, item: diaCtl.editData }, vueData)),
-                            action: function () {
-                                vueAction(actionAPI, { $row: diaCtl.editData, item: diaCtl.editData }, function (d) {
-                                    if (!d.Message) {
-                                        if (_.isArray(d.data)) {
-                                            if (d.data[0]) {
-                                                _.forEach(d.data[0], function (value, key) {
-                                                    diaCtl.editData[key] = value;
-                                                });
-                                            }
-                                        }
-                                    }
-                                    _.assignIn(diaCtl.items[diaCtl.editedIndex], diaCtl.editData);
-                                    diaCtl.editDialog = false;
-                                });
-                            },
-                            cancel: function () { }
-                        });
-                    } else {
-                        vueAction(actionAPI, { $row: diaCtl.editData, item: diaCtl.editData }, function (d) {
-                            if (!d.Message) {
-                                if (_.isArray(d.data)) {
-                                    if (d.data[0]) {
-                                        _.forEach(d.data[0], function (value, key) {
-                                            diaCtl.editData[key] = value;
-                                        });
-                                    }
-                                }
-                            }
-                            _.assignIn(diaCtl.items[diaCtl.editedIndex], diaCtl.editData);
-                            diaCtl.editDialog = false;
-                        });
-                    }
-                } else {
-                    _.assignIn(diaCtl.items[diaCtl.editedIndex], diaCtl.editData);
-                    diaCtl.editDialog = false;
-                }
-            }
-        },
-
-        addnew(actionAPI) {
-            var diaCtl = this;
-            if (diaCtl.editedIndex == -1) {
-                if (actionAPI) {
-                    if (actionAPI.CONFIRM) {
-                        confirm({
-                            title: bindDataToString(actionAPI.CONFIRM, _.assignIn({ $row: diaCtl.editData, item: diaCtl.editData }, vueData)),
-                            action: function () {
-                                vueAction(actionAPI, { $row: diaCtl.editData, item: diaCtl.editData }, function (d) {
-                                    if (d) {
-                                        if (_.isArray(d.data)) {
-                                            if (d.data[0]) {
-                                                _.forEach(d.data[0], function (value, key) {
-                                                    diaCtl.editData[key] = value;
-                                                });
-                                            }
-                                        }
-                                    }
-                                    diaCtl.items.push(_.cloneDeep(diaCtl.editData));
-                                    diaCtl.editDialog = false;
-                                });
-                            },
-                            cancel: function () { }
-                        });
-                    } else {
-                        vueAction(actionAPI, { $row: diaCtl.editData, item: diaCtl.editData }, function (d) {
-                            if (d) {
-                                if (_.isArray(d.data)) {
-                                    if (d.data[0]) {
-                                        _.forEach(d.data[0], function (value, key) {
-                                            diaCtl.editData[key] = value;
-                                        });
-                                    }
-                                }
-                            }
-                            diaCtl.items.push(_.cloneDeep(diaCtl.editData));
-                            diaCtl.editDialog = false;
-                        });
-                    }
-                } else {
-                    diaCtl.items.push(_.cloneDeep(diaCtl.editData));
-                    diaCtl.editDialog = false;
-                }
-            }
-        },
-        updateSearch: _.debounce(function (text) {
-            this.search = text;
-        }, 300),
-        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();
-        },
-    }
-});
-//===========================================================================================
-//===========================================================================================
-//===========================================================================================
-
-Vue.component('t-html', {
-    template: `<div class="my-3" v-bind="$attrs" v-html="$attrs['value']"></div>`,
-});
-//-----------------------------------------------------------------------------------------------------------
-Vue.component('t-label', {
-    template: `<div class="text-no-wrap" v-bind="$attrs">{{$attrs['value']}}</div>`,
-});
-//-----------------------------------------------------------------------------------------------------------
-Vue.component('t-num', {
-    props: {
-        value: {
-            type: Number,
-            default: 0
-        },
-        hidezero: {
-            type: Boolean,
-            default: true
-        },
-        format: {
-            type: String,
-            default: ''
-        }
-    },
-    template: `<div v-if="!_.isNull(value) && !(hidezero && value==0)" class="text-no-wrap text-end" v-bind="$attrs">{{ format != ''? numeral(value).format(format) : Number.isInteger(value)?numeral(value).format('0,0'): numeral(value).format('0,0.0') }}</div>`,
-});
-//-----------------------------------------------------------------------------------------------------------
-Vue.component('t-time', {
-    props: {
-        format: {
-            type: String,
-            default: 'DD/MM/YYYY'
-        }
-    },
-    template: `<div v-if="$attrs['value']" class="text-no-wrap" v-bind="$attrs">{{ moment($attrs['value']).format(format) }}</div>`,
-});
-//-----------------------------------------------------------------------------------------------------------
-Vue.component('t-boolean', {
-    props: {
-        value: {
-            default: null
-        },
-        colorTrue: {
-            default: "primary"
-        },
-        colorFalse: {
-            default: "red"
-        },
-        iconTrue: {
-            default: "mdi-check"
-        },
-        iconFalse: {
-            default: "mdi-close"
-        },
-    },
-    template: `<v-icon v-bind="$attrs" :color="value?colorTrue:colorFalse">{{value?iconTrue:iconFalse}}</v-icon>`,
-});
-//-----------------------------------------------------------------------------------------------------------
-Vue.component('t-check', {
-    props: {
-        value: {
-            default: null
-        },
-        falseValue: {
-            default: false
-        }
-    },
-    template: `<v-checkbox v-model="ctlValue" v-bind="$attrs" :false-value="falseValue" hide-details class="d-inline-flex ma-1 pa-1" v-on:change="onchange($event)" />`,
-    data: function () {
-        return {
-            ctlValue: this.value
-        }
-    },
-    watch: {
-        value(newVal) {
-            this.ctlValue = newVal
-        }
-    },
-    methods: {
-        onchange: function (e) {
-            if (!e) this.ctlValue = false;
-            tableActionEvent(this);
-        }
-    }
-});
-//-----------------------------------------------------------------------------------------------------------
-Vue.component('t-text', {
-    props: ['value'],
-    template: `<v-text-field v-model="ctlValue" v-bind="$attrs" v-on:change="onchange($event)" dense outlined hide-details/>`,
-    data: function () {
-        return {
-            ctlValue: this.value
-        }
-    },
-    watch: {
-        value(newVal) {
-            this.ctlValue = newVal
-        }
-    },
-    methods: {
-        onchange: function (e) {
-            console.log(e)
-            tableActionEvent(this);
-        }
-    }
-});
-
-//-----------------------------------------------------------------------------------------------------------
-Vue.component('t-select', {
-    props: ['value'],
-    template: `<v-select v-model="ctlValue" v-bind="$attrs" v-on:change="onchange($event)" dense hide-details append-icon="mdi-menu-swap"/>`,
-    data: function () {
-        return {
-            ctlValue: this.value
-        }
-    },
-    watch: {
-        value(newVal) {
-            this.ctlValue = newVal
-        }
-    },
-    methods: {
-        onchange: function (e) {
-            console.log(e)
-            tableActionEvent(this);
-        }
-    }
-});
-//-----------------------------------------------------------------------------------------------------------
-Vue.component('t-combobox', {
-    props: {
-        value: {
-            default: undefined
-        },
-        text: {
-            default: undefined
-        },
-        items: {
-            type: Array,
-            default: []
-        },
-        api: {
-            type: String,
-            default: undefined
-        },
-        apiData: {
-            type: Object,
-            default: {}
-        },
-
-    },
-    template: `<v-autocomplete refs="abc" v-model="ctlValue" v-bind="$attrs" :loading="loading" :items="dataItems" :search-input.sync="search" v-on:change="onchange($event)" hide-details dense></v-autocomplete>`,
-    data: function () {
-        return {
-            dataItems: this.items,
-            ctlValue: this.value,
-            loading: false,
-            search: null,
-            getDataFormAPI: _.debounce((str) => {
-                if ((this.search && this.search.length < 2) || !this.api) return;
-                var self = this;
-                this.loading = true
-
-                if (typeof this.apiData != 'object') this.apiData = JSON.parse(this.apiData);
-
-                mapData(this.apiData, this.apiData, _.assignIn({}, vueData, { TEXT: this.search }));
-
-                console.log("API-CALL: ", this.api)
-                ajaxCALL(this.api, this.apiData, function (d) {
-                    if (_.isArray(d.data)) self.dataItems = d.data;
-                    else self.dataItems = d;
-
-                    self.loading = false
-                }, function (e) {
-                    console.log("API Error", e);
-                })
-
-            }, 500)
-        }
-    },
-    watch: {
-        search(newval, oldval) {
-            newval && oldval && this.querySelections(newval)
-        },
-        items(val) {
-            this.dataItems = val
-        },
-        value(newVal) {
-            this.ctlValue = newVal
-        }
-    },
-    methods: {
-        querySelections(val) {
-            this.getDataFormAPI(val);
-        },
-        onchange: function (e) {
-            if (e) tableActionEvent(this);
-        }
-    },
-});
-//-----------------------------------------------------------------------------------------------------------
-Vue.component('t-menu', {
-    props: {
-        iconText: {
-            default: 'mdi-menu'
-        },
-        items: {
-            default: []
-        }
-    },
-    template: `
-             <v-menu offset-y origin="center center" transition="slide-y-transition" max-height = 500>
-                <template v-slot:activator="{ on }">                
-                    <v-icon v-on="on">{{iconText}}</v-icon>
-                </template>
-                <v-list >
-                    <v-list-item v-bind="$attrs" v-for="(item, index) in items" :key="index" @click="onSelect(item)" >
-                        <v-list-item-icon v-if="item['icon-text']" class="mr-3">
-                            <v-icon :color="item.color">{{item['icon-text']}}</v-icon>
-                        </v-list-item-icon>
-                        <v-list-item-content class="mr-2">
-                            <v-list-item-title v-text="item.text"></v-list-item-title>
-                        </v-list-item-content>
-                    </v-list-item>
-                </v-list>
-            </v-menu> 
-        `,
-    data: function () {
-        return {
-        }
-    },
-    methods: {
-        onSelect: function (e) {
-            this.$attrs['action'] = e['action'];
-            tableActionEvent(this);
-        }
-    }
-});
-//-----------------------------------------------------------------------------------------------------------
-Vue.component('t-link', {
-    props: ['id', 'target', 'url', 'title', 'onclose'],
-    template: `<a :href="_url" :target="target" v-bind="$attrs" @click="onclick()"><v-icon v-if="$attrs['icon-text']" left color="primary">{{$attrs['icon-text']}}</v-icon> {{ $attrs['value']}}</a>`,
-    computed: {
-        _url: function () {
-            if (this.target != 'dialog' && this.url) return this.url;
-            return null;
-        },
-    },
-    methods: {
-        onclick: function (e) {
-            if (this.target == 'dialog') {
-                tableActionEvent(this);
-                openWindow({
-                    id: this.id,
-                    title: this.title,
-                    url: this.url,
-                    onclose: this.onclose,
-                });
-            }
-        }
-    }
-});
-//-----------------------------------------------------------------------------------------------------------
-Vue.component('t-button', {
-    props: {
-        text: {
-            default: true
-        },
-        color: {
-            default: "primary"
-        },
-        label: {
-            default: null
-        },
-        iconText: {
-            default: null
-        },
-        target: {
-            default: null
-        },
-        wid: {
-            default: null
-        },
-        url: {
-            default: null
-        },
-        title: {
-            default: null
-        },
-        onclose: {
-            default: null
-        },
-        quset: {
-            default: []
-        },
-    },
-    template: `
-            <v-btn class="custom-transform-class text-none" v-bind="$attrs" :text="text" :color="color" :target="target" :href="_url" @click="clickButton()">
-                <v-icon v-if="iconText" :left="label" class="ml-0">{{iconText}}</v-icon>{{label}}
-            </v-btn>`,
-    computed: {
-        _url: function () {
-            if (this.target != 'dialog' && this.url) return this.url;
-            return null;
-        },
-    },
-    methods: {
-        clickButton: function (e) {
-            if (this.target == 'dialog') {
-                console.log("dialog onclose", this.onclose)
-                openWindow({
-                    id: this.wid,
-                    title: this.title,
-                    url: this.url,
-                    onclose: this.onclose
-                });
-            } else tableActionEvent(this);
-        }
-    }
-});
+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'],
+    data: function () {
+        var headersAttr = bindData(this.headers);
+        var strTableTemplate = this.template || '';
+
+        if (headersAttr) {
+            _.forEach(headersAttr.filter(i => !!i.el), function (c) {
+                var ctl = buildControl([c], false);
+
+                ctl.attr("v-bind", "item.attr");
+                ctl.attr(":item", "item");
+                ctl.attr(":index", "items.indexOf(item)");
+                ctl.attr("v-on:mouseover", "$emit('mouseover:row',item)");
+                ctl.attr("v-on:mouseleave", "$emit('mouseleave:row',item)");
+
+                if (!c.attr['v-model']) ctl.attr("v-model", `item['${c.value}']`);
+
+                strTableTemplate += `<template v-slot:item.${c.value}="{item}">${ctl[0].outerHTML}</template>`
+            });
+        }
+
+        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 || 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>
+                    <div v-if="showSearch" class="d-flex align-center ml-3">
+                        <v-btn icon color="primary" @mousedown.prevent @click="toggleSearch"><v-icon>mdi-magnify</v-icon></v-btn>
+                        <v-expand-x-transition>
+                            <v-text-field v-if="searchOpen" ref="searchField" dense @input="updateSearch" label="" single-line hide-details autofocus style="width: 300px;" @blur="onSearchBlur" class="ml-1"></v-text-field>
+                        </v-expand-x-transition>
+                    </div>
+                    <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()" 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}">
+                        <div class="d-flex justify-center" v-if="item['ctrl-update'] != 0">
+                            <v-btn v-if="deleteAPI()" @click="deleteItem(item, deleteAPI())" x-small fab icon><v-icon color="red darken-3">mdi-trash-can-outline</v-icon></v-btn>
+                            <v-btn v-if="editAPI() || editAction()" @click="editItem(item)" x-small fab icon><v-icon color="green darken-2">mdi-square-edit-outline</v-icon></v-btn>
+                        </div>
+                    </template>
+                    <template v-if="sumFormat && typeof sumFormat === 'object'" v-slot:body.append="{ headers }">
+                        <tr>
+                            <td v-for="h in headers" :key="'sum-'+h.value" class="text-right font-weight-medium">
+                                <span v-if="sumFormat[h.value]">{{ sumByColumn(h.value) }}</span>
+                            </td>
+                        </tr>
+                    </template>
+                </v-data-table>
+    
+                <v-divider v-if="sumFormat && typeof sumFormat === 'string'"></v-divider>
+                <v-card-actions v-if="sumFormat && typeof sumFormat === 'string'">
+                    <v-spacer></v-spacer><span class="title font-weight-light">{{sumText}}</span>
+                </v-card-actions>
+                <f-dialog v-model="editDialog" v-bind="updateFormAttr" :data.sync="editData" :data-out.sync="vueData[dataOut]" :title="formTitle" :button="updateButton" :controls="updateForm"></f-dialog>
+            </v-card>
+            `;
+        //----------------------------------------------------------------------       
+
+        return {
+            editDialog: false,
+            search: '',
+            searchOpen: false,
+            itemselected: [],
+            returnValue: [],
+            editData: {},
+            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'",
+                    label: "Lưu",
+                    getoutdata: true,
+                    action: () => {
+                        this.save(this.editAPI());
+                    }
+                },
+                {
+                    "v-if": "title=='Thêm mới'",
+                    label: "Thêm mới",
+                    getoutdata: true,
+                    action: () => {
+                        this.addnew(this.newAPI())
+                    }
+                }
+            ],
+            newAction: function () {
+                if (this.updateApi) return this.updateApi['new-action']
+                else return null;
+            },
+            newAPI: function () {
+                if (this.updateApi) return this.updateApi.new;
+                else return null;
+            },
+            editAction: function () {
+                if (this.updateApi) return this.updateApi['edit-action']
+                else return null;
+            },
+            editAPI: function () {
+                if (this.updateApi) return this.updateApi.edit;
+                else return null;
+            },
+            deleteAPI: function () {
+                if (this.updateApi) return this.updateApi.delete;
+                else return null;
+            },
+            defaultItem: function () {
+                if (this.updateApi) {
+                    if (typeof this.updateApi['default-item'] === 'undefined') return {};
+                    var dataItem = {}
+                    mapData(this.updateApi['default-item'], dataItem, vueData);
+                    return dataItem;
+                }
+                else return {};
+            },
+        }
+    },
+    mounted: function () {
+        this.editData = Object.assign({}, this.defaultItem())
+        this.editedIndex = -1
+        this.itemSelectRebuild(this.value);
+
+        if (this.heightNum !== null && this.heightNum <= 0) {
+            this.updateFillHeight();
+            this.resizeHandler = this.updateFillHeight.bind(this);
+            window.addEventListener('resize', this.resizeHandler);
+        }
+    },
+    beforeDestroy: function () { this.removeResize(); },
+    beforeUnmount: function () { this.removeResize(); },
+    watch: {
+        editDialog(val) {
+            if (!val) {
+                _.forEach(this.editData, (v, k) => {
+                    this.editData[k] = undefined;
+                });
+                this.editedIndex = -1
+            } else {
+                this.editData.dialogModel = (this.edit ? 'edit' : 'new')
+            }
+        },
+        value(newVal, oldVal,) {
+            t = this;
+            if (t.returnValue != newVal) this.itemSelectRebuild(newVal);
+        },
+        items(newVal) {
+            if (!this.headers) this.autoHeaders = this.buildAutoHeaders(newVal || []);
+            if (this.resizeHandler) this.updateFillHeight();
+        }
+    },
+    computed: {
+        // null = không khai height → bảng tự giãn theo số dòng (mặc định của v-data-table)
+        heightNum() {
+            if (this.height === undefined || this.height === null || this.height === '') return null;
+            var n = Number(this.height);
+            return isNaN(n) ? null : n;
+        },
+        tableHeight() {
+            if (this.heightNum === null) return undefined;
+            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() {
+            var h = this.headers || this.autoHeaders;
+            if (_.isBoolean(this.disabledUpdate) && this.disabledUpdate) {
+                _.remove(h, function (n) {
+                    return n.value == 'ctrl-update';
+                });
+            };
+
+            return h;
+        },
+        _hideDefaultFooter() {
+            if (this.items) {
+                if (this.itemsPerPage > 0 && this.itemsPerPage < this.items.length) return false;
+            }
+            if (this.hideDefaultFooter) return this.hideDefaultFooter;
+            return false;
+        },
+        edit() {
+            return this.editedIndex >= 0;
+        },
+        formTitle() {
+            return this.edit ? 'Cập nhật' : 'Thêm mới';
+        },
+        dataOut() {
+            if (this.updateApi) return this.updateApi['data-out']
+            else return null;
+        },
+        sumText() {
+            var items = this.items;
+            return _.replace(this.sumFormat, /\[\[(.*?)\]\]/gm, function (s, key) {
+                return numeral(_.sumBy(items, key)).format('0,0');
+            });
+        }
+    },
+    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;
+            }
+        },
+        updateFillHeight() {
+            var t = this;
+            t.$nextTick(function () {
+                requestAnimationFrame(function () {
+                    var root = t.$refs.myTable && t.$refs.myTable.$el;
+                    if (!root) return;
+                    var wrapper = root.querySelector('.v-data-table__wrapper');
+                    if (!wrapper) return;
+                    var rootRect = root.getBoundingClientRect();
+                    var wrapRect = wrapper.getBoundingClientRect();
+                    // phần nằm dưới vùng cuộn (footer phân trang, dòng tổng, viền card)
+                    var below = Math.max(0, rootRect.bottom - wrapRect.bottom);
+                    var margin = Math.abs(t.heightNum);
+                    t.fillHeight = Math.max(150, window.innerHeight - wrapRect.top - below - margin);
+                });
+            });
+        },
+        buildAutoHeaders(items) {
+            var arrHeaders = buildHeader(items);
+            var hasEditOrDelete = this.updateApi && (this.updateApi.edit || this.updateApi.delete);
+            if (arrHeaders.length > 0 && hasEditOrDelete && !this.disabledUpdate) {
+                arrHeaders.push({ "text": "", "value": "ctrl-update", "divider": true });
+            }
+            return arrHeaders;
+        },
+        sumByColumn(key) {
+            return numeral(_.sumBy(this.items, key)).format(this.sumFormat[key]);
+        },
+        toggleSearch() {
+            this.searchOpen = !this.searchOpen;
+            if (this.searchOpen) {
+                var t = this;
+                this.$nextTick(function () {
+                    t.$refs.searchField && t.$refs.searchField.focus();
+                });
+            }
+        },
+        onSearchBlur() {
+            if (!this.search) this.searchOpen = false;
+        },
+        itemSelect() {
+            var t = this;
+
+            setTimeout(function () {
+                if (!t.returnObject) t.returnValue = _.map(t.itemselected, t.itemKey);
+                else t.returnValue = t.itemselected;
+
+                t.$emit('input', t.returnValue);
+            }, 10);
+        },
+
+        itemSelectRebuild(newVal) {
+            var t = this;
+            if (t.returnObject) t.itemselected = newVal;
+            else {
+                t.itemselected = [];
+
+                _.forEach(newVal, function (val) {
+                    t.itemselected.push(_.find(t.items, [t.itemKey, val]));
+                });
+            }
+        },
+        newBtnClick() {
+            if (this.newAction()) runAction(this.newAction());
+            if (this.newAPI()) {
+                Object.assign(this.editData, this.defaultItem());
+                this.editDialog = true;
+            }
+        },
+        editItem(item) {
+
+            if (this.editAction()) runAction(this.editAction(), { item: item });
+
+            if (this.editAPI()) {
+                this.editedIndex = this.items.indexOf(item);
+                Object.assign(this.editData, this.defaultItem());
+                this.editData = Object.assign({}, item);
+                this.editDialog = true;
+            }
+        },
+
+        deleteItem(item, deleteAPI) {
+            const items = this.items;
+            var actionAPI = deleteAPI;
+            var indexDelete = items.indexOf(item)
+            confirm({
+                title: (actionAPI.CONFIRM ? bindDataToString(actionAPI.CONFIRM, _.assignIn({ $row: item, item: item }, vueData)) : "Bạn có chắc chắn muốn xoá ?"),
+                action: function () {
+                    vueAction(actionAPI, { $row: item, item: item }, function () {
+                        items.splice(indexDelete, 1);
+                    });
+                }
+            });
+        },
+
+        save(actionAPI) {
+            var diaCtl = this;
+            if (diaCtl.editedIndex > -1) {
+                if (actionAPI) {
+                    if (actionAPI.CONFIRM) {
+                        confirm({
+                            title: bindDataToString(actionAPI.CONFIRM, _.assignIn({ $row: diaCtl.editData, item: diaCtl.editData }, vueData)),
+                            action: function () {
+                                vueAction(actionAPI, { $row: diaCtl.editData, item: diaCtl.editData }, function (d) {
+                                    if (!d.Message) {
+                                        if (_.isArray(d.data)) {
+                                            if (d.data[0]) {
+                                                _.forEach(d.data[0], function (value, key) {
+                                                    diaCtl.editData[key] = value;
+                                                });
+                                            }
+                                        }
+                                    }
+                                    _.assignIn(diaCtl.items[diaCtl.editedIndex], diaCtl.editData);
+                                    diaCtl.editDialog = false;
+                                });
+                            },
+                            cancel: function () { }
+                        });
+                    } else {
+                        vueAction(actionAPI, { $row: diaCtl.editData, item: diaCtl.editData }, function (d) {
+                            if (!d.Message) {
+                                if (_.isArray(d.data)) {
+                                    if (d.data[0]) {
+                                        _.forEach(d.data[0], function (value, key) {
+                                            diaCtl.editData[key] = value;
+                                        });
+                                    }
+                                }
+                            }
+                            _.assignIn(diaCtl.items[diaCtl.editedIndex], diaCtl.editData);
+                            diaCtl.editDialog = false;
+                        });
+                    }
+                } else {
+                    _.assignIn(diaCtl.items[diaCtl.editedIndex], diaCtl.editData);
+                    diaCtl.editDialog = false;
+                }
+            }
+        },
+
+        addnew(actionAPI) {
+            var diaCtl = this;
+            if (diaCtl.editedIndex == -1) {
+                if (actionAPI) {
+                    if (actionAPI.CONFIRM) {
+                        confirm({
+                            title: bindDataToString(actionAPI.CONFIRM, _.assignIn({ $row: diaCtl.editData, item: diaCtl.editData }, vueData)),
+                            action: function () {
+                                vueAction(actionAPI, { $row: diaCtl.editData, item: diaCtl.editData }, function (d) {
+                                    if (d) {
+                                        if (_.isArray(d.data)) {
+                                            if (d.data[0]) {
+                                                _.forEach(d.data[0], function (value, key) {
+                                                    diaCtl.editData[key] = value;
+                                                });
+                                            }
+                                        }
+                                    }
+                                    diaCtl.items.push(_.cloneDeep(diaCtl.editData));
+                                    diaCtl.editDialog = false;
+                                });
+                            },
+                            cancel: function () { }
+                        });
+                    } else {
+                        vueAction(actionAPI, { $row: diaCtl.editData, item: diaCtl.editData }, function (d) {
+                            if (d) {
+                                if (_.isArray(d.data)) {
+                                    if (d.data[0]) {
+                                        _.forEach(d.data[0], function (value, key) {
+                                            diaCtl.editData[key] = value;
+                                        });
+                                    }
+                                }
+                            }
+                            diaCtl.items.push(_.cloneDeep(diaCtl.editData));
+                            diaCtl.editDialog = false;
+                        });
+                    }
+                } else {
+                    diaCtl.items.push(_.cloneDeep(diaCtl.editData));
+                    diaCtl.editDialog = false;
+                }
+            }
+        },
+        updateSearch: _.debounce(function (text) {
+            this.search = text;
+        }, 300),
+        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();
+        },
+    }
+});
+//===========================================================================================
+//===========================================================================================
+//===========================================================================================
+
+Vue.component('t-html', {
+    template: `<div class="my-3" v-bind="$attrs" v-html="$attrs['value']"></div>`,
+});
+//-----------------------------------------------------------------------------------------------------------
+Vue.component('t-label', {
+    template: `<div class="text-no-wrap" v-bind="$attrs">{{$attrs['value']}}</div>`,
+});
+//-----------------------------------------------------------------------------------------------------------
+Vue.component('t-num', {
+    props: {
+        value: {
+            type: Number,
+            default: 0
+        },
+        hidezero: {
+            type: Boolean,
+            default: true
+        },
+        format: {
+            type: String,
+            default: ''
+        }
+    },
+    template: `<div v-if="!_.isNull(value) && !(hidezero && value==0)" class="text-no-wrap text-end" v-bind="$attrs">{{ format != ''? numeral(value).format(format) : Number.isInteger(value)?numeral(value).format('0,0'): numeral(value).format('0,0.0') }}</div>`,
+});
+//-----------------------------------------------------------------------------------------------------------
+Vue.component('t-time', {
+    props: {
+        format: {
+            type: String,
+            default: 'DD/MM/YYYY'
+        }
+    },
+    template: `<div v-if="$attrs['value']" class="text-no-wrap" v-bind="$attrs">{{ moment($attrs['value']).format(format) }}</div>`,
+});
+//-----------------------------------------------------------------------------------------------------------
+Vue.component('t-boolean', {
+    props: {
+        value: {
+            default: null
+        },
+        colorTrue: {
+            default: "primary"
+        },
+        colorFalse: {
+            default: "red"
+        },
+        iconTrue: {
+            default: "mdi-check"
+        },
+        iconFalse: {
+            default: "mdi-close"
+        },
+    },
+    template: `<v-icon v-bind="$attrs" :color="value?colorTrue:colorFalse">{{value?iconTrue:iconFalse}}</v-icon>`,
+});
+//-----------------------------------------------------------------------------------------------------------
+Vue.component('t-check', {
+    props: {
+        value: {
+            default: null
+        },
+        falseValue: {
+            default: false
+        }
+    },
+    template: `<v-checkbox v-model="ctlValue" v-bind="$attrs" :false-value="falseValue" hide-details class="d-inline-flex ma-1 pa-1" v-on:change="onchange($event)" />`,
+    data: function () {
+        return {
+            ctlValue: this.value
+        }
+    },
+    watch: {
+        value(newVal) {
+            this.ctlValue = newVal
+        }
+    },
+    methods: {
+        onchange: function (e) {
+            if (!e) this.ctlValue = false;
+            tableActionEvent(this);
+        }
+    }
+});
+//-----------------------------------------------------------------------------------------------------------
+Vue.component('t-text', {
+    props: ['value'],
+    template: `<v-text-field v-model="ctlValue" v-bind="$attrs" v-on:change="onchange($event)" dense outlined hide-details/>`,
+    data: function () {
+        return {
+            ctlValue: this.value
+        }
+    },
+    watch: {
+        value(newVal) {
+            this.ctlValue = newVal
+        }
+    },
+    methods: {
+        onchange: function (e) {
+            console.log(e)
+            tableActionEvent(this);
+        }
+    }
+});
+
+//-----------------------------------------------------------------------------------------------------------
+Vue.component('t-select', {
+    props: ['value'],
+    template: `<v-select v-model="ctlValue" v-bind="$attrs" v-on:change="onchange($event)" dense hide-details append-icon="mdi-menu-swap"/>`,
+    data: function () {
+        return {
+            ctlValue: this.value
+        }
+    },
+    watch: {
+        value(newVal) {
+            this.ctlValue = newVal
+        }
+    },
+    methods: {
+        onchange: function (e) {
+            console.log(e)
+            tableActionEvent(this);
+        }
+    }
+});
+//-----------------------------------------------------------------------------------------------------------
+Vue.component('t-combobox', {
+    props: {
+        value: {
+            default: undefined
+        },
+        text: {
+            default: undefined
+        },
+        items: {
+            type: Array,
+            default: []
+        },
+        api: {
+            type: String,
+            default: undefined
+        },
+        apiData: {
+            type: Object,
+            default: {}
+        },
+
+    },
+    template: `<v-autocomplete refs="abc" v-model="ctlValue" v-bind="$attrs" :loading="loading" :items="dataItems" :search-input.sync="search" v-on:change="onchange($event)" hide-details dense></v-autocomplete>`,
+    data: function () {
+        return {
+            dataItems: this.items,
+            ctlValue: this.value,
+            loading: false,
+            search: null,
+            getDataFormAPI: _.debounce((str) => {
+                if ((this.search && this.search.length < 2) || !this.api) return;
+                var self = this;
+                this.loading = true
+
+                if (typeof this.apiData != 'object') this.apiData = JSON.parse(this.apiData);
+
+                mapData(this.apiData, this.apiData, _.assignIn({}, vueData, { TEXT: this.search }));
+
+                console.log("API-CALL: ", this.api)
+                ajaxCALL(this.api, this.apiData, function (d) {
+                    if (_.isArray(d.data)) self.dataItems = d.data;
+                    else self.dataItems = d;
+
+                    self.loading = false
+                }, function (e) {
+                    console.log("API Error", e);
+                })
+
+            }, 500)
+        }
+    },
+    watch: {
+        search(newval, oldval) {
+            newval && oldval && this.querySelections(newval)
+        },
+        items(val) {
+            this.dataItems = val
+        },
+        value(newVal) {
+            this.ctlValue = newVal
+        }
+    },
+    methods: {
+        querySelections(val) {
+            this.getDataFormAPI(val);
+        },
+        onchange: function (e) {
+            if (e) tableActionEvent(this);
+        }
+    },
+});
+//-----------------------------------------------------------------------------------------------------------
+Vue.component('t-menu', {
+    props: {
+        iconText: {
+            default: 'mdi-menu'
+        },
+        items: {
+            default: []
+        }
+    },
+    template: `
+             <v-menu offset-y origin="center center" transition="slide-y-transition" max-height = 500>
+                <template v-slot:activator="{ on }">                
+                    <v-icon v-on="on">{{iconText}}</v-icon>
+                </template>
+                <v-list >
+                    <v-list-item v-bind="$attrs" v-for="(item, index) in items" :key="index" @click="onSelect(item)" >
+                        <v-list-item-icon v-if="item['icon-text']" class="mr-3">
+                            <v-icon :color="item.color">{{item['icon-text']}}</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-content class="mr-2">
+                            <v-list-item-title v-text="item.text"></v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                </v-list>
+            </v-menu> 
+        `,
+    data: function () {
+        return {
+        }
+    },
+    methods: {
+        onSelect: function (e) {
+            this.$attrs['action'] = e['action'];
+            tableActionEvent(this);
+        }
+    }
+});
+//-----------------------------------------------------------------------------------------------------------
+Vue.component('t-link', {
+    props: ['id', 'target', 'url', 'title', 'onclose'],
+    template: `<a :href="_url" :target="target" v-bind="$attrs" @click="onclick()"><v-icon v-if="$attrs['icon-text']" left color="primary">{{$attrs['icon-text']}}</v-icon> {{ $attrs['value']}}</a>`,
+    computed: {
+        _url: function () {
+            if (this.target != 'dialog' && this.url) return this.url;
+            return null;
+        },
+    },
+    methods: {
+        onclick: function (e) {
+            if (this.target == 'dialog') {
+                tableActionEvent(this);
+                openWindow({
+                    id: this.id,
+                    title: this.title,
+                    url: this.url,
+                    onclose: this.onclose,
+                });
+            }
+        }
+    }
+});
+//-----------------------------------------------------------------------------------------------------------
+Vue.component('t-button', {
+    props: {
+        text: {
+            default: true
+        },
+        color: {
+            default: "primary"
+        },
+        label: {
+            default: null
+        },
+        iconText: {
+            default: null
+        },
+        target: {
+            default: null
+        },
+        wid: {
+            default: null
+        },
+        url: {
+            default: null
+        },
+        title: {
+            default: null
+        },
+        onclose: {
+            default: null
+        },
+        quset: {
+            default: []
+        },
+    },
+    template: `
+            <v-btn class="custom-transform-class text-none" v-bind="$attrs" :text="text" :color="color" :target="target" :href="_url" @click="clickButton()">
+                <v-icon v-if="iconText" :left="label" class="ml-0">{{iconText}}</v-icon>{{label}}
+            </v-btn>`,
+    computed: {
+        _url: function () {
+            if (this.target != 'dialog' && this.url) return this.url;
+            return null;
+        },
+    },
+    methods: {
+        clickButton: function (e) {
+            if (this.target == 'dialog') {
+                console.log("dialog onclose", this.onclose)
+                openWindow({
+                    id: this.wid,
+                    title: this.title,
+                    url: this.url,
+                    onclose: this.onclose
+                });
+            } else tableActionEvent(this);
+        }
+    }
+});