@blueking/vxe-table/es/table/src/util.js

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...

import { watch, reactive } from 'vue';
import XEUtils from 'xe-utils';
import { ColumnInfo } from './columnInfo';
import { isPx, isScale } from '../../ui/src/dom';
const getAllConvertColumns = (columns, parentColumn) => {
    const result = [];
    columns.forEach((column) => {
        column.parentId = parentColumn ? parentColumn.id : null;
        if (column.visible) {
            if (column.children && column.children.length && column.children.some((column) => column.visible)) {
                result.push(column);
                result.push(...getAllConvertColumns(column.children, column));
            }
            else {
                result.push(column);
            }
        }
    });
    return result;
};
export const convertHeaderColumnToRows = (originColumns) => {
    let maxLevel = 1;
    const traverse = (column, parent) => {
        if (parent) {
            column.level = parent.level + 1;
            if (maxLevel < column.level) {
                maxLevel = column.level;
            }
        }
        if (column.children && column.children.length && column.children.some((column) => column.visible)) {
            let colSpan = 0;
            column.children.forEach((subColumn) => {
                if (subColumn.visible) {
                    traverse(subColumn, column);
                    colSpan += subColumn.colSpan;
                }
            });
            column.colSpan = colSpan;
        }
        else {
            column.colSpan = 1;
        }
    };
    originColumns.forEach((column) => {
        column.level = 1;
        traverse(column);
    });
    const rows = [];
    for (let i = 0; i < maxLevel; i++) {
        rows.push([]);
    }
    const allColumns = getAllConvertColumns(originColumns);
    allColumns.forEach((column) => {
        if (column.children && column.children.length && column.children.some((column) => column.visible)) {
            column.rowSpan = 1;
        }
        else {
            column.rowSpan = maxLevel - column.level + 1;
        }
        rows[column.level - 1].push(column);
    });
    return rows;
};
export function restoreScrollLocation($xeTable, scrollLeft, scrollTop) {
    const internalData = $xeTable.internalData;
    return $xeTable.clearScroll().then(() => {
        if (scrollLeft || scrollTop) {
            // 重置最后滚动状态
            internalData.lastScrollLeft = 0;
            internalData.lastScrollTop = 0;
            internalData.intoRunScroll = false;
            internalData.inVirtualScroll = false;
            internalData.inWheelScroll = false;
            internalData.inHeaderScroll = false;
            internalData.inBodyScroll = false;
            internalData.inFooterScroll = false;
            internalData.scrollRenderType = '';
            // 还原滚动状态
            return $xeTable.scrollTo(scrollLeft, scrollTop);
        }
    });
}
/**
 * 生成行的唯一主键
 */
export function getRowUniqueId() {
    return XEUtils.uniqueId('row_');
}
// 行主键 key
export function getRowkey($xeTable) {
    const { props } = $xeTable;
    const { computeRowOpts } = $xeTable.getComputeMaps();
    const { rowId } = props;
    const rowOpts = computeRowOpts.value;
    return rowId || rowOpts.keyField || '_X_ROW_KEY';
}
// 行主键 value
export function getRowid($xeTable, row) {
    const rowid = XEUtils.get(row, getRowkey($xeTable));
    return XEUtils.eqNull(rowid) ? '' : encodeURIComponent(rowid);
}
export const handleFieldOrColumn = ($xeTable, fieldOrColumn) => {
    if (fieldOrColumn) {
        return XEUtils.isString(fieldOrColumn) ? $xeTable.getColumnByField(fieldOrColumn) : fieldOrColumn;
    }
    return null;
};
function getPaddingLeftRightSize(elem) {
    if (elem) {
        const computedStyle = getComputedStyle(elem);
        const paddingLeft = XEUtils.toNumber(computedStyle.paddingLeft);
        const paddingRight = XEUtils.toNumber(computedStyle.paddingRight);
        return paddingLeft + paddingRight;
    }
    return 0;
}
function getElementMarginWidth(elem) {
    if (elem) {
        const computedStyle = getComputedStyle(elem);
        const marginLeft = XEUtils.toNumber(computedStyle.marginLeft);
        const marginRight = XEUtils.toNumber(computedStyle.marginRight);
        return elem.offsetWidth + marginLeft + marginRight;
    }
    return 0;
}
function queryCellElement(cell, selector) {
    return cell.querySelector('.vxe-cell' + selector);
}
export function toFilters(filters) {
    if (filters && XEUtils.isArray(filters)) {
        return filters.map(({ label, value, data, resetValue, checked }) => {
            return { label, value, data, resetValue, checked: !!checked, _checked: !!checked };
        });
    }
    return filters;
}
export function toTreePathSeq(path) {
    return path.map((num, i) => i % 2 === 0 ? (Number(num) + 1) : '.').join('');
}
export function getCellValue(row, column) {
    return XEUtils.get(row, column.field);
}
export function setCellValue(row, column, value) {
    return XEUtils.set(row, column.field, value);
}
export function getRefElem(refEl) {
    if (refEl) {
        const rest = refEl.value;
        if (rest) {
            return (rest.$el || rest);
        }
    }
    return null;
}
/**
 * 列宽拖动最大宽度
 * @param params
 * @returns
 */
export function getColReMaxWidth(params) {
    const { $table } = params;
    const { computeResizableOpts } = $table.getComputeMaps();
    const resizableOpts = computeResizableOpts.value;
    const { maxWidth: reMaxWidth } = resizableOpts;
    // 如果自定义调整宽度逻辑
    if (reMaxWidth) {
        const customMaxWidth = XEUtils.isFunction(reMaxWidth) ? reMaxWidth(params) : reMaxWidth;
        if (customMaxWidth !== 'auto') {
            return Math.max(1, XEUtils.toNumber(customMaxWidth));
        }
    }
    return -1;
}
/**
 * 列宽拖动最小宽度
 * @param params
 * @returns
 */
export function getColReMinWidth(params) {
    const { $table, column, cell } = params;
    const { props: tableProps } = $table;
    const { computeResizableOpts } = $table.getComputeMaps();
    const resizableOpts = computeResizableOpts.value;
    const { minWidth: reMinWidth } = resizableOpts;
    // 如果自定义调整宽度逻辑
    if (reMinWidth) {
        const customMinWidth = XEUtils.isFunction(reMinWidth) ? reMinWidth(params) : reMinWidth;
        if (customMinWidth !== 'auto') {
            return Math.max(1, XEUtils.toNumber(customMinWidth));
        }
    }
    const { showHeaderOverflow: allColumnHeaderOverflow } = tableProps;
    const { showHeaderOverflow, minWidth: colMinWidth } = column;
    const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
    const showEllipsis = headOverflow === 'ellipsis';
    const showTitle = headOverflow === 'title';
    const showTooltip = headOverflow === true || headOverflow === 'tooltip';
    const hasEllipsis = showTitle || showTooltip || showEllipsis;
    const minTitleWidth = XEUtils.floor((XEUtils.toNumber(getComputedStyle(cell).fontSize) || 14) * 1.6);
    const paddingLeftRight = getPaddingLeftRightSize(cell) + getPaddingLeftRightSize(queryCellElement(cell, ''));
    let mWidth = minTitleWidth + paddingLeftRight;
    // 默认最小宽处理
    if (hasEllipsis) {
        const dragIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '>.vxe-cell--drag-handle'));
        const checkboxIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '>.vxe-cell--checkbox'));
        const requiredIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--required-icon'));
        const editIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--edit-icon'));
        const prefixIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell-title-prefix-icon'));
        const suffixIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell-title-suffix-icon'));
        const sortIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--sort'));
        const filterIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--filter'));
        mWidth += dragIconWidth + checkboxIconWidth + requiredIconWidth + editIconWidth + prefixIconWidth + suffixIconWidth + filterIconWidth + sortIconWidth;
    }
    // 如果设置最小宽
    if (colMinWidth) {
        const { refTableBody } = $table.getRefMaps();
        const tableBody = refTableBody.value;
        const bodyElem = tableBody ? tableBody.$el : null;
        if (bodyElem) {
            if (isScale(colMinWidth)) {
                const bodyWidth = bodyElem.clientWidth - 1;
                const meanWidth = bodyWidth / 100;
                return Math.max(mWidth, Math.floor(XEUtils.toInteger(colMinWidth) * meanWidth));
            }
            else if (isPx(colMinWidth)) {
                return Math.max(mWidth, XEUtils.toInteger(colMinWidth));
            }
        }
    }
    return mWidth;
}
export function isColumnInfo(column) {
    return column && (column.constructor === ColumnInfo || column instanceof ColumnInfo);
}
export function createColumn($xeTable, options, renderOptions) {
    return isColumnInfo(options) ? options : reactive(new ColumnInfo($xeTable, options, renderOptions));
}
export function watchColumn($xeTable, props, column) {
    Object.keys(props).forEach(name => {
        watch(() => props[name], (value) => {
            column.update(name, value);
            if ($xeTable) {
                if (name === 'filters') {
                    $xeTable.setFilter(column, value);
                    $xeTable.handleUpdateDataQueue();
                }
                else if (['visible', 'fixed', 'width', 'minWidth', 'maxWidth'].includes(name)) {
                    $xeTable.handleRefreshColumnQueue();
                }
            }
        });
    });
}
export function assembleColumn($xeTable, elem, column, colgroup) {
    const { reactData } = $xeTable;
    const { staticColumns } = reactData;
    const parentElem = elem.parentNode;
    const parentColumn = colgroup ? colgroup.columnConfig : null;
    const parentCols = parentColumn ? parentColumn.children : staticColumns;
    if (parentElem && parentCols) {
        parentCols.splice(XEUtils.arrayIndexOf(parentElem.children, elem), 0, column);
        reactData.staticColumns = staticColumns.slice(0);
    }
}
export function destroyColumn($xeTable, column) {
    const { reactData } = $xeTable;
    const { staticColumns } = reactData;
    const matchObj = XEUtils.findTree(staticColumns, item => item.id === column.id, { children: 'children' });
    if (matchObj) {
        matchObj.items.splice(matchObj.index, 1);
    }
    reactData.staticColumns = staticColumns.slice(0);
}
export function getRootColumn($xeTable, column) {
    const { internalData } = $xeTable;
    const { fullColumnIdData } = internalData;
    if (!column) {
        return null;
    }
    let parentColId = column.parentId;
    while (fullColumnIdData[parentColId]) {
        const column = fullColumnIdData[parentColId].column;
        parentColId = column.parentId;
        if (!parentColId) {
            return column;
        }
    }
    return column;
}
const lineOffsetSizes = {
    mini: 3,
    small: 2,
    medium: 1
};
const countTreeExpand = (prevRow, params) => {
    let count = 1;
    if (!prevRow) {
        return count;
    }
    const { $table } = params;
    const { computeTreeOpts } = $table.getComputeMaps();
    const treeOpts = computeTreeOpts.value;
    const { transform, mapChildrenField } = treeOpts;
    const childrenField = treeOpts.children || treeOpts.childrenField;
    const rowChildren = prevRow[transform ? mapChildrenField : childrenField];
    if (rowChildren && $table.isTreeExpandByRow(prevRow)) {
        for (let index = 0; index < rowChildren.length; index++) {
            count += countTreeExpand(rowChildren[index], params);
        }
    }
    return count;
};
export const getOffsetSize = ($xeTable) => {
    const { computeSize } = $xeTable.getComputeMaps();
    const vSize = computeSize.value;
    if (vSize) {
        return lineOffsetSizes[vSize] || 0;
    }
    return 0;
};
export function calcTreeLine(params, prevRow) {
    const { $table } = params;
    const tableReactData = $table.reactData;
    let expandSize = 1;
    if (prevRow) {
        expandSize = countTreeExpand(prevRow, params);
    }
    return tableReactData.rowHeight * expandSize - (prevRow ? 1 : (12 - getOffsetSize($table)));
}
export function mergeBodyMethod(mergeList, _rowIndex, _columnIndex) {
    for (let mIndex = 0; mIndex < mergeList.length; mIndex++) {
        const { row: mergeRowIndex, col: mergeColIndex, rowspan: mergeRowspan, colspan: mergeColspan } = mergeList[mIndex];
        if (mergeColIndex > -1 && mergeRowIndex > -1 && mergeRowspan && mergeColspan) {
            if (mergeRowIndex === _rowIndex && mergeColIndex === _columnIndex) {
                return { rowspan: mergeRowspan, colspan: mergeColspan };
            }
            if (_rowIndex >= mergeRowIndex && _rowIndex < mergeRowIndex + mergeRowspan && _columnIndex >= mergeColIndex && _columnIndex < mergeColIndex + mergeColspan) {
                return { rowspan: 0, colspan: 0 };
            }
        }
    }
}
export function clearTableDefaultStatus($xeTable) {
    const { props, internalData } = $xeTable;
    internalData.initStatus = false;
    $xeTable.clearSort();
    $xeTable.clearCurrentRow();
    $xeTable.clearCurrentColumn();
    $xeTable.clearRadioRow();
    $xeTable.clearRadioReserve();
    $xeTable.clearCheckboxRow();
    $xeTable.clearCheckboxReserve();
    $xeTable.clearRowExpand();
    $xeTable.clearTreeExpand();
    $xeTable.clearTreeExpandReserve();
    $xeTable.clearPendingRow();
    if ($xeTable.clearFilter) {
        $xeTable.clearFilter();
    }
    if ($xeTable.clearSelected && (props.keyboardConfig || props.mouseConfig)) {
        $xeTable.clearSelected();
    }
    if ($xeTable.clearCellAreas && props.mouseConfig) {
        $xeTable.clearCellAreas();
        $xeTable.clearCopyCellArea();
    }
    return $xeTable.clearScroll();
}
export function clearTableAllStatus($xeTable) {
    if ($xeTable.clearFilter) {
        $xeTable.clearFilter();
    }
    return clearTableDefaultStatus($xeTable);
}
export function rowToVisible($xeTable, row) {
    const { reactData, internalData } = $xeTable;
    const tableProps = $xeTable.props;
    const { showOverflow } = tableProps;
    const { refTableBody } = $xeTable.getRefMaps();
    const { columnStore, scrollYLoad, rowHeight } = reactData;
    const { afterFullData, fullAllDataRowIdData } = internalData;
    const tableBody = refTableBody.value;
    const { leftList, rightList } = columnStore;
    const bodyElem = tableBody ? tableBody.$el : null;
    const rowid = getRowid($xeTable, row);
    let offsetFixedLeft = 0;
    leftList.forEach(item => {
        offsetFixedLeft += item.renderWidth;
    });
    let offsetFixedRight = 0;
    rightList.forEach(item => {
        offsetFixedRight += item.renderWidth;
    });
    if (bodyElem) {
        const bodyHeight = bodyElem.clientHeight;
        const bodyScrollTop = bodyElem.scrollTop;
        const trElem = bodyElem.querySelector(`[rowid="${rowid}"]`);
        if (trElem) {
            const trOffsetParent = trElem.offsetParent;
            const trOffsetTop = trElem.offsetTop + (trOffsetParent ? trOffsetParent.offsetTop : 0);
            const trHeight = trElem.clientHeight;
            // 检测行是否在可视区中
            if (trOffsetTop < bodyScrollTop || trOffsetTop > bodyScrollTop + bodyHeight) {
                return $xeTable.scrollTo(null, trOffsetTop);
            }
            else if (trOffsetTop + trHeight >= bodyHeight + bodyScrollTop) {
                return $xeTable.scrollTo(null, bodyScrollTop + trHeight);
            }
        }
        else {
            // 如果是虚拟渲染滚动
            if (scrollYLoad) {
                if (showOverflow) {
                    return $xeTable.scrollTo(null, ($xeTable.findRowIndexOf(afterFullData, row) - 1) * rowHeight);
                }
                let scrollTop = 0;
                const rowRest = fullAllDataRowIdData[rowid];
                const rHeight = rowRest ? (rowRest.height || rowHeight) : rowHeight;
                for (let i = 0; i < afterFullData.length; i++) {
                    const currRow = afterFullData[i];
                    const currRowid = getRowid($xeTable, currRow);
                    if (currRow === row || currRowid === rowid) {
                        break;
                    }
                    const rowRest = fullAllDataRowIdData[currRowid];
                    scrollTop += rowRest ? (rowRest.height || rowHeight) : rowHeight;
                }
                if (scrollTop < bodyScrollTop) {
                    return $xeTable.scrollTo(null, scrollTop - offsetFixedLeft - 1);
                }
                return $xeTable.scrollTo(null, (scrollTop + rHeight) - (bodyHeight - offsetFixedRight - 1));
            }
        }
    }
    return Promise.resolve();
}
export function colToVisible($xeTable, column, row) {
    const { reactData, internalData } = $xeTable;
    const { refTableBody } = $xeTable.getRefMaps();
    const { columnStore, scrollXLoad } = reactData;
    const { visibleColumn } = internalData;
    const { leftList, rightList } = columnStore;
    const tableBody = refTableBody.value;
    const bodyElem = tableBody ? tableBody.$el : null;
    if (column.fixed) {
        return Promise.resolve();
    }
    let offsetFixedLeft = 0;
    leftList.forEach(item => {
        offsetFixedLeft += item.renderWidth;
    });
    let offsetFixedRight = 0;
    rightList.forEach(item => {
        offsetFixedRight += item.renderWidth;
    });
    if (bodyElem) {
        const bodyWidth = bodyElem.clientWidth;
        const bodyScrollLeft = bodyElem.scrollLeft;
        let tdElem = null;
        if (row) {
            const rowid = getRowid($xeTable, row);
            tdElem = bodyElem.querySelector(`[rowid="${rowid}"] .${column.id}`);
        }
        if (!tdElem) {
            tdElem = bodyElem.querySelector(`.${column.id}`);
        }
        if (tdElem) {
            const tdOffsetParent = tdElem.offsetParent;
            const tdOffsetLeft = tdElem.offsetLeft + (tdOffsetParent ? tdOffsetParent.offsetLeft : 0);
            const cellWidth = tdElem.clientWidth;
            // 检测是否在可视区中
            if (tdOffsetLeft < (bodyScrollLeft + offsetFixedLeft)) {
                return $xeTable.scrollTo(tdOffsetLeft - offsetFixedLeft - 1);
            }
            else if ((tdOffsetLeft + cellWidth - bodyScrollLeft) > (bodyWidth - offsetFixedRight)) {
                return $xeTable.scrollTo((tdOffsetLeft + cellWidth) - (bodyWidth - offsetFixedRight - 1));
            }
        }
        else {
            // 检测是否在虚拟渲染可视区中
            if (scrollXLoad) {
                let scrollLeft = 0;
                const cellWidth = column.renderWidth;
                for (let i = 0; i < visibleColumn.length; i++) {
                    const currCol = visibleColumn[i];
                    if (currCol === column || currCol.id === column.id) {
                        break;
                    }
                    scrollLeft += currCol.renderWidth;
                }
                if (scrollLeft < bodyScrollLeft) {
                    return $xeTable.scrollTo(scrollLeft - offsetFixedLeft - 1);
                }
                return $xeTable.scrollTo((scrollLeft + cellWidth) - (bodyWidth - offsetFixedRight - 1));
            }
        }
    }
    return Promise.resolve();
}