plus-pro-components
Version:
Page level components developed based on Element Plus.
518 lines (513 loc) • 21.6 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index$2 = require('../../pagination/index.js');
var index$1 = require('../../radio/index.js');
require('../../../constants/index.js');
var elementPlus = require('element-plus');
var index = require('../../utils/index.js');
var lodashEs = require('lodash-es');
var tableActionBar = require('./table-action-bar.vue.js');
var tableColumn = require('./table-column.vue.js');
var tableColumnIndex = require('./table-column-index.vue.js');
var tableColumnDragSort = require('./table-column-drag-sort.vue.js');
var tableTitleBar = require('./table-title-bar.vue.js');
var page = require('../../../constants/page.js');
var form = require('../../../constants/form.js');
var is = require('../../utils/is.js');
const _hoisted_1 = { class: "plus-table-expand-col" };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "PlusTable",
inheritAttrs: false
},
__name: "index",
props: {
tableData: { default: () => [] },
data: { default: () => [] },
columns: { default: () => [] },
defaultSize: { default: "default" },
pagination: { type: [Boolean, Object], default: false },
actionBar: { type: [Boolean, Object], default: false },
hasIndexColumn: { type: Boolean, default: false },
titleBar: { type: [Boolean, Object], default: true },
isSelection: { type: [Boolean, String], default: false },
isRadio: { type: Boolean, default: false },
hasExpand: { type: Boolean, default: false },
loadingStatus: { type: Boolean, default: false },
height: {},
headerCellStyle: { default: () => ({
"background-color": "var(--el-fill-color-light)"
}) },
rowKey: { type: [String, Function], default: "id" },
dragSortable: { type: [Boolean, Object], default: false },
dragSortableTableColumnProps: { default: () => ({}) },
indexTableColumnProps: { default: () => ({}) },
selectionTableColumnProps: { default: () => ({
width: 40
}) },
radioTableColumnProps: { default: () => ({
width: 50
}) },
radioProps: { default: void 0 },
defaultSelectedRadioRow: { default: void 0 },
expandTableColumnProps: { default: () => ({}) },
indexContentStyle: { type: [Object, Function], default: () => ({}) },
editable: { type: [Boolean, String], default: false },
adaptive: { type: [Boolean, Object], default: false },
filterTableHeaderOverflowLabelLength: {}
},
emits: ["paginationChange", "clickAction", "clickActionConfirmCancel", "dragSortEnd", "formChange", "refresh", "edited", "cell-click", "cell-dblclick", "filterTableHeader", "radioChange"],
setup(__props, { expose: __expose, emit: __emit }) {
var _a, _b;
const props = __props;
const emit = __emit;
const radioRow = vue.ref();
const subColumns = vue.ref([]);
const columnsIsChange = vue.ref(false);
const filterColumns = vue.ref([]);
const tableInstance = vue.shallowRef(null);
const tableWrapperInstance = vue.ref(null);
const paginationInstance = vue.ref(null);
const state = vue.reactive({
subPageInfo: {
...((_a = props.pagination) == null ? void 0 : _a.modelValue) || page.DefaultPageInfo
},
size: props.defaultSize
});
const cachedTableData = vue.ref([]);
vue.watchEffect(() => {
var _a2;
cachedTableData.value = ((_a2 = props.tableData) == null ? void 0 : _a2.length) ? props.tableData : props.data;
});
const __tableData = vue.computed(() => cachedTableData.value);
const tableDataLength = vue.computed(() => __tableData.value.length);
const hasAdaptive = vue.computed(() => typeof props.height === "undefined" && props.adaptive);
const slots = vue.useSlots();
const cellSlots = index.filterSlots(slots, index.getTableCellSlotName());
const headerSlots = index.filterSlots(slots, index.getTableHeaderSlotName());
const fieldSlots = index.filterSlots(slots, index.getFieldSlotName());
const extraSlots = index.filterSlots(slots, index.getExtraSlotName());
const formRefs = vue.shallowRef({});
vue.provide(form.TableFormRefInjectionKey, formRefs);
const formFieldRefs = vue.shallowRef({});
vue.provide(form.TableFormFieldRefInjectionKey, formFieldRefs);
vue.watch(
() => props.columns,
(val) => {
const filterOriginColumns = val.filter((item) => vue.unref(item.hideInTable) !== true);
filterColumns.value = filterOriginColumns.map((item) => {
var _a2;
return {
...item,
headerIsChecked: (_a2 = item.headerIsChecked) != null ? _a2 : true
};
});
subColumns.value = filterOriginColumns.filter((item) => vue.unref(item.headerIsChecked) !== false);
columnsIsChange.value = !columnsIsChange.value;
},
{
immediate: true
}
);
vue.watch(
() => props.defaultSelectedRadioRow,
(val) => {
radioRow.value = val ? vue.unref(props.defaultSelectedRadioRow) : {};
},
{
immediate: true
}
);
const handlePaginationChange = () => {
emit("paginationChange", { ...state.subPageInfo });
};
const handleAction = (callbackParams) => {
emit("clickAction", callbackParams);
};
const handleClickActionConfirmCancel = (callbackParams) => {
emit("clickActionConfirmCancel", callbackParams);
};
const handleFilterTableConfirm = (_columns, eventType) => {
filterColumns.value = _columns;
emit("filterTableHeader", _columns, eventType);
subColumns.value = _columns.filter(
(item) => vue.unref(item.hideInTable) !== true && item.headerIsChecked !== false
);
};
const handleClickDensity = (size2) => {
state.size = size2;
};
const handleDragSortEnd = (newIndex, oldIndex) => {
emit("dragSortEnd", newIndex, oldIndex);
};
const handleRefresh = () => {
emit("refresh");
};
const handleFormChange = (data) => {
emit("formChange", data);
};
const handleRadioChange = (value, row, index) => {
radioRow.value = value ? row : {};
emit("radioChange", row, index, !!value);
};
const currentForm = vue.ref();
const handleCellEdit = (row, column, type) => {
var _a2;
const rowIndex = __tableData.value.indexOf(row);
const columnIndex = column.getColumnIndex();
const columnConfig = subColumns.value[columnIndex];
if (!columnConfig) return;
if (props.editable === type) {
const currentCellForm = formRefs.value[rowIndex][columnIndex];
if (!currentCellForm) return;
document.addEventListener("click", handleStopEditClick);
if (currentForm.value) {
(_a2 = currentForm.value) == null ? void 0 : _a2.stopCellEdit();
}
currentForm.value = currentCellForm;
currentCellForm.startCellEdit();
const unwatch = vue.watch(
() => formFieldRefs.value.valueIsReady,
(val) => {
var _a3, _b2;
if ((val == null ? void 0 : val.value) && ((_b2 = (_a3 = formFieldRefs.value) == null ? void 0 : _a3.fieldInstance) == null ? void 0 : _b2.focus) && (props.editable === "click" || props.editable === "dblclick")) {
formFieldRefs.value.fieldInstance.focus();
unwatch();
}
}
);
}
};
const handleClickCell = (row, column, cell, event) => {
handleCellEdit(row, column, "click");
emit("cell-click", row, column, cell, event);
};
const handleDoubleClickCell = (row, column, cell, event) => {
handleCellEdit(row, column, "dblclick");
emit("cell-dblclick", row, column, cell, event);
};
const handleStopEditClick = (e) => {
var _a2, _b2;
if (tableWrapperInstance.value && currentForm.value) {
const target = e == null ? void 0 : e.target;
if (target.classList.contains("el-icon")) {
return;
}
const contains = (_a2 = tableWrapperInstance.value) == null ? void 0 : _a2.contains(target);
if (!contains && !is.isSVGElement(target)) {
(_b2 = currentForm.value) == null ? void 0 : _b2.stopCellEdit();
emit("edited");
document.removeEventListener("click", handleStopEditClick);
}
}
};
const setAdaptive = async () => {
var _a2;
await vue.nextTick();
if (!tableInstance.value) return;
const tableWrapper = tableInstance.value.$el;
let offsetBottom = 20;
let paginationHeight = 0;
if (is.isPlainObject(props.adaptive)) {
offsetBottom = (_a2 = props.adaptive.offsetBottom) != null ? _a2 : offsetBottom;
}
if (paginationInstance.value && props.pagination) {
paginationHeight = paginationInstance.value.$el.offsetHeight;
}
tableWrapper.style.height = `${window.innerHeight - tableWrapper.getBoundingClientRect().top - offsetBottom - paginationHeight}px`;
};
const debounceSetAdaptive = lodashEs.debounce(
setAdaptive,
is.isPlainObject(props.adaptive) ? (_b = props.adaptive.timeout) != null ? _b : 60 : 60
);
vue.onMounted(() => {
if (hasAdaptive.value) {
setAdaptive();
window.addEventListener("resize", debounceSetAdaptive);
}
});
vue.onBeforeUnmount(() => {
if (hasAdaptive.value) {
window.removeEventListener("resize", debounceSetAdaptive);
}
});
const { subPageInfo, size } = vue.toRefs(state);
__expose({
formRefs,
tableInstance
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "tableWrapperInstance",
ref: tableWrapperInstance,
class: "plus-table"
},
[
_ctx.titleBar ? (vue.openBlock(), vue.createBlock(tableTitleBar.default, {
key: 0,
columns: filterColumns.value,
"default-size": vue.unref(size),
"columns-is-change": columnsIsChange.value,
"title-bar": _ctx.titleBar,
onClickDensity: handleClickDensity,
onFilterTableHeader: handleFilterTableConfirm,
onRefresh: handleRefresh
}, vue.createSlots({
title: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "title")
]),
toolbar: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "toolbar")
]),
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["drag-sort-icon"] ? {
name: "drag-sort-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "drag-sort-icon")
]),
key: "0"
} : void 0,
_ctx.$slots["column-settings-icon"] ? {
name: "column-settings-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "column-settings-icon")
]),
key: "1"
} : void 0,
_ctx.$slots["density-icon"] ? {
name: "density-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "density-icon")
]),
key: "2"
} : void 0
]), 1032, ["columns", "default-size", "columns-is-change", "title-bar"])) : vue.createCommentVNode("v-if", true),
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTable), vue.mergeProps({
ref_key: "tableInstance",
ref: tableInstance,
"reserve-selection": true,
data: __tableData.value,
border: true,
height: _ctx.height,
"header-cell-style": _ctx.headerCellStyle,
size: vue.unref(size),
"row-key": _ctx.rowKey,
"highlight-current-row": "",
"scrollbar-always-on": ""
}, _ctx.$attrs, {
onCellClick: handleClickCell,
onCellDblclick: handleDoubleClickCell
}), {
default: vue.withCtx(() => {
var _a2;
return [
vue.createCommentVNode(" \u5355\u9009\u9009\u62E9\u680F "),
_ctx.isRadio ? (vue.openBlock(), vue.createBlock(
vue.unref(elementPlus.ElTableColumn),
vue.mergeProps({ key: "radio-selection" }, _ctx.radioTableColumnProps),
{
default: vue.withCtx((scoped) => [
vue.createVNode(vue.unref(index$1.PlusRadio), vue.mergeProps({
"model-value": vue.unref(lodashEs.isEqual)(radioRow.value, scoped.row),
options: [{ value: true }]
}, _ctx.radioProps, {
onChange: (value) => handleRadioChange(value, scoped.row, scoped.$index)
}), null, 16, ["model-value", "onChange"])
]),
_: 1
/* STABLE */
},
16
/* FULL_PROPS */
)) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u591A\u9009\u9009\u62E9\u680F "),
_ctx.isSelection ? (vue.openBlock(), vue.createBlock(
vue.unref(elementPlus.ElTableColumn),
vue.mergeProps({
key: "selection",
type: "selection"
}, _ctx.selectionTableColumnProps),
null,
16
/* FULL_PROPS */
)) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u5E8F\u53F7\u680F "),
_ctx.hasIndexColumn ? (vue.openBlock(), vue.createBlock(tableColumnIndex.default, {
key: 2,
"index-content-style": _ctx.indexContentStyle,
"index-table-column-props": _ctx.indexTableColumnProps,
"page-info": (_a2 = _ctx.pagination) == null ? void 0 : _a2.modelValue
}, null, 8, ["index-content-style", "index-table-column-props", "page-info"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u62D6\u62FD\u884C "),
_ctx.dragSortable ? (vue.openBlock(), vue.createBlock(tableColumnDragSort.default, {
key: 3,
sortable: _ctx.dragSortable,
"drag-sortable-table-column-props": _ctx.dragSortableTableColumnProps,
"table-instance": tableInstance.value,
onDragSortEnd: handleDragSortEnd
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["drag-sort-icon"] ? {
name: "drag-sort-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "drag-sort-icon")
]),
key: "0"
} : void 0
]), 1032, ["sortable", "drag-sortable-table-column-props", "table-instance"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u5C55\u5F00\u884C "),
_ctx.hasExpand ? (vue.openBlock(), vue.createBlock(
vue.unref(elementPlus.ElTableColumn),
vue.mergeProps({
key: 4,
type: "expand"
}, _ctx.expandTableColumnProps),
{
default: vue.withCtx((scoped) => [
vue.createElementVNode("div", _hoisted_1, [
vue.renderSlot(_ctx.$slots, "expand", vue.mergeProps({
index: scoped.$index
}, scoped))
])
]),
_: 3
/* FORWARDED */
},
16
/* FULL_PROPS */
)) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default", {}, () => [
vue.createCommentVNode("\u914D\u7F6E\u6E32\u67D3\u680F "),
vue.createVNode(tableColumn.default, {
columns: subColumns.value,
editable: _ctx.editable,
"table-data-length": tableDataLength.value,
onFormChange: handleFormChange
}, vue.createSlots({
_: 2
/* DYNAMIC */
}, [
vue.renderList(vue.unref(headerSlots), (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
vue.renderList(vue.unref(cellSlots), (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
vue.renderList(vue.unref(fieldSlots), (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
vue.renderList(vue.unref(extraSlots), (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
_ctx.$slots["tooltip-icon"] ? {
name: "tooltip-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "tooltip-icon")
]),
key: "0"
} : void 0,
_ctx.$slots["edit-icon"] ? {
name: "edit-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "edit-icon")
]),
key: "1"
} : void 0
]), 1032, ["columns", "editable", "table-data-length"])
]),
vue.createCommentVNode(" \u64CD\u4F5C\u680F "),
_ctx.actionBar ? (vue.openBlock(), vue.createBlock(
tableActionBar.default,
vue.mergeProps({ key: 5 }, _ctx.actionBar, {
onClickAction: handleAction,
onClickActionConfirmCancel: handleClickActionConfirmCancel
}),
vue.createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["action-bar-more-icon"] ? {
name: "action-bar-more-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "action-bar-more-icon")
]),
key: "0"
} : void 0
]),
1040
/* FULL_PROPS, DYNAMIC_SLOTS */
)) : vue.createCommentVNode("v-if", true)
];
}),
append: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "append")
]),
empty: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "empty")
]),
_: 3
/* FORWARDED */
}, 16, ["data", "height", "header-cell-style", "size", "row-key"])), [
[vue.unref(elementPlus.vLoading), _ctx.loadingStatus]
]),
vue.createCommentVNode(" \u5206\u9875 "),
_ctx.pagination ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.PlusPagination), vue.mergeProps({
key: 1,
ref_key: "paginationInstance",
ref: paginationInstance,
modelValue: vue.unref(subPageInfo),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(subPageInfo) ? subPageInfo.value = $event : null)
}, _ctx.pagination, { onChange: handlePaginationChange }), vue.createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["pagination-left"] ? {
name: "pagination-left",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "pagination-left")
]),
key: "0"
} : void 0,
_ctx.$slots["pagination-right"] ? {
name: "pagination-right",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "pagination-right")
]),
key: "1"
} : void 0
]), 1040, ["modelValue"])) : vue.createCommentVNode("v-if", true)
],
512
/* NEED_PATCH */
);
};
}
});
exports.default = _sfc_main;