vxe-gantt/lib/gantt/src/gantt-body.js

A vue based gantt component

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _comp = require("../../ui/src/comp");
var _util = require("./util");
var _ganttChart = _interopRequireDefault(require("./gantt-chart"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = (0, _comp.defineVxeComponent)({
  name: 'VxeGanttViewBody',
  setup() {
    const $xeGantt = (0, _vue.inject)('$xeGantt', {});
    const $xeGanttView = (0, _vue.inject)('$xeGanttView', {});
    const {
      reactData,
      internalData
    } = $xeGanttView;
    const refElem = (0, _vue.ref)();
    const refBodyScroll = (0, _vue.ref)();
    const refBodyTable = (0, _vue.ref)();
    const refBodyXSpace = (0, _vue.ref)();
    const refBodyYSpace = (0, _vue.ref)();
    const renderColumn = ($xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex, column, $columnIndex) => {
      const tableReactData = $xeTable.reactData;
      const {
        resizeHeightFlag
      } = tableReactData;
      const tableInternalData = $xeTable.internalData;
      const {
        fullAllDataRowIdData,
        visibleColumn
      } = tableInternalData;
      const {
        computeCellOpts,
        computeRowOpts,
        computeDefaultRowHeight,
        computeResizableOpts
      } = $xeTable.getComputeMaps();
      const cellOpts = computeCellOpts.value;
      const rowOpts = computeRowOpts.value;
      const defaultRowHeight = computeDefaultRowHeight.value;
      const resizableOpts = computeResizableOpts.value;
      const {
        isAllRowDrag
      } = resizableOpts;
      const rowRest = fullAllDataRowIdData[rowid] || {};
      const resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0;
      const isRsHeight = resizeHeight > 0;
      const cellHeight = (0, _util.getCellRestHeight)(rowRest, cellOpts, rowOpts, defaultRowHeight);
      const tdVNs = [];
      if (isAllRowDrag && rowOpts.resizable) {
        const cellParams = {
          $table: $xeTable,
          $grid: null,
          $gantt: $xeGantt,
          seq: -1,
          rowid,
          row,
          rowIndex,
          $rowIndex,
          _rowIndex,
          column: visibleColumn[0],
          columnIndex: 0,
          $columnIndex: 0,
          _columnIndex: 0,
          fixed: '',
          type: '',
          isHidden: false,
          isEdit: false,
          level: -1,
          // 已废弃属性
          visibleData: [],
          data: [],
          items: []
        };
        tdVNs.push((0, _vue.h)('div', {
          class: 'vxe-gantt-view-cell--row-resizable',
          onMousedown: evnt => $xeTable.handleRowResizeMousedownEvent(evnt, cellParams),
          onDblclick: evnt => $xeTable.handleRowResizeDblclickEvent(evnt, cellParams)
        }));
      }
      return (0, _vue.h)('td', {
        key: $columnIndex,
        class: ['vxe-gantt-view--body-column', {
          'col--rs-height': isRsHeight
        }],
        style: {
          height: `${cellHeight}px`
        },
        onClick(evnt) {
          $xeGantt.handleTaskCellClickEvent(evnt, {
            row,
            column
          });
        },
        onDblclick(evnt) {
          $xeGantt.handleTaskCellDblclickEvent(evnt, {
            row,
            column
          });
        }
      }, tdVNs);
    };
    const renderRows = ($xeTable, tableData) => {
      const tableProps = $xeTable.props;
      const {
        treeConfig,
        stripe,
        highlightHoverRow,
        editConfig
      } = tableProps;
      const tableReactData = $xeTable.reactData;
      const {
        treeExpandedFlag,
        selectRadioRow,
        pendingRowFlag,
        isRowGroupStatus
      } = tableReactData;
      const tableInternalData = $xeTable.internalData;
      const {
        fullAllDataRowIdData,
        treeExpandedMaps,
        pendingRowMaps
      } = tableInternalData;
      const {
        computeRadioOpts,
        computeCheckboxOpts,
        computeTreeOpts,
        computeRowOpts
      } = $xeTable.getComputeMaps();
      const radioOpts = computeRadioOpts.value;
      const checkboxOpts = computeCheckboxOpts.value;
      const rowOpts = computeRowOpts.value;
      const treeOpts = computeTreeOpts.value;
      const {
        transform
      } = treeOpts;
      const childrenField = treeOpts.children || treeOpts.childrenField;
      const {
        tableColumn,
        scrollYLoad
      } = reactData;
      const trVNs = [];
      tableData.forEach((row, $rowIndex) => {
        const rowid = $xeTable.getRowid(row);
        const rowRest = fullAllDataRowIdData[rowid] || {};
        const trOns = {};
        let rowIndex = $rowIndex;
        let _rowIndex = -1;
        if (rowRest) {
          rowIndex = rowRest.index;
          _rowIndex = rowRest._index;
        }
        // 是否新增行
        let isNewRow = false;
        if (editConfig) {
          isNewRow = $xeTable.isInsertByRow(row);
        }
        // 当前行事件
        if (rowOpts.isHover || highlightHoverRow) {
          trOns.onMouseenter = evnt => {
            $xeTable.triggerHoverEvent(evnt, {
              row,
              rowIndex
            });
          };
          trOns.onMouseleave = () => {
            $xeTable.clearHoverRow();
          };
        }
        // 拖拽行事件
        if (rowOpts.drag && !isRowGroupStatus && (!treeConfig || transform)) {
          trOns.onDragstart = $xeTable.handleRowDragDragstartEvent;
          trOns.onDragend = $xeTable.handleRowDragDragendEvent;
          trOns.onDragover = $xeTable.handleRowDragDragoverEvent;
        }
        trVNs.push((0, _vue.h)('tr', Object.assign({
          key: treeConfig ? rowid : $rowIndex,
          class: ['vxe-gantt-view--body-row', {
            'row--stripe': stripe && (_rowIndex + 1) % 2 === 0,
            'is--new': isNewRow,
            'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
            'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
            'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid]
          }],
          rowid
        }, trOns), tableColumn.map((column, $columnIndex) => renderColumn($xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex, column, $columnIndex))));
        let isExpandTree = false;
        let rowChildren = [];
        if (treeConfig && !scrollYLoad && !transform) {
          rowChildren = row[childrenField];
          isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid];
        }
        // 如果是树形表格
        if (isExpandTree) {
          trVNs.push(...renderRows($xeTable, rowChildren));
        }
      });
      return trVNs;
    };
    const renderVN = () => {
      const $xeTable = $xeGanttView.internalData.xeTable;
      const {
        tableData,
        tableColumn,
        viewCellWidth
      } = reactData;
      return (0, _vue.h)('div', {
        ref: refElem,
        class: 'vxe-gantt-view--body-wrapper'
      }, [(0, _vue.h)('div', {
        ref: refBodyScroll,
        class: 'vxe-gantt-view--body-inner-wrapper',
        onScroll: $xeGanttView.triggerBodyScrollEvent
      }, [(0, _vue.h)('div', {
        ref: refBodyXSpace,
        class: 'vxe-body--x-space'
      }), (0, _vue.h)('div', {
        ref: refBodyYSpace,
        class: 'vxe-body--y-space'
      }), (0, _vue.h)('table', {
        ref: refBodyTable,
        class: 'vxe-gantt-view--body-table'
      }, [(0, _vue.h)('colgroup', {}, tableColumn.map((column, cIndex) => {
        return (0, _vue.h)('col', {
          key: cIndex,
          style: {
            width: `${viewCellWidth}px`
          }
        });
      })), (0, _vue.h)('tbody', {}, $xeTable ? renderRows($xeTable, tableData) : [])]), (0, _vue.h)(_ganttChart.default)])]);
    };
    (0, _vue.onMounted)(() => {
      const {
        elemStore
      } = internalData;
      const prefix = 'main-body-';
      elemStore[`${prefix}wrapper`] = refElem;
      elemStore[`${prefix}scroll`] = refBodyScroll;
      elemStore[`${prefix}table`] = refBodyTable;
      elemStore[`${prefix}xSpace`] = refBodyXSpace;
      elemStore[`${prefix}ySpace`] = refBodyYSpace;
    });
    (0, _vue.onUnmounted)(() => {
      const {
        elemStore
      } = internalData;
      const prefix = 'main-body-';
      elemStore[`${prefix}wrapper`] = null;
      elemStore[`${prefix}scroll`] = null;
      elemStore[`${prefix}table`] = null;
      elemStore[`${prefix}xSpace`] = null;
      elemStore[`${prefix}ySpace`] = null;
    });
    return renderVN;
  }
});