grid-control.util.ts 5.7 KB
Newer Older
1 2
/* eslint-disable no-param-reassign */
import { GridController } from '@ibiz-template/controller';
3 4 5 6 7 8
import {
  GridColumnModel,
  GridFieldColumnModel,
  GridGroupColumnModel,
  GridModel,
} from '@ibiz-template/model';
9 10 11
import { ControlVO } from '@ibiz-template/service';
import { computed, ref } from 'vue';

12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
export function generateColumnData(column: GridColumnModel, c: GridController) {
  const columnChildren: IData[] = [];
  if (column.source.columnType === 'GROUPGRIDCOLUMN') {
    // 如果是分组列,递归生成children
    (column as GridGroupColumnModel).children.forEach(child => {
      columnChildren.push(generateColumnData(child, c));
    });
  }
  const columnData = {
    title: column.title,
    width: column.source.widthUnit === 'STAR' ? undefined : column.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,
32
    columnType: column.source.columnType,
33
    userParams: column.source.userParams,
34
    className: column.source.getCellPSSysCss()?.cssName,
35 36 37 38 39 40 41
  };
  if (columnChildren.length > 0) {
    Object.assign(columnData, { children: columnChildren });
  }
  return columnData;
}

42 43 44 45 46 47 48 49 50 51 52
/**
 * 生成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;
53 54 55 56 57 58 59 60 61 62 63 64 65
  const columns: IData[] = [];
  // 生成所有表格列对应的iView表格需要的对象
  const tempColumns: IData[] = gridModel.columns.map(column => {
    return generateColumnData(column, c);
  });
  // 根据表格第一层的子去生成iView表格需要的columns
  gridModel.children.forEach((childColumn: GridColumnModel) => {
    const tempColumn = tempColumns.find(column => {
      return column.key === childColumn.codeName;
    });
    if (tempColumn) {
      columns.push(tempColumn);
    }
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
  });

  // 多选的时候给第一列添加选择列
  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,
      };
    }
111 112 113
    // 如果是操作列,固定右边
    const uaColumn = copy.find(column => column.columnType === 'UAGRIDCOLUMN');
    if (uaColumn) {
114 115 116 117
      const userParams = uaColumn.userParams;
      if (userParams && userParams.fixed === 'true') {
        uaColumn.fixed = 'right';
      }
118
    }
119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
    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) {
142 143 144 145
      const selectedItem = c.selectedData.find(
        item => item.srfkey === data.srfkey,
      );
      c.onSelectionChange(selectedItem ? [] : [origin]);
146 147 148 149 150 151 152 153 154 155 156
    }
    c.onRowClick(origin);
  }

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

  function onSelectionChange(selection: IData[]) {
    // 单选的时候选中效果靠点击事件
    if (!c.singleSelect) {
157 158 159 160 161 162 163
      const origins: IData[] = [];
      selection.forEach(item => {
        const find = getOriginData(item);
        if (find) {
          origins.push(find);
        }
      });
164 165 166 167 168 169 170
      c.onSelectionChange(origins);
    }
  }

  function onSortChange(opts: {
    column: IData;
    key: string;
171
    order: 'asc' | 'desc' | 'normal';
172
  }) {
173 174 175
    const { column, order } = opts;
    const order1 = order === 'asc' || order === 'desc' ? order : undefined;
    c.setSort(column.fieldName, order1);
176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216
    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 };
}