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

package/sub-table/index.mjs

@@ -1,505 +0,0 @@
-import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
-import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createSlots as o, createTextVNode as s, createVNode as c, mergeProps as l, openBlock as u, renderList as d, renderSlot as f, resolveComponent as p, toDisplayString as m, toHandlers as h, withCtx as g, withModifiers as _ } from "vue";
-import { findTreeChildren as v, isFunction as y } from "@web-utils/core";
-import { cloneDeep as b } from "@web-utils/integrations/lodash";
-//#region src/components/table/SubTable.vue
-var x = {
-	name: "SubTable",
-	emits: ["add-row"],
-	inject: {
-		elForm: { default: "" },
-		elFormItem: { default: "" }
-	},
-	props: {
-		value: Array,
-		prop: String,
-		columns: Array,
-		limit: {
-			type: Number,
-			default: Infinity
-		},
-		maxLimit: {
-			type: Number,
-			default: Infinity
-		},
-		disabled: Boolean,
-		showSummary: Boolean,
-		selectionWidth: String,
-		allowEmpty: Boolean,
-		handleColumn: {
-			type: Boolean,
-			default: !0
-		},
-		editable: Boolean,
-		fetchApi: Function,
-		delApi: Function,
-		showHandleColumnAddButton: {
-			type: Boolean,
-			default: !0
-		},
-		showEmptyAddButton: {
-			type: Boolean,
-			default: !0
-		}
-	},
-	data() {
-		return {
-			rows: [],
-			selectedRows: []
-		};
-	},
-	computed: {
-		available() {
-			return this.editable && this.enabled;
-		},
-		enabled() {
-			return !this.disabled;
-		},
-		rowProps() {
-			let e = {};
-			return this.columns && this.columns.map((e) => e.prop).forEach((t) => {
-				e[t] = null;
-			}), e;
-		},
-		inputDisabled() {
-			return this.disabled || (this.elForm || {}).disabled;
-		}
-	},
-	watch: {
-		value: {
-			deep: !0,
-			immediate: !0,
-			handler(e) {
-				this.rows = e || [];
-			}
-		},
-		rows: {
-			deep: !0,
-			immediate: !0,
-			handler(e) {
-				this.$emit("input", e);
-			}
-		}
-	},
-	methods: {
-		getCellType(e, t) {
-			return y(t.getType) ? t.getType(e, t) : t.type;
-		},
-		getInputAttr(e, t) {
-			return {
-				...t.attrs,
-				...t.getAttrs ? t.getAttrs(e) : {}
-			};
-		},
-		isInputDisabled(e, t) {
-			return t.isDisabled && t.isDisabled(e);
-		},
-		onInput(e, t, n) {
-			n.setValue ? n.setValue(e, t, n, this.rows) : e[n.prop] = t;
-		},
-		onSelectionChange(e) {
-			this.selectedRows = e;
-		},
-		remove(e, t) {
-			try {
-				this.rows.splice(t, 1);
-			} catch {}
-		},
-		add(e, t) {
-			let n = b(this.rowProps);
-			this.rows.splice(t + 1, 0, n);
-		},
-		addRow() {
-			this.$emit("add-row");
-		},
-		async delRow() {
-			if (!this.selectedRows.length) {
-				this.$message.warning("请选择要删除的记录！");
-				return;
-			}
-			try {
-				if (this.delApi) try {
-					await this.delApi(this.selectedRows.map((e) => e.id).join(",")), this.refresh();
-				} catch {
-					this.$message.error("删除失败！");
-				}
-				else this.$emit("input", this.rows.filter((e) => !this.selectedRows.includes(e)));
-				this.$message.success("删除成功！");
-			} catch {}
-		},
-		refresh() {
-			this.$refs.table.getPage();
-		},
-		getVal(e, t, n) {
-			var r, i;
-			if (n.type === "select" && (r = n.attrs) != null && r.options) {
-				let r = n.attrs.options.find((n) => n.code === e[t.property]);
-				if (r) return r.name;
-			}
-			if (n.type === "cascader" && (i = n.attrs) != null && i.options) {
-				let [r] = v(n.attrs.options, (r) => r[n.attrs.valueKey || "value"] === e[t.property]);
-				if (r) return r[n.attrs.valueKey || "label"];
-			}
-			return e[t.property];
-		}
-	}
-}, S = {
-	key: 0,
-	class: "table-header"
-}, C = {
-	key: 0,
-	style: { color: "#f56c6c" }
-}, w = ["onClick"];
-function T(e, v, y, b, x, T) {
-	let E = p("ElButton"), D = p("ConfirmButton"), O = p("FormInput"), k = p("FormInputPhoneNumber"), A = p("FormInputUser"), j = p("FormInputDepartment"), M = p("FormSelect"), N = p("FormDatePicker"), P = p("FormCascader"), F = p("FormCheckboxGroup"), I = p("FormInputNumber"), L = p("FormTextarea"), R = p("DictRender"), z = p("TableColumn"), B = p("Confirmable"), V = p("PageableTable");
-	return u(), n(V, l({
-		ref: "table",
-		class: "sub-table",
-		"auto-height": "",
-		data: x.rows,
-		api: y.fetchApi,
-		"show-summary": y.showSummary,
-		"selection-width": y.selectionWidth
-	}, e.$attrs, {
-		"hide-on-single-page": "",
-		selection: T.enabled
-	}, h(e.$listeners), { onSelectionChange: T.onSelectionChange }), o({
-		default: g(() => [
-			f(e.$slots, "columns", { columns: y.columns }, () => [(u(!0), i(t, null, d(y.columns, (a) => (u(), i(t, null, [a.label && !a.hide && !a.slot ? (u(), n(z, {
-				key: `${a.prop}-${T.enabled}-${a.type}`,
-				label: a.label,
-				width: a.width,
-				align: a.align,
-				prop: a.prop,
-				options: a.options,
-				"show-overflow-tooltip": !T.available && a.showOverflowTooltip
-			}, {
-				header: g(() => [!T.inputDisabled && a.required ? (u(), i("span", C, "*")) : r("v-if", !0), s(" " + m(a.label), 1)]),
-				default: g(({ row: o, column: c, $index: d }) => [
-					r("tag 插槽"),
-					f(e.$slots, "tag", {
-						row: o,
-						column: c,
-						index: d
-					}),
-					r("列默认插槽,名字和 prop 保持一致"),
-					f(e.$slots, a.prop, {
-						row: o,
-						column: c,
-						index: d
-					}, () => {
-						var e;
-						return [T.available && T.getCellType(o, a) === "input" ? (u(), n(O, l({
-							key: 0,
-							value: o[c.property]
-						}, { ref_for: !0 }, T.getInputAttr(o, a), {
-							disabled: T.isInputDisabled(o, a),
-							prop: `${y.prop}[${d}].${a.prop}`,
-							required: a.required,
-							onInput: (e) => T.onInput(o, e, a)
-						}), null, 16, [
-							"value",
-							"disabled",
-							"prop",
-							"required",
-							"onInput"
-						])) : T.available && T.getCellType(o, a) === "inputPhoneNumber" ? (u(), n(k, l({
-							key: 1,
-							value: o[c.property]
-						}, { ref_for: !0 }, T.getInputAttr(o, a), {
-							disabled: T.isInputDisabled(o, a),
-							prop: `${y.prop}[${d}].${a.prop}`,
-							required: a.required,
-							onInput: (e) => T.onInput(o, e, a)
-						}), null, 16, [
-							"value",
-							"disabled",
-							"prop",
-							"required",
-							"onInput"
-						])) : T.available && T.getCellType(o, a) === "user" ? (u(), i(t, { key: 2 }, [a.single ? (u(), n(A, l({
-							key: 0,
-							name: o[c.property],
-							"onUpdate:name": (e) => o[c.property] = e
-						}, { ref_for: !0 }, T.getInputAttr(o, a), {
-							disabled: T.isInputDisabled(o, a),
-							prop: `${y.prop}[${d}].${a.prop}`,
-							required: a.required,
-							onInput: (e) => T.onInput(o, e, a)
-						}), null, 16, [
-							"name",
-							"onUpdate:name",
-							"disabled",
-							"prop",
-							"required",
-							"onInput"
-						])) : (u(), n(A, l({
-							key: 1,
-							value: o[c.property]
-						}, { ref_for: !0 }, T.getInputAttr(o, a), {
-							disabled: T.isInputDisabled(o, a),
-							prop: `${y.prop}[${d}].${a.prop}`,
-							required: a.required,
-							onInput: (e) => T.onInput(o, e, a)
-						}), null, 16, [
-							"value",
-							"disabled",
-							"prop",
-							"required",
-							"onInput"
-						]))], 64)) : T.available && T.getCellType(o, a) === "department" ? (u(), i(t, { key: 3 }, [a.single ? (u(), n(j, l({
-							key: 0,
-							name: o[c.property],
-							"onUpdate:name": (e) => o[c.property] = e,
-							"ou-type": a.ouType
-						}, { ref_for: !0 }, T.getInputAttr(o, a), {
-							disabled: T.isInputDisabled(o, a),
-							prop: `${y.prop}[${d}].${a.prop}`,
-							required: a.required,
-							onInput: (e) => T.onInput(o, e, a)
-						}), null, 16, [
-							"name",
-							"onUpdate:name",
-							"ou-type",
-							"disabled",
-							"prop",
-							"required",
-							"onInput"
-						])) : (u(), n(j, l({
-							key: 1,
-							value: o[c.property]
-						}, { ref_for: !0 }, T.getInputAttr(o, a), {
-							disabled: T.isInputDisabled(o, a),
-							prop: `${y.prop}[${d}].${a.prop}`,
-							required: a.required,
-							onInput: (e) => T.onInput(o, e, a)
-						}), null, 16, [
-							"value",
-							"disabled",
-							"prop",
-							"required",
-							"onInput"
-						]))], 64)) : T.available && T.getCellType(o, a) === "select" ? (u(), n(M, l({
-							key: 4,
-							value: o[c.property]
-						}, { ref_for: !0 }, T.getInputAttr(o, a), {
-							disabled: T.isInputDisabled(o, a),
-							prop: `${y.prop}[${d}].${a.prop}`,
-							options: a.options,
-							required: a.required,
-							onInput: (e) => T.onInput(o, e, a)
-						}), null, 16, [
-							"value",
-							"disabled",
-							"prop",
-							"options",
-							"required",
-							"onInput"
-						])) : T.available && T.getCellType(o, a) === "datePicker" ? (u(), n(N, l({
-							key: 5,
-							ref_for: !0
-						}, T.getInputAttr(o, a), {
-							start: o[a.start],
-							"onUpdate:start": (e) => o[a.start] = e,
-							end: o[a.end],
-							"onUpdate:end": (e) => o[a.end] = e,
-							value: o[c.property],
-							disabled: T.isInputDisabled(o, a),
-							prop: `${y.prop}[${d}].${a.prop}`,
-							required: a.required,
-							onInput: (e) => T.onInput(o, e, a)
-						}), null, 16, [
-							"start",
-							"onUpdate:start",
-							"end",
-							"onUpdate:end",
-							"value",
-							"disabled",
-							"prop",
-							"required",
-							"onInput"
-						])) : T.available && T.getCellType(o, a) === "cascader" ? (u(), n(P, l({
-							key: 6,
-							value: o[c.property]
-						}, { ref_for: !0 }, T.getInputAttr(o, a), {
-							disabled: T.isInputDisabled(o, a),
-							prop: `${y.prop}[${d}].${a.prop}`,
-							required: a.required,
-							"label-key": a.labelKey,
-							"value-key": a.valueKey,
-							onInput: (e) => T.onInput(o, e, a)
-						}), null, 16, [
-							"value",
-							"disabled",
-							"prop",
-							"required",
-							"label-key",
-							"value-key",
-							"onInput"
-						])) : T.available && T.getCellType(o, a) === "checkbox" ? (u(), n(F, l({
-							key: 7,
-							value: o[c.property]
-						}, { ref_for: !0 }, T.getInputAttr(o, a), {
-							disabled: T.isInputDisabled(o, a),
-							prop: `${y.prop}[${d}].${a.prop}`,
-							required: a.required,
-							onInput: (e) => T.onInput(o, e, a)
-						}), null, 16, [
-							"value",
-							"disabled",
-							"prop",
-							"required",
-							"onInput"
-						])) : T.available && T.getCellType(o, a) === "number" ? (u(), n(I, l({
-							key: 8,
-							value: o[c.property]
-						}, { ref_for: !0 }, T.getInputAttr(o, a), {
-							disabled: T.isInputDisabled(o, a),
-							prop: `${y.prop}[${d}].${a.prop}`,
-							required: a.required,
-							onInput: (e) => T.onInput(o, e, a)
-						}), null, 16, [
-							"value",
-							"disabled",
-							"prop",
-							"required",
-							"onInput"
-						])) : T.available && T.getCellType(o, a) === "textarea" ? (u(), n(L, l({
-							key: 9,
-							rows: a.rows || "3",
-							value: o[c.property]
-						}, { ref_for: !0 }, T.getInputAttr(o, a), {
-							disabled: T.isInputDisabled(o, a),
-							prop: `${y.prop}[${d}].${a.prop}`,
-							required: a.required,
-							onInput: (e) => T.onInput(o, e, a)
-						}), null, 16, [
-							"rows",
-							"value",
-							"disabled",
-							"prop",
-							"required",
-							"onInput"
-						])) : a.dicType || (e = a.options) != null && e.length ? (u(), n(R, {
-							key: 10,
-							"dict-type": a.dicType,
-							"id-as-value": a.idAsValue,
-							"label-as-value": a.labelAsValue,
-							column: c,
-							row: o,
-							options: a.options
-						}, null, 8, [
-							"dict-type",
-							"id-as-value",
-							"label-as-value",
-							"column",
-							"row",
-							"options"
-						])) : (u(), i(t, { key: 11 }, [s(m(T.getVal(o, c, a)), 1)], 64))];
-					})
-				]),
-				_: 2
-			}, 1032, [
-				"label",
-				"width",
-				"align",
-				"prop",
-				"options",
-				"show-overflow-tooltip"
-			])) : a.slot ? (u(), i(t, { key: 1 }, [r("列自定义插槽,名字和 prop 不一致"), f(e.$slots, "default")], 2112)) : r("v-if", !0)], 64))), 256))]),
-			f(e.$slots, "handle", {
-				add: T.add,
-				remove: T.remove
-			}),
-			(!y.value || y.value.length < y.limit) && !T.inputDisabled && T.enabled && y.editable && y.handleColumn ? (u(), n(z, {
-				key: 0,
-				label: "操作",
-				fixed: "right",
-				width: "80",
-				align: "center",
-				prop: "menu"
-			}, {
-				header: g(({ column: t, $index: n }) => [f(e.$slots, "handle-column-header", {
-					column: t,
-					index: n
-				}, () => [s(m(t.label), 1)])]),
-				default: g(({ row: e, $index: t }) => [y.showHandleColumnAddButton && y.value.length < y.maxLimit ? (u(), i("i", {
-					key: 0,
-					class: "el-icon-circle-plus sub-table-handle-button table-button-add",
-					style: {
-						"margin-right": "5px",
-						"font-size": "20px",
-						cursor: "pointer"
-					},
-					title: "添加",
-					onClick: _((n) => T.add(e, t), ["stop"])
-				}, null, 8, w)) : r("v-if", !0), y.value && y.value.length > 1 || y.allowEmpty ? (u(), n(B, {
-					key: 1,
-					class: "el-icon-error sub-table-handle-button table-button-remove",
-					title: "删除",
-					message: "您确定要删除该行吗？",
-					onClick: _((n) => T.remove(e, t), ["stop"])
-				}, null, 8, ["onClick"])) : r("v-if", !0)]),
-				_: 3
-			})) : r("v-if", !0)
-		]),
-		_: 2
-	}, [y.editable ? void 0 : {
-		name: "toolbar",
-		fn: g(() => [T.enabled || y.fetchApi ? (u(), i("div", S, [f(e.$slots, "toolbar", {
-			addRow: T.addRow,
-			delRow: T.delRow,
-			refresh: T.refresh
-		}, () => [T.enabled ? (u(), i(t, { key: 0 }, [c(E, {
-			class: "table-header-button add",
-			icon: "el-icon-circle-plus",
-			text: "",
-			onClick: T.addRow
-		}, {
-			default: g(() => [...v[1] || (v[1] = [s("添加", -1)])]),
-			_: 1
-		}, 8, ["onClick"]), c(D, {
-			class: "table-header-button remove",
-			message: "您确定要删除选中的记录吗？",
-			icon: "el-icon-error",
-			type: "text",
-			onClick: T.delRow
-		}, {
-			default: g(() => [...v[2] || (v[2] = [s(" 删除 ", -1)])]),
-			_: 1
-		}, 8, ["onClick"])], 64)) : r("v-if", !0), y.fetchApi ? (u(), n(E, {
-			key: 1,
-			class: "table-header-button refresh",
-			icon: "el-icon-refresh-left",
-			text: "",
-			disabled: !1,
-			onClick: T.refresh
-		}, {
-			default: g(() => [...v[3] || (v[3] = [s(" 刷新 ", -1)])]),
-			_: 1
-		}, 8, ["onClick"])) : r("v-if", !0)])])) : r("v-if", !0)]),
-		key: "0"
-	}, y.allowEmpty && !T.inputDisabled && y.showEmptyAddButton ? {
-		name: "empty",
-		fn: g(() => [a("i", {
-			class: "el-icon-circle-plus sub-table-handle-button table-button-add",
-			style: {
-				"font-size": "20px",
-				cursor: "pointer"
-			},
-			title: "添加",
-			onClick: v[0] || (v[0] = _((e) => T.add(null, 0), ["stop"]))
-		})]),
-		key: "1"
-	} : void 0]), 1040, [
-		"data",
-		"api",
-		"show-summary",
-		"selection-width",
-		"selection",
-		"onSelectionChange"
-	]);
-}
-var E = /* @__PURE__ */ e(x, [["render", T]]);
-//#endregion
-export { E as default };

package/sub-table/style.css

@@ -1 +0,0 @@
-.sub-table.pageable-table.auto-height .el-table{min-height:0}.sub-table .el-form-item{width:100%;margin-bottom:0}.sub-table .el-col{width:100%}.sub-table .table-header{background-color:#f3f5fb;border:1px solid #dfe6ec;border-bottom:none;padding:2px 10px}.sub-table .table-header-button:hover,.sub-table .table-header-button:focus{color:#595959}.sub-table .table-header-button i+span{margin-left:0}.sub-table .table-header-button i{font-size:15px}.sub-table .table-header-button.add i{color:#4886ec}.sub-table .table-header-button.remove i{color:#e34e55}.sub-table .table-header-button.refresh i{color:#1eb91e}.sub-table .table-button-add{color:#5add7a;opacity:.8}.sub-table .table-button-add:hover{opacity:1}.sub-table .table-button-remove{color:#ddd}.sub-table .table-button-remove:hover{color:#ef6666}.sub-table .el-table__header-wrapper .el-table__header th{background-color:#f3f5fb;padding:5px 0}.sub-table .el-table{border-top-color:#dde1e5}.sub-table .el-table td{border-color:#dfe6ec}.sub-table .el-col{padding:0!important}.sub-table .row-indicator{border:6px solid #0000;border-bottom-color:#f5690c;width:0;height:0;display:inline-block;position:absolute;top:-6px;right:-6px;transform:rotate(45deg)}.sub-table .sub-table-handle-button{cursor:pointer;font-size:20px}.sub-table .sub-table-handle-button+.sub-table-handle-button{margin-left:5px}.sub-table .el-table .el-table__header th{line-height:inherit;padding:5px 0;background:#f3f5fb!important}