yuang-framework-ui-pc 1.1.44 → 1.1.46

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

@@ -0,0 +1,572 @@
+import { defineComponent, ref, shallowRef, computed, watch, onMounted, nextTick, resolveComponent, createBlock, openBlock, normalizeProps, guardReactiveProps, withCtx, createCommentVNode, renderSlot, createElementBlock, mergeProps as mergeProps$1, createSlots, renderList, Fragment, normalizeStyle } from "vue";
+import { pick, getValue } from "../utils/core";
+import { useGlobalProps } from "../ele-config-provider/receiver";
+import EleLoading from "../ele-loading/index";
+import ElePagination from "../ele-pagination/index";
+import { dataTablePropKeys } from "../ele-data-table/props";
+import { useEmits, useMethods, arrayIsChanged, getRowKeys } 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 { getDefaultFilter, getTablePage, getTableLimit, getTableSize, getRowKey, getPaginationProps, mergeProps, cacheColWidth, getInitCacheColumns, getRequestOrderParamList, getRequestFilters, getRequestPageParam, sortData, reloadData, getResponseResult, getResponseName, isAutoAmend } from "./util";
+import { proTableEmits, proTableProps } from "./props";
+const ownSlots = ["default", "toolbar", "tools", "footer"];
+const toolsSlotExcludes = [...ownSlots, "empty", "append"];
+const tableSlotExcludes = [...ownSlots, "printTop", "printBottom"];
+const pageSlotExcludes = [...toolsSlotExcludes, "printTop", "printBottom"];
+const _sfc_main = defineComponent({
+  name: "EleProTable",
+  components: {
+    EleLoading,
+    ElePagination,
+    EleDataTable,
+    EleVirtualTable,
+    EleToolbar,
+    TableTools
+  },
+  props: proTableProps,
+  emits: proTableEmits,
+  setup(props, { emit }) {
+    const isShowTable = ref(true);
+    const events = useEmits(emit);
+    const methods = useMethods(() => getTableRef());
+    const globalProps = useGlobalProps("table");
+    const tableState = {
+      sorter: props.defaultSort ?? {},
+      filter: getDefaultFilter(props.columns),
+      queryParam: props.queryParam ?? {}
+    };
+    const tableToolsRef = ref(null);
+    const tableViewRef = ref(null);
+    const tableData = ref([]);
+    const tablePage = ref(getTablePage(props.pagination, globalProps.value.pagination));
+    const tableLimit = ref(getTableLimit(props.pagination, globalProps.value.pagination));
+    const tableTotal = ref(0);
+    const tableLoading = ref(props.loading);
+    const tableCols = ref([]);
+    const tableSize = ref(getTableSize(props.cacheKey, props.size, globalProps.value.size));
+    const tableMaximized = ref(false);
+    const errorText = ref("");
+    const cacheData = ref();
+    const tableRowKey = shallowRef(getRowKey(props.rowKey));
+    const tableIndex = computed(() => {
+      return ((tablePage.value ?? 1) - 1) * (tableLimit.value ?? 0) + 1;
+    });
+    const paginationProps = computed(() => {
+      return getPaginationProps(tableSize.value, props.pagination, globalProps.value.pagination, {
+        total: tableTotal.value,
+        pageSize: tableLimit.value,
+        currentPage: tablePage.value,
+        hasNext: tableData.value.length >= tableLimit.value
+      });
+    });
+    const tableEmptyProps = computed(() => {
+      return mergeProps(props.emptyProps, globalProps.value.emptyProps);
+    });
+    const isFunctionSource = computed(() => {
+      return typeof props.datasource === "function";
+    });
+    const tableProps = computed(() => {
+      const isMaximized = tableMaximized.value && props.maximizedHeight;
+      return {
+        ...pick(props, dataTablePropKeys),
+        height: isMaximized ? props.maximizedHeight : props.height,
+        border: props.border ?? globalProps.value.border ?? false,
+        stripe: props.stripe ?? globalProps.value.stripe ?? false,
+        load: tableLoad,
+        size: tableSize.value,
+        data: tableData.value,
+        columns: tableCols.value,
+        cacheData: cacheData.value,
+        errorText: errorText.value,
+        pageIndex: tableIndex.value,
+        emptyProps: tableEmptyProps.value,
+        rowHeight: props.virtual ? props.rowHeight : void 0,
+        rowKey: tableRowKey.value,
+        style: props.tableStyle,
+        class: "ele-pro-table-view",
+        ...events,
+        onSelectionChange: handleSelectionChange,
+        onSortChange: handleSortChange,
+        onFilterChange: handleFilterChange,
+        onCurrentChange: handleCurrentChange,
+        onHeaderDragend: handleHeaderDragend
+      };
+    });
+    const toolNames = computed(() => {
+      const tools = props.tools ?? globalProps.value.tools ?? true;
+      if (tools === true) {
+        return ["reload", "size", "columns", "maximized"];
+      }
+      return tools || [];
+    });
+    const tableToolbarProps = computed(() => {
+      return mergeProps(props.toolbar, globalProps.value.toolbar);
+    });
+    const toolExportConfig = computed(() => {
+      const globalExportConfig = globalProps.value.exportConfig || {};
+      const userExportConfig = props.exportConfig || {};
+      return {
+        ...globalExportConfig,
+        ...userExportConfig,
+        modalProps: {
+          ...globalExportConfig.modalProps || {},
+          ...userExportConfig.modalProps || {}
+        }
+      };
+    });
+    const toolPrintConfig = computed(() => {
+      const globalPrintConfig = globalProps.value.printConfig || {};
+      const userPrintConfig = props.printConfig || {};
+      return {
+        ...globalPrintConfig,
+        ...userPrintConfig,
+        modalProps: {
+          ...globalPrintConfig.modalProps || {},
+          ...userPrintConfig.modalProps || {}
+        },
+        printerProps: {
+          ...globalPrintConfig.printerProps || {},
+          ...userPrintConfig.printerProps || {}
+        },
+        tableProps: {
+          ...globalPrintConfig.tableProps || {},
+          ...userPrintConfig.tableProps || {}
+        }
+      };
+    });
+    const loadingProps = computed(() => {
+      const zIndex = props.maximizedIndex ?? globalProps.value.maximizedIndex;
+      return {
+        ...props.loadingProps || {},
+        loading: tableLoading.value,
+        class: ["ele-pro-table", { "is-maximized": tableMaximized.value }, { "is-border": tableProps.value.border }],
+        style: tableMaximized.value ? { zIndex } : void 0
+      };
+    });
+    const load = (option, parent, resolve) => {
+      if (option) {
+        if (option.currentPage) {
+          tablePage.value = option.currentPage;
+        }
+        if (option.pageSize) {
+          tableLimit.value = option.pageSize;
+        }
+        if (option.queryParam) {
+          tableState.queryParam = option.queryParam;
+        }
+        if (option.sorter) {
+          tableState.sorter = option.sorter;
+        }
+        if (option.filter) {
+          tableState.filter = option.filter;
+        }
+      }
+      errorText.value = "";
+      const sorter = tableState.sorter;
+      if (!isFunctionSource.value) {
+        const { records, currentPage, totalCount } = reloadData(props.datasource, sorter, paginationProps.value ? tablePage.value : void 0, tableLimit.value);
+        cacheData.value = props.datasource;
+        tableData.value = records;
+        tablePage.value = currentPage;
+        tableTotal.value = totalCount;
+        handleDone({ records, currentPage, totalCount, response: props.datasource });
+        return;
+      }
+      if (!parent) {
+        tableLoading.value = true;
+      }
+      const filter = tableState.filter;
+      const orderParamList = getRequestOrderParamList(sorter, props.request, globalProps.value.request);
+      props.datasource({
+        currentPage: tablePage.value,
+        pageSize: tableLimit.value,
+        pageParam: getRequestPageParam(tablePage.value, tableLimit.value, props.request, globalProps.value.request),
+        queryParam: Object.assign({}, tableState.queryParam),
+        orderParamList,
+        filters: getRequestFilters(filter),
+        sorter,
+        filter,
+        parent
+      }).then((response) => {
+        const parseData = props.parseData ?? globalProps.value.parseData;
+        const result = parseData ? parseData(response) : response;
+        const { records, totalCount } = getResponseResult(result, props.response, globalProps.value.response, props.lazy, props.treeProps);
+        requestCallback(records, totalCount, parent, result, resolve);
+      }).catch((e) => {
+        requestCallback(e == null ? void 0 : e.message);
+        resolve && console.error(e);
+      });
+    };
+    const reload = (option, parent, resolve) => {
+      load(option, parent, resolve);
+    };
+    const reset = () => {
+      methods.doLayout();
+      if (props.lazy) {
+        isShowTable.value = false;
+        nextTick(() => {
+          isShowTable.value = true;
+        });
+      }
+    };
+    const requestCallback = (data, totalCount, parent, response, resolve) => {
+      var _a;
+      if (!Array.isArray(data)) {
+        tableData.value = [];
+        tableLoading.value = false;
+        if (typeof data === "string" && data) {
+          errorText.value = data;
+          return;
+        }
+        errorText.value = "获取数据失败";
+        console.error("返回的数据格式与配置的不一致, 返回的数据:", response, "需要的格式:", getResponseName(globalProps.value.response, props.response));
+        return;
+      }
+      if (resolve) {
+        if (parent != null) {
+          parent[((_a = props.treeProps) == null ? void 0 : _a.children) || "children"] = data;
+        }
+        resolve(data);
+      } else {
+        if (isAutoAmend(props.pagination, globalProps.value.pagination) && !data.length && totalCount && "*" !== totalCount && tablePage.value && tableLimit.value) {
+          const maxPage = Math.ceil(totalCount / tableLimit.value);
+          if (maxPage && tablePage.value > maxPage) {
+            tablePage.value = maxPage;
+            reload();
+            return;
+          }
+        }
+        tableData.value = data;
+        tableTotal.value = totalCount || data.length;
+      }
+      tableLoading.value = false;
+      const result = {
+        records: tableData.value,
+        currentPage: tablePage.value,
+        totalCount: tableTotal.value,
+        response
+      };
+      handleDone(result, parent);
+    };
+    const tableLoad = (row, treeNode, resolve) => {
+      if (props.load) {
+        props.load(row, treeNode, resolve);
+        return;
+      }
+      reload(void 0, row, resolve);
+    };
+    const handleDone = (result, parent) => {
+      nextTick(() => {
+        if (props.current != null) {
+          methods.setCurrentRowKey(getValue(props.current, tableRowKey.value));
+        }
+        if (props.selections != null && props.selections.length) {
+          methods.setSelectedRowKeys(getRowKeys(props.selections, tableRowKey.value));
+        }
+      });
+      emit("done", result, parent);
+    };
+    const handleRefresh = () => {
+      if (isFunctionSource.value) {
+        reload();
+        return;
+      }
+      emit("refresh");
+    };
+    const handleSizeChange = (size) => {
+      tableSize.value = size;
+      emit("sizeChange", size);
+    };
+    const handleColumnsChange = (columns, tableColumns, isReset) => {
+      tableCols.value = columns;
+      emit("columnsChange", columns, tableColumns, isReset);
+    };
+    const handleMaximizedChange = (maximized) => {
+      tableMaximized.value = maximized;
+      emit("maximizedChange", maximized);
+    };
+    const handlePageSizeChange = (pageSize) => {
+      if (tableLimit.value !== pageSize) {
+        tableLimit.value = pageSize;
+        if (tableTotal.value !== "*") {
+          const maxPage = Math.ceil(tableTotal.value / pageSize);
+          if (maxPage && tablePage.value > maxPage) {
+            tablePage.value = maxPage;
+          }
+        }
+        reload();
+      }
+    };
+    const handlePageCurrentChange = (page) => {
+      if (tablePage.value !== page) {
+        tablePage.value = page;
+        reload();
+      }
+    };
+    const handleSortChange = (sorter) => {
+      if (props.loadOnChanged) {
+        tableState.sorter = sorter;
+        reload();
+      }
+      events.onSortChange(sorter);
+    };
+    const handleFilterChange = (filter) => {
+      if (props.loadOnChanged) {
+        tableState.filter = filter;
+        reload();
+      }
+      events.onFilterChange(filter);
+    };
+    const handleHeaderDragend = (newWidth, oldWidth, column, event) => {
+      cacheColWidth(newWidth, column, props.cacheKey);
+      events.onHeaderDragend(newWidth, oldWidth, column, event);
+    };
+    const handleCurrentChange = (currentRow, oldCurrentRow) => {
+      updateCurrent(currentRow);
+      events.onCurrentChange(currentRow, oldCurrentRow);
+    };
+    const handleSelectionChange = (selection) => {
+      updateSelections(selection);
+      events.onSelectionChange(selection);
+    };
+    const updateCurrent = (currentRow) => {
+      if (currentRow !== props.current) {
+        emit("update:current", currentRow);
+      }
+    };
+    const updateSelections = (selection) => {
+      if (arrayIsChanged(selection, props.selections)) {
+        emit("update:selections", selection);
+      }
+    };
+    const getTableRef = () => {
+      return tableViewRef.value;
+    };
+    const getData = () => {
+      return tableData.value;
+    };
+    const setData = (data) => {
+      tableData.value = data;
+    };
+    const goPageByRowKey = (key) => {
+      if (!paginationProps.value || tableLimit.value == null || isFunctionSource.value) {
+        return;
+      }
+      const rowKey = tableRowKey.value;
+      const data = sortData(props.datasource, tableState.sorter);
+      const index2 = data.findIndex((d) => getValue(d, rowKey) === key);
+      const currentPage = Math.floor(index2 / tableLimit.value) + 1;
+      if (tablePage.value !== currentPage) {
+        reload({ currentPage });
+      }
+    };
+    const fetch = (callback) => {
+      const { sorter, filter } = tableState;
+      const orderParamList = getRequestOrderParamList(sorter, props.request, globalProps.value.request);
+      callback({
+        currentPage: tablePage.value,
+        pageSize: tableLimit.value,
+        pageParam: getRequestPageParam(tablePage.value, tableLimit.value, props.request, globalProps.value.request),
+        queryParam: Object.assign({}, tableState.queryParam),
+        orderParamList,
+        filters: getRequestFilters(filter),
+        sorter,
+        filter
+      });
+    };
+    const openPrintModal = () => {
+      if (tableToolsRef.value) {
+        tableToolsRef.value.openPrintModal();
+      }
+    };
+    const printData = (params) => {
+      if (tableToolsRef.value) {
+        tableToolsRef.value.printData(params);
+      }
+    };
+    const openExportModal = () => {
+      if (tableToolsRef.value) {
+        tableToolsRef.value.openExportModal();
+      }
+    };
+    const exportData = (params) => {
+      if (tableToolsRef.value) {
+        tableToolsRef.value.exportData(params);
+      }
+    };
+    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,
+      () => {
+        reload();
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.loading,
+      (loading) => {
+        tableLoading.value = loading;
+      }
+    );
+    watch(
+      () => props.size,
+      (size) => {
+        tableSize.value = getTableSize(void 0, size, globalProps.value.size);
+      }
+    );
+    watch(
+      () => props.current,
+      (current) => {
+        methods.setCurrentRowKey(getValue(current, tableRowKey.value));
+      }
+    );
+    watch(
+      () => props.selections,
+      (selections) => {
+        methods.setSelectedRowKeys(getRowKeys(selections, tableRowKey.value));
+      }
+    );
+    watch(
+      () => props.rowKey,
+      () => {
+        tableRowKey.value = getRowKey(props.rowKey);
+      }
+    );
+    watch(
+      globalProps,
+      (config) => {
+        tableSize.value = getTableSize(props.cacheKey, props.size, config.size);
+      },
+      { deep: true }
+    );
+    onMounted(() => {
+      if (props.loadOnCreated) {
+        reload();
+      }
+    });
+    return {
+      isShowTable,
+      toolsSlotExcludes,
+      tableSlotExcludes,
+      pageSlotExcludes,
+      ...methods,
+      tableToolsRef,
+      tableViewRef,
+      tableData,
+      tableSize,
+      tableMaximized,
+      tableIndex,
+      paginationProps,
+      tableProps,
+      toolNames,
+      tableToolbarProps,
+      toolExportConfig,
+      toolPrintConfig,
+      loadingProps,
+      handleRefresh,
+      handleSizeChange,
+      handleColumnsChange,
+      handleMaximizedChange,
+      handlePageSizeChange,
+      handlePageCurrentChange,
+      reload,
+      reset,
+      // reloadTable,
+      getTableRef,
+      getData,
+      setData,
+      goPageByRowKey,
+      fetch,
+      openPrintModal,
+      printData,
+      openExportModal,
+      exportData
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  resolveComponent("TableTools");
+  const _component_EleToolbar = resolveComponent("EleToolbar");
+  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.loadingProps)), {
+    default: withCtx(() => [
+      _ctx.tableToolbarProps ? (openBlock(), createBlock(_component_EleToolbar, normalizeProps(mergeProps$1({ key: 0 }, _ctx.tableToolbarProps === true ? {} : _ctx.tableToolbarProps)), createSlots({
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "toolbar")
+        ]),
+        _: 2
+      }, [
+        void 0
+      ]), 1040)) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "default"),
+      _ctx.virtual ? (openBlock(), createBlock(_component_EleVirtualTable, mergeProps$1({ key: 1 }, _ctx.tableProps, { ref: "tableViewRef" }), createSlots({ _: 2 }, [
+        renderList(Object.keys(_ctx.$slots).filter((k) => !_ctx.tableSlotExcludes.includes(k)), (name) => {
+          return {
+            name,
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1040)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        _ctx.isShowTable ? (openBlock(), createBlock(_component_EleDataTable, mergeProps$1({ key: 0 }, _ctx.tableProps, { ref: "tableViewRef" }), createSlots({ _: 2 }, [
+          renderList(Object.keys(_ctx.$slots).filter((k) => !_ctx.tableSlotExcludes.includes(k)), (name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1040)) : createCommentVNode("", true)
+      ], 64)),
+      _ctx.paginationProps || _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+        key: 3,
+        class: "ele-pro-table-footer",
+        style: normalizeStyle(_ctx.footerStyle)
+      }, [
+        renderSlot(_ctx.$slots, "footer"),
+        _ctx.paginationProps && _ctx.paginationProps.total ? (openBlock(), createBlock(_component_ElePagination, mergeProps$1({ key: 0 }, _ctx.paginationProps, {
+          "onUpdate:currentPage": _ctx.handlePageCurrentChange,
+          "onUpdate:pageSize": _ctx.handlePageSizeChange
+        }), createSlots({ _: 2 }, [
+          renderList(Object.keys(_ctx.$slots).filter((k) => !_ctx.pageSlotExcludes.includes(k)), (name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1040, ["onUpdate:currentPage", "onUpdate:pageSize"])) : createCommentVNode("", true)
+      ], 4)) : createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 16);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};