vxe-table 3.8.23 → 3.9.0-rc.0

package/es/table/module/export/util.js

@@ -0,0 +1,20 @@
+// 默认导出或打印的 HTML 样式
+const defaultHtmlStyle = 'body{margin:0;padding: 0 1px;color:#333333;font-size:14px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu}body *{-webkit-box-sizing:border-box;box-sizing:border-box}.vxe-table{border-collapse:collapse;text-align:left;border-spacing:0}.vxe-table:not(.is--print){table-layout:fixed}.vxe-table,.vxe-table th,.vxe-table td,.vxe-table td{border-color:#D0D0D0;border-style:solid;border-width:0}.vxe-table.is--print{width:100%}.border--default,.border--full,.border--outer{border-top-width:1px}.border--default,.border--full,.border--outer{border-left-width:1px}.border--outer,.border--default th,.border--default td,.border--full th,.border--full td,.border--outer th,.border--inner th,.border--inner td{border-bottom-width:1px}.border--default,.border--outer,.border--full th,.border--full td{border-right-width:1px}.border--default th,.border--full th,.border--outer th{background-color:#f8f8f9}.vxe-table td>div,.vxe-table th>div{padding:.5em .4em}.col--center{text-align:center}.col--right{text-align:right}.vxe-table:not(.is--print) .col--ellipsis>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.vxe-table--tree-node{text-align:left}.vxe-table--tree-node-wrapper{position:relative}.vxe-table--tree-icon-wrapper{position:absolute;top:50%;width:1em;height:1em;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.vxe-table--tree-unfold-icon,.vxe-table--tree-fold-icon{position:absolute;width:0;height:0;border-style:solid;border-width:.5em;border-right-color:transparent;border-bottom-color:transparent}.vxe-table--tree-unfold-icon{left:.3em;top:0;border-left-color:#939599;border-top-color:transparent}.vxe-table--tree-fold-icon{left:0;top:.3em;border-left-color:transparent;border-top-color:#939599}.vxe-table--tree-cell{display:block;padding-left:1.5em}.vxe-table input[type="checkbox"]{margin:0}.vxe-table input[type="checkbox"],.vxe-table input[type="radio"],.vxe-table input[type="checkbox"]+span,.vxe-table input[type="radio"]+span{vertical-align:middle;padding-left:0.4em}';
+export function getExportBlobByContent(content, options) {
+    return new Blob([content], { type: `text/${options.type};charset=utf-8;` });
+}
+export function createHtmlPage(opts, content) {
+    const { style } = opts;
+    return [
+        '<!DOCTYPE html><html>',
+        '<head>',
+        '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">',
+        `<title>${opts.sheetName}</title>`,
+        '<style media="print">.vxe-page-break-before{page-break-before:always;}.vxe-page-break-after{page-break-after:always;}</style>',
+        `<style>${defaultHtmlStyle}</style>`,
+        style ? `<style>${style}</style>` : '',
+        '</head>',
+        `<body>${content}</body>`,
+        '</html>'
+    ].join('');
+}

package/es/table/module/filter/mixin.js

@@ -0,0 +1,276 @@
+import XEUtils from 'xe-utils';
+import { VxeUI } from '../../../ui';
+import { toFilters, handleFieldOrColumn } from '../../src/util';
+import { getDomNode, triggerEvent } from '../../../ui/src/dom';
+import { isEnableConf } from '../../../ui/src/utils';
+const { renderer } = VxeUI;
+export default {
+    methods: {
+        /**
+         * 手动弹出筛选面板
+         * @param column
+         */
+        _openFilter(fieldOrColumn) {
+            const column = handleFieldOrColumn(this, fieldOrColumn);
+            if (column && column.filters) {
+                const { elemStore } = this;
+                const { fixed } = column;
+                return this.scrollToColumn(column).then(() => {
+                    const headerWrapperElem = elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper'];
+                    if (headerWrapperElem) {
+                        const filterBtnElem = headerWrapperElem.querySelector(`.vxe-header--column.${column.id} .vxe-filter--btn`);
+                        triggerEvent(filterBtnElem, 'click');
+                    }
+                });
+            }
+            return this.$nextTick();
+        },
+        /**
+         * 修改筛选条件列表
+         * @param {ColumnInfo} fieldOrColumn 列
+         * @param {Array} options 选项
+         */
+        _setFilter(fieldOrColumn, options, update) {
+            const column = handleFieldOrColumn(this, fieldOrColumn);
+            if (column && column.filters) {
+                column.filters = toFilters(options || []);
+            }
+            return update ? this.updateData() : this.$nextTick();
+        },
+        checkFilterOptions() {
+            const { filterStore } = this;
+            filterStore.isAllSelected = filterStore.options.every((item) => item._checked);
+            filterStore.isIndeterminate = !filterStore.isAllSelected && filterStore.options.some((item) => item._checked);
+        },
+        /**
+         * 点击筛选事件
+         * 当筛选图标被点击时触发
+         * 更新选项是否全部状态
+         * 打开筛选面板
+         * @param {Event} evnt 事件
+         * @param {ColumnInfo} column 列配置
+         * @param {Object} params 参数
+         */
+        triggerFilterEvent(evnt, column, params) {
+            const { filterStore } = this;
+            if (filterStore.column === column && filterStore.visible) {
+                filterStore.visible = false;
+            }
+            else {
+                const { target: targetElem, pageX } = evnt;
+                const { filters, filterMultiple, filterRender } = column;
+                const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+                const filterRecoverMethod = column.filterRecoverMethod || (compConf ? (compConf.tableFilterRecoverMethod || compConf.filterRecoverMethod) : null);
+                const { visibleWidth } = getDomNode();
+                Object.assign(filterStore, {
+                    args: params,
+                    multiple: filterMultiple,
+                    options: filters,
+                    column,
+                    style: null,
+                    visible: true
+                });
+                // 复原状态
+                filterStore.options.forEach((option) => {
+                    const { _checked, checked } = option;
+                    option._checked = checked;
+                    if (!checked && _checked !== checked) {
+                        if (filterRecoverMethod) {
+                            filterRecoverMethod({ option, column, $table: this });
+                        }
+                    }
+                });
+                this.checkFilterOptions();
+                this.initStore.filter = true;
+                this.$nextTick(() => {
+                    const { $refs } = this;
+                    const { tableHeader, tableBody, filterWrapper } = $refs;
+                    const bodyElem = tableBody.$el;
+                    const headerElem = tableHeader ? tableHeader.$el : null;
+                    if (!bodyElem) {
+                        return;
+                    }
+                    const filterWrapperElem = filterWrapper.$el;
+                    if (!filterWrapperElem) {
+                        return;
+                    }
+                    const filterWidth = filterWrapperElem.offsetWidth;
+                    const filterHeight = filterWrapperElem.offsetHeight;
+                    const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
+                    const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
+                    const centerWidth = filterWidth / 2;
+                    const minMargin = 10;
+                    const maxLeft = bodyElem.clientWidth - filterWidth - minMargin;
+                    let left, right;
+                    const style = {
+                        top: `${targetElem.offsetTop + targetElem.offsetParent.offsetTop + targetElem.offsetHeight}px`
+                    };
+                    // 判断面板不能大于表格高度
+                    let maxHeight = null;
+                    const bodyHeight = bodyElem.clientHeight - (headerElem ? headerElem.clientHeight / 2 : 0);
+                    if (filterHeight >= bodyHeight) {
+                        maxHeight = Math.max(40, bodyHeight - (filterFootElem ? filterFootElem.offsetHeight : 0) - (filterHeadElem ? filterHeadElem.offsetHeight : 0));
+                    }
+                    if (column.fixed === 'left') {
+                        left = targetElem.offsetLeft + targetElem.offsetParent.offsetLeft - centerWidth;
+                    }
+                    else if (column.fixed === 'right') {
+                        right = (targetElem.offsetParent.offsetWidth - targetElem.offsetLeft) + (targetElem.offsetParent.offsetParent.offsetWidth - targetElem.offsetParent.offsetLeft) - column.renderWidth - centerWidth;
+                    }
+                    else {
+                        left = targetElem.offsetLeft + targetElem.offsetParent.offsetLeft - centerWidth - bodyElem.scrollLeft;
+                    }
+                    if (left) {
+                        const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth;
+                        if (overflowWidth > 0) {
+                            left -= overflowWidth;
+                        }
+                        style.left = `${Math.min(maxLeft, Math.max(minMargin, left))}px`;
+                    }
+                    else if (right) {
+                        const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth;
+                        if (overflowWidth > 0) {
+                            right += overflowWidth;
+                        }
+                        style.right = `${Math.max(minMargin, right)}px`;
+                    }
+                    filterStore.style = style;
+                    filterStore.maxHeight = maxHeight;
+                });
+            }
+            this.emitEvent('filter-visible', { column, field: column.field, property: column.field, filterList: this.getCheckedFilters(), visible: filterStore.visible }, evnt);
+        },
+        _getCheckedFilters() {
+            const { tableFullColumn } = this;
+            const filterList = [];
+            tableFullColumn.forEach((column) => {
+                const { field, filters } = column;
+                const valueList = [];
+                const dataList = [];
+                if (filters && filters.length) {
+                    filters.forEach((item) => {
+                        if (item.checked) {
+                            valueList.push(item.value);
+                            dataList.push(item.data);
+                        }
+                    });
+                    if (valueList.length) {
+                        filterList.push({ column, field, property: field, values: valueList, datas: dataList });
+                    }
+                }
+            });
+            return filterList;
+        },
+        /**
+         * 确认筛选
+         * 当筛选面板中的确定按钮被按下时触发
+         * @param {Event} evnt 事件
+         */
+        confirmFilterEvent(evnt) {
+            const { filterStore, filterOpts, scrollXLoad: oldScrollXLoad, scrollYLoad: oldScrollYLoad } = this;
+            const { column } = filterStore;
+            const { field } = column;
+            const values = [];
+            const datas = [];
+            column.filters.forEach((item) => {
+                if (item.checked) {
+                    values.push(item.value);
+                    datas.push(item.data);
+                }
+            });
+            const filterList = this.getCheckedFilters();
+            const params = { $table: this, $event: evnt, column, field, property: field, values, datas, filters: filterList, filterList };
+            // 如果是服务端筛选，则跳过本地筛选处理
+            if (!filterOpts.remote) {
+                this.handleTableData(true);
+                this.checkSelectionStatus();
+            }
+            if (this.mouseConfig && this.mouseOpts.area && this.handleFilterEvent) {
+                this.handleFilterEvent(evnt, params);
+            }
+            this.emitEvent('filter-change', params, evnt);
+            this.closeFilter();
+            this.updateFooter().then(() => {
+                const { scrollXLoad, scrollYLoad } = this;
+                if ((oldScrollXLoad || scrollXLoad) || (oldScrollYLoad || scrollYLoad)) {
+                    if ((oldScrollXLoad || scrollXLoad)) {
+                        this.updateScrollXSpace();
+                    }
+                    if ((oldScrollYLoad || scrollYLoad)) {
+                        this.updateScrollYSpace();
+                    }
+                    return this.refreshScroll();
+                }
+            }).then(() => {
+                this.updateCellAreas();
+                return this.recalculate(true);
+            }).then(() => {
+                // 存在滚动行为未结束情况
+                setTimeout(() => this.recalculate(), 50);
+            });
+        },
+        handleClearFilter(column) {
+            if (column) {
+                const { filters, filterRender } = column;
+                if (filters) {
+                    const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+                    const filterResetMethod = column.filterResetMethod || (compConf ? (compConf.tableFilterResetMethod || compConf.filterResetMethod) : null);
+                    filters.forEach((item) => {
+                        item._checked = false;
+                        item.checked = false;
+                        if (!filterResetMethod) {
+                            item.data = XEUtils.clone(item.resetValue, true);
+                        }
+                    });
+                    if (filterResetMethod) {
+                        filterResetMethod({ options: filters, column, $table: this });
+                    }
+                }
+            }
+        },
+        /**
+         * 重置筛选
+         * 当筛选面板中的重置按钮被按下时触发
+         * @param {Event} evnt 事件
+         */
+        resetFilterEvent(evnt) {
+            this.handleClearFilter(this.filterStore.column);
+            this.confirmFilterEvent(evnt);
+        },
+        /**
+         * 清空指定列的筛选条件
+         * 如果为空则清空所有列的筛选条件
+         * @param {String} fieldOrColumn 列
+         */
+        _clearFilter(fieldOrColumn) {
+            const { filterStore } = this;
+            let column;
+            if (fieldOrColumn) {
+                column = handleFieldOrColumn(this, fieldOrColumn);
+                if (column) {
+                    this.handleClearFilter(column);
+                }
+            }
+            else {
+                this.visibleColumn.forEach(this.handleClearFilter);
+            }
+            if (!fieldOrColumn || column !== filterStore.column) {
+                Object.assign(filterStore, {
+                    isAllSelected: false,
+                    isIndeterminate: false,
+                    style: null,
+                    options: [],
+                    column: null,
+                    multiple: false,
+                    visible: false
+                });
+            }
+            return this.updateData();
+        },
+        _updateFilterOptionStatus(item, checked) {
+            item._checked = checked;
+            item.checked = checked;
+            return this.$nextTick();
+        }
+    }
+};

package/es/table/module/filter/panel.js

@@ -0,0 +1,219 @@
+import { VxeUI } from '../../../ui';
+import { formatText, isEnableConf, getClass } from '../../../ui/src/utils';
+import { getSlotVNs } from '../../../ui/src/vn';
+const { getI18n, getIcon, renderer } = VxeUI;
+export default {
+    name: 'VxeTableFilterPanel',
+    props: {
+        filterStore: Object
+    },
+    computed: {
+        hasCheckOption() {
+            const { filterStore } = this;
+            return filterStore && filterStore.options.some((option) => option.checked);
+        }
+    },
+    render(h) {
+        const { $parent: $xetable, filterStore } = this;
+        const { args, column } = filterStore;
+        const filterRender = column ? column.filterRender : null;
+        const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+        const filterClassName = compConf ? (compConf.tableFilterClassName || compConf.filterClassName) : '';
+        return h('div', {
+            class: [
+                'vxe-table--filter-wrapper',
+                'filter--prevent-default',
+                compConf && compConf.className ? compConf.className : '',
+                getClass(filterClassName, Object.assign({ $panel: this, $table: $xetable }, args)),
+                {
+                    'is--animat': $xetable.animat,
+                    'is--multiple': filterStore.multiple,
+                    'is--active': filterStore.visible
+                }
+            ],
+            style: filterStore.style
+        }, filterStore.visible && column ? this.renderOptions(h, filterRender, compConf).concat(this.renderFooter(h)) : []);
+    },
+    methods: {
+        renderOptions(h, filterRender, compConf) {
+            const { $parent: $xetable, filterStore } = this;
+            const { args, column, multiple, maxHeight } = filterStore;
+            const slots = column ? column.slots : null;
+            const rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null;
+            if (slots && slots.filter) {
+                return [
+                    h('div', {
+                        class: 'vxe-table--filter-template'
+                    }, $xetable.callSlot(slots.filter, Object.assign({ $panel: this, context: this }, args), h))
+                ];
+            }
+            else if (rtFilter) {
+                return [
+                    h('div', {
+                        class: 'vxe-table--filter-template'
+                    }, getSlotVNs(rtFilter.call($xetable, h, filterRender, Object.assign({ $panel: this, context: this }, args))))
+                ];
+            }
+            const isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some((item) => item._checked);
+            const isAllIndeterminate = multiple && filterStore.isIndeterminate;
+            return [
+                h('ul', {
+                    class: 'vxe-table--filter-header'
+                }, [
+                    h('li', {
+                        class: ['vxe-table--filter-option', {
+                                'is--checked': isAllChecked,
+                                'is--indeterminate': isAllIndeterminate
+                            }],
+                        attrs: {
+                            title: getI18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter')
+                        },
+                        on: {
+                            click: (evnt) => {
+                                this.changeAllOption(evnt, !filterStore.isAllSelected);
+                            }
+                        }
+                    }, (multiple
+                        ? [
+                            h('span', {
+                                class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                            })
+                        ]
+                        : []).concat([
+                        h('span', {
+                            class: 'vxe-checkbox--label'
+                        }, getI18n('vxe.table.allFilter'))
+                    ]))
+                ]),
+                h('ul', {
+                    class: 'vxe-table--filter-body',
+                    style: maxHeight
+                        ? {
+                            maxHeight: `${maxHeight}px`
+                        }
+                        : {}
+                }, filterStore.options.map((item) => {
+                    const isChecked = item._checked;
+                    const isIndeterminate = false;
+                    return h('li', {
+                        class: ['vxe-table--filter-option', {
+                                'is--checked': isChecked
+                            }],
+                        attrs: {
+                            title: item.label
+                        },
+                        on: {
+                            click: (evnt) => {
+                                this.changeOption(evnt, !item._checked, item);
+                            }
+                        }
+                    }, (multiple
+                        ? [
+                            h('span', {
+                                class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                            })
+                        ]
+                        : []).concat([
+                        h('span', {
+                            class: 'vxe-checkbox--label'
+                        }, formatText(item.label, 1))
+                    ]));
+                }))
+            ];
+        },
+        renderFooter(h) {
+            const { $parent: $xetable, hasCheckOption, filterStore } = this;
+            const { filterOpts } = $xetable;
+            const { column, multiple } = filterStore;
+            const filterRender = column.filterRender;
+            const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
+            const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate;
+            return multiple && (compConf ? !(compConf.showTableFilterFooter === false || compConf.showFilterFooter === false || compConf.isFooter === false) : true)
+                ? [
+                    h('div', {
+                        class: 'vxe-table--filter-footer'
+                    }, [
+                        h('button', {
+                            class: {
+                                'is--disabled': isDisabled
+                            },
+                            attrs: {
+                                disabled: isDisabled
+                            },
+                            on: {
+                                click: this.confirmFilter
+                            }
+                        }, filterOpts.confirmButtonText || getI18n('vxe.table.confirmFilter')),
+                        h('button', {
+                            on: {
+                                click: this.resetFilter
+                            }
+                        }, filterOpts.resetButtonText || getI18n('vxe.table.resetFilter'))
+                    ])
+                ]
+                : [];
+        },
+        // 全部筛选事件
+        filterCheckAllEvent(evnt, value) {
+            const filterStore = this.filterStore;
+            filterStore.options.forEach((option) => {
+                option._checked = value;
+                option.checked = value;
+            });
+            filterStore.isAllSelected = value;
+            filterStore.isIndeterminate = false;
+        },
+        /*************************
+         * Publish methods
+         *************************/
+        // （单选）筛选发生改变
+        changeRadioOption(evnt, checked, item) {
+            const { $parent: $xetable, filterStore } = this;
+            filterStore.options.forEach((option) => {
+                option._checked = false;
+            });
+            item._checked = checked;
+            $xetable.checkFilterOptions();
+            this.confirmFilter(evnt);
+        },
+        // （多选）筛选发生改变
+        changeMultipleOption(evnt, checked, item) {
+            const { $parent: $xetable } = this;
+            item._checked = checked;
+            $xetable.checkFilterOptions();
+        },
+        changeAllOption(evnt, checked) {
+            if (this.filterStore.multiple) {
+                this.filterCheckAllEvent(evnt, checked);
+            }
+            else {
+                this.resetFilter(evnt);
+            }
+        },
+        // 筛选发生改变
+        changeOption(evnt, checked, item) {
+            if (this.filterStore.multiple) {
+                this.changeMultipleOption(evnt, checked, item);
+            }
+            else {
+                this.changeRadioOption(evnt, checked, item);
+            }
+        },
+        // 确认筛选
+        confirmFilter(evnt) {
+            const { $parent: $xetable, filterStore } = this;
+            filterStore.options.forEach((option) => {
+                option.checked = option._checked;
+            });
+            $xetable.confirmFilterEvent(evnt);
+        },
+        // 重置筛选
+        resetFilter(evnt) {
+            const { $parent: $xetable } = this;
+            $xetable.resetFilterEvent(evnt);
+        }
+        /*************************
+         * Publish methods
+         *************************/
+    }
+};