@fe6/water-pro/es/table-pro/src/components/table-footer.js

An enterprise-class UI design language and Vue-based implementation

import { createVNode as _createVNode } from "vue";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { defineComponent, unref, computed, toRaw } from 'vue';
import { default as Table } from '../../../table';
import { cloneDeep } from 'lodash-es';
import { isFunction } from '@fe6/shared';
import { INDEX_COLUMN_FLAG } from '../const';
import PropTypes from '../../../_util/vue-types';
import { useTableContext } from '../hooks/use-table-context';
var SUMMARY_ROW_KEY = '_row';
var SUMMARY_INDEX_KEY = '_index';
export default defineComponent({
  name: 'TableProFooter',
  props: {
    summaryFunc: {
      type: Function
    },
    summaryData: {
      type: Array
    },
    scroll: {
      type: Object
    },
    rowKey: PropTypes.string.def('key')
  },
  setup: function setup(props) {
    var table = useTableContext();
    var getDataSource = computed(function () {
      var summaryFunc = props.summaryFunc,
          summaryData = props.summaryData;

      if (summaryData === null || summaryData === void 0 ? void 0 : summaryData.length) {
        summaryData.forEach(function (item, i) {
          return item[props.rowKey] = "".concat(i);
        });
        return summaryData;
      }

      if (!isFunction(summaryFunc)) {
        return [];
      }

      var dataSource = toRaw(unref(table.getDataSource()));
      dataSource = summaryFunc(dataSource);
      dataSource.forEach(function (item, i) {
        item[props.rowKey] = "".concat(i);
      });
      return dataSource;
    });
    var getColumns = computed(function () {
      var dataSource = unref(getDataSource);
      var columns = cloneDeep(table.getColumns());
      var index = columns.findIndex(function (item) {
        return item.flag === INDEX_COLUMN_FLAG;
      });
      var hasRowSummary = dataSource.some(function (item) {
        return Reflect.has(item, SUMMARY_ROW_KEY);
      });
      var hasIndexSummary = dataSource.some(function (item) {
        return Reflect.has(item, SUMMARY_INDEX_KEY);
      });

      if (index !== -1) {
        if (hasIndexSummary) {
          columns[index].customRender = function (_ref) {
            var record = _ref.record;
            return record[SUMMARY_INDEX_KEY];
          };

          columns[index].ellipsis = false;
        } else {
          Reflect.deleteProperty(columns[index], 'customRender');
        }
      }

      if (table.getRowSelection() && hasRowSummary) {
        var isFixed = columns.some(function (col) {
          return col.fixed === 'left';
        });
        columns.unshift(_extends(_extends({
          width: 60,
          title: 'selection',
          key: 'selectionKey',
          align: 'center'
        }, isFixed ? {
          fixed: 'left'
        } : {}), {
          customRender: function customRender(_ref2) {
            var record = _ref2.record;
            return record[SUMMARY_ROW_KEY];
          }
        }));
      }

      return columns;
    });
    return {
      getColumns: getColumns,
      getDataSource: getDataSource
    };
  },
  render: function render() {
    var _this = this;

    var footerNode = null;

    if (this.summaryFunc || this.summaryData) {
      footerNode = _createVNode(Table, {
        "show-header": false,
        "bordered": false,
        "pagination": false,
        "data-source": this.getDataSource,
        "row-key": function rowKey(r) {
          return r[_this.rowKey];
        },
        "columns": this.getColumns,
        "table-layout": "fixed",
        "scroll": this.scroll
      }, null);
    }

    return footerNode;
  }
});