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