vxe-gantt
Version:
A vue based gantt component
1,037 lines • 91.2 kB
JavaScript
import { h, ref, computed, provide, reactive, onUnmounted, watch, nextTick, onMounted } from 'vue';
import { defineVxeComponent } from '../../ui/src/comp';
import XEUtils from 'xe-utils';
import { getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
import { getOffsetHeight, getPaddingTopBottomSize, getDomNode, toCssUnit, addClass, removeClass } from '../../ui/src/dom';
import { getSlotVNs } from '../../ui/src/vn';
import { VxeUI } from '@vxe-ui/core';
import { ganttEmits } from './emits';
import { tableEmits } from './table-emits';
import { warnLog, errLog } from '../../ui/src/log';
import GanttViewComponent from './gantt-view';
import { VxeTable as VxeTableComponent } from 'vxe-table';
const { getConfig, getIcon, getI18n, commands, hooks, useFns, createEvent, globalEvents, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI;
const tableProps = VxeTableComponent.props;
const tableComponentPropKeys = Object.keys(tableProps);
const tableComponentMethodKeys = ['clearAll', 'syncData', 'updateData', 'loadData', 'reloadData', 'reloadRow', 'loadColumn', 'reloadColumn', 'getRowNode', 'getColumnNode', 'getRowIndex', 'getVTRowIndex', 'getVMRowIndex', 'getColumnIndex', 'getVTColumnIndex', 'getVMColumnIndex', 'setRow', 'createData', 'createRow', 'revertData', 'clearData', 'isRemoveByRow', 'isInsertByRow', 'isUpdateByRow', 'getColumns', 'getColumnById', 'getColumnByField', 'getTableColumn', 'getFullColumns', 'getData', 'getCheckboxRecords', 'getParentRow', 'getTreeRowChildren', 'getTreeParentRow', 'getRowSeq', 'getRowById', 'getRowid', 'getTableData', 'getFullData', 'setColumnFixed', 'clearColumnFixed', 'setColumnWidth', 'getColumnWidth', 'recalcRowHeight', 'setRowHeightConf', 'getRowHeightConf', 'setRowHeight', 'getRowHeight', 'hideColumn', 'showColumn', 'resetColumn', 'refreshColumn', 'refreshScroll', 'recalculate', 'closeTooltip', 'isAllCheckboxChecked', 'isAllCheckboxIndeterminate', 'getCheckboxIndeterminateRecords', 'setCheckboxRow', 'setCheckboxRowKey', 'isCheckedByCheckboxRow', 'isCheckedByCheckboxRowKey', 'isIndeterminateByCheckboxRow', 'isIndeterminateByCheckboxRowKey', 'toggleCheckboxRow', 'setAllCheckboxRow', 'getRadioReserveRecord', 'clearRadioReserve', 'getCheckboxReserveRecords', 'clearCheckboxReserve', 'toggleAllCheckboxRow', 'clearCheckboxRow', 'setCurrentRow', 'isCheckedByRadioRow', 'isCheckedByRadioRowKey', 'setRadioRow', 'setRadioRowKey', 'clearCurrentRow', 'clearRadioRow', 'getCurrentRecord', 'getRadioRecord', 'getCurrentColumn', 'setCurrentColumn', 'clearCurrentColumn', 'setPendingRow', 'togglePendingRow', 'hasPendingByRow', 'isPendingByRow', 'getPendingRecords', 'clearPendingRow', 'setFilterByEvent', 'sort', 'setSort', 'setSortByEvent', 'clearSort', 'clearSortByEvent', 'isSort', 'getSortColumns', 'closeFilter', 'isFilter', 'clearFilterByEvent', 'isActiveFilterByColumn', 'isRowExpandLoaded', 'clearRowExpandLoaded', 'reloadRowExpand', 'reloadRowExpand', 'toggleRowExpand', 'setAllRowExpand', 'setRowExpand', 'isExpandByRow', 'isRowExpandByRow', 'clearRowExpand', 'clearRowExpandReserve', 'getRowExpandRecords', 'getTreeExpandRecords', 'isTreeExpandLoaded', 'clearTreeExpandLoaded', 'reloadTreeExpand', 'reloadTreeChilds', 'toggleTreeExpand', 'setAllTreeExpand', 'setTreeExpand', 'isTreeExpandByRow', 'clearTreeExpand', 'clearTreeExpandReserve', 'getScroll', 'scrollTo', 'scrollToRow', 'scrollToColumn', 'clearScroll', 'updateFooter', 'updateStatus', 'setMergeCells', 'removeInsertRow', 'removeMergeCells', 'getMergeCells', 'clearMergeCells', 'setMergeFooterItems', 'removeMergeFooterItems', 'getMergeFooterItems', 'clearMergeFooterItems', 'getCustomStoreData', 'setRowGroupExpand', 'setAllRowGroupExpand', 'clearRowGroupExpand', 'isRowGroupExpandByRow', 'isRowGroupRecord', 'isAggregateRecord', 'isAggregateExpandByRow', 'getAggregateContentByRow', 'getAggregateRowChildren', 'setRowGroups', 'clearRowGroups', 'openTooltip', 'moveColumnTo', 'moveRowTo', 'getCellLabel', 'getCellElement', 'focus', 'blur', 'connect'];
const defaultLayouts = [['Form'], ['Toolbar', 'Top', 'Gantt', 'Bottom', 'Pager']];
function createInternalData() {
return {
resizeTableWidth: 0
};
}
const viewTypeLevelMaps = {
year: 19,
quarter: 17,
month: 15,
week: 13,
day: 11,
date: 9,
hour: 7,
minute: 5,
second: 3
};
function getViewTypeLevel(type) {
return viewTypeLevelMaps[type || 'date'] || viewTypeLevelMaps.date;
}
export default defineVxeComponent({
name: 'VxeGantt',
props: Object.assign(Object.assign({}, tableProps), { columns: Array, pagerConfig: Object, proxyConfig: Object, toolbarConfig: Object, formConfig: Object, zoomConfig: Object, layouts: Array, taskConfig: Object, taskViewScaleConfs: Object, taskViewConfig: Object, taskBarConfig: Object, taskSplitConfig: Object, size: {
type: String,
default: () => getConfig().gantt.size || getConfig().size
} }),
emits: ganttEmits,
setup(props, context) {
var _a;
const { slots, emit } = context;
const xID = XEUtils.uniqueId();
// 使用已安装的组件，如果未安装则不渲染
const VxeUIFormComponent = VxeUI.getComponent('VxeForm');
const VxeUIPagerComponent = VxeUI.getComponent('VxePager');
const VxeTableComponent = VxeUI.getComponent('VxeTable');
const VxeToolbarComponent = VxeUI.getComponent('VxeToolbar');
const { computeSize } = useFns.useSize(props);
const reactData = reactive({
tableLoading: false,
proxyInited: false,
isZMax: false,
tableData: [],
filterData: [],
formData: {},
sortData: [],
tZindex: 0,
tablePage: {
total: 0,
pageSize: ((_a = getConfig().pager) === null || _a === void 0 ? void 0 : _a.pageSize) || 10,
currentPage: 1
},
showLeftView: true,
showRightView: true,
taskScaleList: []
});
const internalData = createInternalData();
const refElem = ref();
const refTable = ref();
const refForm = ref();
const refToolbar = ref();
const refPager = ref();
const refGanttContainerElem = ref();
const refClassifyWrapperElem = ref();
const refGanttView = ref();
const refFormWrapper = ref();
const refToolbarWrapper = ref();
const refTopWrapper = ref();
const refBottomWrapper = ref();
const refPagerWrapper = ref();
const refTableWrapper = ref();
const refGanttWrapper = ref();
const refResizableSplitTip = ref();
const extendTableMethods = (methodKeys) => {
const funcs = {};
methodKeys.forEach(name => {
funcs[name] = (...args) => {
const $xeTable = refTable.value;
if ($xeTable && $xeTable[name]) {
return $xeTable[name](...args);
}
};
});
return funcs;
};
const ganttExtendTableMethods = extendTableMethods(tableComponentMethodKeys);
tableComponentMethodKeys.forEach(name => {
ganttExtendTableMethods[name] = (...args) => {
const $xeTable = refTable.value;
if ($xeTable && $xeTable[name]) {
return $xeTable && $xeTable[name](...args);
}
};
});
const computeProxyOpts = computed(() => {
return XEUtils.merge({}, XEUtils.clone(getConfig().gantt.proxyConfig, true), props.proxyConfig);
});
const computeIsRespMsg = computed(() => {
const proxyOpts = computeProxyOpts.value;
return !!(XEUtils.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg);
});
const computeIsActiveMsg = computed(() => {
const proxyOpts = computeProxyOpts.value;
return XEUtils.isBoolean(proxyOpts.showActionMsg) ? proxyOpts.showActionMsg : !!proxyOpts.showActiveMsg;
});
const computePagerOpts = computed(() => {
return Object.assign({}, getConfig().gantt.pagerConfig, props.pagerConfig);
});
const computeFormOpts = computed(() => {
return Object.assign({}, getConfig().gantt.formConfig, props.formConfig);
});
const computeToolbarOpts = computed(() => {
return Object.assign({}, getConfig().gantt.toolbarConfig, props.toolbarConfig);
});
const computeZoomOpts = computed(() => {
return Object.assign({}, getConfig().gantt.zoomConfig, props.zoomConfig);
});
const computeTaskOpts = computed(() => {
return Object.assign({}, getConfig().gantt.taskConfig, props.taskConfig);
});
const computeTaskViewScaleMapsOpts = computed(() => {
return XEUtils.merge({}, getConfig().gantt.taskViewScaleConfs, props.taskViewScaleConfs);
});
const computeTaskViewOpts = computed(() => {
return Object.assign({}, getConfig().gantt.taskViewConfig, props.taskViewConfig);
});
const computeTaskBarOpts = computed(() => {
return Object.assign({}, getConfig().gantt.taskBarConfig, props.taskBarConfig);
});
const computeTaskSplitOpts = computed(() => {
return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig);
});
const computeTaskScaleConfs = computed(() => {
const taskViewOpts = computeTaskViewOpts.value;
const { scales } = taskViewOpts;
return scales;
});
const computeTitleField = computed(() => {
const taskOpts = computeTaskOpts.value;
return taskOpts.titleField || 'title';
});
const computeStartField = computed(() => {
const taskOpts = computeTaskOpts.value;
return taskOpts.startField || 'start';
});
const computeEndField = computed(() => {
const taskOpts = computeTaskOpts.value;
return taskOpts.endField || 'end';
});
const computeProgressField = computed(() => {
const taskOpts = computeTaskOpts.value;
return taskOpts.progressField || 'progress';
});
const computeScrollbarOpts = computed(() => {
return Object.assign({}, getConfig().gantt.scrollbarConfig, props.scrollbarConfig);
});
const computeScrollbarXToTop = computed(() => {
const scrollbarOpts = computeScrollbarOpts.value;
return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top');
});
const computeScrollbarYToLeft = computed(() => {
const scrollbarOpts = computeScrollbarOpts.value;
return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left');
});
const computeStyles = computed(() => {
const { height, maxHeight } = props;
const { isZMax, tZindex } = reactData;
const taskViewOpts = computeTaskViewOpts.value;
const { tableStyle } = taskViewOpts;
const taskBarOpts = computeTaskBarOpts.value;
const { barStyle } = taskBarOpts;
const stys = {};
if (isZMax) {
stys.zIndex = tZindex;
}
else {
if (height) {
stys.height = height === 'auto' || height === '100%' ? '100%' : toCssUnit(height);
}
if (maxHeight) {
stys.maxHeight = maxHeight === 'auto' || maxHeight === '100%' ? '100%' : toCssUnit(maxHeight);
}
}
if (barStyle) {
const { bgColor, completedBgColor } = barStyle;
if (bgColor) {
stys['--vxe-ui-gantt-view-task-bar-background-color'] = bgColor;
}
if (completedBgColor) {
stys['--vxe-ui-gantt-view-task-bar-completed-background-color'] = completedBgColor;
}
}
if (tableStyle) {
const { width: defTbWidth } = tableStyle;
if (defTbWidth) {
stys['--vxe-ui-gantt-view-table-default-width'] = toCssUnit(defTbWidth);
}
}
return stys;
});
const computeTableExtendProps = computed(() => {
const rest = {};
tableComponentPropKeys.forEach((key) => {
rest[key] = props[key];
});
return rest;
});
const computeTableProps = computed(() => {
const { seqConfig, pagerConfig, editConfig, proxyConfig } = props;
const { isZMax, tablePage } = reactData;
const taskViewOpts = computeTaskViewOpts.value;
const { tableStyle } = taskViewOpts;
const tableExtendProps = computeTableExtendProps.value;
const proxyOpts = computeProxyOpts.value;
const pagerOpts = computePagerOpts.value;
const isLoading = computeIsLoading.value;
const tProps = Object.assign({}, tableExtendProps, {
// 不支持修改的属性
showOverflow: true,
showHeaderOverflow: true,
showFooterOverflow: true
});
if (tableStyle) {
const { border } = tableStyle;
if (!XEUtils.eqNull(border)) {
tProps.border = border;
}
}
if (isZMax) {
if (tableExtendProps.maxHeight) {
tProps.maxHeight = '100%';
}
else {
tProps.height = '100%';
}
}
if (proxyConfig && isEnableConf(proxyOpts)) {
tProps.loading = isLoading;
if (pagerConfig && proxyOpts.seq && isEnableConf(pagerOpts)) {
tProps.seqConfig = Object.assign({}, seqConfig, { startIndex: (tablePage.currentPage - 1) * tablePage.pageSize });
}
}
if (editConfig) {
tProps.editConfig = Object.assign({}, editConfig);
}
return tProps;
});
const computeCurrLayoutConf = computed(() => {
const { layouts } = props;
let confs = [];
if (layouts && layouts.length) {
confs = layouts;
}
else {
confs = getConfig().gantt.layouts || defaultLayouts;
}
let headKeys = [];
let bodyKeys = [];
let footKeys = [];
if (confs.length) {
if (XEUtils.isArray(confs[0])) {
headKeys = confs[0];
bodyKeys = (confs[1] || []);
footKeys = (confs[2] || []);
}
else {
bodyKeys = confs;
}
}
return {
headKeys,
bodyKeys,
footKeys
};
});
const computeCustomCurrentPageFlag = computed(() => {
const pagerOpts = computePagerOpts.value;
return pagerOpts.currentPage;
});
const computeCustomPageSizeFlag = computed(() => {
const pagerOpts = computePagerOpts.value;
return pagerOpts.pageSize;
});
const computeCustomTotalFlag = computed(() => {
const pagerOpts = computePagerOpts.value;
return pagerOpts.total;
});
const computePageCount = computed(() => {
const { tablePage } = reactData;
return Math.max(Math.ceil(tablePage.total / tablePage.pageSize), 1);
});
const computeIsLoading = computed(() => {
const { loading, proxyConfig } = props;
const { tableLoading } = reactData;
const proxyOpts = computeProxyOpts.value;
const { showLoading } = proxyOpts;
return loading || (tableLoading && showLoading && proxyConfig && isEnableConf(proxyOpts));
});
const computeTableBorder = computed(() => {
let { border } = props;
const taskViewOpts = computeTaskViewOpts.value;
const { viewStyle } = taskViewOpts;
if (viewStyle) {
if (!XEUtils.eqNull(viewStyle.border)) {
border = viewStyle.border;
}
}
if (border === true) {
return 'full';
}
if (border) {
return border;
}
return 'default';
});
const refMaps = {
refElem,
refTable,
refForm,
refToolbar,
refPager,
refGanttContainerElem,
refClassifyWrapperElem
};
const computeMaps = {
computeProxyOpts,
computePagerOpts,
computeFormOpts,
computeToolbarOpts,
computeZoomOpts,
computeTaskOpts,
computeTaskViewScaleMapsOpts,
computeTaskViewOpts,
computeTaskBarOpts,
computeTaskSplitOpts,
computeTaskScaleConfs,
computeTitleField,
computeStartField,
computeEndField,
computeProgressField,
computeScrollbarOpts,
computeScrollbarXToTop,
computeScrollbarYToLeft
};
const $xeGantt = {
xID,
props: props,
context,
reactData,
internalData,
getRefMaps: () => refMaps,
getComputeMaps: () => computeMaps
};
const handleTaskScaleConfig = () => {
const taskScaleConfs = computeTaskScaleConfs.value;
const taskViewScaleMapsOpts = computeTaskViewScaleMapsOpts.value;
const scaleConfs = [];
if (taskScaleConfs) {
const keyMaps = {};
taskScaleConfs.forEach(conf => {
const sConf = !conf || XEUtils.isString(conf) ? { type: conf } : conf;
const { type } = sConf;
if (!type || !viewTypeLevelMaps[type]) {
errLog('vxe.error.errProp', [`type=${type}`, XEUtils.keys(viewTypeLevelMaps).join(',')]);
return;
}
if (keyMaps[type]) {
errLog('vxe.error.repeatProp', ['type', type]);
return;
}
keyMaps[type] = true;
scaleConfs.push(Object.assign({}, type ? taskViewScaleMapsOpts[type] || {} : {}, sConf, {
level: getViewTypeLevel(type)
}));
});
}
if (!scaleConfs.length) {
scaleConfs.push({ type: 'month', level: viewTypeLevelMaps.month }, { type: 'date', level: viewTypeLevelMaps.date });
}
reactData.taskScaleList = XEUtils.orderBy(scaleConfs, { field: 'level', order: 'desc' });
};
const initToolbar = () => {
const toolbarOpts = computeToolbarOpts.value;
if (props.toolbarConfig && isEnableConf(toolbarOpts)) {
nextTick(() => {
const $xeTable = refTable.value;
const $xeToolbar = refToolbar.value;
if ($xeTable && $xeToolbar) {
$xeTable.connectToolbar($xeToolbar);
}
});
}
};
const initGanttView = () => {
const $xeTable = refTable.value;
const $ganttView = refGanttView.value;
if ($xeTable && $ganttView) {
$xeTable.handleConnectGanttView($ganttView);
}
};
const getFormData = () => {
const { proxyConfig } = props;
const { formData } = reactData;
const proxyOpts = computeProxyOpts.value;
const formOpts = computeFormOpts.value;
return proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data;
};
const initPages = (propKey) => {
const { tablePage } = reactData;
const { pagerConfig } = props;
const pagerOpts = computePagerOpts.value;
if (pagerConfig && isEnableConf(pagerOpts)) {
if (propKey) {
if (pagerOpts[propKey]) {
tablePage[propKey] = XEUtils.toNumber(pagerOpts[propKey]);
}
}
else {
const { currentPage, pageSize, total } = pagerOpts;
if (currentPage) {
tablePage.currentPage = currentPage;
}
if (pageSize) {
tablePage.pageSize = pageSize;
}
if (total) {
tablePage.total = total;
}
}
}
};
const triggerPendingEvent = (code) => {
const isActiveMsg = computeIsActiveMsg.value;
const $xeTable = refTable.value;
const selectRecords = $xeTable ? $xeTable.getCheckboxRecords() : [];
if (selectRecords.length) {
if ($xeTable) {
$xeTable.togglePendingRow(selectRecords);
}
$xeGantt.clearCheckboxRow();
}
else {
if (isActiveMsg) {
if (VxeUI.modal) {
VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.selectOneRecord'), status: 'warning' });
}
}
}
};
const getRespMsg = (rest, defaultMsg) => {
const proxyOpts = computeProxyOpts.value;
const resConfigs = proxyOpts.response || proxyOpts.props || {};
const messageProp = resConfigs.message;
const $xeTable = refTable.value;
let msg;
if (rest && messageProp) {
msg = XEUtils.isFunction(messageProp) ? messageProp({ data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, messageProp);
}
return msg || getI18n(defaultMsg);
};
const handleDeleteRow = (code, alertKey, callback) => {
const isActiveMsg = computeIsActiveMsg.value;
const selectRecords = $xeGantt.getCheckboxRecords();
if (isActiveMsg) {
if (selectRecords.length) {
if (VxeUI.modal) {
return VxeUI.modal.confirm({ id: `cfm_${code}`, content: getI18n(alertKey), escClosable: true }).then((type) => {
if (type === 'confirm') {
return callback();
}
});
}
}
else {
if (VxeUI.modal) {
VxeUI.modal.message({ id: `msg_${code}`, content: getI18n('vxe.grid.selectOneRecord'), status: 'warning' });
}
}
}
else {
if (selectRecords.length) {
callback();
}
}
return Promise.resolve();
};
const pageChangeEvent = (params) => {
const { proxyConfig } = props;
const { tablePage } = reactData;
const { $event, currentPage, pageSize } = params;
const proxyOpts = computeProxyOpts.value;
tablePage.currentPage = currentPage;
tablePage.pageSize = pageSize;
$xeGantt.dispatchEvent('page-change', params, $event);
if (proxyConfig && isEnableConf(proxyOpts)) {
$xeGantt.commitProxy('query').then((rest) => {
$xeGantt.dispatchEvent('proxy-query', rest, $event);
});
}
};
const handleSortEvent = (params) => {
const $xeTable = refTable.value;
const { proxyConfig } = props;
if (!$xeTable) {
return;
}
const { computeSortOpts } = $xeTable.getComputeMaps();
const proxyOpts = computeProxyOpts.value;
const sortOpts = computeSortOpts.value;
// 如果是服务端排序
if (sortOpts.remote) {
reactData.sortData = params.sortList;
if (proxyConfig && isEnableConf(proxyOpts)) {
reactData.tablePage.currentPage = 1;
$xeGantt.commitProxy('query').then((rest) => {
$xeGantt.dispatchEvent('proxy-query', rest, params.$event);
});
}
}
};
const sortChangeEvent = (params) => {
handleSortEvent(params);
$xeGantt.dispatchEvent('sort-change', params, params.$event);
};
const clearAllSortEvent = (params) => {
handleSortEvent(params);
$xeGantt.dispatchEvent('clear-all-sort', params, params.$event);
};
const handleFilterEvent = (params) => {
const $xeTable = refTable.value;
const { proxyConfig } = props;
if (!$xeTable) {
return;
}
const { computeFilterOpts } = $xeTable.getComputeMaps();
const proxyOpts = computeProxyOpts.value;
const filterOpts = computeFilterOpts.value;
// 如果是服务端过滤
if (filterOpts.remote) {
reactData.filterData = params.filterList;
if (proxyConfig && isEnableConf(proxyOpts)) {
reactData.tablePage.currentPage = 1;
$xeGantt.commitProxy('query').then((rest) => {
$xeGantt.dispatchEvent('proxy-query', rest, params.$event);
});
}
}
};
const filterChangeEvent = (params) => {
handleFilterEvent(params);
$xeGantt.dispatchEvent('filter-change', params, params.$event);
};
const clearAllFilterEvent = (params) => {
handleFilterEvent(params);
$xeGantt.dispatchEvent('clear-all-filter', params, params.$event);
};
const submitFormEvent = (params) => {
const { proxyConfig } = props;
const proxyOpts = computeProxyOpts.value;
if (reactData.tableLoading) {
return;
}
if (proxyConfig && isEnableConf(proxyOpts)) {
$xeGantt.commitProxy('reload').then((rest) => {
$xeGantt.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isReload: true }), params.$event);
});
}
$xeGantt.dispatchEvent('form-submit', params, params.$event);
};
const resetFormEvent = (params) => {
const $xeTable = refTable.value;
const { proxyConfig } = props;
const { $event } = params;
const proxyOpts = computeProxyOpts.value;
if (proxyConfig && isEnableConf(proxyOpts)) {
if ($xeTable) {
$xeTable.clearScroll();
}
$xeGantt.commitProxy('reload').then((rest) => {
$xeGantt.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isReload: true }), $event);
});
}
$xeGantt.dispatchEvent('form-reset', params, $event);
};
const submitInvalidEvent = (params) => {
$xeGantt.dispatchEvent('form-submit-invalid', params, params.$event);
};
const collapseEvent = (params) => {
const { $event } = params;
$xeGantt.dispatchEvent('form-toggle-collapse', params, $event);
$xeGantt.dispatchEvent('form-collapse', params, $event);
};
const handleZoom = (isMax) => {
const { isZMax } = reactData;
if (isMax ? !isZMax : isZMax) {
reactData.isZMax = !isZMax;
if (reactData.tZindex < getLastZIndex()) {
reactData.tZindex = nextZIndex();
}
}
return nextTick()
.then(() => $xeGantt.recalculate(true))
.then(() => {
setTimeout(() => $xeGantt.recalculate(true), 15);
return reactData.isZMax;
});
};
const getFuncSlot = (optSlots, slotKey) => {
const funcSlot = optSlots[slotKey];
if (funcSlot) {
if (XEUtils.isString(funcSlot)) {
if (slots[funcSlot]) {
return slots[funcSlot];
}
else {
errLog('vxe.error.notSlot', [funcSlot]);
}
}
else {
return funcSlot;
}
}
return null;
};
const getConfigSlot = (slotConfigs) => {
const slotConf = {};
XEUtils.objectMap(slotConfigs, (slotFunc, slotKey) => {
if (slotFunc) {
if (XEUtils.isString(slotFunc)) {
if (slots[slotFunc]) {
slotConf[slotKey] = slots[slotFunc];
}
else {
errLog('vxe.error.notSlot', [slotFunc]);
}
}
else {
slotConf[slotKey] = slotFunc;
}
}
});
return slotConf;
};
const dragSplitEvent = (evnt) => {
const el = refElem.value;
if (!el) {
return;
}
const ganttContainerEl = refGanttContainerElem.value;
if (!ganttContainerEl) {
return;
}
const tableWrapperEl = refTableWrapper.value;
if (!tableWrapperEl) {
return;
}
const rsSplitLineEl = refResizableSplitTip.value;
if (!rsSplitLineEl) {
return;
}
const taskViewOpts = computeTaskViewOpts.value;
const containerRect = ganttContainerEl.getBoundingClientRect();
const rsSplitTipEl = rsSplitLineEl.children[0];
const disX = evnt.clientX;
const ganttWidth = ganttContainerEl.clientWidth;
const tableWidth = tableWrapperEl.clientWidth;
const tableMinWidth = (taskViewOpts.tableStyle && XEUtils.toNumber(taskViewOpts.tableStyle.minWidth)) || 80;
let targetTableWidth = tableWidth;
let offsetLeft = -1;
addClass(el, 'is--split-drag');
const handleReStyle = (evnt) => {
const rsNumLeftEl = rsSplitTipEl.children[0];
const rsNumRightEl = rsSplitTipEl.children[1];
let tipHeight = 0;
if (rsNumLeftEl) {
if (offsetLeft < 0) {
rsNumLeftEl.textContent = `${targetTableWidth}px`;
rsNumLeftEl.style.display = 'block';
tipHeight = rsNumLeftEl.offsetHeight;
}
else {
rsNumLeftEl.style.display = 'none';
}
}
if (rsNumRightEl) {
if (offsetLeft < 0) {
rsNumRightEl.style.display = 'none';
}
else {
rsNumRightEl.textContent = `${Math.floor(containerRect.width - targetTableWidth)}px`;
rsNumRightEl.style.display = 'block';
tipHeight = rsNumRightEl.offsetHeight;
}
}
const tipTop = evnt.clientY - containerRect.top - tipHeight / 2;
rsSplitLineEl.style.left = `${targetTableWidth}px`;
rsSplitTipEl.style.top = `${Math.min(containerRect.height - tipHeight - 1, Math.max(1, tipTop))}px`;
};
document.onmousemove = (evnt) => {
evnt.preventDefault();
offsetLeft = (evnt.clientX - disX);
targetTableWidth = Math.min(ganttWidth - 80, Math.max(tableMinWidth, tableWidth + offsetLeft));
handleReStyle(evnt);
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
rsSplitLineEl.style.display = '';
tableWrapperEl.style.width = `${targetTableWidth}px`;
removeClass(el, 'is--split-drag');
const $xeTable = refTable.value;
if ($xeTable) {
$xeTable.recalculate(true);
}
};
rsSplitLineEl.style.display = 'block';
handleReStyle(evnt);
};
const handleSplitLeftViewEvent = () => {
reactData.showLeftView = !reactData.showLeftView;
};
const handleSplitRightViewEvent = () => {
reactData.showRightView = !reactData.showRightView;
};
const tableCompEvents = {};
tableEmits.forEach(name => {
const type = XEUtils.camelCase(`on-${name}`);
tableCompEvents[type] = (...args) => emit(name, ...args);
});
const getDefaultFormData = () => {
const formOpts = computeFormOpts.value;
if (formOpts.items) {
const fData = {};
formOpts.items.forEach(item => {
const { field, itemRender } = item;
if (field) {
let itemValue = null;
if (itemRender) {
const { defaultValue } = itemRender;
if (XEUtils.isFunction(defaultValue)) {
itemValue = defaultValue({ item });
}
else if (!XEUtils.isUndefined(defaultValue)) {
itemValue = defaultValue;
}
}
fData[field] = itemValue;
}
});
return fData;
}
return {};
};
const initProxy = () => {
const { proxyConfig, formConfig } = props;
const { proxyInited } = reactData;
const proxyOpts = computeProxyOpts.value;
const formOpts = computeFormOpts.value;
if (proxyConfig && isEnableConf(proxyOpts)) {
if (formConfig && isEnableConf(formOpts) && proxyOpts.form && formOpts.items) {
reactData.formData = getDefaultFormData();
}
if (!proxyInited) {
reactData.proxyInited = true;
if (proxyOpts.autoLoad !== false) {
nextTick().then(() => $xeGantt.commitProxy('initial')).then((rest) => {
dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isInited: true }), new Event('initial'));
});
}
}
}
};
const handleGlobalKeydownEvent = (evnt) => {
const zoomOpts = computeZoomOpts.value;
const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
if (isEsc && reactData.isZMax && zoomOpts.escRestore !== false) {
$xeGantt.triggerZoomEvent(evnt);
}
};
const dispatchEvent = (type, params, evnt) => {
emit(type, createEvent(evnt, { $grid: null, $gantt: $xeGantt }, params));
};
const ganttMethods = {
dispatchEvent,
getEl() {
return refElem.value;
},
/**
* 提交指令，支持 code 或 button
* @param {String/Object} code 字符串或对象
*/
commitProxy(proxyTarget, ...args) {
const { proxyConfig, toolbarConfig, pagerConfig, editRules, validConfig } = props;
const { tablePage } = reactData;
const isActiveMsg = computeIsActiveMsg.value;
const isRespMsg = computeIsRespMsg.value;
const proxyOpts = computeProxyOpts.value;
const pagerOpts = computePagerOpts.value;
const toolbarOpts = computeToolbarOpts.value;
const { beforeQuery, afterQuery, beforeDelete, afterDelete, beforeSave, afterSave, ajax = {} } = proxyOpts;
const resConfigs = proxyOpts.response || proxyOpts.props || {};
const $xeTable = refTable.value;
if (!$xeTable) {
return nextTick();
}
let formData = getFormData();
let button = null;
let code = null;
if (XEUtils.isString(proxyTarget)) {
const { buttons } = toolbarOpts;
const matchObj = toolbarConfig && isEnableConf(toolbarOpts) && buttons ? XEUtils.findTree(buttons, (item) => item.code === proxyTarget, { children: 'dropdowns' }) : null;
button = matchObj ? matchObj.item : null;
code = proxyTarget;
}
else {
button = proxyTarget;
code = button.code;
}
const btnParams = button ? button.params : null;
switch (code) {
case 'insert':
return $xeTable.insert({});
case 'insert_edit':
return $xeTable.insert({}).then(({ row }) => $xeTable.setEditRow(row, true));
// 已废弃
case 'insert_actived':
return $xeTable.insert({}).then(({ row }) => $xeTable.setEditRow(row, true));
// 已废弃
case 'mark_cancel':
triggerPendingEvent(code);
break;
case 'remove':
return handleDeleteRow(code, 'vxe.grid.removeSelectRecord', () => $xeTable.removeCheckboxRow());
case 'import':
$xeTable.importData(btnParams);
break;
case 'open_import':
$xeTable.openImport(btnParams);
break;
case 'export':
$xeTable.exportData(btnParams);
break;
case 'open_export':
$xeTable.openExport(btnParams);
break;
case 'reset_custom':
return $xeTable.resetCustom(true);
case 'initial':
case 'reload':
case 'query': {
const ajaxMethods = ajax.query;
const querySuccessMethods = ajax.querySuccess;
const queryErrorMethods = ajax.queryError;
if (ajaxMethods) {
const isInited = code === 'initial';
const isReload = code === 'reload';
if (!isInited && reactData.tableLoading) {
return nextTick();
}
let sortList = [];
let filterList = [];
let pageParams = {};
if (pagerConfig) {
if (isInited || isReload) {
// 重置分页
tablePage.currentPage = 1;
}
if (isEnableConf(pagerOpts)) {
pageParams = Object.assign({}, tablePage);
}
}
if (isInited) {
// 重置代理表单数据
if (proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form) {
formData = getDefaultFormData();
reactData.formData = formData;
}
if ($xeTable) {
const tableInternalData = $xeTable.internalData;
const { tableFullColumn, fullColumnFieldData } = tableInternalData;
const { computeSortOpts } = $xeTable.getComputeMaps();
const sortOpts = computeSortOpts.value;
let defaultSort = sortOpts.defaultSort;
tableFullColumn.forEach((column) => {
column.order = null;
});
// 如果使用默认排序
if (defaultSort) {
if (!XEUtils.isArray(defaultSort)) {
defaultSort = [defaultSort];
}
sortList = defaultSort.map((item) => {
const { field, order } = item;
const colRest = fullColumnFieldData[field];
if (colRest) {
const column = colRest.column;
if (column) {
column.order = order;
}
}
return {
field,
property: field,
order
};
});
}
filterList = $xeTable.getCheckedFilters();
}
}
else {
if ($xeTable) {
if (isReload) {
$xeTable.clearAll();
}
else {
sortList = $xeTable.getSortColumns();
filterList = $xeTable.getCheckedFilters();
}
}
}
const commitParams = {
$table: $xeTable,
$grid: null,
$gantt: $xeGantt,
code,
button,
isInited,
isReload,
page: pageParams,
sort: sortList.length ? sortList[0] : {},
sorts: sortList,
filters: filterList,
form: formData,
options: ajaxMethods
};
reactData.sortData = sortList;
reactData.filterData = filterList;
reactData.tableLoading = true;
return Promise.resolve((beforeQuery || ajaxMethods)(commitParams, ...args))
.then(rest => {
let tableData = [];
reactData.tableLoading = false;
if (rest) {
if (pagerConfig && isEnableConf(pagerOpts)) {
const totalProp = resConfigs.total;
const total = (XEUtils.isFunction(totalProp) ? totalProp({ data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, totalProp || 'page.total')) || 0;
tablePage.total = XEUtils.toNumber(total);
const resultProp = resConfigs.result;
tableData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, resultProp || 'result')) || [];
// 检验当前页码，不能超出当前最大页数
const pageCount = Math.max(Math.ceil(total / tablePage.pageSize), 1);
if (tablePage.currentPage > pageCount) {
tablePage.currentPage = pageCount;
}
}
else {
const listProp = resConfigs.list;
tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, listProp)) : rest) || [];
}
}
if ($xeTable) {
$xeTable.loadData(tableData);
}
else {
nextTick(() => {
if ($xeTable) {
$xeTable.loadData(tableData);
}
});
}
if (afterQuery) {
afterQuery(commitParams, ...args);
}
if (querySuccessMethods) {
querySuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
}
return { status: true };
}).catch((rest) => {
reactData.tableLoading = false;
if (queryErrorMethods) {
queryErrorMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
}
return { status: false };
});
}
else {
errLog('vxe.error.notFunc', ['proxy-config.ajax.query']);
}
break;
}
case 'delete': {
const ajaxMethods = ajax.delete;
const deleteSuccessMethods = ajax.deleteSuccess;
const deleteErrorMethods = ajax.deleteError;
if (ajaxMethods) {
const selectRecords = $xeGantt.getCheckboxRecords();
const removeRecords = selectRecords.filter(row => !$xeTable.isInsertByRow(row));
const body = { removeRecords };
const commitParams = {
$table: $xeTable,
$grid: null,
$gantt: $xeGantt,
code,
button,
body,
form: formData,
options: ajaxMethods
};
if (selectRecords.length) {
return handleDeleteRow(code, 'vxe.grid.deleteSelectRecord', () => {
if (!removeRecords.length) {
return $xeTable.remove(selectRecords);
}
reactData.tableLoading = true;
return Promise.resolve((beforeDelete || ajaxMethods)(commitParams, ...args))
.then(rest => {
reactData.tableLoading = false;
$xeTable.setPendingRow(removeRecords, false);
if (isRespMsg) {
if (VxeUI.modal) {
VxeUI.m