@lx-frontend/wrap-element-ui 1.0.1-beta.2 → 1.0.1-beta.4

package/src/components/EditableTable/types.ts

@@ -1,94 +1,116 @@
-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
-}
+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; // 不可隐藏，显示设置中，该列不允许隐藏
+  /** 默认隐藏，显示设置中，该列默认隐藏 */
+  defaultHide?: boolean;
+  /** 列是否允许搜索，true则表头弹窗会多一个搜索框，一列中有多个搜索字段时传数组进行配置 */
+  search?: boolean | ISearchOptions
+  summary?: boolean; // 是否可以显示该列的统计
+  summaryMethod?: (values: any[]) => string | number; // 这一列的统计方法，values为该列的所有值
+  /** 过滤，传数组时默认复选框 */
+  filters?: {
+    type?: 'checkbox' | 'radio',
+    options: FiltersOption[]
+    default?: string | number | string[] | number[]
+  } | FiltersOption[]
+  // 透传el-table column有的属性， https://element.eleme.cn/#/en-US/component/table#table-column-attributes
+  [key: string]: any;
+}
+
+type FiltersOption = { value: string | number; text: string; [key: string]: any }
+
+type ISearchOptions = {
+  prop: string,
+  label: string,
+  validator?: (value: string) => boolean
+}[]
+
+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;
+  settingStorgeKey?: string
+  localSort?: boolean
+  localFilter?: boolean
+  currentPage: number
+}
+
+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
+  (e: 'search', param: Record<string, any>): void
+  (e: 'sort-change', param: { order: 'descending' | 'ascending' | null, prop: string }): void
+}

package/src/components/EditableTable/useCellHover.ts

@@ -1,72 +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
-  }
+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
+  }
 }