@lx-frontend/wrap-element-ui 0.4.6-beta.1 → 1.0.0-beta

package/src/components/EditableTable/types.ts

@@ -0,0 +1,94 @@
+export enum IEditType {
+  INPUT = 'input',
+  SELECT = 'select',
+  DATE_ONLY = 'date'
+}
+
+export interface IColumnConfigRequired {
+  prop: string;
+  label: string;
+  editType?: IEditType; // 编辑格式
+  sortable?: boolean; // 该列是否允许排序，ture则表头弹窗会显示升降序按钮
+  slotName?: string; // 如果要自定义，传入 slotName
+  isAlwaysShow?: boolean; // 不可隐藏，显示设置中，该列不允许隐藏
+  isColumnSearchAble?: boolean; // 列是否允许搜索，true则表头弹窗会多一个搜索框
+  summary?: boolean; // 是否可以显示该列的统计
+  summaryMethod?: (values: any[]) => string | number; // 这一列的统计方法，values为该列的所有值
+  // filters?: {value: string | number; text: string; [key: string]: any}[];
+  // 透传el-table column有的属性， https://element.eleme.cn/#/en-US/component/table#table-column-attributes
+  [key: string]: any;
+}
+
+type IInputColumn = IColumnConfigRequired & {
+  inputType: string | number;
+}
+
+type ISelectColumn = IColumnConfigRequired & {
+  options: {key: string; value: string | number; [key: string]: any}[];
+}
+
+type IDateOnlyColumn = IColumnConfigRequired & {}
+type IDateTimeColumn = IColumnConfigRequired & {}
+
+export type IColumnConfig = IInputColumn | ISelectColumn | IDateOnlyColumn | IDateTimeColumn
+
+export type IColorList = {
+  name: string; // 颜色名称
+  textColor: string; // 颜色弹窗中文本颜色
+  sampleColor: string; // 颜色弹窗中样例的颜色
+  bgColor: string; // 选中颜色后，行背景色
+  id: number; // 颜色id
+  default?: boolean // 是否是默认色，默认色需要显示颜色图标
+}[]
+
+type IPointLoc = {
+  x: number;
+  y: number;
+}
+export type IDraggingData = {
+  isDragging?: boolean
+  startPosition?: IPointLoc
+  draggingRow?: HTMLElement | HTMLElement[]
+  draggingIndex?: number
+  dropIndex?: number
+  rowDoms?: Record<number, HTMLElement[]>
+  rowHeight?: number
+  rowsRange?: ([number, number] | undefined)[]
+  hiddenTds?: HTMLElement[]
+  fullScreenDiv?: HTMLElement
+}
+
+export type IDefaultOperationType = 'edit' | 'delete' | 'top'
+
+export type ITableDataItem = {
+  colorId?: number;
+  isPinned?: boolean;
+  [k: string]: any;
+}
+
+export interface IProps {
+  dataList: ITableDataItem[];
+  columnConfig: IColumnConfig[];
+  hasExpandRow?: boolean;
+  hasIndexColumn?: boolean;
+  hasSelectionColumn?: boolean;
+  rowDragAble?: boolean;
+  total: number;
+  defaultOperations?: IDefaultOperationType[];
+  colorList?: IColorList;
+  leftFixedCount?: number;
+  dragSemiRange?: number;
+  loading?: boolean;
+}
+
+export interface IEmits {
+  (e: 'selection-change', selection: any): void
+  (e: 'row-bg-change', param: {colorId: number; row: ITableDataItem; rowIndex: number}): void
+  (e: 'row-drag-drop', param: { row: any; fromIndex: number; toIndex: number; page: number; size: number;}): void
+  (e: 'row-delete', param: { row: any; index: number; page: number; size: number; }): void
+  (e: 'row-edit', param: { row: any, index: number; page: number; size: number;}): void
+  (e: 'row-pin-to-top', param: { row: any, rawIndex: number; page: number; size: number;}): void
+  (e: 'row-edit-save', param: { page: number; size: number; row: any; changedData: Record<string, any>; }): void
+  (e: 'row-edit-cancel', param: { row: any; page: number; size: number;}): void
+  (e: 'page-change', param: { page: number, size: number }): void
+}

package/src/components/EditableTable/useCellHover.ts

@@ -0,0 +1,72 @@
+import debounce from 'lodash/debounce';
+import throttle from 'lodash/throttle';
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+export default function useCellHover(tableDomRef) {
+
+  // 鼠标悬浮的行
+  const hoveringCellInfo = ref<{
+    rowIndex: number;
+    columnProperty: string;
+  }>({ rowIndex: -1, columnProperty: ''});
+
+  const isMouseWheeling = ref(false);
+
+  onMounted(() => {
+    tableDomRef.value.$el.addEventListener('mouseleave', resetHoveringCellInfo);
+    document.addEventListener('wheel', throttledHandleMouseWheel);
+  })
+
+  onBeforeUnmount(() => {
+    tableDomRef.value.$el.removeEventListener('mouseleave', resetHoveringCellInfo);
+    document.removeEventListener('wheel', throttledHandleMouseWheel);
+  })
+
+  const setCellClassName = ({ column, rowIndex }) => {
+    // hoving-cell-[name]-[rowIndex]
+    if (!column.property) return '';
+    return `hoving-cell-(${column.property})-(${rowIndex})`;
+  }
+
+  const resetHoveringCellInfo = () => {
+    hoveringCellInfo.value = {
+      rowIndex: -1,
+      columnProperty: ''
+    };
+  }
+
+  let timerHandler: any = null
+  // 性能考虑，在鼠标滚动时，停止处理cell的hover事件
+  const handleMouseWheel = () => {
+    isMouseWheeling.value = true;
+    clearTimeout(timerHandler);
+    // 停止滚动后，恢复hover事件
+    timerHandler = setTimeout(() => {
+      isMouseWheeling.value = false;
+    }, 100)
+  }
+  const throttledHandleMouseWheel = throttle(handleMouseWheel, 50);
+
+  const handleCellMouseEnter = (row, column, cell, event) => {
+    // 性能考虑，表格滚动时会不断触发该事件，导致滚动性能变差
+    if (isMouseWheeling.value) return
+
+    const className = [...event.target.classList].find(c => /hoving-cell-\(\w+\)-\(\d+\)/.test(c))
+    if (!className) return;
+    // 正则匹配括号中的内容
+    const matchArr = className.match(/hoving-cell-\((\w+)\)-\((\d+)\)/);
+
+    hoveringCellInfo.value = {
+      rowIndex: +matchArr?.[2],
+      columnProperty: matchArr?.[1]
+    }
+  }
+
+  const debouncedHoverHandler = debounce(handleCellMouseEnter, 10);
+
+  return {
+    hoveringCellInfo,
+    setCellClassName,
+    debouncedHoverHandler
+  }
+}

package/src/components/EditableTable/useColumnHeaderOperation.ts

@@ -0,0 +1,188 @@
+import { computed, ref, watch, nextTick } from "vue"
+import { IColumnConfig, IProps } from './types';
+
+interface IUseColumnHeaderOperationParams {
+  props: IProps
+  tableDomRef: any
+  sortFilterPopoverRef: any
+}
+
+export default function useColumnHeaderOperation({props, tableDomRef, sortFilterPopoverRef}: IUseColumnHeaderOperationParams) {
+
+  // column如果有sortable属性，点击列头部，会直接触发排序，为了在弹窗点确定时再触发排序，需要阻止点击立即排序
+  // 所以，初始渲染时，将sortable设置为false，在触发排序逻辑时再设置成真实的值，再利用el-table自身的排序逻辑触发排序
+  const inSorting = ref(false);
+
+  // 生效中的排序配置
+  const sortType = ref<'ascending' | 'descending' | null>(null);
+  const sortingColumn = ref<IColumnConfig | null>(null);
+
+  // 临时的排序配置
+  const tempSortType = ref<'ascending' | 'descending' | null>(null);
+  const tempSortingColumn = ref<IColumnConfig | null>(null);
+
+  // 生效中的过滤配置 和 临时过滤配置
+  const filteredValue = ref<Record<string, string[]>>({});
+  const tempFilteredValue = ref<Record<string, string[]>>({});
+
+  // 生效中的统计配置 和 临时统计配置
+  const tempSummaryList = ref<string[]>([]);
+  const summaryList = ref<string[]>([]);
+
+  // 生效中的搜索配置 和 临时搜索配置
+  const searchValue = ref<Record<string, string>>({});
+  const tempSearchValue = ref<Record<string, string>>({});
+
+  const isColumnFiltering = computed(() => Object.keys(tempFilteredValue.value).some(k => tempFilteredValue.value[k]?.length));
+
+  const showColumnHeadSortIcon = (column: IColumnConfig) => column.filters || column.isColumnSortable || column.isColumnSearchAble || column.summary;
+
+  watch(
+    () => props.columnConfig,
+    (val) => {
+      filteredValue.value = val.reduce((prev, curr) => ({...prev, [curr.prop]: []}), {});
+      tempFilteredValue.value = { ...filteredValue.value };
+    },
+    { immediate: true }
+  )
+
+  const tableSummaryMethod = (param) => {
+    const { columns, data } = param;
+    const sums: (string | number)[] = []
+    columns.forEach((column, index) => {
+      if (index === 0) {
+        sums[index] = '合计';
+        return;
+      }
+      if (!summaryList.value.includes(column.property)) {
+        sums[index] = '';
+      } else {
+        const values = data.map(item => item[column.property]);
+        // 找到对应列的summaryMethod函数
+        const summaryMethod = props.columnConfig.find(c => c.prop === column.property)?.summaryMethod ?? (() => '');
+        sums[index] = summaryMethod(values);
+      }
+    })
+  
+    return sums
+  }
+
+  const isColumnHeadActive = (column: IColumnConfig) => {
+    return filteredValue.value[column.prop]?.length ||
+      sortingColumn.value?.prop === column.prop ||
+      searchValue.value[column.prop] || 
+      summaryList.value.includes(column.prop);
+  }
+
+  const handleHeaderPopoverShow = (column) => {
+    // 关闭其他的排序和筛选弹窗（理论上不写也能关闭其他，但是就是有些列会出现两个弹窗同时出现的情况）
+    closeSortAndFilterPopover(column.prop);
+    tempFilteredValue.value = { ...filteredValue.value };
+    tempSearchValue.value = { ...searchValue.value };
+    tempSortType.value = sortType.value;
+    tempSortingColumn.value = sortingColumn.value ? { ...sortingColumn.value } as IColumnConfig : null;
+    // 临时合计项设置成实际的合计项
+    tempSummaryList.value = [ ...summaryList.value ];
+  }
+
+  const closeSortAndFilterPopover = (exceptProp?: string) => {
+    sortFilterPopoverRef.value?.forEach((item: any) => {
+      if (!exceptProp || exceptProp !== item.$el.dataset.prop) {
+        item.doClose();
+      }
+    });
+  }
+
+  const handleSort = (type: 'ascending' | 'descending', column) => {
+    tempSortType.value = type;
+    tempSortingColumn.value = column;
+  }
+
+  const handleHeaderOperationConfirm = async (scope) => {
+    summaryList.value = [ ...tempSummaryList.value ];
+    sortingColumn.value = tempSortingColumn.value ? {...tempSortingColumn.value} : null;
+    sortType.value = tempSortType.value;
+    if (sortingColumn.value) {
+      // 恢复列配置的sortable属性，只有列配置的sortable为true，才能用下面的sort方法
+      inSorting.value = true;
+      await nextTick();
+      tableDomRef.value?.sort(sortingColumn.value.prop, sortType.value);
+      inSorting.value = false
+    }
+
+    filteredValue.value = { ...tempFilteredValue.value };
+    searchValue.value = { ...tempSearchValue.value };
+
+    filterColumns(scope.store);
+
+    closeSortAndFilterPopover();
+    await nextTick()
+    tableDomRef.value?.doLayout();
+  }
+
+  const handleHeaderOperationReset = async (column, scope) => {
+    if (sortingColumn.value && sortingColumn.value.prop === column.prop) {
+      tableDomRef.value?.clearSort();
+      sortingColumn.value = null;
+      sortType.value = null;
+    }
+
+    // 合计
+    summaryList.value = summaryList.value.filter(item => item !== column.prop);
+
+    filteredValue.value[column.prop] = [];
+    searchValue.value[column.prop] = '';
+    filterColumns(scope.store);
+
+    closeSortAndFilterPopover();
+    await nextTick();
+    tableDomRef.value?.doLayout();
+  }
+
+  const filterColumns = (store) => {
+    store.states.columns.forEach(column => {
+      if (filteredValue.value[column.property]) {
+        store.commit('filterChange', {
+          column,
+          values: filteredValue.value[column.property],
+        });
+      }
+    });
+
+    // 根据searchValue过滤数据
+    const data = store.states.data.filter(item => {
+      const flag = Object.keys(searchValue.value)
+        .filter(key => searchValue.value[key])
+        .reduce((pre, key) => {
+          const value = searchValue.value[key];
+
+          return pre && item[key] && `${item[key]}`.indexOf(value) > -1;
+        }, true);
+
+      return flag;
+    });
+
+    store.states.data = data;
+  }
+
+  return {
+    isColumnHeadActive,
+    handleHeaderPopoverShow,
+    handleSort,
+    handleHeaderOperationConfirm,
+    handleHeaderOperationReset,
+    summaryList,
+    tableSummaryMethod,
+    filteredValue,
+    showColumnHeadSortIcon,
+    tempSortingColumn,
+    tempSearchValue,
+    tempFilteredValue,
+    tempSummaryList,
+    tempSortType,
+    sortingColumn,
+    isColumnFiltering,
+    searchValue,
+    inSorting
+  }
+}

package/src/components/EditableTable/useDefaultOperation.ts

@@ -0,0 +1,96 @@
+import { Ref, ref } from "vue"
+import { IEmits } from "./types"
+
+interface IParams {
+  emit: IEmits;
+  pageSize: Ref<number>;
+  currentPage: Ref<number>;
+  tableDomRef: Ref<any>;
+  hasExpandRow: boolean
+}
+
+export default function useDefaultOperation({emit, pageSize, currentPage, tableDomRef, hasExpandRow}: IParams) {
+  const operationPopoverRef = ref<any>(null);
+  const editingRowData = ref<Record<string, any>>({});
+  const editingRowIndex = ref<number>(-1);
+
+  const handleDelete = (row, index) => {
+    emit('row-delete', {
+      row,
+      index,
+      page: currentPage.value,
+      size: pageSize.value
+    })
+    closeOperationPopover();
+  }
+
+  const closeOperationPopover = () => {
+    operationPopoverRef.value?.forEach((item) => item?.doClose());
+  }
+
+  const closeAllExpandedRows = () => {
+    if (!hasExpandRow) return
+    tableDomRef.value?.data.forEach((item) => {
+      tableDomRef.value?.toggleRowExpansion(item, false)
+    })
+  }
+
+  const handleEdit = (scope) => {
+    // 折叠所有展开的行
+    closeAllExpandedRows();
+    const { row, $index: index } = scope;
+    editingRowData.value = {...row};
+    editingRowIndex.value = index;
+    emit('row-edit', { row, index, page: currentPage.value, size: pageSize.value});
+    closeOperationPopover();
+  }
+
+  const handleRowPinToTop = (scope) => {
+    const { row, $index: index, store } = scope;
+    const dataList = store.states.data;
+    const newList = [
+      ...dataList.slice(0, index),
+      ...dataList.slice(index + 1)
+    ];
+    newList.unshift({...row, isPinned: true});
+    store.states.data = newList;
+    emit('row-pin-to-top', { row, rawIndex: index, page: currentPage.value, size: pageSize.value});
+    closeOperationPopover();
+  }
+
+  const handleEditSave = (row) => {
+    editingRowIndex.value = -1;
+    const changedData = {}
+    for (const key of Object.keys(row)) {
+      if (row[key] !== editingRowData.value[key]) {
+        changedData[key] = editingRowData.value[key]
+      }
+    }
+
+    emit('row-edit-save', {
+      page: currentPage.value,
+      size: pageSize.value,
+      row,
+      changedData
+    });
+    editingRowData.value = {};
+  }
+
+  const handleEditCancel = (row) => {
+    editingRowIndex.value = -1;
+    editingRowData.value = {};
+    emit('row-edit-cancel', { row, page: currentPage.value, size: pageSize.value});
+  }
+
+  return {
+    operationPopoverRef,
+    editingRowData,
+    editingRowIndex,
+    handleDelete,
+    closeAllExpandedRows,
+    handleEdit,
+    handleEditSave,
+    handleEditCancel,
+    handleRowPinToTop
+  }
+}