vxe-gantt 0.0.2 → 4.0.0-beta.0

package/es/gantt/src/gantt.js

@@ -1,58 +1,1743 @@
-import { ref, h, reactive, onUnmounted } from 'vue';
+import { h, ref, computed, provide, reactive, onUnmounted, watch, nextTick, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
-import { getConfig, createEvent } from '../../ui';
 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 { VxeUI } from '../../ui';
+import { ganttProps } from './props';
+import { ganttEmits } from './emits';
+import { tableEmits } from './table-emits';
+import { tableProps } from './table-props';
+import { warnLog, errLog } from '../../ui/src/log';
+import GanttViewComponent from './gantt-view';
+const { getConfig, getIcon, getI18n, commands, hooks, useFns, createEvent, globalEvents, GLOBAL_EVENT_KEYS, renderEmptyElement, getSlotVNs } = VxeUI;
+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'];
 function createInternalData() {
-    return {};
+    return {
+        resizeTableWidth: 0
+    };
 }
 export default defineVxeComponent({
     name: 'VxeGantt',
-    props: {
-        size: {
-            type: String,
-            default: () => getConfig().gantt.size || getConfig().size
-        }
-    },
-    emits: [],
+    props: ganttProps,
+    emits: ganttEmits,
     setup(props, context) {
-        const { emit } = 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 defaultLayouts = [['Form'], ['Toolbar', 'Top', 'Gantt', 'Bottom', 'Pager']];
+        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
+        });
+        const internalData = createInternalData();
         const refElem = ref();
         const refTable = ref();
-        const reactData = reactive({});
-        const internalData = createInternalData();
+        const refForm = ref();
+        const refToolbar = ref();
+        const refPager = ref();
+        const refGanttContainer = 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 computeTaskViewOpts = computed(() => {
+            return Object.assign({}, getConfig().gantt.taskViewConfig, props.taskViewConfig);
+        });
+        const computeTaskBarOpts = computed(() => {
+            return Object.assign({}, getConfig().gantt.taskBarConfig, props.taskBarConfig);
+        });
+        const computeTitleField = computed(() => {
+            const taskOpts = computeTaskOpts.value;
+            return taskOpts.titleField || 'title';
+        });
+        const computeStartField = computed(() => {
+            const taskOpts = computeTaskOpts.value;
+            return taskOpts.startField || 'startDate';
+        });
+        const computeEndField = computed(() => {
+            const taskOpts = computeTaskOpts.value;
+            return taskOpts.endField || 'endDate';
+        });
+        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 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);
+                }
+            }
+            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 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,
+                showFooter: false
+            });
+            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(() => {
+            const { border } = props;
+            if (border === true) {
+                return 'full';
+            }
+            if (border) {
+                return border;
+            }
+            return 'default';
+        });
         const refMaps = {
             refElem,
-            refTable
+            refTable,
+            refForm,
+            refToolbar,
+            refPager
+        };
+        const computeMaps = {
+            computeProxyOpts,
+            computePagerOpts,
+            computeFormOpts,
+            computeToolbarOpts,
+            computeZoomOpts,
+            computeTaskOpts,
+            computeTaskViewOpts,
+            computeTaskBarOpts,
+            computeTitleField,
+            computeStartField,
+            computeEndField,
+            computeProgressField,
+            computeScrollbarOpts,
+            computeScrollbarXToTop,
+            computeScrollbarYToLeft
         };
-        const computeMaps = {};
         const $xeGantt = {
             xID,
-            props,
+            props: props,
             context,
             reactData,
             internalData,
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
+        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 = refGanttContainer.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, { $gantt: $xeGantt }, params));
+            emit(type, createEvent(evnt, { $grid: null, $gantt: $xeGantt }, params));
         };
         const ganttMethods = {
-            dispatchEvent
+            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.modal.message({ content: getRespMsg(rest, 'vxe.grid.delSuccess'), status: 'success' });
+                                            }
+                                        }
+                                        if (afterDelete) {
+                                            afterDelete(commitParams, ...args);
+                                        }
+                                        else {
+                                            $xeGantt.commitProxy('query');
+                                        }
+                                        if (deleteSuccessMethods) {
+                                            deleteSuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                        }
+                                        return { status: true };
+                                    })
+                                        .catch(rest => {
+                                        reactData.tableLoading = false;
+                                        if (isRespMsg) {
+                                            if (VxeUI.modal) {
+                                                VxeUI.modal.message({ id: code, content: getRespMsg(rest, 'vxe.grid.operError'), status: 'error' });
+                                            }
+                                        }
+                                        if (deleteErrorMethods) {
+                                            deleteErrorMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                        }
+                                        return { status: false };
+                                    });
+                                });
+                            }
+                            else {
+                                if (isActiveMsg) {
+                                    if (VxeUI.modal) {
+                                        VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.selectOneRecord'), status: 'warning' });
+                                    }
+                                }
+                            }
+                        }
+                        else {
+                            errLog('vxe.error.notFunc', ['proxy-config.ajax.delete']);
+                        }
+                        break;
+                    }
+                    case 'save': {
+                        const ajaxMethods = ajax.save;
+                        const saveSuccessMethods = ajax.saveSuccess;
+                        const saveErrorMethods = ajax.saveError;
+                        if (ajaxMethods) {
+                            const body = $xeTable.getRecordset();
+                            const { insertRecords, removeRecords, updateRecords, pendingRecords } = body;
+                            const commitParams = {
+                                $table: $xeTable,
+                                $grid: null,
+                                $gantt: $xeGantt,
+                                code,
+                                button,
+                                body,
+                                form: formData,
+                                options: ajaxMethods
+                            };
+                            // 排除掉新增且标记为删除的数据
+                            if (insertRecords.length) {
+                                body.pendingRecords = pendingRecords.filter((row) => $xeTable.findRowIndexOf(insertRecords, row) === -1);
+                            }
+                            // 排除已标记为删除的数据
+                            if (pendingRecords.length) {
+                                body.insertRecords = insertRecords.filter((row) => $xeTable.findRowIndexOf(pendingRecords, row) === -1);
+                            }
+                            let restPromise = Promise.resolve();
+                            if (editRules) {
+                                // 只校验新增和修改的数据
+                                restPromise = $xeTable[validConfig && validConfig.msgMode === 'full' ? 'fullValidate' : 'validate'](body.insertRecords.concat(updateRecords));
+                            }
+                            return restPromise.then((errMap) => {
+                                if (errMap) {
+                                    // 如果校验不通过
+                                    return;
+                                }
+                                if (body.insertRecords.length || removeRecords.length || updateRecords.length || body.pendingRecords.length) {
+                                    reactData.tableLoading = true;
+                                    return Promise.resolve((beforeSave || ajaxMethods)(commitParams, ...args))
+                                        .then(rest => {
+                                        reactData.tableLoading = false;
+                                        $xeTable.clearPendingRow();
+                                        if (isRespMsg) {
+                                            if (VxeUI.modal) {
+                                                VxeUI.modal.message({ content: getRespMsg(rest, 'vxe.grid.saveSuccess'), status: 'success' });
+                                            }
+                                        }
+                                        if (afterSave) {
+                                            afterSave(commitParams, ...args);
+                                        }
+                                        else {
+                                            $xeGantt.commitProxy('query');
+                                        }
+                                        if (saveSuccessMethods) {
+                                            saveSuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                        }
+                                        return { status: true };
+                                    })
+                                        .catch(rest => {
+                                        reactData.tableLoading = false;
+                                        if (isRespMsg) {
+                                            if (VxeUI.modal) {
+                                                VxeUI.modal.message({ id: code, content: getRespMsg(rest, 'vxe.grid.operError'), status: 'error' });
+                                            }
+                                        }
+                                        if (saveErrorMethods) {
+                                            saveErrorMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                        }
+                                        return { status: false };
+                                    });
+                                }
+                                else {
+                                    if (isActiveMsg) {
+                                        if (VxeUI.modal) {
+                                            VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.dataUnchanged'), status: 'info' });
+                                        }
+                                    }
+                                }
+                            });
+                        }
+                        else {
+                            errLog('vxe.error.notFunc', ['proxy-config.ajax.save']);
+                        }
+                        break;
+                    }
+                    default: {
+                        const gCommandOpts = commands.get(code);
+                        if (gCommandOpts) {
+                            const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod;
+                            if (tCommandMethod) {
+                                tCommandMethod({ code, button, $table: $xeTable, $grid: null, $gantt: $xeGantt }, ...args);
+                            }
+                            else {
+                                errLog('vxe.error.notCommands', [code]);
+                            }
+                        }
+                    }
+                }
+                return nextTick();
+            },
+            getParams() {
+                return props.params;
+            },
+            zoom() {
+                if (reactData.isZMax) {
+                    return $xeGantt.revert();
+                }
+                return $xeGantt.maximize();
+            },
+            isMaximized() {
+                return reactData.isZMax;
+            },
+            maximize() {
+                return handleZoom(true);
+            },
+            revert() {
+                return handleZoom();
+            },
+            getFormData,
+            getFormItems(itemIndex) {
+                const formOpts = computeFormOpts.value;
+                const { formConfig } = props;
+                const { items } = formOpts;
+                const itemList = [];
+                XEUtils.eachTree(formConfig && isEnableConf(formOpts) && items ? items : [], item => {
+                    itemList.push(item);
+                }, { children: 'children' });
+                return XEUtils.isUndefined(itemIndex) ? itemList : itemList[itemIndex];
+            },
+            resetForm() {
+                const $form = refForm.value;
+                if ($form) {
+                    return $form.reset();
+                }
+                return nextTick();
+            },
+            validateForm() {
+                const $form = refForm.value;
+                if ($form) {
+                    return $form.validate();
+                }
+                return nextTick();
+            },
+            validateFormField(field) {
+                const $form = refForm.value;
+                if ($form) {
+                    return $form.validateField(field);
+                }
+                return nextTick();
+            },
+            clearFormValidate(field) {
+                const $form = refForm.value;
+                if ($form) {
+                    return $form.clearValidate(field);
+                }
+                return nextTick();
+            },
+            homePage() {
+                const { tablePage } = reactData;
+                tablePage.currentPage = 1;
+                return nextTick();
+            },
+            homePageByEvent(evnt) {
+                const $pager = refPager.value;
+                if ($pager) {
+                    $pager.homePageByEvent(evnt);
+                }
+            },
+            endPage() {
+                const { tablePage } = reactData;
+                const pageCount = computePageCount.value;
+                tablePage.currentPage = pageCount;
+                return nextTick();
+            },
+            endPageByEvent(evnt) {
+                const $pager = refPager.value;
+                if ($pager) {
+                    $pager.endPageByEvent(evnt);
+                }
+            },
+            setCurrentPage(currentPage) {
+                const { tablePage } = reactData;
+                const pageCount = computePageCount.value;
+                tablePage.currentPage = Math.min(pageCount, Math.max(1, XEUtils.toNumber(currentPage)));
+                return nextTick();
+            },
+            setCurrentPageByEvent(evnt, currentPage) {
+                const $pager = refPager.value;
+                if ($pager) {
+                    $pager.setCurrentPageByEvent(evnt, currentPage);
+                }
+            },
+            setPageSize(pageSize) {
+                const { tablePage } = reactData;
+                tablePage.pageSize = Math.max(1, XEUtils.toNumber(pageSize));
+                return nextTick();
+            },
+            setPageSizeByEvent(evnt, pageSize) {
+                const $pager = refPager.value;
+                if ($pager) {
+                    $pager.setPageSizeByEvent(evnt, pageSize);
+                }
+            },
+            getProxyInfo() {
+                const $xeTable = refTable.value;
+                if (props.proxyConfig) {
+                    const { sortData } = reactData;
+                    return {
+                        data: $xeTable ? $xeTable.getFullData() : [],
+                        filter: reactData.filterData,
+                        form: getFormData(),
+                        sort: sortData.length ? sortData[0] : {},
+                        sorts: sortData,
+                        pager: reactData.tablePage,
+                        pendingRecords: $xeTable ? $xeTable.getPendingRecords() : []
+                    };
+                }
+                return null;
+            }
+            // setProxyInfo (options) {
+            //   if (props.proxyConfig && options) {
+            //     const { pager, form } = options
+            //     const proxyOpts = computeProxyOpts.value
+            //     if (pager) {
+            //       if (pager.currentPage) {
+            //         reactData.tablePage.currentPage = Number(pager.currentPage)
+            //       }
+            //       if (pager.pageSize) {
+            //         reactData.tablePage.pageSize = Number(pager.pageSize)
+            //       }
+            //     }
+            //     if (proxyOpts.form && form) {
+            //       Object.assign(reactData.formData, form)
+            //     }
+            //   }
+            //   return nextTick()
+            // }
+        };
+        const ganttPrivateMethods = {
+            extendTableMethods,
+            callSlot(slotFunc, params) {
+                if (slotFunc) {
+                    if (XEUtils.isString(slotFunc)) {
+                        slotFunc = slots[slotFunc] || null;
+                    }
+                    if (XEUtils.isFunction(slotFunc)) {
+                        return getSlotVNs(slotFunc(params));
+                    }
+                }
+                return [];
+            },
+            /**
+             * 获取需要排除的高度
+             */
+            getExcludeHeight() {
+                const { isZMax } = reactData;
+                const el = refElem.value;
+                if (el) {
+                    const formWrapper = refFormWrapper.value;
+                    const toolbarWrapper = refToolbarWrapper.value;
+                    const topWrapper = refTopWrapper.value;
+                    const bottomWrapper = refBottomWrapper.value;
+                    const pagerWrapper = refPagerWrapper.value;
+                    const parentEl = el.parentElement;
+                    const parentPaddingSize = isZMax ? 0 : (parentEl ? getPaddingTopBottomSize(parentEl) : 0);
+                    return parentPaddingSize + getPaddingTopBottomSize(el) + getOffsetHeight(formWrapper) + getOffsetHeight(toolbarWrapper) + getOffsetHeight(topWrapper) + getOffsetHeight(bottomWrapper) + getOffsetHeight(pagerWrapper);
+                }
+                return 0;
+            },
+            getParentHeight() {
+                const el = refElem.value;
+                if (el) {
+                    const parentEl = el.parentElement;
+                    return (reactData.isZMax ? getDomNode().visibleHeight : (parentEl ? XEUtils.toNumber(getComputedStyle(parentEl).height) : 0)) - ganttPrivateMethods.getExcludeHeight();
+                }
+                return 0;
+            },
+            triggerToolbarCommitEvent(params, evnt) {
+                const { code } = params;
+                return $xeGantt.commitProxy(params, evnt).then((rest) => {
+                    if (code && rest && rest.status && ['query', 'reload', 'delete', 'save'].includes(code)) {
+                        $xeGantt.dispatchEvent(code === 'delete' || code === 'save' ? `proxy-${code}` : 'proxy-query', Object.assign(Object.assign({}, rest), { isReload: code === 'reload' }), evnt);
+                    }
+                });
+            },
+            triggerToolbarBtnEvent(button, evnt) {
+                $xeGantt.triggerToolbarCommitEvent(button, evnt);
+                $xeGantt.dispatchEvent('toolbar-button-click', { code: button.code, button }, evnt);
+            },
+            triggerToolbarTolEvent(tool, evnt) {
+                $xeGantt.triggerToolbarCommitEvent(tool, evnt);
+                $xeGantt.dispatchEvent('toolbar-tool-click', { code: tool.code, tool }, evnt);
+            },
+            triggerZoomEvent(evnt) {
+                $xeGantt.zoom();
+                $xeGantt.dispatchEvent('zoom', { type: reactData.isZMax ? 'max' : 'revert' }, evnt);
+            }
+        };
+        Object.assign($xeGantt, ganttExtendTableMethods, ganttMethods, ganttPrivateMethods, {
+            // 检查插槽
+            loadColumn(columns) {
+                const $xeTable = refTable.value;
+                XEUtils.eachTree(columns, (column) => {
+                    if (column.slots) {
+                        XEUtils.each(column.slots, (func) => {
+                            if (!XEUtils.isFunction(func)) {
+                                if (!slots[func]) {
+                                    errLog('vxe.error.notSlot', [func]);
+                                }
+                            }
+                        });
+                    }
+                });
+                if ($xeTable) {
+                    return $xeTable.loadColumn(columns);
+                }
+                return nextTick();
+            },
+            reloadColumn(columns) {
+                $xeGantt.clearAll();
+                return $xeGantt.loadColumn(columns);
+            }
+        });
+        /**
+         * 渲染表单
+         */
+        const renderForm = () => {
+            const { formConfig, proxyConfig } = props;
+            const { formData } = reactData;
+            const proxyOpts = computeProxyOpts.value;
+            const formOpts = computeFormOpts.value;
+            if ((formConfig && isEnableConf(formOpts)) || slots.form) {
+                let slotVNs = [];
+                if (slots.form) {
+                    slotVNs = slots.form({ $grid: null, $gantt: $xeGantt });
+                }
+                else {
+                    if (formOpts.items) {
+                        const formSlots = {};
+                        if (!formOpts.inited) {
+                            formOpts.inited = true;
+                            const beforeItem = proxyOpts.beforeItem;
+                            if (proxyOpts && beforeItem) {
+                                formOpts.items.forEach((item) => {
+                                    beforeItem({ $grid: null, $gantt: $xeGantt, item });
+                                });
+                            }
+                        }
+                        // 处理插槽
+                        formOpts.items.forEach((item) => {
+                            XEUtils.each(item.slots, (func) => {
+                                if (!XEUtils.isFunction(func)) {
+                                    if (slots[func]) {
+                                        formSlots[func] = slots[func];
+                                    }
+                                }
+                            });
+                        });
+                        if (VxeUIFormComponent) {
+                            slotVNs.push(h(VxeUIFormComponent, Object.assign(Object.assign({ ref: refForm }, Object.assign({}, formOpts, {
+                                data: proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data
+                            })), { onSubmit: submitFormEvent, onReset: resetFormEvent, onSubmitInvalid: submitInvalidEvent, onCollapse: collapseEvent }), formSlots));
+                        }
+                    }
+                }
+                return h('div', {
+                    ref: refFormWrapper,
+                    key: 'form',
+                    class: 'vxe-gantt--form-wrapper'
+                }, slotVNs);
+            }
+            return renderEmptyElement($xeGantt);
+        };
+        /**
+         * 渲染工具栏
+         */
+        const renderToolbar = () => {
+            const { toolbarConfig } = props;
+            const toolbarOpts = computeToolbarOpts.value;
+            if ((toolbarConfig && isEnableConf(toolbarOpts)) || slots.toolbar) {
+                let slotVNs = [];
+                if (slots.toolbar) {
+                    slotVNs = slots.toolbar({ $grid: null, $gantt: $xeGantt });
+                }
+                else {
+                    const toolbarOptSlots = toolbarOpts.slots;
+                    const toolbarSlots = {};
+                    if (toolbarOptSlots) {
+                        const buttonsSlot = getFuncSlot(toolbarOptSlots, 'buttons');
+                        const buttonPrefixSlot = getFuncSlot(toolbarOptSlots, 'buttonPrefix');
+                        const buttonSuffixSlot = getFuncSlot(toolbarOptSlots, 'buttonSuffix');
+                        const toolsSlot = getFuncSlot(toolbarOptSlots, 'tools');
+                        const toolPrefixSlot = getFuncSlot(toolbarOptSlots, 'toolPrefix');
+                        const toolSuffixSlot = getFuncSlot(toolbarOptSlots, 'toolSuffix');
+                        if (buttonsSlot) {
+                            toolbarSlots.buttons = buttonsSlot;
+                        }
+                        if (buttonPrefixSlot) {
+                            toolbarSlots.buttonPrefix = buttonPrefixSlot;
+                        }
+                        if (buttonSuffixSlot) {
+                            toolbarSlots.buttonSuffix = buttonSuffixSlot;
+                        }
+                        if (toolsSlot) {
+                            toolbarSlots.tools = toolsSlot;
+                        }
+                        if (toolPrefixSlot) {
+                            toolbarSlots.toolPrefix = toolPrefixSlot;
+                        }
+                        if (toolSuffixSlot) {
+                            toolbarSlots.toolSuffix = toolSuffixSlot;
+                        }
+                    }
+                    slotVNs.push(h(VxeToolbarComponent, Object.assign(Object.assign({ ref: refToolbar }, toolbarOpts), { slots: undefined }), toolbarSlots));
+                }
+                return h('div', {
+                    ref: refToolbarWrapper,
+                    key: 'toolbar',
+                    class: 'vxe-gantt--toolbar-wrapper'
+                }, slotVNs);
+            }
+            return renderEmptyElement($xeGantt);
+        };
+        /**
+         * 渲染表格顶部区域
+         */
+        const renderTop = () => {
+            const topSlot = slots.top;
+            if (topSlot) {
+                return h('div', {
+                    ref: refTopWrapper,
+                    key: 'top',
+                    class: 'vxe-gantt--top-wrapper'
+                }, topSlot({ $grid: null, $gantt: $xeGantt }));
+            }
+            return renderEmptyElement($xeGantt);
+        };
+        const renderTableLeft = () => {
+            const leftSlot = slots.left;
+            if (leftSlot) {
+                return h('div', {
+                    class: 'vxe-gantt--left-wrapper'
+                }, leftSlot({ $grid: null, $gantt: $xeGantt }));
+            }
+            return renderEmptyElement($xeGantt);
+        };
+        const renderTableRight = () => {
+            const rightSlot = slots.right;
+            if (rightSlot) {
+                return h('div', {
+                    class: 'vxe-gantt--right-wrapper'
+                }, rightSlot({ $grid: null, $gantt: $xeGantt }));
+            }
+            return renderEmptyElement($xeGantt);
+        };
+        /**
+         * 渲染表格
+         */
+        const renderTable = () => {
+            const { proxyConfig } = props;
+            const tableProps = computeTableProps.value;
+            const proxyOpts = computeProxyOpts.value;
+            const tableOns = Object.assign({}, tableCompEvents);
+            const emptySlot = slots.empty;
+            const loadingSlot = slots.loading;
+            const rowDragIconSlot = slots.rowDragIcon || slots['row-drag-icon'];
+            const columnDragIconSlot = slots.columnDragIcon || slots['column-drag-icon'];
+            if (proxyConfig && isEnableConf(proxyOpts)) {
+                if (proxyOpts.sort) {
+                    tableOns.onSortChange = sortChangeEvent;
+                    tableOns.onClearAllSort = clearAllSortEvent;
+                }
+                if (proxyOpts.filter) {
+                    tableOns.onFilterChange = filterChangeEvent;
+                    tableOns.onClearAllFilter = clearAllFilterEvent;
+                }
+            }
+            const slotObj = {};
+            if (emptySlot) {
+                slotObj.empty = emptySlot;
+            }
+            if (loadingSlot) {
+                slotObj.loading = loadingSlot;
+            }
+            if (rowDragIconSlot) {
+                slotObj.rowDragIcon = rowDragIconSlot;
+            }
+            if (columnDragIconSlot) {
+                slotObj.columnDragIcon = columnDragIconSlot;
+            }
+            return h('div', {
+                ref: refTableWrapper,
+                class: 'vxe-gantt--table-wrapper'
+            }, [
+                h(VxeTableComponent, Object.assign(Object.assign({ ref: refTable }, tableProps), tableOns), slotObj)
+            ]);
+        };
+        /**
+         * 渲染表格底部区域
+         */
+        const renderBottom = () => {
+            if (slots.bottom) {
+                return h('div', {
+                    ref: refBottomWrapper,
+                    key: 'bottom',
+                    class: 'vxe-gantt--bottom-wrapper'
+                }, slots.bottom({ $grid: null, $gantt: $xeGantt }));
+            }
+            return renderEmptyElement($xeGantt);
+        };
+        /**
+         * 渲染分页
+         */
+        const renderPager = () => {
+            const { proxyConfig, pagerConfig } = props;
+            const proxyOpts = computeProxyOpts.value;
+            const pagerOpts = computePagerOpts.value;
+            const pagerSlot = slots.pager;
+            if ((pagerConfig && isEnableConf(pagerOpts)) || slots.pager) {
+                return h('div', {
+                    ref: refPagerWrapper,
+                    key: 'pager',
+                    class: 'vxe-gantt--pager-wrapper'
+                }, pagerSlot
+                    ? pagerSlot({ $grid: null, $gantt: $xeGantt })
+                    : [
+                        VxeUIPagerComponent
+                            ? h(VxeUIPagerComponent, Object.assign(Object.assign(Object.assign({ ref: refPager }, pagerOpts), (proxyConfig && isEnableConf(proxyOpts) ? reactData.tablePage : {})), { onPageChange: pageChangeEvent }), getConfigSlot(pagerOpts.slots))
+                            : renderEmptyElement($xeGantt)
+                    ]);
+            }
+            return renderEmptyElement($xeGantt);
+        };
+        /**
+         * 渲染任务视图
+         */
+        const renderTaskView = () => {
+            return h('div', {
+                ref: refGanttWrapper,
+                class: 'vxe-gantt--view-wrapper'
+            }, [
+                h(GanttViewComponent, {
+                    ref: refGanttView
+                })
+            ]);
+        };
+        const renderSplitBar = () => {
+            const { showLeftView, showRightView } = reactData;
+            return h('div', {
+                class: 'vxe-gantt--view-split-bar'
+            }, [
+                h('div', {
+                    class: 'vxe-gantt--view-split-bar-handle',
+                    onMousedown: dragSplitEvent
+                }),
+                h('div', {
+                    class: 'vxe-gantt--view-split-bar-btn-wrapper'
+                }, [
+                    showRightView
+                        ? h('div', {
+                            class: 'vxe-gantt--view-split-bar-left-btn',
+                            onClick: handleSplitLeftViewEvent
+                        }, [
+                            h('i', {
+                                class: showLeftView ? getIcon().GANTT_VIEW_LEFT_OPEN : getIcon().GANTT_VIEW_LEFT_CLOSE
+                            })
+                        ])
+                        : renderEmptyElement($xeGantt),
+                    showLeftView
+                        ? h('div', {
+                            class: 'vxe-gantt--view-split-bar-right-btn',
+                            onClick: handleSplitRightViewEvent
+                        }, [
+                            h('i', {
+                                class: showRightView ? getIcon().GANTT_VIEW_RIGHT_OPEN : getIcon().GANTT_VIEW_RIGHT_CLOSE
+                            })
+                        ])
+                        : renderEmptyElement($xeGantt)
+                ])
+            ]);
+        };
+        const renderChildLayout = (layoutKeys) => {
+            const childVNs = [];
+            layoutKeys.forEach(key => {
+                switch (key) {
+                    case 'Form':
+                        childVNs.push(renderForm());
+                        break;
+                    case 'Toolbar':
+                        childVNs.push(renderToolbar());
+                        break;
+                    case 'Top':
+                        childVNs.push(renderTop());
+                        break;
+                    case 'Gantt':
+                        childVNs.push(h('div', {
+                            ref: refGanttContainer,
+                            key: 'tv',
+                            class: 'vxe-gantt--gantt-container'
+                        }, [
+                            renderTableLeft(),
+                            renderTable(),
+                            renderSplitBar(),
+                            renderTaskView(),
+                            renderTableRight(),
+                            h('div', {
+                                ref: refResizableSplitTip,
+                                class: 'vxe-gantt--resizable-split-tip'
+                            }, [
+                                h('div', {
+                                    class: 'vxe-gantt--resizable-split-tip-number'
+                                }, [
+                                    h('div', {
+                                        class: 'vxe-gantt--resizable-split-number-left'
+                                    }, '10px'),
+                                    h('div', {
+                                        class: 'vxe-gantt--resizable-split-number-right'
+                                    }, '20px')
+                                ])
+                            ])
+                        ]));
+                        break;
+                    case 'Bottom':
+                        childVNs.push(renderBottom());
+                        break;
+                    case 'Pager':
+                        childVNs.push(renderPager());
+                        break;
+                    default:
+                        errLog('vxe.error.notProp', [`layouts -> ${key}`]);
+                        break;
+                }
+            });
+            return childVNs;
+        };
+        const renderLayout = () => {
+            const currLayoutConf = computeCurrLayoutConf.value;
+            const { headKeys, bodyKeys, footKeys } = currLayoutConf;
+            const asideLeftSlot = slots.asideLeft || slots['aside-left'];
+            const asideRightSlot = slots.asideRight || slots['aside-right'];
+            return [
+                h('div', {
+                    class: 'vxe-gantt--layout-header-wrapper'
+                }, renderChildLayout(headKeys)),
+                h('div', {
+                    class: 'vxe-gantt--layout-body-wrapper'
+                }, [
+                    asideLeftSlot
+                        ? h('div', {
+                            class: 'vxe-gantt--layout-aside-left-wrapper'
+                        }, asideLeftSlot({}))
+                        : renderEmptyElement($xeGantt),
+                    h('div', {
+                        class: 'vxe-gantt--layout-body-content-wrapper'
+                    }, renderChildLayout(bodyKeys)),
+                    asideRightSlot
+                        ? h('div', {
+                            class: 'vxe-gantt--layout-aside-right-wrapper'
+                        }, asideRightSlot({}))
+                        : renderEmptyElement($xeGantt)
+                ]),
+                h('div', {
+                    class: 'vxe-gantt--layout-footer-wrapper'
+                }, renderChildLayout(footKeys)),
+                h('div', {
+                    class: 'vxe-gantt--border-line'
+                })
+            ];
         };
-        const ganttPrivateMethods = {};
-        Object.assign($xeGantt, ganttMethods, ganttPrivateMethods);
         const renderVN = () => {
+            const { showLeftView, showRightView } = reactData;
+            const vSize = computeSize.value;
+            const styles = computeStyles.value;
+            const isLoading = computeIsLoading.value;
+            const tableBorder = computeTableBorder.value;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
             return h('div', {
                 ref: refElem,
-                class: 'vxe-gantt'
-            });
+                class: ['vxe-gantt', `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+                        [`size--${vSize}`]: vSize,
+                        'is--round': props.round,
+                        'is--maximize': reactData.isZMax,
+                        'is--loading': isLoading,
+                        'show--left': showLeftView,
+                        'show--right': showRightView
+                    }],
+                style: styles
+            }, renderLayout());
         };
+        const columnFlag = ref(0);
+        watch(() => props.columns ? props.columns.length : -1, () => {
+            columnFlag.value++;
+        });
+        watch(() => props.columns, () => {
+            columnFlag.value++;
+        });
+        watch(columnFlag, () => {
+            nextTick(() => $xeGantt.loadColumn(props.columns || []));
+        });
+        watch(() => props.toolbarConfig, () => {
+            initToolbar();
+        });
+        watch(computeCustomCurrentPageFlag, () => {
+            initPages('currentPage');
+        });
+        watch(computeCustomPageSizeFlag, () => {
+            initPages('pageSize');
+        });
+        watch(computeCustomTotalFlag, () => {
+            initPages('total');
+        });
+        watch(() => props.proxyConfig, () => {
+            initProxy();
+        });
+        hooks.forEach((options) => {
+            const { setupGantt } = options;
+            if (setupGantt) {
+                const hookRest = setupGantt($xeGantt);
+                if (hookRest && XEUtils.isObject(hookRest)) {
+                    Object.assign($xeGantt, hookRest);
+                }
+            }
+        });
+        initPages();
+        onMounted(() => {
+            nextTick(() => {
+                const { columns } = props;
+                const proxyOpts = computeProxyOpts.value;
+                if (props.formConfig) {
+                    if (!VxeUIFormComponent) {
+                        errLog('vxe.error.reqComp', ['vxe-form']);
+                    }
+                }
+                if (props.pagerConfig) {
+                    if (!VxeUIPagerComponent) {
+                        errLog('vxe.error.reqComp', ['vxe-pager']);
+                    }
+                }
+                // const { data, columns, proxyConfig } = props
+                // const formOpts = computeFormOpts.value
+                // if (isEnableConf(proxyConfig) && (data || (proxyOpts.form && formOpts.data))) {
+                //   errLog('vxe.error.errConflicts', ['grid.data', 'grid.proxy-config'])
+                // }
+                if (proxyOpts.props) {
+                    warnLog('vxe.error.delProp', ['proxy-config.props', 'proxy-config.response']);
+                }
+                if (columns && columns.length) {
+                    $xeGantt.loadColumn(columns);
+                }
+                initToolbar();
+                initProxy();
+            });
+            initGanttView();
+            globalEvents.on($xeGantt, 'keydown', handleGlobalKeydownEvent);
+        });
         onUnmounted(() => {
+            globalEvents.off($xeGantt, 'keydown');
             XEUtils.assign(internalData, createInternalData());
         });
         $xeGantt.renderVN = renderVN;
+        provide('$xeGantt', $xeGantt);
         return $xeGantt;
     },
     render() {