vxe-gantt
Version:
A vue based gantt component
339 lines (338 loc) • 11.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _comp = require("../../ui/src/comp");
var _util = require("./util");
var _utils = require("../../ui/src/utils");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ganttChart = _interopRequireDefault(require("./gantt-chart"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const sourceType = 'gantt';
const viewType = 'body';
var _default = exports.default = (0, _comp.defineVxeComponent)({
name: 'VxeGanttViewBody',
setup() {
const $xeGantt = (0, _vue.inject)('$xeGantt', {});
const $xeGanttView = (0, _vue.inject)('$xeGanttView', {});
const {
computeTaskViewOpts,
computeScaleUnit
} = $xeGantt.getComputeMaps();
const {
reactData,
internalData
} = $xeGanttView;
const refElem = (0, _vue.ref)();
const refBodyScroll = (0, _vue.ref)();
const refBodyTable = (0, _vue.ref)();
const refBodyXSpace = (0, _vue.ref)();
const refBodyYSpace = (0, _vue.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 ? (0, _util.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,
type: viewType,
isHidden: false,
isEdit: false,
level: -1,
// 已废弃属性
visibleData: [],
data: [],
items: []
};
tdVNs.push((0, _vue.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,
type: viewType,
scaleType: scaleUnit,
dateObj,
row,
column,
$rowIndex,
rowIndex,
_rowIndex
};
return (0, _vue.h)('td', {
key: cellClassName || cellStyle ? field : $columnIndex,
class: ['vxe-gantt-view--body-column', {
'is--now': showNowLine && todayValue === field
}, (0, _utils.getClass)(cellClassName, ctParams)],
style: cellStyle ? Object.assign({}, _xeUtils.default.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,
type: viewType,
scaleType: scaleUnit,
row,
rowIndex,
$rowIndex,
_rowIndex
};
trVNs.push((0, _vue.h)('tr', Object.assign({
key: rowClassName || rowStyle || cellClassName || cellStyle ? rowid : $rowIndex,
class: ['vxe-gantt-view--body-row', {
'row--stripe': stripe && (_rowIndex + 1) % 2 === 0,
'is--new': isNewRow,
'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid]
}, (0, _utils.getClass)(rowClassName, rowParams)],
rowid,
style: rowStyle ? _xeUtils.default.isFunction(rowStyle) ? rowStyle(rowParams) || undefined : rowStyle : undefined
}, trOns), tableColumn.map((column, $columnIndex) => renderColumn($xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex, column, $columnIndex))));
let isExpandTree = false;
let rowChildren = [];
if (treeConfig && !scrollYLoad && !transform) {
rowChildren = row[childrenField];
isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid];
}
// 如果是树形表格
if (isExpandTree) {
trVNs.push(...renderRows($xeTable, rowChildren));
}
});
return trVNs;
};
const renderVN = () => {
const $xeTable = $xeGanttView.internalData.xeTable;
const {
tableData,
tableColumn,
viewCellWidth
} = reactData;
return (0, _vue.h)('div', {
ref: refElem,
class: 'vxe-gantt-view--body-wrapper'
}, [(0, _vue.h)('div', {
ref: refBodyScroll,
class: 'vxe-gantt-view--body-inner-wrapper',
onScroll: $xeGanttView.triggerBodyScrollEvent,
onContextmenu(evnt) {
$xeGantt.handleTaskBodyContextmenuEvent(evnt, {
source: sourceType,
type: viewType,
rowIndex: -1,
$rowIndex: -1,
_rowIndex: -1
});
}
}, [(0, _vue.h)('div', {
ref: refBodyXSpace,
class: 'vxe-body--x-space'
}), (0, _vue.h)('div', {
ref: refBodyYSpace,
class: 'vxe-body--y-space'
}), (0, _vue.h)('table', {
ref: refBodyTable,
class: 'vxe-gantt-view--body-table'
}, [(0, _vue.h)('colgroup', {}, tableColumn.map((column, cIndex) => {
return (0, _vue.h)('col', {
key: cIndex,
style: {
width: `${viewCellWidth}px`
}
});
})), (0, _vue.h)('tbody', {}, $xeTable ? renderRows($xeTable, tableData) : [])]), (0, _vue.h)(_ganttChart.default)])]);
};
(0, _vue.onMounted)(() => {
const {
elemStore
} = internalData;
const prefix = 'main-body-';
elemStore[`${prefix}wrapper`] = refElem;
elemStore[`${prefix}scroll`] = refBodyScroll;
elemStore[`${prefix}table`] = refBodyTable;
elemStore[`${prefix}xSpace`] = refBodyXSpace;
elemStore[`${prefix}ySpace`] = refBodyYSpace;
});
(0, _vue.onUnmounted)(() => {
const {
elemStore
} = internalData;
const prefix = 'main-body-';
elemStore[`${prefix}wrapper`] = null;
elemStore[`${prefix}scroll`] = null;
elemStore[`${prefix}table`] = null;
elemStore[`${prefix}xSpace`] = null;
elemStore[`${prefix}ySpace`] = null;
});
return renderVN;
}
});