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