vxe-table-ro-test
Version:
一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...
858 lines (857 loc) • 33.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const {
getI18n,
getIcon
} = _ui.VxeUI;
var _default = exports.default = (0, _vue.defineComponent)({
name: 'TableCustomPanel',
props: {
customStore: {
type: Object,
default: () => ({})
}
},
setup(props) {
const VxeUIModalComponent = _ui.VxeUI.getComponent('VxeModal');
const VxeUIDrawerComponent = _ui.VxeUI.getComponent('VxeDrawer');
const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
const VxeUIInputComponent = _ui.VxeUI.getComponent('VxeInput');
const VxeUITooltipComponent = _ui.VxeUI.getComponent('VxeTooltip');
const VxeUIRadioGroupComponent = _ui.VxeUI.getComponent('VxeRadioGroup');
const $xeTable = (0, _vue.inject)('$xeTable', {});
const {
reactData
} = $xeTable;
const {
computeCustomOpts,
computeColumnOpts,
computeIsMaxFixedColumn
} = $xeTable.getComputeMaps();
const refElem = (0, _vue.ref)();
const bodyElemRef = (0, _vue.ref)();
const dragHintElemRef = (0, _vue.ref)();
const dragColumnRef = (0, _vue.ref)();
let prevDropTrEl;
const handleWrapperMouseenterEvent = evnt => {
const {
customStore
} = props;
customStore.activeWrapper = true;
$xeTable.customOpenEvent(evnt);
};
const handleWrapperMouseleaveEvent = evnt => {
const {
customStore
} = props;
customStore.activeWrapper = false;
setTimeout(() => {
if (!customStore.activeBtn && !customStore.activeWrapper) {
$xeTable.customCloseEvent(evnt);
}
}, 300);
};
const confirmCustomEvent = ({
$event
}) => {
const {
customColumnList
} = reactData;
const customOpts = computeCustomOpts.value;
const {
allowVisible,
allowSort,
allowFixed,
allowResizable
} = customOpts;
_xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => {
if (parent) {
// 更新子列信息
column.fixed = parent.fixed;
} else {
if (allowSort) {
const sortIndex = index + 1;
column.renderSortNumber = sortIndex;
}
if (allowFixed) {
column.fixed = column.renderFixed;
}
}
if (allowResizable) {
if (column.renderVisible && (!column.children || column.children.length)) {
if (column.renderResizeWidth !== column.renderWidth) {
column.resizeWidth = column.renderResizeWidth;
column.renderWidth = column.renderResizeWidth;
}
}
}
if (allowVisible) {
column.visible = column.renderVisible;
}
});
$xeTable.closeCustom();
$xeTable.emitCustomEvent('confirm', $event);
$xeTable.saveCustomStore('confirm');
};
const cancelCloseEvent = ({
$event
}) => {
$xeTable.closeCustom();
$xeTable.emitCustomEvent('close', $event);
};
const cancelCustomEvent = ({
$event
}) => {
const {
customStore
} = props;
const {
customColumnList
} = reactData;
const {
oldSortMaps,
oldFixedMaps,
oldVisibleMaps
} = customStore;
const customOpts = computeCustomOpts.value;
const {
allowVisible,
allowSort,
allowFixed,
allowResizable
} = customOpts;
_xeUtils.default.eachTree(customColumnList, column => {
const colid = column.getKey();
const visible = !!oldVisibleMaps[colid];
const fixed = oldFixedMaps[colid] || '';
if (allowVisible) {
column.renderVisible = visible;
column.visible = visible;
}
if (allowFixed) {
column.renderFixed = fixed;
column.fixed = fixed;
}
if (allowSort) {
column.renderSortNumber = oldSortMaps[colid] || 0;
}
if (allowResizable) {
column.renderResizeWidth = column.renderWidth;
}
}, {
children: 'children'
});
$xeTable.closeCustom();
$xeTable.emitCustomEvent('cancel', $event);
};
const handleResetCustomEvent = evnt => {
$xeTable.resetColumn(true);
$xeTable.closeCustom();
$xeTable.emitCustomEvent('reset', evnt);
};
const resetCustomEvent = ({
$event
}) => {
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') {
handleResetCustomEvent($event);
}
});
} else {
handleResetCustomEvent($event);
}
};
const handleOptionCheck = column => {
const {
customColumnList
} = reactData;
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);
handleOptionCheck(parent);
}
}
};
const changeCheckboxOption = column => {
const isChecked = !column.renderVisible;
const customOpts = computeCustomOpts.value;
if (customOpts.immediate) {
_xeUtils.default.eachTree([column], item => {
item.visible = isChecked;
item.renderVisible = isChecked;
item.halfVisible = false;
});
$xeTable.handleCustom();
$xeTable.saveCustomStore('update:visible');
} else {
_xeUtils.default.eachTree([column], item => {
item.renderVisible = isChecked;
item.halfVisible = false;
});
}
handleOptionCheck(column);
$xeTable.checkCustomStatus();
};
const changeFixedOption = (column, colFixed) => {
const isMaxFixedColumn = computeIsMaxFixedColumn.value;
const customOpts = computeCustomOpts.value;
if (customOpts.immediate) {
if (column.renderFixed === colFixed) {
_xeUtils.default.eachTree([column], col => {
col.fixed = '';
col.renderFixed = '';
});
} else {
if (!isMaxFixedColumn || column.renderFixed) {
_xeUtils.default.eachTree([column], col => {
col.fixed = colFixed;
col.renderFixed = colFixed;
});
}
}
$xeTable.handleCustom();
$xeTable.saveCustomStore('update:fixed');
} else {
if (column.renderFixed === colFixed) {
_xeUtils.default.eachTree([column], col => {
col.renderFixed = '';
});
} else {
if (!isMaxFixedColumn || column.renderFixed) {
_xeUtils.default.eachTree([column], col => {
col.renderFixed = colFixed;
});
}
}
}
};
const allOptionEvent = () => {
const {
customStore
} = props;
const {
customColumnList
} = reactData;
const customOpts = computeCustomOpts.value;
const {
checkMethod,
visibleMethod
} = customOpts;
const isAll = !customStore.isAll;
if (customOpts.immediate) {
_xeUtils.default.eachTree(customColumnList, column => {
if (visibleMethod && !visibleMethod({
column
})) {
return;
}
if (checkMethod && !checkMethod({
column
})) {
return;
}
column.visible = isAll;
column.renderVisible = isAll;
column.halfVisible = false;
});
customStore.isAll = isAll;
$xeTable.handleCustom();
$xeTable.saveCustomStore('update:visible');
} else {
_xeUtils.default.eachTree(customColumnList, column => {
if (visibleMethod && !visibleMethod({
column
})) {
return;
}
if (checkMethod && !checkMethod({
column
})) {
return;
}
column.renderVisible = isAll;
column.halfVisible = false;
});
customStore.isAll = isAll;
}
$xeTable.checkCustomStatus();
};
const sortMousedownEvent = evnt => {
const btnEl = evnt.currentTarget;
const tdEl = btnEl.parentNode;
const trEl = tdEl.parentNode;
const colid = trEl.getAttribute('colid');
const column = $xeTable.getColumnById(colid);
trEl.draggable = true;
dragColumnRef.value = column;
(0, _dom.addClass)(trEl, 'active--drag-origin');
};
const sortMouseupEvent = evnt => {
const btnEl = evnt.currentTarget;
const tdEl = btnEl.parentNode;
const trEl = tdEl.parentNode;
const dragHintEl = dragHintElemRef.value;
trEl.draggable = false;
dragColumnRef.value = null;
(0, _dom.removeClass)(trEl, 'active--drag-origin');
if (dragHintEl) {
dragHintEl.style.display = '';
}
};
const sortDragstartEvent = evnt => {
const img = new Image();
if (evnt.dataTransfer) {
evnt.dataTransfer.setDragImage(img, 0, 0);
}
};
const sortDragendEvent = evnt => {
const {
customColumnList
} = reactData;
const customOpts = computeCustomOpts.value;
const trEl = evnt.currentTarget;
const dragHintEl = dragHintElemRef.value;
if (prevDropTrEl) {
// 判断是否有拖动
if (prevDropTrEl !== trEl) {
const dragOffset = prevDropTrEl.getAttribute('drag-pos');
const colid = trEl.getAttribute('colid');
const column = $xeTable.getColumnById(colid);
if (!column) {
return;
}
const cIndex = _xeUtils.default.findIndexOf(customColumnList, item => item.id === column.id);
const targetColid = prevDropTrEl.getAttribute('colid');
const targetColumn = $xeTable.getColumnById(targetColid);
if (!targetColumn) {
return;
}
// 移出源位置
customColumnList.splice(cIndex, 1);
const tcIndex = _xeUtils.default.findIndexOf(customColumnList, item => item.id === targetColumn.id);
// 插新位置
customColumnList.splice(tcIndex + (dragOffset === 'bottom' ? 1 : 0), 0, column);
}
prevDropTrEl.draggable = false;
prevDropTrEl.removeAttribute('drag-pos');
(0, _dom.removeClass)(prevDropTrEl, 'active--drag-target');
}
dragColumnRef.value = null;
trEl.draggable = false;
trEl.removeAttribute('drag-pos');
if (dragHintEl) {
dragHintEl.style.display = '';
}
(0, _dom.removeClass)(trEl, 'active--drag-target');
(0, _dom.removeClass)(trEl, 'active--drag-origin');
if (customOpts.immediate) {
_xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => {
if (!parent) {
const sortIndex = index + 1;
column.renderSortNumber = sortIndex;
}
});
$xeTable.handleCustom();
$xeTable.saveCustomStore('update:sort');
}
};
const sortDragoverEvent = evnt => {
const trEl = evnt.currentTarget;
if (prevDropTrEl !== trEl) {
(0, _dom.removeClass)(prevDropTrEl, 'active--drag-target');
}
const colid = trEl.getAttribute('colid');
const column = $xeTable.getColumnById(colid);
// 是否移入有效元行
if (column && column.level === 1) {
evnt.preventDefault();
const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
const dragOffset = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
(0, _dom.addClass)(trEl, 'active--drag-target');
trEl.setAttribute('drag-pos', dragOffset);
prevDropTrEl = trEl;
}
updateDropHint(evnt);
};
const updateDropHint = evnt => {
const dragHintEl = dragHintElemRef.value;
const bodyEl = bodyElemRef.value;
if (!bodyEl) {
return;
}
if (dragHintEl) {
const wrapperEl = bodyEl.parentNode;
const wrapperRect = wrapperEl.getBoundingClientRect();
dragHintEl.style.display = 'block';
dragHintEl.style.top = `${Math.min(wrapperEl.clientHeight - wrapperEl.scrollTop - dragHintEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
dragHintEl.style.left = `${Math.min(wrapperEl.clientWidth - wrapperEl.scrollLeft - dragHintEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
}
};
const renderSimplePanel = () => {
const {
customStore
} = props;
const {
customColumnList
} = reactData;
const customOpts = computeCustomOpts.value;
const {
maxHeight
} = customStore;
const {
checkMethod,
visibleMethod,
allowVisible,
allowSort,
allowFixed,
trigger,
placement
} = customOpts;
const isMaxFixedColumn = computeIsMaxFixedColumn.value;
const colVNs = [];
const customWrapperOns = {};
// hover 触发
if (trigger === 'hover') {
customWrapperOns.onMouseenter = handleWrapperMouseenterEvent;
customWrapperOns.onMouseleave = handleWrapperMouseleaveEvent;
}
_xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => {
const isVisible = visibleMethod ? visibleMethod({
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({
column
}) : false;
const isHidden = !isChecked;
colVNs.push((0, _vue.h)('li', {
key: column.id,
colid: column.id,
class: ['vxe-table-custom--option', `level--${column.level}`, {
'is--hidden': isDisabled || isHidden,
'is--group': isColGroup
}],
onDragstart: sortDragstartEvent,
onDragend: sortDragendEvent,
onDragover: sortDragoverEvent
}, [allowVisible ? (0, _vue.h)('div', {
class: ['vxe-table-custom--checkbox-option', {
'is--checked': isChecked,
'is--indeterminate': isIndeterminate,
'is--disabled': isDisabled
}],
title: getI18n('vxe.custom.setting.colVisible'),
onClick: () => {
if (!isDisabled) {
changeCheckboxOption(column);
}
}
}, [(0, _vue.h)('span', {
class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
})]) : (0, _vue.createCommentVNode)(), allowSort && column.level === 1 ? (0, _vue.h)('div', {
class: 'vxe-table-custom--sort-option'
}, [(0, _vue.h)('span', Object.assign({
class: ['vxe-table-custom--sort-btn', {
'is--disabled': isDisabled || isHidden
}],
title: getI18n('vxe.custom.setting.sortHelpTip')
}, isDisabled || isHidden ? {} : {
onMousedown: sortMousedownEvent,
onMouseup: sortMouseupEvent
}), [(0, _vue.h)('i', {
class: getIcon().TABLE_CUSTOM_SORT
})])]) : (0, _vue.createCommentVNode)(), column.type === 'html' ? (0, _vue.h)('div', {
key: '1',
class: 'vxe-table-custom--checkbox-label',
innerHTML: colTitle
}) : (0, _vue.h)('div', {
key: '0',
class: 'vxe-table-custom--checkbox-label'
}, colTitle), !parent && allowFixed ? (0, _vue.h)('div', {
class: 'vxe-table-custom--fixed-option'
}, [VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
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'),
onClick: () => {
changeFixedOption(column, 'left');
}
}) : (0, _vue.createCommentVNode)(), VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
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'),
onClick: () => {
changeFixedOption(column, 'right');
}
}) : (0, _vue.createCommentVNode)()]) : (0, _vue.createCommentVNode)()]));
}
});
const isAllChecked = customStore.isAll;
const isAllIndeterminate = customStore.isIndeterminate;
const dragColumn = dragColumnRef.value;
return (0, _vue.h)('div', {
ref: refElem,
key: 'simple',
class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
'is--active': customStore.visible
}],
style: maxHeight && !['left', 'right'].includes(placement) ? {
maxHeight: `${maxHeight}px`
} : {}
}, customStore.visible ? [(0, _vue.h)('ul', {
class: 'vxe-table-custom--header'
}, [(0, _vue.h)('li', {
class: 'vxe-table-custom--option'
}, [allowVisible ? (0, _vue.h)('div', {
class: ['vxe-table-custom--checkbox-option', {
'is--checked': isAllChecked,
'is--indeterminate': isAllIndeterminate
}],
title: getI18n('vxe.table.allTitle'),
onClick: allOptionEvent
}, [(0, _vue.h)('span', {
class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
}), (0, _vue.h)('span', {
class: 'vxe-checkbox--label'
}, getI18n('vxe.toolbar.customAll'))]) : (0, _vue.h)('span', {
class: 'vxe-checkbox--label'
}, getI18n('vxe.table.customTitle'))])]), (0, _vue.h)('div', {
ref: bodyElemRef,
class: 'vxe-table-custom--list-wrapper'
}, [(0, _vue.h)(_vue.TransitionGroup, Object.assign({
class: 'vxe-table-custom--body',
name: 'vxe-table-custom--list',
tag: 'ul'
}, customWrapperOns), {
default: () => colVNs
}), (0, _vue.h)('div', {
ref: dragHintElemRef,
class: 'vxe-table-custom-popup--drag-hint'
}, getI18n('vxe.custom.cstmDragTarget', [dragColumn && dragColumn.type !== 'html' ? dragColumn.getTitle() : '']))]), customOpts.showFooter ? (0, _vue.h)('div', {
class: 'vxe-table-custom--footer'
}, [VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
mode: 'text',
content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
onClick: resetCustomEvent
}) : (0, _vue.createCommentVNode)(), customOpts.immediate ? VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
mode: 'text',
content: customOpts.closeButtonText || getI18n('vxe.table.customClose'),
onClick: cancelCloseEvent
}) : (0, _vue.createCommentVNode)() : VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
mode: 'text',
content: customOpts.cancelButtonText || getI18n('vxe.table.customCancel'),
onClick: cancelCustomEvent
}) : (0, _vue.createCommentVNode)(), customOpts.immediate ? (0, _vue.createCommentVNode)() : VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
mode: 'text',
status: 'primary',
content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
onClick: confirmCustomEvent
}) : (0, _vue.createCommentVNode)()]) : null] : []);
};
const renderPopupPanel = () => {
const {
customStore
} = props;
const {
customColumnList
} = reactData;
const customOpts = computeCustomOpts.value;
const {
modalOptions,
drawerOptions,
allowVisible,
allowSort,
allowFixed,
allowResizable,
checkMethod,
visibleMethod
} = customOpts;
const columnOpts = computeColumnOpts.value;
const {
maxFixedSize
} = columnOpts;
const {
mode
} = customOpts;
const modalOpts = Object.assign({}, modalOptions);
const drawerOpts = Object.assign({}, drawerOptions);
const isMaxFixedColumn = computeIsMaxFixedColumn.value;
const trVNs = [];
_xeUtils.default.eachTree(customColumnList, (column, index, items, path, parent) => {
const isVisible = visibleMethod ? visibleMethod({
column
}) : true;
if (isVisible) {
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({
column
}) : false;
const isHidden = !isChecked;
trVNs.push((0, _vue.h)('tr', {
key: column.id,
colid: column.id,
class: [`vxe-table-custom-popup--row level--${column.level}`, {
'is--group': isColGroup
}],
onDragstart: sortDragstartEvent,
onDragend: sortDragendEvent,
onDragover: sortDragoverEvent
}, [allowVisible ? (0, _vue.h)('td', {
class: 'vxe-table-custom-popup--column-item col--visible'
}, [(0, _vue.h)('div', {
class: ['vxe-table-custom--checkbox-option', {
'is--checked': isChecked,
'is--indeterminate': isIndeterminate,
'is--disabled': isDisabled
}],
title: getI18n('vxe.custom.setting.colVisible'),
onClick: () => {
if (!isDisabled) {
changeCheckboxOption(column);
}
}
}, [(0, _vue.h)('span', {
class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
})])]) : (0, _vue.createCommentVNode)(), allowSort ? (0, _vue.h)('td', {
class: 'vxe-table-custom-popup--column-item col--sort'
}, [column.level === 1 ? (0, _vue.h)('span', Object.assign({
class: ['vxe-table-custom-popup--column-sort-btn', {
'is--disabled': isDisabled || isHidden
}],
title: getI18n('vxe.custom.setting.sortHelpTip')
}, isDisabled || isHidden ? {} : {
onMousedown: sortMousedownEvent,
onMouseup: sortMouseupEvent
}), [(0, _vue.h)('i', {
class: getIcon().TABLE_CUSTOM_SORT
})]) : (0, _vue.h)('span', '-')]) : (0, _vue.createCommentVNode)(), (0, _vue.h)('td', {
class: 'vxe-table-custom-popup--column-item col--name'
}, [column.type === 'html' ? (0, _vue.h)('div', {
key: '1',
class: 'vxe-table-custom-popup--name',
innerHTML: colTitle
}) : (0, _vue.h)('div', {
key: '0',
class: 'vxe-table-custom-popup--name',
title: colTitle
}, colTitle)]), allowResizable ? (0, _vue.h)('td', {
class: 'vxe-table-custom-popup--column-item col--resizable'
}, [column.children && column.children.length ? (0, _vue.h)('span', '-') : VxeUIInputComponent ? (0, _vue.h)(VxeUIInputComponent, {
type: 'integer',
disabled: isDisabled || isHidden,
modelValue: column.renderResizeWidth,
'onUpdate:modelValue'(value) {
column.renderResizeWidth = Math.max(0, Number(value));
}
}) : (0, _vue.createCommentVNode)()]) : (0, _vue.createCommentVNode)(), allowFixed ? (0, _vue.h)('td', {
class: 'vxe-table-custom-popup--column-item col--fixed'
}, [parent ? (0, _vue.h)('span', '-') : VxeUIRadioGroupComponent ? (0, _vue.h)(VxeUIRadioGroupComponent, {
modelValue: 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
}],
'onUpdate:modelValue'(value) {
column.renderFixed = value;
}
}) : (0, _vue.createCommentVNode)()]) : (0, _vue.createCommentVNode)()]));
}
});
const isAllChecked = customStore.isAll;
const isAllIndeterminate = customStore.isIndeterminate;
const dragColumn = dragColumnRef.value;
const scopedSlots = {
default: () => {
return (0, _vue.h)('div', {
ref: bodyElemRef,
class: 'vxe-table-custom-popup--body'
}, [(0, _vue.h)('div', {
class: 'vxe-table-custom-popup--table-wrapper'
}, [(0, _vue.h)('table', {}, [(0, _vue.h)('colgroup', {}, [allowVisible ? (0, _vue.h)('col', {
style: {
width: '80px'
}
}) : (0, _vue.createCommentVNode)(), allowSort ? (0, _vue.h)('col', {
style: {
width: '80px'
}
}) : (0, _vue.createCommentVNode)(), (0, _vue.h)('col', {
style: {
minWidth: '120px'
}
}), allowResizable ? (0, _vue.h)('col', {
style: {
width: '140px'
}
}) : (0, _vue.createCommentVNode)(), allowFixed ? (0, _vue.h)('col', {
style: {
width: '200px'
}
}) : (0, _vue.createCommentVNode)()]), (0, _vue.h)('thead', {}, [(0, _vue.h)('tr', {}, [allowVisible ? (0, _vue.h)('th', {}, [(0, _vue.h)('div', {
class: ['vxe-table-custom--checkbox-option', {
'is--checked': isAllChecked,
'is--indeterminate': isAllIndeterminate
}],
title: getI18n('vxe.table.allTitle'),
onClick: allOptionEvent
}, [(0, _vue.h)('span', {
class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
}), (0, _vue.h)('span', {
class: 'vxe-checkbox--label'
}, getI18n('vxe.toolbar.customAll'))])]) : (0, _vue.createCommentVNode)(), allowSort ? (0, _vue.h)('th', {}, [(0, _vue.h)('span', {
class: 'vxe-table-custom-popup--table-sort-help-title'
}, getI18n('vxe.custom.setting.colSort')), VxeUITooltipComponent ? (0, _vue.h)(VxeUITooltipComponent, {
enterable: true,
content: getI18n('vxe.custom.setting.sortHelpTip'),
popupClassName: 'vxe-table--ignore-clear'
}, {
default: () => {
return (0, _vue.h)('i', {
class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
});
}
}) : (0, _vue.createCommentVNode)()]) : (0, _vue.createCommentVNode)(), (0, _vue.h)('th', {}, getI18n('vxe.custom.setting.colTitle')), allowResizable ? (0, _vue.h)('th', {}, getI18n('vxe.custom.setting.colResizable')) : (0, _vue.createCommentVNode)(), allowFixed ? (0, _vue.h)('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : (0, _vue.createCommentVNode)()])]), (0, _vue.h)(_vue.TransitionGroup, {
class: 'vxe-table-custom--body',
tag: 'tbody',
name: 'vxe-table-custom--list'
}, {
default: () => trVNs
})])]), (0, _vue.h)('div', {
ref: dragHintElemRef,
class: 'vxe-table-custom-popup--drag-hint'
}, getI18n('vxe.custom.cstmDragTarget', [dragColumn ? dragColumn.getTitle() : '']))]);
},
footer: () => {
return (0, _vue.h)('div', {
class: 'vxe-table-custom-popup--footer'
}, [VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore'),
onClick: resetCustomEvent
}) : (0, _vue.createCommentVNode)(), VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel'),
onClick: cancelCustomEvent
}) : (0, _vue.createCommentVNode)(), VxeUIButtonComponent ? (0, _vue.h)(VxeUIButtonComponent, {
status: 'primary',
content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm'),
onClick: confirmCustomEvent
}) : (0, _vue.createCommentVNode)()]);
}
};
if (mode === 'drawer') {
return VxeUIDrawerComponent ? (0, _vue.h)(VxeUIDrawerComponent, {
key: 'drawer',
className: ['vxe-table-custom-drawer-wrapper', 'vxe-table--ignore-clear', drawerOpts.className || ''].join(' '),
modelValue: customStore.visible,
title: drawerOpts.title || getI18n('vxe.custom.cstmTitle'),
width: drawerOpts.width || Math.min(880, document.documentElement.clientWidth),
position: drawerOpts.position,
escClosable: !!drawerOpts.escClosable,
destroyOnClose: true,
showFooter: true,
'onUpdate:modelValue'(value) {
customStore.visible = value;
}
}, scopedSlots) : (0, _vue.createCommentVNode)();
}
return VxeUIModalComponent ? (0, _vue.h)(VxeUIModalComponent, {
key: 'modal',
className: ['vxe-table-custom-modal-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
modelValue: 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,
destroyOnClose: true,
showFooter: true,
'onUpdate:modelValue'(value) {
customStore.visible = value;
}
}, scopedSlots) : (0, _vue.createCommentVNode)();
};
const renderVN = () => {
const customOpts = computeCustomOpts.value;
if (['modal', 'drawer', 'popup'].includes(`${customOpts.mode}`)) {
return renderPopupPanel();
}
return renderSimplePanel();
};
if (process.env.NODE_ENV === 'development') {
(0, _vue.nextTick)(() => {
const customOpts = computeCustomOpts.value;
const {
mode
} = customOpts;
if (!VxeUIModalComponent) {
(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 (!VxeUIInputComponent) {
(0, _log.errLog)('vxe.error.reqComp', ['vxe-input']);
}
if (!VxeUITooltipComponent) {
(0, _log.errLog)('vxe.error.reqComp', ['vxe-tooltip']);
}
if (!VxeUIRadioGroupComponent) {
(0, _log.errLog)('vxe.error.reqComp', ['vxe-radio-group']);
}
});
}
return renderVN;
}
});