ele-admin-plus 1.0.2 → 1.1.0

package/es/ele-pro-table/style/index.scss

@@ -1,52 +1,148 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 @use './css-var.scss' as *;
 
 @include set-pro-table-var($ele);
 
-/* 表格变量替换 */
-.ele-pro-table div.el-table {
-  #{elVarName('table', 'border-color')}: eleVar('table', 'border-color');
-  #{elVarName('table', 'text-color')}: eleVar('table', 'color');
-  #{elVarName('table', 'header-text-color')}: eleVar('table', 'th-color');
-  #{elVarName('table', 'header-bg-color')}: eleVar('table', 'th-bg');
-  #{elVarName('table', 'bg-color')}: eleVar('table', 'bg');
-  #{elVarName('table', 'tr-bg-color')}: eleVar('table', 'tr-bg');
-  #{elVarName('table', 'expanded-cell-bg-color')}: eleVar('table', 'tr-bg');
-  #{elVarName('bg-color')}: eleVar('table', 'bg');
-}
-
 .ele-pro-table {
   // 工具栏
   & > .ele-toolbar {
     border-bottom: none;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
-  // 表头
-  th {
-    font-weight: normal;
+  // 表格样式修改
+  & > div.el-table {
+    $bg: eleVar('table', 'tr-bg');
+    $hover-bg: eleVar('table', 'tr-hover-bg');
+    $active-bg: eleVar('table', 'tr-active-bg');
+    #{elVarName('table', 'border-color')}: eleVar('table', 'border-color');
+    #{elVarName('table', 'text-color')}: eleVar('table', 'color');
+    #{elVarName('table', 'header-text-color')}: eleVar('table', 'th-color');
+    #{elVarName('table', 'row-hover-bg-color')}: #{$hover-bg};
+    #{elVarName('table', 'current-row-bg-color')}: #{$active-bg};
+    #{elVarName('table', 'header-bg-color')}: eleVar('table', 'th-bg');
+    #{elVarName('table', 'bg-color')}: eleVar('table', 'bg');
+    #{elVarName('table', 'tr-bg-color')}: #{$bg};
+    #{elVarName('table', 'expanded-cell-bg-color')}: #{$bg};
   }
 
-  .caret-wrapper .sort-caret {
-    #{elVarName('text-color', 'placeholder')}: elVar('text-color', 'disabled');
+  & > .el-table {
+    .el-table__header thead .ele-table-head-tr > .el-table__cell,
+    & > .el-table__inner-wrapper > .el-table__footer-wrapper .el-table__cell {
+      background: eleVar('table', 'th-bg');
+    }
+
+    .el-table__body .ele-table-tr {
+      & > .el-table__cell {
+        background: eleVar('table', 'tr-bg');
+      }
+
+      &:hover > .el-table__cell,
+      &.hover-row > .el-table__cell {
+        background: eleVar('table', 'tr-hover-bg');
+      }
+
+      &.current-row > .el-table__cell {
+        background: eleVar('table', 'tr-active-bg');
+      }
+
+      &.current-row:hover > .el-table__cell,
+      &.current-row.hover-row > .el-table__cell {
+        background: eleVar('table', 'tr-active-hover-bg');
+      }
+    }
   }
 
-  .el-table__column-filter-trigger i {
-    font-size: 13px;
-    vertical-align: -2px;
-    color: elVar('text-color', 'secondary');
+  .ele-table-tr.el-table__row--striped {
+    &:not(.current-row):not(.hover-row):not(:hover) > .el-table__cell {
+      background: eleVar('table', 'even-bg');
+    }
+  }
+
+  // 表头
+  .ele-table-head-tr {
+    & > .el-table__cell {
+      font-weight: eleVar('table', 'th-font-weight');
+
+      & > .cell {
+        display: flex;
+        align-items: center;
+      }
+
+      &.is-center > .cell {
+        justify-content: center;
+      }
+
+      &.is-right > .cell {
+        justify-content: flex-end;
+      }
+    }
+
+    &.is-ellipsis > .el-table__cell > .cell {
+      white-space: nowrap;
+    }
+
+    // 排序图标
+    .caret-wrapper {
+      $color: eleVar('table', 'icon-color');
+      #{elVarName('text-color', 'placeholder')}: #{$color};
+      width: 14px;
+      overflow: visible;
+
+      .ascending {
+        left: 4px;
+        top: -4px;
+      }
+
+      .descending {
+        left: 4px;
+        bottom: -4px;
+      }
+    }
+
+    // 筛选图标
+    .el-table__column-filter-trigger {
+      margin: eleVar('table', 'filter-margin');
+      padding: eleVar('table', 'filter-padding');
+      border-radius: eleVar('table', 'filter-radius');
+      transition: color $ele-transition, background-color $ele-transition;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      & > .el-icon {
+        color: eleVar('table', 'icon-color');
+        font-size: eleVar('table', 'filter-size');
+
+        & > svg > path {
+          #{'d'}: path(
+            'M 349 838 c 0 17.7 14.2 32 31.8 32 h 262.4 c 17.6 0 31.8 -14.3 31.8 -32 V 642 H 349 v 196 Z M 880.1 154 H 143.9 c -24.5 0 -39.8 26.7 -27.5 48 l 221.3 376 h 348.8 l 221.3 -376 c 12.1 -21.3 -3.2 -48 -27.7 -48 Z'
+          );
+        }
+      }
+
+      &:hover {
+        background: eleVar('table', 'filter-hover-bg');
+      }
+    }
   }
 
-  .el-table--small .el-table__column-filter-trigger i {
-    font-size: 12px;
+  .ele-cell-title {
+    flex: 1;
+    position: relative;
   }
 
-  // 选中行
-  .el-table__body tr.current-row.hover-row > td.el-table__cell {
-    background-color: elVar('table', 'current-row-bg-color');
+  // 行高
+  .ele-table-tr > .el-table__cell > .cell,
+  .ele-table-head-tr > .el-table__cell > .cell {
+    line-height: eleVar('table', 'line-height');
   }
 
   // 展开按钮
-  .el-table__expand-icon {
+  .ele-table-tr > .el-table__cell > .cell > .el-table__expand-icon {
     vertical-align: -2px;
 
     & > .el-icon {
@@ -55,16 +151,96 @@
   }
 
   // 边框线
-  .el-table--border::after {
+  & > .el-table--border::after,
+  & > .el-table--border::before,
+  & > .el-table > .el-table__inner-wrapper > .el-table__border-left-patch {
     width: 0.8px;
   }
 
-  .el-table__inner-wrapper::before {
+  & > .el-table > .el-table__inner-wrapper::before,
+  & > .el-table--border > .el-table__inner-wrapper::after {
     height: 0.8px;
   }
 
+  // 圆角
+  & > .el-table:not(.el-table--border) {
+    // 表头
+    & > .el-table__inner-wrapper > .el-table__header-wrapper {
+      thead > .ele-table-head-tr:first-child > th:first-child {
+        border-top-left-radius: eleVar('table', 'radius');
+      }
+
+      thead > .ele-table-head-tr:first-child > th:last-child {
+        border-top-right-radius: eleVar('table', 'radius');
+      }
+    }
+
+    // 表头大尺寸
+    &.el-table--large > .el-table__inner-wrapper > .el-table__header-wrapper {
+      thead > .ele-table-head-tr:first-child > th:first-child {
+        border-top-left-radius: eleVar('table', 'lg-radius');
+      }
+
+      thead > .ele-table-head-tr:first-child > th:last-child {
+        border-top-right-radius: eleVar('table', 'lg-radius');
+      }
+    }
+
+    // 表头小尺寸
+    &.el-table--small > .el-table__inner-wrapper > .el-table__header-wrapper {
+      thead > .ele-table-head-tr:first-child > th:first-child {
+        border-top-left-radius: eleVar('table', 'sm-radius');
+      }
+
+      thead > .ele-table-head-tr:first-child > th:last-child {
+        border-top-right-radius: eleVar('table', 'sm-radius');
+      }
+    }
+
+    // 合计行
+    & > .el-table__inner-wrapper > .el-table__footer-wrapper {
+      & > table > tbody > tr:last-child > td {
+        border-bottom-color: transparent;
+      }
+
+      & > table > tbody > tr:last-child > td:first-child {
+        border-bottom-left-radius: eleVar('table', 'radius');
+      }
+
+      & > table > tbody > tr:last-child > td:last-child {
+        border-bottom-right-radius: eleVar('table', 'radius');
+      }
+    }
+
+    // 合计行大尺寸
+    &.el-table--large > .el-table__inner-wrapper > .el-table__footer-wrapper {
+      & > table > tbody > tr:last-child > td:first-child {
+        border-bottom-left-radius: eleVar('table', 'lg-radius');
+      }
+
+      & > table > tbody > tr:last-child > td:last-child {
+        border-bottom-right-radius: eleVar('table', 'lg-radius');
+      }
+    }
+
+    // 合计行小尺寸
+    &.el-table--small > .el-table__inner-wrapper > .el-table__footer-wrapper {
+      & > table > tbody > tr:last-child > td:first-child {
+        border-bottom-left-radius: eleVar('table', 'sm-radius');
+      }
+
+      & > table > tbody > tr:last-child > td:last-child {
+        border-bottom-right-radius: eleVar('table', 'sm-radius');
+      }
+    }
+  }
+
+  & > .el-table.has-footer > .el-table__inner-wrapper::before {
+    display: none;
+  }
+
   // loading
-  .el-table--border > .el-loading-mask {
+  & > .el-table--border > .el-loading-mask {
     top: 1px;
     left: 1px;
     right: 1px;
@@ -72,29 +248,69 @@
   }
 
   // 空状态
-  .el-table__empty-text {
-    color: elVar('text-color', 'placeholder');
+  .ele-table-empty {
+    padding: 58px 0;
+    line-height: 1;
+
+    .el-empty__description {
+      margin-top: 8px;
+
+      p {
+        color: elVar('text-color', 'placeholder');
+      }
+    }
   }
 
-  .el-empty {
-    padding: 58px 0;
+  // 粘性头部
+  &.is-sticky > .el-table {
+    overflow: visible;
+
+    & > .el-table__inner-wrapper > .el-table__header-wrapper {
+      position: sticky;
+      top: eleVar('table', 'sticky-top');
+      z-index: 3;
+    }
   }
+}
 
-  .el-empty__description {
-    margin-top: 8px;
-    line-height: 1;
+/* 粘性头部适配布局风格 */
+.ele-admin-fixed-header:not(.ele-admin-maximized) .ele-pro-table.is-sticky {
+  & > .el-table > .el-table__inner-wrapper > .el-table__header-wrapper {
+    top: eleVar('table', 'fixed-header-sticky-top');
+  }
+}
 
-    p {
-      color: elVar('text-color', 'placeholder');
+.ele-admin-fixed-header.ele-admin-maximized:not(.ele-admin-expanded) {
+  &:not(.ele-admin-fixed-body) .ele-pro-table.is-sticky {
+    & > .el-table > .el-table__inner-wrapper > .el-table__header-wrapper {
+      top: eleVar('table', 'maximized-sticky-top');
     }
   }
+}
 
-  // 开关
-  .el-switch {
-    height: auto;
+/* Tooltip */
+body .ele-popper.el-popper.ele-tooltip.ele-table-tooltip {
+  padding: eleVar('tooltip', 'padding');
+
+  &::after {
+    content: '';
+    background: inherit;
+    border-radius: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
   }
 }
 
+/* 开关 */
+.ele-table-tr .el-switch,
+.ele-table-head-tr .el-switch {
+  height: auto;
+}
+
 /* 底栏 */
 .ele-pro-table-footer {
   padding-top: 2px;
@@ -107,30 +323,6 @@
   }
 }
 
-/* 表头超出隐藏 */
-.ele-pro-table.is-header-ellipsis th.el-table__cell > .cell {
-  white-space: nowrap;
-}
-
-/* 粘性头部 */
-.ele-pro-table.is-sticky > .el-table {
-  overflow: visible;
-
-  & > .el-table__inner-wrapper > .el-table__header-wrapper {
-    position: sticky;
-    top: eleVar('table', 'sticky-top');
-    z-index: 3;
-  }
-}
-
-.ele-admin-fixed-header:not(.ele-admin-maximized) .ele-pro-table.is-sticky {
-  #{eleVarName('table', 'sticky-top')}: 94px;
-}
-
-.ele-admin-maximized:not(.ele-admin-expanded) .ele-pro-table.is-sticky {
-  #{eleVarName('table', 'sticky-top')}: 40px;
-}
-
 /* 全屏 */
 .ele-pro-table.is-maximized {
   position: fixed !important;
@@ -144,24 +336,27 @@
   background: elVar('bg-color');
   z-index: calc(var(#{eleVarName('layout', 'index')}, 0) + 99);
 
-  .ele-toolbar.is-plain {
+  & > .ele-toolbar.is-plain {
     padding: 0 16px;
   }
 }
 
 /* 密度设置 */
 .ele-tool-size-popper {
-  min-width: 80px;
+  min-width: 88px;
 }
 
 /* 列配置 */
-.ele-tool-column.el-popper {
-  padding: 0;
-  max-width: 100%;
-  width: eleVar('tool-column', 'width') !important;
-}
-
 .ele-tool-column {
+  &.ele-popover {
+    width: eleVar('tool-column', 'width') !important;
+    max-width: 100%;
+  }
+
+  .ele-popover-content {
+    padding: 0;
+  }
+
   .el-checkbox-group {
     line-height: inherit;
   }
@@ -184,7 +379,7 @@
 .ele-tool-column-header {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid eleVar('tool-column', 'line-color');
+  border-bottom: eleVar('tool-column', 'header-border');
   padding: eleVar('tool-column', 'header-padding');
   box-sizing: border-box;
   position: relative;
@@ -205,7 +400,8 @@
   display: flex;
   align-items: center;
   padding: 0 eleVar('tool-column', 'item-padding');
-  transition: background-color 0.2s;
+  border-radius: eleVar('tool-column', 'item-radius');
+  transition: background-color $ele-transition;
   position: relative;
 
   .ele-tool-column-handle {
@@ -234,7 +430,7 @@
       font-size: 12px;
       margin-left: 4px;
       color: elVar('text-color', 'placeholder');
-      transition: color 0.2s;
+      transition: color $ele-transition;
       cursor: pointer;
 
       &:hover {
@@ -249,7 +445,7 @@
 
   &:hover,
   &.sortable-chosen {
-    background: elVar('color-primary', 'light-9');
+    background: eleVar('tool-column', 'item-hover-bg');
   }
 
   &.sortable-ghost {

package/es/ele-pro-table/types/index.d.ts

@@ -1,7 +1,6 @@
-import type { CSSProperties, ExtractPropTypes, Slot } from 'vue';
-import type { TableProps } from 'element-plus';
+import type { Slot } from 'vue';
 import type { Sort } from 'element-plus/es/components/table/src/table/defaults';
-import type ColumnProps from 'element-plus/es/components/table/src/table-column/defaults';
+import type { ComponentProps, StyleValue, ElTableProps, ElColumnProps } from '../../ele-app/types';
 import type { PaginationProps } from '../../ele-pagination/props';
 import type { ToolbarProps } from '../../ele-toolbar/props';
 /**
@@ -131,7 +130,7 @@ export interface OrderItem {
 /**
  * 原始列数据
  */
-export type TableColumn = Partial<ExtractPropTypes<typeof ColumnProps>>;
+export type TableColumn = Partial<ElColumnProps>;
 /**
  * 列数据
  */
@@ -177,7 +176,7 @@ parent?: T) => void;
 /**
  * 表格尺寸
  */
-export type TableSize = TableProps<DataItem>['size'];
+export type TableSize = ElTableProps<DataItem>['size'];
 /**
  * 分页组件属性
  */
@@ -185,15 +184,12 @@ export interface TablePagination extends Partial<PaginationProps> {
     /** 是否自动修正页码 */
     autoAmend?: boolean;
     /** 自定义样式 */
-    style?: CSSProperties;
+    style?: StyleValue;
 }
 /**
  * 工具栏组件属性
  */
-export interface TableToolbar extends Partial<ToolbarProps> {
-    /** 自定义样式 */
-    style?: CSSProperties;
-}
+export type TableToolbar = ComponentProps<ToolbarProps>;
 /**
  * 内置工具按钮
  */
@@ -259,7 +255,7 @@ export interface ResponseResult {
 /**
  * 表格懒加载方法
  */
-export type TableLoad = TableProps<DataItem>['load'];
+export type TableLoad = ElTableProps<DataItem>['load'];
 /**
  * 多选时行点击选中
  */
@@ -268,6 +264,14 @@ export type RowClickChecked = boolean | 'smart';
  * 获取插槽方法
  */
 export type GetSlotFunc = (name: string) => Slot | undefined;
+/**
+ * showOverflowTooltip 属性
+ */
+export type ShowOverflowTooltip = Column['showOverflowTooltip'];
+/**
+ * 复合属性类型
+ */
+export type ProProps<T extends Record<keyof any, any>> = boolean | T;
 /**
  * 表格实例数据
  */

package/es/ele-pro-table/util.d.ts

@@ -1,23 +1,40 @@
 import type { SetupContext } from 'vue';
-import type { ElTable } from 'element-plus';
+import type { ElTableInstance } from '../ele-app/types';
 import type { PaginationProps } from '../ele-pagination/props';
 import type { tableEmits } from './props';
-import type { DataItem, Column, Columns, Sorter, Filter, Filters, OrderItem, RequestOption, ResponseOption, TablePagination, ReloadDataResult, TableSize, ColItem, CacheResult } from './types';
+import type { DataItem, Column, Columns, Sorter, Filter, Filters, OrderItem, RequestOption, ResponseOption, TablePagination, ReloadDataResult, TableSize, ColItem, CacheResult, ProProps } from './types';
 /**
  * 获取默认页码
- * @param opt 分页组件属性
+ * @param pagination 分页组件属性
+ * @param globalPagination 全局配置分页组件属性
  */
 export declare function getTablePage(pagination: boolean | TablePagination | undefined, globalPagination: boolean | TablePagination | undefined): number;
 /**
  * 获取默认每页数量
- * @param opt 分页组件属性
+ * @param pagination 分页组件属性
+ * @param globalPagination 全局配置分页组件属性
  */
 export declare function getTableLimit(pagination: boolean | TablePagination | undefined, globalPagination: boolean | TablePagination | undefined): number;
 /**
- * 获取分页组件默认属性
- * @param opt 分页组件属性
+ * 获取分页组件属性
+ * @param size 表格尺寸
+ * @param pagination 分页组件属性
+ * @param globalPagination 全局配置分页组件属性
+ * @param pageProps 分页相关的属性
  */
 export declare function getPaginationProps(size: TableSize, pagination: boolean | TablePagination | undefined, globalPagination: boolean | TablePagination | undefined, pageProps?: Pick<PaginationProps, 'total' | 'pageSize' | 'currentPage'>): Partial<PaginationProps> | null;
+/**
+ * 合并复合属性
+ * @param props 属性
+ * @param globalProps 全局属性
+ */
+export declare function mergeProps<T extends Record<keyof any, any>>(props?: ProProps<T> | null, globalProps?: ProProps<T> | null): ProProps<T>;
+/**
+ * 获取是否开启自动修正页码
+ * @param pagination 分页组件属性
+ * @param globalPagination 全局配置分页组件属性
+ */
+export declare function isAutoAmend(pagination: boolean | TablePagination | undefined, globalPagination: boolean | TablePagination | undefined): boolean;
 /**
  * 获取请求参数名称
  * @param globalRequest 全局配置
@@ -32,7 +49,9 @@ export declare function getRequestName(globalRequest?: RequestOption, request?:
 export declare function getResponseName(globalResponse?: ResponseOption, response?: ResponseOption): ResponseOption;
 /**
  * 获取表格默认尺寸
- * @param globalProps 全局配置
+ * @param cacheKey 本地缓存的键名
+ * @param size 表格尺寸
+ * @param globalSize 全局配置尺寸
  */
 export declare function getTableSize(cacheKey?: string, size?: TableSize, globalSize?: TableSize): TableSize;
 /**
@@ -52,7 +71,6 @@ export declare function getOrderItems(sorter: Sorter): OrderItem[];
  * @param sorter 排序方式
  * @param page 页码
  * @param limit 每页数量
- * @param pagination 是否分页
  */
 export declare function reloadData(datasource: DataItem[], sorter: Sorter, page?: number, limit?: number): ReloadDataResult;
 /**
@@ -61,6 +79,10 @@ export declare function reloadData(datasource: DataItem[], sorter: Sorter, page?
  * @param sorter 排序方式
  */
 export declare function sortData(datasource: DataItem[], sorter: Sorter): DataItem[];
+/**
+ * 生成请求的筛选参数
+ * @param filter 筛选条件
+ */
 export declare function getRequestFilters(filter: Filter): Filters;
 /**
  * 判断选中的数据是否改变
@@ -129,7 +151,7 @@ export declare function isDisableRow(row: DataItem, index: number, columns?: Col
  * 表格默认实例方法
  * @param getIns 获取表格实例
  */
-export declare function useTableMethods(getIns: () => InstanceType<typeof ElTable> | null | undefined): {
+export declare function useTableMethods(getIns: () => ElTableInstance | undefined): {
     clearSelection: () => void;
     getSelectionRows: () => DataItem[] | undefined;
     toggleRowSelection: (row: DataItem, selected?: boolean) => void;

package/es/ele-pro-table/util.js

@@ -8,7 +8,7 @@ function getTableLimit(pagination, globalPagination) {
   return (props == null ? void 0 : props.pageSize) ?? 10;
 }
 function getPaginationProps(size, pagination, globalPagination, pageProps) {
-  const props = pagination ?? globalPagination ?? true;
+  const props = mergeProps(pagination, globalPagination);
   if (props == null || props === false) {
     return null;
   }
@@ -19,10 +19,35 @@ function getPaginationProps(size, pagination, globalPagination, pageProps) {
     pageSizes: [10, 20, 30, 40, 50, 100],
     hideOnSinglePage: false
   };
+  if (typeof props !== "object") {
+    return Object.assign(defaultProps, pageProps);
+  }
+  return Object.assign(defaultProps, omit(props, ["autoAmend"]), pageProps);
+}
+function mergeProps(props, globalProps) {
+  if (props == null) {
+    return globalProps ?? true;
+  }
+  if (!props) {
+    return false;
+  }
+  if (!globalProps || typeof globalProps !== "object") {
+    return props;
+  }
+  if (typeof props !== "object") {
+    return globalProps;
+  }
+  return { ...globalProps, ...props };
+}
+function isAutoAmend(pagination, globalPagination) {
+  const props = mergeProps(pagination, globalPagination);
+  if (!props) {
+    return false;
+  }
   if (typeof props === "object") {
-    return Object.assign(defaultProps, omit(props, ["autoAmend"]), pageProps);
+    return !!props.autoAmend;
   }
-  return Object.assign(defaultProps, pageProps);
+  return props === true;
 }
 function getRequestName(globalRequest, request) {
   const defaultRequest = {
@@ -442,7 +467,9 @@ export {
   getTablePage,
   getTableSize,
   getValue,
+  isAutoAmend,
   isDisableRow,
+  mergeProps,
   reloadData,
   selectionIsChange,
   sortData,