epic-designer-dev
Version:
基于vue3的设计器,可视化开发页面表单。在epic-designer的基础上新增了字典选择器
174 lines (173 loc) • 6.21 kB
JavaScript
import { defineComponent as _, getCurrentInstance as J, inject as d, reactive as b, computed as p, watch as w, useAttrs as L, provide as T, shallowRef as G, onBeforeUnmount as H, resolveComponent as K, createBlock as B, createCommentVNode as Q, openBlock as A, withCtx as V, resolveDynamicComponent as W, mergeProps as X, unref as Y, renderSlot as E, createVNode as Z, normalizeProps as ee, guardReactiveProps as oe } from "vue";
/* empty css */
import te from "./dynamicFormItem.vue.js";
import "vuedraggable";
import { deepClone as m, deepEqual as ne, deepCompareAndModify as re, getValueByPath as le, setValueByPath as ae } from "../../../../utils/src/common/data.js";
import { capitalizeFirstLetter as se } from "../../../../utils/src/common/string.js";
import "@vueuse/core";
import "../../../../hooks/src/store/index.js";
import { pluginManager as k } from "../../../../utils/src/manager/pluginManager.js";
const he = /* @__PURE__ */ _({
name: "EpicNode",
__name: "node",
props: {
componentSchema: {},
modelValue: {},
name: {},
resetFormData: { type: Boolean },
ruleField: {}
},
emits: ["update:modelValue", "change"],
setup(S, { emit: $ }) {
const a = S, y = $, j = J();
let s = d("formData", b({}));
const N = d("slots", {}), i = d("pageManager", {}), c = d("disabled", {
value: !1
}), C = d("ruleFieldPrefix", null), U = d("resetFormData", !1), e = b(m(a.componentSchema)), P = p({
get() {
return f();
},
set: h
});
F(), w(
() => a.componentSchema,
(t) => {
ne(e, t, ["children"]) || (re(e, m(t)), F());
},
{
deep: !0
}
);
function f() {
return a.modelValue ?? le(s, e.field ?? "");
}
function F() {
i.isDesignMode.value && // 判断innerSchema.field的类型，仅在是字符串类型时追加后缀
// 检查 innerSchema.field 是否为字符串类型
typeof e.field == "string" && (e.field += "-design-mode");
}
(a.resetFormData || U) && (s = {});
const D = L();
Object.keys(D).length > 0 && T("nodeAttrs", D);
const u = G(null), I = p(() => {
var t, o;
return (t = e.componentProps) != null && t.hidden ? !1 : typeof e.show == "boolean" ? e.show : ((o = e.show) == null ? void 0 : o.call(e, { values: s })) ?? !0;
}), O = p(() => {
var r;
const t = I.value && ((r = e.rules) == null ? void 0 : r.map((n) => ({
...n,
validator: n.validator && i.funcs.value[n.validator]
// 自定义校验函数
})));
let o = e.field;
a.ruleField ? o = a.ruleField : C && e.field && (o = m(C), o.push(e.field));
const l = {
...e,
field: o,
rule: t,
rules: t
};
return l.children && delete l.children, l;
}), g = p(() => k.getComponentConfingByType(e.type) ?? null), v = p(() => {
var l, r;
const t = ((l = g.value) == null ? void 0 : l.bindModel) ?? "modelValue", o = {};
return e.on && Object.keys(e.on).forEach((n) => {
o[`on${se(n)}`] = (...q) => i.doActions(e.on[n], ...q);
}), {
...a,
...e.componentProps,
bindModel: t,
disabled: (c == null ? void 0 : c.value) || ((r = e.componentProps) == null ? void 0 : r.disabled),
...o
};
});
function M(t) {
const o = (t == null ? void 0 : t.component) ?? j;
!e.id || !o || (o.exposed ?? (o.exposed = {}), e.input && (o.exposed.setValue = h, o.exposed.getValue = f), o.exposed.schema = e, o.exposed.setAttr = (l, r) => (e.componentProps ?? (e.componentProps = {}), e.componentProps[l] = r), o.exposed.getAttr = (l) => {
var r;
return (r = e.componentProps) == null ? void 0 : r[l];
}, i.addComponentInstance(e.id, o));
}
function z() {
var t;
e.id && (i.removeComponentInstance(e.id), (t = g.value) != null && t.defaultSchema.input && e.noFormItem !== !0 && i.removeComponentInstance(`${e.id}_formItem`));
}
async function R() {
var o, l, r;
if (((o = e.componentProps) == null ? void 0 : o.defaultValue) !== void 0) {
const n = i.isDesignMode.value ? (l = e.componentProps) == null ? void 0 : l.defaultValue : s[e.field] ?? ((r = e.componentProps) == null ? void 0 : r.defaultValue);
h(m(n));
}
if (e.type === "slot") {
const n = e.slotName;
if (!n) return;
u.value = _({
setup() {
return () => E(N, n, {
componentSchema: e,
model: s
});
}
});
return;
}
const t = k.getComponent(e.type);
if (!t) {
console.error(`组件${e.type}未注册`);
return;
}
if (typeof t == "function") {
const n = await t();
u.value = n.default ?? n;
} else
u.value = t;
}
function h(t) {
const o = f();
t !== o && (e.field && ae(s, e.field, t), y("update:modelValue", t), y("change", t));
}
let x = null;
return w(
() => e,
(t) => {
const o = JSON.stringify({ ...t, children: void 0 });
if (o === x)
return !1;
x = o, R();
},
{
deep: !0,
immediate: !0
}
), M(), H(z), (t, o) => {
var r;
const l = K("EpicNode");
return u.value && I.value ? (A(), B(te, {
key: 0,
"has-form-item": e.noFormItem !== !0 && ((r = g.value) == null ? void 0 : r.defaultSchema.input),
"form-item-props": O.value
}, {
default: V(() => [
(A(), B(W(u.value), X({ ...v.value }, {
[v.value.bindModel]: P.value,
["onUpdate:" + v.value.bindModel]: o[0] || (o[0] = (n) => P.value = n),
model: Y(s),
onVnodeMounted: M
}), {
node: V((n) => [
Z(l, ee(oe(n)), null, 16)
]),
"edit-node": V(() => [
E(t.$slots, "edit-node")
]),
_: 3
}, 16, ["model"]))
]),
_: 3
}, 8, ["has-form-item", "form-item-props"])) : Q("", !0);
};
}
});
export {
he as default
};