@fesjs/fes-design/es/table/useTableColumn.js

fes-design for PC

import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import { reactive, computed } from 'vue';
import { omit } from 'lodash-es';
import { getColumns, getHeaderRows } from './helper';
import { getDefaultColProps } from './column';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
let seed = 0;

// 递归扁平化 columns
const instColumns = function () {
  let cols = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  let parent = arguments.length > 1 ? arguments[1] : undefined;
  let instList = [];
  cols.forEach(props => {
    var _props$children;
    if (!props) {
      return;
    }
    const inst = {
      id: ++seed,
      props: _objectSpread(_objectSpread({}, getDefaultColProps()), omit(props, ['renderHeader', 'render'])),
      slots: {
        header: props.renderHeader,
        default: props.render
      },
      parentId: (parent === null || parent === void 0 ? void 0 : parent.id) || null
    };
    instList.push(inst);
    if ((_props$children = props.children) !== null && _props$children !== void 0 && _props$children.length) {
      instList = instList.concat(instColumns(props.children, inst));
    }
  });
  return instList;
};
function useTableColumn (props) {
  const originColumns = reactive([]);
  const addColumn = column => {
    originColumns.push(column);
  };
  const removeColumn = id => {
    const colIndex = originColumns.findIndex(item => item.id === id);
    if (colIndex !== -1) {
      originColumns.splice(colIndex, 1);
    }
  };

  // 合并template定义和props定义的column
  const mergeColumns = computed(() => {
    var _props$columns;
    return originColumns.concat((_props$columns = props.columns) !== null && _props$columns !== void 0 && _props$columns.length ? instColumns(props.columns) : []);
  });
  const visibleColumns = computed(() => mergeColumns.value.filter(column => column.props.visible));

  // 列配置
  const columns = computed(() => getColumns(visibleColumns.value));

  // 表头Rows
  const headerRows = computed(() => getHeaderRows(visibleColumns.value));
  const noFixedColumn = computed(() => columns.value.every(column => {
    return !column.fixedLeft && !column.fixedRight;
  }));
  const columnsFixed = computed(() => {
    const mappedColumns = columns.value.map(column => {
      if (column.fixedLeft) {
        return 'left';
      }
      if (column.fixedRight) {
        return 'right';
      }
      return '';
    }).filter(fixedStatus => !!fixedStatus);
    const uniqueColumns = Array.from(new Set(mappedColumns));

    // 没有固定列
    if (uniqueColumns.length === 0) {
      return 'none';
    }
    // 两侧都有固定列
    if (uniqueColumns.length !== 1) {
      return 'both';
    }
    // 仅有一侧有固定列
    return uniqueColumns[0];
  });
  return {
    addColumn,
    removeColumn,
    headerRows,
    columns,
    noFixedColumn,
    columnsFixed
  };
}

export { useTableColumn as default };