"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _ui = require("../../../ui"); var _utils = require("../../../ui/src/utils"); var _dom = require("../../../ui/src/dom"); var _log = require("../../../ui/src/log"); var _xeUtils = _interopRequireDefault(require("xe-utils")); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } const { getI18n, getIcon, renderEmptyElement } = _ui.VxeUI; function showDropTip($xeTableCustomPanel, evnt, optEl, showLine, dragPos) { const customPanelInternalData = $xeTableCustomPanel.internalData; const bodyWrapperElem = $xeTableCustomPanel.$refs.refBodyWrapperElem; if (!bodyWrapperElem) { return; } const customBodyElem = $xeTableCustomPanel.$refs.refCustomBodyElem; if (!customBodyElem) { return; } const { prevDragToChild } = customPanelInternalData; const bodyWrapperRect = bodyWrapperElem.getBoundingClientRect(); const customBodyRect = customBodyElem.getBoundingClientRect(); const dragLineEl = $xeTableCustomPanel.$refs.refDragLineElem; if (optEl) { if (dragLineEl) { if (showLine) { const optRect = optEl.getBoundingClientRect(); dragLineEl.style.display = 'block'; dragLineEl.style.left = `${Math.max(0, customBodyRect.x - bodyWrapperRect.x)}px`; dragLineEl.style.top = `${Math.max(1, optRect.y + bodyWrapperElem.scrollTop - bodyWrapperRect.y)}px`; dragLineEl.style.height = `${optRect.height}px`; dragLineEl.style.width = `${optRect.width}px`; dragLineEl.setAttribute('drag-pos', dragPos); dragLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n'); } else { dragLineEl.style.display = ''; } } } else { if (dragLineEl) { dragLineEl.style.display = 'node'; } } const dragTipEl = $xeTableCustomPanel.$refs.refDragTipElem; if (dragTipEl) { dragTipEl.style.display = 'block'; dragTipEl.style.top = `${Math.min(bodyWrapperElem.clientHeight + bodyWrapperElem.scrollTop - dragTipEl.clientHeight, evnt.clientY + bodyWrapperElem.scrollTop - bodyWrapperRect.y)}px`; dragTipEl.style.left = `${Math.min(bodyWrapperElem.clientWidth + bodyWrapperElem.scrollLeft - dragTipEl.clientWidth, evnt.clientX + bodyWrapperElem.scrollLeft - bodyWrapperRect.x)}px`; dragTipEl.setAttribute('drag-status', showLine ? prevDragToChild ? 'sub' : 'normal' : 'disabled'); } } function hideDropTip($xeTableCustomPanel) { const dragTipEl = $xeTableCustomPanel.$refs.refDragTipElem; const dragLineEl = $xeTableCustomPanel.$refs.refDragLineElem; if (dragTipEl) { dragTipEl.style.display = ''; } if (dragLineEl) { dragLineEl.style.display = ''; } } const renderDragTip = (h, $xeTableCustomPanel) => { const $xeTable = $xeTableCustomPanel.$xeTable; const customPanelReactData = $xeTableCustomPanel.reactData; const { dragTipText } = customPanelReactData; const columnDragOpts = $xeTable.computeColumnDragOpts; return h('div', {}, [h('div', { ref: 'refDragLineElem', class: ['vxe-table-custom-popup--drag-line', { 'is--guides': columnDragOpts.showGuidesStatus }] }), h('div', { ref: 'refDragTipElem', class: 'vxe-table-custom-popup--drag-tip' }, [h('div', { class: 'vxe-table-custom-popup--drag-tip-wrapper' }, [h('div', { class: 'vxe-table-custom-popup--drag-tip-status' }, [h('span', { class: ['vxe-table-custom-popup--drag-tip-normal-status', getIcon().TABLE_DRAG_STATUS_ROW] }), h('span', { class: ['vxe-table-custom-popup--drag-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW] }), h('span', { class: ['vxe-table-custom-popup--drag-tip-group-status', getIcon().TABLE_DRAG_STATUS_AGG_GROUP] }), h('span', { class: ['vxe-table-custom-popup--drag-tip-values-status', getIcon().TABLE_DRAG_STATUS_AGG_VALUES] }), h('span', { class: ['vxe-table-custom-popup--drag-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED] })]), h('div', { class: 'vxe-table-custom-popup--drag-tip-content' }, `${dragTipText || ''}`)])])]); }; const renderSimplePanel = (h, _vm) => { const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton'); const props = _vm; const $xeTable = _vm.$xeTable; const tableProps = $xeTable; const tableReactData = $xeTable; const $xeGrid = $xeTable.$xeGrid; const { customStore } = props; const { treeConfig, rowGroupConfig, aggregateConfig } = tableProps; const { isCustomStatus, customColumnList } = tableReactData; const customOpts = $xeTable.computeCustomOpts; const { immediate } = customOpts; const columnDragOpts = $xeTable.computeColumnDragOpts; const { maxHeight } = customStore; const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts; const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn; const { isCrossDrag } = columnDragOpts; const slots = customOpts.slots || {}; const headerSlot = slots.header; const topSlot = slots.top; const bottomSlot = slots.bottom; const defaultSlot = slots.default; const footerSlot = slots.footer; const colVNs = []; const customWrapperOns = {}; const isAllChecked = customStore.isAll; const isAllIndeterminate = customStore.isIndeterminate; // hover 触发 if (trigger === 'hover') { customWrapperOns.mouseenter = _vm.handleWrapperMouseenterEvent; customWrapperOns.mouseleave = _vm.handleWrapperMouseleaveEvent; } const params = { $table: $xeTable, $grid: $xeGrid, columns: customColumnList, isAllChecked, isAllIndeterminate, isCustomStatus }; _xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => { const isVisible = visibleMethod ? visibleMethod({ $table: $xeTable, column }) : true; if (isVisible) { const isChecked = column.renderVisible; const isIndeterminate = column.halfVisible; const isColGroup = column.children && column.children.length; const colTitle = (0, _utils.formatText)(column.getTitle(), 1); const isDisabled = checkMethod ? !checkMethod({ $table: $xeTable, column }) : false; const isHidden = !isChecked; colVNs.push(h('li', { key: column.id, attrs: { colid: column.id }, class: ['vxe-table-custom--option', `level--${column.level}`, { 'is--hidden': isDisabled || isHidden, 'is--group': isColGroup }], on: { dragstart: _vm.sortDragstartEvent, dragend: _vm.sortDragendEvent, dragover: _vm.sortDragoverEvent } }, [allowVisible ? h('div', { class: ['vxe-table-custom--checkbox-option', { 'is--checked': isChecked, 'is--indeterminate': isIndeterminate, 'is--disabled': isDisabled }], attrs: { title: getI18n('vxe.custom.setting.colVisible') }, on: { click: evnt => { if (!isDisabled) { _vm.changeCheckboxOption(column, evnt); } } } }, [h('span', { class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED] })]) : renderEmptyElement($xeTable), h('div', { class: 'vxe-table-custom--name-option' }, [allowSort && ((isCrossDrag ? immediate : false) || column.level === 1) ? h('div', { class: 'vxe-table-custom--sort-option' }, [h('span', { class: ['vxe-table-custom--sort-btn', { 'is--disabled': isDisabled || isHidden || column.renderFixed }], attrs: { title: getI18n('vxe.custom.setting.sortHelpTip') }, on: isDisabled || isHidden || column.renderFixed ? {} : { mousedown: _vm.sortMousedownEvent, mouseup: _vm.sortMouseupEvent } }, [h('i', { class: getIcon().TABLE_CUSTOM_SORT })])]) : renderEmptyElement($xeTable), column.type === 'html' ? h('div', { key: '1', class: 'vxe-table-custom--checkbox-label', domProps: { innerHTML: colTitle } }) : h('div', { key: '0', class: 'vxe-table-custom--checkbox-label', attrs: { title: colTitle } }, colTitle)]), !parent && allowFixed ? h('div', { class: 'vxe-table-custom--fixed-option' }, [h(VxeUIButtonComponent, { props: { mode: 'text', icon: column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT, status: column.renderFixed === 'left' ? 'primary' : '', disabled: isDisabled || isHidden || isMaxFixedColumn && !column.renderFixed, title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft') }, on: { click: ({ $event }) => { _vm.changeFixedOption(column, 'left', $event); } } }), h(VxeUIButtonComponent, { props: { mode: 'text', icon: column.renderFixed === 'right' ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT, status: column.renderFixed === 'right' ? 'primary' : '', disabled: isDisabled || isHidden || isMaxFixedColumn && !column.renderFixed, title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight') }, on: { click: ({ $event }) => { _vm.changeFixedOption(column, 'right', $event); } } })]) : renderEmptyElement($xeTable)])); } }); return h('div', { key: 'simple', class: ['vxe-table-custom-wrapper', `placement--${placement}`, { 'is--active': customStore.visible }], style: maxHeight && !['left', 'right'].includes(placement || '') ? { maxHeight: `${maxHeight}px` } : {} }, customStore.visible ? [h('div', { ref: 'refBodyWrapperElem', class: 'vxe-table-custom-simple--body-wrapper' }, [!treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel ? h($xeTable.getPivotTableAggregateSimplePanel(), { props: { customStore } }) : renderEmptyElement($xeTable), h('div', { ref: 'refCustomBodyElem', class: 'vxe-table-custom--handle-wrapper' }, [h('div', { class: 'vxe-table-custom--header' }, headerSlot ? $xeTable.callSlot(headerSlot, params, h) : [h('ul', { class: 'vxe-table-custom--panel-list' }, [h('li', { class: 'vxe-table-custom--option' }, [allowVisible ? h('div', { class: ['vxe-table-custom--checkbox-option', { 'is--checked': isAllChecked, 'is--indeterminate': isAllIndeterminate }], attrs: { title: getI18n('vxe.table.allTitle') }, on: { click: _vm.allOptionEvent } }, [h('span', { class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED] }), h('span', { class: 'vxe-checkbox--label' }, getI18n('vxe.toolbar.customAll'))]) : h('span', { class: 'vxe-checkbox--label' }, getI18n('vxe.table.customTitle'))])])]), h('div', { class: 'vxe-table-custom--body' }, [topSlot ? h('div', { class: 'vxe-table-custom--panel-top' }, $xeTable.callSlot(topSlot, params, h)) : renderEmptyElement($xeTable), defaultSlot ? h('div', { class: 'vxe-table-custom--panel-body' }, $xeTable.callSlot(defaultSlot, params, h)) : h('transition-group', { class: 'vxe-table-custom--panel-list', props: { name: 'vxe-table-custom--list', tag: 'ul' }, on: customWrapperOns }, colVNs), bottomSlot ? h('div', { class: 'vxe-table-custom--panel-bottom' }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable)]), customOpts.showFooter ? h('div', { class: 'vxe-table-custom--footer' }, footerSlot ? $xeTable.callSlot(footerSlot, params, h) : [h('div', { class: 'vxe-table-custom--footer-buttons' }, [h(VxeUIButtonComponent, { props: { mode: 'text', content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'), disabled: !isCustomStatus }, on: { click: _vm.resetCustomEvent } }), immediate ? h(VxeUIButtonComponent, { props: { mode: 'text', content: customOpts.closeButtonText || getI18n('vxe.table.customClose') }, on: { click: _vm.cancelCloseEvent } }) : h(VxeUIButtonComponent, { props: { mode: 'text', content: customOpts.resetButtonText || getI18n('vxe.table.customCancel') }, on: { click: _vm.cancelCustomEvent } }), immediate ? renderEmptyElement($xeTable) : h(VxeUIButtonComponent, { props: { mode: 'text', status: 'primary', content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm') }, on: { click: _vm.confirmCustomEvent } })])]) : null]), renderDragTip(h, _vm)])] : []); }; const renderPopupPanel = (h, $xeTableCustomPanel) => { const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal'); const VxeUIDrawerComponent = _ui.VxeUI.getComponent('VxeDrawer'); const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton'); const VxeUINumberInputComponent = _ui.VxeUI.getComponent('VxeInput'); const _vm = $xeTableCustomPanel; const props = $xeTableCustomPanel; const $xeTable = $xeTableCustomPanel.$xeTable; const tableProps = $xeTable; const tableReactData = $xeTable; const $xeGrid = $xeTable.$xeGrid; const { customStore } = props; const { treeConfig, rowGroupConfig, aggregateConfig, resizable: allResizable } = tableProps; const { isCustomStatus, customColumnList } = tableReactData; const customOpts = $xeTable.computeCustomOpts; const { immediate } = customOpts; const columnDragOpts = $xeTable.computeColumnDragOpts; const { mode, modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts; const columnOpts = $xeTable.computeColumnOpts; const { maxFixedSize } = columnOpts; const resizableOpts = $xeTable.computeResizableOpts; const { minWidth: reMinWidth, maxWidth: reMaxWidth } = resizableOpts; const modalOpts = Object.assign({}, modalOptions); const drawerOpts = Object.assign({}, drawerOptions); const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn; const { isCrossDrag } = columnDragOpts; const slots = customOpts.slots || {}; const headerSlot = slots.header; const topSlot = slots.top; const bottomSlot = slots.bottom; const defaultSlot = slots.default; const footerSlot = slots.footer; const trVNs = []; const isAllChecked = customStore.isAll; const isAllIndeterminate = customStore.isIndeterminate; const params = { $table: $xeTable, $grid: $xeGrid, columns: customColumnList, isAllChecked, isAllIndeterminate, isCustomStatus }; _xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => { const isVisible = visibleMethod ? visibleMethod({ $table: $xeTable, column }) : true; if (isVisible) { // 默认继承调整宽度 let customMinWidth = 0; let customMaxWidth = 0; if (allowResizable) { const resizeParams = { $table: $xeTable, column, columnIndex: index, $columnIndex: index, $rowIndex: -1 }; if (reMinWidth) { customMinWidth = _xeUtils.default.toNumber(_xeUtils.default.isFunction(reMinWidth) ? reMinWidth(resizeParams) : reMinWidth); } if (reMaxWidth) { customMaxWidth = _xeUtils.default.toNumber(_xeUtils.default.isFunction(reMaxWidth) ? reMaxWidth(resizeParams) : reMaxWidth); } } const isChecked = column.renderVisible; const isIndeterminate = column.halfVisible; const colTitle = (0, _utils.formatText)(column.getTitle(), 1); const isColGroup = column.children && column.children.length; const isDisabled = checkMethod ? !checkMethod({ $table: $xeTable, column }) : false; const isHidden = !isChecked; trVNs.push(h('tr', { key: column.id, attrs: { colid: column.id }, class: [`vxe-table-custom-popup--row level--${column.level}`, { 'is--group': isColGroup }], on: { dragstart: _vm.sortDragstartEvent, dragend: _vm.sortDragendEvent, dragover: _vm.sortDragoverEvent } }, [allowVisible ? h('td', { class: 'vxe-table-custom-popup--column-item col--visible' }, [h('div', { class: ['vxe-table-custom--checkbox-option', { 'is--checked': isChecked, 'is--indeterminate': isIndeterminate, 'is--disabled': isDisabled }], attrs: { title: getI18n('vxe.custom.setting.colVisible') }, on: { click: evnt => { if (!isDisabled) { _vm.changeCheckboxOption(column, evnt); } } } }, [h('span', { class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED] })])]) : renderEmptyElement($xeTable), h('td', { class: 'vxe-table-custom-popup--column-item col--name' }, [h('div', { class: 'vxe-table-custom-popup--name' }, [allowSort ? (isCrossDrag ? immediate : false) || column.level === 1 ? h('div', { class: ['vxe-table-custom-popup--column-sort-btn', { 'is--disabled': isDisabled || isHidden || column.renderFixed }], attrs: { title: getI18n('vxe.custom.setting.sortHelpTip') }, on: isDisabled || isHidden || column.renderFixed ? {} : { mousedown: _vm.sortMousedownEvent, mouseup: _vm.sortMouseupEvent } }, [h('i', { class: getIcon().TABLE_CUSTOM_SORT })]) : h('div', { class: 'vxe-table-custom-popup--column-sort-placeholder' }) : renderEmptyElement($xeTable), column.type === 'html' ? h('div', { key: '1', class: 'vxe-table-custom-popup--title', domProps: { innerHTML: colTitle } }) : h('div', { key: '0', class: 'vxe-table-custom-popup--title', attrs: { title: colTitle } }, colTitle)])]), allowResizable ? h('td', { class: 'vxe-table-custom-popup--column-item col--resizable' }, [column.children && column.children.length || !(_xeUtils.default.isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? h('span', '-') : VxeUINumberInputComponent ? h(VxeUINumberInputComponent, { props: { type: 'integer', immediate: false, disabled: isDisabled || isHidden, value: column.renderResizeWidth, min: customMinWidth || undefined, max: customMaxWidth || undefined }, on: { modelValue(value) { column.renderResizeWidth = Math.max(0, Number(value)); }, change() { _vm.changeColumnWidth(column); } } }) : renderEmptyElement($xeTableCustomPanel)]) : renderEmptyElement($xeTable), allowFixed ? h('td', { class: 'vxe-table-custom-popup--column-item col--fixed' }, [parent ? h('span', '-') : h('vxe-radio-group', { props: { value: column.renderFixed || '', type: 'button', size: 'mini', disabled: isDisabled || isHidden, options: [{ label: getI18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isDisabled || isHidden || isMaxFixedColumn }, { label: getI18n('vxe.custom.setting.fixedUnset'), value: '', disabled: isDisabled || isHidden }, { label: getI18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isDisabled || isHidden || isMaxFixedColumn }] }, on: { change({ label, $event }) { _vm.changeFixedOption(column, label, $event); } } })]) : renderEmptyElement($xeTable)])); } }); const scopedSlots = { default: () => { return h('div', { ref: 'refBodyWrapperElem', class: 'vxe-table-custom-popup--body-wrapper' }, defaultSlot ? $xeTable.callSlot(defaultSlot, params, h) : [h('div', { ref: 'refCustomBodyElem', class: 'vxe-table-custom-popup--handle-wrapper' }, [topSlot ? h('div', { class: 'vxe-table-custom-popup--table-top' }, $xeTable.callSlot(topSlot, params, h)) : renderEmptyElement($xeTable), h('div', { class: 'vxe-table-custom-popup--table-wrapper' }, [h('table', {}, [h('colgroup', {}, [allowVisible ? h('col', { class: 'vxe-table-custom-popup--table-col-seq' }) : renderEmptyElement($xeTable), h('col', { class: 'vxe-table-custom-popup--table-col-title' }), allowResizable ? h('col', { class: 'vxe-table-custom-popup--table-col-width' }) : renderEmptyElement($xeTable), allowFixed ? h('col', { class: 'vxe-table-custom-popup--table-col-fixed' }) : renderEmptyElement($xeTable)]), h('thead', {}, [h('tr', {}, [allowVisible ? h('th', {}, [h('div', { class: ['vxe-table-custom--checkbox-option', { 'is--checked': isAllChecked, 'is--indeterminate': isAllIndeterminate }], attrs: { title: getI18n('vxe.table.allTitle') }, on: { click: _vm.allOptionEvent } }, [h('span', { class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED] }), h('span', { class: 'vxe-checkbox--label' }, getI18n('vxe.toolbar.customAll'))])]) : renderEmptyElement($xeTable), h('th', {}, getI18n('vxe.custom.setting.colTitle')), allowResizable ? h('th', {}, getI18n('vxe.custom.setting.colResizable')) : renderEmptyElement($xeTable), allowFixed ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : renderEmptyElement($xeTable)])]), h('transition-group', { class: 'vxe-table-custom--panel-list', props: { tag: 'tbody', name: 'vxe-table-custom--list' } }, trVNs)])]), bottomSlot ? h('div', { class: 'vxe-table-custom-popup--table-bottom' }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable), renderDragTip(h, _vm)]), !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel ? h($xeTable.getPivotTableAggregatePopupPanel(), { props: { customStore } }) : renderEmptyElement($xeTable)]); }, footer: () => { if (footerSlot) { return $xeTable.callSlot(footerSlot, params, h); } return h('div', { class: 'vxe-table-custom-popup--footer' }, [h(VxeUIButtonComponent, { props: { content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore'), disabled: !isCustomStatus }, on: { click: _vm.resetCustomEvent } }), immediate ? h(VxeUIButtonComponent, { props: { content: customOpts.resetButtonText || getI18n('vxe.table.customClose') }, on: { click: _vm.cancelCloseEvent } }) : h(VxeUIButtonComponent, { props: { content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel') }, on: { click: _vm.cancelCustomEvent } }), immediate ? renderEmptyElement($xeTable) : h(VxeUIButtonComponent, { props: { status: 'primary', content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm') }, on: { click: _vm.confirmCustomEvent } })]); } }; if (headerSlot) { scopedSlots.header = () => $xeTable.callSlot(headerSlot, params, h); } if (mode === 'drawer') { return VxeUIDrawerComponent ? h(VxeUIDrawerComponent, { key: 'drawer', props: { className: ['vxe-table-custom-drawer-wrapper', 'vxe-table--ignore-clear', drawerOpts.className || ''].join(' '), value: customStore.visible, title: drawerOpts.title || getI18n('vxe.custom.cstmTitle'), width: drawerOpts.width || Math.min(880, Math.floor(document.documentElement.clientWidth * 0.6)), position: drawerOpts.position, resize: !!drawerOpts.resize, escClosable: !!drawerOpts.escClosable, maskClosable: !!drawerOpts.maskClosable, destroyOnClose: true, showFooter: true }, on: { input(value) { customStore.visible = value; } }, scopedSlots }) : renderEmptyElement($xeTableCustomPanel); } return VxeUIModalComponent ? h(VxeUIModalComponent, { key: 'modal', props: { className: ['vxe-table-custom-popup-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '), value: customStore.visible, title: modalOpts.title || getI18n('vxe.custom.cstmTitle'), width: modalOpts.width || Math.min(880, document.documentElement.clientWidth), minWidth: modalOpts.minWidth || 700, height: modalOpts.height || Math.min(680, document.documentElement.clientHeight), minHeight: modalOpts.minHeight || 400, showZoom: modalOpts.showZoom, showMaximize: modalOpts.showMaximize, showMinimize: modalOpts.showMinimize, mask: modalOpts.mask, lockView: modalOpts.lockView, resize: modalOpts.resize, escClosable: !!modalOpts.escClosable, maskClosable: !!modalOpts.maskClosable, destroyOnClose: true, showFooter: true }, on: { input(value) { customStore.visible = value; } }, scopedSlots }) : renderEmptyElement($xeTableCustomPanel); }; var _default = exports.default = { name: 'VxeTableCustomPanel', props: { customStore: { type: Object, default: () => ({}) } }, provide() { const $xeTableCustomPanel = this; return { $xeTableCustomPanel }; }, inject: { $xeTable: { default: null } }, data() { const reactData = { dragCol: null, dragGroupField: null, dragAggFnCol: null, dragTipText: '' }; const internalData = { // prevDragCol: undefined, // prevDragGroupField: undefined, // prevDragAggFnColid: undefined, // prevDragToChild: false, // prevDragPos: null }; return { reactData, internalData }; }, computed: {}, created() { const $xeTableCustomPanel = this; const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal'); const VxeUIDrawerComponent = _ui.VxeUI.getComponent('VxeDrawer'); const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton'); const VxeUINumberInputComponent = _ui.VxeUI.getComponent('VxeNumberInput'); const VxeUIRadioGroupComponent = _ui.VxeUI.getComponent('VxeRadioGroup'); $xeTableCustomPanel.$nextTick(() => { const $xeTable = $xeTableCustomPanel.$xeTable; const { customOpts } = $xeTable; const { mode } = customOpts; if (!VxeUIModalComponent && mode === 'modal') { (0, _log.errLog)('vxe.error.reqComp', ['vxe-modal']); } if (!VxeUIDrawerComponent && mode === 'drawer') { (0, _log.errLog)('vxe.error.reqComp', ['vxe-drawer']); } if (!VxeUIButtonComponent) { (0, _log.errLog)('vxe.error.reqComp', ['vxe-button']); } if (!VxeUINumberInputComponent) { (0, _log.errLog)('vxe.error.reqComp', ['vxe-input']); } if (!VxeUIRadioGroupComponent) { (0, _log.errLog)('vxe.error.reqComp', ['vxe-radio-group']); } }); }, render(h) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; const customOpts = $xeTable.computeCustomOpts; if (['modal', 'drawer', 'popup'].includes(`${customOpts.mode}`)) { return renderPopupPanel(h, $xeTableCustomPanel); } return renderSimplePanel(h, $xeTableCustomPanel); }, methods: { handleWrapperMouseenterEvent(evnt) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; const { customStore } = this; customStore.activeWrapper = true; $xeTable.customOpenEvent(evnt); }, handleWrapperMouseleaveEvent(evnt) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; const props = $xeTableCustomPanel; const { customStore } = props; customStore.activeWrapper = false; setTimeout(() => { if (!customStore.activeBtn && !customStore.activeWrapper) { $xeTable.customCloseEvent(evnt); } }, 300); }, getStoreData() { return {}; }, confirmCustomEvent({ $event }) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; const tableReactData = $xeTable; tableReactData.isCustomStatus = true; $xeTable.saveCustom(); $xeTable.closeCustom(); $xeTable.emitCustomEvent('confirm', $event); }, cancelCloseEvent({ $event }) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; $xeTable.closeCustom(); $xeTable.emitCustomEvent('close', $event); }, cancelCustomEvent({ $event }) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; $xeTable.cancelCustom(); $xeTable.closeCustom(); $xeTable.emitCustomEvent('cancel', $event); }, handleResetCustomEvent(evnt) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; $xeTable.resetCustom(true); $xeTable.closeCustom(); $xeTable.emitCustomEvent('reset', evnt); }, resetCustomEvent(evnt) { if (_ui.VxeUI.modal) { _ui.VxeUI.modal.confirm({ content: getI18n('vxe.custom.cstmConfirmRestore'), className: 'vxe-table--ignore-clear', escClosable: true }).then(type => { if (type === 'confirm') { this.handleResetCustomEvent(evnt); } }); } else { this.handleResetCustomEvent(evnt); } }, handleOptionCheck(column) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; const tableReactData = $xeTable; const { customColumnList } = tableReactData; const matchObj = _xeUtils.default.findTree(customColumnList, item => item === column); if (matchObj && matchObj.parent) { const { parent } = matchObj; if (parent.children && parent.children.length) { parent.renderVisible = parent.children.every(column => column.renderVisible); parent.halfVisible = !parent.renderVisible && parent.children.some(column => column.renderVisible || column.halfVisible); this.handleOptionCheck(parent); } } }, changeCheckboxOption(column, evnt) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; const tableReactData = $xeTable; const isChecked = !column.renderVisible; const customOpts = $xeTable.computeCustomOpts; if (customOpts.immediate) { _xeUtils.default.eachTree([column], item => { item.visible = isChecked; item.renderVisible = isChecked; item.halfVisible = false; }); tableReactData.isCustomStatus = true; $xeTable.handleCustom(); $xeTable.saveCustomStore('update:visible'); } else { _xeUtils.default.eachTree([column], item => { item.renderVisible = isChecked; item.halfVisible = false; }); } this.handleOptionCheck(column); $xeTable.checkCustomStatus(); $xeTable.dispatchEvent('custom-visible-change', { column, checked: isChecked }, evnt); }, changeColumnWidth(column) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; const tableReactData = $xeTable; const customOpts = $xeTable.computeCustomOpts; if (customOpts.immediate) { if (column.renderResizeWidth !== column.renderWidth) { column.resizeWidth = column.renderResizeWidth; column.renderWidth = column.renderResizeWidth; tableReactData.isCustomStatus = true; $xeTable.handleCustom(); $xeTable.saveCustomStore('update:width'); } } }, changeFixedOption(column, colFixed, evnt) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; const tableReactData = $xeTable; const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn; const customOpts = $xeTable.computeCustomOpts; let targetFixed = null; if (customOpts.immediate) { if (column.renderFixed === colFixed) { targetFixed = ''; _xeUtils.default.eachTree([column], col => { col.fixed = ''; col.renderFixed = ''; }); } else { if (!isMaxFixedColumn || column.renderFixed) { targetFixed = colFixed; _xeUtils.default.eachTree([column], col => { col.fixed = colFixed; col.renderFixed = colFixed; }); } } tableReactData.isCustomStatus = true; $xeTable.handleCustom(); $xeTable.saveCustomStore('update:fixed'); } else { if (column.renderFixed === colFixed) { targetFixed = ''; _xeUtils.default.eachTree([column], col => { col.renderFixed = ''; }); } else { if (!isMaxFixedColumn || column.renderFixed) { targetFixed = colFixed; _xeUtils.default.eachTree([column], col => { col.renderFixed = colFixed; }); } } } if (targetFixed !== null) { $xeTable.dispatchEvent('custom-fixed-change', { column, fixed: targetFixed }, evnt); } }, allOptionEvent(evnt) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; const tableReactData = $xeTable; const { customStore } = tableReactData; const isAll = !customStore.isAll; $xeTable.toggleCustomAllCheckbox(); $xeTable.dispatchEvent('custom-visible-all', { checked: isAll }, evnt); }, updateColDropTipContent() { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; const customPanelReactData = $xeTableCustomPanel.reactData; const { dragCol } = customPanelReactData; const columnDragOpts = $xeTable.computeColumnDragOpts; const { tooltipMethod } = columnDragOpts; let tipContent = ''; if (tooltipMethod) { const dtParams = { $table: $xeTable, column: dragCol }; tipContent = `${tooltipMethod(dtParams) || ''}`; } else { tipContent = getI18n('vxe.custom.cstmDragTarget', [dragCol && dragCol.type !== 'html' ? dragCol.getTitle() : '']); } customPanelReactData.dragTipText = tipContent; }, sortMousedownEvent(evnt) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; const customPanelReactData = $xeTableCustomPanel.reactData; const btnEl = evnt.currentTarget; const cellEl = btnEl.parentElement; const tdEl = cellEl.parentElement; const trEl = tdEl.parentElement; const colid = trEl.getAttribute('colid'); const column = $xeTable.getColumnById(colid); trEl.draggable = true; customPanelReactData.dragCol = column; customPanelReactData.dragGroupField = null; customPanelReactData.dragAggFnCol = null; this.updateColDropTipContent(); (0, _dom.addClass)(trEl, 'active--drag-origin'); }, sortMouseupEvent(evnt) { const $xeTableCustomPanel = this; const customPanelReactData = $xeTableCustomPanel.reactData; const btnEl = evnt.currentTarget; const cellEl = btnEl.parentElement; const tdEl = cellEl.parentElement; const trEl = tdEl.parentElement; hideDropTip($xeTableCustomPanel); trEl.draggable = false; customPanelReactData.dragCol = null; customPanelReactData.dragGroupField = null; customPanelReactData.dragAggFnCol = null; (0, _dom.removeClass)(trEl, 'active--drag-origin'); }, sortDragstartEvent(evnt) { const $xeTableCustomPanel = this; const customPanelInternalData = $xeTableCustomPanel.internalData; if (evnt.dataTransfer) { evnt.dataTransfer.setDragImage((0, _dom.getTpImg)(), 0, 0); } customPanelInternalData.prevDragGroupField = null; customPanelInternalData.prevDragAggFnColid = null; }, sortDragendEvent(evnt) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; const tableProps = $xeTable; const tableReactData = $xeTable; const tableInternalData = $xeTable; const customPanelReactData = $xeTableCustomPanel.reactData; const customPanelInternalData = $xeTableCustomPanel.internalData; const { mouseConfig } = tableProps; const { customColumnList } = tableReactData; const { collectColumn } = tableInternalData; const customOpts = $xeTable.computeCustomOpts; const { immediate } = customOpts; const trEl = evnt.currentTarget; const columnDragOpts = $xeTable.computeColumnDragOpts; const { isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts; const { dragCol } = customPanelReactData; const { prevDragCol, prevDragGroupField, prevDragAggFnColid, prevDragPos, prevDragToChild } = customPanelInternalData; const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0; if (prevDragGroupField || prevDragAggFnColid) { if ($xeTable.handlePivotTableAggregatePanelDragendEvent) { $xeTable.handlePivotTableAggregatePanelDragendEvent(evnt); } } else if (prevDragCol && dragCol) { // 判断是否有拖动 if (prevDragCol !== dragCol) { const dragColumn = dragCol; const newColumn = prevDragCol; Promise.resolve(dragEndMethod ? dragEndMethod({ oldColumn: dragColumn, newColumn, dragColumn, dragPos: prevDragPos, dragToChild: !!prevDragToChild, offsetIndex: dragOffsetIndex }) : true).then(status => { if (!status) { return; } let oafIndex = -1; let nafIndex = -1; const oldAllMaps = {}; _xeUtils.default.eachTree([dragColumn], column => { oldAllMaps[column.id] = column; }); let isSelfToChildStatus = false; // 只有实时拖拽支持跨层级 if (immediate) { if (dragColumn.parentId && newColumn.parentId) { // 子到子 if (!isCrossDrag) { return; } if (oldAllMaps[newColumn.id]) { isSelfToChildStatus = true; if (!(isCrossDrag && isSelfToChildDrag)) { if (_ui.VxeUI.modal) { _ui.VxeUI.modal.message({ status: 'error', content: getI18n('vxe.error.treeDragChild') }); } return; } } } else if (dragColumn.parentId) { // 子到根 if (!isCrossDrag) { return; } } else if (newColumn.parentId) { // 根到子 if (!isCrossDrag) { return; } if (oldAllMaps[newColumn.id]) { isSelfToChildStatus = true; if (!(isCrossDrag && isSelfToChildDrag)) { if (_ui.VxeUI.modal) { _ui.VxeUI.modal.message({ status: 'error', content: getI18n('vxe.error.treeDragChild') }); } return; } } } else { // 根到根 } const oldewMatchRest = _xeUtils.default.findTree(collectColumn, item => item.id === dragColumn.id); // 改变层级 if (isSelfToChildStatus && isCrossDrag && isSelfToChildDrag) { if (oldewMatchRest) { const { items: oCols, index: oIndex } = oldewMatchRest; const childList = dragColumn.children || []; childList.forEach(column => { column.parentId = dragColumn.parentId; }); oCols.splice(oIndex, 1, ...childList); dragColumn.children = []; } } else { if (oldewMatchRest) { const { items: oCols, index: oIndex, parent: oParent } = oldewMatchRest; oCols.splice(oIndex, 1); if (!oParent) { oafIndex = oIndex; } } } const newMatchRest = _xeUtils.default.findTree(collectColumn, item => item.id === newColumn.id); if (newMatchRest) { const { items: nCols, index: nIndex, parent: nParent } = newMatchRest; // 转子级 if (isCrossDrag && isToChildDrag && prevDragToChild) { dragColumn.parentId = newColumn.id; newColumn.children = (newColumn.children || []).concat([dragColumn]); } else { dragColumn.parentId = newColumn.parentId; nCols.splice(nIndex + dragOffsetIndex, 0, dragColumn); } if (!nParent) { nafIndex = nIndex; } } _xeUtils.default.eachTree(collectColumn, (column, index, items, path, parent) => { if (!parent) { const sortIndex = index + 1; column.renderSortNumber = sortIndex; } }); } else { oafIndex = _xeUtils.default.findIndexOf(customColumnList, item => item.id === dragColumn.id); customColumnList.splice(oafIndex, 1); nafIndex = _xeUtils.default.findIndexOf(customColumnList, item => item.id === newColumn.id); customColumnList.splice(nafIndex + dragOffsetIndex, 0, dragColumn); } if (mouseConfig) { if ($xeTable.clearSelected) { $xeTable.clearSelected(); } if ($xeTable.clearCellAreas) { $xeTable.clearCellAreas(); $xeTable.clearCopyCellArea(); } } $xeTable.dispatchEvent('column-dragend', { oldColumn: dragColumn, newColumn, dragColumn, dragPos: prevDragPos, offsetIndex: dragOffsetIndex, _index: { newIndex: nafIndex, oldIndex: oafIndex } }, evnt); if (immediate) { tableReactData.customColumnList = collectColumn.slice(0); $xeTable.handleColDragSwapColumn(); } }).catch(() => {}); } } hideDropTip($xeTableCustomPanel); customPanelReactData.dragCol = null; customPanelReactData.dragGroupField = null; customPanelReactData.dragAggFnCol = null; customPanelInternalData.prevDragGroupField = null; customPanelInternalData.prevDragAggFnColid = null; trEl.draggable = false; trEl.removeAttribute('drag-pos'); (0, _dom.removeClass)(trEl, 'active--drag-target'); (0, _dom.removeClass)(trEl, 'active--drag-origin'); }, sortDragoverEvent(evnt) { const $xeTableCustomPanel = this; const $xeTable = $xeTableCustomPanel.$xeTable; const customPanelReactData = $xeTableCustomPanel.reactData; const customPanelInternalData = $xeTableCustomPanel.internalData; const { dragCol } = customPanelReactData; const customOpts = $xeTable.computeCustomOpts; const { immediate } = customOpts; const columnDragOpts = $xeTable.computeColumnDragOpts; const { isCrossDrag, isToChildDrag } = columnDragOpts; const optEl = evnt.currentTarget; const isControlKey = (0, _dom.hasControlKey)(evnt); const colid = optEl.getAttribute('colid'); const column = $xeTable.getColumnById(colid); customPanelInternalData.prevDragGroupField = null; customPanelInternalData.prevDragAggFnColid = null; // 是否移入有效列 if (column && (isCrossDrag || column.level === 1)) { evnt.preventDefault(); const offsetY = evnt.clientY - optEl.getBoundingClientRect().y; const dragPos = offsetY < optEl.clientHeight / 2 ? 'top' : 'bottom'; if (!dragCol || dragCol && dragCol.id === column.id || !isCrossDrag && column.level > 1 || !immediate && column.level > 1 || column.renderFixed) { showDropTip($xeTableCustomPanel, evnt, optEl, false, dragPos); return; } customPanelInternalData.prevDragToChild = !!(isCrossDrag && isToChildDrag && isControlKey && immediate); customPanelInternalData.prevDragCol = column; customPanelInternalData.prevDragPos = dragPos; showDropTip($xeTableCustomPanel, evnt, optEl, true, dragPos); } } } };