grid-control.util.ts

/* eslint-disable no-param-reassign */
import { GridController } from '@ibiz-template/controller';
import { GridFieldColumnModel, GridModel } from '@ibiz-template/model';
import { ControlVO } from '@ibiz-template/service';
import { computed, ref } from 'vue';

/**
 * 生成iViewTable要用的columns
 *
 * @author lxm
 * @date 2022-08-31 19:08:34
 * @export
 * @param {GridController} c
 * @returns {*}  {IData[]}
 */
export function generateIViewColumns(c: GridController): IData[] {
  const gridModel: GridModel = c.model;
  const columns: IData[] = gridModel.columns.map(column => {
    const width = column.source.widthUnit === 'STAR' ? undefined : column.width;
    return {
      title: column.title,
      width,
      minWidth: column.width,
      align: column.source.align?.toLowerCase() || 'center',
      slot: column.codeName,
      key: column.codeName,
      fieldName: (column as GridFieldColumnModel).deFieldName,
      ellipsis: true,
      tooltip: false, // todo 表格提示用title
      resizable: true,
      sortable: !c.noSort && column.source.enableSort ? 'custom' : false,
    };
  });

  // 多选的时候给第一列添加选择列
  if (!c.singleSelect) {
    columns.splice(0, 0, { type: 'selection', width: 60 });
  }

  return columns;
}

/**
 * 获取iview的Table使用的columns响应式变量
 *
 * @author lxm
 * @date 2022-08-18 19:08:22
 * @export
 * @param {GridController} c
 * @returns [columns, originColumns 原始]
 */
export function useITableColumns(c: GridController) {
  // 原始iview用列数据
  const originColumns = ref<IData[]>([]);

  c.nerve.self.evt.on('created', () => {
    originColumns.value = generateIViewColumns(c);
  });

  // 实际iview使用的columns
  const columns = computed(() => {
    // 先浅拷贝
    const copy = [...originColumns.value];

    // 如果没有自适应列，深拷贝最后一个对象，改成自适应
    const flexColumn = copy.find(column => !column.width);
    if (!flexColumn) {
      // 修改自适应列的索引，默认最后一个
      let index = copy.length - 1;
      if (copy[index].key === 'rowEdit') {
        index -= 1;
      }
      copy[index] = {
        ...copy[index],
        width: undefined,
      };
    }
    return copy;
  });
  return [columns, originColumns];
}

/**
 * 适配iview的table的事件
 *
 * @author lxm
 * @date 2022-09-05 21:09:42
 * @export
 * @param {GridController} c
 * @returns {*}
 */
export function useITableEvent(c: GridController) {
  const getOriginData = (data: IData): ControlVO => {
    return c.items.find(item => item.srfkey === data.srfkey)!;
  };

  function onRowClick(data: IData) {
    const origin = getOriginData(data);
    // 单选的时候选中效果靠这个回调
    if (c.singleSelect) {
      c.onSelectionChange([origin]);
    }
    c.onRowClick(origin);
  }

  function onDbRowClick(data: IData) {
    c.onDbRowClick(getOriginData(data));
  }

  function onSelectionChange(selection: IData[]) {
    // 单选的时候选中效果靠点击事件
    if (!c.singleSelect) {
      const origins = selection.map(item => getOriginData(item));
      c.onSelectionChange(origins);
    }
  }

  function onSortChange(opts: {
    column: IData;
    key: string;
    order: 'asc' | 'desc' | 'normal';
  }) {
    const { column, order } = opts;
    const order1 = order === 'asc' || order === 'desc' ? order : undefined;
    c.setSort(column.fieldName, order1);
    c.load();
  }
  return { onRowClick, onDbRowClick, onSelectionChange, onSortChange };
}

/**
 * 使用表格分页组件
 *
 * @author lxm
 * @date 2022-09-06 17:09:09
 * @export
 * @param {GridController} c
 * @returns {*}
 */
export function useAppGridPagination(c: GridController) {
  function onPageChange(page: number) {
    if (!page || page === c.curPage) {
      return;
    }
    c.curPage = page;
    c.load();
  }

  function onPageSizeChange(size: number) {
    if (!size || size === c.size) {
      return;
    }
    c.size = size;

    // 当page为第一页的时候切换size不会触发pageChange，需要自己触发加载
    if (c.curPage === 1) {
      c.load();
    }
  }

  function onPageReset() {
    c.curPage = 1;
    c.load();
  }
  return { onPageChange, onPageSizeChange, onPageReset };
}