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