@web-utils/component 4.0.16 → 5.0.0-beta01

package/chunks/PageableTable.Bujb0NUx.mjs

@@ -0,0 +1,658 @@
+import "./install.yLcn5MLL.mjs";
+import { t as e } from "./_plugin-vue_export-helper.7vrlOII_.mjs";
+import { t } from "./message.BCmee5N0.mjs";
+import { a as n, i as r, l as i, r as a } from "./util.B3sjVZoZ.mjs";
+import { t as o } from "./dictionary.DxZxP0ej.mjs";
+import { Fragment as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createTextVNode as p, createVNode as m, mergeProps as h, normalizeClass as g, normalizeProps as _, openBlock as v, renderList as y, renderSlot as b, resolveComponent as x, toDisplayString as S, toHandlers as C, withCtx as w } from "vue";
+import { copy as T, hasOwn as E } from "@web-utils/core";
+import { merge as D } from "@web-utils/integrations/lodash";
+import { isEqual as O } from "lodash-es";
+//#region src/util/clipboard.js
+function k(e) {
+	T(e, () => i(t).success({
+		duration: 1e3,
+		message: "复制成功！",
+		type: "success"
+	}), () => i(t).error({
+		duration: 1e3,
+		message: "复制失败！",
+		type: "error"
+	}));
+}
+//#endregion
+//#region src/components/table/components/TableColumnFilterable.vue
+var A = {
+	name: "TableColumnFilterable",
+	functional: !0,
+	render(e, t) {
+		let { data: { key: n }, props: r, parent: { records: i }, scopedSlots: a } = t, { hide: o, isVNode: s, filterable: c, allowSort: l, autoUpdate: u, scopedSlots: d, prop: f, ...p } = r, g = `${n}-${c}${u ? `-${Math.random()}`.replace("0.", "") : ""}`, _ = { props: {
+			prop: f,
+			...p
+		} };
+		if (c) {
+			let e = [...new Set(i.map((e) => e[f]).filter((e) => e))].map((e) => ({
+				text: e,
+				value: e
+			}));
+			_.props.filterMethod = (e, t, n) => t[n.property] === e, _.props.filters = e;
+		}
+		let v = d || a;
+		return v != null && v.default ? m(x("ElTableColumn"), h(_, {
+			scopedSlots: v,
+			key: g
+		}), null) : m(x("TableColumn"), h(_, { key: g }), null);
+	}
+}, j = {
+	name: "TableColumnFilter",
+	props: {
+		columns: {
+			type: Array,
+			default: () => []
+		},
+		visible: Boolean
+	},
+	emits: ["update:visible"]
+};
+function M(e, t, n, r, i, a) {
+	let o = x("ElTableColumn"), s = x("ElCheckbox"), l = x("ElTable"), u = x("ElDrawer");
+	return v(), c(u, {
+		class: "table-column-filter",
+		visible: n.visible,
+		title: "表格设置",
+		"append-to-body": "",
+		"onUpdate:visible": t[0] || (t[0] = (t) => e.$emit("update:visible", t))
+	}, {
+		default: w(() => [m(l, {
+			data: n.columns,
+			border: ""
+		}, {
+			default: w(() => [
+				m(o, { label: "列名" }, {
+					default: w(({ row: e }) => [p(S(e.label), 1)]),
+					_: 1
+				}),
+				m(o, {
+					label: "隐藏",
+					align: "center"
+				}, {
+					default: w(({ row: e }) => [m(s, {
+						modelValue: e.hide,
+						"onUpdate:modelValue": (t) => e.hide = t
+					}, null, 8, ["modelValue", "onUpdate:modelValue"])]),
+					_: 1
+				}),
+				m(o, {
+					label: "冻结",
+					align: "center"
+				}, {
+					default: w(({ row: e }) => [m(s, {
+						modelValue: e.fixed,
+						"onUpdate:modelValue": (t) => e.fixed = t
+					}, null, 8, ["modelValue", "onUpdate:modelValue"])]),
+					_: 1
+				}),
+				m(o, {
+					label: "过滤",
+					align: "center"
+				}, {
+					default: w(({ row: e }) => [m(s, {
+						modelValue: e.filterable,
+						"onUpdate:modelValue": (t) => e.filterable = t
+					}, null, 8, ["modelValue", "onUpdate:modelValue"])]),
+					_: 1
+				}),
+				m(o, {
+					label: "排序",
+					align: "center"
+				}, {
+					default: w(({ row: e }) => [m(s, {
+						modelValue: e.sortable,
+						"onUpdate:modelValue": (t) => e.sortable = t,
+						title: e.allowSort ? null : "该列不支持排序!",
+						disabled: !e.allowSort
+					}, null, 8, [
+						"modelValue",
+						"onUpdate:modelValue",
+						"title",
+						"disabled"
+					])]),
+					_: 1
+				})
+			]),
+			_: 1
+		}, 8, ["data"])]),
+		_: 1
+	}, 8, ["visible"]);
+}
+var N = /* @__PURE__ */ e(j, [["render", M]]), P = {
+	props: { useVisibilityChange: Boolean },
+	created() {
+		this.useVisibilityChange && document.addEventListener("visibilitychange", this.onPageVisibleChange);
+	},
+	beforeDestroy() {
+		this.useVisibilityChange && document.removeEventListener("visibilitychange", this.onPageVisibleChange);
+	},
+	methods: { onPageVisibleChange() {
+		if (document.hidden) {
+			var e;
+			(e = this.onPageHidden) == null || e.call(this);
+		} else {
+			var t;
+			(t = this.onPageVisible) == null || t.call(this);
+		}
+	} }
+};
+//#endregion
+//#region src/components/table/PageableTable.vue
+function F(e, t) {
+	return O(e.map((e) => {
+		let { hide: t, filterable: n, allowSort: r, sortable: i, fixed: a, ...o } = e;
+		return o;
+	}), t.map((e) => {
+		let { hide: t, filterable: n, allowSort: r, sortable: i, fixed: a, ...o } = e;
+		return o;
+	}));
+}
+function I(e) {
+	let t = "";
+	for (let n in e) t += `<TableColumn prop="${n}" label="${n}"/>\n`;
+	return t;
+}
+var L = {
+	loading: 1,
+	error: -1,
+	empty: 2,
+	success: 0
+}, R = {
+	name: "PageableTable",
+	components: {
+		TableColumnFilter: N,
+		TableColumnFilterable: A
+	},
+	mixins: [P],
+	emits: ["page-loaded", "row-dblclick"],
+	bus: { reloadTableView(e) {
+		e === this.viewId && this.getPage();
+	} },
+	inheritAttrs: !1,
+	props: {
+		selectionWidth: {
+			type: String,
+			default: "45"
+		},
+		viewId: String,
+		url: String,
+		hideOnSinglePage: Boolean,
+		api: Function,
+		model: Object,
+		ascs: {
+			type: Array,
+			default: () => []
+		},
+		descs: {
+			type: Array,
+			default: () => []
+		},
+		headerBold: Boolean,
+		autoHeight: Boolean,
+		immediate: {
+			type: Boolean,
+			default: !0
+		},
+		index: {
+			type: Boolean,
+			default: !0
+		},
+		multiple: {
+			type: Boolean,
+			default: !0
+		},
+		selection: {
+			type: Boolean,
+			default: !0
+		},
+		border: {
+			type: Boolean,
+			default: !0
+		},
+		reloadOnModelChange: {
+			type: Boolean,
+			default: !1
+		},
+		columns: Array,
+		pageSize: {
+			type: Number,
+			default: 25
+		},
+		dicOptions: {
+			type: Array,
+			default: () => []
+		},
+		paging: {
+			type: Boolean,
+			default: !0
+		},
+		clickRowSelect: Boolean,
+		payloadStyle: String,
+		rowKey: {
+			type: String,
+			default: "id"
+		},
+		disabledRowKeys: Array,
+		selectExport: Boolean
+	},
+	data() {
+		let e = this.pageSize;
+		return {
+			TABLE_STATUS: Object.freeze(L),
+			tableStatus: L.empty,
+			records: [],
+			currentRow: null,
+			showSettings: !1,
+			selectedRows: [],
+			page: {
+				total: 0,
+				page: 1,
+				limit: e,
+				ascs: this.ascs,
+				descs: this.descs
+			},
+			tableColumns: [],
+			expandColumn: null,
+			renderKey: 1
+		};
+	},
+	computed: {
+		guard() {
+			return this.reloadOnModelChange ? {
+				asc: this.page.ascs,
+				desc: this.page.descs,
+				page: this.page.page,
+				limit: this.page.limit,
+				model: this.model
+			} : {
+				asc: this.page.ascs,
+				desc: this.page.descs,
+				page: this.page.page,
+				limit: this.page.limit
+			};
+		},
+		indexWidth() {
+			var e;
+			let t = `${(this.page.page - 1) * this.page.limit + (((e = this.records) == null ? void 0 : e.length) ?? 0)}`;
+			return t.length > 3 ? 60 + (t.length - 3) * 10 : 60;
+		},
+		mergeAttrs() {
+			return D({}, this.$attrs, { height: this.autoHeight ? null : "auto" });
+		},
+		headers() {
+			var e;
+			return ((e = this.columns) == null ? void 0 : e.map(a)) || [];
+		}
+	},
+	watch: {
+		url: { handler: "reload" },
+		api: { handler: "reload" },
+		"$attrs.data": "getPage"
+	},
+	created() {
+		this.$watch(() => this.guard, this.getPage, {
+			deep: !0,
+			immediate: this.immediate
+		}), this.$watch(() => ({
+			columns: this.columns,
+			renderKey: this.renderKey
+		}), (e) => {
+			let t = [], n = null;
+			if (e) {
+				let r = this.$slots.default(), { columns: i } = e;
+				r ? r.forEach((e) => {
+					if (!e.isComment && e.data) {
+						let { attrs: r, props: i, scopedSlots: a } = e.data;
+						e.data.props = e.data.props || {}, e.data.props.type === "expand" ? n = {
+							...r,
+							...i,
+							scopedSlots: a,
+							hide: !1,
+							filterable: !1,
+							allowSort: e.data.props.sortable !== !1,
+							sortable: !1,
+							fixed: e.data.props.fixed
+						} : t.push({
+							...r,
+							...i,
+							scopedSlots: a,
+							hide: !1,
+							isVNode: !0,
+							filterable: !1,
+							allowSort: e.data.props.sortable !== !1,
+							sortable: !1,
+							fixed: e.data.props.fixed
+						});
+					}
+				}) : i && i.forEach((e) => {
+					e.type === "expand" ? n = {
+						...e,
+						props: e,
+						hide: !1,
+						filterable: !1,
+						allowSort: e.sortable !== !1,
+						sortable: !1,
+						fixed: e.fixed
+					} : t.push({
+						...e,
+						props: e,
+						hide: !1,
+						filterable: !1,
+						allowSort: e.sortable !== !1,
+						sortable: !1,
+						fixed: e.fixed
+					});
+				}), this.updateExpandColumn(n), this.updateColumns(t);
+			}
+		}, { immediate: !0 });
+	},
+	mounted() {
+		this.$refs.table.bodyWrapper.addEventListener("scroll", this.onTableScroll);
+	},
+	beforeUpdate() {
+		this.renderKey++;
+	},
+	beforeUnmount() {
+		this.$refs.table.bodyWrapper.removeEventListener("scroll", this.onTableScroll);
+	},
+	methods: {
+		rowDbClick(...e) {
+			this.hideTooltip(), this.$emit("row-dblclick", ...e);
+		},
+		rowClick(e, t, n) {
+			if (this.clickRowSelect && this.selectable(e)) {
+				let t = this.$refs.table;
+				if (this.selectedRows.find((t) => t[this.rowKey] === e[this.rowKey])) {
+					t.toggleRowSelection(e, !1);
+					return;
+				}
+				t.toggleRowSelection(e);
+			}
+		},
+		hideTooltip() {
+			var e;
+			let t = this.$refs.table.$children.find((e) => {
+				var t;
+				return ((t = e.$options) == null ? void 0 : t.name) === "ElTableBody";
+			});
+			t == null || (e = t.$refs.tooltip) == null || e.hide();
+		},
+		updateTableScrollPosition() {
+			this.$refs.table.bodyWrapper && this.scrollTo(this.tableScrollTop, this.tableScrollLeft);
+		},
+		filterTableProperties: n,
+		filterTableEvents: r,
+		filterTableColumnProperties: a,
+		onTableScroll() {
+			this.tableScrollTop = this.$refs.table.bodyWrapper.scrollTop, this.tableScrollLeft = this.$refs.table.bodyWrapper.scrollLeft;
+		},
+		copy: (e) => k(I(e)),
+		onSortChange({ prop: e, order: t }) {
+			this.payloadStyle === "body" ? (this.page.ascs = t === "ascending" ? [e] : this.ascs, this.page.descs = t === "descending" ? [e] : this.descs) : (this.page.ascs = t === "ascending" ? e : "", this.page.descs = t === "descending" ? e : "");
+		},
+		onCurrentChange(e) {
+			this.selectable(e) && (this.currentRow = e);
+		},
+		handleSelectionChange(e) {
+			this.selectedRows = e;
+		},
+		clearSelection() {
+			this.$refs.table.clearSelection();
+		},
+		getPageQuery() {
+			let e;
+			return e = this.payloadStyle === "body" ? {
+				page: {
+					...this.page,
+					current: this.page.page,
+					size: this.page.limit
+				},
+				example: this.model || {}
+			} : {
+				...this.page,
+				current: this.page.page,
+				size: this.page.limit,
+				...this.model || {}
+			}, this.selectExport && (this.rowKey ? e.exportKeys = this.selectedRows.map((e) => e[this.rowKey]) : e.exportKeys = this.selectedRows.map((e) => this.records.indexOf(e))), e;
+		},
+		async getPage(e) {
+			if (E(this.$attrs, "data") && this.$attrs.data !== !1) {
+				var t;
+				this.records = this.$attrs.data, this.page.page = 1, this.page.total = (t = this.records) == null ? void 0 : t.length, this.page.limit = this.page.total;
+				return;
+			}
+			e !== !1 && (this.records = []);
+			let n, r = this.getPageQuery();
+			if (this.api || this.url) {
+				e !== !1 && (this.tableStatus = L.loading);
+				try {
+					this.api && (n = await this.api(r));
+				} catch {
+					this.tableStatus = L.error;
+					return;
+				}
+			} else {
+				this.$notify.warning({
+					title: "开发提示！",
+					message: "PageableTable 请提供 url(String) 或 api(Function) 属性"
+				});
+				return;
+			}
+			let { data: { data: i } } = n || {}, { total: a, records: o } = i || {};
+			this.page.total = Number(a), this.records = await this.mapRow(o), !o || !o.length ? this.tableStatus = L.empty : this.tableStatus = L.success, this.doLayout(), this.$emit("page-loaded", i);
+		},
+		doLayout() {
+			var e;
+			(e = this.$refs.table) == null || e.doLayout();
+		},
+		async refresh(e) {
+			await this.getPage(e);
+		},
+		reload() {
+			this.page = {
+				...this.$options.data.call(this).page,
+				limit: this.page.limit
+			};
+		},
+		scrollTo(e, t) {
+			e && (this.$refs.table.bodyWrapper.scrollTop = e), t && (this.$refs.table.bodyWrapper.scrollLeft = t);
+		},
+		toggleRowSelection(e, t) {
+			this.$refs.table.toggleRowSelection(e, t);
+		},
+		mapRow(e) {
+			return e.map((e) => (this.dicOptions.forEach(async (t) => {
+				if (e[`$${t.prop}`] = e[t.prop], t.dicData) {
+					var n;
+					e[t.prop] = ((n = t.dicData.find((n) => n.value === e[t.prop])) == null ? void 0 : n.label) || e[t.prop];
+				} else e[t.prop] = await o(t.dicType, e[t.prop]);
+			}), e));
+		},
+		toggleSettings() {
+			this.showSettings = !this.showSettings;
+		},
+		selectable(e) {
+			var t;
+			return !(e != null && e.disabled) && !((t = this.disabledRowKeys) != null && t.includes(e == null ? void 0 : e[this.rowKey]));
+		},
+		updateExpandColumn(e) {
+			e && this.expandColumn ? D(this.expandColumn, e) : this.expandColumn = e;
+		},
+		updateColumns(e) {
+			if (!F(this.tableColumns, e)) {
+				let t = {};
+				this.tableColumns.forEach((e) => {
+					t[e.prop] = e;
+				}), e.map((e) => {
+					let n = t[e.prop];
+					if (n) {
+						let { hide: t, filterable: r, allowSort: i, sortable: a, fixed: o } = n;
+						return D(n, e), n.hide = t, n.filterable = r, n.allowSort = i, n.sortable = a, n.fixed = o, n;
+					}
+					return e;
+				}), this.tableColumns = e;
+			}
+		},
+		onPageVisible() {
+			this.refresh(!1);
+		}
+	}
+}, z = { class: "pageable-table-wrapper" }, B = {
+	key: 0,
+	class: "pageable-table-loading"
+}, V = ["onClick"];
+function H(e, t, n, r, i, a) {
+	let o = x("TableColumnFilterable"), T = x("TableColumn"), E = x("ElRadio"), D = x("ElButton"), O = x("ElEmpty"), k = x("ElTable"), A = x("ElPagination"), j = x("TableColumnFilter"), M = x("ResizeObserver");
+	return v(), u("div", { class: g(["pageable-table", { "auto-height": n.autoHeight }]) }, [d("div", z, [
+		l("顶部工具条插槽"),
+		b(e.$slots, "toolbar", { selectedRows: i.selectedRows }),
+		l("表格"),
+		m(k, h({
+			ref: "table",
+			data: i.records,
+			class: ["flex-item", { "header-bold": n.headerBold }],
+			border: n.border,
+			stripe: "",
+			size: "medium"
+		}, a.filterTableProperties(a.mergeAttrs), {
+			"onHook:updated": a.updateTableScrollPosition,
+			onSortChange: a.onSortChange,
+			onRowDblclick: a.rowDbClick,
+			onRowClick: a.rowClick,
+			onCellClick: a.hideTooltip,
+			onCurrentChange: a.onCurrentChange,
+			onSelectionChange: a.handleSelectionChange
+		}, C(a.filterTableEvents(e.$listeners))), {
+			empty: w(() => [l("内容为空插槽"), b(e.$slots, "empty", {}, () => [i.tableStatus === i.TABLE_STATUS.loading ? (v(), u("span", B, [...t[5] || (t[5] = [d("i", { class: "table-status-icon el-icon-loading" }, null, -1), p(" 加载中... ", -1)])])) : i.tableStatus === i.TABLE_STATUS.error ? (v(), c(D, {
+				key: 1,
+				class: "pageable-table-error",
+				icon: "table-status-icon el-icon-error",
+				onClick: a.refresh
+			}, {
+				default: w(() => [...t[6] || (t[6] = [p("加载失败，点击重试！", -1)])]),
+				_: 1
+			}, 8, ["onClick"])) : (v(), c(O, { key: 2 }))])]),
+			append: w(() => [b(e.$slots, "append")]),
+			default: w(() => [
+				i.expandColumn ? (v(), c(o, _(h({ key: 0 }, i.expandColumn)), null, 16)) : l("v-if", !0),
+				n.multiple && n.selection ? (v(), c(T, {
+					key: "multiple",
+					type: "selection",
+					selectable: a.selectable,
+					width: n.selectionWidth,
+					align: "center"
+				}, null, 8, ["selectable", "width"])) : l("v-if", !0),
+				!n.multiple && n.selection ? (v(), c(T, {
+					key: "single",
+					sortable: !1,
+					type: "single-selection",
+					"class-name": "single-select-column",
+					width: n.selectionWidth,
+					align: "center"
+				}, {
+					header: w(() => [m(E, {
+						value: !!i.currentRow,
+						label: !0
+					}, {
+						default: w(() => [...t[3] || (t[3] = [d("span", null, null, -1)])]),
+						_: 1
+					}, 8, ["value"])]),
+					default: w(({ row: r }) => [m(E, {
+						label: !0,
+						disabled: !a.selectable(r),
+						value: i.currentRow && i.currentRow[e.$attrs["row-key"] || n.rowKey || "id"] === r[e.$attrs["row-key"] || n.rowKey || "id"]
+					}, {
+						default: w(() => [...t[4] || (t[4] = [d("span", null, null, -1)])]),
+						_: 1
+					}, 8, ["disabled", "value"])]),
+					_: 1
+				}, 8, ["width"])) : l("v-if", !0),
+				n.index ? (v(), c(T, {
+					key: "order",
+					type: "index",
+					label: "序号",
+					width: a.indexWidth,
+					align: "center"
+				}, {
+					default: w(({ $index: e }) => [p(S((i.page.page - 1) * i.page.limit + e + 1 || e + 1), 1)]),
+					_: 1
+				}, 8, ["width"])) : l("v-if", !0),
+				i.tableColumns ? (v(!0), u(s, { key: 4 }, y(i.tableColumns.filter((e) => !e.hide), (t, n) => {
+					var r, i;
+					return v(), c(o, h({ key: `${((r = t.props) == null ? void 0 : r.prop) || t.prop}-${n}` }, { ref_for: !0 }, t), f({ _: 2 }, [e.$slots[((i = t.props) == null ? void 0 : i.prop) || t.prop] ? {
+						name: "default",
+						fn: w(({ row: n }) => {
+							var r;
+							return [b(e.$slots, ((r = t.props) == null ? void 0 : r.prop) || t.prop, { row: n })];
+						}),
+						key: "0"
+					} : void 0]), 1040);
+				}), 128)) : (v(), u(s, { key: 5 }, [l("未设置列提醒"), m(T, { label: "点击表格行复制模板" }, {
+					default: w(({ row: e }) => [d("pre", {
+						class: "pointer",
+						onClick: (t) => a.copy(e)
+					}, S(JSON.stringify(e, null, "	")), 9, V)]),
+					_: 1
+				})], 64))
+			]),
+			_: 3
+		}, 16, [
+			"data",
+			"class",
+			"border",
+			"onHook:updated",
+			"onSortChange",
+			"onRowDblclick",
+			"onRowClick",
+			"onCellClick",
+			"onCurrentChange",
+			"onSelectionChange"
+		]),
+		l("底部分页工具条"),
+		n.paging ? (v(), c(A, {
+			key: 0,
+			"current-page": i.page.page,
+			"hide-on-single-page": n.hideOnSinglePage,
+			"page-size": i.page.limit,
+			total: i.page.total,
+			"page-sizes": [
+				10,
+				25,
+				50,
+				100,
+				500,
+				1e3,
+				2e3
+			],
+			class: "flex-not-shrink",
+			background: "",
+			layout: "total, sizes, prev, pager, next, jumper",
+			onSizeChange: t[0] || (t[0] = (e) => {
+				i.page.limit = e;
+			}),
+			onCurrentChange: t[1] || (t[1] = (e) => {
+				i.page.page = e;
+			})
+		}, null, 8, [
+			"current-page",
+			"hide-on-single-page",
+			"page-size",
+			"total"
+		])) : l("v-if", !0),
+		l("列设置面板"),
+		m(j, {
+			visible: i.showSettings,
+			"onUpdate:visible": t[2] || (t[2] = (e) => i.showSettings = e),
+			columns: i.tableColumns
+		}, null, 8, ["visible", "columns"])
+	]), m(M, { onNotify: a.doLayout }, null, 8, ["onNotify"])], 2);
+}
+var U = /* @__PURE__ */ e(R, [["render", H]]);
+//#endregion
+export { U as t };