y-admin-pro 0.0.1

package/packages/ele-pro-table/props.ts

@@ -0,0 +1,163 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type { EleLoadingProps, EleToolbarProps } from '../ele-app/plus';
+import { omit } from '../utils/common';
+import { dataTableProps } from '../ele-data-table/props';
+import { virtualTableEmits } from '../ele-virtual-table/props';
+import type {
+  DataItem,
+  Columns,
+  TableSize,
+  RowKey
+} from '../ele-data-table/types';
+import type TableTools from './components/table-tools.vue';
+import type ToolExport from './components/tool-export.vue';
+import type ToolPrint from './components/tool-print.vue';
+import type {
+  Where,
+  Datasource,
+  RequestOption,
+  ResponseOption,
+  ParseData,
+  DoneParams,
+  TablePagination,
+  TableTool,
+  TableLocale,
+  ExportConfig,
+  PrintConfig
+} from './types';
+
+/**
+ * 属性
+ */
+export const proTableProps = {
+  ...omit(dataTableProps, ['data', 'pageIndex', 'errorText', 'cacheData']),
+  rowKey: {
+    type: [String, Function] as PropType<RowKey>,
+    required: false
+  },
+  /** 数据请求状态 */
+  loading: Boolean,
+  /** 数据源 */
+  datasource: {
+    type: [Array, Function] as PropType<Datasource>,
+    required: true
+  },
+  /** 默认请求参数 */
+  where: Object as PropType<Where>,
+  /** 自定义请求参数名称 */
+  request: Object as PropType<RequestOption>,
+  /** 自定义响应参数名称 */
+  response: Object as PropType<ResponseOption>,
+  /** 自定义响应数据解析 */
+  parseData: Function as PropType<ParseData>,
+  /** 初始是否请求数据 */
+  loadOnCreated: {
+    type: Boolean,
+    default: true
+  },
+  /** 是否在排序和筛选改变后自动刷新 */
+  loadOnChanged: {
+    type: Boolean,
+    default: true
+  },
+  /** 多选选中的数据 */
+  selections: Array as PropType<DataItem[]>,
+  /** 单选选中的数据 */
+  current: Object as PropType<DataItem | null>,
+  /** 是否开启顶部工具栏 */
+  toolbar: {
+    type: [Boolean, Object] as PropType<boolean | EleToolbarProps>,
+    default: () => {
+      return null;
+    }
+  },
+  /** 表头工具按钮布局 */
+  tools: {
+    type: [Boolean, Array] as PropType<TableTool[] | boolean>,
+    default: () => {
+      return null;
+    }
+  },
+  /** 列配置是否可拖拽排序 */
+  columnSortable: {
+    type: Boolean,
+    default: true
+  },
+  /** 列配置是否可固定列 */
+  columnFixed: {
+    type: Boolean,
+    default: true
+  },
+  /** 表格全屏时的层级 */
+  maximizedIndex: Number,
+  /** 表格全屏状态的高度 */
+  maximizedHeight: [String, Number],
+  /** 自定义表格样式 */
+  tableStyle: Object as PropType<StyleValue>,
+  /** 自定义底部样式 */
+  footerStyle: Object as PropType<StyleValue>,
+  /** 分页组件 */
+  pagination: {
+    type: [Boolean, Object] as PropType<boolean | TablePagination>,
+    default: () => {
+      return null;
+    }
+  },
+  /** 自定义加载组件属性 */
+  loadingProps: Object as PropType<EleLoadingProps>,
+  /** 列配置缓存名称 */
+  cacheKey: String,
+  /** 是否虚拟滚动 */
+  virtual: Boolean,
+  /** 虚拟滚动表格行高 */
+  rowHeight: Number,
+  /** 国际化 */
+  locale: Object as PropType<Partial<TableLocale>>,
+  /** 导出配置 */
+  exportConfig: Object as PropType<ExportConfig>,
+  /** 打印配置 */
+  printConfig: Object as PropType<PrintConfig>
+};
+
+export type ProTableProps = ExtractPropTypes<typeof proTableProps>;
+
+/**
+ * 事件
+ */
+export const proTableEmits = {
+  ...virtualTableEmits,
+  /** 表格数据请求完成事件 */
+  done: (_result: DoneParams<DataItem>, _parent?: DataItem) => true,
+  /** 更新多选选中数据 */
+  'update:selections': (_selections: DataItem[]) => true,
+  /** 更新单选选中数据 */
+  'update:current': (_current?: DataItem | null) => true,
+  /** 列配置改变事件 */
+  columnsChange: (
+    _columns: Columns,
+    _tableColumns: Columns,
+    _isReset: boolean
+  ) => true,
+  /** 表格尺寸改变事件 */
+  sizeChange: (_size: TableSize) => true,
+  /** 表格最大化切换事件 */
+  maximizedChange: (_maximized: boolean) => true,
+  /** 数组数据源时刷新按钮点击事件 */
+  refresh: () => true
+};
+
+/**
+ * 默认工具按钮实例
+ */
+export type TableToolsInstance = InstanceType<typeof TableTools> | null;
+
+/**
+ * 导出组件实例
+ */
+export type ToolExportInstance = InstanceType<typeof ToolExport> | null;
+
+/**
+ * 打印组件实例
+ */
+export type ToolPrintInstance = InstanceType<typeof ToolPrint> | null;

package/packages/ele-pro-table/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 高级表格主题变量 */
+@mixin set-pro-table-var($var) {
+  .ele-tool-column {
+    @include set-ele-var('tool-column', $var);
+  }
+}

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

@@ -0,0 +1,326 @@
+@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 > .ele-toolbar {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+
+  & + .ele-toolbar {
+    border-top: none;
+  }
+}
+
+.ele-pro-table:not(.is-border) > .ele-toolbar {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+}
+
+.ele-pro-table.is-border > .ele-toolbar {
+  border-bottom: none;
+}
+
+/* 取消表格上边圆角 */
+.ele-pro-table > .ele-toolbar.is-default {
+  & + .ele-data-table > .el-table__inner-wrapper > .el-table__header-wrapper,
+  & + .ele-data-table > .el-table__inner-wrapper > .el-table__body-wrapper,
+  & + .ele-data-table.el-table--border > .el-table__inner-wrapper::after,
+  &
+    + .ele-data-table.el-table--border.hide-header
+    > .el-table__inner-wrapper
+    > .el-table__body-wrapper,
+  &
+    + .ele-virtual-table
+    > .el-table-v2
+    > .el-table-v2__main
+    > .el-table-v2__header-wrapper,
+  & + .ele-virtual-table.is-border > .el-table-v2::after,
+  &
+    + .ele-virtual-table.is-border.hide-header
+    > .el-table-v2
+    > .el-table-v2__main
+    > .el-table-v2__body
+    > div:not(.el-virtual-scrollbar) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  & + .ele-data-table.el-table--border::before,
+  & + .ele-virtual-table.is-border::before {
+    border-top-left-radius: 0;
+  }
+
+  & + .ele-data-table.el-table--border::after,
+  & + .ele-virtual-table.is-border::after {
+    border-top-right-radius: 0;
+  }
+
+  &
+    + .ele-data-table.hide-header:not(.el-table--border)
+    > .el-table__inner-wrapper::after,
+  & + .ele-virtual-table.hide-header:not(.is-border) > .el-table-v2::after {
+    display: none;
+  }
+}
+
+/* 加载图标 */
+.ele-pro-table > .ele-loading-spinner {
+  background: transparent;
+}
+
+/* 底栏 */
+.ele-pro-table-footer {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+
+  & > .ele-pagination {
+    margin: 0 auto;
+    padding-top: 4px;
+  }
+}
+
+/* 全屏 */
+.ele-pro-table.is-maximized {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  height: 100dvh;
+  overflow: auto;
+  padding: 0 0 16px 0;
+  box-sizing: border-box;
+  background: elVar('bg-color');
+  z-index: calc(var(#{eleVarName('layout', 'index')}, 0) + 99);
+
+  & > .ele-toolbar.is-plain {
+    padding: 0 16px;
+  }
+
+  /* 粘性表头顶部距离修改 */
+  &
+    > .ele-data-table.is-sticky
+    > .el-table__inner-wrapper
+    > .el-table__header-wrapper,
+  &
+    > .ele-virtual-table.is-sticky
+    > .el-table-v2
+    > .el-table-v2__main
+    > .el-table-v2__header-wrapper {
+    top: eleVar('table', 'sticky-top');
+  }
+}
+
+/* 密度设置 */
+.ele-tool-size-popper {
+  min-width: 88px;
+
+  &.ele-dropdown .el-dropdown-menu__item > .el-icon {
+    font-size: elVar('font-size', 'base');
+  }
+}
+
+/* 列配置 */
+.ele-tool-column-popover.ele-popover {
+  width: eleVar('tool-column', 'width');
+  max-width: 100%;
+}
+
+.ele-tool-column {
+  width: eleVar('tool-column', 'width');
+  max-width: 100%;
+}
+
+.ele-tool-column-header {
+  display: flex;
+  align-items: center;
+  border-bottom: eleVar('tool-column', 'header-border');
+  padding: eleVar('tool-column', 'header-padding');
+  box-sizing: border-box;
+  position: relative;
+}
+
+.ele-tool-column-link {
+  color: elVar('color-primary');
+  transition: color $transition-base;
+  user-select: none;
+  cursor: pointer;
+
+  &:hover {
+    color: elVar('color-primary', 'light-3');
+  }
+}
+
+.ele-tool-column .ele-tool-column-item .ele-tool-column-item-body,
+.ele-tool-column .ele-tool-column-header .ele-tool-column-label {
+  .el-checkbox {
+    height: eleVar('tool-column', 'item-height');
+    line-height: eleVar('tool-column', 'item-height');
+  }
+
+  .el-checkbox__label {
+    color: inherit;
+    line-height: inherit;
+    white-space: nowrap;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+.ele-tool-column-label {
+  flex: 1;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.ele-tool-column > .ele-tool-column-list {
+  padding: eleVar('tool-column', 'body-padding');
+  max-height: eleVar('tool-column', 'max-height');
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.ele-tool-column-item-body {
+  display: flex;
+  align-items: center;
+  padding: 0 eleVar('tool-column', 'item-padding');
+  border-radius: eleVar('tool-column', 'item-radius');
+  transition: background-color $transition-base;
+  position: relative;
+
+  .el-checkbox {
+    width: 100%;
+  }
+
+  &:hover {
+    background: eleVar('tool-column', 'item-hover-bg');
+  }
+}
+
+.ele-tool-column-item {
+  user-select: none;
+  border-radius: eleVar('tool-column', 'item-radius');
+
+  &.sortable-chosen {
+    background: eleVar('tool-column', 'item-hover-bg');
+    opacity: 1 !important;
+
+    & > .ele-tool-column-item-body {
+      background: none;
+    }
+  }
+
+  &.sortable-ghost {
+    opacity: 0 !important;
+  }
+
+  & > .ele-tool-column-list {
+    padding-left: 24px;
+  }
+}
+
+.ele-tool-column-handle {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('tool-column', 'btn-size');
+  height: eleVar('tool-column', 'btn-size');
+  margin-right: eleVar('tool-column', 'btn-space');
+  margin-left: eleVar('tool-column', 'btn-offset');
+  color: elVar('text-color', 'placeholder');
+  font-size: 12px;
+  cursor: move;
+}
+
+.ele-tool-column-input {
+  flex-shrink: 0;
+  width: 60px;
+  background: elVar('bg-color', 'overlay');
+  border-radius: elVar('border-radius', 'base');
+  margin-left: eleVar('tool-column', 'btn-space');
+  margin-right: eleVar('tool-column', 'btn-offset');
+
+  .el-input__inner {
+    height: 20px;
+    line-height: 20px;
+  }
+}
+
+.ele-tool-column-fixed {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+
+  &:last-child {
+    margin-right: eleVar('tool-column', 'btn-offset');
+  }
+}
+
+.ele-tool-column-fixed-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('tool-column', 'btn-size');
+  height: eleVar('tool-column', 'btn-size');
+  border-radius: eleVar('tool-column', 'btn-radius');
+  font-size: 12px;
+  color: eleVar('tool-column', 'btn-color');
+  margin-left: eleVar('tool-column', 'btn-space');
+  transition: (color $transition-base, background-color $transition-base);
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    color: eleVar('tool-column', 'btn-hover-color');
+    background: eleVar('tool-column', 'btn-hover-bg');
+  }
+
+  &.is-active {
+    color: eleVar('tool-column', 'btn-active-color');
+    background: eleVar('tool-column', 'btn-active-bg');
+  }
+
+  & > .el-icon > svg {
+    stroke-width: 5;
+  }
+}
+
+.ele-tool-column.is-sortable .ele-tool-column-header .ele-tool-column-label {
+  $size: eleVar('tool-column', 'btn-size');
+  $space: eleVar('tool-column', 'btn-space');
+  $offset: eleVar('tool-column', 'btn-offset');
+  padding-left: calc(#{$size} + #{$space} + #{$offset});
+}
+
+/* 导出和打印的列选择 */
+.ele-tool-export-form,
+.ele-tool-print-form {
+  .ele-tool-column {
+    border: 1px solid elVar('border-color', 'light');
+    border-radius: elVar('border-radius', 'base');
+    line-height: normal;
+    width: 100%;
+  }
+
+  .ele-tool-column-header {
+    background: elVar('fill-color', 'lighter');
+    border-top-left-radius: elVar('border-radius', 'base');
+    border-top-right-radius: elVar('border-radius', 'base');
+  }
+}
+
+.ele-tool-form-options {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: 8px;
+}

package/packages/ele-pro-table/style/index.ts

@@ -0,0 +1,20 @@
+import 'element-plus/es/components/checkbox/style/index';
+import 'element-plus/es/components/icon/style/index';
+import 'element-plus/es/components/form/style/index';
+import 'element-plus/es/components/form-item/style/index';
+import 'element-plus/es/components/input/style/index';
+import 'element-plus/es/components/select/style/index';
+import 'element-plus/es/components/option/style/index';
+import 'element-plus/es/components/button/style/index';
+import '../../ele-tooltip/style/index';
+import '../../ele-dropdown/style/index';
+import '../../ele-tool/style/index';
+import '../../ele-toolbar/style/index';
+import '../../ele-loading/style/index';
+import '../../ele-pagination/style/index';
+import '../../ele-data-table/style/index';
+import '../../ele-virtual-table/style/index';
+import '../../ele-modal/style/index';
+import '../../ele-printer/style/index';
+import '../../ele-table/style/index';
+import './index.scss';