hongluan-business-ui
Version:
Hongluan Business Component Library for Vue 3
466 lines (461 loc) • 19.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var hongluanUi = require('hongluan-ui');
var index = require('../../table-toolbar/index.js');
var index$1 = require('../../table-searchbar/index.js');
var util = require('../../../utils/util.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
const _sfc_main = vue.defineComponent({
name: "TableList",
components: {
HbTableToolbar: index.HbTableToolbar,
HbTableSearchbar: index$1.HbTableSearchbar,
HlTable: hongluanUi.HlTable,
HlTableColumn: hongluanUi.HlTableColumn,
HlPopover: hongluanUi.HlPopover,
HlGroup: hongluanUi.HlGroup,
HlPagination: hongluanUi.HlPagination,
HlCheckbox: hongluanUi.HlCheckbox,
HlButton: hongluanUi.HlButton,
HlIcon: hongluanUi.HlIcon
},
directives: {
loading: hongluanUi.HlLoading.directive
},
props: {
maxHeight: {
type: [Number, String],
default: "auto"
},
tableData: {
type: Array,
default: () => []
},
cols: {
type: Array,
default: () => []
},
defaultSort: {
type: Object,
default: () => ({})
},
objectSpanMethod: Function,
loading: {
type: Boolean,
default: false
},
selection: {
type: Boolean,
default: false
},
selectionHeader: {
type: [Boolean, String],
default: false
},
selectable: {
type: Function,
default: null
},
clickableRow: {
type: Boolean,
default: true
},
searchbar: {
type: Object,
default: () => ({
show: true,
searcher: {
placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u6761\u4EF6"
}
})
},
toolbar: {
type: Object,
default: () => ({})
},
pagination: {
type: Object,
default: () => ({
show: true,
total: 0,
pageSize: 10,
currentPage: 1
})
},
padding: {
type: String,
default: ""
}
},
emits: ["searchbar-change", "cell-mouse-enter", "cell-mouse-leave", "selection-change", "cell-click", "current-change", "size-change"],
setup(props, { emit }) {
const { t } = hongluanUi.useLocale();
const selectionItems = vue.ref([]);
const table = vue.ref(null);
const { prefix } = util.usePrefix();
const tableToolbar = vue.computed(() => {
return {
selection: {
show: props.toolbar.showSelectionText,
count: selectionItems.value.length,
total: props.pagination.total
},
action: props.toolbar.action,
extra: {
showColConfig: props.toolbar.showColConfig || true,
colConfig: {
cols: props.cols
}
}
};
});
const shouldShowCol = (col) => {
return !("$show$" in col) || col.$show$;
};
const onSearchbarChanged = (urlParams, mapParams, originalParams) => {
emit("searchbar-change", urlParams, mapParams, originalParams);
};
const cellMouseEnter = (row, column, cell, event) => {
emit("cell-mouse-enter", row, column, cell, event);
};
const cellMouseLeave = (row, column, cell, event) => {
emit("cell-mouse-leave", row, column, cell, event);
};
const rowClick = (row) => {
props.clickableRow && cellClick("detail", row);
};
const selectionChange = (val) => {
selectionItems.value = val;
emit("selection-change", val);
};
const cellClick = (eventName, row) => {
row.eventName = eventName;
emit("cell-click", row);
};
const toggleAllSelection = () => {
props.tableData.forEach((row) => {
table.value.toggleRowSelection(row);
});
};
const clearSelection = () => {
table.value.clearSelection();
};
const toggleRowSelection = (row) => {
table.value.toggleRowSelection(row);
};
const isSelected = (row) => {
const selection = table.value.selection || [];
return selection.indexOf(row) > -1;
};
const handleCurrentChange = (currentPage) => {
emit("current-change", currentPage);
};
const handleSizeChange = (size) => {
emit("size-change", size);
};
const proxy = (funcName, ...args) => {
table.value[funcName](...args);
};
return {
t,
prefix,
table,
onSearchbarChanged,
shouldShowCol,
tableToolbar,
cellMouseEnter,
cellMouseLeave,
rowClick,
selectionChange,
cellClick,
toggleAllSelection,
clearSelection,
toggleRowSelection,
isSelected,
handleCurrentChange,
handleSizeChange,
proxy
};
}
});
const _hoisted_1 = { key: 0 };
const _hoisted_2 = { key: 1 };
const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("div", { style: { "width": "100%" } }, null, -1);
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hb_table_searchbar = vue.resolveComponent("hb-table-searchbar");
const _component_hb_table_toolbar = vue.resolveComponent("hb-table-toolbar");
const _component_hl_checkbox = vue.resolveComponent("hl-checkbox");
const _component_hl_table_column = vue.resolveComponent("hl-table-column");
const _component_hl_button = vue.resolveComponent("hl-button");
const _component_hl_icon = vue.resolveComponent("hl-icon");
const _component_hl_popover = vue.resolveComponent("hl-popover");
const _component_hl_group = vue.resolveComponent("hl-group");
const _component_hl_table = vue.resolveComponent("hl-table");
const _component_hl_pagination = vue.resolveComponent("hl-pagination");
const _directive_loading = vue.resolveDirective("loading");
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(_ctx.prefix + "-table-list"),
style: vue.normalizeStyle([_ctx.padding ? `--table-list-padding: ${_ctx.padding}` : ""])
}, [
_ctx.searchbar.show ? vue.renderSlot(_ctx.$slots, "searchbar", { key: 0 }, () => [
vue.createVNode(_component_hb_table_searchbar, vue.mergeProps({ gap: "var(--sm)" }, _ctx.searchbar, { onChange: _ctx.onSearchbarChanged }), {
prefix: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "searchbar-prefix")
]),
suffix: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "searchbar-suffix")
]),
_: 3
}, 16, ["onChange"])
]) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "toolbar", {}, () => [
vue.createVNode(_component_hb_table_toolbar, vue.normalizeProps(vue.guardReactiveProps(_ctx.tableToolbar)), {
"extra-after": vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "toolbar-extra-after")
]),
"extra-before": vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "toolbar-extra-before")
]),
_: 3
}, 16)
]),
vue.createVNode(_component_hl_table, {
ref: "table",
data: _ctx.tableData,
"row-style": {
cursor: _ctx.clickableRow ? "pointer" : "auto"
},
"span-method": _ctx.objectSpanMethod,
"default-sort": _ctx.defaultSort,
"max-height": _ctx.maxHeight,
onRowClick: _ctx.rowClick,
onSelectionChange: _ctx.selectionChange,
onCellMouseEnter: _ctx.cellMouseEnter,
onCellMouseLeave: _ctx.cellMouseLeave
}, {
empty: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "empty", {}, () => [
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.t("hl.table.emptyText")), 1)
])
]),
default: vue.withCtx(() => [
_ctx.selection ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createCommentVNode(" \u662F\u5426\u6709select "),
_ctx.selectionHeader ? (vue.openBlock(), vue.createBlock(_component_hl_table_column, {
key: 0,
width: "80",
label: _ctx.selectionHeader,
align: "left",
selectable: _ctx.selectable
}, {
default: vue.withCtx(({ row, column, $index }) => [
vue.createVNode(_component_hl_checkbox, {
"show-label": false,
value: _ctx.isSelected(row),
disabled: column.selectable ? !column.selectable.call(null, row, $index) : false,
onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["stop"])),
onInput: ($event) => _ctx.toggleRowSelection(row)
}, null, 8, ["value", "disabled", "onInput"])
]),
_: 1
}, 8, ["label", "selectable"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.createCommentVNode(" \u662F\u5426\u6709select "),
vue.createVNode(_component_hl_table_column, {
type: "selection",
width: "80",
align: "left",
selectable: _ctx.selectable
}, null, 8, ["selectable"])
], 2112))
], 2112)) : vue.createCommentVNode("v-if", true),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.cols, (col, index) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
vue.createCommentVNode(" index \u5E8F\u53F7 "),
col.colType === "index" && _ctx.shouldShowCol(col) ? (vue.openBlock(), vue.createBlock(_component_hl_table_column, {
key: index,
type: "index",
label: col.label,
"min-width": col.minWidth,
width: col.fixedWidth || col.width,
"class-name": col.className,
align: col.align ? col.align : "left",
"show-overflow-tooltip": col.tooltip
}, null, 8, ["label", "min-width", "width", "class-name", "align", "show-overflow-tooltip"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u666E\u901A\u7684\u6570\u636E\u5C55\u793A "),
(col.colType === "field" || !col.colType) && _ctx.shouldShowCol(col) ? (vue.openBlock(), vue.createBlock(_component_hl_table_column, {
key: index,
prop: col.prop,
label: col.label,
"min-width": col.minWidth,
width: col.fixedWidth || col.width,
"class-name": col.className,
formatter: col.formatter,
align: col.align ? col.align : "left",
"show-overflow-tooltip": col.tooltip,
sortable: col.sortable
}, {
default: vue.withCtx((scope) => [
col.formatter ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(col.formatter(scope.row, col, scope.row[col.prop])), 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(scope.row[col.prop] || "-"), 1))
]),
_: 2
}, 1032, ["prop", "label", "min-width", "width", "class-name", "formatter", "align", "show-overflow-tooltip", "sortable"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u81EA\u5B9A\u4E49 "),
col.colType === "slot" && _ctx.shouldShowCol(col) ? (vue.openBlock(), vue.createBlock(_component_hl_table_column, {
key: index,
prop: col.prop,
label: col.label,
"min-width": col.minWidth,
width: col.fixedWidth || col.width,
"class-name": col.className,
align: col.align ? col.align : "left",
"show-overflow-tooltip": col.tooltip,
sortable: col.sortable
}, {
default: vue.withCtx((scope) => [
vue.renderSlot(_ctx.$slots, col.slotName, {
col,
row: scope.row
})
]),
_: 2
}, 1032, ["prop", "label", "min-width", "width", "class-name", "align", "show-overflow-tooltip", "sortable"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u53EF\u70B9\u51FB\u5217\u8DF3\u8F6C "),
col.colType === "link" && _ctx.shouldShowCol(col) ? (vue.openBlock(), vue.createBlock(_component_hl_table_column, {
key: index,
prop: col.prop,
label: col.label,
"min-width": col.minWidth,
width: col.fixedWidth || col.width,
"class-name": col.className,
formatter: col.formatter,
align: col.align ? col.align : "left",
"show-overflow-tooltip": col.tooltip
}, {
default: vue.withCtx((scope) => [
vue.createVNode(_component_hl_button, {
type: "link",
onClick: vue.withModifiers(($event) => _ctx.cellClick(col.eventName, scope.row), ["stop"])
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(col.formatter ? col.formatter(scope.row, col, scope.row[col.prop]) : scope.row[col.prop]), 1)
]),
_: 2
}, 1032, ["onClick"])
]),
_: 2
}, 1032, ["prop", "label", "min-width", "width", "class-name", "formatter", "align", "show-overflow-tooltip"])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" \u64CD\u4F5C\u56FE\u6807\u7EC4 "),
col.colType === "icons" && _ctx.shouldShowCol(col) ? (vue.openBlock(), vue.createBlock(_component_hl_table_column, {
key: index,
prop: col.prop,
label: col.label,
"min-width": col.minWidth,
width: col.fixedWidth || col.width,
"class-name": col.className,
align: col.align ? col.align : "left",
"show-overflow-tooltip": false
}, {
default: vue.withCtx(({ row }) => [
vue.createVNode(_component_hl_group, null, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(col.iconList, (item, spanIdx) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
!item.show || item.show({ item, row, col }) ? (vue.openBlock(), vue.createBlock(_component_hl_popover, {
key: spanIdx,
content: item.tooltipText,
placement: "top",
effect: "dark",
tooltip: ""
}, {
reference: vue.withCtx(() => [
vue.createVNode(_component_hl_button, {
type: "primary",
"no-fill": "",
equal: "",
round: ""
}, {
icon: vue.withCtx(() => [
vue.createVNode(_component_hl_icon, vue.mergeProps(item.iconProps || {}, {
onClick: vue.withModifiers(($event) => _ctx.cellClick(item.eventName, row), ["stop", "prevent"])
}), {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.iconName)))
]),
_: 2
}, 1040, ["onClick"])
]),
_: 2
}, 1024)
]),
_: 2
}, 1032, ["content"])) : vue.createCommentVNode("v-if", true)
], 64);
}), 256))
]),
_: 2
}, 1024)
]),
_: 2
}, 1032, ["prop", "label", "min-width", "width", "class-name", "align"])) : vue.createCommentVNode("v-if", true),
col.colType === "links" && _ctx.shouldShowCol(col) ? (vue.openBlock(), vue.createBlock(_component_hl_table_column, {
key: index,
prop: col.prop,
label: col.label,
"min-width": col.minWidth,
width: col.fixedWidth || col.width,
"class-name": col.className,
align: col.align ? col.align : "left",
"show-overflow-tooltip": false
}, {
default: vue.withCtx(({ row }) => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(col.linkList, (item, spanIdx) => {
return vue.openBlock(), vue.createBlock(_component_hl_group, { key: spanIdx }, {
default: vue.withCtx(() => [
!item.show || item.show({ item, row, col }) ? (vue.openBlock(), vue.createBlock(_component_hl_button, {
key: 0,
type: "link",
onClick: vue.withModifiers(($event) => _ctx.cellClick(item.eventName, row), ["stop", "prevent"])
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(item.label), 1)
]),
_: 2
}, 1032, ["onClick"])) : vue.createCommentVNode("v-if", true)
]),
_: 2
}, 1024);
}), 128))
]),
_: 2
}, 1032, ["prop", "label", "min-width", "width", "class-name", "align"])) : vue.createCommentVNode("v-if", true)
], 64);
}), 256))
]),
_: 3
}, 8, ["data", "row-style", "span-method", "default-sort", "max-height", "onRowClick", "onSelectionChange", "onCellMouseEnter", "onCellMouseLeave"]),
_ctx.pagination.show ? vue.renderSlot(_ctx.$slots, "pagination", { key: 1 }, () => [
_ctx.tableData.length > 0 ? (vue.openBlock(), vue.createBlock(_component_hl_pagination, {
key: 0,
"page-size": _ctx.pagination.pageSize,
"current-page": _ctx.pagination.currentPage,
total: _ctx.pagination.total,
layout: "sizes, total, slot, prev, pager, next, jumper",
justify: "between",
onCurrentChange: _ctx.handleCurrentChange,
onSizeChange: _ctx.handleSizeChange
}, {
default: vue.withCtx(() => [
_hoisted_3
]),
_: 1
}, 8, ["page-size", "current-page", "total", "onCurrentChange", "onSizeChange"])) : vue.createCommentVNode("v-if", true)
]) : vue.createCommentVNode("v-if", true)
], 6)), [
[_directive_loading, _ctx.loading]
]);
}
var TableList = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
exports["default"] = TableList;
//# sourceMappingURL=index.js.map