ele-admin-plus 1.1.4 → 1.1.5-beta.2

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

@@ -1,31 +1,33 @@
-import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, mergeProps as mergeProps$1, renderSlot, createCommentVNode, createSlots, renderList, createElementBlock, normalizeStyle } from "vue";
-import { ElEmpty } from "element-plus";
-import { pick, eachTree } from "../utils/core";
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, mergeProps as mergeProps$1, renderSlot, createCommentVNode, createSlots, renderList, createElementBlock, normalizeStyle } from "vue";
+import { pick } from "../utils/core";
 import { useLicense, useGlobalProps } from "../ele-config-provider/receiver";
-import ElePagination from "../ele-pagination/index";
 import EleLoading from "../ele-loading/index";
+import ElePagination from "../ele-pagination/index";
+import { dataTablePropKeys } from "../ele-data-table/props";
+import { useMethods, useEmits, getValue } from "../ele-data-table/util";
+import EleDataTable from "../ele-data-table/index";
+import EleVirtualTable from "../ele-virtual-table/index";
 import EleToolbar from "../ele-toolbar/index";
 import TableTools from "./components/table-tools";
-import TableView from "./components/table-view";
-import { useTableMethods, useTableEvents, getDefaultFilter, getTablePage, getTableLimit, getTableSize, getPaginationProps, mergeProps, getInitCacheColumns, getRequestOrders, getRequestFilters, getResponseResult, reloadData, getResponseName, isAutoAmend, getTableState, isDisableRow, getTableFilter, selectionIsChange, getValue, sortData } from "./util";
-import { proTableProps, proTableEmits, tablePropKeys } from "./props";
+import { getDefaultFilter, getTablePage, getTableLimit, getTableSize, getPaginationProps, mergeProps, selectionIsChange, getInitCacheColumns, getRequestOrders, getRequestFilters, getResponseResult, reloadData, getResponseName, isAutoAmend, sortData } from "./util";
+import { proTableProps, proTableEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleProTable",
   components: {
-    ElEmpty,
-    ElePagination,
     EleLoading,
+    ElePagination,
+    EleDataTable,
+    EleVirtualTable,
     EleToolbar,
-    TableTools,
-    TableView
+    TableTools
   },
   props: proTableProps,
   emits: proTableEmits,
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const { authenticated } = useLicense();
     const globalProps = useGlobalProps("table");
-    const tableIns = useTableMethods(() => getTableRef());
-    const tableEvents = useTableEvents(emit);
+    const methods = useMethods(() => getTableRef());
+    const events = useEmits(emit);
     const current = {
       sorter: props.defaultSort ?? {},
       filter: getDefaultFilter(props.columns),
@@ -47,8 +49,11 @@ const _sfc_main = defineComponent({
     );
     const tableMaximized = ref(false);
     const errorText = ref("");
-    const destroyed = ref(false);
-    const selectionUpdate = ref(true);
+    const slotKeys = computed(() => {
+      return Object.keys(slots).filter(
+        (k) => !["default", "toolbar", "tools", "footer"].includes(k)
+      );
+    });
     const tableIndex = computed(() => {
       return ((tablePage.value ?? 1) - 1) * (tableLimit.value ?? 0) + 1;
     });
@@ -64,28 +69,35 @@ const _sfc_main = defineComponent({
         }
       );
     });
+    const tableEmptyProps = computed(() => {
+      return mergeProps(
+        props.emptyProps,
+        globalProps.value.emptyProps
+      );
+    });
     const tableProps = computed(() => {
       const isMaximized = tableMaximized.value && props.maximizedHeight;
-      const opt = {
-        data: tableData.value,
+      return {
+        ...pick(props, dataTablePropKeys),
         height: isMaximized ? props.maximizedHeight : props.height,
-        stripe: props.stripe ?? globalProps.value.stripe ?? false,
         border: props.border ?? globalProps.value.border ?? false,
-        size: tableSize.value,
+        stripe: props.stripe ?? globalProps.value.stripe ?? false,
         load: tableLoad,
-        emptyText: errorText.value || props.emptyText,
+        size: tableSize.value,
+        data: tableData.value,
         columns: tableCols.value,
+        errorText: errorText.value,
         pageIndex: tableIndex.value,
-        headerEllipsis: props.headerEllipsis,
-        slotNormalize: props.slotNormalize
+        emptyProps: tableEmptyProps.value,
+        rowHeight: props.virtual ? props.rowHeight : void 0,
+        style: props.tableStyle,
+        class: "ele-pro-table-view",
+        ...events,
+        onSelectionChange,
+        onSortChange,
+        onFilterChange,
+        onCurrentChange
       };
-      return Object.assign(pick(props, tablePropKeys), opt);
-    });
-    const tableZIndex = computed(() => {
-      if (!tableMaximized.value) {
-        return;
-      }
-      return props.maximizedIndex ?? globalProps.value.maximizedIndex;
     });
     const tableTools = computed(() => {
       const tools = props.tools ?? globalProps.value.tools ?? true;
@@ -94,23 +106,13 @@ const _sfc_main = defineComponent({
       }
       return tools || [];
     });
-    const tableEmptyProps = computed(() => {
-      return mergeProps(
-        props.emptyProps,
-        globalProps.value.emptyProps
-      );
-    });
     const rootProps = computed(() => {
+      const zIndex = props.maximizedIndex ?? globalProps.value.maximizedIndex;
       const opt = {
         ...props.loadingProps || {},
         loading: tableLoading.value,
-        class: [
-          "ele-pro-table",
-          { "is-sticky": props.sticky },
-          { "is-maximized": tableMaximized.value },
-          { "hide-bottom-line": !props.bottomLine }
-        ],
-        style: { zIndex: tableZIndex.value }
+        class: ["ele-pro-table", { "is-maximized": tableMaximized.value }],
+        style: tableMaximized.value ? { zIndex } : void 0
       };
       return opt;
     });
@@ -226,9 +228,6 @@ const _sfc_main = defineComponent({
       };
       onDone(result, parent);
     };
-    const onDone = (result, parent) => {
-      emit("done", result, parent);
-    };
     const tableLoad = (row, treeNode, resolve) => {
       if (props.load) {
         props.load(row, treeNode, resolve);
@@ -236,6 +235,9 @@ const _sfc_main = defineComponent({
       }
       reload(void 0, row, resolve);
     };
+    const onDone = (result, parent) => {
+      emit("done", result, parent);
+    };
     const onRefresh = () => {
       if (Array.isArray(props.datasource)) {
         emit("refresh");
@@ -248,14 +250,7 @@ const _sfc_main = defineComponent({
       emit("sizeChange", size);
     };
     const onColumnsChange = (columns) => {
-      const { cols, sorter } = getTableState(columns, current);
-      tableCols.value = cols;
-      nextTick(() => {
-        tableIns.doLayout();
-        if (sorter) {
-          tableIns.sort(sorter.prop, sorter.order || "ascending");
-        }
-      });
+      tableCols.value = columns;
       emit("columnsChange", columns);
     };
     const onMaximizedChange = (maximized) => {
@@ -270,47 +265,31 @@ const _sfc_main = defineComponent({
       tablePage.value = page;
       reload();
     };
-    const onRowClick = (row, column, event) => {
-      const index2 = tableData.value.indexOf(row);
-      if (props.rowClickChecked && props.selections && !isDisableRow(row, index2, props.columns)) {
-        if (props.rowClickChecked === "smart" && (props.selections.length === 0 || props.selections.length === 1)) {
-          setSelectedRows([row]);
-        } else {
-          tableIns.toggleRowSelection(row);
-        }
-      }
-      emit("rowClick", row, column, event);
-    };
     const onSelectionChange = (selection) => {
-      if (selectionUpdate.value) {
+      if (selectionIsChange(selection, props.selections)) {
         updateSelections(selection);
       }
-      emit("selectionChange", selection);
+      events.onSelectionChange(selection);
     };
     const onSortChange = (sorter) => {
-      const temp = current.sorter;
-      if (temp && sorter.prop === temp.prop && sorter.order === temp.order) {
-        return;
-      }
       if (props.loadOnChanged) {
         current.sorter = sorter;
         reload();
       }
-      emit("sortChange", sorter);
+      events.onSortChange(sorter);
     };
     const onFilterChange = (filter) => {
       if (props.loadOnChanged) {
-        const temp = getTableFilter(getTableRef()) ?? filter;
-        current.filter = temp;
+        current.filter = filter;
         reload();
       }
-      emit("filterChange", filter);
+      events.onFilterChange(filter);
     };
     const onCurrentChange = (currentRow, oldCurrentRow) => {
       if (props.current !== currentRow) {
         updateCurrent(currentRow);
       }
-      emit("currentChange", currentRow, oldCurrentRow);
+      events.onCurrentChange(currentRow, oldCurrentRow);
     };
     const updateCurrent = (currentRow) => {
       emit("update:current", currentRow);
@@ -319,17 +298,10 @@ const _sfc_main = defineComponent({
       emit("update:selections", selection);
     };
     const reloadTable = () => {
-      destroyed.value = true;
-      nextTick(() => {
-        destroyed.value = false;
-        nextTick(() => {
-          setSelectedRows(props.selections);
-        });
-      });
+      methods.doLayout();
     };
     const getTableRef = () => {
-      var _a;
-      return (_a = tableViewRef.value) == null ? void 0 : _a.tableRef;
+      return tableViewRef.value;
     };
     const getData = () => {
       return tableData.value;
@@ -337,39 +309,6 @@ const _sfc_main = defineComponent({
     const setData = (data) => {
       tableData.value = data;
     };
-    const setSelectedRows = (rows) => {
-      if (rows == null) {
-        return;
-      }
-      selectionUpdate.value = false;
-      tableIns.clearSelection();
-      rows.forEach((d) => {
-        tableIns.toggleRowSelection(d, true);
-      });
-      selectionUpdate.value = true;
-      if (selectionIsChange(rows, props.selections)) {
-        updateSelections(rows);
-      }
-    };
-    const setSelectedRowKeys = (keys) => {
-      if (!keys || !props.rowKey) {
-        return;
-      }
-      const rows = tableData.value.filter(
-        (d) => keys.some((v) => v === getValue(d, props.rowKey))
-      );
-      setSelectedRows(rows);
-    };
-    const toggleRowExpansionAll = (expanded) => {
-      var _a;
-      eachTree(
-        tableData.value,
-        (d) => {
-          tableIns.toggleRowExpansion(d, expanded);
-        },
-        (_a = props.treeProps) == null ? void 0 : _a.children
-      );
-    };
     const goPageByRowKey = (key) => {
       if (!props.rowKey || !paginationProps.value || tableLimit.value == null || !Array.isArray(props.datasource)) {
         return;
@@ -398,6 +337,24 @@ const _sfc_main = defineComponent({
         filter
       });
     };
+    watch(
+      () => props.columns,
+      (columns) => {
+        if (columns) {
+          tableCols.value = getInitCacheColumns(
+            columns,
+            props.cacheKey,
+            props.columnSortable
+          );
+        } else if (tableCols.value.length) {
+          tableCols.value = [];
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
     watch(
       () => props.datasource,
       () => {
@@ -417,24 +374,6 @@ const _sfc_main = defineComponent({
         tableSize.value = getTableSize(void 0, size, globalProps.value.size);
       }
     );
-    watch(
-      () => props.columns,
-      (columns) => {
-        if (columns) {
-          tableCols.value = getInitCacheColumns(
-            columns,
-            props.cacheKey,
-            props.columnSortable
-          );
-        } else if (tableCols.value.length) {
-          tableCols.value = [];
-        }
-      },
-      {
-        immediate: true,
-        deep: true
-      }
-    );
     watch(
       globalProps,
       (config) => {
@@ -456,43 +395,27 @@ const _sfc_main = defineComponent({
       updateCurrent(null);
     });
     return {
-      ...tableIns,
-      tableEvents,
+      ...methods,
       tableViewRef,
-      tableData,
-      tableLoading,
-      tableCols,
       tableSize,
       tableMaximized,
-      errorText,
-      destroyed,
+      slotKeys,
       tableIndex,
       paginationProps,
       tableProps,
-      tableZIndex,
       tableTools,
-      tableEmptyProps,
       rootProps,
-      tableLoad,
       onRefresh,
       onSizeChange,
       onColumnsChange,
       onMaximizedChange,
       onPageSizeChange,
       onPageCurrentChange,
-      onRowClick,
-      onSelectionChange,
-      onSortChange,
-      onFilterChange,
-      onCurrentChange,
       reload,
       reloadTable,
       getTableRef,
       getData,
       setData,
-      setSelectedRows,
-      setSelectedRowKeys,
-      toggleRowExpansionAll,
       goPageByRowKey,
       fetch
     };
@@ -508,8 +431,8 @@ const _export_sfc = (sfc, props) => {
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TableTools = resolveComponent("TableTools");
   const _component_EleToolbar = resolveComponent("EleToolbar");
-  const _component_ElEmpty = resolveComponent("ElEmpty");
-  const _component_TableView = resolveComponent("TableView");
+  const _component_EleVirtualTable = resolveComponent("EleVirtualTable");
+  const _component_EleDataTable = resolveComponent("EleDataTable");
   const _component_ElePagination = resolveComponent("ElePagination");
   const _component_EleLoading = resolveComponent("EleLoading");
   return openBlock(), createBlock(_component_EleLoading, normalizeProps(guardReactiveProps(_ctx.rootProps)), {
@@ -539,59 +462,27 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 3
       }, 16)) : createCommentVNode("", true),
       renderSlot(_ctx.$slots, "default"),
-      !_ctx.destroyed ? (openBlock(), createBlock(_component_TableView, mergeProps$1({ key: 1 }, _ctx.tableProps, {
-        ref: "tableViewRef",
-        style: _ctx.tableStyle,
-        onSelect: _ctx.tableEvents.onSelect,
-        onSelectAll: _ctx.tableEvents.onSelectAll,
-        onCellMouseEnter: _ctx.tableEvents.onCellMouseEnter,
-        onCellMouseLeave: _ctx.tableEvents.onCellMouseLeave,
-        onCellClick: _ctx.tableEvents.onCellClick,
-        onCellDblclick: _ctx.tableEvents.onCellDblclick,
-        onCellContextmenu: _ctx.tableEvents.onCellContextmenu,
-        onRowContextmenu: _ctx.tableEvents.onRowContextmenu,
-        onRowDblclick: _ctx.tableEvents.onRowDblclick,
-        onHeaderClick: _ctx.tableEvents.onHeaderClick,
-        onHeaderContextmenu: _ctx.tableEvents.onHeaderContextmenu,
-        onHeaderDragend: _ctx.tableEvents.onHeaderDragend,
-        onExpandChange: _ctx.tableEvents.onExpandChange,
-        onRowClick: _ctx.onRowClick,
-        onSelectionChange: _ctx.onSelectionChange,
-        onSortChange: _ctx.onSortChange,
-        onFilterChange: _ctx.onFilterChange,
-        onCurrentChange: _ctx.onCurrentChange
-      }), createSlots({ _: 2 }, [
-        renderList(Object.keys(_ctx.$slots).filter(
-          (k) => "default" !== k && "empty" !== k
-        ), (name) => {
+      _ctx.virtual ? (openBlock(), createBlock(_component_EleVirtualTable, mergeProps$1({ key: 1 }, _ctx.tableProps, { ref: "tableViewRef" }), createSlots({ _: 2 }, [
+        renderList(_ctx.slotKeys, (name) => {
           return {
             name,
             fn: withCtx((slotProps) => [
               renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
             ])
           };
-        }),
-        _ctx.tableEmptyProps || _ctx.$slots.empty ? {
-          name: "empty",
-          fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "empty", {
-              text: _ctx.emptyText,
-              error: _ctx.errorText
-            }, () => [
-              _ctx.tableEmptyProps ? (openBlock(), createBlock(_component_ElEmpty, mergeProps$1({
-                key: 0,
-                imageSize: 68
-              }, _ctx.tableEmptyProps === true ? {} : _ctx.emptyProps, {
-                class: "ele-table-empty",
-                description: _ctx.errorText || _ctx.emptyText
-              }), null, 16, ["description"])) : createCommentVNode("", true)
+        })
+      ]), 1040)) : (openBlock(), createBlock(_component_EleDataTable, mergeProps$1({ key: 2 }, _ctx.tableProps, { ref: "tableViewRef" }), createSlots({ _: 2 }, [
+        renderList(_ctx.slotKeys, (name) => {
+          return {
+            name,
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
             ])
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1040, ["style", "onSelect", "onSelectAll", "onCellMouseEnter", "onCellMouseLeave", "onCellClick", "onCellDblclick", "onCellContextmenu", "onRowContextmenu", "onRowDblclick", "onHeaderClick", "onHeaderContextmenu", "onHeaderDragend", "onExpandChange", "onRowClick", "onSelectionChange", "onSortChange", "onFilterChange", "onCurrentChange"])) : createCommentVNode("", true),
+          };
+        })
+      ]), 1040)),
       _ctx.paginationProps || _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
-        key: 2,
+        key: 3,
         class: "ele-pro-table-footer",
         style: normalizeStyle(_ctx.footerStyle)
       }, [
@@ -600,7 +491,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "onUpdate:currentPage": _ctx.onPageCurrentChange,
           "onUpdate:pageSize": _ctx.onPageSizeChange
         }), createSlots({ _: 2 }, [
-          renderList(Object.keys(_ctx.$slots).filter((k) => "default" !== k), (name) => {
+          renderList(_ctx.slotKeys, (name) => {
             return {
               name,
               fn: withCtx((slotProps) => [