gepic
Version:
基于vue3的设计器,可视化开发页面表单
166 lines (165 loc) • 6.22 kB
JavaScript
import { defineComponent as S, getCurrentInstance as H, ref as P, inject as s, reactive as A, watch as v, useAttrs as K, provide as Q, shallowRef as W, computed as g, watchEffect as X, onUnmounted as Y, resolveComponent as Z, createBlock as E, createCommentVNode as ee, openBlock as k, unref as x, withCtx as V, resolveDynamicComponent as oe, mergeProps as te, renderSlot as U, createVNode as ne, normalizeProps as re, guardReactiveProps as ae } from "vue";
import { pluginManager as R } from "../../../../utils/manager/pluginManager.js";
import "@vueuse/core";
import "../../../../hooks/store/index.js";
import { deepClone as h, deepEqual as le, deepCompareAndModify as de } from "../../../../utils/common/data.js";
import { capitalizeFirstLetter as ue } from "../../../../utils/common/string.js";
import ie from "./dynamicFormItem.vue.js";
const he = /* @__PURE__ */ S({
name: "ENode",
__name: "node",
props: {
componentSchema: {},
modelValue: {},
ruleField: {},
resetFormData: { type: Boolean },
name: {}
},
emits: ["update:modelValue", "change"],
setup($, { emit: j }) {
const { proxy: B } = H(), l = $, i = P(null);
let d = s("formData", A({}));
const O = s("slots", {}), u = s("pageManager", {}), y = s("disabled", { value: !1 }), F = s("ruleFieldPrefix", null), z = s("resetFormData", !1);
let e = A(h(l.componentSchema));
M(), v(() => l.componentSchema, (o) => {
le(e, o, ["children"]) || (de(e, h(o)), M());
}, {
deep: !0
});
function M() {
u.isDesignMode.value && typeof e.field == "string" && (e.field += "-design-mode");
}
(l.resetFormData || z) && (d = {});
const D = j, C = P(), I = P(), q = (o) => {
I.value = o;
}, b = K();
Object.keys(b).length && Q("nodeAttrs", b);
const m = W(null), w = g(() => {
var o, t;
return (o = e.componentProps) != null && o.hidden ? !1 : typeof e.show == "boolean" ? e.show : ((t = e.show) == null ? void 0 : t.call(e, { values: d })) ?? !0;
}), J = g(() => {
var a;
const o = w.value && ((a = e.rules) == null ? void 0 : a.map(
(n) => ({
...n,
validator: n.validator && u.funcs.value[n.validator]
// 自定义校验函数
})
));
let t = e.field;
l.ruleField ? t = l.ruleField : F && e.field && (t = h(F), t.push(e.field));
const r = {
...e,
rules: o,
rule: o,
field: t
};
return r.children && delete r.children, r;
}), p = g(() => {
var r, a;
const o = ((r = f.value) == null ? void 0 : r.bindModel) ?? "modelValue", t = {};
return e.on && Object.keys(e.on).forEach((n) => {
t[`on${ue(n)}`] = (...G) => u.doActions(e.on[n], ...G);
}), {
...l,
...e.componentProps,
disabled: (y == null ? void 0 : y.value) || ((a = e.componentProps) == null ? void 0 : a.disabled),
bindModel: o,
...t
};
}), f = g(() => R.getComponentConfingByType(e.type) ?? null);
X(() => {
i.value = l.modelValue ?? d[e.field ?? ""];
}), v(() => i.value, () => {
i.value !== (l.modelValue ?? d[e.field ?? ""]) && c(i.value);
}), v(() => C.value, () => {
_();
}, { immediate: !0 });
function _() {
var t;
const o = C.value || B;
e.id && o && (e.input && (o.setValue = c, o.getValue = () => d[e.field] || l.modelValue), o.setAttr = (r, a) => (e.componentProps || (e.componentProps = {}), e.componentProps[r] = a), o.getAttr = (r) => e.componentProps[r], u.addComponentInstance(e.id, o), (t = f.value) != null && t.defaultSchema.input && e.noFormItem !== !0 && I.value && u.addComponentInstance(e.id + "formItem", I.value));
}
function L() {
var o;
e.id && (u.removeComponentInstance(e.id), (o = f.value) != null && o.defaultSchema.input && e.noFormItem !== !0 && u.removeComponentInstance(e.id + "formItem"));
}
async function T() {
var t, r, a;
if (typeof ((t = e.componentProps) == null ? void 0 : t.defaultValue) < "u") {
const n = u.isDesignMode.value ? (r = e.componentProps) == null ? void 0 : r.defaultValue : d[e.field] ?? ((a = e.componentProps) == null ? void 0 : a.defaultValue);
c(h(n));
}
if (e.type === "slot") {
const n = e.slotName;
if (!n) return;
m.value = S({
setup() {
return () => U(O, n, {
componentSchema: e,
model: d
});
}
});
return;
}
const o = R.getComponent(e.type);
if (!o) {
console.error(`组件${e.type}未注册`);
return;
}
if (typeof o == "function") {
const n = await o();
m.value = n.default ?? n;
} else
m.value = o;
}
function c(o) {
D("update:modelValue", o), D("change", o), e.field && (d[e.field] = o);
}
let N = null;
return v(() => e, (o) => {
const t = JSON.stringify({ ...o, children: void 0 });
if (t === N)
return !1;
N = t, T();
}, {
immediate: !0,
deep: !0
}), Y(L), (o, t) => {
var a;
const r = Z("ENode");
return m.value && w.value ? (k(), E(ie, {
key: 0,
"has-form-item": x(e).noFormItem !== !0 && ((a = f.value) == null ? void 0 : a.defaultSchema.input),
"form-item-props": J.value,
onUpdateFormItemRef: q
}, {
default: V(() => [
(k(), E(oe(m.value), te({
ref_key: "componentInstance",
ref: C
}, { ...p.value }, {
[p.value.bindModel]: i.value,
["onUpdate:" + p.value.bindModel]: t[0] || (t[0] = (n) => i.value = n),
model: x(d),
[`onUpdate:${p.value.bindModel}` || ""]: c,
onVnodeMounted: _
}), {
node: V((n) => [
ne(r, re(ae(n)), null, 16)
]),
"edit-node": V(() => [
U(o.$slots, "edit-node")
]),
_: 3
}, 16, ["model"]))
]),
_: 3
}, 8, ["has-form-item", "form-item-props"])) : ee("", !0);
};
}
});
export {
he as default
};