yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
572 lines (571 loc) • 20.6 kB
JavaScript
;
const vue = require("vue");
const core = require("../utils/core");
const receiver = require("../ele-config-provider/receiver");
const EleLoading = require("../ele-loading/index");
const ElePagination = require("../ele-pagination/index");
const props$1 = require("../ele-data-table/props");
const util = require("../ele-data-table/util");
const EleDataTable = require("../ele-data-table/index");
const EleVirtualTable = require("../ele-virtual-table/index");
const EleToolbar = require("../ele-toolbar/index");
const TableTools = require("./components/table-tools");
const util$1 = require("./util");
const props = require("./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 = vue.defineComponent({
name: "EleProTable",
components: {
EleLoading,
ElePagination,
EleDataTable,
EleVirtualTable,
EleToolbar,
TableTools
},
props: props.proTableProps,
emits: props.proTableEmits,
setup(props2, { emit }) {
const isShowTable = vue.ref(true);
const events = util.useEmits(emit);
const methods = util.useMethods(() => getTableRef());
const globalProps = receiver.useGlobalProps("table");
const tableState = {
sorter: props2.defaultSort ?? {},
filter: util$1.getDefaultFilter(props2.columns),
queryParam: props2.queryParam ?? {}
};
const tableToolsRef = vue.ref(null);
const tableViewRef = vue.ref(null);
const tableData = vue.ref([]);
const tablePage = vue.ref(util$1.getTablePage(props2.pagination, globalProps.value.pagination));
const tableLimit = vue.ref(util$1.getTableLimit(props2.pagination, globalProps.value.pagination));
const tableTotal = vue.ref(0);
const tableLoading = vue.ref(props2.loading);
const tableCols = vue.ref([]);
const tableSize = vue.ref(util$1.getTableSize(props2.cacheKey, props2.size, globalProps.value.size));
const tableMaximized = vue.ref(false);
const errorText = vue.ref("");
const cacheData = vue.ref();
const tableRowKey = vue.shallowRef(util$1.getRowKey(props2.rowKey));
const tableIndex = vue.computed(() => {
return ((tablePage.value ?? 1) - 1) * (tableLimit.value ?? 0) + 1;
});
const paginationProps = vue.computed(() => {
return util$1.getPaginationProps(tableSize.value, props2.pagination, globalProps.value.pagination, {
total: tableTotal.value,
pageSize: tableLimit.value,
currentPage: tablePage.value,
hasNext: tableData.value.length >= tableLimit.value
});
});
const tableEmptyProps = vue.computed(() => {
return util$1.mergeProps(props2.emptyProps, globalProps.value.emptyProps);
});
const isFunctionSource = vue.computed(() => {
return typeof props2.datasource === "function";
});
const tableProps = vue.computed(() => {
const isMaximized = tableMaximized.value && props2.maximizedHeight;
return {
...core.pick(props2, props$1.dataTablePropKeys),
height: isMaximized ? props2.maximizedHeight : props2.height,
border: props2.border ?? globalProps.value.border ?? false,
stripe: props2.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: props2.virtual ? props2.rowHeight : void 0,
rowKey: tableRowKey.value,
style: props2.tableStyle,
class: "ele-pro-table-view",
...events,
onSelectionChange: handleSelectionChange,
onSortChange: handleSortChange,
onFilterChange: handleFilterChange,
onCurrentChange: handleCurrentChange,
onHeaderDragend: handleHeaderDragend
};
});
const toolNames = vue.computed(() => {
const tools = props2.tools ?? globalProps.value.tools ?? true;
if (tools === true) {
return ["reload", "size", "columns", "maximized"];
}
return tools || [];
});
const tableToolbarProps = vue.computed(() => {
return util$1.mergeProps(props2.toolbar, globalProps.value.toolbar);
});
const toolExportConfig = vue.computed(() => {
const globalExportConfig = globalProps.value.exportConfig || {};
const userExportConfig = props2.exportConfig || {};
return {
...globalExportConfig,
...userExportConfig,
modalProps: {
...globalExportConfig.modalProps || {},
...userExportConfig.modalProps || {}
}
};
});
const toolPrintConfig = vue.computed(() => {
const globalPrintConfig = globalProps.value.printConfig || {};
const userPrintConfig = props2.printConfig || {};
return {
...globalPrintConfig,
...userPrintConfig,
modalProps: {
...globalPrintConfig.modalProps || {},
...userPrintConfig.modalProps || {}
},
printerProps: {
...globalPrintConfig.printerProps || {},
...userPrintConfig.printerProps || {}
},
tableProps: {
...globalPrintConfig.tableProps || {},
...userPrintConfig.tableProps || {}
}
};
});
const loadingProps = vue.computed(() => {
const zIndex = props2.maximizedIndex ?? globalProps.value.maximizedIndex;
return {
...props2.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 } = util$1.reloadData(props2.datasource, sorter, paginationProps.value ? tablePage.value : void 0, tableLimit.value);
cacheData.value = props2.datasource;
tableData.value = records;
tablePage.value = currentPage;
tableTotal.value = totalCount;
handleDone({ records, currentPage, totalCount, response: props2.datasource });
return;
}
if (!parent) {
tableLoading.value = true;
}
const filter = tableState.filter;
const orderParamList = util$1.getRequestOrderParamList(sorter, props2.request, globalProps.value.request);
props2.datasource({
currentPage: tablePage.value,
pageSize: tableLimit.value,
pageParam: util$1.getRequestPageParam(tablePage.value, tableLimit.value, props2.request, globalProps.value.request),
queryParam: Object.assign({}, tableState.queryParam),
orderParamList,
filters: util$1.getRequestFilters(filter),
sorter,
filter,
parent
}).then((response) => {
const parseData = props2.parseData ?? globalProps.value.parseData;
const result = parseData ? parseData(response) : response;
const { records, totalCount } = util$1.getResponseResult(result, props2.response, globalProps.value.response, props2.lazy, props2.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 (props2.lazy) {
isShowTable.value = false;
vue.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, "需要的格式:", util$1.getResponseName(globalProps.value.response, props2.response));
return;
}
if (resolve) {
if (parent != null) {
parent[((_a = props2.treeProps) == null ? void 0 : _a.children) || "children"] = data;
}
resolve(data);
} else {
if (util$1.isAutoAmend(props2.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 (props2.load) {
props2.load(row, treeNode, resolve);
return;
}
reload(void 0, row, resolve);
};
const handleDone = (result, parent) => {
vue.nextTick(() => {
if (props2.current != null) {
methods.setCurrentRowKey(core.getValue(props2.current, tableRowKey.value));
}
if (props2.selections != null && props2.selections.length) {
methods.setSelectedRowKeys(util.getRowKeys(props2.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 (props2.loadOnChanged) {
tableState.sorter = sorter;
reload();
}
events.onSortChange(sorter);
};
const handleFilterChange = (filter) => {
if (props2.loadOnChanged) {
tableState.filter = filter;
reload();
}
events.onFilterChange(filter);
};
const handleHeaderDragend = (newWidth, oldWidth, column, event) => {
util$1.cacheColWidth(newWidth, column, props2.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 !== props2.current) {
emit("update:current", currentRow);
}
};
const updateSelections = (selection) => {
if (util.arrayIsChanged(selection, props2.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 = util$1.sortData(props2.datasource, tableState.sorter);
const index2 = data.findIndex((d) => core.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 = util$1.getRequestOrderParamList(sorter, props2.request, globalProps.value.request);
callback({
currentPage: tablePage.value,
pageSize: tableLimit.value,
pageParam: util$1.getRequestPageParam(tablePage.value, tableLimit.value, props2.request, globalProps.value.request),
queryParam: Object.assign({}, tableState.queryParam),
orderParamList,
filters: util$1.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);
}
};
vue.watch(
() => props2.columns,
(columns) => {
if (columns) {
tableCols.value = util$1.getInitCacheColumns(columns, props2.cacheKey, props2.columnSortable);
} else if (tableCols.value.length) {
tableCols.value = [];
}
},
{ immediate: true, deep: true }
);
vue.watch(
() => props2.datasource,
() => {
reload();
},
{ deep: true }
);
vue.watch(
() => props2.loading,
(loading) => {
tableLoading.value = loading;
}
);
vue.watch(
() => props2.size,
(size) => {
tableSize.value = util$1.getTableSize(void 0, size, globalProps.value.size);
}
);
vue.watch(
() => props2.current,
(current) => {
methods.setCurrentRowKey(core.getValue(current, tableRowKey.value));
}
);
vue.watch(
() => props2.selections,
(selections) => {
methods.setSelectedRowKeys(util.getRowKeys(selections, tableRowKey.value));
}
);
vue.watch(
() => props2.rowKey,
() => {
tableRowKey.value = util$1.getRowKey(props2.rowKey);
}
);
vue.watch(
globalProps,
(config) => {
tableSize.value = util$1.getTableSize(props2.cacheKey, props2.size, config.size);
},
{ deep: true }
);
vue.onMounted(() => {
if (props2.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, 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) {
vue.resolveComponent("TableTools");
const _component_EleToolbar = vue.resolveComponent("EleToolbar");
const _component_EleVirtualTable = vue.resolveComponent("EleVirtualTable");
const _component_EleDataTable = vue.resolveComponent("EleDataTable");
const _component_ElePagination = vue.resolveComponent("ElePagination");
const _component_EleLoading = vue.resolveComponent("EleLoading");
return vue.openBlock(), vue.createBlock(_component_EleLoading, vue.normalizeProps(vue.guardReactiveProps(_ctx.loadingProps)), {
default: vue.withCtx(() => [
_ctx.tableToolbarProps ? (vue.openBlock(), vue.createBlock(_component_EleToolbar, vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.tableToolbarProps === true ? {} : _ctx.tableToolbarProps)), vue.createSlots({
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "toolbar")
]),
_: 2
}, [
void 0
]), 1040)) : vue.createCommentVNode("", true),
vue.renderSlot(_ctx.$slots, "default"),
_ctx.virtual ? (vue.openBlock(), vue.createBlock(_component_EleVirtualTable, vue.mergeProps({ key: 1 }, _ctx.tableProps, { ref: "tableViewRef" }), vue.createSlots({ _: 2 }, [
vue.renderList(Object.keys(_ctx.$slots).filter((k) => !_ctx.tableSlotExcludes.includes(k)), (name) => {
return {
name,
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
])
};
})
]), 1040)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
_ctx.isShowTable ? (vue.openBlock(), vue.createBlock(_component_EleDataTable, vue.mergeProps({ key: 0 }, _ctx.tableProps, { ref: "tableViewRef" }), vue.createSlots({ _: 2 }, [
vue.renderList(Object.keys(_ctx.$slots).filter((k) => !_ctx.tableSlotExcludes.includes(k)), (name) => {
return {
name,
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
])
};
})
]), 1040)) : vue.createCommentVNode("", true)
], 64)),
_ctx.paginationProps || _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
key: 3,
class: "ele-pro-table-footer",
style: vue.normalizeStyle(_ctx.footerStyle)
}, [
vue.renderSlot(_ctx.$slots, "footer"),
_ctx.paginationProps && _ctx.paginationProps.total ? (vue.openBlock(), vue.createBlock(_component_ElePagination, vue.mergeProps({ key: 0 }, _ctx.paginationProps, {
"onUpdate:currentPage": _ctx.handlePageCurrentChange,
"onUpdate:pageSize": _ctx.handlePageSizeChange
}), vue.createSlots({ _: 2 }, [
vue.renderList(Object.keys(_ctx.$slots).filter((k) => !_ctx.pageSlotExcludes.includes(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)
]),
_: 3
}, 16);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;