vxe-gantt
Version:
A vue based gantt component
1,155 lines (1,141 loc) • 257 kB
JavaScript
import { VxeUI } from '@vxe-ui/core';
export { VxeUI } from '@vxe-ui/core';
import { defineComponent, inject, ref, onMounted, onUnmounted, h, reactive, computed, onBeforeUnmount, provide, nextTick, watch } from 'vue';
import XEUtils from 'xe-utils';
import DomZIndex from 'dom-zindex';
import { VxeTable } from 'vxe-table';
const { setConfig: setConfig$1, setIcon } = VxeUI;
VxeUI.ganttVersion = "4.4.10";
const ymdFormat = 'yyyy-MM-dd';
const ymdhmsFormat = 'yyyy-MM-dd HH:mm:ss';
setConfig$1({
gantt: {
// size: null,
// zoomConfig: {
// escRestore: true
// },
formConfig: {
enabled: true
},
pagerConfig: {
enabled: true
// perfect: false
},
toolbarConfig: {
enabled: true
// perfect: false
},
proxyConfig: {
enabled: true,
autoLoad: true,
showLoading: true,
showResponseMsg: true,
showActionMsg: true,
response: {
list: null,
result: 'result',
total: 'page.total',
message: 'message'
}
// beforeItem: null,
// beforeColumn: null,
// beforeQuery: null,
// afterQuery: null,
// beforeDelete: null,
// afterDelete: null,
// beforeSave: null,
// afterSave: null
},
taskBarTooltipConfig: {
enterable: true
},
taskLinkConfig: {
enabled: true,
isHover: true,
showArrow: true
},
taskViewScaleConfig: {
year: {
valueFormat: ymdFormat
},
quarter: {
valueFormat: ymdFormat
},
month: {
valueFormat: ymdFormat
},
week: {
startDay: 1,
valueFormat: ymdFormat
},
day: {
valueFormat: ymdFormat
},
date: {
valueFormat: ymdFormat
},
hour: {
valueFormat: ymdhmsFormat
},
minute: {
valueFormat: ymdhmsFormat
},
second: {
valueFormat: ymdhmsFormat
}
},
taskViewConfig: {
showNowLine: true,
gridding: {
leftSpacing: 1,
rightSpacing: 1
}
},
taskSplitConfig: {
enabled: true,
resize: true,
showCollapseTableButton: true,
showCollapseTaskButton: true
},
taskBarSubviewConfig: {
// showOverview: false
}
}
});
const iconPrefix = 'vxe-icon-';
setIcon({
// gantt
GANTT_VIEW_LEFT_OPEN: iconPrefix + 'arrow-left',
GANTT_VIEW_LEFT_CLOSE: iconPrefix + 'arrow-right',
GANTT_VIEW_RIGHT_OPEN: iconPrefix + 'arrow-right',
GANTT_VIEW_RIGHT_CLOSE: iconPrefix + 'arrow-left',
GANTT_VIEW_TASK_MILESTONE: iconPrefix + 'square-fill rotate45'
});
const { log } = VxeUI;
const ganttVersion = `gantt v${"4.4.10"}`;
function createComponentLog(name) {
const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
const designVersion = VxeUI.designVersion ? `design v${VxeUI.designVersion}` : '';
return {
warnLog: log.create('warn', uiVersion + tableVersion + ganttVersion + designVersion + '] [' + name),
errLog: log.create('error', uiVersion + tableVersion + ganttVersion + designVersion + '] [' + name)
};
}
log.create('warn', ganttVersion);
const errLog$1 = log.create('error', ganttVersion);
function checkDependVersion() {
const pVersion = 4;
const sVersion = 17;
if (VxeUI.checkVersion) {
if (!VxeUI.checkVersion(VxeUI.tableVersion, pVersion, sVersion)) {
errLog$1('vxe.error.errorVersion', [`vxe-table@${VxeUI.tableVersion || '?'}`, `vxe-table v${pVersion}.${sVersion}+`]);
}
}
else {
errLog$1(`Requires vxe-table v${pVersion}.${sVersion}+`);
}
}
const defineVxeComponent = defineComponent;
function isEnableConf(conf) {
return conf && conf.enabled !== false;
}
function hasEnableConf(conf, opts) {
return opts && (conf ? opts.enabled !== false : opts.enabled);
}
function isEmptyValue(cellValue) {
return cellValue === null || cellValue === undefined || cellValue === '';
}
function nextZIndex() {
return DomZIndex.getNext();
}
function getLastZIndex() {
return DomZIndex.getCurrent();
}
function formatText(value, placeholder) {
return '' + (isEmptyValue(value) ? ('') : value);
}
/**
* 判断值为：'' | null | undefined 时都属于空值
*/
function eqEmptyValue(cellValue) {
return cellValue === '' || XEUtils.eqNull(cellValue);
}
function getStringValue(cellValue) {
return eqEmptyValue(cellValue) ? '' : cellValue;
}
function getClass(property, params) {
return property ? XEUtils.isFunction(property) ? property(params) : property : '';
}
const reClsMap = {};
function getClsRE(cls) {
if (!reClsMap[cls]) {
reClsMap[cls] = new RegExp(`(?:^|\\s)${cls}(?!\\S)`, 'g');
}
return reClsMap[cls];
}
function hasClass(elem, cls) {
return !!(elem && elem.className && elem.className.match && elem.className.match(getClsRE(cls)));
}
function removeClass(elem, cls) {
if (elem && hasClass(elem, cls)) {
elem.className = elem.className.replace(getClsRE(cls), '');
}
}
function addClass(elem, cls) {
if (elem && !hasClass(elem, cls)) {
removeClass(elem, cls);
elem.className = `${elem.className} ${cls}`;
}
}
function toCssUnit(val, unit = 'px') {
if (XEUtils.isNumber(val) || /^\d+$/.test(`${val}`)) {
return `${val}${unit}`;
}
return `${val || ''}`;
}
function getDomNode() {
const documentElement = document.documentElement;
const bodyElem = document.body;
return {
scrollTop: documentElement.scrollTop || bodyElem.scrollTop,
scrollLeft: documentElement.scrollLeft || bodyElem.scrollLeft,
visibleHeight: documentElement.clientHeight || bodyElem.clientHeight,
visibleWidth: documentElement.clientWidth || bodyElem.clientWidth
};
}
function getOffsetHeight(elem) {
return elem ? elem.offsetHeight : 0;
}
function getPaddingTopBottomSize(elem) {
if (elem) {
const computedStyle = getComputedStyle(elem);
const paddingTop = XEUtils.toNumber(computedStyle.paddingTop);
const paddingBottom = XEUtils.toNumber(computedStyle.paddingBottom);
return paddingTop + paddingBottom;
}
return 0;
}
function setScrollTop(elem, scrollTop) {
if (elem) {
elem.scrollTop = scrollTop;
}
}
function setScrollLeft(elem, scrollLeft) {
if (elem) {
elem.scrollLeft = scrollLeft;
}
}
function getSlotVNs(vns) {
if (XEUtils.isArray(vns)) {
return vns;
}
return vns ? [vns] : [];
}
const tableEmits = [
'ready',
'init-rendered',
'data-rendered',
'update:data',
'keydown-start',
'keydown',
'keydown-end',
'paste',
'copy',
'cut',
'undo',
'redo',
'context-menu',
'columns-change',
'data-change',
'footer-data-change',
'current-change',
'current-row-change',
'current-row-disabled',
'current-column-change',
'current-column-disabled',
'radio-change',
'checkbox-change',
'checkbox-all',
'checkbox-range-start',
'checkbox-range-change',
'checkbox-range-end',
'checkbox-range-select',
'cell-click',
'cell-dblclick',
'cell-menu',
'cell-mouseenter',
'cell-mouseleave',
'cell-selected',
'cell-delete-value',
'cell-backspace-value',
'header-cell-click',
'header-cell-dblclick',
'header-cell-menu',
'footer-cell-click',
'footer-cell-dblclick',
'footer-cell-menu',
'clear-merge',
'sort-change',
'clear-sort',
'clear-all-sort',
'filter-change',
'filter-visible',
'clear-filter',
'clear-all-filter',
'resizable-change',
'column-resizable-change',
'row-resizable-change',
'toggle-row-group-expand',
'toggle-row-expand',
'toggle-tree-expand',
'menu-click',
'edit-closed',
'row-dragstart',
'row-dragover',
'row-dragend',
'row-remove-dragend',
'row-insert-dragend',
'column-dragstart',
'column-dragover',
'column-dragend',
'enter-append-row',
'tab-append-row',
'edit-actived',
'edit-activated',
'edit-disabled',
'valid-error',
'scroll',
'scroll-boundary',
'custom',
'custom-visible-change',
'custom-visible-all',
'custom-fixed-change',
'custom-sort-change',
'change-fnr',
'open-fnr',
'show-fnr',
'hide-fnr',
'fnr-change',
'fnr-find',
'fnr-find-all',
'fnr-replace',
'fnr-replace-all',
'cell-area-copy',
'cell-area-cut',
'cell-area-paste',
'cell-area-merge',
'clear-cell-area-selection',
'clear-cell-area-merge',
'header-cell-area-selection',
'cell-area-selection-invalid',
'cell-area-selection-start',
'cell-area-selection-drag',
'cell-area-selection-end',
'cell-area-extension-start',
'cell-area-extension-drag',
'cell-area-extension-end',
'cell-area-extension-fill',
'cell-area-selection-all-start',
'cell-area-selection-all-end',
'cell-area-arrows-start',
'cell-area-arrows-end',
'cell-area-fill-copy',
'active-cell-change-start',
'active-cell-change-end'
];
const gridEmits = [
...tableEmits,
'page-change',
'form-submit',
'form-submit-invalid',
'form-reset',
'form-collapse',
'form-toggle-collapse',
'proxy-query',
'proxy-delete',
'proxy-save',
'toolbar-button-click',
'toolbar-tool-click',
'zoom'
];
const ganttEmits = [
...gridEmits,
'task-cell-click',
'task-cell-dblclick',
'task-bar-mouseenter',
'task-bar-mouseleave',
'task-bar-click',
'task-bar-dblclick',
'task-view-cell-click',
'task-view-cell-dblclick',
'task-move-start',
'task-move-drag',
'task-move-end',
'task-resize-start',
'task-resize-drag',
'task-resize-end',
'task-link-click',
'task-link-dblclick',
'task-link-remove'
];
function getRefElem(refEl) {
if (refEl) {
const rest = refEl.value;
if (rest) {
return (rest.$el || rest);
}
}
return null;
}
function getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight) {
return rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
}
function getStandardGapTime(type) {
switch (type) {
case 'hour':
return 1000 * 60 * 60;
case 'minute':
return 1000 * 60;
case 'second':
return 1000;
}
return 1000 * 60 * 60 * 24;
}
function getTaskBarLeft(chartRest, viewCellWidth) {
return chartRest ? viewCellWidth * chartRest.oLeftSize : 0;
}
function getTaskBarWidth(chartRest, viewCellWidth) {
return chartRest && chartRest.oWidthSize ? Math.max(1, chartRest ? (Math.floor(viewCellWidth * chartRest.oWidthSize) - 1) : 0) : 0;
}
const taskTypeMaps = {
milestone: true,
subview: true
};
function hasMilestoneTask(type) {
return type === 'milestone';
}
function hasSubviewTask(type) {
return type === 'subview';
}
function getTaskType(type) {
return taskTypeMaps[type] ? type : 'default';
}
const { getI18n: getI18n$1 } = VxeUI;
const sourceType$4 = 'gantt';
const viewType$3 = 'header';
var GanttViewHeaderComponent = defineVxeComponent({
name: 'VxeGanttViewHeader',
setup() {
const $xeGantt = inject('$xeGantt', {});
const $xeGanttView = inject('$xeGanttView', {});
const { computeTaskViewOpts } = $xeGantt.getComputeMaps();
const { reactData, internalData } = $xeGanttView;
const refElem = ref();
const refHeaderScroll = ref();
const refHeaderTable = ref();
const refHeaderXSpace = ref();
const renderVN = () => {
const { headerGroups, viewCellWidth } = reactData;
const { todayDateMaps, visibleColumn } = internalData;
const taskViewOpts = computeTaskViewOpts.value;
const { showNowLine } = taskViewOpts;
return h('div', {
ref: refElem,
class: 'vxe-gantt-view--header-wrapper'
}, [
h('div', {
ref: refHeaderScroll,
class: 'vxe-gantt-view--header-inner-wrapper',
onScroll: $xeGanttView.triggerHeaderScrollEvent
}, [
h('div', {
ref: refHeaderXSpace,
class: 'vxe-body--x-space'
}),
h('table', {
ref: refHeaderTable,
class: 'vxe-gantt-view--header-table'
}, [
h('colgroup', {}, visibleColumn.map((column, cIndex) => {
return h('col', {
key: cIndex,
style: {
width: `${viewCellWidth}px`
}
});
})),
h('thead', {}, headerGroups.map(({ scaleItem, columns }, $rowIndex) => {
const { type, titleFormat, titleMethod, headerCellStyle, slots } = scaleItem;
const titleSlot = slots ? slots.title : null;
const isLast = $rowIndex === headerGroups.length - 1;
const todayValue = isLast && showNowLine ? todayDateMaps[type] : null;
return h('tr', {
key: $rowIndex
}, columns.map((column, cIndex) => {
const { field, childCount, dateObj } = column;
let label = `${column.title}`;
if (scaleItem.type === 'day') {
label = getI18n$1(`vxe.gantt.dayss.w${dateObj.e}`);
}
else {
if ($rowIndex) {
label = getI18n$1(`vxe.gantt.tSimpleFormat.${type}`, dateObj);
}
else {
if (isLast && scaleItem.type === 'week') {
label = getI18n$1(`vxe.gantt.tSimpleFormat.${type}`, dateObj);
}
else {
label = getI18n$1(`vxe.gantt.tFullFormat.${type}`, dateObj);
}
}
}
let cellVNs = label;
const ctParams = { source: sourceType$4, type: viewType$3, column, scaleObj: scaleItem, title: label, dateObj: dateObj, $rowIndex };
if (titleSlot) {
cellVNs = $xeGantt.callSlot(titleSlot, ctParams);
}
else if (titleMethod) {
cellVNs = `${titleMethod(ctParams)}`;
}
else if (titleFormat) {
cellVNs = XEUtils.toDateString(dateObj.date, titleFormat);
}
let cellStys = {};
if (headerCellStyle) {
if (XEUtils.isFunction(headerCellStyle)) {
cellStys = headerCellStyle(ctParams) || null;
}
else {
cellStys = headerCellStyle;
}
}
return h('th', {
key: cIndex,
class: ['vxe-gantt-view--header-column', {
'is--now': showNowLine && todayValue && todayValue === field
}],
colspan: childCount || null,
title: titleSlot ? null : label,
style: cellStys || undefined,
onContextmenu(evnt) {
$xeGantt.handleTaskHeaderContextmenuEvent(evnt, ctParams);
}
}, cellVNs);
}));
}))
])
])
]);
};
onMounted(() => {
const { elemStore } = internalData;
const prefix = 'main-header-';
elemStore[`${prefix}wrapper`] = refElem;
elemStore[`${prefix}scroll`] = refHeaderScroll;
elemStore[`${prefix}table`] = refHeaderTable;
elemStore[`${prefix}xSpace`] = refHeaderXSpace;
});
onUnmounted(() => {
const { elemStore } = internalData;
const prefix = 'main-header-';
elemStore[`${prefix}wrapper`] = null;
elemStore[`${prefix}scroll`] = null;
elemStore[`${prefix}table`] = null;
elemStore[`${prefix}xSpace`] = null;
});
return renderVN;
}
});
const { getIcon: getIcon$1, renderEmptyElement: renderEmptyElement$1 } = VxeUI;
const sourceType$3 = 'gantt';
const viewType$2 = 'chart';
var GanttViewChartComponent = defineVxeComponent({
name: 'VxeGanttViewChart',
setup() {
const $xeGantt = inject('$xeGantt', {});
const $xeGanttView = inject('$xeGanttView', {});
const { props: ganttProps, context: ganttContext, reactData: ganttReactData, internalData: ganttInternalData } = $xeGantt;
const { reactData: ganttViewReactData, internalData: ganttViewInternalData } = $xeGanttView;
const { computeProgressField, computeTitleField, computeTypeField, computeTaskBarOpts, computeScaleUnit, computeTaskLinkOpts, computeTaskBarMilestoneOpts, computeTaskBarSubviewOpts } = $xeGantt.getComputeMaps();
const { computeNowLineLeft } = $xeGanttView.getComputeMaps();
const refElem = ref();
const refTaskWrapperElem = ref();
const refChartBeforeWrapperElem = ref();
const refChartAfterWrapperElem = ref();
const refNowLineElem = ref();
const renderTaskBar = ($xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex, rowChildren, isExpandTree) => {
const tableReactData = $xeTable.reactData;
const { resizeHeightFlag, pendingRowFlag } = tableReactData;
const tableInternalData = $xeTable.internalData;
const { fullAllDataRowIdData, pendingRowMaps } = tableInternalData;
const { computeCellOpts, computeRowOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps();
const cellOpts = computeCellOpts.value;
const rowOpts = computeRowOpts.value;
const defaultRowHeight = computeDefaultRowHeight.value;
const { computeTreeOpts } = $xeTable.getComputeMaps();
const treeOpts = computeTreeOpts.value;
const childrenField = treeOpts.children || treeOpts.childrenField;
const ganttSlots = $xeGantt.context.slots;
const taskBarSlot = ganttSlots.taskBar || ganttSlots['task-bar'];
const taskBarOverviewSlot = ganttSlots.taskBarOverview || ganttSlots['task-bar-overview'];
const { treeConfig, taskBarMilestoneConfig, taskBarSubviewConfig } = ganttProps;
const { activeLink, activeBarRowid } = ganttReactData;
const titleField = computeTitleField.value;
const progressField = computeProgressField.value;
const typeField = computeTypeField.value;
const taskBarOpts = computeTaskBarOpts.value;
const taskBarMilestoneOpts = computeTaskBarMilestoneOpts.value;
const taskBarSubviewOpts = computeTaskBarSubviewOpts.value;
const { showOverview, barStyle: subBarStyle } = taskBarSubviewOpts;
const scaleUnit = computeScaleUnit.value;
const barParams = { $gantt: $xeGantt, row, scaleType: scaleUnit };
const { showProgress, showContent, contentMethod, barStyle, moveable, showTooltip } = taskBarOpts;
const isBarRowStyle = XEUtils.isFunction(barStyle);
const barStyObj = (barStyle ? (isBarRowStyle ? barStyle(barParams) || undefined : barStyle) : {}) || {};
const { round } = barStyObj;
const rowRest = fullAllDataRowIdData[rowid] || {};
const cellHeight = resizeHeightFlag ? getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight) : 0;
let title = getStringValue(XEUtils.get(row, titleField));
const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0;
const renderTaskType = getTaskType(XEUtils.get(row, typeField));
const vbStyle = {};
const vpStyle = {
width: `${progressValue || 0}%`
};
if (isBarRowStyle) {
const { bgColor, completedBgColor } = barStyObj;
if (bgColor) {
vbStyle.backgroundColor = bgColor;
}
if (completedBgColor) {
vpStyle.backgroundColor = completedBgColor;
}
}
const ctParams = {
$gantt: $xeGantt,
source: sourceType$3,
type: viewType$2,
scaleType: scaleUnit,
row,
$rowIndex,
rowIndex,
_rowIndex
};
let cbVNs = [];
if ($xeGantt.renderGanttTaskBarContent) {
cbVNs = $xeGantt.renderGanttTaskBarContent(ctParams, {
$gantt: $xeGantt,
$table: $xeTable,
rowid
});
}
else {
const isMilestone = !!(hasEnableConf(taskBarMilestoneConfig, taskBarMilestoneOpts) && hasMilestoneTask(renderTaskType));
const isSubview = !!(hasEnableConf(taskBarSubviewConfig, taskBarSubviewOpts) && hasSubviewTask(renderTaskType));
if (contentMethod) {
title = getStringValue(contentMethod({ row, title, scaleType: scaleUnit }));
}
const ctOns = {};
if (showTooltip) {
ctOns.onMouseover = (evnt) => {
const { dragBarRow } = ganttInternalData;
const ttParams = Object.assign({ $event: evnt }, ctParams);
if (!dragBarRow) {
$xeGantt.triggerTaskBarTooltipEvent(evnt, ttParams);
}
$xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt);
};
ctOns.onMouseleave = (evnt) => {
const { dragBarRow } = ganttInternalData;
const ttParams = Object.assign({ $event: evnt }, ctParams);
if (!dragBarRow) {
$xeGantt.handleTaskBarTooltipLeaveEvent(evnt, ttParams);
}
$xeGantt.dispatchEvent('task-bar-mouseleave', ttParams, evnt);
};
}
if (isSubview && treeConfig && rowChildren && rowChildren.length) {
if (isExpandTree) {
if (showOverview) {
cbVNs.push(h('div', {
key: 'vcso',
class: 'vxe-gantt-view--chart-subview-wrapper is--overview'
}, [
h('div', {
key: rowid,
rowid: rowid,
class: ['vxe-gantt-view--chart-subview-row', {
'is--progress': showProgress,
'is--round': round,
'is--move': moveable
}]
}, [
h('div', {
rowid: rowid,
class: [taskBarOverviewSlot ? 'vxe-gantt-view--chart-subview-custom-bar' : 'vxe-gantt-view--chart-subview-bar', `is--${renderTaskType}`]
}, [
taskBarOverviewSlot
? h('div', {
key: 'cbc',
class: 'vxe-gantt-view--chart-subview-custom-bar-content-wrapper'
}, $xeGantt.callSlot(taskBarOverviewSlot, barParams))
: h('div', {
class: 'vxe-gantt-view--chart-subview-bar-content-wrapper'
}, [
showContent
? h('div', {
class: 'vxe-gantt-view--chart-content'
}, title)
: renderEmptyElement$1($xeGantt)
])
])
])
]));
}
}
else {
const cbcVNs = [];
XEUtils.eachTree(rowChildren, childRow => {
const childBarParams = { $gantt: $xeGantt, row: childRow, scaleType: scaleUnit };
const childBarStyObj = (barStyle ? (isBarRowStyle ? barStyle(childBarParams) : barStyle) : {}) || {};
const { round } = childBarStyObj;
const childRowid = $xeTable.getRowid(childRow);
let childTitle = getStringValue(XEUtils.get(childRow, titleField));
const childProgressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(childRow, progressField)))) : 0;
const childRenderTaskType = getTaskType(XEUtils.get(childRow, typeField));
const isChildSubview = !!(hasEnableConf(taskBarSubviewConfig, taskBarSubviewOpts) && hasSubviewTask(childRenderTaskType));
if (isChildSubview) {
return;
}
const childVpStyle = {
width: `${childProgressValue || 0}%`
};
if (isBarRowStyle) {
const { bgColor, completedBgColor } = childBarStyObj;
if (completedBgColor) {
childVpStyle.backgroundColor = completedBgColor;
}
}
const childCtParams = XEUtils.assign({}, ctParams, {
row: childRow,
rowIndex: $xeTable.getRowIndex(childRow),
$rowIndex: $xeTable.getVMRowIndex(childRow),
_rowIndex: $xeTable.getVTRowIndex(childRow)
});
if (contentMethod) {
childTitle = getStringValue(contentMethod({ row: childRow, title: childTitle, scaleType: scaleUnit }));
}
cbcVNs.push(h('div', {
key: childRowid,
rowid: childRowid,
class: ['vxe-gantt-view--chart-subview-row', `is--${childRenderTaskType}`, {
'is--progress': showProgress,
'is--round': round,
'is--move': moveable,
'row--pending': !!pendingRowFlag && !!pendingRowMaps[childRowid]
}]
}, [
h('div', {
rowid: childRowid,
class: [taskBarSlot ? 'vxe-gantt-view--chart-subview-custom-bar' : 'vxe-gantt-view--chart-subview-bar', `is--${childRenderTaskType}`],
style: subBarStyle ? (XEUtils.isFunction(subBarStyle) ? subBarStyle(childCtParams) : subBarStyle) : undefined,
onClick(evnt) {
evnt.stopPropagation();
$xeGantt.handleTaskBarClickEvent(evnt, childCtParams);
},
onDblclick(evnt) {
evnt.stopPropagation();
$xeGantt.handleTaskBarDblclickEvent(evnt, childCtParams);
},
onMousedown(evnt) {
evnt.stopPropagation();
if ($xeGantt.handleTaskBarMousedownEvent) {
$xeGantt.handleTaskBarMousedownEvent(evnt, childCtParams);
}
}
}, [
taskBarSlot
? h('div', Object.assign({ key: 'cbc', class: 'vxe-gantt-view--chart-subview-custom-bar-content-wrapper' }, ctOns), $xeGantt.callSlot(taskBarSlot, childCtParams))
: h('div', Object.assign({ class: 'vxe-gantt-view--chart-subview-bar-content-wrapper' }, ctOns), [
showProgress
? h('div', {
class: 'vxe-gantt-view--chart-progress',
style: childVpStyle
})
: renderEmptyElement$1($xeGantt),
showContent
? h('div', {
class: 'vxe-gantt-view--chart-content'
}, childTitle)
: renderEmptyElement$1($xeGantt)
])
])
]));
}, { children: childrenField });
cbVNs.push(h('div', {
key: 'vcsc',
class: 'vxe-gantt-view--chart-subview-wrapper is--inline'
}, cbcVNs));
}
}
else {
if (taskBarSlot) {
cbVNs.push(h('div', Object.assign({ key: 'cbc', class: 'vxe-gantt-view--chart-custom-bar-content-wrapper' }, ctOns), $xeGantt.callSlot(taskBarSlot, barParams)));
}
else if (isMilestone) {
const { icon, iconStatus, iconStyle } = taskBarMilestoneOpts;
const tbmParams = { $gantt: $xeGantt, row };
cbVNs.push(h('div', Object.assign({ key: 'vcm', class: 'vxe-gantt-view--chart-milestone-wrapper' }, ctOns), [
h('div', {
class: ['vxe-gantt-view--chart-milestone-icon', iconStatus ? `theme--${XEUtils.isFunction(iconStatus) ? iconStatus(tbmParams) : iconStatus}` : ''],
style: iconStyle ? Object.assign({}, XEUtils.isFunction(iconStyle) ? iconStyle(tbmParams) : iconStyle) : undefined
}, [
h('i', {
class: (icon ? (XEUtils.isFunction(icon) ? icon(tbmParams) : icon) : '') || getIcon$1().GANTT_VIEW_TASK_MILESTONE
})
]),
showContent
? h('div', {
class: 'vxe-gantt-view--chart-milestone-content'
}, title)
: renderEmptyElement$1($xeGantt)
]));
}
else {
cbVNs.push(h('div', Object.assign({ key: 'vbc', class: 'vxe-gantt-view--chart-bar-content-wrapper' }, ctOns), [
showProgress
? h('div', {
class: 'vxe-gantt-view--chart-progress',
style: vpStyle
})
: renderEmptyElement$1($xeGantt),
showContent
? h('div', {
class: 'vxe-gantt-view--chart-content'
}, title)
: renderEmptyElement$1($xeGantt)
]));
}
}
}
return h('div', {
key: rowid,
rowid,
class: ['vxe-gantt-view--chart-row', `is--${renderTaskType}`, {
'is--progress': showProgress,
'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid],
'is--round': round,
'is--move': moveable
}],
style: {
height: `${cellHeight}px`
},
onDragstart(evnt) {
if (ganttInternalData.dragBarRow) {
evnt.preventDefault();
}
},
onContextmenu(evnt) {
$xeGantt.handleTaskBarContextmenuEvent(evnt, ctParams);
}
}, [
h('div', {
class: [taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar', `is--${renderTaskType}`, {
'is--active': activeBarRowid === rowid,
'active--link': activeLink && (rowid === `${activeLink.from}` || rowid === `${activeLink.to}`)
}],
style: vbStyle,
rowid,
onClick(evnt) {
$xeGantt.handleTaskBarClickEvent(evnt, barParams);
},
onDblclick(evnt) {
$xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
},
onMousedown(evnt) {
if ($xeGantt.handleTaskBarMousedownEvent) {
$xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
}
}
}, cbVNs)
]);
};
const renderTaskRows = ($xeTable, tableData) => {
const tableProps = $xeTable.props;
const { treeConfig } = tableProps;
const tableReactData = $xeTable.reactData;
const { treeExpandedFlag } = tableReactData;
const tableInternalData = $xeTable.internalData;
const { fullAllDataRowIdData, treeExpandedMaps } = tableInternalData;
const { computeTreeOpts } = $xeTable.getComputeMaps();
const treeOpts = computeTreeOpts.value;
const { transform } = treeOpts;
const childrenField = treeOpts.children || treeOpts.childrenField;
const { scrollYLoad } = ganttViewReactData;
const trVNs = [];
tableData.forEach((row, $rowIndex) => {
const rowid = $xeTable.getRowid(row);
const rowRest = fullAllDataRowIdData[rowid] || {};
let rowIndex = $rowIndex;
let _rowIndex = -1;
if (rowRest) {
rowIndex = rowRest.index;
_rowIndex = rowRest._index;
}
let isExpandTree = false;
let rowChildren = [];
if (treeConfig) {
rowChildren = row[childrenField];
isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid];
}
trVNs.push(renderTaskBar($xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex, rowChildren, isExpandTree));
// 如果是树形表格
if (treeConfig && isExpandTree && !scrollYLoad && !transform) {
trVNs.push(...renderTaskRows($xeTable, rowChildren));
}
});
return trVNs;
};
const renderVN = () => {
const $xeTable = ganttViewInternalData.xeTable;
const { slots: ganttSlots } = ganttContext;
const { dragLinkFromStore } = ganttReactData;
const { tableData } = ganttViewReactData;
const taskLinkOpts = computeTaskLinkOpts.value;
const taskBarOpts = computeTaskBarOpts.value;
const nowLineLeft = computeNowLineLeft.value;
const { isCurrent, isHover } = taskLinkOpts;
const { linkCreatable } = taskBarOpts;
const taskNowLineSlot = ganttSlots.taskNowLine || ganttSlots['task-now-line'];
return h('div', {
ref: refElem,
class: ['vxe-gantt-view--chart-wrapper', {
'is--cl-drag': dragLinkFromStore.rowid
}]
}, [
nowLineLeft > 0
? h('div', {
ref: refNowLineElem,
class: 'vxe-gantt-view--chart-now-line',
style: {
left: nowLineLeft + 'px'
}
}, taskNowLineSlot ? taskNowLineSlot({}) : [])
: renderEmptyElement$1($xeGantt),
$xeGantt.renderGanttTaskChartBefores
? h('div', {
ref: refChartBeforeWrapperElem,
class: ['vxe-gantt-view--chart-before-wrapper', {
'link--current': isCurrent,
'link--hover': isHover
}]
}, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskChartBefores() : [])
: renderEmptyElement$1($xeGantt),
h('div', {
ref: refTaskWrapperElem,
class: ['vxe-gantt-view--chart-task-wrapper', {
'link--current': isCurrent,
'link--create': linkCreatable
}]
}, $xeTable ? renderTaskRows($xeTable, tableData) : []),
$xeGantt.renderGanttTaskChartAfters
? h('div', {
ref: refChartAfterWrapperElem,
class: 'vxe-gantt-view--chart-after-wrapper'
}, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskChartAfters() : [])
: renderEmptyElement$1($xeGantt)
]);
};
onMounted(() => {
const { elemStore } = ganttViewInternalData;
const prefix = 'main-chart-';
elemStore[`${prefix}now-line`] = refNowLineElem;
elemStore[`${prefix}task-wrapper`] = refTaskWrapperElem;
elemStore[`${prefix}before-wrapper`] = refChartBeforeWrapperElem;
elemStore[`${prefix}after-wrapper`] = refChartAfterWrapperElem;
});
onUnmounted(() => {
const { elemStore } = ganttViewInternalData;
const prefix = 'main-chart-';
elemStore[`${prefix}now-line`] = null;
elemStore[`${prefix}task-wrapper`] = null;
elemStore[`${prefix}before-wrapper`] = null;
elemStore[`${prefix}after-wrapper`] = null;
});
return renderVN;
}
});
const sourceType$2 = 'gantt';
const viewType$1 = 'body';
var GanttViewBodyComponent = defineVxeComponent({
name: 'VxeGanttViewBody',
setup() {
const $xeGantt = inject('$xeGantt', {});
const $xeGanttView = inject('$xeGanttView', {});
const { computeTaskViewOpts, computeScaleUnit } = $xeGantt.getComputeMaps();
const { reactData, internalData } = $xeGanttView;
const refElem = ref();
const refBodyScroll = ref();
const refBodyTable = ref();
const refBodyXSpace = ref();
const refBodyYSpace = ref();
const renderColumn = ($xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex, column, $columnIndex) => {
const tableReactData = $xeTable.reactData;
const { resizeHeightFlag } = tableReactData;
const tableInternalData = $xeTable.internalData;
const { fullAllDataRowIdData, visibleColumn } = tableInternalData;
const { computeCellOpts, computeRowOpts, computeDefaultRowHeight, computeResizableOpts } = $xeTable.getComputeMaps();
const cellOpts = computeCellOpts.value;
const rowOpts = computeRowOpts.value;
const defaultRowHeight = computeDefaultRowHeight.value;
const resizableOpts = computeResizableOpts.value;
const { isAllRowDrag } = resizableOpts;
const { headerGroups } = reactData;
const { todayDateMaps } = internalData;
const taskViewOpts = computeTaskViewOpts.value;
const { showNowLine, viewStyle } = taskViewOpts;
const scaleUnit = computeScaleUnit.value;
const { scaleItem } = headerGroups[headerGroups.length - 1] || {};
const { field, dateObj } = column;
const { cellClassName, cellStyle } = viewStyle || {};
const todayValue = showNowLine && scaleItem ? todayDateMaps[scaleItem.type] : null;
const rowRest = fullAllDataRowIdData[rowid] || {};
const cellHeight = resizeHeightFlag ? getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight) : 0;
const tdVNs = [];
if (isAllRowDrag && rowOpts.resizable) {
const cellParams = {
$table: $xeTable,
$grid: null,
$gantt: $xeGantt,
seq: -1,
rowid,
row,
rowIndex,
$rowIndex,
_rowIndex,
column: visibleColumn[0],
columnIndex: 0,
$columnIndex: 0,
_columnIndex: 0,
fixed: '',
source: sourceType$2,
type: viewType$1,
isHidden: false,
isEdit: false,
level: -1,
// 已废弃属性
visibleData: [],
data: [],
items: []
};
tdVNs.push(h('div', {
class: 'vxe-gantt-view-cell--row-resizable',
onMousedown: (evnt) => $xeTable.handleRowResizeMousedownEvent(evnt, cellParams),
onDblclick: (evnt) => $xeTable.handleRowResizeDblclickEvent(evnt, cellParams)
}));
}
const ctParams = {
$gantt: $xeGantt,
source: sourceType$2,
type: viewType$1,
scaleType: scaleUnit,
dateObj,
row,
column,
$rowIndex,
rowIndex,
_rowIndex
};
return h('td', {
key: cellClassName || cellStyle ? field : $columnIndex,
class: [
'vxe-gantt-view--body-column',
{
'is--now': showNowLine && todayValue === field
},
getClass(cellClassName, ctParams)
],
style: cellStyle
? Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle(ctParams) : cellStyle, {
height: `${cellHeight}px`
})
: {
height: `${cellHeight}px`
},
onClick(evnt) {
$xeGantt.handleTaskCellClickEvent(evnt, { row, column });
},
onDblclick(evnt) {
$xeGantt.handleTaskCellDblclickEvent(evnt, { row, column });
},
onContextmenu(evnt) {
$xeGantt.handleTaskBodyContextmenuEvent(evnt, ctParams);
}
}, tdVNs);
};
const renderRows = ($xeTable, tableData) => {
const tableProps = $xeTable.props;
const { treeConfig, stripe, highlightHoverRow, editConfig } = tableProps;
const tableReactData = $xeTable.reactData;
const { treeExpandedFlag, selectRadioRow, pendingRowFlag, isRowGroupStatus } = tableReactData;
const tableInternalData = $xeTable.internalData;
const { fullAllDataRowIdData, treeExpandedMaps, pendingRowMaps } = tableInternalData;
const { computeRadioOpts, computeCheckboxOpts, computeTreeOpts, computeRowOpts } = $xeTable.getComputeMaps();
const radioOpts = computeRadioOpts.value;
const checkboxOpts = computeCheckboxOpts.value;
const rowOpts = computeRowOpts.value;
const treeOpts = computeTreeOpts.value;
const { transform } = treeOpts;
const childrenField = treeOpts.children || treeOpts.childrenField;
const scaleUnit = computeScaleUnit.value;
const taskViewOpts = computeTaskViewOpts.value;
const { viewStyle } = taskViewOpts;
const { rowClassName, rowStyle, cellClassName, cellStyle } = viewStyle || {};
const { tableColumn, scrollYLoad } = reactData;
const trVNs = [];
tableData.forEach((row, $rowIndex) => {
const rowid = $xeTable.getRowid(row);
const rowRest = fullAllDataRowIdData[rowid] || {};
const trOns = {};
let rowIndex = $rowIndex;
let _rowIndex = -1;
if (rowRest) {
rowIndex = rowRest.index;
_rowIndex = rowRest._index;
}
// 是否新增行
let isNewRow = false;
if (editConfig) {
isNewRow = $xeTable.isInsertByRow(row);
}
// 当前行事件
if (rowOpts.isHover || highlightHoverRow) {
trOns.onMouseenter = (evnt) => {
$xeTable.triggerHoverEvent(evnt, { row, rowIndex });
};
trOns.onMouseleave = () => {
$xeTable.clearHoverRow();
};
}
// 拖拽行事件
if (rowOpts.drag && !isRowGroupStatus && (!treeConfig || transform)) {
trOns.onDragstart = $xeTable.handleRowDragDragstartEvent;
trOns.onDragend = $xeTable.handleRowDragDragendEvent;
trOns.onDragover = $xeTable.handleRowDragDragoverEvent;
}
const rowParams = {
$gantt: $xeGantt,
source: sourceType$2,
type: viewType$1,
scaleType: scaleUnit,
row,
rowIndex,
$rowIndex,
_rowIndex
};
trVNs.push(h('tr', Object.assign({ key: rowClassName || rowStyle || cellClassName || cellStyle ? rowid : $rowIndex, class: [
'vxe-gantt-view--body-row',
{
'row--st