You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

1329 lines
46 KiB

"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);
}
}
}
};