plus-pro-components
Version:
Page level components developed based on Element Plus.
339 lines (334 loc) • 12.6 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index$1 = require('../../search/index.js');
var index$2 = require('../../table/index.js');
var elementPlus = require('element-plus');
require('../../../hooks/index.js');
var index = require('../../utils/index.js');
require('../../../constants/index.js');
var page = require('../../../constants/page.js');
var useTable = require('../../../hooks/useTable.js');
var is = require('../../utils/is.js');
const _hoisted_1 = { class: "plus-page" };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "PlusPage"
},
__name: "index",
props: {
columns: { default: () => [] },
request: {},
search: { type: [Boolean, Object], default: () => ({}) },
table: { default: () => ({}) },
params: { default: () => ({}) },
postData: { type: Function, default: void 0 },
beforeSearchSubmit: { type: Function, default: void 0 },
isCard: { type: Boolean, default: true },
searchCardProps: { default: () => ({}) },
tableCardProps: { default: () => ({}) },
defaultPageInfo: { default: () => ({ ...page.DefaultPageInfo }) },
defaultPageSizeList: { default: () => page.DefaultPageSizeList },
pagination: { type: [Boolean, Object], default: () => ({}) },
immediate: { type: Boolean, default: true },
dividerProps: { type: [Boolean, Object], default: false },
pageInfoMap: { default: () => ({
page: "page",
pageSize: "pageSize"
}) }
},
emits: ["search", "reset", "paginationChange", "requestError", "requestComplete"],
setup(__props, { expose: __expose, emit: __emit }) {
var _a;
const props = __props;
const emit = __emit;
const slots = vue.useSlots();
const computedDefaultPageInfo = vue.computed(() => props.defaultPageInfo);
const computedDefaultPageSizeList = vue.computed(() => props.defaultPageSizeList);
const { tableData, pageInfo, total, loadingStatus } = useTable.useTable(computedDefaultPageInfo);
const plusSearchInstance = vue.ref(null);
const plusTableInstance = vue.ref(null);
const values = vue.ref({ ...(_a = props.search) == null ? void 0 : _a.defaultValues });
const cellSlots = index.filterSlots(slots, index.getTableCellSlotName());
const headerSlots = index.filterSlots(slots, index.getTableHeaderSlotName());
const fieldSlots = index.filterSlots(slots, index.getFieldSlotName());
const renderWrapper = () => {
if (props.isCard) {
return {
search: vue.h(elementPlus.ElCard, props.searchCardProps),
table: vue.h(elementPlus.ElCard, props.tableCardProps)
};
}
return { search: vue.h("div"), table: vue.h("div") };
};
const getList = async () => {
var _a2, _b;
if (!props.request) return;
try {
loadingStatus.value = true;
const payload = {
...values.value,
// eslint-disabled no-useless-spread
...{
[((_a2 = props.pageInfoMap) == null ? void 0 : _a2.page) || "page"]: pageInfo.value.page,
[((_b = props.pageInfoMap) == null ? void 0 : _b.pageSize) || "pageSize"]: pageInfo.value.pageSize
},
...props.params
};
const { data, total: dataTotal } = await props.request(payload);
const list = props.postData && props.postData(data) || data;
tableData.value = list || [];
total.value = dataTotal || list.length;
emit("requestComplete", tableData.value);
} catch (error) {
emit("requestError", error);
}
loadingStatus.value = false;
};
if (props.immediate) {
getList();
}
const handlePaginationChange = (_pageInfo) => {
pageInfo.value = _pageInfo;
getList();
emit("paginationChange", _pageInfo);
};
const handleSearch = (val) => {
const data = props.beforeSearchSubmit && props.beforeSearchSubmit(val) || val;
values.value = data;
pageInfo.value.page = 1;
getList();
emit("search", values.value);
};
const handleReset = (val) => {
values.value = { ...val };
pageInfo.value.page = 1;
getList();
emit("reset", values.value);
};
const handleRefresh = () => {
getList();
};
const setSearchFieldsValue = (val) => {
if (is.isPlainObject(val)) {
Object.keys(val).forEach((key) => {
Reflect.set(values.value, key, val[key]);
});
}
};
const getSearchFieldsValue = (key) => {
if (key !== void 0 && key !== null) {
return Reflect.get(values.value, key);
} else {
return { ...values.value };
}
};
const clearSearchFieldsValue = () => {
values.value = {};
};
const setTableData = (data, _total) => {
tableData.value = data || [];
total.value = _total || (data == null ? void 0 : data.length) || 0;
};
__expose({
plusSearchInstance,
plusTableInstance,
getList,
handleReset,
/**
* TODO: 将会在v0.2.0中移除
*/
handleRest: handleReset,
setSearchFieldsValue,
getSearchFieldsValue,
clearSearchFieldsValue,
/**
* @version 0.1.23
*/
setTableData
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
_ctx.search ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderWrapper().search), { key: 0 }, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(index$1.PlusSearch), vue.mergeProps({
ref_key: "plusSearchInstance",
ref: plusSearchInstance
}, _ctx.search, {
modelValue: values.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => values.value = $event),
columns: _ctx.columns,
"search-loading": vue.unref(loadingStatus),
onSearch: handleSearch,
onReset: handleReset
}), vue.createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["search-footer"] ? {
name: "footer",
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "search-footer", vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "0"
} : void 0
]), 1040, ["modelValue", "columns", "search-loading"])
]),
_: 3
/* FORWARDED */
})) : vue.createCommentVNode("v-if", true),
_ctx.dividerProps ? (vue.openBlock(), vue.createBlock(
vue.unref(elementPlus.ElDivider),
vue.normalizeProps(vue.mergeProps({ key: 1 }, _ctx.dividerProps)),
null,
16
/* FULL_PROPS */
)) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "extra"),
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderWrapper().table), { class: "plus-page__table_wrapper" }, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(index$2.PlusTable), vue.mergeProps({
ref_key: "plusTableInstance",
ref: plusTableInstance,
"title-bar": { refresh: true }
}, _ctx.table, {
"table-data": vue.unref(tableData),
"loading-status": vue.unref(loadingStatus),
columns: _ctx.columns,
pagination: _ctx.pagination === false ? void 0 : {
..._ctx.pagination,
total: vue.unref(total),
modelValue: vue.unref(pageInfo),
pageSizeList: computedDefaultPageSizeList.value
},
onPaginationChange: handlePaginationChange,
onRefresh: handleRefresh
}), 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)))
])
};
}),
_ctx.$slots["table-title"] ? {
name: "title",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "table-title")
]),
key: "0"
} : void 0,
_ctx.$slots["table-toolbar"] ? {
name: "toolbar",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "table-toolbar")
]),
key: "1"
} : void 0,
_ctx.$slots["table-expand"] ? {
name: "expand",
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, "table-expand", vue.normalizeProps(vue.guardReactiveProps(data)))
]),
key: "2"
} : void 0,
_ctx.$slots["table-append"] ? {
name: "append",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "table-append")
]),
key: "3"
} : void 0,
_ctx.$slots["table-empty"] ? {
name: "empty",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "table-empty")
]),
key: "4"
} : void 0,
_ctx.$slots["pagination-left"] ? {
name: "pagination-left",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "pagination-left")
]),
key: "5"
} : void 0,
_ctx.$slots["pagination-right"] ? {
name: "pagination-right",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "pagination-right")
]),
key: "6"
} : void 0,
_ctx.$slots["drag-sort-icon"] ? {
name: "drag-sort-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "drag-sort-icon")
]),
key: "7"
} : void 0,
_ctx.$slots["column-settings-icon"] ? {
name: "column-settings-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "column-settings-icon")
]),
key: "8"
} : void 0,
_ctx.$slots["density-icon"] ? {
name: "density-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "density-icon")
]),
key: "9"
} : void 0,
_ctx.$slots["tooltip-icon"] ? {
name: "tooltip-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "tooltip-icon")
]),
key: "10"
} : void 0,
_ctx.$slots["action-bar-more-icon"] ? {
name: "action-bar-more-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "action-bar-more-icon")
]),
key: "11"
} : void 0,
_ctx.$slots["edit-icon"] ? {
name: "edit-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "edit-icon")
]),
key: "12"
} : void 0
]), 1040, ["table-data", "loading-status", "columns", "pagination"])
]),
_: 3
/* FORWARDED */
}))
]);
};
}
});
exports.default = _sfc_main;