plus-pro-components
Version:
Page level components developed based on Element Plus.
335 lines (332 loc) • 12.4 kB
JavaScript
import { defineComponent, useSlots, computed, ref, h, openBlock, createElementBlock, createBlock, resolveDynamicComponent, withCtx, createVNode, unref, mergeProps, createSlots, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, renderList } from 'vue';
import { PlusSearch } from '../../search/index.mjs';
import { PlusTable } from '../../table/index.mjs';
import { ElCard, ElDivider } from 'element-plus';
import '../../../hooks/index.mjs';
import { filterSlots, getTableCellSlotName, getTableHeaderSlotName, getFieldSlotName } from '../../utils/index.mjs';
import '../../../constants/index.mjs';
import { DefaultPageInfo, DefaultPageSizeList } from '../../../constants/page.mjs';
import { useTable } from '../../../hooks/useTable.mjs';
import { isPlainObject } from '../../utils/is.mjs';
const _hoisted_1 = { class: "plus-page" };
var _sfc_main = /* @__PURE__ */ 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: () => ({ ...DefaultPageInfo }) },
defaultPageSizeList: { default: () => 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 = useSlots();
const computedDefaultPageInfo = computed(() => props.defaultPageInfo);
const computedDefaultPageSizeList = computed(() => props.defaultPageSizeList);
const { tableData, pageInfo, total, loadingStatus } = useTable(computedDefaultPageInfo);
const plusSearchInstance = ref(null);
const plusTableInstance = ref(null);
const values = ref({ ...(_a = props.search) == null ? void 0 : _a.defaultValues });
const cellSlots = filterSlots(slots, getTableCellSlotName());
const headerSlots = filterSlots(slots, getTableHeaderSlotName());
const fieldSlots = filterSlots(slots, getFieldSlotName());
const renderWrapper = () => {
if (props.isCard) {
return {
search: h(ElCard, props.searchCardProps),
table: h(ElCard, props.tableCardProps)
};
}
return { search: h("div"), table: 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 (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 openBlock(), createElementBlock("div", _hoisted_1, [
_ctx.search ? (openBlock(), createBlock(resolveDynamicComponent(renderWrapper().search), { key: 0 }, {
default: withCtx(() => [
createVNode(unref(PlusSearch), 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": unref(loadingStatus),
onSearch: handleSearch,
onReset: handleReset
}), createSlots({
_: 2
/* DYNAMIC */
}, [
_ctx.$slots["search-footer"] ? {
name: "footer",
fn: withCtx((data) => [
renderSlot(_ctx.$slots, "search-footer", normalizeProps(guardReactiveProps(data)))
]),
key: "0"
} : void 0
]), 1040, ["modelValue", "columns", "search-loading"])
]),
_: 3
/* FORWARDED */
})) : createCommentVNode("v-if", true),
_ctx.dividerProps ? (openBlock(), createBlock(
unref(ElDivider),
normalizeProps(mergeProps({ key: 1 }, _ctx.dividerProps)),
null,
16
/* FULL_PROPS */
)) : createCommentVNode("v-if", true),
renderSlot(_ctx.$slots, "extra"),
(openBlock(), createBlock(resolveDynamicComponent(renderWrapper().table), { class: "plus-page__table_wrapper" }, {
default: withCtx(() => [
createVNode(unref(PlusTable), mergeProps({
ref_key: "plusTableInstance",
ref: plusTableInstance,
"title-bar": { refresh: true }
}, _ctx.table, {
"table-data": unref(tableData),
"loading-status": unref(loadingStatus),
columns: _ctx.columns,
pagination: _ctx.pagination === false ? void 0 : {
..._ctx.pagination,
total: unref(total),
modelValue: unref(pageInfo),
pageSizeList: computedDefaultPageSizeList.value
},
onPaginationChange: handlePaginationChange,
onRefresh: handleRefresh
}), createSlots({
_: 2
/* DYNAMIC */
}, [
renderList(unref(headerSlots), (_, key) => {
return {
name: key,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
])
};
}),
renderList(unref(cellSlots), (_, key) => {
return {
name: key,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
])
};
}),
renderList(unref(fieldSlots), (_, key) => {
return {
name: key,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
])
};
}),
_ctx.$slots["table-title"] ? {
name: "title",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "table-title")
]),
key: "0"
} : void 0,
_ctx.$slots["table-toolbar"] ? {
name: "toolbar",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "table-toolbar")
]),
key: "1"
} : void 0,
_ctx.$slots["table-expand"] ? {
name: "expand",
fn: withCtx((data) => [
renderSlot(_ctx.$slots, "table-expand", normalizeProps(guardReactiveProps(data)))
]),
key: "2"
} : void 0,
_ctx.$slots["table-append"] ? {
name: "append",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "table-append")
]),
key: "3"
} : void 0,
_ctx.$slots["table-empty"] ? {
name: "empty",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "table-empty")
]),
key: "4"
} : void 0,
_ctx.$slots["pagination-left"] ? {
name: "pagination-left",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "pagination-left")
]),
key: "5"
} : void 0,
_ctx.$slots["pagination-right"] ? {
name: "pagination-right",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "pagination-right")
]),
key: "6"
} : void 0,
_ctx.$slots["drag-sort-icon"] ? {
name: "drag-sort-icon",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "drag-sort-icon")
]),
key: "7"
} : void 0,
_ctx.$slots["column-settings-icon"] ? {
name: "column-settings-icon",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "column-settings-icon")
]),
key: "8"
} : void 0,
_ctx.$slots["density-icon"] ? {
name: "density-icon",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "density-icon")
]),
key: "9"
} : void 0,
_ctx.$slots["tooltip-icon"] ? {
name: "tooltip-icon",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "tooltip-icon")
]),
key: "10"
} : void 0,
_ctx.$slots["action-bar-more-icon"] ? {
name: "action-bar-more-icon",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "action-bar-more-icon")
]),
key: "11"
} : void 0,
_ctx.$slots["edit-icon"] ? {
name: "edit-icon",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "edit-icon")
]),
key: "12"
} : void 0
]), 1040, ["table-data", "loading-status", "columns", "pagination"])
]),
_: 3
/* FORWARDED */
}))
]);
};
}
});
export { _sfc_main as default };