vxe-gantt/lib/gantt/src/gantt-chart.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 _core = require("@vxe-ui/core");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _util = require("./util");
var _utils = require("../../ui/src/utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const {
  renderEmptyElement
} = _core.VxeUI;
var _default = exports.default = (0, _comp.defineVxeComponent)({
  name: 'VxeGanttViewChart',
  setup() {
    const $xeGantt = (0, _vue.inject)('$xeGantt', {});
    const $xeGanttView = (0, _vue.inject)('$xeGanttView', {});
    const {
      reactData,
      internalData
    } = $xeGanttView;
    const {
      computeProgressField,
      computeTitleField,
      computeTaskBarOpts
    } = $xeGantt.getComputeMaps();
    const refElem = (0, _vue.ref)();
    const renderTaskBar = ($xeTable, row, rowid, $rowIndex) => {
      const tableProps = $xeTable.props;
      const {
        treeConfig
      } = tableProps;
      const tableReactData = $xeTable.reactData;
      const {
        resizeHeightFlag
      } = tableReactData;
      const tableInternalData = $xeTable.internalData;
      const {
        fullAllDataRowIdData
      } = tableInternalData;
      const {
        computeCellOpts,
        computeRowOpts,
        computeDefaultRowHeight
      } = $xeTable.getComputeMaps();
      const cellOpts = computeCellOpts.value;
      const rowOpts = computeRowOpts.value;
      const defaultRowHeight = computeDefaultRowHeight.value;
      const ganttSlots = $xeGantt.context.slots;
      const taskBarSlot = ganttSlots.taskBar || ganttSlots['task-bar'];
      const titleField = computeTitleField.value;
      const progressField = computeProgressField.value;
      const taskBarOpts = computeTaskBarOpts.value;
      const {
        showProgress,
        showContent,
        contentMethod,
        barStyle
      } = taskBarOpts;
      const {
        round
      } = barStyle || {};
      const rowRest = fullAllDataRowIdData[rowid] || {};
      const resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0;
      const isRsHeight = resizeHeight > 0;
      const cellHeight = (0, _util.getCellRestHeight)(rowRest, cellOpts, rowOpts, defaultRowHeight);
      let title = (0, _utils.getStringValue)(_xeUtils.default.get(row, titleField));
      const progressValue = showProgress ? Math.min(100, Math.max(0, _xeUtils.default.toNumber(_xeUtils.default.get(row, progressField)))) : 0;
      if (contentMethod) {
        title = (0, _utils.getStringValue)(contentMethod({
          row,
          title
        }));
      }
      return (0, _vue.h)('div', {
        key: treeConfig ? rowid : $rowIndex,
        rowid,
        class: ['vxe-gantt-view--chart-row', {
          'is--round': round,
          'col--rs-height': isRsHeight
        }],
        style: {
          height: `${cellHeight}px`
        }
      }, [(0, _vue.h)('div', {
        class: taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar',
        rowid,
        onClick(evnt) {
          $xeGantt.handleTaskBarClickEvent(evnt, {
            row
          });
        },
        onDblclick(evnt) {
          $xeGantt.handleTaskBarDblclickEvent(evnt, {
            row
          });
        }
      }, taskBarSlot ? $xeGantt.callSlot(taskBarSlot, {
        row
      }) : [showProgress ? (0, _vue.h)('div', {
        class: 'vxe-gantt-view--chart-progress',
        style: {
          width: `${progressValue || 0}%`
        }
      }) : renderEmptyElement($xeGantt), showContent ? (0, _vue.h)('div', {
        class: 'vxe-gantt-view--chart-content'
      }, title) : renderEmptyElement($xeGantt)])]);
    };
    const renderRows = ($xeTable, tableData) => {
      const tableProps = $xeTable.props;
      const {
        treeConfig
      } = tableProps;
      const tableReactData = $xeTable.reactData;
      const {
        treeExpandedFlag
      } = tableReactData;
      const tableInternalData = $xeTable.internalData;
      const {
        treeExpandedMaps
      } = tableInternalData;
      const {
        computeTreeOpts
      } = $xeTable.getComputeMaps();
      const treeOpts = computeTreeOpts.value;
      const {
        transform
      } = treeOpts;
      const childrenField = treeOpts.children || treeOpts.childrenField;
      const {
        scrollYLoad
      } = reactData;
      const trVNs = [];
      tableData.forEach((row, $rowIndex) => {
        const rowid = $xeTable ? $xeTable.getRowid(row) : '';
        trVNs.push(renderTaskBar($xeTable, row, rowid, $rowIndex));
        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
      } = reactData;
      return (0, _vue.h)('div', {
        ref: refElem,
        class: 'vxe-gantt-view--chart-wrapper'
      }, $xeTable ? renderRows($xeTable, tableData) : []);
    };
    (0, _vue.onMounted)(() => {
      const {
        elemStore
      } = internalData;
      const prefix = 'main-chart-';
      elemStore[`${prefix}wrapper`] = refElem;
    });
    (0, _vue.onUnmounted)(() => {
      const {
        elemStore
      } = internalData;
      const prefix = 'main-chart-';
      elemStore[`${prefix}wrapper`] = null;
    });
    return renderVN;
  }
});