yuang-framework-ui-pc/es/ele-pro-table/index.js

yuang-framework-ui-pc Library

import { defineComponent, ref, shallowRef, computed, watch, onMounted, nextTick, resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, mergeProps as mergeProps$1, createSlots, renderSlot, createCommentVNode, renderList, createElementBlock, 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, sortData, getRequestOrderParamList, getRequestPageParam, getRequestFilters, reloadData, getResponseResult, getResponseName, isAutoAmend } from "./util";
import { proTableProps, proTableEmits } 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
};