epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
239 lines (238 loc) • 9.4 kB
JavaScript
import { defineComponent as N, getCurrentInstance as te, computed as m, reactive as oe, watch as O, useAttrs as ne, provide as re, shallowRef as le, ref as x, watchEffect as ie, onBeforeUnmount as ae, resolveComponent as ue, createBlock as $, createCommentVNode as se, openBlock as U, withCtx as b, resolveDynamicComponent as de, mergeProps as pe, unref as fe, renderSlot as H, createVNode as me, normalizeProps as ce, guardReactiveProps as ve } from "vue";
/* empty css */
/* empty css */
/* empty css */
import { pluginManager as B } from "../../../../manager/src/pluginManager.js";
import he from "./dynamicFormItem.vue.js";
/* empty css */
import "vue-draggable-plus";
import { deepClone as E, deepEqual as ye, deepCompareAndModify as ge, getValueByPath as Ce, setValueByPath as Ie } from "../../../../utils/src/common/data.js";
import { capitalizeFirstLetter as Ve } from "../../../../utils/src/common/string.js";
import "../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.js";
import "@vueuse/core";
import "../../../../hooks/src/store/index.js";
import { injectBuilderDisabled as Me } from "../../../../hooks/src/designer/useBuiderDisabled.js";
import { injectBuilderReadonly as Ee } from "../../../../hooks/src/designer/useBuiderReadonly.js";
import { useBuilderContext as Pe } from "../../../../hooks/src/designer/useBuilderContext.js";
import { useFieldPathPrefix as we } from "../../../../hooks/src/designer/useFieldPathPrefix.js";
import { NODE_ATTRS_KEY as De } from "../../../../hooks/src/designer/useNodeAttrs.js";
import { usePageManager as Re } from "../../../../hooks/src/designer/usePageManager.js";
import { useFormItem as xe } from "../../../../hooks/src/logic/useFormItem.js";
const Ye = /* @__PURE__ */ N({
name: "EpNode",
__name: "node",
props: {
componentSchema: {},
isProperty: { type: Boolean, default: !1 },
modelValue: { default: void 0 },
ruleField: { default: () => [] },
showHiddenItems: { type: Boolean, default: !1 }
},
emits: ["update:modelValue", "change"],
setup(W, { emit: z }) {
const s = W, q = z, L = te(), { formData: d } = xe(), { fieldStateMap: J, slots: K } = Pe(), Y = Me(), G = Ee(), i = Re(), C = we(), P = m(() => C ? C.join(".") : "default"), e = oe(
E(s.componentSchema, !s.isProperty)
), F = m({
get: w,
set: R
});
_(), O(
() => s.componentSchema,
(t) => {
ye(e, t, ["children"]) || (ge(e, E(t, !1)), _());
},
{
deep: !0
}
);
function w() {
return s.modelValue ?? Ce(d, e.field ?? "");
}
function _() {
i.isDesignMode.value && // 判断innerSchema.field的类型，仅在是字符串类型时追加后缀
// 检查 innerSchema.field 是否为字符串类型
typeof e.field == "string" && (e.field += "-design-mode");
}
const I = ne();
Object.keys(I).length > 0 && re(De, I);
const c = le(null), A = x(null), p = x(null), v = x(null);
ie(() => {
var f;
const t = e == null ? void 0 : e.field, o = t && ((f = J.value) == null ? void 0 : f[t]);
if (!o) {
p.value = null, v.value = null;
return;
}
const { condition: n, required: r, state: l } = o;
typeof n == "function" ? (p.value = n(d) ? l : null, v.value = n(d) ? r : null) : (p.value = l, v.value = r);
});
const V = m(() => {
var t, o;
return s.showHiddenItems && i.isDesignMode.value || p.value === "WRITE" ? !0 : (t = e.props) != null && t.hidden || p.value === "HIDE" ? !1 : typeof e.show == "boolean" ? e.show : ((o = e.show) == null ? void 0 : o.call(e, { values: d })) ?? !0;
}), Q = m(() => {
var h, y, a;
let t = V.value && ((h = e.rules) == null ? void 0 : h.map((u) => {
var j;
const g = { ...u };
return g.required !== void 0 && (g.required = v.value ?? ((j = e.props) == null ? void 0 : j.required) ?? g.required), u.validator && (g.validator = i.funcs.value[u.validator]), g;
}));
const o = v.value === !0 || ((y = e.props) == null ? void 0 : y.required), n = Array.isArray(t) && t.some((u) => u.required !== void 0);
if (o && !n) {
const u = {
message: "必填项",
required: !0,
trigger: ["change", "blur"],
type: "string"
};
t ? t.push(u) : t = [u];
}
let r = e.field;
s.ruleField && s.ruleField.length > 0 ? r = s.ruleField : C && e.field && (r = E(C), r.push(e.field));
const l = ((a = e.props) == null ? void 0 : a.style) ?? {}, f = {
...e,
...I,
field: r,
rule: t,
rules: t,
style: {
...l,
width: void 0
}
};
return f.children && delete f.children, f;
}), D = m(() => B.component.getComponentConfigByType(e.type) ?? null), k = m(() => {
var t;
return e.noFormItem !== !0 && ((t = D.value) == null ? void 0 : t.defaultSchema.input);
}), M = m(() => {
var l, f, h, y;
const t = ((l = D.value) == null ? void 0 : l.bindModel) ?? "modelValue", o = {};
i.isDesignMode.value || e.on && Object.keys(e.on).forEach((a) => {
o[`on${Ve(a)}`] = (...u) => i.doActions(
e.on[a],
P.value,
...u
);
});
const n = ((f = e.props) == null ? void 0 : f.style) ?? {}, r = k.value ? Object.fromEntries(
["height", "width"].filter((a) => n[a] !== void 0 && n[a] !== null).map((a) => [a, n[a]])
) : n;
return {
...s,
...I,
...e.props,
bindModel: t,
disabled: p.value !== "WRITE" && (p.value === "DISABLED" || Y.value || ((h = e.props) == null ? void 0 : h.disabled)),
hidden: !V.value,
readonly: p.value !== "WRITE" && (p.value === "READ" || G.value || ((y = e.props) == null ? void 0 : y.readonly)),
style: r,
...o
};
});
function X(t) {
A.value = t;
}
function S(t) {
V.value && (t ? i.mountMonitor.pop : i.mountMonitor.push)(
e.id
);
const o = (t == null ? void 0 : t.component) ?? L;
!e.id || !o || (o.exposed ?? (o.exposed = {}), e.input && (o.exposed.setValue = R, o.exposed.getValue = w), o.exposed.schema = e, o.exposed.setAttr = (n, r) => (e.props ?? (e.props = {}), e.props[n] = r), o.exposed.getAttr = (n) => {
var r;
return (r = e.props) == null ? void 0 : r[n];
}, i.addComponentInstance(e.id, o, P.value));
}
function Z() {
var t;
e.id && (i.removeComponentInstance(e.id, P.value), (t = D.value) != null && t.defaultSchema.input && e.noFormItem !== !0 && i.removeComponentInstance(`${e.id}_formItem`));
}
async function ee() {
var o, n, r;
if (((o = e.props) == null ? void 0 : o.defaultValue) !== void 0) {
const l = i.isDesignMode.value ? (n = e.props) == null ? void 0 : n.defaultValue : d[e.field] ?? ((r = e.props) == null ? void 0 : r.defaultValue);
R(E(l), !0);
}
if (await B.hook.execute("nodeRender", e), e.type === "slot") {
const l = e.slotName;
if (!l) return;
c.value = N({
setup() {
return () => H(K, l, {
componentSchema: e,
model: d
});
}
});
return;
}
const t = B.component.get(e.type);
if (!t) {
console.error(`组件${e.type}未注册`), i.mountMonitor.pop(e.id);
return;
}
if (typeof t == "function") {
const l = await t();
c.value = l.default ?? l;
} else
c.value = t;
}
function R(t, o) {
const n = w();
t !== n && (e.field && (Ie(d, e.field, t), o || i.hook.execute("formChange", {
field: e.field,
formData: d,
value: t
})), q("update:modelValue", t), q("change", t));
}
let T = null;
return O(
() => e,
(t) => {
const o = JSON.stringify({ ...t, children: void 0 });
if (o === T)
return !1;
T = o, ee();
},
{
deep: !0,
immediate: !0
}
), S(), ae(Z), (t, o) => {
const n = ue("EpNode");
return c.value && V.value ? (U(), $(he, {
key: 0,
"check-payload": A.value,
"has-form-item": k.value,
"form-item-props": Q.value
}, {
default: b(() => {
var r;
return [
(U(), $(de(c.value), pe(M.value, {
[M.value.bindModel]: F.value,
["onUpdate:" + M.value.bindModel]: o[0] || (o[0] = (l) => F.value = l),
model: fe(d),
onCheck: X,
class: {
"ep-hidden": (r = e.props) == null ? void 0 : r.hidden,
"ep-readonly": M.value.readonly
},
onVnodeMounted: S
}), {
node: b((l) => [
me(n, ce(ve(l)), null, 16)
]),
"edit-node": b(() => [
H(t.$slots, "edit-node")
]),
_: 3
}, 16, ["model", "class"]))
];
}),
_: 3
}, 8, ["check-payload", "has-form-item", "form-item-props"])) : se("", !0);
};
}
});
export {
Ye as default
};