@coderlt/form-designer
Version:
基于vue3的设计器,可视化开发页面表单
408 lines (407 loc) • 15 kB
JavaScript
import { defineComponent as S, inject as L, openBlock as v, createElementBlock as f, Fragment as A, renderList as B, createElementVNode as s, toDisplayString as O, createVNode as I, unref as h, withCtx as R, createCommentVNode as q, createTextVNode as z, ref as k, computed as N, withDirectives as J, normalizeClass as j, vShow as T, reactive as G, createBlock as D, nextTick as H, toRaw as F, watch as Q } from "vue";
import { m as P, p as w, e as W, n as X } from "./index-74b7090f.js";
import { _ as U } from "./icon.vue_vue_type_script_setup_true_lang-3f9e4127.js";
import { d as Y } from "./vuedraggable.umd-6a5b6da9.js";
import { _ as Z } from "./tree.vue_vue_type_script_setup_true_lang-aab4f858.js";
import "./_commonjsHelpers-c5d32002.js";
import "./_vue_commonjs-external-eb7fec7f.js";
const ee = { class: "event-info" }, te = ["title"], ne = { class: "event-btn" }, oe = { class: "epic-action-editor-main" }, le = { class: "epic-editor-item" }, ae = { class: "w-36px text-lg" }, se = { class: "flex-1" }, ie = { key: 0 }, ce = { key: 1 }, de = { key: 2 }, ue = { class: "opr-box" }, re = ["onClick"], me = ["onClick"], pe = /* @__PURE__ */ S({
__name: "EActionEditorItem",
props: {
itemEvents: {
type: Array,
default: () => []
},
allEvents: {
type: Array,
default: () => []
},
modelValue: {
type: Object,
default: () => []
},
events: {
type: Object,
default: () => ({})
}
},
emits: ["add", "edit", "update:modelValue"],
setup(V, { emit: g }) {
const m = V, x = L("pageSchema");
function _(c) {
g("add", c);
}
function y(c) {
return P(x.schemas, c).label;
}
function p(c, d) {
var e;
const n = l(d);
n[d] = m.events[d].filter((b, $) => c !== $), (e = n[d]) != null && e.length || delete n[d], g("update:modelValue", n);
}
function i(c, d, n) {
g("edit", c, d, n);
}
function l(c) {
const d = {};
return m.allEvents.forEach((n) => {
if (!m.events[n.type].length || n.type === c)
return !1;
d[n.type] = m.events[n.type];
}), d;
}
return (c, d) => (v(!0), f(A, null, B(V.itemEvents, (n) => (v(), f("div", {
key: n.type,
class: "event-item"
}, [
s("div", ee, [
s("div", {
class: "event-label",
title: n.describe
}, O(n.describe), 9, te),
s("div", ne, [
I(h(U), {
name: "icon-tianjia1",
onClick: (e) => _(n.type)
}, null, 8, ["onClick"])
])
]),
s("div", oe, [
I(h(Y), {
modelValue: m.events[n.type],
"onUpdate:modelValue": (e) => m.events[n.type] = e,
"item-key": "id",
"component-data": {
type: "transition-group"
},
group: "option-list",
handle: ".handle",
animation: 200
}, {
item: R(({ element: e, index: b }) => [
s("div", le, [
s("div", ae, [
I(h(U), {
class: "mr-2 text-lg cursor-move handle",
name: "icon-tuozhuai"
})
]),
s("div", se, [
e.type === "component" ? (v(), f("div", ie, O(y(e.componentId)), 1)) : e.type === "custom" ? (v(), f("div", ce, " 自定义函数 ")) : e.type === "public" ? (v(), f("div", de, " 公共函数 ")) : q("", !0),
z(" " + O(e.methodName), 1)
]),
s("div", ue, [
s("div", {
class: "edit-btn",
onClick: ($) => i(b, n.type, e)
}, [
I(h(U), { name: "icon-tiaozheng" })
], 8, re),
s("div", {
class: "del-btn",
onClick: ($) => p(b, n.type)
}, [
I(h(U), { name: "icon-shanchu1" })
], 8, me)
])
])
]),
_: 2
}, 1032, ["modelValue", "onUpdate:modelValue"])
])
]))), 128));
}
}), ve = { class: "h-full flex flex-col" }, fe = /* @__PURE__ */ s("div", { class: "pb-2" }, " 自定义函数编辑 ", -1), he = /* @__PURE__ */ S({
__name: "EScriptEdit",
setup(V) {
const g = w.getComponent("monacoEditor"), m = {
theme: "vs-light",
selectOnLineNumbers: !0,
minimap: {
enabled: !1
}
}, x = k(null), _ = L("pageSchema");
return (y, p) => (v(), f("div", ve, [
fe,
I(h(g), {
ref_key: "monacoEditorRef",
ref: x,
modelValue: h(_).script,
"onUpdate:modelValue": p[0] || (p[0] = (i) => h(_).script = i),
class: "editor flex-1",
config: m,
language: "javascript"
}, null, 8, ["modelValue"])
]));
}
}), _e = { class: "epic-attribute-view" }, ge = ["title"], ye = { class: "attr-input" }, Ie = /* @__PURE__ */ S({
__name: "EArgsEditor",
props: {
modelValue: {},
actionArgsConfigs: {}
},
emits: ["update:modelValue"],
setup(V, { emit: g }) {
const m = V, x = N(() => m.modelValue ? JSON.parse(m.modelValue) : []);
function _(p) {
var i;
return typeof p.show == "boolean" ? p.show : typeof p.show == "function" ? (i = p.show) == null ? void 0 : i.call(p, { values: x.value }) : !0;
}
function y(p, i) {
const l = [
...JSON.parse(m.modelValue ?? "[]")
];
l[i] = p, g("update:modelValue", JSON.stringify(l));
}
return (p, i) => (v(), f("aside", _e, [
(v(!0), f(A, null, B(m.actionArgsConfigs, (l) => (v(), f("div", {
key: l.field + l.type
}, [
J(s("div", {
class: j(["attr-item", l.layout])
}, [
s("div", {
class: "attr-label",
title: l.label
}, O(l.label), 9, ge),
s("div", ye, [
I(h(W), {
record: { ...l, componentProps: { ...l.componentProps, input: !1, field: void 0, hidden: !1 }, show: !0, noFormItem: !0 },
"model-value": x.value[l.field],
"onUpdate:modelValue": (c) => y(c, l.field)
}, null, 8, ["record", "model-value", "onUpdate:modelValue"])
])
], 2), [
[T, _(l)]
])
]))), 128))
]));
}
}), xe = { class: "rounded bg-white epic-modal-action-main" }, Ce = { class: "epic-modal-left-panel h-full flex flex-col" }, Ve = { class: "flex flex-1 h-0 flex-col" }, Ee = { class: "flex-1 h-0" }, ke = { class: "epic-action-select h-30/100 flex flex-col" }, be = /* @__PURE__ */ s("div", { class: "mb-2" }, "动作选择", -1), $e = { class: "flex-1 overflow-auto pr-8px" }, Ne = ["onClick"], we = { class: "text-center pt-42px text-gray-400" }, Oe = { class: "epic-modal-right-panel" }, Ae = {
key: 1,
class: "text-center pt-42px text-gray-400"
}, Se = /* @__PURE__ */ S({
__name: "EActionModal",
emits: ["add", "edit"],
setup(V, { expose: g, emit: m }) {
const x = w.getComponent("modal"), _ = k(!0), y = L("pageSchema"), p = L("pageManager", {}), i = k(!1), l = k([]), c = k(null), d = N(() => {
var o;
return e.actionItem.type === "component" ? c.value ? (o = w.getComponentConfings()[c.value.type].config.action) == null ? void 0 : o.map((t) => ({ label: t.describe, value: t.type })) : [] : e.actionItem.type === "custom" ? Object.entries(p.funcs.value).filter(([t, E]) => typeof E == "function").map(([t]) => ({ label: t, value: t })) : e.actionItem.type === "public" ? Object.entries(w.publicMethods).map(([t]) => ({ label: t, value: t })) : [];
}), n = N(() => {
if (e.actionItem.type === "component" && c.value) {
console.log();
const o = w.getComponentConfings()[c.value.type].config.action, t = o == null ? void 0 : o.find((E) => E.type === e.actionItem.methodName);
return (t == null ? void 0 : t.argsConfigs) ?? [];
}
return [];
}), e = G({
actionItem: {
type: "custom",
methodName: "test",
componentId: null
},
cacheData: {}
});
function b() {
var o;
i.value = !0, _.value = !0, e.actionItem.type = "custom", e.actionItem.componentId = null, (o = d.value) != null && o.length && r(d.value[0].value);
}
function $(o) {
if (i.value = !0, _.value = !1, c.value = null, o.componentId) {
const t = P(y.schemas, o.componentId);
c.value = t, l.value = [o.componentId];
}
H(() => {
e.actionItem.componentId = o.componentId, e.actionItem.methodName = o.methodName, e.actionItem.type = o.type, e.actionItem.args = o.args;
});
}
function K() {
if (!e.actionItem.methodName) {
alert("请先选择动作方法");
return;
}
m(_.value ? "add" : "edit", X(F(e.actionItem))), M();
}
function M() {
i.value = !1, l.value = [], e.cacheData = {};
}
function a(o) {
var t;
e.actionItem.componentId = null, e.actionItem.type = o, c.value = null, e.actionItem.methodName = null, l.value = [], (t = d.value) != null && t.length && r(d.value[0].value);
}
function u(o) {
var t;
e.actionItem.args && (e.cacheData[e.actionItem.componentId + e.actionItem.methodName] = e.actionItem.args), e.actionItem.componentId = o.id, e.actionItem.type = "component", e.actionItem.methodName = null, c.value = o.record, (t = d.value) != null && t.length && r(d.value[0].value);
}
function r(o) {
e.actionItem.methodName = o, e.actionItem.args = e.cacheData[e.actionItem.componentId + e.actionItem.methodName];
}
return g({
handleOpen: b,
handleOpenEdit: $
}), (o, t) => (v(), D(h(x), {
modelValue: i.value,
"onUpdate:modelValue": t[4] || (t[4] = (E) => i.value = E),
class: "w-1200px",
width: "1200px",
onClose: M,
onOk: K,
title: "动作配置"
}, {
default: R(() => {
var E;
return [
s("div", xe, [
s("div", Ce, [
s("div", Ve, [
s("div", {
class: j(["fun-btn", { checked: e.actionItem.type === "custom" }]),
onClick: t[0] || (t[0] = (C) => a("custom"))
}, " 自定义函数 ", 2),
s("div", {
class: j(["fun-btn", { checked: e.actionItem.type === "public" }]),
onClick: t[1] || (t[1] = (C) => a("public"))
}, " 公共函数 ", 2),
z(" 组件 "),
s("div", Ee, [
I(h(Z), {
selectedKeys: l.value,
"onUpdate:selectedKeys": t[2] || (t[2] = (C) => l.value = C),
options: h(y).schemas,
onNodeClick: u
}, null, 8, ["selectedKeys", "options"])
])
]),
s("div", ke, [
be,
s("div", $e, [
(v(!0), f(A, null, B(d.value, (C) => (v(), f("div", {
class: j([{ checked: C.value === e.actionItem.methodName }, "action-item"]),
onClick: (Me) => r(C.value),
key: C.value
}, [
s("span", null, O(C.label), 1)
], 10, Ne))), 128)),
J(s("div", we, "当前组件暂无动作", 512), [
[T, !((E = d.value) != null && E.length)]
])
])
])
]),
s("div", Oe, [
e.actionItem.type === "custom" ? (v(), D(he, { key: 0 })) : n.value.length === 0 ? (v(), f("div", Ae, "暂无配置")) : (v(), D(Ie, {
key: 2,
modelValue: e.actionItem.args,
"onUpdate:modelValue": t[3] || (t[3] = (C) => e.actionItem.args = C),
actionArgsConfigs: n.value
}, null, 8, ["modelValue", "actionArgsConfigs"]))
])
])
];
}),
_: 1
}, 8, ["modelValue"]));
}
}), ze = /* @__PURE__ */ S({
__name: "index",
props: {
eventList: {
type: Array,
default: () => []
},
modelValue: {
type: Object
}
},
emits: ["update:modelValue"],
setup(V, { emit: g }) {
const m = V, x = w.getComponent("Collapse"), _ = w.getComponent("CollapseItem"), y = k(null);
let p = 0;
const i = N({
get() {
return m.modelValue;
},
set(a) {
g("update:modelValue", a);
}
}), l = k(["组件事件"]), c = N(() => m.eventList.filter((a) => a.events.length));
Q(() => c.value, (a) => {
a.length && (l.value = a[0].title);
}, {
immediate: !0
});
const d = N(() => m.eventList.map((a) => a.events).flat()), n = k({});
d.value.forEach((a) => {
n.value[a.type] = N({
get() {
var u;
return ((u = i.value) == null ? void 0 : u[a.type]) ?? [];
},
set(u) {
u && u.length ? i.value[a.type] = u.map((r) => F(r)) : delete i.value[a.type];
}
});
});
let e = "";
function b(a) {
var u;
(u = y.value) == null || u.handleOpen(), e = a;
}
function $(a, u, r) {
var o;
(o = y.value) == null || o.handleOpenEdit(r), p = a, e = u;
}
function K(a) {
n.value[e][p] = a, i.value[e] = [...n.value[e] ?? []];
}
function M(a) {
if (!i.value) {
i.value = { [e]: [...n.value[e] ?? [], a] };
return;
}
i.value[e] = [...n.value[e] ?? [], a];
}
return (a, u) => (v(), f(A, null, [
I(h(x), {
modelValue: l.value,
"onUpdate:modelValue": u[1] || (u[1] = (r) => l.value = r),
activeEey: l.value,
"onUpdate:activeEey": u[2] || (u[2] = (r) => l.value = r),
"expanded-names": l.value,
"onUpdate:expandedNames": u[3] || (u[3] = (r) => l.value = r)
}, {
default: R(() => [
(v(!0), f(A, null, B(c.value, (r) => (v(), D(h(_), {
key: r.title,
title: r.title,
header: r.title,
name: r.title
}, {
default: R(() => [
I(pe, {
modelValue: i.value,
"onUpdate:modelValue": u[0] || (u[0] = (o) => i.value = o),
"item-events": r.events,
"all-events": d.value,
events: n.value,
onAdd: b,
onEdit: $
}, null, 8, ["modelValue", "item-events", "all-events", "events"])
]),
_: 2
}, 1032, ["title", "header", "name"]))), 128))
]),
_: 1
}, 8, ["modelValue", "activeEey", "expanded-names"]),
I(Se, {
ref_key: "EActionModalRef",
ref: y,
onAdd: M,
onEdit: K
}, null, 512)
], 64));
}
});
export {
ze as default
};