tav-ui
Version:
483 lines (478 loc) • 18.4 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashEs = require('lodash-es');
var antDesignVue = require('ant-design-vue');
var mitt = require('../../../utils/mitt2.js');
var log = require('../../../utils/log2.js');
var is = require('../../../utils/is2.js');
var useGlobalConfig = require('../../../hooks/global/useGlobalConfig2.js');
var onUnmountedOrOnDeactivated = require('../../../hooks/core/onUnmountedOrOnDeactivated2.js');
var useForm = require('../../form/src/hooks/useForm2.js');
var index = require('../../form/index2.js');
var CustomAction = require('./components/CustomAction2.js');
var ExpandIcon = require('./components/ExpandIcon2.js');
var Filter = require('./components/Filter2.js');
var HeaderCell = require('./components/HeaderCell2.js');
var useColumns = require('./hooks/useColumns2.js');
var useCustomRow = require('./hooks/useCustomRow2.js');
var useDataSource = require('./hooks/useDataSource2.js');
var useLoading = require('./hooks/useLoading2.js');
var useMasking = require('./hooks/useMasking2.js');
var usePagination = require('./hooks/usePagination2.js');
var useRowSelection = require('./hooks/useRowSelection2.js');
var useTableContext = require('./hooks/useTableContext2.js');
var useTableExpand = require('./hooks/useTableExpand2.js');
var useTableFooter = require('./hooks/useTableFooter2.js');
var useTableForm = require('./hooks/useTableForm2.js');
var useTableHeader = require('./hooks/useTableHeader2.js');
var useTableScroll = require('./hooks/useTableScroll2.js');
var useTableScrollTo = require('./hooks/useTableScrollTo2.js');
var useTableStyle = require('./hooks/useTableStyle2.js');
var props = require('./props2.js');
var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
const PageWrapperFixedHeightKey = "PageWrapperFixedHeight";
const _sfc_main = vue.defineComponent({
name: "TaTable",
components: {
Table: antDesignVue.Table,
BasicForm: index["default"],
HeaderCell: HeaderCell["default"],
Filter: Filter["default"],
CustomAction: CustomAction["default"]
},
props: props.tableProps,
emits: [
"fetch-success",
"fetch-error",
"selection-change",
"register",
"row-click",
"row-dbClick",
"row-contextmenu",
"row-mouseenter",
"row-mouseleave",
"edit-end",
"edit-cancel",
"edit-row-end",
"edit-change",
"expanded-rows-change",
"change",
"columns-change"
],
setup(props, { attrs, emit, slots, expose }) {
const tableEmitter = mitt.mitt();
vue.provide("tableEmitter", tableEmitter);
const tableElRef = vue.ref(null);
const tableData = vue.ref([]);
const wrapRef = vue.ref(null);
const formRef = vue.ref(null);
const actionRef = vue.ref(null);
const innerPropsRef = vue.ref();
const cacheActionWidths = vue.ref({});
const columnsForAction = vue.ref([]);
const maxWidthForAction = vue.ref(0);
const prefixCls = "ta-basic-table";
const [registerForm, formActions] = useForm.useForm();
const getProps = vue.computed(() => {
return { ...props, ...vue.unref(innerPropsRef) };
});
const filterElRef = vue.ref(null);
const useFilter = vue.computed(() => {
const { filter } = vue.unref(getProps);
const result = {
isVisible: false,
isInputFormVisible: false,
isPannelFormVisible: false
};
if (!filter) {
result.isVisible = false;
} else {
const { inputForm, pannelForm } = filter;
if (inputForm && Object.keys(inputForm).length > 0) {
result.isInputFormVisible = true;
} else {
result.isInputFormVisible = false;
}
if (pannelForm && pannelForm.length > 0) {
result.isPannelFormVisible = true;
} else {
result.isPannelFormVisible = false;
}
if (result.isInputFormVisible || result.isPannelFormVisible) {
result.isVisible = true;
} else {
result.isVisible = false;
}
}
return result;
});
const getFilterProps = vue.computed(() => {
return getProps.value.filter;
});
const useInnerCustomAction = vue.computed(() => {
const { useAdd, useDelete, useImport, useExport, useRefresh, permission } = vue.unref(getProps);
let isAddVisible = false;
let isDeleteVisible = false;
let isImportVisible = false;
let isExportVisible = false;
let isRefreshVisible = false;
const Permissions = useGlobalConfig.useGlobalConfig("permissions");
isAddVisible = is.isNullOrUnDef(permission?.add) ? useAdd?.ifShow : vue.unref(Permissions)[permission.add]?.ifShow && useAdd?.ifShow;
isDeleteVisible = is.isNullOrUnDef(permission?.delete) ? useDelete?.ifShow : vue.unref(Permissions)[permission.delete]?.ifShow && useDelete?.ifShow;
isImportVisible = is.isNullOrUnDef(permission?.import) ? useImport?.ifShow : vue.unref(Permissions)[permission.import]?.ifShow && useImport?.ifShow;
isExportVisible = is.isNullOrUnDef(permission?.export) ? useExport?.ifShow : vue.unref(Permissions)[permission.export]?.ifShow && useExport?.ifShow;
isRefreshVisible = is.isNullOrUnDef(permission?.refresh) ? useRefresh?.ifShow : vue.unref(Permissions)[permission.refresh]?.ifShow && useRefresh?.ifShow;
const result = {
isVisible: isAddVisible || isDeleteVisible || isImportVisible || isExportVisible || isRefreshVisible || !!slots.customAction,
isAddVisible,
addHandle: useAdd?.handleAction,
isDeleteVisible,
deleteHandle: useDelete?.handleAction,
isImportVisible,
importHandle: useImport?.handleAction,
isExportVisible,
exportHandle: useExport?.handleAction,
isRefreshVisible
};
return result;
});
const isFixedHeightPage = vue.inject(PageWrapperFixedHeightKey, false);
vue.watchEffect(() => {
vue.unref(isFixedHeightPage) && props.canResize && log.warn("'canResize' of BasicTable may not work in PageWrapper with 'fixedHeight' (especially in hot updates)");
});
const { getLoading, setLoading } = useLoading.useLoading(getProps);
const { getMasking, setMasking } = useMasking.useMasking(getProps);
const {
getPaginationInfo,
getPagination,
setPagination,
setShowPagination,
getShowPagination
} = usePagination.usePagination(getProps);
const {
getRowSelection,
getRowSelectionRef,
getSelectRows,
clearSelectedRowKeys,
getSelectRowKeys,
deleteSelectRowByKey,
setSelectedRowKeys
} = useRowSelection.useRowSelection(getProps, tableData, emit);
const {
handleTableChange: onTableChange,
getDataSourceRef,
getDataSource,
getRawDataSource,
setTableData,
updateTableDataRecord,
deleteTableDataRecord,
insertTableDataRecord,
findTableDataRecord,
fetch,
getRowKey,
reload,
getAutoCreateKey,
updateTableData
} = useDataSource.useDataSource(tableElRef, getProps, {
tableData,
getPaginationInfo,
setLoading,
setPagination,
getFieldsValue: formActions.getFieldsValue,
clearSelectedRowKeys
}, emit, filterElRef);
function handleTableChange(...args) {
onTableChange.call(void 0, ...args);
emit("change", ...args);
const { onChange } = vue.unref(getProps);
onChange && is.isFunction(onChange) && onChange.call(void 0, ...args);
}
const {
getViewColumns,
getColumns,
setCacheColumnsByField,
setColumns,
getColumnsRef,
getCacheColumns
} = useColumns.useColumns(getProps, getPaginationInfo);
const { getScrollRef, redoHeight, fnInit, keepScrollIns } = useTableScroll.useTableScroll(getProps, tableElRef, getColumnsRef, getRowSelectionRef, getDataSourceRef, slots, wrapRef, formRef, actionRef);
const { scrollTo } = useTableScrollTo.useTableScrollTo(tableElRef, getDataSourceRef);
const { customRow } = useCustomRow.useCustomRow(getProps, {
setSelectedRowKeys,
getSelectRowKeys,
clearSelectedRowKeys,
getAutoCreateKey,
emit
});
const { getRowClassName } = useTableStyle.useTableStyle(getProps, prefixCls);
const { getExpandOption, expandAll, expandRows, collapseAll } = useTableExpand.useTableExpand(getProps, tableData, emit);
const handlers = {
onColumnsChange: (data) => {
emit("columns-change", data);
vue.unref(getProps).onColumnsChange?.(data);
}
};
const { getHeaderProps } = useTableHeader.useTableHeader(getProps, slots, handlers);
const { getFooterProps } = useTableFooter.useTableFooter(getProps, getScrollRef, tableElRef, getDataSourceRef);
const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } = useTableForm.useTableForm(getProps, slots, fetch, getLoading);
const _getColumns = vue.computed(() => {
let columns = vue.unref(getViewColumns);
if (vue.unref(columnsForAction) && vue.unref(columnsForAction).length > 0) {
columns = vue.unref(columnsForAction);
}
return columns;
});
const getBindValues = vue.computed(() => {
const dataSource = vue.unref(getDataSourceRef);
let propsData = {
...attrs,
customRow,
expandIcon: slots.expandIcon ? null : ExpandIcon["default"](),
...vue.unref(getProps),
...vue.unref(getHeaderProps),
scroll: vue.unref(getScrollRef),
loading: vue.unref(getLoading),
masking: vue.unref(getMasking),
tableLayout: "fixed",
rowSelection: vue.unref(getRowSelectionRef),
rowKey: vue.unref(getRowKey),
columns: vue.unref(_getColumns),
pagination: vue.toRaw(vue.unref(getPaginationInfo)),
dataSource,
footer: vue.unref(getFooterProps),
...vue.unref(getExpandOption)
};
if (slots.expandedRowRender) {
propsData = lodashEs.omit(propsData, "scroll");
}
propsData = lodashEs.omit(propsData, ["class", "onChange"]);
return propsData;
});
const getWrapperClass = vue.computed(() => {
const values = vue.unref(getBindValues);
return [
prefixCls,
attrs.class,
{
[`${prefixCls}-form-container`]: values.useSearchForm,
[`${prefixCls}--inset`]: values.inset,
[`${prefixCls}--full-height`]: values.fullHeight
}
];
});
const getEmptyDataIsShowTable = vue.computed(() => {
const { emptyDataIsShowTable, useSearchForm } = vue.unref(getProps);
if (emptyDataIsShowTable || !useSearchForm) {
return true;
}
return !!vue.unref(getDataSourceRef).length;
});
function setProps(props2) {
innerPropsRef.value = { ...vue.unref(innerPropsRef), ...props2 };
}
const getFilterForm = () => {
return filterElRef.value.pannelFormRef;
};
const setCacheActionWidths = ({ key = "", value = 0 }) => {
if (key) {
cacheActionWidths.value[key] = value;
}
};
vue.watch(() => [vue.unref(getViewColumns), cacheActionWidths], ([newCol], [preCol]) => {
const _tableData = vue.unref(tableData);
const maxWidth = Math.max(...Object.values(vue.unref(cacheActionWidths)));
if (!lodashEs.isEqual(newCol, preCol) || _tableData && maxWidth > vue.unref(maxWidthForAction)) {
const columns = vue.unref(getViewColumns).map((column) => {
if (typeof column.dataIndex === "string" && ["action", "actions"].includes(column.dataIndex)) {
column.width = Math.ceil(maxWidth);
column.minWidth = Math.ceil(maxWidth);
return column;
}
return column;
});
columnsForAction.value = columns;
maxWidthForAction.value = maxWidth;
}
}, {
deep: true
});
vue.onMounted(() => {
fnInit();
});
vue.onActivated(() => {
if (keepScrollIns.value) {
keepScrollIns.value.scrollFn();
}
});
onUnmountedOrOnDeactivated.onUnmountedOrOnDeactivated(() => {
cacheActionWidths.value = {};
columnsForAction.value = [];
maxWidthForAction.value = 0;
});
const tableAction = {
reload,
getSelectRows,
clearSelectedRowKeys,
getSelectRowKeys,
deleteSelectRowByKey,
setPagination,
setTableData,
updateTableDataRecord,
deleteTableDataRecord,
insertTableDataRecord,
findTableDataRecord,
redoHeight,
setSelectedRowKeys,
setColumns,
setLoading,
setMasking,
getDataSource,
getRawDataSource,
setProps,
getRowSelection,
getPaginationRef: getPagination,
getColumns,
getCacheColumns,
emit,
updateTableData,
setShowPagination,
getShowPagination,
setCacheColumnsByField,
expandAll,
expandRows,
scrollTo,
collapseAll,
getFilterForm,
getSize: () => {
return vue.unref(getBindValues).size;
}
};
useTableContext.createTableContext({ ...tableAction, wrapRef, getBindValues, setCacheActionWidths });
vue.watchEffect(() => {
if (tableElRef.value) {
tableEmitter.emit("table:fetch-refs", {
table: tableElRef.value.$el
});
}
});
expose(tableAction);
emit("register", tableAction, formActions);
return {
tableData,
filterElRef,
useFilter,
getFilterProps,
useInnerCustomAction,
tableElRef,
getBindValues,
getLoading,
registerForm,
handleSearchInfoChange,
getEmptyDataIsShowTable,
handleTableChange,
getRowClassName,
wrapRef,
tableAction,
redoHeight,
getFormProps,
replaceFormSlotKey,
getFormSlotKeys,
getWrapperClass,
columns: getViewColumns,
formRef,
actionRef
};
}
});
const _hoisted_1 = {
ref: "actionRef",
class: "ta-basic-table-operations flex flex-wrap align-center justify-between"
};
const _hoisted_2 = {
key: 1,
class: "ta-basic-table-custom-title"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_BasicForm = vue.resolveComponent("BasicForm");
const _component_Filter = vue.resolveComponent("Filter");
const _component_CustomAction = vue.resolveComponent("CustomAction");
const _component_HeaderCell = vue.resolveComponent("HeaderCell");
const _component_Table = vue.resolveComponent("Table", true);
return vue.openBlock(), vue.createElementBlock("div", {
ref: "wrapRef",
class: vue.normalizeClass(_ctx.getWrapperClass)
}, [
_ctx.getBindValues.useSearchForm ? (vue.openBlock(), vue.createBlock(_component_BasicForm, vue.mergeProps({ key: 0 }, _ctx.getFormProps, {
ref: "formRef",
"submit-on-reset": "",
"table-action": _ctx.tableAction,
onRegister: _ctx.registerForm,
onSubmit: _ctx.handleSearchInfoChange,
onAdvancedChange: _ctx.redoHeight
}), vue.createSlots({ _: 2 }, [
vue.renderList(_ctx.getFormSlotKeys, (item) => {
return {
name: _ctx.replaceFormSlotKey(item),
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, item, vue.normalizeProps(vue.guardReactiveProps(data || {})))
])
};
})
]), 1040, ["table-action", "onRegister", "onSubmit", "onAdvancedChange"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" ::==================== i7eo\uFF1A\u6DFB\u52A0 ///// start ///// ====================:: "),
vue.withDirectives(vue.createElementVNode("div", _hoisted_1, [
_ctx.useFilter.isVisible ? (vue.openBlock(), vue.createBlock(_component_Filter, {
key: 0,
ref: "filterElRef",
forms: _ctx.getFilterProps,
"table-action": _ctx.tableAction,
"filter-exclusion": _ctx.filterExclusion
}, null, 8, ["forms", "table-action", "filter-exclusion"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "customTitle", vue.normalizeProps(vue.guardReactiveProps(_ctx.$slots["customTitle"] || {})))
])),
_ctx.useInnerCustomAction.isVisible ? (vue.openBlock(), vue.createBlock(_component_CustomAction, {
key: 2,
visible: _ctx.useInnerCustomAction,
handlers: _ctx.useInnerCustomAction,
"table-action": _ctx.tableAction
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "customAction", vue.normalizeProps(vue.guardReactiveProps(_ctx.$slots["customAction"] || {})))
]),
_: 3
}, 8, ["visible", "handlers", "table-action"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(' <div v-if="!tableData.length" class="ta-basic-table-operations-mask"></div> ')
], 512), [
[vue.vShow, _ctx.showTableAction]
]),
vue.createCommentVNode(" ::==================== i7eo\uFF1A\u6DFB\u52A0 ///// end ///// ====================:: "),
vue.withDirectives(vue.createVNode(_component_Table, vue.mergeProps({ ref: "tableElRef" }, _ctx.getBindValues, {
"row-class-name": _ctx.getRowClassName,
onChange: _ctx.handleTableChange
}), vue.createSlots({
bodyCell: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "bodyCell", vue.normalizeProps(vue.guardReactiveProps(data || {})))
]),
footer: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "footer", vue.normalizeProps(vue.guardReactiveProps(data || {})))
]),
_: 2
}, [
vue.renderList(_ctx.columns, (column) => {
return {
name: `header-${column.dataIndex}`,
fn: vue.withCtx(() => [
vue.createVNode(_component_HeaderCell, { column }, null, 8, ["column"])
])
};
})
]), 1040, ["row-class-name", "onChange"]), [
[vue.vShow, _ctx.getEmptyDataIsShowTable]
]),
vue.createCommentVNode(' <div v-show="getBindValues.masking" class="ta-basic-table-mask"></div> ')
], 2);
}
var Table = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/table/src/table.vue"]]);
exports["default"] = Table;
//# sourceMappingURL=table2.js.map