epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
69 lines (68 loc) • 2.04 kB
JavaScript
import { defineComponent as g, ref as u, inject as C, reactive as D, provide as w, onMounted as x, computed as d, openBlock as i, createElementBlock as m, createVNode as k, unref as P, mergeProps as j, withCtx as $, renderSlot as f, Fragment as B, renderList as E, createCommentVNode as F } from "vue";
import { b2 as L } from "./index-97ce4605.js";
const N = {
key: 0,
class: "form-main",
style: { height: "100%" }
}, q = /* @__PURE__ */ g({
__name: "form",
props: {
record: {
type: Object,
require: !0,
default: () => ({})
}
},
setup(p, { expose: v }) {
const o = p, t = u(null), l = C("forms", {}), h = u(!0), a = D({});
w("formData", a);
function s() {
return a;
}
function c(e) {
Object.assign(a, e);
}
function y() {
var e;
return (e = t.value) == null ? void 0 : e.validate();
}
x(async () => {
var e;
if (((e = o.record) == null ? void 0 : e.type) === "form" && l.value && t.value) {
const r = o.record.name ?? "default";
return l.value[r] = t.value, t.value.getData = s, t.value.setData = c, !1;
}
});
const b = d(() => {
const e = o.record.componentProps;
let r = e.labelCol, n = e.wrapperCol;
return e.labelLayout === "fixed" && (r = { style: `width:${e.labelWidth}px` }, n = { style: "width:auto;flex:1" }), {
...e,
labelCol: r,
wrapperCol: n
};
}), _ = d(() => o.record.children ?? []);
return v({
form: t,
getData: s,
setData: c,
validate: y
}), (e, r) => h.value ? (i(), m("div", N, [
k(P(L), j({
ref_key: "form",
ref: t,
model: a
}, b.value, { style: { height: "100%" } }), {
default: $(() => [
f(e.$slots, "edit-node", {}, () => [
(i(!0), m(B, null, E(_.value, (n) => f(e.$slots, "node", { record: n })), 256))
])
]),
_: 3
}, 16, ["model"])
])) : F("", !0);
}
});
export {
q as default
};