ele-admin-plus 1.0.0-beta.1

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

@@ -0,0 +1,659 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const licenseUtil = require("../utils/license-util");
+const useReceiver = require("../ele-config-provider/use-receiver");
+const core = require("../utils/core");
+const ElePagination = require("../ele-pagination/index");
+const EleToolbar = require("../ele-toolbar/index");
+const TableTools = require("./components/table-tools");
+const TableView = require("./components/table-view");
+const util = require("./util");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleProTable",
+  components: { ElEmpty: elementPlus.ElEmpty, ElePagination, EleToolbar, TableTools, TableView },
+  props: props.proTableProps,
+  emits: props.proTableEmits,
+  setup(props2, { emit }) {
+    const { authenticated } = licenseUtil.useLicense();
+    const globalProps = useReceiver.useGlobalProps("table");
+    const tableIns = util.useTableMethods(() => {
+      var _a;
+      return (_a = tableViewRef.value) == null ? void 0 : _a.tableRef;
+    });
+    const tableEvents = util.useTableEvents(emit);
+    const current = { sorter: null, filter: null, where: {} };
+    const tableViewRef = vue.ref(null);
+    const tableData = vue.ref([]);
+    const tablePage = vue.ref(util.getDefaultPage(props2.pagination));
+    const tableLimit = vue.ref(util.getDefaultLimit(props2.pagination));
+    const tableTotal = vue.ref(0);
+    const tableLoading = vue.ref(props2.loading);
+    const tableCols = vue.ref([]);
+    const tableSize = vue.ref(
+      util.getDefaultSize(util.getCacheSize(props2.cacheKey) ?? props2.size, globalProps)
+    );
+    const tableMaximized = vue.ref(false);
+    const errorText = vue.ref("");
+    const destroyed = vue.ref(false);
+    const selectionUpdate = vue.ref(true);
+    const tableIndex = vue.computed(() => {
+      return ((tablePage.value ?? 1) - 1) * (tableLimit.value ?? 0) + 1;
+    });
+    const paginationProps = vue.computed(() => {
+      if (props2.pagination == null || props2.pagination === false) {
+        return {};
+      }
+      const defaultProps = {
+        small: tableSize.value !== "large",
+        pagerCount: 5,
+        layout: "total, sizes, prev, pager, next, jumper",
+        pageSizes: [10, 20, 30, 40, 50, 100],
+        hideOnSinglePage: false
+      };
+      const pageProps = {
+        total: tableTotal.value,
+        pageSize: tableLimit.value,
+        currentPage: tablePage.value
+      };
+      if (typeof props2.pagination === "object") {
+        return {
+          ...defaultProps,
+          ...core.omit(props2.pagination, "autoAmend"),
+          ...pageProps
+        };
+      }
+      return { ...defaultProps, ...pageProps };
+    });
+    const reload = (option, parent, resolve) => {
+      if (!authenticated.value) {
+        errorText.value = licenseUtil.UNAUTHORIZED_TIP;
+        return;
+      }
+      if (option) {
+        if (option.page) {
+          tablePage.value = option.page;
+        }
+        if (option.limit) {
+          tableLimit.value = option.limit;
+        }
+        if (option.where) {
+          current.where = option.where;
+        }
+        if (option.sorter) {
+          current.sorter = option.sorter;
+        }
+        if (option.filter) {
+          current.filter = option.filter;
+        }
+      }
+      errorText.value = "";
+      const sorter = current.sorter ?? getDefaultSorter();
+      if (typeof props2.datasource === "function") {
+        if (!parent) {
+          tableLoading.value = true;
+        }
+        const filter = current.filter ?? getDefaultFilter();
+        props2.datasource({
+          page: tablePage.value,
+          limit: tableLimit.value,
+          where: { ...current.where },
+          orders: getRequestOrders(sorter),
+          filters: util.getRequestFilters(filter),
+          sorter,
+          filter,
+          parent
+        }).then((response) => {
+          const { data, total } = getResponseResult(response);
+          requestCallback(data, total, parent, response, resolve);
+        }).catch((e) => {
+          requestCallback(e == null ? void 0 : e.message);
+          resolve && console.error(e);
+        });
+        return;
+      }
+      if (Array.isArray(props2.datasource)) {
+        tableLoading.value = true;
+        const { data, page, total } = util.reloadData(
+          props2.datasource,
+          sorter,
+          !props2.pagination ? void 0 : tablePage.value,
+          tableLimit.value
+        );
+        tableData.value = data;
+        tablePage.value = page;
+        tableTotal.value = total;
+        tableLoading.value = false;
+        onDone({ data, page, total, response: props2.datasource });
+      }
+    };
+    const requestCallback = (data, total, parent, response, resolve) => {
+      if (!Array.isArray(data)) {
+        tableData.value = [];
+        tableLoading.value = false;
+        if (typeof data === "string" && data) {
+          errorText.value = data;
+          return;
+        }
+        errorText.value = "获取数据失败";
+        console.error(
+          "返回的数据格式与配置的不一致, 返回的数据:",
+          response,
+          "需要的格式:",
+          getResponseName()
+        );
+        return;
+      }
+      if (resolve) {
+        resolve(data);
+      } else {
+        if (props2.pagination && (props2.pagination === true || props2.pagination.autoAmend) && !data.length && total && tablePage.value && tableLimit.value) {
+          const maxPage = Math.ceil(total / tableLimit.value);
+          if (maxPage && tablePage.value > maxPage) {
+            tablePage.value = maxPage;
+            reload();
+            return;
+          }
+        }
+        tableData.value = data;
+        tableTotal.value = total || data.length;
+      }
+      tableLoading.value = false;
+      const result = {
+        data: tableData.value,
+        page: tablePage.value,
+        total: tableTotal.value,
+        response
+      };
+      onDone(result, parent);
+    };
+    const getRequestOrders = (sorter) => {
+      const orders = {};
+      const { sortName, orderName } = getRequestName();
+      if (!sortName || !orderName) {
+        return orders;
+      }
+      const ascValue = getAscendingValue();
+      const descValue = getDescendingValue();
+      const items = util.getOrderItems(sorter);
+      if (items.length === 1) {
+        orders[sortName] = items[0].field;
+        orders[orderName] = items[0].descend ? descValue : ascValue;
+      } else if (items.length) {
+        orders[sortName] = items.map((d) => [d.field, d.descend ? descValue : ascValue].join(" ")).join(",");
+      }
+      return orders;
+    };
+    const getResponseResult = (data) => {
+      const result = props2.parseData ? props2.parseData(data) : data;
+      if (!result || Array.isArray(result)) {
+        return { data: getResponseData(result) };
+      }
+      const { dataName, countName } = getResponseName();
+      if (!dataName) {
+        return {};
+      }
+      return {
+        data: getResponseData(util.getValue(result, dataName)),
+        total: (countName ? util.getValue(result, countName) : void 0) ?? 0
+      };
+    };
+    const getResponseData = (data) => {
+      var _a;
+      if (!data || !props2.lazy) {
+        return data;
+      }
+      const name = ((_a = props2.treeProps) == null ? void 0 : _a.hasChildren) ?? "hasChildren";
+      return data.map((d) => {
+        const temp = { ...d };
+        temp[name] = temp[name] ?? true;
+        return temp;
+      });
+    };
+    const getRequestName = () => {
+      return Object.assign(
+        { sortName: "sort", orderName: "order" },
+        globalProps.value.request,
+        props2.request
+      );
+    };
+    const getResponseName = () => {
+      return Object.assign(
+        { dataName: "list", countName: "count" },
+        globalProps.value.response,
+        props2.response
+      );
+    };
+    const getAscendingValue = () => {
+      const global = globalProps.value.ascendingValue;
+      return props2.ascendingValue ?? global ?? "asc";
+    };
+    const getDescendingValue = () => {
+      const global = globalProps.value.descendingValue;
+      return props2.descendingValue ?? global ?? "desc";
+    };
+    const getDefaultSorter = () => {
+      return props2.defaultSort ?? {};
+    };
+    const getDefaultFilter = () => {
+      const filter = {};
+      core.eachTree(props2.columns, (d) => {
+        if (typeof d.columnKey === "string" && d.columnKey.length && d.filteredValue) {
+          filter[d.columnKey] = d.filteredValue;
+        }
+      });
+      return filter;
+    };
+    const onDone = (result, parent) => {
+      vue.nextTick(() => {
+        tableIns.doLayout();
+      });
+      emit("done", result, parent);
+    };
+    const tableLoad = (row, treeNode, resolve) => {
+      if (props2.load) {
+        props2.load(row, treeNode, resolve);
+        return;
+      }
+      reload(void 0, row, resolve);
+    };
+    const onRefresh = () => {
+      if (Array.isArray(props2.datasource)) {
+        emit("refresh");
+        return;
+      }
+      reload();
+    };
+    const onSizeChange = (size) => {
+      tableSize.value = size;
+      vue.nextTick(() => {
+        tableIns.doLayout();
+      });
+      emit("sizeChange", size);
+    };
+    const onColumnsChange = (columns) => {
+      tableCols.value = columns;
+      vue.nextTick(() => {
+        tableIns.doLayout();
+      });
+      emit("columnsChange", columns);
+    };
+    const onMaximizedChange = (maximized) => {
+      tableMaximized.value = maximized;
+      vue.nextTick(() => {
+        tableIns.doLayout();
+      });
+      emit("maximizedChange", maximized);
+    };
+    const onPageSizeChange = (limit) => {
+      tableLimit.value = limit;
+      reload();
+    };
+    const onPageCurrentChange = (page) => {
+      tablePage.value = page;
+      reload();
+    };
+    const onRowClick = (row, column, event) => {
+      const index2 = tableData.value.indexOf(row);
+      if (props2.rowClickChecked && props2.selections && !util.isDisableRow(row, index2, props2.columns)) {
+        if (props2.rowClickChecked === "smart" && (props2.selections.length === 0 || props2.selections.length === 1)) {
+          setSelectedRows([row]);
+        } else {
+          tableIns.toggleRowSelection(row);
+        }
+      }
+      emit("rowClick", row, column, event);
+    };
+    const onSelectionChange = (selection) => {
+      if (selectionUpdate.value) {
+        updateSelections(selection);
+      }
+      emit("selectionChange", selection);
+    };
+    const onSortChange = (sorter) => {
+      if (props2.loadOnChanged) {
+        current.sorter = sorter;
+        reload();
+      }
+      emit("sortChange", sorter);
+    };
+    const onFilterChange = (filter) => {
+      if (props2.loadOnChanged) {
+        current.filter = filter;
+        reload();
+      }
+      emit("filterChange", filter);
+    };
+    const onCurrentChange = (currentRow, oldCurrentRow) => {
+      if (props2.current !== currentRow) {
+        emit("update:current", currentRow);
+      }
+      emit("currentChange", currentRow, oldCurrentRow);
+    };
+    const updateSelections = (selection) => {
+      emit("update:selections", selection);
+    };
+    const reloadTable = () => {
+      destroyed.value = true;
+      vue.nextTick(() => {
+        destroyed.value = false;
+        vue.nextTick(() => {
+          setSelectedRows(props2.selections);
+        });
+      });
+    };
+    const getData = () => {
+      return tableData.value;
+    };
+    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 (util.selectionIsChange(rows, props2.selections)) {
+        updateSelections(rows);
+      }
+    };
+    const setSelectedRowKeys = (keys) => {
+      if (!keys || !props2.rowKey) {
+        return;
+      }
+      const rows = tableData.value.filter(
+        (d) => keys.some((v) => v === util.getValue(d, props2.rowKey))
+      );
+      setSelectedRows(rows);
+    };
+    const toggleRowExpansionAll = (expanded) => {
+      var _a;
+      core.eachTree(
+        tableData.value,
+        (d) => {
+          tableIns.toggleRowExpansion(d, expanded);
+        },
+        (_a = props2.treeProps) == null ? void 0 : _a.children
+      );
+    };
+    const goPageByRowKey = (key) => {
+      if (!props2.rowKey || !props2.pagination || tableLimit.value == null || !Array.isArray(props2.datasource)) {
+        return;
+      }
+      const sorter = current.sorter ?? getDefaultSorter();
+      const data = util.sortData(props2.datasource, sorter);
+      const index2 = data.findIndex((d) => util.getValue(d, props2.rowKey) === key);
+      const page = Math.floor(index2 / tableLimit.value) + 1;
+      if (tablePage.value !== page) {
+        reload({ page });
+      }
+    };
+    const fetch = (callback) => {
+      const sorter = current.sorter ?? getDefaultSorter();
+      const filter = current.filter ?? getDefaultFilter();
+      callback({
+        page: tablePage.value,
+        limit: tableLimit.value,
+        where: { ...current.where },
+        orders: getRequestOrders(sorter),
+        filters: util.getRequestFilters(filter),
+        sorter,
+        filter
+      });
+    };
+    vue.watch(
+      () => props2.datasource,
+      () => {
+        reload();
+      },
+      { deep: true }
+    );
+    vue.watch(
+      () => props2.loading,
+      (loading) => {
+        tableLoading.value = loading;
+      }
+    );
+    vue.watch(
+      () => props2.size,
+      (size) => {
+        tableSize.value = util.getDefaultSize(size, globalProps);
+      }
+    );
+    vue.watch(
+      () => props2.columns,
+      (columns) => {
+        if (columns) {
+          tableCols.value = util.getInitCacheColumns(
+            columns,
+            props2.cacheKey,
+            props2.columnSortable
+          );
+        } else if (tableCols.value.length) {
+          tableCols.value = [];
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    vue.watch(
+      globalProps,
+      (config) => {
+        if (props2.size == null && config.size != null) {
+          tableSize.value = config.size;
+        }
+      },
+      { deep: true }
+    );
+    vue.onMounted(() => {
+      if (props2.loadOnCreated) {
+        reload({ where: props2.where });
+      }
+    });
+    return {
+      ...tableIns,
+      tableEvents,
+      tableViewRef,
+      tableData,
+      tableLoading,
+      tableCols,
+      tableSize,
+      tableMaximized,
+      errorText,
+      destroyed,
+      tableIndex,
+      paginationProps,
+      tableLoad,
+      onRefresh,
+      onSizeChange,
+      onColumnsChange,
+      onMaximizedChange,
+      onPageSizeChange,
+      onPageCurrentChange,
+      onRowClick,
+      onSelectionChange,
+      onSortChange,
+      onFilterChange,
+      onCurrentChange,
+      reload,
+      reloadTable,
+      getData,
+      setData,
+      setSelectedRows,
+      setSelectedRowKeys,
+      toggleRowExpansionAll,
+      goPageByRowKey,
+      fetch
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_TableTools = vue.resolveComponent("TableTools");
+  const _component_EleToolbar = vue.resolveComponent("EleToolbar");
+  const _component_ElEmpty = vue.resolveComponent("ElEmpty");
+  const _component_TableView = vue.resolveComponent("TableView");
+  const _component_ElePagination = vue.resolveComponent("ElePagination");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([
+      "ele-pro-table",
+      { "is-maximized": _ctx.tableMaximized },
+      { "is-header-ellipsis": _ctx.headerEllipsis }
+    ]),
+    style: vue.normalizeStyle({ zIndex: _ctx.tableMaximized ? _ctx.maximizedIndex : void 0 })
+  }, [
+    _ctx.toolbar ? (vue.openBlock(), vue.createBlock(_component_EleToolbar, {
+      key: 0,
+      title: _ctx.title,
+      subtitle: _ctx.subtitle,
+      theme: _ctx.toolbarTheme,
+      form: _ctx.toolbarForm,
+      style: vue.normalizeStyle(_ctx.toolbarStyle)
+    }, {
+      tools: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "tools"),
+        vue.createVNode(_component_TableTools, {
+          size: _ctx.tableSize,
+          columns: _ctx.columns,
+          tools: _ctx.tools,
+          columnSortable: _ctx.columnSortable,
+          columnFixed: _ctx.columnFixed,
+          maximized: _ctx.tableMaximized,
+          cacheKey: _ctx.cacheKey,
+          locale: _ctx.locale,
+          onReload: _ctx.onRefresh,
+          "onUpdate:size": _ctx.onSizeChange,
+          "onUpdate:columns": _ctx.onColumnsChange,
+          "onUpdate:maximized": _ctx.onMaximizedChange
+        }, null, 8, ["size", "columns", "tools", "columnSortable", "columnFixed", "maximized", "cacheKey", "locale", "onReload", "onUpdate:size", "onUpdate:columns", "onUpdate:maximized"])
+      ]),
+      default: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "toolbar")
+      ]),
+      _: 3
+    }, 8, ["title", "subtitle", "theme", "form", "style"])) : vue.createCommentVNode("", true),
+    vue.renderSlot(_ctx.$slots, "default"),
+    !_ctx.destroyed ? (vue.openBlock(), vue.createBlock(_component_TableView, {
+      key: 1,
+      ref: "tableViewRef",
+      data: _ctx.tableData,
+      height: _ctx.tableMaximized && _ctx.maximizedHeight ? _ctx.maximizedHeight : _ctx.height,
+      maxHeight: _ctx.maxHeight,
+      stripe: _ctx.stripe,
+      border: _ctx.border,
+      size: _ctx.tableSize,
+      fit: _ctx.fit,
+      showHeader: _ctx.showHeader,
+      highlightCurrentRow: _ctx.highlightCurrentRow,
+      currentRowKey: _ctx.currentRowKey,
+      rowClassName: _ctx.rowClassName,
+      rowStyle: _ctx.rowStyle,
+      cellClassName: _ctx.cellClassName,
+      cellStyle: _ctx.cellStyle,
+      headerRowClassName: _ctx.headerRowClassName,
+      headerRowStyle: _ctx.headerRowStyle,
+      headerCellClassName: _ctx.headerCellClassName,
+      headerCellStyle: _ctx.headerCellStyle,
+      rowKey: _ctx.rowKey,
+      defaultExpandAll: _ctx.defaultExpandAll,
+      expandRowKeys: _ctx.expandRowKeys,
+      defaultSort: _ctx.defaultSort,
+      tooltipEffect: _ctx.tooltipEffect,
+      tooltipOptions: _ctx.tooltipOptions,
+      showSummary: _ctx.showSummary,
+      sumText: _ctx.sumText,
+      summaryMethod: _ctx.summaryMethod,
+      spanMethod: _ctx.spanMethod,
+      selectOnIndeterminate: _ctx.selectOnIndeterminate,
+      indent: _ctx.indent,
+      lazy: _ctx.lazy,
+      load: _ctx.tableLoad,
+      treeProps: _ctx.treeProps,
+      tableLayout: _ctx.tableLayout,
+      scrollbarAlwaysOn: _ctx.scrollbarAlwaysOn,
+      flexible: _ctx.flexible,
+      columns: _ctx.tableCols,
+      pageIndex: _ctx.tableIndex,
+      loading: _ctx.tableLoading,
+      style: vue.normalizeStyle(_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
+    }, vue.createSlots({
+      empty: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "empty", {
+          text: _ctx.emptyText,
+          error: _ctx.errorText
+        }, () => [
+          vue.createVNode(_component_ElEmpty, {
+            description: _ctx.errorText || _ctx.emptyText,
+            imageSize: 68
+          }, null, 8, ["description"])
+        ])
+      ]),
+      _: 2
+    }, [
+      vue.renderList(Object.keys(_ctx.$slots).filter(
+        (k) => "default" !== k && "empty" !== k
+      ), (name) => {
+        return {
+          name,
+          fn: vue.withCtx((slotProps) => [
+            vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+          ])
+        };
+      })
+    ]), 1032, ["data", "height", "maxHeight", "stripe", "border", "size", "fit", "showHeader", "highlightCurrentRow", "currentRowKey", "rowClassName", "rowStyle", "cellClassName", "cellStyle", "headerRowClassName", "headerRowStyle", "headerCellClassName", "headerCellStyle", "rowKey", "defaultExpandAll", "expandRowKeys", "defaultSort", "tooltipEffect", "tooltipOptions", "showSummary", "sumText", "summaryMethod", "spanMethod", "selectOnIndeterminate", "indent", "lazy", "load", "treeProps", "tableLayout", "scrollbarAlwaysOn", "flexible", "columns", "pageIndex", "loading", "style", "onSelect", "onSelectAll", "onCellMouseEnter", "onCellMouseLeave", "onCellClick", "onCellDblclick", "onCellContextmenu", "onRowContextmenu", "onRowDblclick", "onHeaderClick", "onHeaderContextmenu", "onHeaderDragend", "onExpandChange", "onRowClick", "onSelectionChange", "onSortChange", "onFilterChange", "onCurrentChange"])) : vue.createCommentVNode("", true),
+    _ctx.pagination || _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 2,
+      class: "ele-pro-table-footer",
+      style: vue.normalizeStyle(_ctx.footerStyle)
+    }, [
+      vue.renderSlot(_ctx.$slots, "footer"),
+      _ctx.pagination ? (vue.openBlock(), vue.createBlock(_component_ElePagination, vue.mergeProps({ key: 0 }, _ctx.paginationProps, {
+        "onUpdate:currentPage": _ctx.onPageCurrentChange,
+        "onUpdate:pageSize": _ctx.onPageSizeChange
+      }), vue.createSlots({ _: 2 }, [
+        vue.renderList(Object.keys(_ctx.$slots).filter((k) => "default" !== k), (name) => {
+          return {
+            name,
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1040, ["onUpdate:currentPage", "onUpdate:pageSize"])) : vue.createCommentVNode("", true)
+    ], 4)) : vue.createCommentVNode("", true)
+  ], 6);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;