@web-utils/form-ui 1.0.0-beta57 → 1.0.0-beta59

package/ElementForm-H_nKO2N3.js

@@ -0,0 +1,601 @@
+import { n as e } from "./rolldown-runtime-OaQ8AyCN.js";
+import { d as t, u as n } from "./scrollbar-BBrFtze_.js";
+import { n as r, t as i } from "./_plugin-vue_export-helper-BbfgGJ0Y.js";
+import { n as a, t as o } from "./select-q7vi1EDu.js";
+import { n as s, t as c } from "./table-8fnjrlxs.js";
+import { C as l, t as u } from "./ElementDialog-DnrnQDJh.js";
+import { t as d } from "./divider-aeGmEWI5.js";
+import { t as f } from "./drawer-TG22dm2D.js";
+import { Fragment as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, openBlock as b, renderList as x, withCtx as S, withModifiers as C } from "vue";
+import { fastClone as w } from "@web-utils/core";
+//#region src/components/bpmn-process-designer/components/penal/form/ElementForm.vue
+var T = /* @__PURE__ */ e({ default: () => F }), E = {
+	name: "ElementForm",
+	inject: {
+		prefix: "prefix",
+		width: "width"
+	},
+	props: {
+		id: String,
+		element: Object,
+		bpmnInstances: Object
+	},
+	data() {
+		return {
+			formKey: "",
+			businessKey: "",
+			optionModelTitle: "",
+			fieldList: [],
+			formFieldForm: {},
+			fieldType: {
+				long: "长整型",
+				string: "字符串",
+				boolean: "布尔类",
+				date: "日期类",
+				enum: "枚举类",
+				custom: "自定义类型"
+			},
+			formFieldIndex: -1,
+			formFieldOptionIndex: -1,
+			fieldModelVisible: !1,
+			fieldOptionModelVisible: !1,
+			fieldOptionForm: {},
+			fieldOptionType: "",
+			fieldEnumList: [],
+			fieldConstraintsList: [],
+			fieldPropertiesList: []
+		};
+	},
+	watch: { id: {
+		immediate: !0,
+		async handler(e) {
+			e && (await this.$nextTick(), this.resetFormList());
+		}
+	} },
+	methods: {
+		resetFormList() {
+			var e;
+			this.formKey = this.element.businessObject.formKey, this.elExtensionElements = this.element.businessObject.get("extensionElements") || this.bpmnInstances.moddle.create("bpmn:ExtensionElements", { values: [] }), this.formData = ((e = this.elExtensionElements.values.filter((e) => e.$type === `${this.prefix}:FormData`)) == null ? void 0 : e[0]) || this.bpmnInstances.moddle.create(`${this.prefix}:FormData`, { fields: [] }), this.businessKey = this.formData.businessKey, this.otherExtensions = this.elExtensionElements.values.filter((e) => e.$type !== `${this.prefix}:FormData`), this.fieldList = w(this.formData.fields || []), this.updateElementExtensions();
+		},
+		updateElementFormKey() {
+			this.bpmnInstances.modeling.updateProperties(this.element, { formKey: this.formKey });
+		},
+		updateElementBusinessKey() {
+			this.bpmnInstances.modeling.updateModdleProperties(this.element, this.formData, { businessKey: this.businessKey });
+		},
+		changeFieldTypeType(e) {
+			this.formFieldForm.type = e === "custom" ? "" : e;
+		},
+		openFieldForm(e, t) {
+			if (this.formFieldIndex = t, t !== -1) {
+				var n, r;
+				let i = this.formData.fields[t];
+				this.formFieldForm = w(e), this.formFieldForm.typeType = this.fieldType[e.type] ? e.type : "custom", e.type === "enum" && (this.fieldEnumList = w((i == null ? void 0 : i.values) || [])), this.fieldConstraintsList = w((i == null || (n = i.validation) == null ? void 0 : n.constraints) || []), this.fieldPropertiesList = w((i == null || (r = i.properties) == null ? void 0 : r.values) || []);
+			} else this.formFieldForm = {}, this.fieldEnumList = [], this.fieldConstraintsList = [], this.fieldPropertiesList = [];
+			this.fieldModelVisible = !0;
+		},
+		openFieldOptionForm(e, t, n) {
+			return this.fieldOptionModelVisible = !0, this.fieldOptionType = n, this.formFieldOptionIndex = t, n === "property" ? (this.fieldOptionForm = e ? w(e) : {}, this.optionModelTitle = "属性配置") : n === "enum" ? (this.fieldOptionForm = e ? w(e) : {}, this.optionModelTitle = "枚举值配置") : (this.fieldOptionForm = e ? w(e) : {}, this.optionModelTitle = "约束条件配置");
+		},
+		saveFieldOption() {
+			this.formFieldOptionIndex === -1 ? (this.fieldOptionType === "property" && this.fieldPropertiesList.push(this.fieldOptionForm), this.fieldOptionType === "constraint" && this.fieldConstraintsList.push(this.fieldOptionForm), this.fieldOptionType === "enum" && this.fieldEnumList.push(this.fieldOptionForm)) : this.fieldOptionType === "property" ? this.fieldPropertiesList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm) : this.fieldOptionType === "constraint" ? this.fieldConstraintsList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm) : this.fieldOptionType === "enum" && this.fieldEnumList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm), this.fieldOptionModelVisible = !1, this.fieldOptionForm = {};
+		},
+		saveField() {
+			let { id: e, type: t, label: n, defaultValue: r, datePattern: i } = this.formFieldForm, a = this.bpmnInstances.moddle.create(`${this.prefix}:FormField`, {
+				id: e,
+				type: t,
+				label: n
+			});
+			if (r && (a.defaultValue = r), i && (a.datePattern = i), this.fieldPropertiesList && this.fieldPropertiesList.length) {
+				let e = this.fieldPropertiesList.map((e) => this.bpmnInstances.moddle.create(`${this.prefix}:Property`, {
+					id: e.id,
+					value: e.value
+				}));
+				a.properties = this.bpmnInstances.moddle.create(`${this.prefix}:Properties`, { values: e });
+			}
+			if (this.fieldConstraintsList && this.fieldConstraintsList.length) {
+				let e = this.fieldConstraintsList.map((e) => this.bpmnInstances.moddle.create(`${this.prefix}:Constraint`, {
+					name: e.name,
+					config: e.config
+				}));
+				a.validation = this.bpmnInstances.moddle.create(`${this.prefix}:Validation`, { constraints: e });
+			}
+			this.fieldEnumList && this.fieldEnumList.length && (a.values = this.fieldEnumList.map((e) => this.bpmnInstances.moddle.create(`${this.prefix}:Value`, {
+				name: e.name,
+				id: e.id
+			}))), this.formFieldIndex === -1 ? (this.fieldList.push(this.formFieldForm), this.formData.fields.push(a)) : (this.fieldList.splice(this.formFieldIndex, 1, this.formFieldForm), this.formData.fields.splice(this.formFieldIndex, 1, a)), this.updateElementExtensions(), this.fieldModelVisible = !1;
+		},
+		removeFieldOptionItem(e, t, n) {
+			if (n === "property") {
+				this.fieldPropertiesList.splice(t, 1);
+				return;
+			}
+			if (n === "enum") {
+				this.fieldEnumList.splice(t, 1);
+				return;
+			}
+			this.fieldConstraintsList.splice(t, 1);
+		},
+		removeField(e, t) {
+			this.fieldList.splice(t, 1), this.formData.fields.splice(t, 1), this.updateElementExtensions();
+		},
+		updateElementExtensions() {
+			let e = this.bpmnInstances.moddle.create("bpmn:ExtensionElements", { values: this.otherExtensions.concat(this.formData) });
+			this.bpmnInstances.modeling.updateProperties(this.element, { extensionElements: e });
+		}
+	}
+}, D = { class: "panel-tab__content" }, O = { class: "element-property list-property" }, k = { class: "element-drawer__button" }, A = {
+	key: "enum-title",
+	class: "listener-filed__title"
+}, j = {
+	key: "validation-title",
+	class: "listener-filed__title",
+	style: { "padding-bottom": "6px" }
+}, M = {
+	key: "property-title",
+	class: "listener-filed__title",
+	style: { "padding-bottom": "6px" }
+}, N = { class: "element-drawer__button" };
+function P(e, i, w, T, E, P) {
+	let F = r, I = t, L = o, R = a, z = n, B = d, V = s, H = l, U = c, W = f, G = u;
+	return b(), g("div", D, [
+		y(z, {
+			"label-width": "80px",
+			onSubmit: i[2] || (i[2] = C(() => {}, ["prevent"]))
+		}, {
+			default: S(() => [y(I, { label: "表单标识" }, {
+				default: S(() => [y(F, {
+					modelValue: E.formKey,
+					"onUpdate:modelValue": i[0] || (i[0] = (e) => E.formKey = e),
+					clearable: "",
+					onChange: P.updateElementFormKey
+				}, null, 8, ["modelValue", "onChange"])]),
+				_: 1
+			}), y(I, { label: "业务标识" }, {
+				default: S(() => [y(R, {
+					modelValue: E.businessKey,
+					"onUpdate:modelValue": i[1] || (i[1] = (e) => E.businessKey = e),
+					onChange: P.updateElementBusinessKey
+				}, {
+					default: S(() => [(b(!0), g(p, null, x(E.fieldList, (e) => (b(), m(L, {
+						key: e.id,
+						value: e.id,
+						label: e.label
+					}, null, 8, ["value", "label"]))), 128)), y(L, {
+						label: "无",
+						value: ""
+					})]),
+					_: 1
+				}, 8, ["modelValue", "onChange"])]),
+				_: 1
+			})]),
+			_: 1
+		}),
+		_("div", O, [y(B, null, {
+			default: S(() => [...i[23] || (i[23] = [_("i", { class: "el-icon-coin" }, null, -1), v(" 表单字段 ", -1)])]),
+			_: 1
+		}), y(U, {
+			data: E.fieldList,
+			"max-height": "240",
+			border: "",
+			fit: ""
+		}, {
+			default: S(() => [
+				y(V, {
+					label: "序号",
+					type: "index",
+					width: "50px"
+				}),
+				y(V, {
+					label: "字段名称",
+					prop: "label",
+					"min-width": "80px",
+					"show-overflow-tooltip": ""
+				}),
+				y(V, {
+					label: "字段类型",
+					prop: "type",
+					"min-width": "80px",
+					formatter: (e) => E.fieldType[e.type] || e.type,
+					"show-overflow-tooltip": ""
+				}, null, 8, ["formatter"]),
+				y(V, {
+					label: "默认值",
+					prop: "defaultValue",
+					"min-width": "80px",
+					"show-overflow-tooltip": ""
+				}),
+				y(V, {
+					label: "操作",
+					width: "90px"
+				}, {
+					default: S(({ row: e, $index: t }) => [
+						y(H, {
+							text: "",
+							onClick: (n) => P.openFieldForm(e, t)
+						}, {
+							default: S(() => [...i[24] || (i[24] = [v("编辑", -1)])]),
+							_: 1
+						}, 8, ["onClick"]),
+						y(B, { direction: "vertical" }),
+						y(H, {
+							text: "",
+							style: { color: "#ff4d4f" },
+							onClick: (n) => P.removeField(e, t)
+						}, {
+							default: S(() => [...i[25] || (i[25] = [v("移除", -1)])]),
+							_: 1
+						}, 8, ["onClick"])
+					]),
+					_: 1
+				})
+			]),
+			_: 1
+		}, 8, ["data"])]),
+		_("div", k, [y(H, {
+			type: "primary",
+			icon: "el-icon-plus",
+			onClick: i[3] || (i[3] = (e) => P.openFieldForm(null, -1))
+		}, {
+			default: S(() => [...i[26] || (i[26] = [v("添加字段", -1)])]),
+			_: 1
+		})]),
+		y(W, {
+			visible: E.fieldModelVisible,
+			"onUpdate:visible": i[15] || (i[15] = (e) => E.fieldModelVisible = e),
+			class: "flow-drawer",
+			title: "字段配置",
+			size: `${P.width}px`,
+			"wrapper-closable": !1,
+			"append-to-body": "",
+			"destroy-on-close": ""
+		}, {
+			default: S(() => [
+				y(z, {
+					model: E.formFieldForm,
+					"label-width": "90px",
+					onSubmit: i[10] || (i[10] = C(() => {}, ["prevent"]))
+				}, {
+					default: S(() => [
+						y(I, { label: "字段ID" }, {
+							default: S(() => [y(F, {
+								modelValue: E.formFieldForm.id,
+								"onUpdate:modelValue": i[4] || (i[4] = (e) => E.formFieldForm.id = e),
+								clearable: ""
+							}, null, 8, ["modelValue"])]),
+							_: 1
+						}),
+						y(I, { label: "类型" }, {
+							default: S(() => [y(R, {
+								modelValue: E.formFieldForm.typeType,
+								"onUpdate:modelValue": i[5] || (i[5] = (e) => E.formFieldForm.typeType = e),
+								placeholder: "请选择字段类型",
+								clearable: "",
+								onChange: P.changeFieldTypeType
+							}, {
+								default: S(() => [(b(!0), g(p, null, x(E.fieldType, (e, t) => (b(), m(L, {
+									key: t,
+									label: e,
+									value: t
+								}, null, 8, ["label", "value"]))), 128))]),
+								_: 1
+							}, 8, ["modelValue", "onChange"])]),
+							_: 1
+						}),
+						E.formFieldForm.typeType === "custom" ? (b(), m(I, {
+							key: 0,
+							label: "类型名称"
+						}, {
+							default: S(() => [y(F, {
+								modelValue: E.formFieldForm.type,
+								"onUpdate:modelValue": i[6] || (i[6] = (e) => E.formFieldForm.type = e),
+								clearable: ""
+							}, null, 8, ["modelValue"])]),
+							_: 1
+						})) : h("", !0),
+						y(I, { label: "名称" }, {
+							default: S(() => [y(F, {
+								modelValue: E.formFieldForm.label,
+								"onUpdate:modelValue": i[7] || (i[7] = (e) => E.formFieldForm.label = e),
+								clearable: ""
+							}, null, 8, ["modelValue"])]),
+							_: 1
+						}),
+						E.formFieldForm.typeType === "date" ? (b(), m(I, {
+							key: 1,
+							label: "时间格式"
+						}, {
+							default: S(() => [y(F, {
+								modelValue: E.formFieldForm.datePattern,
+								"onUpdate:modelValue": i[8] || (i[8] = (e) => E.formFieldForm.datePattern = e),
+								clearable: ""
+							}, null, 8, ["modelValue"])]),
+							_: 1
+						})) : h("", !0),
+						y(I, { label: "默认值" }, {
+							default: S(() => [y(F, {
+								modelValue: E.formFieldForm.defaultValue,
+								"onUpdate:modelValue": i[9] || (i[9] = (e) => E.formFieldForm.defaultValue = e),
+								clearable: ""
+							}, null, 8, ["modelValue"])]),
+							_: 1
+						})
+					]),
+					_: 1
+				}, 8, ["model"]),
+				E.formFieldForm.type === "enum" ? (b(), g(p, { key: 0 }, [
+					y(B, { key: "enum-divider" }),
+					_("p", A, [i[28] || (i[28] = _("span", null, [_("i", { class: "el-icon-menu" }), v(" 枚举值列表： ")], -1)), y(H, {
+						type: "primary",
+						onClick: i[11] || (i[11] = (e) => P.openFieldOptionForm(null, -1, "enum"))
+					}, {
+						default: S(() => [...i[27] || (i[27] = [v("添加枚举值", -1)])]),
+						_: 1
+					})]),
+					y(U, {
+						key: "enum-table",
+						data: E.fieldEnumList,
+						"max-height": "240",
+						border: "",
+						fit: ""
+					}, {
+						default: S(() => [
+							y(V, {
+								label: "序号",
+								width: "50px",
+								type: "index"
+							}),
+							y(V, {
+								label: "枚举值编号",
+								prop: "id",
+								"min-width": "100px",
+								"show-overflow-tooltip": ""
+							}),
+							y(V, {
+								label: "枚举值名称",
+								prop: "name",
+								"min-width": "100px",
+								"show-overflow-tooltip": ""
+							}),
+							y(V, {
+								label: "操作",
+								width: "90px"
+							}, {
+								default: S(({ row: e, $index: t }) => [
+									y(H, {
+										text: "",
+										onClick: (n) => P.openFieldOptionForm(e, t, "enum")
+									}, {
+										default: S(() => [...i[29] || (i[29] = [v("编辑", -1)])]),
+										_: 1
+									}, 8, ["onClick"]),
+									y(B, { direction: "vertical" }),
+									y(H, {
+										text: "",
+										style: { color: "#ff4d4f" },
+										onClick: (n) => P.removeFieldOptionItem(e, t, "enum")
+									}, {
+										default: S(() => [...i[30] || (i[30] = [v("移除", -1)])]),
+										_: 1
+									}, 8, ["onClick"])
+								]),
+								_: 1
+							})
+						]),
+						_: 1
+					}, 8, ["data"])
+				], 64)) : h("", !0),
+				y(B, { key: "validation-divider" }),
+				_("p", j, [i[32] || (i[32] = _("span", null, [_("i", { class: "el-icon-menu" }), v(" 约束条件列表： ")], -1)), y(H, {
+					type: "primary",
+					style: { "margin-left": "auto" },
+					onClick: i[12] || (i[12] = (e) => P.openFieldOptionForm(null, -1, "constraint"))
+				}, {
+					default: S(() => [...i[31] || (i[31] = [v(" 添加约束 ", -1)])]),
+					_: 1
+				})]),
+				y(U, {
+					key: "validation-table",
+					data: E.fieldConstraintsList,
+					"max-height": "240",
+					border: "",
+					fit: ""
+				}, {
+					default: S(() => [
+						y(V, {
+							label: "序号",
+							width: "50px",
+							type: "index"
+						}),
+						y(V, {
+							label: "约束名称",
+							prop: "name",
+							"min-width": "100px",
+							"show-overflow-tooltip": ""
+						}),
+						y(V, {
+							label: "约束配置",
+							prop: "config",
+							"min-width": "100px",
+							"show-overflow-tooltip": ""
+						}),
+						y(V, {
+							label: "操作",
+							width: "90px"
+						}, {
+							default: S(({ row: e, $index: t }) => [
+								y(H, {
+									text: "",
+									onClick: (n) => P.openFieldOptionForm(e, t, "constraint")
+								}, {
+									default: S(() => [...i[33] || (i[33] = [v("编辑", -1)])]),
+									_: 1
+								}, 8, ["onClick"]),
+								y(B, { direction: "vertical" }),
+								y(H, {
+									text: "",
+									style: { color: "#ff4d4f" },
+									onClick: (n) => P.removeFieldOptionItem(e, t, "constraint")
+								}, {
+									default: S(() => [...i[34] || (i[34] = [v(" 移除 ", -1)])]),
+									_: 1
+								}, 8, ["onClick"])
+							]),
+							_: 1
+						})
+					]),
+					_: 1
+				}, 8, ["data"]),
+				y(B, { key: "property-divider" }),
+				_("p", M, [i[36] || (i[36] = _("span", null, [_("i", { class: "el-icon-menu" }), v(" 字段属性列表： ")], -1)), y(H, {
+					type: "primary",
+					style: { "margin-left": "auto" },
+					onClick: i[13] || (i[13] = (e) => P.openFieldOptionForm(null, -1, "property"))
+				}, {
+					default: S(() => [...i[35] || (i[35] = [v(" 添加属性 ", -1)])]),
+					_: 1
+				})]),
+				y(U, {
+					key: "property-table",
+					data: E.fieldPropertiesList,
+					"max-height": "240",
+					border: "",
+					fit: ""
+				}, {
+					default: S(() => [
+						y(V, {
+							label: "序号",
+							width: "50px",
+							type: "index"
+						}),
+						y(V, {
+							label: "属性编号",
+							prop: "id",
+							"min-width": "100px",
+							"show-overflow-tooltip": ""
+						}),
+						y(V, {
+							label: "属性值",
+							prop: "value",
+							"min-width": "100px",
+							"show-overflow-tooltip": ""
+						}),
+						y(V, {
+							label: "操作",
+							width: "90px"
+						}, {
+							default: S(({ row: e, $index: t }) => [
+								y(H, {
+									text: "",
+									onClick: (n) => P.openFieldOptionForm(e, t, "property")
+								}, {
+									default: S(() => [...i[37] || (i[37] = [v("编辑", -1)])]),
+									_: 1
+								}, 8, ["onClick"]),
+								y(B, { direction: "vertical" }),
+								y(H, {
+									text: "",
+									style: { color: "#ff4d4f" },
+									onClick: (n) => P.removeFieldOptionItem(e, t, "property")
+								}, {
+									default: S(() => [...i[38] || (i[38] = [v(" 移除 ", -1)])]),
+									_: 1
+								}, 8, ["onClick"])
+							]),
+							_: 1
+						})
+					]),
+					_: 1
+				}, 8, ["data"]),
+				_("div", N, [y(H, { onClick: i[14] || (i[14] = (e) => E.fieldModelVisible = !1) }, {
+					default: S(() => [...i[39] || (i[39] = [v("取 消", -1)])]),
+					_: 1
+				}), y(H, {
+					type: "primary",
+					onClick: P.saveField
+				}, {
+					default: S(() => [...i[40] || (i[40] = [v("保 存", -1)])]),
+					_: 1
+				}, 8, ["onClick"])])
+			]),
+			_: 1
+		}, 8, ["visible", "size"]),
+		y(G, {
+			visible: E.fieldOptionModelVisible,
+			"onUpdate:visible": i[22] || (i[22] = (e) => E.fieldOptionModelVisible = e),
+			class: "flow-dialog",
+			title: E.optionModelTitle,
+			width: "600px",
+			"append-to-body": "",
+			"destroy-on-close": ""
+		}, {
+			footer: S(() => [y(H, { onClick: i[21] || (i[21] = (e) => E.fieldOptionModelVisible = !1) }, {
+				default: S(() => [...i[41] || (i[41] = [v("取 消", -1)])]),
+				_: 1
+			}), y(H, {
+				type: "primary",
+				onClick: P.saveFieldOption
+			}, {
+				default: S(() => [...i[42] || (i[42] = [v("确 定", -1)])]),
+				_: 1
+			}, 8, ["onClick"])]),
+			default: S(() => [y(z, {
+				model: E.fieldOptionForm,
+				"label-width": "96px",
+				onSubmit: i[20] || (i[20] = C(() => {}, ["prevent"]))
+			}, {
+				default: S(() => [
+					E.fieldOptionType === "constraint" ? h("", !0) : (b(), m(I, {
+						key: "option-id",
+						label: "编号/ID"
+					}, {
+						default: S(() => [y(F, {
+							modelValue: E.fieldOptionForm.id,
+							"onUpdate:modelValue": i[16] || (i[16] = (e) => E.fieldOptionForm.id = e),
+							clearable: ""
+						}, null, 8, ["modelValue"])]),
+						_: 1
+					})),
+					E.fieldOptionType === "property" ? h("", !0) : (b(), m(I, {
+						key: "option-name",
+						label: "名称"
+					}, {
+						default: S(() => [y(F, {
+							modelValue: E.fieldOptionForm.name,
+							"onUpdate:modelValue": i[17] || (i[17] = (e) => E.fieldOptionForm.name = e),
+							clearable: ""
+						}, null, 8, ["modelValue"])]),
+						_: 1
+					})),
+					E.fieldOptionType === "constraint" ? (b(), m(I, {
+						key: "option-config",
+						label: "配置"
+					}, {
+						default: S(() => [y(F, {
+							modelValue: E.fieldOptionForm.config,
+							"onUpdate:modelValue": i[18] || (i[18] = (e) => E.fieldOptionForm.config = e),
+							clearable: ""
+						}, null, 8, ["modelValue"])]),
+						_: 1
+					})) : h("", !0),
+					E.fieldOptionType === "property" ? (b(), m(I, {
+						key: "option-value",
+						label: "值"
+					}, {
+						default: S(() => [y(F, {
+							modelValue: E.fieldOptionForm.value,
+							"onUpdate:modelValue": i[19] || (i[19] = (e) => E.fieldOptionForm.value = e),
+							clearable: ""
+						}, null, 8, ["modelValue"])]),
+						_: 1
+					})) : h("", !0)
+				]),
+				_: 1
+			}, 8, ["model"])]),
+			_: 1
+		}, 8, ["visible", "title"])
+	]);
+}
+var F = /* @__PURE__ */ i(E, [["render", P]]);
+//#endregion
+export { T as n, F as t };