form-designer-xinyi
Version:
基于vue3的设计器,可视化开发页面表单
252 lines (251 loc) • 8.29 kB
JavaScript
import { reactive as $, inject as v, onMounted as R, watch as W, nextTick as q, defineComponent as B, ref as N, provide as D, computed as V, openBlock as C, createElementBlock as F, createVNode as H, unref as j, mergeProps as z, withCtx as G, renderSlot as L, Fragment as J, renderList as K } from "vue";
import { Form as Q } from "ant-design-vue";
import { a as U, c as M } from "./revoke-iScTU0eW.js";
function X(f = null) {
const l = $({}), c = v("pageManager");
let o = [], u = {}, a = {};
R(() => {
W(() => l, (e) => {
q(() => {
for (const t in e) {
let r = !1;
Array.isArray(e[t]) ? r = !A(e[t], u[t]) : r = e[t] !== u[t], r && (o == null || o.forEach((s) => {
s.condition.conditions.map((i) => i.field).includes(t) && (m(s.condition) ? s.actions.forEach((i) => {
setTimeout(() => {
h(i);
}, 0);
}) : s.actions.filter((i) => i.reverseExecute).forEach((i) => {
setTimeout(() => {
h(i, !0);
}, 0);
}));
}));
}
u = U(e);
});
}, { deep: !0, immediate: !0 });
});
function A(e, t) {
if (!e && !t) return !0;
if (!e || !t || e.length !== t.length) return !1;
for (let r = 0; r < e.length; r++)
if (e[r] !== t[r]) return !1;
return !0;
}
function m(e) {
return e.operator === "and" ? e.conditions.every((t) => {
if (!t.field) return !0;
const r = l[t.field];
return p(r, t);
}) : e.operator === "or" ? e.conditions.some((t) => {
if (!t.field) return !0;
const r = l[t.field];
return p(r, t);
}) : !0;
}
function p(e, t) {
if (!t.value) return !1;
switch (t.operator) {
case "eq":
return typeof e == "object" ? M(e, t.value) : e === t.value;
case "neq":
return typeof e == "object" ? !M(e, t.value) : e !== t.value;
case "gt":
return (typeof e == "number" || typeof e == "string") && e > t.value;
case "gte":
return (typeof e == "number" || typeof e == "string") && e >= t.value;
case "lt":
return (typeof e == "number" || typeof e == "string") && e < t.value;
case "lte":
return (typeof e == "number" || typeof e == "string") && e <= t.value;
case "in":
return g(e, t.value);
case "nin":
return !g(e, t.value);
case "null":
return e == null || e.length === 0;
case "notNull":
return e != null && e.length > 0;
default:
return !0;
}
}
function h(e, t = !1) {
var s, i, P, _;
if (!e.field) return;
const r = c.find(e.field);
if (t) {
if (["setValue"].includes(e.trigger ?? "")) {
r.setValue(null);
return;
}
if (["addValue"].includes(e.trigger ?? "")) {
if (e.field.split("_")[0] == "checkbox") {
const d = r.getValue() ? r.getValue() : [], n = e.value;
d.length && r.setValue(k(d, n));
} else {
const d = r.getValue() ? r.getValue() : "", n = e.value;
d.length > 0 && r.setValue(S(d, n));
}
return;
}
}
if (r)
switch (e.trigger) {
case "hide":
r.setAttr("hidden", !t), ((s = r.componentSchema) == null ? void 0 : s.type) == "card" && ((i = r.componentSchema.children) != null && i.length) && (t ? r.componentSchema.children.forEach((n) => {
a.hasOwnProperty(n.field) && q(() => {
l[n.field] = a[n.field], delete a[n.field];
});
}) : r.componentSchema.children.forEach((n) => {
l.hasOwnProperty(n.field) && (a[n.field] = l[n.field], delete l[n.field], delete u[n.field]);
}));
break;
case "show":
let w = t;
r.setAttr("hidden", w), ((P = r.componentSchema) == null ? void 0 : P.type) == "card" && ((_ = r.componentSchema.children) != null && _.length) && (w ? r.componentSchema.children.forEach((n) => {
l.hasOwnProperty(n.field) && (a[n.field] = l[n.field], delete l[n.field], delete u[n.field]);
}) : r.componentSchema.children.forEach((n) => {
a.hasOwnProperty(n.field) && q(() => {
l[n.field] = a[n.field], delete a[n.field];
});
}));
break;
case "required":
r.setAttr("required", !t), f == null || f();
break;
case "notRequired":
r.setAttr("required", t), f == null || f();
break;
case "readonly":
r.setAttr("readOnly", !t);
break;
case "readWrite":
r.setAttr("readOnly", t);
break;
case "disabled":
r.setAttr("disabled", !t);
break;
case "enabled":
r.setAttr("disabled", t);
break;
case "setValue":
r.setValue(e.value);
break;
case "addValue":
if (e.field.split("_")[0] == "checkbox") {
const n = r.getValue() ? r.getValue() : [], b = e.value, E = [...n, ...b], T = [...new Set(E)];
r.setValue(T);
} else {
const n = r.getValue() ? r.getValue() : "", b = e.value, E = [...n, ...b];
[...new Set(E)], r.setValue(n + b);
}
}
}
function y(e) {
o = e;
}
function S(e, t) {
return e.replace(new RegExp(t, "g"), "");
}
function k(e, t) {
return e.filter((r) => !t.includes(r));
}
function g(e, t) {
if (Array.isArray(e) && Array.isArray(t)) {
const r = new Set(e);
return t.every((s) => r.has(s));
} else {
if (Array.isArray(e) && typeof t != "object")
return new Set(e).has(t);
if (typeof e == "string" && typeof t == "string")
return e.includes(t);
}
return !1;
}
return {
formData: l,
setLogicRules: y
};
}
const Y = {
class: "form-main",
style: { height: "100%" }
}, I = /* @__PURE__ */ B({
__name: "form",
props: {
componentSchema: {
type: Object,
require: !0,
default: () => ({})
}
},
setup(f, { expose: l }) {
const c = f, o = N(null), u = v("forms", {}), { formData: a, setLogicRules: A } = X(h);
D("formData", a), D("form", o), W(() => c.componentSchema.componentProps.logicRules, (e) => {
A(e);
}, {
deep: !0,
immediate: !0
});
function m() {
return a;
}
function p() {
var e;
return (e = o.value) == null ? void 0 : e.validateFields();
}
function h() {
var e;
return (e = o.value) == null ? void 0 : e.clearValidate();
}
function y(e) {
Object.assign(a, e);
}
R(async () => {
var e, t, r, s;
if (((e = c.componentSchema) == null ? void 0 : e.type) === "form" && u.value && o.value) {
const i = ((r = (t = c.componentSchema) == null ? void 0 : t.componentProps) == null ? void 0 : r.name) ?? ((s = c.componentSchema) == null ? void 0 : s.name) ?? "default";
return o.value.validate = p, u.value[i] = o.value, o.value.getData = m, o.value.setData = y, !1;
}
});
const S = V(() => {
const e = c.componentSchema.componentProps;
let t = e.labelCol, r = e.wrapperCol;
return e.layout === "vertical" ? t = r = { span: 24 } : e.layout === "inline" && e.labelLayout === "fixed" ? (t = {}, r = { flex: 1 }) : e.labelLayout === "fixed" && (t = { flex: `${typeof e.labelWidth == "number" ? e.labelWidth + "px" : e.labelWidth}` }, r = { flex: 1 }), {
...e,
labelCol: t,
wrapperCol: r
};
});
function k(e) {
console.log(e);
}
const g = V(() => c.componentSchema.children ?? []);
return l({
form: o,
getData: m,
setData: y,
validate: p
}), (e, t) => (C(), F("div", Y, [
H(j(Q), z({
ref_key: "form",
ref: o,
model: j(a)
}, S.value, {
style: { height: "100%" },
onFinish: k
}), {
default: G(() => [
L(e.$slots, "edit-node", {}, () => [
(C(!0), F(J, null, K(g.value, (r) => L(e.$slots, "node", { componentSchema: r })), 256))
])
]),
_: 3
}, 16, ["model"])
]));
}
});
export {
I as default
};