@web-utils/component 5.0.0-beta03 → 5.0.0-beta04

package/chunks/PageableTable.DR-REJN5.mjs

@@ -1,659 +0,0 @@
-import "./chunk.A6TnG60p.mjs";
-import { t as e } from "./_plugin-vue_export-helper.7vrlOII_.mjs";
-import { t } from "./message.DnTACuzV.mjs";
-import { a as n, i as r, l as i, r as a } from "./util.fjuzrmWz.mjs";
-import { t as o } from "./dictionary.BqVLM7Lf.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, isVNode as h, mergeProps as g, normalizeClass as _, normalizeProps as v, openBlock as y, renderList as b, renderSlot as x, resolveComponent as S, toDisplayString as C, toHandlers as w, withCtx as T } from "vue";
-import { copy as E, hasOwn as D } from "@web-utils/core";
-import { merge as O } from "@web-utils/integrations/lodash";
-import { isEqual as k } from "lodash-es";
-//#region src/util/clipboard.js
-function A(e) {
-	E(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?vue&type=script&lang.jsx
-function j(e) {
-	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !h(e);
-}
-//#endregion
-//#region src/components/table/components/TableColumnFilterable.vue
-var M = {
-	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, h = `${n}-${c}${u ? `-${Math.random()}`.replace("0.", "") : ""}`, _ = {
-			prop: f,
-			...p
-		};
-		if (c) {
-			let e = [...new Set(i.map((e) => e[f]).filter((e) => e))].map((e) => ({
-				text: e,
-				value: e
-			}));
-			_.filterMethod = (e, t, n) => t[n.property] === e, _.filters = e;
-		}
-		let v = d || a;
-		return v != null && v.default ? m(S("ElTableColumn"), g(_, { key: h }), j(v) ? v : { default: () => [v] }) : m(S("TableColumn"), g(_, { key: h }), null);
-	}
-}, N = {
-	name: "TableColumnFilter",
-	props: {
-		columns: {
-			type: Array,
-			default: () => []
-		},
-		visible: Boolean
-	},
-	emits: ["update:visible"]
-};
-function P(e, t, n, r, i, a) {
-	let o = S("ElTableColumn"), s = S("ElCheckbox"), l = S("ElTable"), u = S("ElDrawer");
-	return y(), 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: T(() => [m(l, {
-			data: n.columns,
-			border: ""
-		}, {
-			default: T(() => [
-				m(o, { label: "列名" }, {
-					default: T(({ row: e }) => [p(C(e.label), 1)]),
-					_: 1
-				}),
-				m(o, {
-					label: "隐藏",
-					align: "center"
-				}, {
-					default: T(({ 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: T(({ 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: T(({ 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: T(({ 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 F = /* @__PURE__ */ e(N, [["render", P]]), I = {
-	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 L(e, t) {
-	return k(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 R(e) {
-	let t = "";
-	for (let n in e) t += `<TableColumn prop="${n}" label="${n}"/>\n`;
-	return t;
-}
-var z = {
-	loading: 1,
-	error: -1,
-	empty: 2,
-	success: 0
-}, B = {
-	name: "PageableTable",
-	components: {
-		TableColumnFilter: F,
-		TableColumnFilterable: M
-	},
-	mixins: [I],
-	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(z),
-			tableStatus: z.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 O({}, 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) => A(R(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 (D(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 = z.loading);
-				try {
-					this.api && (n = await this.api(r));
-				} catch {
-					this.tableStatus = z.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 = z.empty : this.tableStatus = z.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 ? O(this.expandColumn, e) : this.expandColumn = e;
-		},
-		updateColumns(e) {
-			if (!L(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 O(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);
-		}
-	}
-}, V = { class: "pageable-table-wrapper" }, H = {
-	key: 0,
-	class: "pageable-table-loading"
-}, U = ["onClick"];
-function W(e, t, n, r, i, a) {
-	let o = S("TableColumnFilterable"), h = S("TableColumn"), E = S("ElRadio"), D = S("ElButton"), O = S("ElEmpty"), k = S("ElTable"), A = S("ElPagination"), j = S("TableColumnFilter"), M = S("ResizeObserver");
-	return y(), u("div", { class: _(["pageable-table", { "auto-height": n.autoHeight }]) }, [d("div", V, [
-		l("顶部工具条插槽"),
-		x(e.$slots, "toolbar", { selectedRows: i.selectedRows }),
-		l("表格"),
-		m(k, g({
-			ref: "table",
-			data: i.records,
-			class: ["flex-item", { "header-bold": n.headerBold }],
-			border: n.border,
-			stripe: ""
-		}, 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
-		}, w(a.filterTableEvents(e.$listeners))), {
-			empty: T(() => [l("内容为空插槽"), x(e.$slots, "empty", {}, () => [i.tableStatus === i.TABLE_STATUS.loading ? (y(), u("span", H, [...t[5] || (t[5] = [d("i", { class: "table-status-icon el-icon-loading" }, null, -1), p(" 加载中... ", -1)])])) : i.tableStatus === i.TABLE_STATUS.error ? (y(), c(D, {
-				key: 1,
-				class: "pageable-table-error",
-				icon: "table-status-icon el-icon-error",
-				onClick: a.refresh
-			}, {
-				default: T(() => [...t[6] || (t[6] = [p("加载失败，点击重试！", -1)])]),
-				_: 1
-			}, 8, ["onClick"])) : (y(), c(O, { key: 2 }))])]),
-			append: T(() => [x(e.$slots, "append")]),
-			default: T(() => [
-				i.expandColumn ? (y(), c(o, v(g({ key: 0 }, i.expandColumn)), null, 16)) : l("v-if", !0),
-				n.multiple && n.selection ? (y(), c(h, {
-					key: "multiple",
-					type: "selection",
-					selectable: a.selectable,
-					width: n.selectionWidth,
-					align: "center"
-				}, null, 8, ["selectable", "width"])) : l("v-if", !0),
-				!n.multiple && n.selection ? (y(), c(h, {
-					key: "single",
-					sortable: !1,
-					type: "single-selection",
-					"class-name": "single-select-column",
-					width: n.selectionWidth,
-					align: "center"
-				}, {
-					header: T(() => [m(E, {
-						value: !!i.currentRow,
-						label: !0
-					}, {
-						default: T(() => [...t[3] || (t[3] = [d("span", null, null, -1)])]),
-						_: 1
-					}, 8, ["value"])]),
-					default: T(({ 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: T(() => [...t[4] || (t[4] = [d("span", null, null, -1)])]),
-						_: 1
-					}, 8, ["disabled", "value"])]),
-					_: 1
-				}, 8, ["width"])) : l("v-if", !0),
-				n.index ? (y(), c(h, {
-					key: "order",
-					type: "index",
-					label: "序号",
-					width: a.indexWidth,
-					align: "center"
-				}, {
-					default: T(({ $index: e }) => [p(C((i.page.page - 1) * i.page.limit + e + 1 || e + 1), 1)]),
-					_: 1
-				}, 8, ["width"])) : l("v-if", !0),
-				i.tableColumns ? (y(!0), u(s, { key: 4 }, b(i.tableColumns.filter((e) => !e.hide), (t, n) => {
-					var r, i;
-					return y(), c(o, g({ 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: T(({ row: n }) => {
-							var r;
-							return [x(e.$slots, ((r = t.props) == null ? void 0 : r.prop) || t.prop, { row: n })];
-						}),
-						key: "0"
-					} : void 0]), 1040);
-				}), 128)) : (y(), u(s, { key: 5 }, [l("未设置列提醒"), m(h, { label: "点击表格行复制模板" }, {
-					default: T(({ row: e }) => [d("pre", {
-						class: "pointer",
-						onClick: (t) => a.copy(e)
-					}, C(JSON.stringify(e, null, "	")), 9, U)]),
-					_: 1
-				})], 64))
-			]),
-			_: 3
-		}, 16, [
-			"data",
-			"class",
-			"border",
-			"onHook:updated",
-			"onSortChange",
-			"onRowDblclick",
-			"onRowClick",
-			"onCellClick",
-			"onCurrentChange",
-			"onSelectionChange"
-		]),
-		l("底部分页工具条"),
-		n.paging ? (y(), 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 G = /* @__PURE__ */ e(B, [["render", W]]);
-//#endregion
-export { G as t };