vxe-gantt 0.0.2 → 4.0.0-beta.0

package/lib/gantt/src/gantt.js

@@ -6,64 +6,1989 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _vue = require("vue");
 var _comp = require("../../ui/src/comp");
-var _ui = require("../../ui");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _utils = require("../../ui/src/utils");
+var _dom = require("../../ui/src/dom");
+var _ui = require("../../ui");
+var _props = require("./props");
+var _emits = require("./emits");
+var _tableEmits = require("./table-emits");
+var _tableProps = require("./table-props");
+var _log = require("../../ui/src/log");
+var _ganttView = _interopRequireDefault(require("./gantt-view"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  getConfig,
+  getIcon,
+  getI18n,
+  commands,
+  hooks,
+  useFns,
+  createEvent,
+  globalEvents,
+  GLOBAL_EVENT_KEYS,
+  renderEmptyElement,
+  getSlotVNs
+} = _ui.VxeUI;
+const tableComponentPropKeys = Object.keys(_tableProps.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
+  };
 }
 var _default = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeGantt',
-  props: {
-    size: {
-      type: String,
-      default: () => (0, _ui.getConfig)().gantt.size || (0, _ui.getConfig)().size
-    }
-  },
-  emits: [],
+  props: _props.ganttProps,
+  emits: _emits.ganttEmits,
   setup(props, context) {
+    var _a;
     const {
+      slots,
       emit
     } = context;
     const xID = _xeUtils.default.uniqueId();
+    // 使用已安装的组件，如果未安装则不渲染
+    const VxeUIFormComponent = _ui.VxeUI.getComponent('VxeForm');
+    const VxeUIPagerComponent = _ui.VxeUI.getComponent('VxePager');
+    const VxeTableComponent = _ui.VxeUI.getComponent('VxeTable');
+    const VxeToolbarComponent = _ui.VxeUI.getComponent('VxeToolbar');
+    const defaultLayouts = [['Form'], ['Toolbar', 'Top', 'Gantt', 'Bottom', 'Pager']];
+    const {
+      computeSize
+    } = useFns.useSize(props);
+    const reactData = (0, _vue.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 = (0, _vue.ref)();
     const refTable = (0, _vue.ref)();
-    const reactData = (0, _vue.reactive)({});
-    const internalData = createInternalData();
+    const refForm = (0, _vue.ref)();
+    const refToolbar = (0, _vue.ref)();
+    const refPager = (0, _vue.ref)();
+    const refGanttContainer = (0, _vue.ref)();
+    const refGanttView = (0, _vue.ref)();
+    const refFormWrapper = (0, _vue.ref)();
+    const refToolbarWrapper = (0, _vue.ref)();
+    const refTopWrapper = (0, _vue.ref)();
+    const refBottomWrapper = (0, _vue.ref)();
+    const refPagerWrapper = (0, _vue.ref)();
+    const refTableWrapper = (0, _vue.ref)();
+    const refGanttWrapper = (0, _vue.ref)();
+    const refResizableSplitTip = (0, _vue.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 = (0, _vue.computed)(() => {
+      return _xeUtils.default.merge({}, _xeUtils.default.clone(getConfig().gantt.proxyConfig, true), props.proxyConfig);
+    });
+    const computeIsRespMsg = (0, _vue.computed)(() => {
+      const proxyOpts = computeProxyOpts.value;
+      return !!(_xeUtils.default.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg);
+    });
+    const computeIsActiveMsg = (0, _vue.computed)(() => {
+      const proxyOpts = computeProxyOpts.value;
+      return _xeUtils.default.isBoolean(proxyOpts.showActionMsg) ? proxyOpts.showActionMsg : !!proxyOpts.showActiveMsg;
+    });
+    const computePagerOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().gantt.pagerConfig, props.pagerConfig);
+    });
+    const computeFormOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().gantt.formConfig, props.formConfig);
+    });
+    const computeToolbarOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().gantt.toolbarConfig, props.toolbarConfig);
+    });
+    const computeZoomOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().gantt.zoomConfig, props.zoomConfig);
+    });
+    const computeTaskOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().gantt.taskConfig, props.taskConfig);
+    });
+    const computeTaskViewOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().gantt.taskViewConfig, props.taskViewConfig);
+    });
+    const computeTaskBarOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().gantt.taskBarConfig, props.taskBarConfig);
+    });
+    const computeTitleField = (0, _vue.computed)(() => {
+      const taskOpts = computeTaskOpts.value;
+      return taskOpts.titleField || 'title';
+    });
+    const computeStartField = (0, _vue.computed)(() => {
+      const taskOpts = computeTaskOpts.value;
+      return taskOpts.startField || 'startDate';
+    });
+    const computeEndField = (0, _vue.computed)(() => {
+      const taskOpts = computeTaskOpts.value;
+      return taskOpts.endField || 'endDate';
+    });
+    const computeProgressField = (0, _vue.computed)(() => {
+      const taskOpts = computeTaskOpts.value;
+      return taskOpts.progressField || 'progress';
+    });
+    const computeScrollbarOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().gantt.scrollbarConfig, props.scrollbarConfig);
+    });
+    const computeScrollbarXToTop = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top');
+    });
+    const computeScrollbarYToLeft = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left');
+    });
+    const computeStyles = (0, _vue.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%' : (0, _dom.toCssUnit)(height);
+        }
+        if (maxHeight) {
+          stys.maxHeight = maxHeight === 'auto' || maxHeight === '100%' ? '100%' : (0, _dom.toCssUnit)(maxHeight);
+        }
+      }
+      return stys;
+    });
+    const computeTableExtendProps = (0, _vue.computed)(() => {
+      const rest = {};
+      tableComponentPropKeys.forEach(key => {
+        rest[key] = props[key];
+      });
+      return rest;
+    });
+    const computeTableProps = (0, _vue.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 && (0, _utils.isEnableConf)(proxyOpts)) {
+        tProps.loading = isLoading;
+        if (pagerConfig && proxyOpts.seq && (0, _utils.isEnableConf)(pagerOpts)) {
+          tProps.seqConfig = Object.assign({}, seqConfig, {
+            startIndex: (tablePage.currentPage - 1) * tablePage.pageSize
+          });
+        }
+      }
+      if (editConfig) {
+        tProps.editConfig = Object.assign({}, editConfig);
+      }
+      return tProps;
+    });
+    const computeCurrLayoutConf = (0, _vue.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.default.isArray(confs[0])) {
+          headKeys = confs[0];
+          bodyKeys = confs[1] || [];
+          footKeys = confs[2] || [];
+        } else {
+          bodyKeys = confs;
+        }
+      }
+      return {
+        headKeys,
+        bodyKeys,
+        footKeys
+      };
+    });
+    const computeCustomCurrentPageFlag = (0, _vue.computed)(() => {
+      const pagerOpts = computePagerOpts.value;
+      return pagerOpts.currentPage;
+    });
+    const computeCustomPageSizeFlag = (0, _vue.computed)(() => {
+      const pagerOpts = computePagerOpts.value;
+      return pagerOpts.pageSize;
+    });
+    const computeCustomTotalFlag = (0, _vue.computed)(() => {
+      const pagerOpts = computePagerOpts.value;
+      return pagerOpts.total;
+    });
+    const computePageCount = (0, _vue.computed)(() => {
+      const {
+        tablePage
+      } = reactData;
+      return Math.max(Math.ceil(tablePage.total / tablePage.pageSize), 1);
+    });
+    const computeIsLoading = (0, _vue.computed)(() => {
+      const {
+        loading,
+        proxyConfig
+      } = props;
+      const {
+        tableLoading
+      } = reactData;
+      const proxyOpts = computeProxyOpts.value;
+      const {
+        showLoading
+      } = proxyOpts;
+      return loading || tableLoading && showLoading && proxyConfig && (0, _utils.isEnableConf)(proxyOpts);
+    });
+    const computeTableBorder = (0, _vue.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 && (0, _utils.isEnableConf)(toolbarOpts)) {
+        (0, _vue.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 && (0, _utils.isEnableConf)(proxyOpts) && proxyOpts.form ? formData : formOpts.data;
+    };
+    const initPages = propKey => {
+      const {
+        tablePage
+      } = reactData;
+      const {
+        pagerConfig
+      } = props;
+      const pagerOpts = computePagerOpts.value;
+      if (pagerConfig && (0, _utils.isEnableConf)(pagerOpts)) {
+        if (propKey) {
+          if (pagerOpts[propKey]) {
+            tablePage[propKey] = _xeUtils.default.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 (_ui.VxeUI.modal) {
+            _ui.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.default.isFunction(messageProp) ? messageProp({
+          data: rest,
+          $table: $xeTable,
+          $grid: null,
+          $gantt: $xeGantt
+        }) : _xeUtils.default.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 (_ui.VxeUI.modal) {
+            return _ui.VxeUI.modal.confirm({
+              id: `cfm_${code}`,
+              content: getI18n(alertKey),
+              escClosable: true
+            }).then(type => {
+              if (type === 'confirm') {
+                return callback();
+              }
+            });
+          }
+        } else {
+          if (_ui.VxeUI.modal) {
+            _ui.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 && (0, _utils.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 && (0, _utils.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 && (0, _utils.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 && (0, _utils.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 && (0, _utils.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 < (0, _utils.getLastZIndex)()) {
+          reactData.tZindex = (0, _utils.nextZIndex)();
+        }
+      }
+      return (0, _vue.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.default.isString(funcSlot)) {
+          if (slots[funcSlot]) {
+            return slots[funcSlot];
+          } else {
+            (0, _log.errLog)('vxe.error.notSlot', [funcSlot]);
+          }
+        } else {
+          return funcSlot;
+        }
+      }
+      return null;
+    };
+    const getConfigSlot = slotConfigs => {
+      const slotConf = {};
+      _xeUtils.default.objectMap(slotConfigs, (slotFunc, slotKey) => {
+        if (slotFunc) {
+          if (_xeUtils.default.isString(slotFunc)) {
+            if (slots[slotFunc]) {
+              slotConf[slotKey] = slots[slotFunc];
+            } else {
+              (0, _log.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.default.toNumber(taskViewOpts.tableStyle.minWidth) || 80;
+      let targetTableWidth = tableWidth;
+      let offsetLeft = -1;
+      (0, _dom.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`;
+        (0, _dom.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.tableEmits.forEach(name => {
+      const type = _xeUtils.default.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.default.isFunction(defaultValue)) {
+                itemValue = defaultValue({
+                  item
+                });
+              } else if (!_xeUtils.default.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 && (0, _utils.isEnableConf)(proxyOpts)) {
+        if (formConfig && (0, _utils.isEnableConf)(formOpts) && proxyOpts.form && formOpts.items) {
+          reactData.formData = getDefaultFormData();
+        }
+        if (!proxyInited) {
+          reactData.proxyInited = true;
+          if (proxyOpts.autoLoad !== false) {
+            (0, _vue.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, (0, _ui.createEvent)(evnt, {
+      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 (0, _vue.nextTick)();
+        }
+        let formData = getFormData();
+        let button = null;
+        let code = null;
+        if (_xeUtils.default.isString(proxyTarget)) {
+          const {
+            buttons
+          } = toolbarOpts;
+          const matchObj = toolbarConfig && (0, _utils.isEnableConf)(toolbarOpts) && buttons ? _xeUtils.default.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 (0, _vue.nextTick)();
+                }
+                let sortList = [];
+                let filterList = [];
+                let pageParams = {};
+                if (pagerConfig) {
+                  if (isInited || isReload) {
+                    // 重置分页
+                    tablePage.currentPage = 1;
+                  }
+                  if ((0, _utils.isEnableConf)(pagerOpts)) {
+                    pageParams = Object.assign({}, tablePage);
+                  }
+                }
+                if (isInited) {
+                  // 重置代理表单数据
+                  if (proxyConfig && (0, _utils.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.default.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 && (0, _utils.isEnableConf)(pagerOpts)) {
+                      const totalProp = resConfigs.total;
+                      const total = (_xeUtils.default.isFunction(totalProp) ? totalProp({
+                        data: rest,
+                        $table: $xeTable,
+                        $grid: null,
+                        $gantt: $xeGantt
+                      }) : _xeUtils.default.get(rest, totalProp || 'page.total')) || 0;
+                      tablePage.total = _xeUtils.default.toNumber(total);
+                      const resultProp = resConfigs.result;
+                      tableData = (_xeUtils.default.isFunction(resultProp) ? resultProp({
+                        data: rest,
+                        $table: $xeTable,
+                        $grid: null,
+                        $gantt: $xeGantt
+                      }) : _xeUtils.default.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.default.isFunction(listProp) ? listProp({
+                        data: rest,
+                        $table: $xeTable,
+                        $grid: null,
+                        $gantt: $xeGantt
+                      }) : _xeUtils.default.get(rest, listProp) : rest) || [];
+                    }
+                  }
+                  if ($xeTable) {
+                    $xeTable.loadData(tableData);
+                  } else {
+                    (0, _vue.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 {
+                (0, _log.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 (_ui.VxeUI.modal) {
+                          _ui.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 (_ui.VxeUI.modal) {
+                          _ui.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 (_ui.VxeUI.modal) {
+                      _ui.VxeUI.modal.message({
+                        id: code,
+                        content: getI18n('vxe.grid.selectOneRecord'),
+                        status: 'warning'
+                      });
+                    }
+                  }
+                }
+              } else {
+                (0, _log.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 (_ui.VxeUI.modal) {
+                          _ui.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 (_ui.VxeUI.modal) {
+                          _ui.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 (_ui.VxeUI.modal) {
+                        _ui.VxeUI.modal.message({
+                          id: code,
+                          content: getI18n('vxe.grid.dataUnchanged'),
+                          status: 'info'
+                        });
+                      }
+                    }
+                  }
+                });
+              } else {
+                (0, _log.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 {
+                  (0, _log.errLog)('vxe.error.notCommands', [code]);
+                }
+              }
+            }
+        }
+        return (0, _vue.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.default.eachTree(formConfig && (0, _utils.isEnableConf)(formOpts) && items ? items : [], item => {
+          itemList.push(item);
+        }, {
+          children: 'children'
+        });
+        return _xeUtils.default.isUndefined(itemIndex) ? itemList : itemList[itemIndex];
+      },
+      resetForm() {
+        const $form = refForm.value;
+        if ($form) {
+          return $form.reset();
+        }
+        return (0, _vue.nextTick)();
+      },
+      validateForm() {
+        const $form = refForm.value;
+        if ($form) {
+          return $form.validate();
+        }
+        return (0, _vue.nextTick)();
+      },
+      validateFormField(field) {
+        const $form = refForm.value;
+        if ($form) {
+          return $form.validateField(field);
+        }
+        return (0, _vue.nextTick)();
+      },
+      clearFormValidate(field) {
+        const $form = refForm.value;
+        if ($form) {
+          return $form.clearValidate(field);
+        }
+        return (0, _vue.nextTick)();
+      },
+      homePage() {
+        const {
+          tablePage
+        } = reactData;
+        tablePage.currentPage = 1;
+        return (0, _vue.nextTick)();
+      },
+      homePageByEvent(evnt) {
+        const $pager = refPager.value;
+        if ($pager) {
+          $pager.homePageByEvent(evnt);
+        }
+      },
+      endPage() {
+        const {
+          tablePage
+        } = reactData;
+        const pageCount = computePageCount.value;
+        tablePage.currentPage = pageCount;
+        return (0, _vue.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.default.toNumber(currentPage)));
+        return (0, _vue.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.default.toNumber(pageSize));
+        return (0, _vue.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.default.isString(slotFunc)) {
+            slotFunc = slots[slotFunc] || null;
+          }
+          if (_xeUtils.default.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 ? (0, _dom.getPaddingTopBottomSize)(parentEl) : 0;
+          return parentPaddingSize + (0, _dom.getPaddingTopBottomSize)(el) + (0, _dom.getOffsetHeight)(formWrapper) + (0, _dom.getOffsetHeight)(toolbarWrapper) + (0, _dom.getOffsetHeight)(topWrapper) + (0, _dom.getOffsetHeight)(bottomWrapper) + (0, _dom.getOffsetHeight)(pagerWrapper);
+        }
+        return 0;
+      },
+      getParentHeight() {
+        const el = refElem.value;
+        if (el) {
+          const parentEl = el.parentElement;
+          return (reactData.isZMax ? (0, _dom.getDomNode)().visibleHeight : parentEl ? _xeUtils.default.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.default.eachTree(columns, column => {
+          if (column.slots) {
+            _xeUtils.default.each(column.slots, func => {
+              if (!_xeUtils.default.isFunction(func)) {
+                if (!slots[func]) {
+                  (0, _log.errLog)('vxe.error.notSlot', [func]);
+                }
+              }
+            });
+          }
+        });
+        if ($xeTable) {
+          return $xeTable.loadColumn(columns);
+        }
+        return (0, _vue.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 && (0, _utils.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.default.each(item.slots, func => {
+                if (!_xeUtils.default.isFunction(func)) {
+                  if (slots[func]) {
+                    formSlots[func] = slots[func];
+                  }
+                }
+              });
+            });
+            if (VxeUIFormComponent) {
+              slotVNs.push((0, _vue.h)(VxeUIFormComponent, Object.assign(Object.assign({
+                ref: refForm
+              }, Object.assign({}, formOpts, {
+                data: proxyConfig && (0, _utils.isEnableConf)(proxyOpts) && proxyOpts.form ? formData : formOpts.data
+              })), {
+                onSubmit: submitFormEvent,
+                onReset: resetFormEvent,
+                onSubmitInvalid: submitInvalidEvent,
+                onCollapse: collapseEvent
+              }), formSlots));
+            }
+          }
+        }
+        return (0, _vue.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 && (0, _utils.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((0, _vue.h)(VxeToolbarComponent, Object.assign(Object.assign({
+            ref: refToolbar
+          }, toolbarOpts), {
+            slots: undefined
+          }), toolbarSlots));
+        }
+        return (0, _vue.h)('div', {
+          ref: refToolbarWrapper,
+          key: 'toolbar',
+          class: 'vxe-gantt--toolbar-wrapper'
+        }, slotVNs);
+      }
+      return renderEmptyElement($xeGantt);
+    };
+    /**
+     * 渲染表格顶部区域
+     */
+    const renderTop = () => {
+      const topSlot = slots.top;
+      if (topSlot) {
+        return (0, _vue.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 (0, _vue.h)('div', {
+          class: 'vxe-gantt--left-wrapper'
+        }, leftSlot({
+          $grid: null,
+          $gantt: $xeGantt
+        }));
+      }
+      return renderEmptyElement($xeGantt);
+    };
+    const renderTableRight = () => {
+      const rightSlot = slots.right;
+      if (rightSlot) {
+        return (0, _vue.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 && (0, _utils.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 (0, _vue.h)('div', {
+        ref: refTableWrapper,
+        class: 'vxe-gantt--table-wrapper'
+      }, [(0, _vue.h)(VxeTableComponent, Object.assign(Object.assign({
+        ref: refTable
+      }, tableProps), tableOns), slotObj)]);
+    };
+    /**
+     * 渲染表格底部区域
+     */
+    const renderBottom = () => {
+      if (slots.bottom) {
+        return (0, _vue.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 && (0, _utils.isEnableConf)(pagerOpts) || slots.pager) {
+        return (0, _vue.h)('div', {
+          ref: refPagerWrapper,
+          key: 'pager',
+          class: 'vxe-gantt--pager-wrapper'
+        }, pagerSlot ? pagerSlot({
+          $grid: null,
+          $gantt: $xeGantt
+        }) : [VxeUIPagerComponent ? (0, _vue.h)(VxeUIPagerComponent, Object.assign(Object.assign(Object.assign({
+          ref: refPager
+        }, pagerOpts), proxyConfig && (0, _utils.isEnableConf)(proxyOpts) ? reactData.tablePage : {}), {
+          onPageChange: pageChangeEvent
+        }), getConfigSlot(pagerOpts.slots)) : renderEmptyElement($xeGantt)]);
+      }
+      return renderEmptyElement($xeGantt);
+    };
+    /**
+     * 渲染任务视图
+     */
+    const renderTaskView = () => {
+      return (0, _vue.h)('div', {
+        ref: refGanttWrapper,
+        class: 'vxe-gantt--view-wrapper'
+      }, [(0, _vue.h)(_ganttView.default, {
+        ref: refGanttView
+      })]);
+    };
+    const renderSplitBar = () => {
+      const {
+        showLeftView,
+        showRightView
+      } = reactData;
+      return (0, _vue.h)('div', {
+        class: 'vxe-gantt--view-split-bar'
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-gantt--view-split-bar-handle',
+        onMousedown: dragSplitEvent
+      }), (0, _vue.h)('div', {
+        class: 'vxe-gantt--view-split-bar-btn-wrapper'
+      }, [showRightView ? (0, _vue.h)('div', {
+        class: 'vxe-gantt--view-split-bar-left-btn',
+        onClick: handleSplitLeftViewEvent
+      }, [(0, _vue.h)('i', {
+        class: showLeftView ? getIcon().GANTT_VIEW_LEFT_OPEN : getIcon().GANTT_VIEW_LEFT_CLOSE
+      })]) : renderEmptyElement($xeGantt), showLeftView ? (0, _vue.h)('div', {
+        class: 'vxe-gantt--view-split-bar-right-btn',
+        onClick: handleSplitRightViewEvent
+      }, [(0, _vue.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((0, _vue.h)('div', {
+              ref: refGanttContainer,
+              key: 'tv',
+              class: 'vxe-gantt--gantt-container'
+            }, [renderTableLeft(), renderTable(), renderSplitBar(), renderTaskView(), renderTableRight(), (0, _vue.h)('div', {
+              ref: refResizableSplitTip,
+              class: 'vxe-gantt--resizable-split-tip'
+            }, [(0, _vue.h)('div', {
+              class: 'vxe-gantt--resizable-split-tip-number'
+            }, [(0, _vue.h)('div', {
+              class: 'vxe-gantt--resizable-split-number-left'
+            }, '10px'), (0, _vue.h)('div', {
+              class: 'vxe-gantt--resizable-split-number-right'
+            }, '20px')])])]));
+            break;
+          case 'Bottom':
+            childVNs.push(renderBottom());
+            break;
+          case 'Pager':
+            childVNs.push(renderPager());
+            break;
+          default:
+            (0, _log.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 [(0, _vue.h)('div', {
+        class: 'vxe-gantt--layout-header-wrapper'
+      }, renderChildLayout(headKeys)), (0, _vue.h)('div', {
+        class: 'vxe-gantt--layout-body-wrapper'
+      }, [asideLeftSlot ? (0, _vue.h)('div', {
+        class: 'vxe-gantt--layout-aside-left-wrapper'
+      }, asideLeftSlot({})) : renderEmptyElement($xeGantt), (0, _vue.h)('div', {
+        class: 'vxe-gantt--layout-body-content-wrapper'
+      }, renderChildLayout(bodyKeys)), asideRightSlot ? (0, _vue.h)('div', {
+        class: 'vxe-gantt--layout-aside-right-wrapper'
+      }, asideRightSlot({})) : renderEmptyElement($xeGantt)]), (0, _vue.h)('div', {
+        class: 'vxe-gantt--layout-footer-wrapper'
+      }, renderChildLayout(footKeys)), (0, _vue.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 (0, _vue.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 = (0, _vue.ref)(0);
+    (0, _vue.watch)(() => props.columns ? props.columns.length : -1, () => {
+      columnFlag.value++;
+    });
+    (0, _vue.watch)(() => props.columns, () => {
+      columnFlag.value++;
+    });
+    (0, _vue.watch)(columnFlag, () => {
+      (0, _vue.nextTick)(() => $xeGantt.loadColumn(props.columns || []));
+    });
+    (0, _vue.watch)(() => props.toolbarConfig, () => {
+      initToolbar();
+    });
+    (0, _vue.watch)(computeCustomCurrentPageFlag, () => {
+      initPages('currentPage');
+    });
+    (0, _vue.watch)(computeCustomPageSizeFlag, () => {
+      initPages('pageSize');
+    });
+    (0, _vue.watch)(computeCustomTotalFlag, () => {
+      initPages('total');
+    });
+    (0, _vue.watch)(() => props.proxyConfig, () => {
+      initProxy();
+    });
+    hooks.forEach(options => {
+      const {
+        setupGantt
+      } = options;
+      if (setupGantt) {
+        const hookRest = setupGantt($xeGantt);
+        if (hookRest && _xeUtils.default.isObject(hookRest)) {
+          Object.assign($xeGantt, hookRest);
+        }
+      }
+    });
+    initPages();
+    (0, _vue.onMounted)(() => {
+      (0, _vue.nextTick)(() => {
+        const {
+          columns
+        } = props;
+        const proxyOpts = computeProxyOpts.value;
+        if (props.formConfig) {
+          if (!VxeUIFormComponent) {
+            (0, _log.errLog)('vxe.error.reqComp', ['vxe-form']);
+          }
+        }
+        if (props.pagerConfig) {
+          if (!VxeUIPagerComponent) {
+            (0, _log.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) {
+          (0, _log.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);
+    });
     (0, _vue.onUnmounted)(() => {
+      globalEvents.off($xeGantt, 'keydown');
       _xeUtils.default.assign(internalData, createInternalData());
     });
     $xeGantt.renderVN = renderVN;
+    (0, _vue.provide)('$xeGantt', $xeGantt);
     return $xeGantt;
   },
   render() {